/* ---------------------------------------------------------------------------
   GEO Guard — customer console (approve.rsaaid.com)

   Same palette and geometry as the staff console and rsaaid.com, with four
   deliberate divergences, all of them because the reader is a customer and
   not an operator:

   1. NO GOLD ON THE EYEBROW. On the staff console gold reads STAFF CONSOLE
      and means "do not misread which surface you are typing into". A
      customer only ever sees one surface, so the distinction is noise. Gold
      survives in exactly one place here — the Tier 3 "needs work by us"
      pill — where it carries the same meaning it always has: this row is
      not what it looks like at a glance.

   2. WIDER MEASURE, LARGER TYPE. The staff console is a work queue read
      dozens of times a week at speed. This is read twice a month by someone
      deciding whether to say yes, and the text they are deciding about is
      prose, not a job row.

   3. NO MONOSPACE ON CONTENT. URLs stay mono because they are addresses.
      The proposed title and description do not: showing a customer their
      own marketing copy in a terminal font makes it look like configuration
      rather than something a person will read on their site.

   4. THE APPROVE BUTTON IS THE ONLY GRADIENT ON THE PAGE. One irreversible
      action, one control that looks like the primary action. Everything
      else, including "send your question", is quiet.

   No webfonts, same as the staff console: the CSP is default-src 'none'
   with no font-src, and loosening it on an origin that holds a session
   cookie to gain a typeface is a bad trade.
   --------------------------------------------------------------------------- */

:root {
  --ink:          #0a0c10;
  --ink-2:        #0e1117;
  --panel:        #11151c;
  --panel-raised: #161b24;
  --line:         #1b2230;
  --line-soft:    #161c27;

  --navy-deep:    #102255;
  --navy:         #1f3f86;
  --steel:        #5a82d2;
  --steel-bright: #7fa3e8;
  --gold:         #c9a24a;

  --grad: linear-gradient(102deg, #102255 0%, #1f3f86 44%, #5a82d2 72%, #173372 100%);

  --text:    #dfe6f0;
  --paper:   #f4f7fb;
  --muted:   #8893a7;
  --muted-2: #7c879a;
  --faint:   #5f6a7d;

  --bad:  #e0574f;
  --good: #4fc08d;

  --sans: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "JetBrains Mono", Consolas, "SF Mono", "Liberation Mono", monospace;

  --measure: 72ch;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--ink); -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--steel); text-decoration: none; }
a:hover { color: var(--steel-bright); }

:focus-visible { outline: 2px solid var(--steel-bright); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- header -- */

.topbar {
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 10, 14, .82);
  backdrop-filter: blur(14px);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  min-height: 86px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 14px 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: .04em;
  color: var(--text);
}

.brand img { height: 38px; width: auto; display: block; }

.brandtext { display: flex; flex-direction: column; line-height: 1.05; }

.wm {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tagline {
  font-weight: 400;
  font-size: .6rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 3px;
  -webkit-text-fill-color: initial;
}

.who {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: .82rem;
}

.who-site { font-weight: 600; color: var(--paper); }
.who-mail { font-family: var(--mono); font-size: .74rem; color: var(--muted); }

.inline { display: inline; }

.linkish {
  background: none;
  border: 0;
  padding: 9px 13px;
  border-radius: 7px;
  font: inherit;
  font-size: .82rem;
  font-weight: 500;
  color: #aeb8c8;
  cursor: pointer;
  transition: .18s;
}

.linkish:hover { color: #fff; background: rgba(90, 130, 210, .12); }

/* ---------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 28px;
}

main.wrap { flex: 1; padding-top: 38px; padding-bottom: 76px; }

/* ------------------------------------------------------------ typography -- */

h1 {
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -.015em;
  color: #fff;
  line-height: 1.25;
}

h2 {
  font-weight: 650;
  font-size: 1.08rem;
  letter-spacing: -.005em;
  color: var(--paper);
  margin-bottom: 12px;
}

p { max-width: var(--measure); }

p + p { margin-top: 12px; }

h1 + p, h1 + .where { margin-top: 12px; }

.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* ---------------------------------------------------------------- panels -- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 28px;
  margin-bottom: 18px;
}

.panel.intro { background: var(--panel-raised); }

.crumbs {
  font-size: .84rem;
  color: var(--faint);
  margin-bottom: 18px;
}

.crumbs .sep { margin: 0 6px; color: var(--line); }
.crumbs .here { color: var(--muted); }

.where {
  font-size: 1.02rem;
  color: var(--paper);
}

.url {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--faint);
  word-break: break-all;
  margin-top: 6px;
}

