/* Categories workspace
 *
 * Three panes, and the difference between them is the point: the APP category
 * pane carries real switches over a real policy; the WEBSITE pane carries none
 * and says which piece is missing; the DEVICE pane says whether anything is
 * being enforced at all. Nothing here paints a control that does not bite.
 *
 * Page-scoped (`#categories ...`) so the Apps and Websites workspaces do not
 * inherit a layout or colour from this slice, and built entirely from app.css's
 * shared vocabulary — .arow/.an/.asub/.pill/.sw/.badge/.help/.fineprint — so
 * both themes and both type scales come for free.
 */

#categories #categoriesMount { min-width: 0; }

/* The page can be wider on a portrait tablet while still using the mobile
 * shell, and the desktop rail can make a wider viewport's content column
 * narrower again. Let the workspace's real inline size decide when its two
 * panes fit instead of inferring that from the viewport. */
#categories .categories-workspace {
  min-width: 0;
  container-name: categories-workspace;
  container-type: inline-size;
}

#categories .categories-workspace-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line);
}

#categories .categories-workspace-copy {
  min-width: 0;
  flex: 1;
}

#categories .categories-kicker {
  margin: 0 0 3px;
  color: var(--attention-text);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .1em;
  line-height: 1.25;
  text-transform: uppercase;
}

#categories .categories-workspace-copy > .sect { margin-bottom: 4px; }
#categories .categories-workspace-copy > .help { margin: 0; max-width: 760px; }
#categories .categories-scope-pill { max-width: 35%; overflow: hidden; text-overflow: ellipsis; }

#categories .categories-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 16px;
}

/* `.cat-availability-pane` was the not-available panel's own box and is gone
 * with it: no code path builds that element any more, so a rule for it would
 * only be a hint to put it back. */
#categories .cat-enf-pane,
#categories .cat-apps-pane,
#categories .cat-sites-pane,
#categories .cat-delivery-pane {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--dusk2);
  padding: 15px;
}

/* ------------------------------------------------------------------ panes */

#categories .cat-sites-pane {
  border-color: color-mix(in srgb, var(--sky) 35%, var(--line));
  background: color-mix(in srgb, var(--sky) 6%, var(--dusk2));
}

#categories .cat-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#categories .cat-pane-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  gap: 8px;
}

#categories .cat-pane-title > .sect { margin: 0; font-size: 16px; }

/* ------------------------------------------------------- the app half */

#categories .cat-apps-lead { margin: 9px 0 12px; }

/* WHO DECIDED WHAT, set apart from the switches it qualifies rather than
 * dropped into the same body text — a parent skimming for "is a model doing
 * this" should find it without reading the paragraph above it. */
#categories .cat-ai-note {
  border: 1px solid var(--line);
  border-left: 3px solid var(--sky);
  border-radius: 12px;
  background: var(--dusk);
  padding: 11px 13px;
  margin-bottom: 12px;
}

#categories .cat-ai-title {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--attention-text);
}

#categories .cat-ai-note > .help { margin: 0; }

#categories .cat-coverage,
#categories .cat-coverage-partial { margin: 0 0 6px; }
#categories .cat-outcome { margin: 4px 0 10px; min-height: 0; }
#categories .cat-apps-state { margin: 9px 0 2px; }

#categories .cat-cat-list { min-width: 0; }

/* icon | name | state word | switch. At a phone width the state word drops
 * under the name rather than squeezing the switch off the row, which is what
 * keeps this from scrolling sideways at 390px. */
#categories .cat-cat-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon name sw"
    "icon pill sw";
  align-items: center;
  column-gap: 10px;
  row-gap: 3px;
}

#categories .cat-cat-row > .cat-cat-icon {
  grid-area: icon;
  align-self: center;
  width: 26px;
  font-size: 17px;
  line-height: 1;
  text-align: center;
}

#categories .cat-cat-row > .an { grid-area: name; min-width: 0; overflow-wrap: anywhere; }
#categories .cat-cat-row > .pill { grid-area: pill; justify-self: start; }
#categories .cat-cat-row > .sw { grid-area: sw; justify-self: end; }

/* ------------------------------------------- the confirmation it opens */

#categories .cat-confirm {
  border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--amber) 8%, var(--dusk));
  padding: 13px;
  margin: -2px 0 10px;
}

#categories .cat-confirm-title { margin: 0 0 8px; font-size: 15px; }

#categories .cat-confirm-facts {
  margin: 0 0 9px;
  padding-left: 19px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cloud);
}

#categories .cat-confirm-facts > li { margin-bottom: 3px; }
#categories .cat-confirm-delivery { margin: 0 0 11px; }

#categories .cat-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#categories .cat-confirm-actions > .primary,
#categories .cat-confirm-actions > .ghost {
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 11px 15px;
  flex: 1 1 150px;
}

#categories .cat-more-categories {
  margin-top: 7px;
  border-top: 1px solid var(--line);
}

#categories .cat-more-categories:not([open]) > .cat-more-body { display: none; }

#categories .cat-more-categories > summary {
  min-height: 44px;
  padding: 13px 2px 8px;
  color: var(--cloud);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

#categories .cat-more-categories > summary:hover,
#categories .cat-more-categories > summary:focus-visible { color: var(--attention-text); }

#categories .cat-more-body > .help { margin: 0 0 10px; }

/* -------------------------------------------------- the website half */

#categories .cat-sites-dark { margin: 10px 0 0; }

#categories .cat-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}

#categories .cat-primary-actions > .primary,
#categories .cat-primary-actions > .ghost {
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 11px 15px;
  flex: 1 1 170px;
}

#categories .cat-explainer { margin: 13px 0 0; }

#categories .cat-delivery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#categories .cat-delivery-title {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

