/* ================= THE TASK EDITOR'S OWN CHROME =================

   `#panel` and its sibling `#panelFloatingBackdrop` are built by a module
   (JS/features/task-editor-markup.js) so a second host can build the same
   DOM. The rules that give that markup its shape moved with it: the box
   model, the floating-mode geometry and click-through backdrop, the header
   bar, the scroll container, the tag-chip row, the toggle row, and the
   "holding nothing" released state — every one EXCLUSIVE to the editor,
   which is what makes lifting it out whole safe rather than a duplicate.

   The rule this leaves behind: CSS that dresses markup a MODULE builds
   belongs in a stylesheet, never in one host's <style>, from the moment
   there could be a second host. _docs/tests/editor-host-css-parity.test.js
   fails if that is forgotten again.

   Loaded unconditionally as this page's normal chrome, and only inside the
   gated `<template>` elsewhere, beside CSS/checklist.css and CSS/alt/alt-
   embed-task.css — before that file, since it re-skins colour and spacing
   on top of the box model defined here.

   Every selector here is prefixed `html `, a preservation rather than a
   style choice: the original stylesheet nested almost everything inside one
   `html{ … }` block (CSS Nesting), so publishing this bare would ship it at
   a LOWER specificity than the rule it replaces. */

/* ---------- Detail panel — a left-hand layout column, like the sidebar ---------- */
html .panel{
  position:relative;
  width:0;min-width:0;
  background:var(--panel);
  border-right:1px solid var(--border-soft);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:width var(--dur-quick) var(--ease-out), min-width var(--dur-quick) var(--ease-out);
}
html .panel.open{
  width:518px;min-width:518px;
}
/* A dragged width, set inline by applyPanelWidth(). The rule exists so the
   transition below can be turned off mid-drag without touching the widths. */
html body.resizing-panel .panel{transition:none;}

/* The floating panel neither dims the app nor blocks it — it is the same
   editor in a bigger box, and a reader pops it out precisely to have more
   room while reading the list behind. Removing the dark wash alone was not
   enough: the element stayed as a click-catcher, and without the wash the
   backdrop was an invisible sheet over the entire window, catching every
   click on the app. `pointer-events:none` is the whole of what is left —
   clicks reach the app, and leaving the mode is the reader's own decision. */
html .panel-floating-backdrop{
  position:fixed;inset:0;background:transparent;pointer-events:none;
  z-index:var(--z-panel);display:none;
}
html .panel-floating-backdrop.show{display:block;}
html .panel.floating{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:calc(var(--z-panel) + 1);
  /* Fluid CSS fallback (used before JS has run, or if JS sizing fails
     for any reason) — deliberately WITHOUT !important, so the JS-computed
     inline style can override it. See applyFloatingPanelSize() in
     JS/features/task-panel.js.

     KEPT IN STEP WITH THAT FUNCTION'S RATIOS: a fallback that disagrees with the sizer is a
     box that visibly resizes itself on open. */
  width:clamp(480px, 90vw, 1400px);
  min-width:0;
  max-width:96vw;
  height:clamp(420px, 88vh, 1100px);max-height:clamp(420px, 88vh, 1100px);
  border-radius:var(--radius);border:1px solid var(--border);border-right:1px solid var(--border);
  box-shadow:0 12px 32px rgba(0,0,0,.5);
}
html .panel.floating .panel-body{max-height:calc(clamp(420px, 88vh, 1100px) - 53px);}
html #panelPopoutBtn.active{color:var(--accent-text);}

html .panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--border);
}
/* `.ph-left`, `.ph-right`, `.status-dot`, `.ph-divider` are in CSS/components.css
   — the team task modal draws the same header. Only padding and border stay here. */
html .panel-body{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px;}

html .panel-tag-chips{display:flex;flex-wrap:wrap;gap:6px;}
/* Not `html`-prefixed from here down — the original `html{ … }` wrapper
   closed right after `.panel-tag-chips`, so these were always top-level. */
.panel-toggle-row{display:flex;gap:8px;flex-wrap:wrap;}
.panel-toggle-row .btn{flex:1 1 30%;justify-content:center;min-width:120px;}
.panel-toggle-row .btn.icon-only{flex:0 0 auto;min-width:0;padding:5px 10px;position:relative;}

