/* ================= THE TASK EDITOR, WEARING THE ALTERNATE UX =================
   The suite does not carry a second task editor — altOpenTaskPreview() frames THIS page
   (`tasks.html?embed=task`, via appEmbedHref() in JS/core/app-destination.js) in an alt dialog
   so the board picker, email actions, AI, attachments and OKR link stay in the one place they
   are wired - sys_architecture.md, "Where the boundary between reuse and re-presentation
   sits"; the embed protocol itself is sys_design-system.md §13. Before classic_tasks.html
   retired on 2026-09-11, the same call framed IT instead and the reader saw CLASSIC inside an
   ALT shell; this file pays that cost as a PRESENTATION change only — restyle, never rebuild.

   `:root.embed-task` is the whole of the scope, and it is the safety, not a convention —
   classic_tasks.html's boot used to put `embed embed-task` on `<html>` only when `?embed=task`
   was in the URL, so an unframed reader saw none of this. tasks.html has answered the same embed
   mode since 2026-09-09 (with its own `a-embed` chrome-hiding class, not `embed`), which is why
   this file did not have to be copied when classic retired — everything before the SUITE HOST
   section at the foot was already shared by both documents unchanged; the foot's handful of
   host-specific rules are scoped `body.alt-app` so they reach only the Suite.

   The frame is an `<iframe>`, so `.alt-app` — the class every CSS/alt/ rule hangs off — is on
   the HOST page, not this one. The role→canonical mapping is therefore restated once, in one
   block, and must be kept in step with alt-tokens.css; everything after it speaks the alt
   vocabulary. */

/* ---------- the alt roles, for a document that cannot carry .alt-app ----------
   A mirror of alt-tokens.css, role for role and in its order — every colour still points at
   CSS/tokens.css, so light mode comes free the same way. Only the three with no canonical
   equivalent are restated for light below. */
:root.embed-task{
  /* surfaces */
  --a-bg:var(--bg);
  --a-panel:var(--panel);
  --a-raised:var(--panel-2);
  /* One step above `--panel-2` for things that float, and OPAQUE — percentages that sum past
     100 (CSS Color 5) silently add alpha; this must sum to 100 and stay in step with
     alt-tokens.css's own `--a-float`, which uses the same 96/4 split. */
  /* Plain declaration first: an engine without color-mix() discards the whole declaration, and
     an invalid --a-float takes every floating surface in the embed to `unset`. */
  --a-float:var(--panel-2);
  --a-float:color-mix(in srgb, var(--panel-2) 96%, var(--text) 4%);
  --a-line:var(--border);
  --a-line-soft:var(--border-soft);
  --a-line-strong:var(--border-strong);

  /* text */
  --a-text:var(--text);
  --a-dim:var(--text-dim);
  --a-faint:var(--text-faint);

  /* roles */
  --a-blue:var(--accent);
  --a-blue-fill:var(--accent-fill);
  --a-blue-text:var(--accent-text);
  --a-blue-soft:var(--accent-soft);
  --a-gold:#f5a623;
  --a-gold-soft:rgba(245,166,35,.16);
  --a-green:var(--green-text);
  --a-green-soft:var(--green-soft);
  --a-amber:var(--warn-text);
  --a-amber-soft:var(--yellow-soft);
  --a-red:var(--red-text);
  --a-red-soft:var(--red-soft);
  --a-purple:var(--purple-text);
  --a-purple-soft:var(--purple-soft);
  --a-ring:var(--focus-ring);

  /* spacing — the 4px scale */
  --a-1:4px; --a-2:8px; --a-3:12px; --a-4:16px; --a-5:20px; --a-6:24px; --a-8:32px;

  /* radii */
  --a-r-sm:6px; --a-r:9px; --a-r-lg:14px; --a-r-pill:999px;

  /* heights — one control height, so a select, a chip, a button and a field read as one row */
  --a-ctl:32px;
  --a-ctl-lg:36px;
  /* One step down, for the header's icon row only — the exact value `body.a-compact .alt-app`
     already gives `--a-ctl` (alt-shell.css), reused rather than a fourth number. Its own token,
     not a reassignment of `--a-ctl`, which sizes other controls here this request does not touch. */
  --a-ctl-sm:28px;

  /* elevation */
  --a-shadow:0 10px 30px rgba(0,0,0,.34);
  --a-shadow-sm:0 4px 14px rgba(0,0,0,.22);

  /* motion — the canonical durations, so reduced-motion is answered once */
  --a-quick:var(--dur-quick, 160ms);
  --a-ease:var(--ease-out, cubic-bezier(.2,.7,.3,1));

  /* type — the same two roles, through the same tokens as alt-tokens.css. This block is the
     framed editor's copy, because `:root.embed-task` is not inside `.alt-app` and cannot
     inherit them — a byte-identical copy of the literal stacks would have the reader's chosen
     font stop at this panel's edge instead of following them in. Same fallbacks, same reason:
     the panel must still draw if CSS/tokens.css does not load. --a-mono is untouched here too. */
  --a-display:var(--app-font-display, 'Space Grotesk', system-ui, sans-serif);
  --a-body:var(--app-font, 'Inter', system-ui, -apple-system, sans-serif);
  --a-mono:'JetBrains Mono', ui-monospace, monospace;
}
/* The theme class lands on BOTH <html> (the pre-paint boot in classic_tasks.html) and <body> (theme.js
   at runtime), so the token block has to key on the one that is always there first. */
