/* ============================================================
   ASI HALO
   Reputation and brand protection.

   The brief was Amex Centurion: elegant, black, and it should make
   the person reading it feel that something serious is being looked
   after on their behalf. Four decisions carry that.

   1. One metal, no colour. The page is near black and everything on
      it is a step of platinum. Status tints are desaturated so far
      that they read as metal with a temperature rather than as red,
      amber and green. A reputation portal full of traffic lights
      looks like a bug tracker.
   2. Edges, not boxes. Sections are separated by hairlines that fade
      out at both ends, and panels carry a single lit top edge the way
      a machined surface catches light. Almost nothing has a border on
      all four sides.
   3. Sharp corners. 2px at most. Rounded corners read friendly, and
      friendly is not what this is for.
   4. Space. Wide margins, tracked-out small caps, light weights at
      large sizes. Restraint is the whole signal.

   Colour never carries meaning alone: every state is spelled out in
   words beside its pill.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Ground */
  --ink:      #060607;
  --ink-2:    #0A0A0C;
  --panel:    #0E0E11;
  --panel-2:  #131317;

  /* Hairlines */
  --line:     rgba(255, 255, 255, 0.075);
  --line-2:   rgba(255, 255, 255, 0.14);
  --line-lit: rgba(255, 255, 255, 0.22);

  /* Metal. Every one of these clears 4.5:1 on the panel except
     --metal-4, which is hairlines and disabled states only. */
  --metal-1:  #F2F4F7;   /* 17.5:1 */
  --metal-2:  #C9CFD8;   /* 12.3:1 */
  --metal-3:  #8A929E;   /*  6.1:1 */
  --metal-4:  #6B727D;   /*  4.0:1, never small body text */

  /* The halo itself. Warm, and used only where light would be. */
  --champagne: #E8DEC4;

  /* Status, desaturated to read as metal rather than as signal lamps. */
  --good: #8FBF9E;       /*  9.3:1 */
  --warn: #D4B678;       /*  9.9:1 */
  --crit: #D48174;       /*  6.6:1 */
  --mute: #9AA3B0;       /*  7.6:1 */
  --dim:  #6B727D;

  --f-display: 'Jost', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, sans-serif;

  --t: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  --shell: 1180px;
}

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

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

body {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--metal-2);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 300;
  color: var(--metal-1);
  line-height: 1.22;
  letter-spacing: -0.005em;
}

a { color: var(--metal-1); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--champagne); }

::selection { background: rgba(232, 222, 196, 0.22); color: #fff; }

:focus-visible {
  outline: 1px solid var(--champagne);
  outline-offset: 3px;
}

.muted { color: var(--metal-3); }
.small { font-size: 0.86rem; }
.nowrap { white-space: nowrap; }
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  letter-spacing: 0.01em;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The tracked-out micro label. Used everywhere a field needs naming
   without raising its voice. */
.eyebrow,
.stat-label,
.sec-label {
  font-family: var(--f-display);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--metal-3);
}

/* ============================================================
   Identity
   ============================================================ */

.lockup { display: inline-flex; align-items: center; gap: 14px; }
.lockup-words { display: flex; flex-direction: column; line-height: 1; }
.lockup-name {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.32rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--metal-1);
  /* The tracking adds a trailing gap after the last letter, which
     makes the lockup look off-centre under the ring. Pull it back. */
  margin-right: -0.34em;
}
.lockup-by {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--metal-4);
  margin-top: 7px;
  margin-right: -0.3em;
}
.halo-mark { display: block; overflow: visible; }

.lockup-stacked {
  flex-direction: column;
  gap: 18px;
  text-align: center;
}
.lockup-stacked .lockup-words { align-items: center; }
.lockup-stacked .lockup-name { font-size: 1.6rem; letter-spacing: 0.4em; margin-right: -0.4em; }
.lockup-stacked .lockup-by { font-size: 0.64rem; margin-top: 10px; }

/* ============================================================
   Sign in
   ============================================================ */

.auth {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  overflow: hidden;
  /* Deliberately no background. The guilloche canvas is fixed behind
     this element at z-index 0, and an opaque background here paints
     straight over it. html and body already carry the black. */
}

/* The guilloche field. Engine turning, the pattern on banknotes and
   share certificates, drawn live rather than as an image so it is
   never twice the same. */
#guilloche {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Vignette over the pattern, so the centre panel always has a quiet
   ground under it however the pattern happens to fall. */
.auth::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Two jobs. The first keeps a quiet pool under the card so the
       form is always readable whatever the pattern is doing. The
       second pulls the corners and the bottom down, because the
       engraving is at its densest where the curves bunch and without
       this it burns out down there and takes the footer with it. */
    radial-gradient(ellipse 48% 44% at 50% 46%, rgba(6, 6, 7, 0.82) 0%, rgba(6, 6, 7, 0.34) 56%, transparent 80%),
    radial-gradient(ellipse 104% 88% at 50% 44%, transparent 28%, rgba(6, 6, 7, 0.58) 70%, rgba(6, 6, 7, 0.93) 100%);
}

.auth-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 408px;
}

.auth-card {
  background: rgba(10, 10, 12, 0.58);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 46px 40px 38px;
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow:
    0 1px 0 0 var(--line-lit) inset,
    0 40px 90px -30px rgba(0, 0, 0, 0.9);
  text-align: center;
}

.auth-brand { display: flex; justify-content: center; margin-bottom: 26px; }

.auth-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--metal-2);
  margin-bottom: 6px;
}
.auth-sub {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--metal-4);
  margin-bottom: 30px;
}

.auth form { text-align: left; }

.auth-foot {
  position: relative;
  z-index: 2;
  margin-top: 26px;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--metal-3);
  /* This sits outside the card, directly over the engraving, which is
     at its busiest low on the page. A soft dark halo under the glyphs
     keeps it legible without putting a box around it. At metal-4 and a
     lighter scrim it was washing out against the densest crossings. */
  text-shadow: 0 0 20px rgba(6, 6, 7, 1), 0 0 9px rgba(6, 6, 7, 1),
               0 0 3px rgba(6, 6, 7, 1);
}
/* The surrounding line is metal-3 now, so the link needs to sit above
   it to still read as a link. */
.auth-foot a { color: var(--metal-2); }

/* Sits under the support line, quieter than it. Same dark halo, because
   it is over the engraving too. */
.auth-copy {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  /* metal-3, not metal-4. This line sits over the brightest part of the
     engraving, where the whole ring crosses itself, and metal-4 vanished
     into it. 6.1:1 against the ink, and the heavier scrim below holds it
     where the lines are densest. */
  color: var(--metal-3);
  text-shadow: 0 0 20px rgba(6, 6, 7, 1), 0 0 9px rgba(6, 6, 7, 1),
               0 0 3px rgba(6, 6, 7, 1);
}

/* ============================================================
   Fields
   ============================================================ */

.field { margin-bottom: 20px; }
.field > label,
.field > .lab {
  display: block;
  font-family: var(--f-display);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--metal-3);
  margin-bottom: 9px;
}
.field .hint { font-size: 0.78rem; color: var(--metal-4); margin-top: 7px; line-height: 1.55; }

.field input[type="text"],
.field input[type="password"],
.field input[type="email"],
.field input[type="url"],
.field input[type="number"],
.field input[type="date"],
.field input[type="search"],
.field select,
.field textarea {
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  font-family: var(--f-body);
  font-size: 0.95rem;
  color: var(--metal-1);
  transition: border-color var(--t), box-shadow var(--t);
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.65; padding-top: 6px; }
.field select {
  appearance: none;
  cursor: pointer;
  /* A caret drawn in the border colour, so the control still reads as
     a menu once the box around it is gone. */
  background-image: linear-gradient(45deg, transparent 50%, var(--metal-3) 50%),
                    linear-gradient(135deg, var(--metal-3) 50%, transparent 50%);
  background-position: right 10px center, right 5px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 24px;
}
.field select option { background: var(--panel); color: var(--metal-1); }