/* ---------- WHAT THE FRAMED EDITOR SHOWS ONCE IT IS HOLDING NOTHING ----------
   `#panelReleased` is `display:none` everywhere the panel has a task open
   or is simply closed at 0px wide; closePanel() reveals it inside a frame
   that has nowhere else to collapse to. CSS/alt/alt-embed-task.css owns
   when it appears; this file only owns the box itself. */
#panelReleased{display:none;}
.panel-released-card{
  max-width:420px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.panel-released-card h3{margin:0; font-size:15px; font-weight:700; color:var(--text);}
.panel-released-card p{margin:0; font-size:13px; line-height:1.55; color:var(--text-dim);}
.panel-released-back{font-size:12px; color:var(--text-faint);}

/* ================= THE REST OF THE EDITOR'S OWN CLOTHING =================

   `.field`, `.field-row`, the per-field styling under `#panelDetailsPane`
   and `.icon-btn` moved here once a second document began building this
   same markup and none of these rules were reachable from it — without
   them, labels rendered inline and lower case, a field kept the browser's
   default width, `#panelDetailsPane` never hid `#panelCommentsPane`
   underneath it, and the header's icon buttons rendered as raw browser chrome.

   The `html ` prefix is a preservation, not a style choice, the same
   reason the top of this file gives — read out of the live CSSOM, not
   guessed from indentation.

   Deliberately not here: `.btn.danger` is CSS/components.css's (a copy
   here would fight it), and `.field` itself needs no rule — a plain block
   whose children this file positions. */

/* ---------- base control styling, at the lowest specificity there is ----------

   Every text-ish input, select and textarea, styled once: the scoped
   `.field input[...]` rule further down names only a few types, so any
   OTHER type fell through to browser-default chrome on a host with no
   page-level base of its own (`input[type=time]` was the case that found it).

   Unscoped and lowest-specificity on purpose, byte-identical to the
   original page's own copy, so every scoped rule later still wins.
   `--border-strong` is the WCAG 1.4.11 3:1 tier — a field's border is the
   only thing that says "you can type here". */
input,textarea,select{font-family:inherit;}
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=tel], input[type=search], input[type=url],
input[type=time], input[type=datetime-local], select, textarea{
  background:var(--panel-2); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:7px 10px; font-size:13px;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=date]:focus, input[type=number]:focus, input[type=tel]:focus,
input[type=search]:focus, input[type=url]:focus, input[type=time]:focus,
input[type=datetime-local]:focus, select:focus, textarea:focus{
  border-color:var(--accent);
}
input[type=checkbox], input[type=radio]{accent-color:var(--accent);}

/* ---------- buttons: the editor's own base, which no shared sheet carries ----------
   `.btn`'s base rule is per-page by CSS/components.css's own contract, so
   a host with none of its own renders every button as raw browser chrome.
   `--border-strong` is the WCAG 1.4.11 3:1 tier; `font-weight:600` is what
   sys_design-system.md §3 states for `.btn`. */
html .btn{
  background:var(--panel-2);
  border:1px solid var(--border-strong);
  color:var(--text);
  padding:7px 12px;
  border-radius:var(--radius-sm);
  font-size:13px;
  font-weight:600;
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;
}
html .btn:hover{border-color:var(--accent);color:var(--accent-text);}
html .btn.active{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft);}
html .btn.small{padding:5px 9px;font-size:12px;}
html .btn.primary{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff;}
html .btn.primary:hover{filter:brightness(1.08);color:#fff;}
html .btn:disabled:hover{border-color:var(--border-soft);color:var(--text);}
html .btn.icon-only{font-size:16px;padding:6px 11px;line-height:1;color:var(--text);}
html .btn.icon-only svg{display:block;width:16px;height:16px;}
html a.btn{text-decoration:none;}

/* The repeat popover's "i", declared before `.icon-btn` so source order
   reproduces the original rendering — both selectors tie on specificity,
   so whichever comes later wins, and cascade order was part of what moved
   with this rule rather than an artefact of paste order. 26px, not
   `.icon-btn`'s natural 23px: 24px is the pointer floor off the phone. */
html .repeat-info{flex:0 0 auto; width:26px; height:26px; padding:0; margin-left:6px;}

/* An icon-only control has no label and no edge, so at rest it is a glyph floating on the bar.
   Hover draws a real boundary rather than only tinting the background. */
html .icon-btn{
  background:transparent;border:none;color:var(--text-dim);font-size:16px;padding:4px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
}
html .icon-btn:hover{color:var(--text);background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--border-strong);}
html a.icon-btn{text-decoration:none;}

