/* Website rules workspace
 *
 * The page holds two different truths: rules belong to a child profile, while
 * delivery is confirmed per device. Keep those layers visually separate and
 * keep the rule list compact without hiding any saved decision from the DOM.
 * This file is intentionally page-scoped so later portal work can move without
 * changing the shared card and row vocabulary in app.css. */

#sites .web-rules-title,
#sites .web-rules-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#sites .web-rules-title > div,
#sites .web-rules-list-head > div {
  min-width: 0;
  flex: 1;
}

#sites .web-rules-title .help,
#sites .web-rules-list-head .fineprint {
  margin-bottom: 0;
}

#sites #sitesRuleScope {
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* NEUTRAL FRAME, NOT INDIGO — GoodQA colour-semantics audit, 2026-09-21/22.
 * MEASURED: this panel's border/background carried `var(--sky)`, which is
 * not a second brand-blue — app.css defines `--attention` AND
 * `--attention-text` as `var(--sky)` (in light theme `--sky` and
 * `--attention` are the identical #6D5BD0), so `--sky` IS this product's
 * indigo needs-attention token. But this panel is a PERMANENT, always-shown
 * explainer (index.html ~3086-3094: "Device delivery" + the honest
 * whole-site-vs-page-rule limits), not itself a status claim — the ACTUAL
 * live status is the one-line `#sitesWebStatus` inside it, which already
 * correctly switches `.statusline-good` (confirmed, green) / `.statusline-
 * warn` (unconfirmed, amber) / plain (checking / no device) on its own. A
 * static indigo frame around that meant every state, including a genuinely
 * CONFIRMED one, was wearing "needs attention" — and the one state the audit
 * measured (unconfirmed) additionally clashed with its own amber headline
 * one line below. Neither a static indigo NOR a static amber frame is
 * correct for a box whose real status already varies; a frame that makes no
 * colour claim at all is. This uses the same neutral `--line`/`--dusk2` pane
 * treatment `#categories .cat-enf-pane`/`.cat-apps-pane` already use for
 * their own always-shown explanatory panels. Making the frame itself track
 * `#sitesWebStatus`'s state (amber while unconfirmed, matching the amber
 * "Pending…" treatment Devices/Overview/Time already give this exact state)
 * would be the fuller fix, but it needs `renderWebFilterStatusLine()`
 * (app.js) to add a matching modifier class — out of this lane's reach; see
 * the final report's protected-file change request. */
#sites .web-device-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 16px 0 12px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--dusk2);
}

#sites .web-device-copy { min-width: 0; }

/* Not part of the fix above — this small-caps section kicker keeps the same
 * accent-text colour `.categories-kicker`/`.cat-ai-title` already use for a
 * label, as distinct from a status claim. */
#sites .web-rules-eyebrow {
  margin: 0 0 4px;
  color: var(--attention-text);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}

#sites .web-device-panel .statusline {
  margin: 0 0 5px;
  font-size: 13px;
}

#sites .web-device-panel .help {
  margin: 0;
  line-height: 1.48;
}

#sites .web-device-panel .fineprint { margin: 7px 0 0; }
#sites .web-device-panel > .ghost { align-self: center; white-space: nowrap; }

/* GoodQA desktop-responsiveness audit, 2026-09-21/22: the shared `.screen`
 * 2-column card grid (app.css) auto-places this card as the trailing/odd
 * item whenever it is the screen's last card, stranding it beside a measured
 * 561x434.8px block of empty space at 1440px (it collapses to one column,
 * with no waste, at 1280px/1024px — this is a wide-desktop-only defect).
 * app.css's own `.screen` rule already spans specific cards by ID the same
 * way (`#startCard` is named in `.screen > .toprow, ..., #startCard, ...`);
 * this does the same for this card, from this file, using the ID it already
 * has (index.html `<div class="card" id="favoritesCard">`), so the fix does
 * not require touching the shared stylesheet. */
#sites #favoritesCard { grid-column: 1 / -1; }

/* The phone's six child-task tabs already wrap into two fully visible rows.
 * Keeping that 102px rail sticky over a long Saved rules list covers the row
 * a parent is reading or trying to act on. On Web only, leave the complete
 * rail in normal document flow. Tablet and desktop retain the shared sticky
 * behaviour; no destination or keyboard target is removed. */
@media (max-width: 560px) {
  #sites > #sitesSubnav {
    position: static;
    top: auto;
    backdrop-filter: none;
    background: var(--dusk);
  }
}

#sites .web-rules-help { margin: 0 0 18px; }

#sites .web-rules-list-head {
  align-items: center;
  margin: 0 0 10px;
  padding-top: 2px;
}

#sites .web-rules-list-head > .ghost { flex: none; }

/* Ask is a first-class effect, not an Allow variant. Amber is the portal's
 * existing waiting-for-a-parent state, matching the pill inside each Ask row. */
#sites .rulebox.ruleask { border-left: 3px solid var(--amber); }
#sites .rulebox.ruleask .rulehead b { color: var(--waiting-text); }
/* THIS RULE IS GONE, AND ITS FINDING IS NOW THE TOKEN'S. It read:
 *
 *   At 13px, the general light-theme amber is too close to the threshold on the
 *   real rule-card surface. Reuse the portal's measured warning-text amber.
 *   :root[data-theme="light"] #sites .rulebox.ruleask .rulehead b { color: #7A4F00; }
 *
 * Correct, and the third independent lane to reach for #7A4F00 rather than the
 * token. app.css's light `--amber` IS #7A4F00 now (see its own comment there —
 * it was #9B6500 above a comment quoting a different colour's measurement, and
 * seven surfaces across app.css and this directory were failing AA on it), so
 * this line had become a restatement. Measured before and after removing it,
 * worst pixel under the glyphs: 6.39:1 both times, because the colour is
 * identical. `.pw-state-option.is-selected.pw-state-temporary` in
 * policy-workspace.css KEEPS its literal for the reason the two `.banner.warn`
 * rules do — its selector also matches `:root:not([data-theme])`, where the
 * DARK tokens are in force and var(--amber) would paint #FFC44B. */

/* Fit one, two, or three effect groups to the available width. The old
 * viewport-only two-column breakpoint could squeeze a third group into a
 * narrow content track beside the desktop rail. */
#sites .rulecols {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}

/* Four decisions stay immediately scannable. A large historical tail remains
 * one click away, using native disclosure semantics and the same real rows. */
#sites .rulebox-more {
  margin: 5px 0 8px;
  border-top: 1px solid var(--line);
}

#sites .rulebox-more > summary {
  min-height: 42px;
  padding: 12px 2px 8px;
  color: var(--glow);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

#sites .rulebox-more > summary:hover,
#sites .rulebox-more > summary:focus-visible { color: var(--cloud); }

@media (max-width: 680px) {
  #sites .web-rules-title,
  #sites .web-rules-list-head,
  #sites .web-device-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  #sites #sitesRuleScope { max-width: 100%; align-self: flex-start; }
  #sites .web-device-panel > .ghost,
  #sites .web-rules-list-head > .ghost { width: 100%; }
  #sites .rulecols { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   THE CONSENT SHEET — OWNER-DECISIONS §3.25(d), the refusal that became the
   grant.

   PAGE-SCOPED HERE RATHER THAN IN app.css, and that is this file's own stated
   reason for existing: the Websites screen keeps its own vocabulary so a later
   portal pass can move it without touching the shared card rules.

   AMBER, NOT CORAL. UI-DIRECTION-2026-08-22 §4 gives amber to "attention" and
   coral to destructive/paused; this block asks a question, it does not warn of
   a loss. The shell is the same `--dusk2` fill and `--line` radius every other
   block inside the rule builder carries, so it reads as part of that card
   rather than as a banner bolted onto it.

   THE TWO ACTIONS ARE A TWO-COLUMN GRID, matching `.sites-builder-actions`, so
   "Not now" and "Allow" stay the same size as every other paired action on the
   390px phone lane and neither becomes the accidental default by being wider.
   =========================================================================== */
.sites-consent {
  margin-top: 14px;
  padding: 13px;
  min-width: 0;
  background: var(--dusk2);
  border: 1px solid var(--amber);
  border-radius: 14px;
}
.sites-consent > h3 { margin: 0 0 6px; }
.sites-consent > p { margin: 0 0 8px; overflow-wrap: anywhere; }
.sites-consent > p:last-child { margin-bottom: 0; }
.sites-consent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.sites-consent-actions button { min-width: 0; text-align: center; }

/* The rule list's banner opens the SAME sheet inside a `.pw-dialog`
   (css/policy-workspace.css owns that frame), so the inner block drops its own
   card shell there rather than drawing a box inside a box. */
.sites-consent-dialog .sites-consent {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}