.field input::placeholder, .field textarea::placeholder { color: var(--metal-4); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--champagne);
  box-shadow: 0 1px 0 0 var(--champagne);
}
.field input[readonly] { color: var(--metal-3); }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.field-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.88rem;
  margin-bottom: 16px;
  color: var(--metal-2);
}
.check input {
  width: 15px; height: 15px; margin-top: 4px; flex-shrink: 0;
  accent-color: var(--champagne);
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px;
  border: 1px solid var(--line-2);
  border-radius: 1px;
  background: transparent;
  font-family: var(--f-display);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--metal-1);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: color var(--t), border-color var(--t), background var(--t);
}
/* A light that passes across the button on hover, once. The same
   gesture as the ring: metal catching the light. */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-110%);
  background: linear-gradient(100deg, transparent 0%, rgba(232, 222, 196, 0.16) 50%, transparent 100%);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:hover {
  color: #fff;
  border-color: var(--champagne);
  background: rgba(232, 222, 196, 0.05);
}
.btn:hover::after { transform: translateX(110%); }
.btn:active { background: rgba(232, 222, 196, 0.1); }

.btn-primary {
  border-color: rgba(232, 222, 196, 0.55);
  color: var(--champagne);
}
.btn-primary:hover { background: rgba(232, 222, 196, 0.1); }

.btn-block { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 0.66rem; letter-spacing: 0.17em; }
.btn-danger { border-color: rgba(212, 129, 116, 0.4); color: var(--crit); }
.btn-danger:hover { border-color: var(--crit); background: rgba(212, 129, 116, 0.08); color: #f0b3aa; }
.btn[disabled], .btn.is-off { opacity: 0.4; pointer-events: none; }

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

/* ============================================================
   App chrome
   ============================================================ */

.top {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(6, 6, 7, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.top-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 32px;
  height: 84px;
  display: flex;
  align-items: center;
  gap: 36px;
}
.top-brand { flex-shrink: 0; }
.top-brand:hover { color: inherit; }

.top-nav { display: flex; align-items: center; gap: 30px; }
.top-nav a {
  position: relative;
  font-family: var(--f-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--metal-3);
  padding: 4px 0;
}
.top-nav a:hover { color: var(--metal-1); }
.top-nav a.on { color: var(--metal-1); }
.top-nav a.on::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: linear-gradient(90deg, var(--champagne), rgba(232, 222, 196, 0.1));
}

.top-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.who {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.35;
  text-align: right;
}
.who-name {
  font-family: var(--f-display);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--metal-1);
}
.who-role {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--metal-4);
}

/* ============================================================
   Page shell
   ============================================================ */

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 32px; }
.shell-narrow { max-width: 820px; }

.band { padding: 64px 0; }
.band-tight { padding: 40px 0; }
.band-raised { background: var(--ink-2); }

.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent);
}

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.sec-head h2 { font-size: 1.32rem; }
.sec-head .sec-label { margin-bottom: 0; }
.sec-head .sec-right { margin-left: auto; display: flex; gap: 12px; align-items: center; }

.page-head { padding: 52px 0 36px; }
.page-head h1 { font-size: 2.1rem; letter-spacing: -0.01em; }
.page-head .eyebrow { display: block; margin-bottom: 14px; }
.page-head .lede { color: var(--metal-3); margin-top: 12px; max-width: 62ch; }

.crumb {
  font-family: var(--f-display);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--metal-4);
  margin-bottom: 16px;
}
.crumb a { color: var(--metal-3); }

/* ============================================================
   Status statement and figures
   ============================================================ */