:root.embed-task.theme-light{
  --a-float:var(--panel-2);                                    /* plain declaration first; see above */
  --a-float:color-mix(in srgb, var(--panel-2) 97%, #000 3%);   /* 97 + 3 = 100, opaque; matches alt-tokens.css's light block */
  --a-gold:#b06d05;
  --a-gold-soft:rgba(176,109,5,.14);
  --a-shadow:0 10px 30px rgba(19,32,54,.14);
  --a-shadow-sm:0 4px 14px rgba(19,32,54,.10);
}

/* Reduced motion here too — every transition in this file reads `var(--a-quick)`, so settling
   the token settles all of them, including the next one somebody writes. `1ms`, not `0s`: a
   zero-duration transition does not reliably fire `transitionend`, and this page has waiters on
   that event where the suite pages do not (CSS/components.css's modal rules made the same
   choice) — 1ms is indistinguishable from instant and cannot strand anything. */
@media (prefers-reduced-motion: reduce){
  :root.embed-task{ --a-quick:1ms; }
}

/* ================= PANEL GEOMETRY =================
   The frame is the panel — CSS/components.css's embed block already hides everything that is
   not the task and stretches #panel to fill the viewport, but not what that looks like at
   1350px wide (every input in the screenshot that started this work was an 8-character box in a
   1300px gap). So the panel gets a MEASURE: fields, header and tab strip all share one centred
   column capped at 1040px, rather than fields alone (a first attempt left the icon row and tabs
   against the frame's edge while the title sat 170px further in — three unrelated surfaces).
   Below 1040px the column simply is the frame. */
:root.embed-task body{ background:var(--a-bg); }
:root.embed-task #panel{ background:var(--a-panel); }

:root.embed-task .panel-body{
  /* The padding moves to the panes and to the tab strip, because each of them has to centre its
     OWN box on the measure — a padding here would centre the scroller instead, and the strip's
     rule would then start and stop somewhere other than where the fields do. */
  padding:0; gap:0;
  scrollbar-width:thin;
}
/* The scrollbar gutter, and why it's conditional — the header is a SIBLING of the scroller, so
   it centres on the panel's full width while scroller content centres on the width left over
   after the scrollbar (measured: a 5px step between the status dot and the title beneath it).
   Reserving the gutter on BOTH edges cancels that exactly, but only at the 1040px ceiling;
   dropped below it, where the pane fills the scroller and the gutter reappears as a flat
   offset instead. No frame this dialog opens at falls in the narrow band where neither is exact. */
@media (min-width:1090px){
  :root.embed-task .panel-body{ scrollbar-gutter:stable both-edges; }
}

/* All three panes, not two — naming them individually is what let one be forgotten once before
   (a new tab shipped with no pane width, centring or padding while the strip above it stayed
   put); listed together now, and that is the reason to check this rule when a fourth is added. */
:root.embed-task #panelDetailsPane.active,
:root.embed-task #panelCommentsPane.active,
:root.embed-task #panelAuditPane.active{
  width:100%; max-width:1040px; margin-inline:auto;
  padding:var(--a-5) var(--a-5) var(--a-6);
}
/* ---------- THE RHYTHM BETWEEN SECTIONS, NOT INSIDE ONE ----------

   THE PANE'S GAP IS WHAT A COLLAPSED EDITOR IS MADE OF. A shut `.tsec` is a header and nothing
   else -- `.tsec.collapsed > .tsec-body{ display:none }` -- so every rule about the section BODY
   is invisible in the state people spend most of their time in. Measured on 2026-09-05, with all
   sections shut: team_board.html's task modal stacks them at 0px apart, 29.75px per row;
   this pane put 16px of flex gap between each one and came out at 44.8px per row. Five sections
   collapsed were 224px here against the board's four at 119px. That gap -- not the body padding
   -- is what reads as slack, and no measurement of an OPEN section could have found it.

   THE BOARD'S MODEL, RESTATED. `#taskDetailsPane` has no gap at all: its rows carry their own
   `margin-bottom` and its sections sit flush, separated by the 1px rule `.tsec` already draws.
   So the spacing moves onto the CHILDREN that want it and off the container -- which is also
   what stops a container gutter having to be cancelled later (design-system, the rail gutter).

   WHICH CHILDREN. Everything that is not a section keeps the 16px it had; the last section keeps
   16px so the description below it is not welded to Attachments; the run of sections in between
   has none. `:last-of-type` rather than `:last-child` because `.tsec` is the only <section> in
   this pane, and the Reminders section ships `hidden` -- a `+` or `:last-child` answer changes
   meaning depending on whether that one is present. The final child needs no bottom margin: the
   pane's own `var(--a-6)` padding is the space under it. */
:root.embed-task #panelDetailsPane.active{ gap:0; }
:root.embed-task #panelDetailsPane.active > :not(.tsec):not(:last-child),
:root.embed-task #panelDetailsPane.active > .tsec:last-of-type:not(:last-child){
  margin-bottom:var(--a-4);
}

/* ---------- A SHORT FRAME SCROLLS. IT DOES NOT SQUEEZE. ----------

   THE FLEX SCROLL TRAP, AND WHY THE SCROLLBAR WAS NEVER THERE TO FIND. `.panel-body` is the
   scroller (`flex:1; min-height:0; overflow-y:auto`, classic_tasks.html) and the details pane is its one
   flex child, declared `flex:1; min-height:0`. `min-height:0` is what lets a flex item shrink
   below its content — so on a short frame the pane was sized to the SCROLLER and its children
   spilled out of it. The scroller's own scrollHeight never grew, because the child it measures
   is exactly as tall as it is. No scrollbar, and a description floor nobody could reach: the
   fields below it simply left the frame.

   `flex:1 0 auto` says the two things that were wanted all along — grow to fill a tall frame, and
   never shrink below what is in you. `min-height:auto` restores the content floor the `0` took
   away. On a tall frame nothing changes: the pane still fills, and `.field.split-row`'s `flex:1`
   still hands it every spare pixel. On a short one the pane is as tall as its content and
   `.panel-body` scrolls, which is the whole of the request.

   THE DETAILS PANE ONLY. `#panelCommentsPane.active` is `display:block` and has always scrolled
   through the ordinary block flow; giving it a flex answer to a problem it does not have would
   change a surface this is not asking about. */
:root.embed-task #panelDetailsPane.active{ flex:1 0 auto; min-height:auto; }

/* ---------- THE FRAMED EDITOR'S SECTION RHYTHM, AND THE HOLDING-NOTHING STATE ----------

   MOVED HERE FROM classic_tasks.html ON 2026-09-09, whole and unchanged, when the markup that
   `.panel-released` describes stopped living on that page too — the two rules were always meant
   to travel together, and classic's own comment named this file as their destination "when the
   tree is quiet." TWO HOSTS SINCE THAT SAME DAY, so restating `.tsec-body`'s gap here rather
   than on either page is what makes tasks.html get it for free instead of needing a third copy.

   `.tsec-body`'s TOKENS, NOT MEASURED PIXELS. The only spacing scale this file has is the alt
   4px scale, `--a-1`…`--a-8` — the board's 12px of body padding is restated as
   `var(--a-1) 0 var(--a-2)` on that scale, and its 16px field gap steps down one token to
   `var(--a-3)`. Measured 2026-09-05: five collapsed sections went from 224px to 160px, 44.8px
   per row to 32px, against the board's 29.75px — read together with the pane's own `gap:0`
   above; neither rule alone is the whole rhythm.

   THE HOLDING-NOTHING STATE. `#panelReleased` is `display:none` everywhere (CSS/task-editor-
   panel.css); the frame is the one place `.panel-released` on `#panel` has nowhere else to
   collapse the header and body TO, so here alone it swaps them for the released card. See
   CSS/task-editor-panel.css for `.panel-released-card` and its children — those are unconditional,
   not embed-scoped, so they stay with the box itself rather than here. */
:root.embed-task #panel .tsec-body{ gap:var(--a-3); padding:var(--a-1) 0 var(--a-2); }
:root.embed-task #panel.panel-released > .panel-head,
:root.embed-task #panel.panel-released > .panel-body{display:none;}
:root.embed-task #panel.panel-released #panelReleased{
  display:flex; flex:1; min-height:0; align-items:center; justify-content:center; padding:var(--a-5, 24px);
}

