/* vantage · public/css/taskedit.css · Fix 1 · v3
   v3 (37.7 — Pete: "I need to be able to reorder the tasks"): a crew's Its Tasks line carries ↑ ↓ to its left (one over the
   other), the task, then Move to… — under the task on a phone, beside it on a desk.
   v2 (37.3 — Pete: "categories are not crews!"): each dropdown of New Task and New Crew has its label over it.
   v1 (36.29 — Pete, 2026-10-24: "I want one button in the left hamburger that says create or edit tasks" · "two columns …
   left side is lists all of the tasks, and the right side lists all of the crews"): CREATE OR EDIT TASKS (taskedit.js) and
   its button in the left drawer (drawers.js v22). Every colour a token (or the crew's own, colours.js wear()); every measure
   rem, %, or the type scale — never a fixed width. */

/* the left drawer's one button, right under Egan: Egan's rectangle, its words left, no arrow */
.drawer__edit[hidden] { display: none; }
.drawer__editlink { text-decoration: none; }
.drawer__editlink > .ddrop__label { white-space: normal; overflow: visible; overflow-wrap: anywhere; }   /* (its words whole, on two lines where the drawer is narrow — never cut) */
.drawer__editlink.is-selected { outline: var(--selected-border); outline-offset: 0; }   /* (its pages up: a ring, never a heavier border) */
.drawer[data-state='rail'] .drawer__edit { display: none; }

/* the page */
.tedit { max-width: 72rem; }
.tedit__head { gap: calc(var(--pad) / 2); }
.tedit__back { align-self: flex-start; width: auto; }
.tedit__title { overflow-wrap: anywhere; }
.tedit__titleband { align-self: flex-start; max-width: 100%; background: var(--crew-face); color: var(--crew-ink); padding: calc(var(--pad) / 3) var(--pad); border-radius: var(--radius-cap); }
.tedit__subline { overflow-wrap: anywhere; }

/* the one line: what was last done, and Undo — stuck at the panel's foot while the page scrolls; not there until it speaks */
.tedit__line { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: var(--pad); width: 100%; font-size: var(--t-small); padding: calc(var(--pad) / 2) var(--pad); background: var(--panel); color: var(--text); border: var(--border); border-radius: var(--radius-cap); box-shadow: 0 -0.25rem 0.75rem oklch(0 0 0 / 0.25); }
.tedit__line[hidden] { display: none; }
.tedit__said { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.tedit__undo { margin-left: auto; width: auto; flex: 0 0 auto; }
.tedit__undo[hidden] { display: none; }

.tedit__find, .tedit__in { width: 100%; min-width: 0; font: inherit; font-size: var(--t-body); line-height: var(--lh); padding: calc(var(--pad) * 0.75); background: var(--card); color: var(--text); border: var(--border); border-radius: var(--radius-cap); }
.tedit__find::placeholder, .tedit__in::placeholder { color: var(--text2); }
.tedit__find:focus-visible, .tedit__in:focus-visible, .tedit__pick:focus-visible { outline: var(--selected-border); outline-offset: calc(var(--pad) / 4); }
.tedit__in[hidden] { display: none; }
.tedit__pick { width: 100%; min-width: 0; font: inherit; font-size: var(--t-label); }

/* THE TWO COLUMNS: tasks left, crews right — two columns at every width, each as wide as half the page */
.tedit__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); width: 100%; align-items: start; }
.tedit__col { display: flex; flex-direction: column; gap: calc(var(--gap) / 2); min-width: 0; }
.tedit__colhead { font-size: var(--t-card); margin: 0; }
.tedit__group { margin: calc(var(--pad) / 2) 0 0; color: var(--text2); font-weight: 700; }
.tedit__list { display: flex; flex-direction: column; gap: calc(var(--gap) / 2); width: 100%; min-width: 0; }
.tedit__item { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.1rem; width: 100%; min-height: 3rem; text-align: left; text-decoration: none; overflow-wrap: anywhere; }
.tedit__item.is-retired { opacity: 0.6; }
.tedit__item--skel { height: 3rem; background: var(--card-hover); }
.tedit__name { font-weight: 700; font-size: var(--t-label); line-height: var(--lh); }
.tedit__sub { font-size: var(--t-small); line-height: var(--lh); opacity: 0.85; }
.tedit__why { margin: 0; }

/* NEW TASK · NEW CREW at the top of their columns */
.tedit__new:empty { display: none; }
.tedit__newform { display: flex; flex-direction: column; gap: calc(var(--pad) / 2); width: 100%; padding: calc(var(--pad) / 2); background: var(--card); border: var(--border); border-radius: var(--radius-cap); }
.tedit__make { width: 100%; }
.tedit__newlabel { color: var(--text2); font-weight: 700; margin-bottom: calc(var(--pad) / -3); }   /* (v2) Its Crew · Its Category, over its dropdown */

/* one task, one crew: a field a line — its label over its control on a phone, beside it on a desk */
.tedit--one { max-width: 52rem; }
.tedit__body { gap: var(--gap); }
.tedit__field { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--pad) / 3); width: 100%; }
.tedit__label { font-weight: 700; }
.tedit__control { display: flex; flex-direction: column; gap: calc(var(--pad) / 2); min-width: 0; }
.tedit__link { font-size: var(--t-body); color: var(--text); }
.tedit__swatch { display: inline-flex; align-self: flex-start; align-items: center; min-height: 2.5rem; padding: calc(var(--pad) / 2) var(--pad); background: var(--crew-face); color: var(--crew-ink); font-weight: 700; border-radius: var(--radius-cap); }
.tedit__initials { max-width: 8rem; text-transform: uppercase; }
.tedit__initials::placeholder { text-transform: none; }
.tedit__seg { display: inline-flex; gap: calc(var(--pad) / 2); align-self: flex-start; }
.tedit__seg > .btn { width: auto; min-width: 6rem; }
@media (min-width: 48rem) {
  .tedit__field { grid-template-columns: 10rem minmax(0, 1fr); align-items: start; }
  .tedit__label { padding-top: calc(var(--pad) * 0.75); }
}

/* THE COLUMNS ON THE DATA ENTRY PDF — the strip, as the PDF heads them, then one line a column */
.tedit__columns { gap: calc(var(--pad) * 0.75); width: 100%; padding-top: var(--pad); border-top: var(--border); }
.tedit__strip { display: flex; flex-direction: column; width: 100%; max-width: 32rem; border: 0.12rem solid var(--text); background: var(--card); }
.tedit__stripname { background: var(--crew-face); color: var(--crew-ink); font-weight: 700; font-size: var(--t-label); padding: calc(var(--pad) / 3) calc(var(--pad) / 2); text-align: center; overflow-wrap: anywhere; }
.tedit__stripboxes { display: flex; width: 100%; }
.tedit__stripbox { flex: 1 1 0; min-width: 0; min-height: 2.5rem; display: grid; place-items: center; padding: 0.15rem; font-size: var(--t-small); font-weight: 700; text-align: center; line-height: 1.1; overflow-wrap: anywhere; border-left: 0.06rem solid var(--text); color: var(--text); }
.tedit__stripbox:first-child { border-left: 0; }
.tedit__stripbox.is-thick { box-shadow: inset 0 0 0 0.12rem var(--text); }
.tedit__stripbox.is-hand { font-style: italic; color: var(--text2); }
.tedit__collist { display: flex; flex-direction: column; gap: calc(var(--pad) / 2); width: 100%; }
.tedit__colrow { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'mv head' 'mv kind' 'mv width' 'mv off'; gap: calc(var(--pad) / 3) calc(var(--pad) / 2); align-items: center; width: 100%; padding: calc(var(--pad) / 2); background: var(--card); border: var(--border); border-radius: var(--radius-cap); }
.tedit__colrow > .tedit__mvs { grid-area: mv; display: flex; flex-direction: column; gap: calc(var(--pad) / 3); }
.tedit__colrow > .tedit__headin { grid-area: head; }
.tedit__colrow > :nth-child(3) { grid-area: kind; }
.tedit__colrow > :nth-child(4) { grid-area: width; }
.tedit__colrow > :nth-child(5) { grid-area: off; justify-self: start; }
.tedit__mv { width: 2.75rem; min-height: 2.5rem; padding: 0; }
.tedit__mvgap { display: block; width: 2.75rem; min-height: 2.5rem; }
.tedit__off { width: auto; min-height: 2.5rem; background: none; box-shadow: none; color: var(--text2); }
.tedit__off:hover { color: var(--text); }
.tedit__kindsaid, .tedit__keep { padding: calc(var(--pad) / 3) 0; }
.tedit__addcol { align-self: flex-start; width: auto; }
@media (min-width: 48rem) {
  .tedit__colrow { grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 0.8fr) 6.5rem; grid-template-areas: 'mv head kind width off'; }
  .tedit__colrow > .tedit__mvs { flex-direction: row; }
}

/* a crew's tasks: the task (its progress under its name), then where it can go */
.tedit__taskrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--pad) / 3); width: 100%; }
@media (min-width: 40rem) { .tedit__taskrow { grid-template-columns: minmax(0, 1fr) minmax(0, 12rem); align-items: center; } }

/* (v3) a crew's task with ↑ ↓: the arrows left, one over the other; Move to… under the task on a phone, beside it on a desk */
.tedit__taskrow--mv { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.tedit__taskrow--mv > .tedit__pick { grid-column: 2; }
.tedit__mvs--row { display: flex; flex-direction: column; gap: calc(var(--pad) / 3); }
@media (min-width: 40rem) {
  .tedit__taskrow--mv { grid-template-columns: auto minmax(0, 1fr) minmax(0, 12rem); }
  .tedit__taskrow--mv > .tedit__pick { grid-column: auto; }
}