.statement { padding: 74px 0 60px; }
.statement .eyebrow { display: block; margin-bottom: 20px; }
.statement h1 {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 200;
  letter-spacing: -0.018em;
  max-width: 20ch;
}
.statement .since {
  margin-top: 20px;
  font-size: 0.82rem;
  color: var(--metal-3);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat {
  padding: 30px 28px 30px 0;
  border-left: 1px solid var(--line);
  padding-left: 28px;
}
.stat:first-child { border-left: 0; padding-left: 0; }
.stat-label { display: block; margin-bottom: 14px; }
.stat-value {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--metal-1);
  letter-spacing: -0.02em;
}
.stat-note { font-size: 0.78rem; color: var(--metal-4); margin-top: 11px; line-height: 1.5; }
.stat-value.is-good { color: var(--good); }
.stat-value.is-warn { color: var(--warn); }
.stat-value.is-crit { color: var(--crit); }

/* ============================================================
   Pills
   ============================================================ */

.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid;
  border-radius: 1px;
  font-family: var(--f-display);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tone-good { color: var(--good); border-color: rgba(143, 191, 158, 0.32); background: rgba(143, 191, 158, 0.06); }
.tone-warn { color: var(--warn); border-color: rgba(212, 182, 120, 0.32); background: rgba(212, 182, 120, 0.06); }
.tone-crit { color: var(--crit); border-color: rgba(212, 129, 116, 0.34); background: rgba(212, 129, 116, 0.07); }
.tone-mute { color: var(--mute); border-color: var(--line-2); }
.tone-dim  { color: var(--metal-4); border-color: var(--line); }

.pills { display: inline-flex; gap: 7px; flex-wrap: wrap; align-items: center; }

/* ============================================================
   Signal feed
   ============================================================ */

.feed { border-top: 1px solid var(--line); }

.item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--t);
}
.item:hover { background: rgba(255, 255, 255, 0.012); }

.item-main { min-width: 0; }
.item-src {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.item-source {
  font-family: var(--f-display);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--champagne);
}
.item-dot { color: var(--metal-4); font-size: 0.6rem; }
.item-when { font-size: 0.74rem; color: var(--metal-4); }

.item-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.18rem;
  color: var(--metal-1);
  line-height: 1.35;
  margin-bottom: 9px;
}
.item-title a:hover { color: var(--champagne); }

.item-body { color: var(--metal-3); font-size: 0.91rem; line-height: 1.68; }
.item-body p { margin-bottom: 10px; }
.item-body p:last-child { margin-bottom: 0; }

.item-action {
  margin-top: 14px;
  padding: 13px 16px;
  border-left: 1px solid rgba(232, 222, 196, 0.3);
  background: rgba(232, 222, 196, 0.028);
  font-size: 0.86rem;
  color: var(--metal-2);
}
.item-action .eyebrow { display: block; margin-bottom: 5px; font-size: 0.6rem; }

.item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  text-align: right;
}
.item-meta { font-size: 0.72rem; color: var(--metal-4); }
.item-link {
  font-family: var(--f-display);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metal-3);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
}
.item-link:hover { color: var(--champagne); border-bottom-color: var(--champagne); }

/* ============================================================
   Developing situations

   The one part of the page allowed to raise its voice, and only
   because it earns it: this is what is happening right now. It gets a
   lit left edge rather than a coloured panel, which reads as urgency
   without turning the page into an alert.
   ============================================================ */

.dev-item {
  position: relative;
  padding: 26px 0 26px 28px;
  border-left: 1px solid var(--line-2);
  margin-bottom: 8px;
}
.dev-item::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 26px;
  bottom: 26px;
  width: 1px;
  background: linear-gradient(180deg, var(--champagne), rgba(232, 222, 196, 0.08));
}
.dev-item:last-child { margin-bottom: 0; }

.dev-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.dev-when { font-size: 0.74rem; color: var(--metal-4); margin-left: auto; }

.dev-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.42rem;
  color: var(--metal-1);
  line-height: 1.3;
  margin-bottom: 10px;
  max-width: 44ch;
}
.dev-summary { max-width: 72ch; }