/* ================= THE HEADER =================
   One header block, not two — the alt dialog above already carries the task's title and close,
   so this row is purely the things you DO to the task; the dividing rule now belongs to the tab
   strip alone, so the header and tabs read as one piece of chrome. The stray divider: `.ph-right`
   holds popout | divider | close, and the embed block hides the two buttons, leaving a bare line
   hanging in the corner — a divider between nothing and nothing is not a divider. */
:root.embed-task .panel-head{
  width:100%; max-width:1040px; margin-inline:auto;
  padding:var(--a-2) var(--a-5) var(--a-1);
  border-bottom:0;
  gap:var(--a-2);
}
:root.embed-task .ph-right .ph-divider{ display:none; }
:root.embed-task .ph-divider{ background:var(--a-line-soft); height:18px; margin:0 var(--a-1); }
:root.embed-task .status-dot{ width:8px; height:8px; }

/* The header's icons are the alt icon button: square at the control height, quiet at rest, a
   real ground on hover rather than a tint. 28px, not `--a-ctl`'s 32 — `--a-ctl-sm` is the
   Suite's own compact-density value for this token, reused rather than a fifth number invented
   for one row; it clears the 24px pointer floor (sys_design-system.md "Touch and pointer") at
   every width this panel opens at. */
:root.embed-task .panel-head .icon-btn{
  width:var(--a-ctl-sm); height:var(--a-ctl-sm); padding:0;
  border-radius:var(--a-r-sm); color:var(--a-dim);
  transition:background var(--a-quick) var(--a-ease), color var(--a-quick) var(--a-ease);
}
/* A labelled icon button is not a square — squeezing a word into the icon-only control's fixed
   box is a flex-shrink fight the icon always loses: an SVG sized only by `width`/`height`
   attributes has no CSS-visible intrinsic size to protect, so it shrank to 0 while the label
   overflowed (measured: "Reactivate"/"Watch"/"Email" all spilling past their buttons). `:has()`
   keys the exception on the label span itself, so a future labelled icon-btn needs no new
   selector. Height tracks `--a-ctl-sm`, not `--a-ctl`, so a labelled and icon-only button still
   sit at the same row height. */
:root.embed-task .panel-head .icon-btn:has(.icon-btn-lb){
  width:auto; height:var(--a-ctl-sm); padding:0 var(--a-2); gap:5px;
}
/* The icon's own floor, so it never pays for a sibling word's space or grows to fill it —
   `flex-shrink:0` protects every `.icon-btn` here, and the explicit `width`/`height` catches the
   one icon (`altIcon('eye')`, JS/components/task-watch-mail.js) drawn with no size attributes of
   its own, which measured 47px — three times its neighbours — before this line. 14px, not 16,
   matches the Suite's own small-icon precedent (`.a-panel-ico svg`, alt-components.css) rather
   than inventing a sixth size. */
:root.embed-task .panel-head .icon-btn svg{ flex-shrink:0; width:14px; height:14px; }
:root.embed-task .panel-head .icon-btn:hover{
  background:var(--a-raised); color:var(--a-text); box-shadow:none;
}
:root.embed-task .panel-head .icon-btn:focus-visible{
  outline:2px solid var(--a-ring); outline-offset:2px;
}
/* The two coloured actions keep their colour — they're the two that change something a click
   can't take back. Only the tokens change, so they track the alt palette in both themes. */
:root.embed-task .panel-head .icon-btn.complete-btn{ color:var(--a-green); }
:root.embed-task .panel-head .icon-btn.complete-btn:hover{ background:var(--a-green-soft); color:var(--a-green); }
:root.embed-task .panel-head .icon-btn.danger{ color:var(--a-red); }
:root.embed-task .panel-head .icon-btn.danger:hover{ background:var(--a-red-soft); color:var(--a-red); }

/* ================= DETAILS / COMMENTS — WHAT IS THE FRAME'S, AND ONLY THAT =================
   The tab-strip TREATMENT itself lives in `.tabs-underline` (CSS/components.css), shared with
   the team board's copy of this same editor — this file must not grow a second copy. What stays
   is geometry no other host has: this strip spans a full-viewport frame whose panes cap at
   1040px, and must line up with them. Sticky, because the strip is the only way back to
   Comments and the pane is taller than the frame — which is also why the background is asserted
   here rather than left transparent: a pinned strip over scrolling content needs an opaque one. */
:root.embed-task #panelModalTabs{
  position:sticky; top:0; z-index:1;
  width:100%; max-width:1040px; margin-inline:auto;
  padding:0 var(--a-5);
  background:var(--a-panel);
}

/* ================= SECTION HEADINGS =================
   `.a-sec-h` — 10px, 700, uppercase, tracked, dimmed. The classic head is 11px/600 with looser
   tracking, which at this width reads as a small title rather than as a label for the block
   underneath it. The chevron, the collapsed summary and the button semantics are untouched. */
:root.embed-task .tsec{ border-top:1px solid var(--a-line-soft); }
:root.embed-task .tsec-head{
  padding:var(--a-2) 0; gap:var(--a-2); color:var(--a-dim); border-radius:var(--a-r-sm);
  transition:color var(--a-quick) var(--a-ease);
}
:root.embed-task .tsec-head:hover{ color:var(--a-text); }
:root.embed-task .tsec-head:focus-visible{ outline:2px solid var(--a-ring); outline-offset:2px; }
:root.embed-task .tsec-title{
  /* `--a-body`, not the display face: `.a-sec-h` sets no family at all and therefore inherits
     Inter from `.alt-app`. A section heading in Space Grotesk beside a field label in Inter is
     two vocabularies for the same thing. */
  font-family:var(--a-body); font-size:10px; font-weight:700; letter-spacing:.1em;
}
:root.embed-task .tsec-summary{ font-size:12px; color:var(--a-faint); }
:root.embed-task .tsec-body{ gap:var(--a-4); padding:var(--a-1) 0 var(--a-3); }
/* The section a `?focus=` link asked for. Same two-second announcement, alt ring. */
:root.embed-task .tsec.tsec-landed{
  outline:2px solid var(--a-blue); outline-offset:3px; border-radius:var(--a-r-sm);
}

/* ================= FIELDS =================

   THE LABEL IS THE `.a-field > span` OF THE ALT SYSTEM: 10px, 700, .09em, uppercase, dimmed. The
   exclusion of `.switch-check` is carried over verbatim from the classic rule and matters for the
   same reason it does there — a label that IS a control is not a caption for one, and dropping
   the exclusion lays the No date switch out as a block with the toggle on top of its own words. */