/* ---------- the two panes, and which one is on screen ----------
   Everything above the description keeps its natural height; only the
   description row grows. The `display:none` pair stops the Comments pane
   rendering underneath Details rather than behind it. */
html #panelDetailsPane.active > .field:not(.split-row),
html #panelDetailsPane.active > .meta-line{flex:0 0 auto;}
html #panelDetailsPane, html #panelCommentsPane{display:none;}
html #panelDetailsPane.active{display:flex; flex-direction:column; gap:16px; flex:1; min-height:0;}
html #panelCommentsPane.active{display:block;}

/* ---------- a field, its name, and its control ----------
   The name of a field, not every label inside one: without the
   `:not(.switch-check)` exclusion a switch and its text would lay out as
   an 11px uppercase block with the control sitting on top of its own
   words. A label that IS a control is not a caption for one. */
html .field label:not(.switch-check){
  display:block;font-size:11px;color:var(--text-dim);
  margin-bottom:7px;text-transform:uppercase;letter-spacing:.4px;font-weight:600;
}
html .field input[type=text], html .field textarea, html .field select, html .field input[type=date]{
  width:100%;background:var(--panel-2);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);color:var(--text);padding:9px 11px;font-size:14px;
}
html .field input[type=text]:focus, html .field textarea:focus,
html .field select:focus, html .field input[type=date]:focus{border-color:var(--accent);}
html .field textarea{resize:vertical;min-height:64px;line-height:1.4;overflow-y:auto;}

/* ---------- the title field: label and control on one row, matching Notes' own title ----------
   Per the product owner: "follow the Notes title look and feel" — one row,
   the label beside the control rather than above it, and the same face
   Notes' title uses. `.field.title` is the only field on this panel laid
   out as a row; every other field keeps the stacked layout above.

   The font matches `.a-note-title` exactly, reached through
   `--app-font-display` rather than `--a-display` — the latter is declared
   only inside `.alt-app`, and reading the base variable directly does not
   depend on this panel's host always wearing that class.

   The border is the generic `.field input[type=text]` rule above,
   unchanged: a quieter single-row box, not a weaker control tier.
   `flex-basis:0`, not the generic rule's `width:100%`, since the label now
   shares the row and the input must grow into what the label leaves. */
/* The action row under the title aligns to the FIELD, not the label — a
   label placed beside the input left the row starting at the label's edge
   while the input started further in, so the button hung out to the left
   of the box it belongs to.

   The number is shared, so this is not a magic offset: `--tt-label-w` sets
   both the label's width and the action row's indent, so they cannot
   drift apart whatever the value is — which matters because the label's
   natural width changes with the reader's own font choice. */
html #panelDetailsPane{ --tt-label-w:44px; }
html .field.title{ display:flex; align-items:center; gap:10px; }
html .field.title label{ flex:0 0 var(--tt-label-w); margin-bottom:0; }
/* `#followupField` is the GROUP, so the indent belongs on it rather than
   the `.control-row` inside it — the panel that opens under the buttons
   lines up with them for free. */
html #followupField{ padding-left:calc(var(--tt-label-w) + 10px); }
/* The row collapses when it has nothing to show: what remains in it is
   only crossAppRenderTaskLink()'s "Team Task" link, drawn for a task on a
   board and absent otherwise, so an ordinary personal task leaves the row
   genuinely empty rather than holding a hidden control — left in flow it
   would still cost the column gap twice over.

   `:has(*)` rather than `:empty`: the markup's own whitespace is a text
   node, and `:empty` does not match an element that has one. */
html #followupField:has(> #taskActionRow:not(:has(*))){ display:none; }
/* The emitted class is named here, not only the parent-plus-type compound
   it sits in — `.title-input` once appeared only inside `:not()`
   exclusions, so nothing anywhere DEFINED it (emitted-class-styling-check.py's
   case). Added to this selector rather than a rule of its own, since
   alt-embed-task.css's own note says this file is "the ONLY place stating
   its font" — a second rule here would make that false. */
html .field.title input[type=text],
html input[type=text].title-input{
  flex:1 1 0%; min-width:0;
  font-family:var(--app-font-display, 'Space Grotesk', system-ui, sans-serif);
  font-size:19px; font-weight:600; line-height:1.3;
  padding:9px 10px;
}

/* Children share the row evenly, so when one is hidden (a field turned
   off in Settings) the remaining one expands rather than leaving a gap.
   `display:flex` here is what makes CSS/alt/alt-embed-task.css's wrap rule
   do anything at all — without it those declarations resolve and are inert. */
html .field-row{display:flex;gap:12px;}
html .field-row > .field{flex:1; min-width:0;}
html .field-row .field{flex:1;}
html .link-field input[type=text]{flex:1; min-width:0;}
html .link-open-btn:disabled{opacity:.55;}

/* The description row takes every pixel left in the pane — the chain that
   makes that work must be unbroken, and each link needs `min-height:0`,
   since a flex item defaults to `min-height:auto` and refuses to shrink
   below its content. */
html .field.split-row{flex:1 1 auto;min-height:120px;display:flex;gap:12px;}
html .split-col{display:flex;flex-direction:column;min-height:0;min-width:0;}
html .split-col-desc{flex:2;min-height:0;}
html .split-col-notes{flex:1;}

/* ---------- the rich-text description, and the bar over it ----------
   `.comment-add-row` is a flex COLUMN with its own gap, so the toolbar's
   bottom margin comes off there — the gap owns the spacing. */
.rte-btn{
  background:var(--panel-2);border:1px solid var(--border);border-radius:6px;color:var(--text-dim);
  font-size:12px;padding:5px 9px;cursor:pointer;line-height:1;
}
.rte-btn:hover{border-color:var(--accent);color:var(--text);}
.rte-btn.active{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff;}
html .rte-btn.mini{padding:3px 7px;font-size:11px;}
html .desc-rte-toolbar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:6px;flex:0 0 auto;}
html .comment-add-row .desc-rte-toolbar{margin-bottom:0;}
html .desc-format-status{font-size:11px;color:var(--text-dim);}
html .desc-format-status.err{color:var(--red-text);}
html .desc-format-status.ok{color:var(--green-text);}
html .fill-richtext{
  flex:1;width:100%;min-height:0;
  background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);padding:8px 10px;font-size:13px;
  overflow-y:auto;line-height:1.4;overflow-wrap:anywhere;word-break:break-word;
}
html .fill-richtext:focus{border-color:var(--accent);}
html .fill-richtext:empty:before{content:attr(data-placeholder);color:var(--text-faint);}
html .fill-richtext ul, html .fill-richtext ol{margin:4px 0 4px 20px;padding:0;}
html .fill-richtext li{margin-bottom:1px;}
html .fill-richtext h4{margin:8px 0 3px;font-size:13px;}
html .fill-richtext p{margin:0 0 6px;}
/* Tables, most commonly pasted or model-inserted, inherit no legible
   styling from the browser default. */
html .fill-richtext table{border-collapse:collapse;width:100%;margin:6px 0;font-size:12px;}
html .fill-richtext td, html .fill-richtext th{
  border:1px solid var(--border);padding:4px 7px;text-align:left;vertical-align:top;
}
html .fill-richtext th{background:var(--panel);font-weight:600;}

/* ---------- the repeat control ----------

   A column, not a wrapping row. Per the product owner, on the block as it
   stood: "the layout is horrible. The text is all in the same line when it
   should be below." A sentence that explains a control has to sit UNDER it
   at every width, not beside it until the panel narrows, so the axis is
   the fix rather than a breakpoint: one item per row, in markup order —
   switch, frequency, consequence, status.

   `align-items:stretch` is the default and is wanted: the frequency row
   needs the full width to lay itself out against.

   Gap instead of the children's own margins, which were designed for a
   block flow where each row states its own distance from above — zeroed
   below so the gap is the only spacing in this column.

   `html .repeat-btn`, `.repeat-ico` and `#repeatBtnLabel` were deleted with
   the old layout — unemitted since the button was replaced by the toggle. */