.explain {
  margin-top: 14px;
  color: var(--muted);
  font-size: .95rem;
}

/* Said plainly and once. A customer weighing a change to a search-results
   summary is weighing something quite different from a paragraph added to
   their About page, and that difference is the thing they care about most. */
.visible-note {
  margin-top: 14px;
  padding: 10px 14px;
  border-left: 3px solid var(--gold);
  background: rgba(201, 162, 74, .07);
  color: #e4d5b0;
  font-size: .92rem;
  border-radius: 0 8px 8px 0;
}

/* ------------------------------------------------------- before / after -- */

.ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 720px) {
  .ba { grid-template-columns: 1fr; }
}

.ba-col {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 16px 18px;
  background: var(--ink-2);
}

.ba-after {
  border-color: rgba(90, 130, 210, .38);
  background: rgba(31, 63, 134, .10);
}

.ba-head {
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}

.ba-after .ba-head { color: var(--steel-bright); }

/* Not monospace, deliberately. This is the customer's own copy as it will
   read on their site, and a terminal font makes it look like a setting. */
.ba-text {
  color: var(--paper);
  font-size: .97rem;
  line-height: 1.6;
  max-width: none;
}

.empty { font-style: italic; }

.why {
  margin-top: 16px;
  font-size: .92rem;
  color: var(--muted);
}

.whylabel { color: var(--muted-2); font-weight: 600; }

/* ------------------------------------------------- tier 3 proposal lines -- */

.propline + .propline { margin-top: 16px; }

.proplabel {
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 5px;
}

.proptext { color: var(--paper); max-width: var(--measure); }

/* ----------------------------------------------------------------- rows -- */

.grouphead {
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 30px 0 6px;
}

.grouphead-quiet { color: var(--faint); }

.groupnote {
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: 12px;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 10px;
  color: var(--text);
  transition: .16s;
}

.row-go:hover {
  border-color: rgba(90, 130, 210, .5);
  background: var(--panel-raised);
}

.row-quiet { opacity: .72; }
.row-quiet:hover { opacity: .92; }

.row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.row-what { font-weight: 600; color: var(--paper); font-size: 1rem; }
.row-where { font-size: .86rem; color: var(--muted); }

.row-side { display: flex; align-items: center; gap: 12px; }

.row-go-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--steel-bright);
}

.row-status { font-size: .82rem; color: var(--muted-2); }

.pill {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}

/* Gold, and the only gold on the page besides the visible-change note.
   Same meaning it carries on the staff console: this row is not what it
   looks like at a glance. */
.pill-work {
  border-color: rgba(201, 162, 74, .45);
  color: var(--gold);
  background: rgba(201, 162, 74, .08);
}

/* ------------------------------------------------- tier 3 scope statement -- */

/* The one panel on this page that describes the work being bought. It gets
   the steel edge rather than gold: gold on this console means "this row is
   not what it looks like at a glance", and there is nothing to misread
   here — this is the plain statement itself. */
.panel.scope {
  border-left: 3px solid var(--steel);
  background: var(--panel-raised);
}

/* Larger than body copy and not monospace, for the same reason .ba-text is
   not: this is prose a person is deciding about, and the decision deserves
   the typographic weight the rest of the page gives to headings. */
.scope-text {
  color: var(--paper);
  font-size: 1.06rem;
  line-height: 1.62;
  max-width: var(--measure);
}

.scope-text + .muted { margin-top: 14px; }

/* We owe her a description and have not written one. Muted and edgeless —
   an empty state, not an alarm. There is no approve button below it, so the
   panel must not look like a step she has failed to complete. */
.panel.scope-missing {
  border-left-color: var(--line);
  background: var(--panel);
}

/* ------------------------------------------------ acknowledgement tickbox -- */

/* Sits directly above the approve button, inside the same form. The tick is
   the record that she read the statement rather than that we displayed one,
   so it is given real target area and a border of its own instead of being
   a stray checkbox floating above a gradient button. */
.ackbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: var(--measure);
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-2);
}

/* 18px, not the browser default 13. This is a legally meaningful tick on a
   phone screen, and the default target is small enough to miss. */
.ackbox input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--steel);
  cursor: pointer;
}

.ackbox label {
  margin: 0;
  font-weight: 500;
  color: var(--text);
  font-size: .95rem;
  line-height: 1.5;
  cursor: pointer;
}

/* :has() is progressive — where it is unsupported the box simply does not
   brighten, and nothing about the form's behaviour depends on it. */