:root.embed-task .field label:not(.switch-check){
  margin-bottom:6px;
  font-family:var(--a-body); font-size:10px; font-weight:700; letter-spacing:.09em;
  color:var(--a-dim);
}

/* One control height, deliberately the taller of the two alt heights — `--a-ctl` (32px) is right
   for a toolbar; this is a form somebody types into, so fields take `--a-ctl-lg` and buttons
   beside them keep `--a-ctl`, the same relationship the alt task drawer draws. Scoped by
   element, not `.field`, so the same chrome reaches controls outside one too (the recurrence
   popover, the board picker, the person combobox).

   Every one of these selectors excludes the shell's own controls (`.a-input`/`.a-select`/
   `.a-textarea`) because a blanket element rule here (0,2,1) outranks the shell's own component
   rules (0,2,0 or 0,1,0) — which UN-BUYS the room a search field's magnifier and ⌘K keycap
   occupy, drawing the placeholder underneath both. That shape has now happened in three
   stylesheets (okr-suite.css, alt-admin.css, here) the moment each page started loading a
   sheet reachable from a page that mounts the shell; `search-field-chrome.test.js` is the check
   that catches it. The fix is always in the offending sheet, never in the component — raising
   the shared rule's specificity would make one surface's accident everyone's permanent shape.

   The exclusion is on every selector that dresses the box, including the `:focus`/
   `:focus-visible` pair together: the ring only draws because those two are one class-unit
   heavier than `outline:none` on `:focus`, so excluding one and not the other would silently
   take the ring off the typed fields again. `::placeholder` does not need the exclusion — it
   spends none of the four properties the component rules buy. */
:root.embed-task input[type=text]:not(.a-input):not(.title-input),
:root.embed-task input[type=date]:not(.a-input),
:root.embed-task input[type=number]:not(.a-input),
:root.embed-task input[type=url]:not(.a-input),
:root.embed-task input[type=email]:not(.a-input),
:root.embed-task select:not(.a-select),
:root.embed-task textarea:not(.a-textarea){
  background:var(--a-bg); border:1px solid var(--a-line); border-radius:var(--a-r-sm);
  color:var(--a-text); font-family:var(--a-body); font-size:13px;
  transition:border-color var(--a-quick) var(--a-ease);
}
:root.embed-task input[type=text]:not(.a-input):not(.title-input),
:root.embed-task input[type=date]:not(.a-input),
:root.embed-task input[type=number]:not(.a-input),
:root.embed-task input[type=url]:not(.a-input),
:root.embed-task input[type=email]:not(.a-input),
:root.embed-task select:not(.a-select){
  height:var(--a-ctl-lg); padding:0 10px;
}
:root.embed-task textarea:not(.a-textarea){ padding:8px 10px; line-height:1.5; }
:root.embed-task input::placeholder,
:root.embed-task textarea::placeholder{ color:var(--a-faint); }
:root.embed-task input[type=text]:not(.a-input):not(.title-input):focus,
:root.embed-task input[type=date]:not(.a-input):focus,
:root.embed-task input[type=number]:not(.a-input):focus,
:root.embed-task input[type=url]:not(.a-input):focus,
:root.embed-task input[type=email]:not(.a-input):focus,
:root.embed-task select:not(.a-select):focus,
:root.embed-task textarea:not(.a-textarea):focus{ border-color:var(--a-blue); outline:none; }
/* The ring must carry the same attribute selectors as the rule above it — not tidiness, the
   whole reason it works: a bare `input:focus-visible` loses to the `outline:none` above on
   specificity, so without matching selectors several fields (measured: Owner, Assignee,
   External link, Contributors, Due date) reported no ring at all while others did. */
:root.embed-task input[type=text]:not(.a-input):not(.title-input):focus-visible,
:root.embed-task input[type=date]:not(.a-input):focus-visible,
:root.embed-task input[type=number]:not(.a-input):focus-visible,
:root.embed-task input[type=url]:not(.a-input):focus-visible,
:root.embed-task input[type=email]:not(.a-input):focus-visible,
:root.embed-task select:not(.a-select):focus-visible,
:root.embed-task textarea:not(.a-textarea):focus-visible{
  outline:2px solid var(--a-ring); outline-offset:1px;
}
:root.embed-task input:disabled,
:root.embed-task select:disabled,
:root.embed-task textarea:disabled{ opacity:.55; cursor:not-allowed; }

/* A select still has to look like one — the native arrow is the only thing that says "there is a
   list behind this"; kept as the browser's, only re-grounded. */
:root.embed-task select{ appearance:auto; }

/* The title's font and box are excluded from the catch-all above, not left unguarded. An id rule
   that set the title's font (never border) was once deleted as apparently redundant with
   CSS/task-editor-panel.css's own value — it was not redundant, it was the only thing WINNING:
   an id outranks any class count, so deleting it left the catch-all's font (Inter, 13px) showing
   instead of the intended 19px display face. The fix is `.title-input` joining the existing
   exclusions (`.a-input`/`.a-select`/`.a-textarea`) rather than a revived id rule, added to all
   four blocks that carry that family — the `:focus`/`:focus-visible` pair must move together, or
   dropping the exclusion from only one silently takes the ring off the field again. Excluding
   `.title-input` from `:focus-visible` still leaves it a ring: it falls through to the
   document-wide floor in alt-focus.css, the same one `.a-note-title` relies on. The border this
   catch-all sets is unchanged by this fix and predates it — the deleted rule never touched
   border, so which tier the title should carry stays an open decision, not pre-empted here. */

/* Fields wrap rather than crush — a plain three-up flex with no wrapping squeezed Status, Due
   date and the third field into unreadable columns instead of letting one drop. 220px is the
   width at which an uppercase label and a date still read, and wide enough for
   contributor-field.js's own summary-plus-button too. */
:root.embed-task .field-row{ flex-wrap:wrap; gap:var(--a-3) var(--a-4); }
:root.embed-task .field-row > .field{ flex:1 1 220px; }

/* No rule for #legacyContributorsField, deliberately — the product owner said the free-text
   Contributors box "does not exist in tasks.html" at all, and JS/features/task-editor-markup.js
   now ships it permanently `display:none`. A treatment for an element nobody will ever see is
   dead weight; removed rather than left orphaned. */

/* ---------- the date field and its No date switch ---------- */
:root.embed-task .date-field-icon{ color:var(--a-dim); right:11px; }
:root.embed-task .date-field-wrap.is-no-date .date-none{ color:var(--a-faint); font-size:13px; }
/* The switch reads as an alt control already — it is the shared `.pref-switch`, and its on-state
   is the accent both experiences share. All it needed was the alt caption size and enough room
   under the input that it is not touching it. */
:root.embed-task .switch-check{ font-size:12px; color:var(--a-dim); }
:root.embed-task .switch-check.no-due{ margin-top:var(--a-2); }
:root.embed-task .pref-desc{ font-size:11px; color:var(--a-faint); line-height:1.55; }

