/* ==========================================================================
   POLICY PAGES — /disclosures /cookies /subprocessors /contact /faq
                  /acceptable-use /billing
   --------------------------------------------------------------------------
   pages_policy.js follows the same hyphen-free camelCase convention as wave 3
   and wave 4 and therefore already inherits pages_wave4.css's suffix rules —
   `plcPage`, `plcFactVal`, `plcSubHead` and the rest are matched by
   [class$="Page"], [class$="Val"], [class$="Head"] there. This sheet adds ONLY
   the three shapes those pages do not have.

   The hyphen-free naming is load-bearing rather than taste. obsidian_orchid.css
   matches [class*="-chip"], [class*="-status"], [class*="-tag"], [class*="-tile"]
   and uppercases [class$="-title"] and [class$="-label"] with !important. A
   camelCase name cannot be caught by any of them. Note `plcTag` in particular:
   `plc-tag` would have been repainted as a component chip on every one of these
   pages and no amount of specificity here could have taken it back.

   NO RAW HEX. Every colour is an --i-* token from static/instrument.css, and
   every token named here is one this build actually defines — a var() naming a
   token that does not exist, with no fallback, drops the whole declaration at
   parse time and leaves the element unstyled rather than obviously wrong.

   SCOPED TO #page-root, like every other page sheet. The terminal renders into
   #terminal-root and loads no page stylesheet, so nothing here can reach it.
   ========================================================================== */

#page-root .plcPage {
  --plc-gap: 14px;
}

/* ---- the fact grid ------------------------------------------------------
   Label left, value right, collapsing to stacked rows on a narrow viewport.
   `align-items: start` is NOT enough on its own here and that is worth a note:
   a grid row sizes to its tallest item, so a one-word key beside a four-line
   value leaves the key floating in a tall cell. The key gets its own baseline
   nudge instead. */

#page-root .plcFacts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#page-root .plcFactRow {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr;
  gap: 6px 18px;
  align-items: start;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--i-hair);
}

#page-root .plcFactRow:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

#page-root .plcFactKey {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--i-ink-2);
  padding-top: 2px;
}

#page-root .plcFactVal {
  font-size: 14px;
  line-height: 1.55;
  color: var(--i-ink-1);
  min-width: 0;                  /* long code strings must wrap, not overflow */
}

@media (max-width: 720px) {
  #page-root .plcFactRow {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* ---- browser-storage entries (/cookies) --------------------------------- */

#page-root .plcStoreHead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

#page-root .plcStoreName {
  font-family: var(--oo-font-data, ui-monospace, monospace);
  font-size: 14px;
  color: var(--i-amber);
  word-break: break-all;
}

#page-root .plcStoreKind {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--i-ink-2);
  border: 1px solid var(--i-hair-strong);
  border-radius: var(--i-r-control);
  padding: 2px 7px;
  white-space: nowrap;
}

/* ---- subprocessor cards ------------------------------------------------- */

#page-root .plcSubs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--plc-gap);
}

#page-root .plcSub {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 15px;
  border: 1px solid var(--i-hair);
  border-radius: var(--i-r-card);
  min-width: 0;
}

#page-root .plcSubHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

#page-root .plcSubWhat {
  font-size: 13px;
  line-height: 1.5;
  color: var(--i-ink-2);
  margin: 0;
}

#page-root .plcTag {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--i-ink-3);
  border: 1px solid var(--i-hair);
  border-radius: var(--i-r-control);
  padding: 2px 6px;
  white-space: nowrap;
  flex: none;
}

/* A source that needs a key is a source that will be UNAVAILABLE on a default
   install. Marking it differently is the difference between "this list is what
   you get" and "this list is what you could get". */
#page-root .plcTagKey {
  color: var(--i-amber);
  border-color: var(--i-amber);
}

/* ---- question and answer (/faq) ----------------------------------------- */

#page-root .plcQa {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--i-hair);
}

#page-root .plcQa:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

#page-root .plcQ {
  font-size: 15px;
  line-height: 1.4;
  margin: 0 0 8px;
  color: var(--i-ink-1);
}

/* ---- inline code -------------------------------------------------------- */
/* `plcCode` and not anything containing `mono`: instrument.css repaints
   `.mono` and `[class*="-mono"]` with `color: var(--i-ink-1) !important`, which
   would silently take this colour back. The family is set here for the same
   reason. */

#page-root .plcCode {
  font-family: var(--oo-font-data, ui-monospace, monospace);
  font-size: 12px;
  color: var(--i-ink-2);
  word-break: break-word;
}

/* ---- the unreviewed-legal-text banner ----------------------------------- */

#page-root .plcBanner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--i-amber);
  border-radius: var(--i-r-card);
  margin-bottom: 4px;
}

#page-root .plcBannerMark {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: var(--i-amber);
  flex: none;
}

#page-root .plcBannerHead {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--i-ink-1);
}

#page-root .plcBannerBody p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--i-ink-2);
}

/* ==========================================================================
   CONTACT (answers 298d/299c/300a): the form, the result line, the inbox.
   ========================================================================== */
.plcForm { display: flex; flex-direction: column; gap: 12px; }
.plcField { display: flex; flex-direction: column; gap: 5px; }
.plcFieldLabel {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--i-ink-3); font-weight: 600;
}
.plcInput {
  width: 100%; font: inherit; font-size: 13px; padding: 8px 10px;
  color: var(--i-ink-1);
}
textarea.plcInput { resize: vertical; min-height: 110px; line-height: 1.55; }
.plcFormFoot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.plcSubmit { font-size: 13px; padding: 8px 16px; cursor: pointer; }
.plcSubmit[disabled] { opacity: 0.4; cursor: default; }
.plcResult { margin: 0; font-size: 12.5px; color: var(--i-ink-3); }
.plcResult.is-good { color: var(--i-bull); }
.plcResult.is-bad { color: var(--i-error, var(--i-bear)); }

.plcMsg { padding: 12px 0; border-bottom: 1px solid var(--i-hair); }
.plcMsg:last-child { border-bottom: 0; }
.plcMsgHead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plcMsgWhen {
  margin-left: auto; font-family: var(--oo-font-data, monospace);
  font-size: 11px; color: var(--i-ink-3);
}
.plcMsgFrom { font-size: 12px; color: var(--i-ink-3); margin-top: 3px; }
.plcMsgBody { margin: 6px 0 0; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }