/* 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;
}

#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 color-mix(in srgb, var(--sky) 34%, var(--line));
  border-left: 4px solid var(--sky);
  border-radius: 15px;
  background: color-mix(in srgb, var(--sky) 7%, var(--dusk2));
}

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

#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; }

#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;
}