html #recurrenceField{display:flex; flex-direction:column; gap:8px;}
html #recurrenceField > .pref-desc{margin-top:0;}
/* Both margins, not just the top — a `margin-top:0` alone answers half of
   a shared-dialog rule and leaves space hanging under the last row. */
html #recurrenceField > .account-status{margin:0;}
/* The frequency and its "i" share a real `.control-row` rather than a
   local flex, reusing the gap, centring and wrap behaviour already there.
   Two overrides it needs: the select flexes rather than claiming the whole
   row, with `min-width:0` since a flex item will not shrink below its
   content without it; and this stays outside the ≤640px stacking media
   query on purpose, so a 26px icon never needs a line of its own. */
html #repeatFreqRow > select{flex:1 1 200px; width:auto; min-width:0;}
html #repeatFreqRow > .repeat-info{flex:0 0 auto;}
/* The repeat half of the section is ruled off from the email half, the
   same separator vocabulary used elsewhere in it — drawn only when there
   is something above it to separate from, via a sibling combinator that
   needs no JavaScript to keep it true. */
html #panelSecReminderControls:not([hidden]) ~ #recurrenceField{
  border-top:1px solid var(--border-soft); padding-top:10px;
}
/* The box itself is declared up in the button section, before `.icon-btn`
   — see the note there for why the order is load-bearing. */
html .repeat-info:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
html .repeat-info[aria-expanded="true"]{color:var(--accent-text); background:var(--accent-soft);}

/* ---------- the tag row, the board row and the OKR row ---------- */
html .tag-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;padding:3px 9px;border-radius:20px;font-weight:600;
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;user-select:none;
  background:var(--panel-2);color:var(--text-dim);
}
html .tag-chip .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;}
html .tag-chip.selected{border-color:var(--accent);color:var(--text);background:var(--accent-soft);}
html .tag-chip.static{cursor:default;}
html .board-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
html .okr-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}

/* ---------- the source of a task that arrived from somewhere else ---------- */
.email-source{
  background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.email-source-meta{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--text-dim);min-width:0;overflow:hidden;}
.email-source-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.source-note-ref{
  background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius-sm);
  padding:8px 12px;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim);
}
.source-note-ref-link{
  background:transparent;border:none;color:var(--accent-text);font-size:12px;font-weight:600;
  cursor:pointer;padding:0;text-decoration:underline;
}
.source-note-ref-link:hover{color:var(--text);}
.meta-line{font-size:12px;color:var(--text-faint);display:flex;justify-content:space-between;}

/* ---------- the checklist and reminders sections ----------
   `:empty` rather than `display:none` on the status line, since a
   `role="status"` live region already in the flow is announced far more
   reliably than one that appears when a display rule is lifted. */
#panelSecChecklist{gap:8px;}
/* The email half of the reminders section, wrapped so pmRemindersShow()
   can hide the email controls without touching Repeat — the wrapper must
   give back the layout it interrupted. `gap:inherit` rather than a number,
   since two different hosts set two different gap values here and a
   literal would silently stop matching whichever applies.

   Safe to give this element a `display` at all only because of
   CSS/base.css: an author `display` outranks the browser's own
   `[hidden]{display:none}` whatever the specificity, and base.css's
   `!important` rule is what holds `hidden` authoritative here. */
#panelSecReminderControls{display:flex; flex-direction:column; gap:inherit;}
#panelSecReminders .account-status:empty{min-height:0; margin-top:0;}
#panelSecReminders .reminder-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
#panelSecReminders .remind-named{border-top:1px solid var(--border-soft); padding-top:10px;}

/* ---------- LAST IN THE FILE, AND THAT POSITION IS THE RULE ----------
   One opacity, plus two signals that survive it: a flat neutral wash and a
   softened edge. This ties `html .btn` on specificity, so whichever is
   declared LATER wins — anywhere but the end of this file and a disabled
   button keeps `.btn`'s ordinary ground and reads as pressable. */
button:disabled, input:disabled, select:disabled, textarea:disabled, .is-disabled{
  opacity:.55;
  background:var(--gray-soft);
  border-color:var(--border-soft);
  cursor:not-allowed;
}