/* Looms (docs/LOOMS.md): Loom, the team in my own order beside one person's open tasks.
   Locky Design System tokens only. */

/* The pages: Locky with friends, as on People. */
.view[data-page="looms"] { --locky: url("/img/locky-friends.png"); --locky-shows: block; }

/* ---------- the menu: Loom is a menu of its own with one link (app.js ownMenu), set apart in the sidebar with a gold
   edge. An own menu of several links is a labelled section like More's. */
.nav-own .nav-own-head { display: none; }
.nav-own-looms { --section-face: var(--face-gold); }
@media (min-width: 1100px) {
  body:has(.top .nav) .nav-own { margin-top: 10px; padding-top: 12px; border-top: 2px solid var(--top-line); }
  body:has(.top .nav) .nav-own .nav-more-list, body:has(.top .nav) .nav-own-one { padding-left: 8px; box-shadow: inset 3px 0 0 var(--section-face); border-radius: 0; }
  body:has(.top .nav) .nav-own .nav-own-head { display: flex; }
}

/* ---------- #/looms: the team on the left, the picked person's open tasks on the right (shown on the call) */
.looms-split { display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: 18px; align-items: start; }
.looms-side { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; padding: 8px; border-radius: var(--radius); background: var(--surface); border: 2px solid var(--keyline); box-shadow: 0 3px 0 var(--keyline); }
.looms-side-head { display: flex; justify-content: space-between; align-items: center; margin: 2px 6px 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.looms-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.looms-item { display: flex; align-items: center; gap: 2px; min-width: 0; }
.looms-grip {
  flex: none; width: 22px; height: 30px; display: grid; place-items: center; padding: 0; cursor: grab; touch-action: none;
  border: 0; border-radius: var(--radius-s); background: transparent; color: var(--faint, var(--muted)); font-size: 15px; line-height: 1; opacity: .55;
}
.looms-item:hover .looms-grip, .looms-grip:focus-visible { opacity: 1; background: var(--sunk); color: inherit; }
.looms-name {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-s);
  color: inherit; text-decoration: none; font-size: 14px; font-weight: 600; user-select: none;
}
.looms-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.looms-name:hover { background: var(--sunk); color: inherit; }
.looms-name.is-on { background: var(--accent-soft); font-weight: 800; box-shadow: inset 3px 0 0 var(--accent); }
.looms-list.is-sorting { cursor: grabbing; }
.looms-list.is-sorting .looms-name { pointer-events: none; }
.looms-item.is-dragging .looms-name { background: var(--attn); box-shadow: 0 8px 20px rgba(5, 8, 60, .25); }
.looms-item.is-dragging .looms-grip { cursor: grabbing; opacity: 1; }

.looms-pane { min-width: 0; }
.looms-pane-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; }
.looms-pane-head h1 { margin: 0; font-size: 24px; }
.looms-group-head { gap: 8px; padding: 0 12px; font-size: 13px; font-weight: 700; }
.looms-tasks .tk-row { grid-template-columns: 18px 74px minmax(0, 1fr) minmax(0, 180px) 84px; }
.looms-si { display: inline-flex; }

@media (max-width: 720px) {
  .looms-split { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .looms-side { position: static; max-height: none; padding: 6px; }
  .looms-side-head { display: none; }
  .looms-list { display: flex; overflow-x: auto; gap: 4px; scrollbar-width: thin; }
  .looms-item { flex: none; }
  .looms-name { padding: 6px 10px; }
  .looms-pane-head h1 { font-size: 20px; }
  .looms-tasks .tk-row { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; min-height: 44px; padding: 0 10px; }
  .looms-tasks .tk-key, .looms-tasks .tk-proj { display: none; }
}