/* The running log. Newest at the top, with the live one marked by a
   filled dot so the eye lands on it first. */
/* Same measure as .dev-summary above it. Without the cap the log ran the
   full width of the band while the summary wrapped at 72ch, and the two
   read as different columns of the same item. */
.timeline { list-style: none; margin-top: 18px; max-width: 74ch; }
.timeline li {
  position: relative;
  padding: 0 0 14px 22px;
  font-size: 0.88rem;
  color: var(--metal-3);
  line-height: 1.6;
}
.timeline li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid var(--metal-4);
}
.timeline li.now::before {
  background: var(--champagne);
  border-color: var(--champagne);
  box-shadow: 0 0 0 3px rgba(232, 222, 196, 0.14);
}
.timeline li.now { color: var(--metal-2); }
.timeline li:last-child { padding-bottom: 0; }
.tl-when {
  display: block;
  font-family: var(--f-display);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--metal-4);
  margin-bottom: 3px;
}

/* ============================================================
   Platform claim detail
   ============================================================ */

/* The sentence a client actually looks for on a takedown. */
.claim-secured {
  font-family: var(--f-display);
  font-size: 0.98rem;
  color: var(--champagne);
  margin-bottom: 11px;
  letter-spacing: 0.01em;
}

.claim {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 20px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  max-width: 62ch;
}
.claim dt {
  font-family: var(--f-display);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metal-4);
  padding-top: 2px;
  white-space: nowrap;
}
.claim dd { color: var(--metal-2); word-break: break-word; }

/* ============================================================
   Empty states
   ============================================================ */

.empty {
  padding: 72px 24px;
  text-align: center;
  border-top: 1px solid var(--line);
}
/* This was written as .empty-mark, a class halo_mark() has never emitted,
   so it matched nothing and the mark sat hard left while the text under it
   was centred. Targeting the class the function actually outputs means it
   cannot drift apart again, and it fixes the three admin empty states too. */
.empty .halo-mark { opacity: 0.4; margin: 0 auto 22px; }
.empty h3 {
  font-size: 1.05rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  margin-bottom: 9px;
}
.empty p { color: var(--metal-4); font-size: 0.9rem; max-width: 46ch; margin: 0 auto; }

/* ============================================================
   Notes
   ============================================================ */

.note {
  padding: 15px 20px;
  border-left: 2px solid;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.9rem;
  margin-bottom: 24px;
  line-height: 1.6;
}
.note-good { border-color: var(--good); color: var(--good); }
.note-bad  { border-color: var(--crit); color: var(--crit); }
.note-warn { border-color: var(--warn); color: var(--warn); }
.note-info { border-color: var(--metal-4); color: var(--metal-2); }
.note a { text-decoration: underline; color: inherit; }
.note strong { font-weight: 600; }

/* ============================================================
   Admin
   ============================================================ */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  margin-bottom: 28px;
  /* The lit top edge. One line of light on the leading surface, the
     way a machined panel catches a lamp. */
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset;
}
.panel-head {
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.panel-head h2 { font-size: 1.05rem; letter-spacing: 0.02em; }
.panel-head .ph-note { font-size: 0.78rem; color: var(--metal-4); margin-top: 3px; }
.panel-head .ph-right { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.panel-body { padding: 26px 28px; }
.panel-body > :last-child { margin-bottom: 0; }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.grid-2 > * { min-width: 0; }

.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left;
  padding: 12px 18px;
  font-family: var(--f-display);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--metal-4);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background var(--t); }
.tbl tbody tr:hover { background: rgba(255, 255, 255, 0.015); }
.tbl .t-name { font-family: var(--f-display); font-size: 1rem; color: var(--metal-1); }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-scroll .tbl { min-width: 680px; }

/* A record in the admin panel: collapsed to one line, opening to its
   own edit form. Keeps a client with forty signals on their file to a
   page you can still scan. */