/* ---------- the person combobox (Owner / Assignee on a team task) ---------- */
:root.embed-task .person-select-caret{
  color:var(--a-faint); width:26px; border-radius:0 var(--a-r-sm) var(--a-r-sm) 0;
}
:root.embed-task .person-select-caret:hover{ color:var(--a-text); }

/* ---------- the external-link field ---------- */
:root.embed-task .link-open-btn{
  width:var(--a-ctl-lg); background:var(--a-raised); border:1px solid var(--a-line);
  border-radius:var(--a-r-sm); color:var(--a-dim);
}
:root.embed-task .link-open-btn:hover:not(:disabled){ border-color:var(--a-line-strong); color:var(--a-text); }
:root.embed-task .link-open-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ================= BUTTONS =================
   The five alt roles, on the classic class names. Emphasis rather than colour, and exactly one
   primary per surface — which in this panel is Post comment, and nothing else. */
:root.embed-task .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:var(--a-ctl); padding:0 12px; border-radius:var(--a-r-sm);
  background:var(--a-raised); border:1px solid var(--a-line); color:var(--a-text);
  font-family:var(--a-body); font-size:13px; font-weight:600; line-height:1;
  transition:border-color var(--a-quick) var(--a-ease), background var(--a-quick) var(--a-ease);
}
:root.embed-task .btn:hover{ border-color:var(--a-line-strong); color:var(--a-text); }
:root.embed-task .btn:focus-visible{ outline:2px solid var(--a-ring); outline-offset:2px; }
:root.embed-task .btn.small{ height:28px; padding:0 10px; font-size:12px; }
:root.embed-task .btn.primary{ background:var(--a-blue-fill); border-color:transparent; color:#fff; }
:root.embed-task .btn.primary:hover{ filter:brightness(1.08); color:#fff; border-color:transparent; }
/* DELETING IS NOT THE SHAPE OF AN ORDINARY BUTTON WITH A RED TINT. `.a-btn.danger` is an outline:
   present, unmistakable, and not competing with the primary action for the eye. */
:root.embed-task .btn.danger{
  background:transparent; border-color:var(--a-red); color:var(--a-red);
}
:root.embed-task .btn.danger:hover{ background:var(--a-red-soft); border-color:var(--a-red); color:var(--a-red); }
:root.embed-task .btn.active{
  background:var(--a-blue-soft); border-color:var(--a-blue); color:var(--a-blue-text);
}
:root.embed-task .btn:disabled{ opacity:.5; cursor:not-allowed; }
:root.embed-task .btn:disabled:hover{ border-color:var(--a-line); color:var(--a-text); }
/* SQUARE, AND SQUARE AT BOTH SIZES. `.icon-only` set the width from `--a-ctl` alone, so the
   attachments paperclip — which is also `.small` — came out 32 wide by 28 tall. */
:root.embed-task .btn.icon-only{ width:var(--a-ctl); padding:0; }
:root.embed-task .btn.small.icon-only{ width:28px; }
:root.embed-task .btn.icon-only svg{ width:16px; height:16px; }
/* `.repeat-btn` was here and is gone — nothing emits the class since it became a toggle, so the
   rules were dead weight (DoD 4d run backwards: a selector no surface emits). If a repeat
   control ever needs a field-shaped treatment again: height var(--a-ctl-lg), justify-content
   flex-start, width 100%, and the alt selected treatment when on. */

/* ================= TAGS =================
   The section header already says "Tags"; the field inside carried a second caption, so the
   panel drew the word twice. The caption is a bare `<label>` with no `for=`, labelling nothing,
   and the rule is keyed on the section wrapper existing, so a build failure still leaves the
   chips their one heading. */
:root.embed-task .tsec > #panelSecTags.tsec-body > .field > label{ display:none; }

/* `.a-chip`: 22px, pill, 11px/600, raised ground with a soft edge. A tag's colour is set INLINE
   by renderPanelTagChips() — an outline over a faint fill, same as the alt `.a-chip` does
   elsewhere — so only geometry and resting colours are stated here; border WIDTH is, since
   1.5px is the one part of the classic chip reading as a different component. */
:root.embed-task .panel-tag-chips{ gap:var(--a-2); }
:root.embed-task .panel-tag-chips .tag-chip{
  height:22px; padding:0 9px; border-width:1px; border-style:solid;
  border-color:var(--a-line-soft); border-radius:var(--a-r-pill);
  background:var(--a-raised); color:var(--a-dim);
  font-family:var(--a-body); font-size:11px; font-weight:600;
  transition:border-color var(--a-quick) var(--a-ease), color var(--a-quick) var(--a-ease);
}
:root.embed-task .panel-tag-chips .tag-chip:hover{ color:var(--a-text); }
:root.embed-task .panel-tag-chips .tag-chip.selected{ color:var(--a-text); }
:root.embed-task .panel-tag-chips .tag-chip .dot{ width:6px; height:6px; }

/* ================= BOARD AND OKR ================= */
:root.embed-task .board-row,
:root.embed-task .okr-row{ gap:var(--a-3); }
:root.embed-task .board-picker-summary{ font-size:12px; color:var(--a-faint); }
:root.embed-task .okr-support{ font-size:12px; color:var(--a-dim); line-height:1.55; }
:root.embed-task .source-note-ref{
  background:var(--a-blue-soft); border:1px solid var(--a-blue); border-radius:var(--a-r);
  padding:var(--a-2) var(--a-3); font-size:12px; color:var(--a-dim);
}
:root.embed-task .source-note-ref-link{ color:var(--a-blue-text); font-weight:600; }
:root.embed-task .email-source{
  background:var(--a-raised); border:1px solid var(--a-line-soft); border-radius:var(--a-r);
  padding:var(--a-2) var(--a-3);
}
:root.embed-task .email-source-meta{ font-size:12px; color:var(--a-dim); }
:root.embed-task .email-status{ font-size:12px; color:var(--a-dim); }
:root.embed-task .email-status.err{ color:var(--a-red); }
:root.embed-task .email-status.ok{ color:var(--a-green); }

/* ================= ATTACHMENTS ================= */
:root.embed-task .attach-dropzone{
  border:1.5px dashed var(--a-line); border-radius:var(--a-r);
  background:var(--a-bg); color:var(--a-faint); font-size:12px;
}
:root.embed-task .attach-dropzone.dragover{
  border-color:var(--a-blue); background:var(--a-blue-soft); color:var(--a-blue-text);
}
:root.embed-task .attach-hint{ font-size:11px; color:var(--a-faint); }
:root.embed-task .attach-status{ font-size:12px; color:var(--a-dim); }
:root.embed-task .attach-status.err{ color:var(--a-red); }
:root.embed-task .attach-status.ok{ color:var(--a-green); }
:root.embed-task .attach-row{
  background:var(--a-raised); border:1px solid var(--a-line-soft); border-radius:var(--a-r-sm);
}
:root.embed-task .attach-row .attach-name{ font-size:13px; color:var(--a-text); }
:root.embed-task .attach-row .attach-name:hover{ color:var(--a-blue-text); }
:root.embed-task .attach-path{ font-size:11px; color:var(--a-faint); }
:root.embed-task .attach-row .attach-remove{ color:var(--a-faint); }
:root.embed-task .attach-row .attach-remove:hover{ color:var(--a-red); }
:root.embed-task .attach-count-badge{
  background:var(--a-blue-fill); color:#fff;
}

/* ================= DESCRIPTION AND ITS TOOLBAR =================
   A ROW OF SEVEN 11px BUTTONS WITH NO EDGE reads as a caption, not as controls. The alt small
   ghost button gives each one a boundary at rest, a real ground on hover, and the blue selected
   treatment when the format is on — which is the only way to tell, at a glance, that the cursor
   is inside a bold run. */
:root.embed-task .desc-rte-toolbar{ gap:var(--a-1); margin-bottom:var(--a-2); }
:root.embed-task .desc-rte-toolbar .rte-btn.mini{
  display:inline-flex; align-items:center; justify-content:center;
  height:26px; min-width:26px; padding:0 8px; border-radius:var(--a-r-sm);
  background:transparent; border:1px solid var(--a-line-soft); color:var(--a-dim);
  font-family:var(--a-body); font-size:11px; font-weight:600; line-height:1;
  transition:border-color var(--a-quick) var(--a-ease), color var(--a-quick) var(--a-ease);
}
:root.embed-task .desc-rte-toolbar .rte-btn.mini:hover{
  border-color:var(--a-line-strong); color:var(--a-text); background:var(--a-raised);
}
:root.embed-task .desc-rte-toolbar .rte-btn.mini:focus-visible{
  outline:2px solid var(--a-ring); outline-offset:2px;
}
:root.embed-task .desc-rte-toolbar .rte-btn.mini.active{
  background:var(--a-blue-soft); border-color:var(--a-blue); color:var(--a-blue-text);
}
:root.embed-task .rte-divider{
  width:1px; height:18px; background:var(--a-line-soft); margin:0 var(--a-1);
}
:root.embed-task .desc-format-status{ font-size:11px; color:var(--a-dim); }
:root.embed-task .desc-format-status.err{ color:var(--a-red); }
:root.embed-task .desc-format-status.ok{ color:var(--a-green); }

/* ---------- THE SHARED FORMATTING BAR, IN THE FRAME ----------
   `.a-fmt` is JS/features/rich-text-toolbar.js's, extracted from the notes editor so notes, the
   team task and this one all format text through one implementation; its colours already read
   `--a-*` tokens this file restates at the top, so it arrives correctly coloured for free. What
   is said here is PLACEMENT only, per alt-rich-text.css's own "nothing here decides where the
   bar sits" — it carries no margin of its own so each host can answer for itself. `flex:0 0
   auto` because the column is a flex column: an `auto` basis lets the editor below squash the
   bar, silently folding its controls into the overflow menu. */
:root.embed-task .a-fmt{ margin:0 0 var(--a-2); flex:0 0 auto; }
/* FREE TEXT BEGINS AT THE TOP OF ITS EDITOR — never centred, whatever the compact-control
   contract says about chips. This is the one box in the panel that grows to fill the frame. */
/* A FLOOR UNDER THE EDITOR. The description is `flex:1` and takes whatever the sections above it
   leave — which in the docked 518px panel is most of the panel, and in a 1040px column is a
   third of it, because the same fields now fit on far fewer rows. Measured in the frame at
   803px tall with every section open: 68px of writing area, four lines. The floor makes it a
   usable editor at the widths this frame actually opens at, and collapsing a section still hands
   its height straight over, which is the whole point of the grouping.

   THREE LINES TALLER, AND THE ARITHMETIC IS THE FONT'S. The box is 13px on a 1.6 line-height, so
   one written line is 20.8px and three are 62.4px — 160 → 224 on the editor, and the same 64 on
   the row that holds it (230 → 294) so the floor actually reaches the box rather than being
   eaten by the row's own padding. Rounded to whole pixels in the direction that gives the third
   line room to descend rather than clipping it.

   AND THE PANE NOW SCROLLS INSTEAD OF SQUEEZING — see the `flex:1 0 auto` above, which is the
   half of this that makes a floor mean anything. Without it a taller floor on a short frame is
   simply overflow nobody can reach.

   THE ROW'S FLOOR IS THE SUM OF WHAT IS IN IT, not a round number — and the parts are the ones
   the browser actually reports, measured in the frame at 1440x900 across `.split-col-desc`'s
   four children:

       <label>                    12px + 6px margin
       #descFmtHost.a-fmt-host    52px            the shared bar at 44 plus the 8px this file
                                                  puts under it, which lands inside the host
       #descRteToolbar            26px + 8px      what is LEFT of the page's own strip: the AI
                                                  button and its status line
       #f-desc.fill-richtext     252px

   12 + 6 + 52 + 26 + 8 + 252 = 356, and it moves when one of those parts does.

   IT WAS 304, AND THE FRAME CHANGED UNDER IT. The strip above the editor used to be
   `#descRteToolbar` alone — seven `.rte-btn.mini` commands, 26px, no shared bar — and 304 was the
   sum of THAT. classic_tasks.html now mounts JS/features/rich-text-toolbar.js over `#f-desc`
   (`hostPaste:true`, because the page owns paste on this field and its placeholder promises a
   pasted email keeps its tables), so `.a-fmt` is genuinely in the frame and `#descRteToolbar`
   keeps only the AI control. Measured with 304 still in place: the row's own content minimum is
   328, so the floor stopped binding altogether and the editor fell back to its own
   `min-height:224px` — 9.71 lines where it had drawn 11.06. A floor that is smaller than its
   contents is not a floor, and it fails silently.

   356 MEASURED, NOT COMPUTED. Forced to 328 the editor is still at 224 (9.71 lines); 340 gives
   236 (10.29); **356 gives 252 (11.06)**, which is the figure this rule has always been for.
   With no AI assistant configured `#descRteToolbar` collapses to 0 and the floor hands those
   26px to the editor instead — 278px, 12.31 lines — which is the right direction for a reader
   who has one control fewer.

   AND THE BAR IS NOT THIS FILE'S TO SIZE. `.a-fmt`'s geometry is CSS/alt/alt-rich-text.css's, in
   all four of its token layers including `:root.embed-task`. This number READS that height; it
   must never try to set it. If the bar's height changes, re-measure `.split-col-desc`'s children
   and re-derive this sum — do not adjust it by arithmetic, because the last two terms
   (`#descRteToolbar`'s 26px and whether it is there at all) depend on the reader's AI
   configuration and on markup this file does not own. */
:root.embed-task .field.split-row{ min-height:356px; gap:var(--a-4); }
:root.embed-task .fill-richtext{
  background:var(--a-bg); border:1px solid var(--a-line); border-radius:var(--a-r-sm);
  color:var(--a-text); padding:10px 12px; font-size:13px; line-height:1.6;
  min-height:224px;
}
:root.embed-task .fill-richtext:focus{ border-color:var(--a-blue); outline:none; }
:root.embed-task .fill-richtext:focus-visible{ outline:2px solid var(--a-ring); outline-offset:1px; }
:root.embed-task .fill-richtext td,
:root.embed-task .fill-richtext th{ border-color:var(--a-line-soft); }
:root.embed-task .fill-richtext th{ background:var(--a-raised); }

/* ================= THE FOOTER LINE =================
   Updated / Created is the panel's last line, and it had nothing between it and the description
   box above it. A rule and the faint size make it a footnote rather than a stray sentence. */
:root.embed-task .meta-line{
  margin-top:auto; padding-top:var(--a-3); border-top:1px solid var(--a-line-soft);
  font-size:11px; color:var(--a-faint);
}

/* ================= COMMENTS ================= */
:root.embed-task .comments-empty{ font-size:13px; color:var(--a-faint); padding:var(--a-6) 0; }
:root.embed-task .comment-item{
  background:var(--a-raised); border:1px solid var(--a-line-soft); border-radius:var(--a-r);
  padding:var(--a-2) var(--a-3);
}
:root.embed-task .comment-add-row{ gap:var(--a-2); }
:root.embed-task .comment-add-row .comment-textarea{ min-height:120px; }
:root.embed-task .comment-suggest-row{ gap:var(--a-2); }
/* The canned openers are chips, so they get the chip. `.a-chip` is `cursor:default` until it is
   a button — these are, so they take the pointer and the hover edge. */
:root.embed-task .comment-suggest-chip{
  display:inline-flex; align-items:center; height:26px; padding:0 11px;
  border:1px solid var(--a-line-soft); border-radius:var(--a-r-pill);
  background:var(--a-raised); color:var(--a-dim);
  font-family:var(--a-body); font-size:12px; font-weight:600;
  transition:border-color var(--a-quick) var(--a-ease), color var(--a-quick) var(--a-ease);
}
:root.embed-task .comment-suggest-chip:hover{ border-color:var(--a-line-strong); color:var(--a-text); }
:root.embed-task .comment-suggest-chip:focus-visible{ outline:2px solid var(--a-ring); outline-offset:2px; }
/* THE ONE PRIMARY ON THIS SURFACE. Posting is the action the pane exists for, and it was drawn
   identically to the three suggestion chips beside it. */
:root.embed-task #panelAddCommentBtn{
  background:var(--a-blue-fill); border-color:transparent; color:#fff;
}
:root.embed-task #panelAddCommentBtn:hover{ filter:brightness(1.08); border-color:transparent; }
:root.embed-task .comment-mention-name{ color:var(--a-blue-text); }

/* ================= HISTORY =================
   The same object as `.comment-item` above, wearing the same alt surface — mirrors its values
   exactly (ground, edge, radius, padding) because Comments and History are two tabs of one pane
   and must not change texture between them. Here rather than in components.css because the alt
   scale is a different scale, not a different colour. `.account-status` above the list is
   already handled elsewhere, collapsing to nothing while empty. */
:root.embed-task .audit-list{ gap:var(--a-2); }
:root.embed-task .audit-event{
  background:var(--a-raised); border:1px solid var(--a-line-soft); border-radius:var(--a-r);
  padding:var(--a-2) var(--a-3);
}
:root.embed-task .audit-event-line{
  font-family:var(--a-body); font-size:13px; line-height:1.5; color:var(--a-text);
}
:root.embed-task .audit-event-meta{ font-size:11px; color:var(--a-faint); margin-top:var(--a-1); }

/* ================= THE THINGS THAT OPEN OVER THE PANEL =================
   Not one of these is given a layer by this file — each already sits on a canonical token
   (`--z-panel` or `--z-dialog`), layerNextZ() raises whichever opens over another, and nothing
   here introduces a stacking context, transform or filter that could trap one behind the panel
   (measured with elementFromPoint at each popover's centre). What they needed was the alt
   surface, not a new layer. The one `z-index` in this file is `1`, ordering the sticky tab strip
   against its own scrolling siblings — not an overlay, not on the layer scale. */
:root.embed-task .cfg-popover,
:root.embed-task .recur-pop,
:root.embed-task .context-menu{
  background:var(--a-float); border:1px solid var(--a-line-strong);
  border-radius:var(--a-r); box-shadow:var(--a-shadow);
}
/* `.recur-info-pop` — the repeat control's "i" bubble — is not a reskin like its two neighbours
   above: those carry a base rule elsewhere that this file only re-colours, but this one has no
   base reachable from here (its only declaration was classic_tasks.html's own inline style,
   unreachable from tasks.html entirely) — so this states the surface in full, a duplicate once,
   rather than layered over nothing. No `z-index` of its own, matching every other popover here:
   openPopover() asks layerNextZ() at open time. */
:root.embed-task .recur-info-pop{
  position:fixed; width:min(320px, 92vw); padding:11px 12px;
  background:var(--a-float); border:1px solid var(--a-line-strong);
  border-radius:var(--a-r); box-shadow:var(--a-shadow);
  font-family:var(--a-body); font-size:13px; line-height:1.5; color:var(--a-text);
}
:root.embed-task .cfg-pop-title,
:root.embed-task .recur-pop-title,
:root.embed-task .recur-sec-label{
  font-family:var(--a-body); font-size:10px; font-weight:700; letter-spacing:.1em;
  color:var(--a-dim);
}
:root.embed-task .person-select-opt{ border-radius:var(--a-r-sm); font-size:13px; }
:root.embed-task .person-select-opt:hover{ background:var(--a-raised); }
:root.embed-task .person-select-opt.is-active{ background:var(--a-blue-soft); }
:root.embed-task .person-select-opt .sub{ font-size:11px; color:var(--a-faint); }
:root.embed-task .person-select-none{ font-size:12px; color:var(--a-faint); }

/* The recurrence popover's own controls — pills and day toggles — take the chip vocabulary. */
:root.embed-task .recur-freq,
:root.embed-task .recur-day span{
  background:var(--a-raised); border:1px solid var(--a-line-soft); color:var(--a-dim);
  font-family:var(--a-body); font-weight:600;
}
:root.embed-task .recur-freq[aria-checked="true"],
:root.embed-task .recur-day input:checked + span{
  background:var(--a-blue-soft); border-color:var(--a-blue); color:var(--a-blue-text);
}
:root.embed-task .recur-day span{ border-radius:var(--a-r-sm); font-size:11px; font-weight:700; }
:root.embed-task .recur-freq:focus-visible,
:root.embed-task .recur-day input:focus-visible + span{
  outline:2px solid var(--a-ring); outline-offset:2px;
}
:root.embed-task .recur-pop-summary{
  font-size:12px; color:var(--a-dim); border-top:1px solid var(--a-line-soft);
  padding-top:var(--a-2);
}
:root.embed-task .recur-stop{ color:var(--a-faint); }
:root.embed-task .recur-stop:hover{ color:var(--a-red); border-color:var(--a-red); }

/* Dialogs — the board picker, and every confirmation the panel raises. */
:root.embed-task .modal-overlay{ padding:var(--a-5); }
:root.embed-task .modal-card{
  background:var(--a-panel); border:1px solid var(--a-line-strong);
  border-radius:var(--a-r-lg); box-shadow:var(--a-shadow); padding:var(--a-5);
}
:root.embed-task .modal-title-row h3{ font-family:var(--a-display); font-size:15px; }
:root.embed-task .modal-footer{ border-top:1px solid var(--a-line-soft); gap:var(--a-2); }
:root.embed-task .board-picker-intro{ font-size:12px; color:var(--a-dim); line-height:1.55; }
:root.embed-task .board-picker-row{ border-radius:var(--a-r-sm); }
:root.embed-task .board-picker-row .bp-name{ font-size:13px; font-weight:600; color:var(--a-text); }
:root.embed-task .account-status{ font-size:12px; color:var(--a-dim); }

/* ================= NARROW =================
   The frame loses its inset at 820px, so from there down the panel IS the window and the gutter
   is all that separates a field from the screen's edge — carried that far by the measure and
   the field wrapping above (measured at 962/820/768, no clipping, no overflow). 720 is where
   two-up rows stop being two fields and start being two slivers, so below it the gutter
   tightens, rows go to one column, and the description drops under its own label. */
@media (max-width:720px){
  :root.embed-task #panelDetailsPane.active,
  :root.embed-task #panelCommentsPane.active,
  :root.embed-task #panelAuditPane.active{ padding:var(--a-4) var(--a-3) var(--a-5); }
  :root.embed-task #panelModalTabs{ padding:0 var(--a-3); overflow-x:auto; }
  :root.embed-task .panel-head{ padding:var(--a-2) var(--a-3) var(--a-1); }
  /* One column: two 220px fields plus a gap need 456, and below that the second one is a
     sliver rather than a field. */
  :root.embed-task .field-row > .field{ flex:1 1 100%; }
  :root.embed-task .field.split-row{ flex-direction:column; }
}

/* ================= THE HEADER'S OWN NARROWER FLOOR =================
   480 was measured against a fuller row than exists today (Watch and Email added two labelled
   buttons to a status line with nothing left to give; 480 was the narrowest canonical phone
   width that still fit). The save status has since left this row for the tab strip, so 480 is
   provably still SAFE with strictly more room than it had — not re-measured against the freed
   room, so it may hide labels earlier than necessary; re-tuning is a separate change. The fix:
   yield the least essential thing first — hiding `.icon-btn-lb` returns labelled buttons to
   plain icon buttons, still fully operable and named via `title`/`aria-label`. */
@media (max-width:480px){
  :root.embed-task .panel-head .icon-btn .icon-btn-lb{ display:none; }
  /* `--a-ctl-sm`, matching the base rule above — this collapses the labelled button back to the
     SAME square the icon-only buttons already draw at every width, so re-pointing only the base
     rule and leaving this at the old `--a-ctl` would have undone the shrink at exactly the
     narrowest width, where the screenshot's 32px squares are most cramped. */
  :root.embed-task .panel-head .icon-btn:has(.icon-btn-lb){
    width:var(--a-ctl-sm); padding:0; gap:0;
  }
}

/* ================= THE SUITE HOST =================
   Everything above this line is the editor's own internals and names nothing about the page
   around it — which is why `tasks.html?embed=task` wears the whole file unchanged, one
   stylesheet, two hosts. This section restates only the half of components.css's `:root.embed`
   block that is not about hiding chrome (tasks.html hides its own three regions separately, with
   `a-embed`): the geometry that makes `#panel` stop being a docked side panel and become the
   surface. Scoped `body.alt-app`, the discriminator — classic_tasks.html has no `.alt-app`,
   tasks.html always carries it — so this section reaches only the Suite host. */

/* The frame is the document — `position:fixed; inset:0` rather than a flow-block height, since
   the three regions `a-embed` hides are still in the tree and a percentage height would measure
   against a body that no longer has one. */
:root.embed-task body.alt-app{ overflow:hidden; }
:root.embed-task body.alt-app #altEmbedTask{
  position:fixed; inset:0;
  display:flex; flex-direction:column; min-width:0;
  background:var(--a-bg); overflow:hidden;
  /* Above the page, below a dialog — `--z-panel` outranks the hidden workspace but deliberately
     not `--z-dialog`, since the editor opens real dialogs of its own and must never float above
     its own confirmations. */
  z-index:var(--z-panel);
}