.ackbox:has(input:checked) {
  border-color: rgba(90, 130, 210, .45);
  background: rgba(31, 63, 134, .10);
}

.ackbox:has(input:focus-visible) { border-color: var(--steel-bright); }

/* --------------------------------------------------------- resend a link -- */

/* On the signed-out page, under an explanation of why the link did not
   work. Margin only: the button carries its own styling, and the sentence
   after it needs to sit clear of it. */
.resend-form {
  margin-top: 18px;
  margin-bottom: 12px;
}

/* -------------------------------------------------------------- actions -- */

.actions { background: var(--panel-raised); }

.approve-form { margin-bottom: 4px; }

.or {
  margin: 22px 0 20px;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 14px;
}

.or::before, .or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.btn {
  display: inline-block;
  border: 0;
  border-radius: 10px;
  padding: 14px 26px;
  font: inherit;
  font-size: .96rem;
  font-weight: 650;
  cursor: pointer;
  transition: .18s;
  text-align: center;
}

/* The one gradient. One irreversible action, one primary control. */
.btn-go {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 6px 20px rgba(31, 63, 134, .35);
}

.btn-go:hover { filter: brightness(1.12); }

.btn-quiet {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}

.btn-quiet:hover { border-color: var(--steel); color: #fff; }

.ask-form label {
  display: block;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 6px;
}

.fieldnote {
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: 10px;
}

/* Four rows and a real minimum height. The staff console shipped a
   two-row reason box and it read as an afterthought on the one screen
   where somebody is signing their name to something; the same applies
   here, more so, because this writer is not being paid to be patient. */
.ask-form textarea {
  width: 100%;
  max-width: var(--measure);
  min-height: 110px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font: inherit;
  font-size: .95rem;
  line-height: 1.55;
  resize: vertical;
  margin-bottom: 14px;
}

.ask-form textarea:focus { border-color: var(--steel); }

.ask-form textarea::placeholder { color: var(--faint); }

/* ------------------------------------------------------------- questions -- */

.qa-q, .qa-a { max-width: var(--measure); }
.qa-a { margin-top: 16px; }

.qa-label {
  display: block;
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 5px;
}

.qa-a .qa-label { color: var(--steel-bright); }

/* ------------------------------------------------------------------ log -- */

table.log { width: 100%; border-collapse: collapse; font-size: .9rem; }

table.log th {
  text-align: left;
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
  padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--line);
}

table.log td {
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

table.log td.url { font-size: .76rem; }
table.log td.when { color: var(--muted); white-space: nowrap; }

/* ---------------------------------------------------------------- flash -- */

.flash {
  border-radius: 11px;
  padding: 14px 18px;
  margin-bottom: 18px;
  font-size: .95rem;
  border: 1px solid var(--line);
  max-width: var(--measure);
}

.flash-ok {
  border-color: rgba(79, 192, 141, .4);
  background: rgba(79, 192, 141, .08);
  color: #b7ead2;
}

.flash-error {
  border-color: rgba(224, 87, 79, .42);
  background: rgba(224, 87, 79, .08);
  color: #f0bbb7;
}

.flash-note { background: var(--panel-raised); color: var(--text); }

/* --------------------------------------------------------------- footer -- */

.foot {
  border-top: 1px solid var(--line-soft);
  background: rgba(8, 10, 14, .6);
}

.foot-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .78rem;
  color: var(--faint);
}

.foot-note { color: var(--muted-2); }

/* -------------------------------------------------- results (proof report) -- */

/* Three numbers side by side: what we did, and the two measures. Green and
   red are used only on the change figures, never on the numbers themselves:
   a health score of 70 is not "bad" in isolation, a drop of 5 is. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

@media (max-width: 720px) {
  .stats { grid-template-columns: 1fr; }
}

.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
}

.stat-label {
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}

.stat-num {
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.stat-arrow { color: var(--faint); font-weight: 400; }

.stat-note { font-size: .82rem; color: var(--muted); margin-top: 6px; }

.delta { font-size: .95rem; font-weight: 600; }
.stat-num .delta { font-size: 1rem; vertical-align: middle; }
.delta-up   { color: var(--good); }
.delta-down { color: var(--bad); }
.delta-flat { color: var(--muted-2); }

.page-work .worklist {
  margin: 12px 0 8px 18px;
  color: var(--paper);
}

.page-work .worklist li + li { margin-top: 3px; }

table.log th.num, table.log td.num { text-align: right; white-space: nowrap; }