.rec { border-bottom: 1px solid var(--line); }
.rec:last-child { border-bottom: 0; }
.rec > summary {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 15px 0;
  cursor: pointer;
  list-style: none;
  transition: color var(--t);
}
.rec > summary::-webkit-details-marker { display: none; }
.rec > summary::before {
  content: '+';
  font-family: var(--f-display);
  font-size: 0.95rem;
  color: var(--metal-4);
  width: 14px;
  flex-shrink: 0;
  transition: color var(--t);
}
.rec[open] > summary::before { content: '\2212'; color: var(--champagne); }
.rec > summary:hover { color: var(--metal-1); }
.rec > summary:hover::before { color: var(--champagne); }
.rec-title {
  font-family: var(--f-display);
  font-size: 1rem;
  color: var(--metal-1);
  flex: 1;
  min-width: 180px;
}
.rec-meta { font-size: 0.76rem; color: var(--metal-4); }
.rec-body {
  padding: 10px 0 30px 30px;
  border-left: 1px solid var(--line);
  margin-left: 6px;
}
.rec-add > summary::before { content: '+'; color: var(--champagne); }
.rec-add[open] > summary::before { content: '\2212'; }

.facts { list-style: none; }
.facts li {
  display: flex;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}
.facts li:last-child { border-bottom: 0; }
.facts .k { color: var(--metal-4); flex-shrink: 0; min-width: 110px; }
.facts .v { color: var(--metal-2); margin-left: auto; text-align: right; word-break: break-word; }

/* ============================================================
   Footer
   ============================================================ */

.foot {
  border-top: 1px solid var(--line);
  padding: 30px 0;
  margin-top: 40px;
}
.foot-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--metal-4);
}
.foot-conf { margin-left: auto; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1040px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat { border-top: 1px solid var(--line); }
  .stat:nth-child(1), .stat:nth-child(2) { border-top: 0; }
}

@media (max-width: 860px) {
  .top-inner { height: auto; padding: 16px 22px; flex-wrap: wrap; gap: 14px 24px; }
  .top-nav { order: 3; width: 100%; gap: 22px; overflow-x: auto; padding-bottom: 2px; }
  .top-right { margin-left: auto; }
  .shell, .foot-inner { padding: 0 22px; }
  .band { padding: 46px 0; }
  .statement { padding: 50px 0 40px; }
  .page-head { padding: 38px 0 28px; }
  .field-row, .field-row-3 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .item { grid-template-columns: minmax(0, 1fr); }
  .item-side { flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; text-align: left; }
  .panel-body, .panel-head { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 560px) {
  /* Still two across. Four short numbers stacked one per row turns the
     top of the page into a minute of scrolling before the first signal. */
  .stat { padding: 22px 12px 22px 18px; }
  .stat-value { font-size: 1.95rem; }
  .stat-label { font-size: 0.6rem; letter-spacing: 0.16em; }
  .stat-note { font-size: 0.72rem; }
  .statement h1 { font-size: 1.85rem; }
  .auth-card { padding: 36px 24px 30px; }
  .lockup-stacked .lockup-name { font-size: 1.32rem; letter-spacing: 0.32em; margin-right: -0.32em; }
  .foot-conf { margin-left: 0; }
  .facts li { flex-direction: column; gap: 3px; }
  .facts .v { margin-left: 0; text-align: left; }
}

/* ============================================================
   Motion and print
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* The guilloche is not removed. It is drawn once, as a still
     engraving, by the same code that would otherwise animate it. */
}

