/* Stark ID customer pages. Shared family tokens with the Service Portal
   (spire mark, Manrope, the portal's button blues) plus a navy top band and
   a green accent that make this feel like Stark Tech's own sign-in rather
   than a page of the portal (A117 item 7). This file is not used by the
   adminui/ console (its own templates load no stylesheet from here). */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy:#0f2742; --brand:#0a79b7; --brand-700:#005f96; --accent:#3da646;
  --ink:#1f2a37; --muted:#5b6b7c; --line:#c9d8e6; --bg:#f3f8fc;
  /* Revision B7: #2f9346 was 3.66:1 on .alert.success's #f1faf3 background
     and 3.50:1 on .pill.active's #e8f6ee (WCAG AA text needs 4.5:1).
     #1f7a35 gives 5.06:1 and 4.84:1. */
  --ok:#1f7a35;
  --warn:#b45309; --danger:#b42318;
}
* { box-sizing:border-box; }
html, body { max-width:100%; overflow-x:hidden; }
body { margin:0; font:16px/1.5 "Manrope","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif; color:var(--ink); background:var(--bg); min-height:100vh; }
a { color:var(--brand-700); font-weight:600; }
/* Revision B7: #7cc0ec was 1.98:1 on white and 1.85:1 on --bg (a focus
   indicator needs 3:1 against what it sits on); --brand-700 gives 6.82:1
   and 6.38:1. */
:focus-visible { outline:3px solid var(--brand-700); outline-offset:2px; }
@media (hover:hover) { button:hover, .btn:hover { filter:brightness(1.05); } }

/* Navy top band, full width, carrying the wordmark and the Stark ID label. */
.topband { background:var(--navy); color:#fff; }
.topband-inner { max-width:980px; margin:0 auto; padding:0 1.25rem; height:64px; display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.topband .brand-mark { display:flex; align-items:center; gap:.6rem; }
.topband img.spire { width:28px; height:30px; display:block; }
.topband .wordmark { font-weight:800; font-size:1.05rem; letter-spacing:.01em; }
.topband .product-label { display:flex; align-items:center; gap:.4rem; font-weight:700; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; color:#eaf3fb; }
.topband .product-label .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; }

.shell { max-width:980px; margin:0 auto; padding:1.25rem; }
/* Review P2-3: a single top margin lives here, not duplicated on .entrance
   too, so an entrance card and a manage card start at the same y. */
.entrance-wrap { max-width:440px; margin:6vh auto 0; }
main { display:block; }
.card { background:#fff; border:1px solid var(--line); border-top:4px solid var(--accent); border-radius:16px; padding:1.25rem 1.4rem; box-shadow:0 4px 16px rgba(15,39,66,.06); min-width:0; }
.card.plain { border-top-color:var(--line); }
h1 { margin:.2rem 0 .6rem; font-size:1.5rem; font-weight:800; color:var(--navy); line-height:1.25; }
h2 { margin:.2rem 0 .6rem; font-size:1.2rem; font-weight:700; color:var(--navy); }
.muted { color:var(--muted); }
.hint { font-size:.92rem; }
.card, .alert, p, .muted { overflow-wrap:anywhere; }
/* Review P1-5: overflow-wrap is inherited, so the rule above also broke
   th/td text and button labels mid-word ("ADD ED", "Rename " -> "Renam
   e") once the table had less room than its content. Headers, cell text
   and button labels get Normal back; only truly unbreakable things (a
   long email address, say) still need "anywhere", and nothing in a table
   header, cell or button is that. */
th, td, button, .btn { overflow-wrap:normal; }
label { display:block; font-weight:600; margin:.8rem 0 .25rem; }
input[type=text], input[type=email], input[type=password], input[type=number], select { width:100%; min-height:44px; padding:.5rem .7rem; border:1px solid var(--line); border-radius:10px; font:inherit; }
.code-input { font:600 1.2rem/1 ui-monospace, "SF Mono", Consolas, monospace; letter-spacing:.12em; text-transform:uppercase; }
button, .btn { display:inline-flex; align-items:center; justify-content:center; text-align:center; gap:.4rem; min-height:44px; padding:.55rem 1rem; border-radius:999px; border:1px solid var(--brand-700); background:linear-gradient(180deg,var(--brand),var(--brand-700)); color:#fff; font:inherit; font-weight:700; cursor:pointer; text-decoration:none; }
button.secondary, .btn.secondary { background:#fff; color:var(--brand-700); border-color:var(--line); }
button.tool, .btn.tool { min-height:36px; padding:.35rem .8rem; background:#fff; color:var(--brand-700); border-color:var(--line); font-size:.88rem; }
button.danger, .btn.danger { background:#fff; color:var(--danger); border-color:var(--danger); }
/* Review P1-5: button.html checks "tool" before "danger", so a button
   tagged both (Remove, in the passkey list) only ever got the plain
   danger look (44px), not the row-height "tool" one Rename also uses
   there -- hence Remove and Rename sitting at two different heights.
   This gives the combined case its own rule, danger-coloured at tool
   height, without changing either tag alone. */
button.tool.danger, .btn.tool.danger { min-height:36px; padding:.35rem .8rem; font-size:.88rem; background:#fff; color:var(--danger); border-color:var(--danger); }
button.block, .btn.block { width:100%; margin-top:.75rem; }
/* Review P3-8: 34px (.3rem .2rem padding, no min-height) was under the
   44px every other control uses; Cancel, Sign out and "Back to sign in"
   are all this class. */
button.linkish, .btn.linkish { background:none; border:none; color:var(--brand-700); font-weight:600; padding:.3rem .2rem; min-height:44px; text-decoration:underline; }
.actions { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; align-items:center; }
.row-actions { display:flex; gap:.6rem; flex-wrap:wrap; }
.alert { padding:.7rem .9rem; border-radius:10px; border:1px solid var(--line); background:#f8fafc; margin:.6rem 0; }
.alert.error { border-color:#f3c1bd; background:#fff3f2; color:var(--danger); }
.alert.success { border-color:#bfe3c9; background:#f1faf3; color:var(--ok); }
.alert.info { border-color:var(--line); background:#eef5fc; color:var(--navy); }
.errorlist { list-style:none; color:var(--danger); margin:.3rem 0 0; padding:0; font-size:.9rem; }
.field-hint { color:var(--muted); font-size:.85rem; margin:.2rem 0 0; }
.divider { border:none; border-top:1px solid var(--line); margin:1.1rem 0; }
.pill { display:inline-block; padding:.1rem .55rem; border-radius:999px; font-size:.78rem; font-weight:700; background:#e6eef6; color:var(--navy); }
.pill.active { background:#e8f6ee; color:var(--ok); }
.pill.deactivated, .pill.none { background:#fdecea; color:var(--danger); }
table { width:100%; border-collapse:collapse; font-size:.93rem; }
th, td { text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
/* Review P1-5: a date cell never needs to break ("202 6"). */
td[data-label] { white-space:nowrap; }
.row { display:flex; gap:.6rem; flex-wrap:wrap; align-items:end; }
.row > * { flex:1 1 12rem; }
.hidden { display:none !important; }
.mt1 { margin-top:1rem; }
.recovery-link { margin-top:1.25rem; }
.table-wrap { overflow-x:auto; }
/* Review P2-1: form.signout-form was only display:inline inside
   footer.site-footer, so the Sign out control dropped to its own line
   anywhere else a <form> sits next to text (the manage layout's own
   bottom nav). This is true everywhere that form appears. */
form.signout-form { display:inline; }
/* Review P2-1: email left, Passkeys/Email/Sign out on the right, one
   line at any width the row itself still fits (it wraps, same as
   .actions, rather than overflow, once it does not). */
.manage-nav { display:flex; flex-wrap:wrap; gap:.4rem .6rem; align-items:center; }
footer.site-footer { max-width:980px; margin:1.5rem auto 0; padding:1rem 1.25rem 2rem; color:var(--muted); font-size:.85rem; text-align:center; }
footer.site-footer a { color:var(--muted); font-weight:600; }
footer.site-footer button.linkish { font-size:inherit; color:var(--muted); }
@media (max-width:640px) {
  .shell, .topband-inner { padding:.8rem; }
  td.secondary { display:none; }
  /* Review P1-5: below 640px the passkey table restacks into one card
     per row (name bold, a muted "Added ... · Last used ..." line, then
     Rename/Remove side by side) instead of columns too narrow for their
     own headers and dates. */
  .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap tr, .table-wrap th, .table-wrap td { display:block; width:100%; }
  .table-wrap thead { display:none; }
  .table-wrap tr { border:1px solid var(--line); border-radius:10px; padding:.75rem; margin-bottom:.75rem; }
  .table-wrap tr:last-child { margin-bottom:0; }
  .table-wrap td { border-bottom:none; padding:.1rem 0; white-space:normal; }
  .table-wrap td:first-child { font-weight:700; }
  .table-wrap td[data-label] { display:inline; color:var(--muted); font-size:.88rem; white-space:nowrap; }
  .table-wrap td[data-label]::before { content:attr(data-label) ": "; }
  .table-wrap td[data-label] + td[data-label]::before { content:" \00b7 " attr(data-label) ": "; }
  .table-wrap td[align="right"] { display:flex; gap:.5rem; margin-top:.6rem; }
}