/* `#panel` is a docked side panel everywhere else; here it is the surface, filling its host and
   letting the measure above decide the rest. Same as components.css's `:root.embed #panel` rule
   without the `!important`s, which only existed to beat classic_tasks.html's page-local rules —
   none of those to beat here. */
:root.embed-task body.alt-app #altEmbedTask #panel{
  display:flex; flex-direction:column;
  position:static; transform:none;
  width:100%; max-width:none; min-width:0; height:100%;
  flex:1 1 auto;
  border:0; border-radius:0; box-shadow:none;
  background:var(--a-panel);
}
/* Floating is a docked-panel affordance and the control for it is hidden below; this stops a
   stored `floating` class from pinning the surface to a corner of its own frame. */
:root.embed-task body.alt-app #altEmbedTask #panel.floating{ inset:auto; }

/* The host's dialog already closes and already floats — altPreviewOpen() draws the title row,
   close button and Escape handling around this document, so the panel's own close/pop-out would
   either do nothing or fight the frame. The resizer drags a width this mode does not have. */
:root.embed-task body.alt-app #closePanelBtn,
:root.embed-task body.alt-app #panelPopoutBtn,
:root.embed-task body.alt-app .panel-resizer{ display:none; }

/* The host with no editor in it — one sentence, centred, never a blank document indistinguishable
   from a frame that failed to load. Styled here since it is part of this surface. */
:root.embed-task body.alt-app .a-embed-task-empty{
  margin:auto; padding:var(--a-6);
  font-family:var(--a-body); font-size:13px; color:var(--a-dim); text-align:center;
}