@media print {
  .top, .foot, .btn, #guilloche { display: none !important; }
  body { background: #fff; color: #111; }
  .panel { border-color: #ccc; }
  h1, h2, h3, .stat-value, .item-title { color: #000; }
}

/* ============================================================
   The travelling light
   ============================================================ */

/* The mark is a ring seen in perspective, so the light has to move at a
   constant ANGULAR speed, not a constant speed along the outline. Those
   are different: an even slide around the oval reads as a bead on a
   racetrack, while the real thing lingers at the left and right edges,
   where it is coming toward you, and sweeps quickly across the near and
   far sides.

   CSS has no trigonometry that is safe to rely on yet, so x and y are
   sampled every 15 degrees from 34cos and 11sin and interpolated. Three
   nested groups, because a single rotate would need the ellipse squashed
   and would squash the light with it: x translates, y translates, and
   the innermost scales and fades so the light grows as it comes forward.
   All three share one duration, so they stay in step. */

.halo-orbit-x { animation: halo-orbit-x 9s linear infinite; }
.halo-orbit-y { animation: halo-orbit-y 9s linear infinite; }
.halo-orbit-d { animation: halo-orbit-d 9s linear infinite; }

@keyframes halo-orbit-x {
  0% { transform: translateX(-24.042px); }
  4.1667% { transform: translateX(-17px); }
  8.3333% { transform: translateX(-8.8px); }
  12.5% { transform: translateX(-0px); }
  16.6667% { transform: translateX(8.8px); }
  20.8333% { transform: translateX(17px); }
  25% { transform: translateX(24.042px); }
  29.1667% { transform: translateX(29.445px); }
  33.3333% { transform: translateX(32.841px); }
  37.5% { transform: translateX(34px); }
  41.6667% { transform: translateX(32.841px); }
  45.8333% { transform: translateX(29.445px); }
  50% { transform: translateX(24.042px); }
  54.1667% { transform: translateX(17px); }
  58.3333% { transform: translateX(8.8px); }
  62.5% { transform: translateX(0px); }
  66.6667% { transform: translateX(-8.8px); }
  70.8333% { transform: translateX(-17px); }
  75% { transform: translateX(-24.042px); }
  79.1667% { transform: translateX(-29.445px); }
  83.3333% { transform: translateX(-32.841px); }
  87.5% { transform: translateX(-34px); }
  91.6667% { transform: translateX(-32.841px); }
  95.8333% { transform: translateX(-29.445px); }
  100% { transform: translateX(-24.042px); }
}
@keyframes halo-orbit-y {
  0% { transform: translateY(-7.778px); }
  4.1667% { transform: translateY(-9.526px); }
  8.3333% { transform: translateY(-10.625px); }
  12.5% { transform: translateY(-11px); }
  16.6667% { transform: translateY(-10.625px); }
  20.8333% { transform: translateY(-9.526px); }
  25% { transform: translateY(-7.778px); }
  29.1667% { transform: translateY(-5.5px); }
  33.3333% { transform: translateY(-2.847px); }
  37.5% { transform: translateY(-0px); }
  41.6667% { transform: translateY(2.847px); }
  45.8333% { transform: translateY(5.5px); }
  50% { transform: translateY(7.778px); }
  54.1667% { transform: translateY(9.526px); }
  58.3333% { transform: translateY(10.625px); }
  62.5% { transform: translateY(11px); }
  66.6667% { transform: translateY(10.625px); }
  70.8333% { transform: translateY(9.526px); }
  75% { transform: translateY(7.778px); }
  79.1667% { transform: translateY(5.5px); }
  83.3333% { transform: translateY(2.847px); }
  87.5% { transform: translateY(0px); }
  91.6667% { transform: translateY(-2.847px); }
  95.8333% { transform: translateY(-5.5px); }
  100% { transform: translateY(-7.778px); }
}
@keyframes halo-orbit-d {
  0% { transform: scale(0.807); opacity: 0.505; }
  4.1667% { transform: scale(0.771); opacity: 0.459; }
  8.3333% { transform: scale(0.748); opacity: 0.43; }
  12.5% { transform: scale(0.74); opacity: 0.42; }
  16.6667% { transform: scale(0.748); opacity: 0.43; }
  20.8333% { transform: scale(0.771); opacity: 0.459; }
  25% { transform: scale(0.807); opacity: 0.505; }
  29.1667% { transform: scale(0.855); opacity: 0.565; }
  33.3333% { transform: scale(0.91); opacity: 0.635; }
  37.5% { transform: scale(0.97); opacity: 0.71; }
  41.6667% { transform: scale(1.03); opacity: 0.785; }
  45.8333% { transform: scale(1.085); opacity: 0.855; }
  50% { transform: scale(1.133); opacity: 0.915; }
  54.1667% { transform: scale(1.169); opacity: 0.961; }
  58.3333% { transform: scale(1.192); opacity: 0.99; }
  62.5% { transform: scale(1.2); opacity: 1; }
  66.6667% { transform: scale(1.192); opacity: 0.99; }
  70.8333% { transform: scale(1.169); opacity: 0.961; }
  75% { transform: scale(1.133); opacity: 0.915; }
  79.1667% { transform: scale(1.085); opacity: 0.855; }
  83.3333% { transform: scale(1.03); opacity: 0.785; }
  87.5% { transform: scale(0.97); opacity: 0.71; }
  91.6667% { transform: scale(0.91); opacity: 0.635; }
  95.8333% { transform: scale(0.855); opacity: 0.565; }
  100% { transform: scale(0.807); opacity: 0.505; }
}

/* The fixed highlight is the still frame of the same idea, so only one of
   the two is ever shown. Markup leaves the fixed one visible, which means
   a browser that never applies this file still gets a sane mark. */
@media (prefers-reduced-motion: no-preference) {
  .halo-sheen { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .halo-orbit { display: none; }
}

/* ============================================================
   AI likeness
   ============================================================ */

/* The status sentence had the whole band to itself and used about a third
   of it, so the likeness card goes in the space that was already there
   rather than pushing the page down. */
.statement-row {
  display: flex;
  align-items: flex-start;
  gap: 56px;
}
.statement-main { flex: 1 1 auto; min-width: 0; }

.likeness {
  flex: 0 0 310px;
  border: 1px solid var(--line);
  border-left-width: 1px;
  padding: 24px 24px 26px;
  position: relative;
}

/* Enabled reads as a quiet certainty: one champagne rule down the left and
   nothing else shouting. Not enabled is amber, because it is an action the
   client has to take, not a fault. */
.likeness.lk-on  { border-left: 1px solid var(--champagne); }
.likeness.lk-off { border-left: 1px solid var(--warn); }

.lk-eyebrow {
  display: block;
  font-family: var(--f-display);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--metal-4);
  margin-bottom: 14px;
}
.lk-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.04rem;
  line-height: 1.35;
  margin-bottom: 12px;
  letter-spacing: 0;
}
.lk-on  .lk-title { color: var(--champagne); }
.lk-off .lk-title { color: var(--warn); }

.lk-body {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--metal-3);
}
.lk-foot {
  margin-top: 14px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--metal-4);
}

@media (max-width: 1040px) {
  .statement-row { flex-direction: column; gap: 40px; }
  .likeness { flex: 1 1 auto; width: 100%; }
}

/* The padlock on the confidentiality line. White against the rest of the
   footer, which is metal-4, so the line reads as a seal rather than more
   small print. */
.foot-conf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--metal-3);
}
.foot-conf .lock {
  flex: 0 0 auto;
  color: #FFFFFF;
  /* Optical centring. The shackle makes the glyph top-heavy, so sitting it
     on the text baseline leaves it looking high. */
  transform: translateY(0.5px);
}

@media (max-width: 760px) {
  .foot-conf { align-items: flex-start; }
  .foot-conf .lock { transform: translateY(3px); }
}

/* The one action on the card, so the link is amber like the heading rather
   than the champagne used everywhere else. */
.lk-contact { margin-top: 10px; }
.lk-contact a {
  color: var(--warn);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(212, 182, 120, 0.45);
}
.lk-contact a:hover { text-decoration-color: var(--warn); }