#categories .cat-delivery-title > .sect { margin: 0; }
#categories .cat-refresh { flex: none; min-height: 40px; padding: 9px 12px; }
#categories .cat-delivery-help { margin: 7px 0 6px; }
#categories .cat-delivery-scope { margin: 0 0 11px; }
#categories .cat-device-state { margin: 9px 0 2px; }

#categories .cat-device-list { min-width: 0; }

#categories .cat-device-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

#categories .cat-device-row > .an {
  min-width: 0;
  overflow-wrap: anywhere;
}

#categories .cat-device-row > .pill { justify-self: end; }

#categories .cat-device-action {
  grid-column: 2 / -1;
  justify-self: stretch;
  min-height: 40px;
  margin-top: 1px;
  padding: 9px 12px;
  text-align: center;
}

#categories .cat-device-more {
  margin-top: 7px;
  border-top: 1px solid var(--line);
}

/* Do not depend on the browser's low-specificity disclosure default. Without
 * this explicit gate, a class rule on the remainder can keep closed rows in
 * layout in some Chromium builds, defeating the bounded first view. */
#categories .cat-device-more:not([open]) > .cat-device-remainder { display: none; }

#categories .cat-device-more > summary {
  min-height: 44px;
  padding: 13px 2px 8px;
  color: var(--cloud);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

#categories .cat-device-more > summary:hover,
#categories .cat-device-more > summary:focus-visible { color: var(--attention-text); }

#categories .cat-device-remainder {
  max-height: 330px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* The old category writers stay in the DOM so their existing wire tests still
 * exercise them, but current-release parents only receive the workspace above.
 * The HTML gate retains aria-hidden + inert as the semantic/interactivity gate;
 * this rule is just defense against a global `.is-hidden` regression. */
#categories #categoryControls[aria-hidden="true"][inert] { display: none !important; }

@container categories-workspace (min-width: 660px) {
  #categories .categories-workspace-grid {
    grid-template-columns: minmax(280px, .9fr) minmax(340px, 1.1fr);
    align-items: start;
  }

  /* The switches are what a parent came for; they get the whole width, and
     the two panes that only report get the split beneath them. */
  #categories .cat-apps-pane { grid-column: 1 / -1; }

  #categories .cat-cat-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "icon name pill sw";
  }

  #categories .cat-cat-row > .pill { justify-self: end; }

  #categories .cat-device-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  #categories .cat-device-action {
    grid-column: auto;
    justify-self: end;
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  #categories .categories-workspace-head { flex-wrap: wrap; }
  #categories .cat-pane-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  #categories .cat-confirm-actions { flex-direction: column; }
  #categories .cat-confirm-actions > .primary,
  #categories .cat-confirm-actions > .ghost { width: 100%; flex-basis: auto; }
  /* GoodQA 90a41ff5 — round-5 audit. `flex-wrap: wrap` above never actually
   * triggered at this width: `.categories-workspace-copy` carries `flex: 1`
   * (flex-basis 0%), so the row's hypothetical UNWRAPPED width counts the
   * title column as ~0 for the wrap decision, leaving avatar + this pill's
   * own content comfortably under the container width even before either
   * item grows. All three stayed on one line, and `margin-left: 59px` below
   * — meant to indent the pill under the title once it dropped to its own
   * row — was instead just eaten out of the title's share of the row,
   * squeezing a long child name to ~53px and wrapping it 5-6 lines deep.
   * `flex-basis: calc(100% - 59px)` forces the wrap for real: a basis that
   * large can never fit beside whatever the flex container already placed
   * on the current line, regardless of how small the OTHER items'
   * hypothetical size reads, so it is pushed onto its own new row. The
   * `- 59px` matters as much as the wrap itself: `flex-basis: 100%` ALONE,
   * measured, put the item's own margin OUTSIDE the 100% box, overflowing
   * the 262px-wide workspace by exactly the 59px margin (workspaceOverflow
   * came back 59 on the nose) — the wrap fired, but the header started
   * scrolling sideways instead. Subtracting the margin from the basis keeps
   * margin + basis summing to the container's own width, so the row still
   * wraps without the pill's box spilling past it. */
  #categories .categories-scope-pill { max-width: 100%; flex-basis: calc(100% - 59px); margin-left: 59px; }
  #categories .cat-primary-actions { flex-direction: column; }
  #categories .cat-primary-actions > .primary,
  #categories .cat-primary-actions > .ghost { width: 100%; flex-basis: auto; }
  #categories .cat-delivery-head { align-items: flex-start; }
  #categories .cat-delivery-title { align-items: flex-start; flex-direction: column; gap: 5px; }
}


/* ==========================================================================
   WHAT IS ACTUALLY IN FORCE.
   ==========================================================================
   The answer pane, so it takes the full inline size at every width rather than
   sharing a column: it is a list of device x kind rows, and a narrow column
   would wrap the one sentence that has to be read whole — the one saying a
   decision is NOT being enforced. */

#categories .cat-enf-help { margin: 4px 0 12px; max-width: 760px; }
#categories .cat-enf-state { margin: 0; }

#categories .cat-enf-list { display: grid; gap: 12px; }

#categories .cat-enf-device {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 11px 12px;
  display: grid;
  gap: 7px;
}

#categories .cat-enf-device-head {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

#categories .cat-enf-device-head > .an { font-weight: 600; min-width: 0; }

#categories .cat-enf-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 0;
  border: 0;
}

#categories .cat-enf-row > .an { min-width: 0; }
#categories .cat-enf-row .asub { white-space: normal; }

@container categories-workspace (min-width: 660px) {
  #categories .cat-enf-pane { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  #categories .cat-enf-row { grid-template-columns: minmax(0, 1fr); }
  #categories .cat-enf-row > .pill { justify-self: start; }
}