/* ==================================================================
   CertAttestor — Fluent (Windows 11) interface layer      v2.12.0
   ------------------------------------------------------------------
   Loaded AFTER dashboard.css / holder.css / auth.css, and only when
   Settings -> Interface -> "Windows 11 (Fluent) interface" is on, so
   switching it off restores the classic console with no redeploy.

   Scope — the three app surfaces only:
     .ca-app         issuer dashboard (and client admin / register)
     .ca-hw          holder wallet
     .ca-auth-wrap   sign-in portal
   The certificate render, the verify page and the public marketing
   site are untouched: a certificate styled as an OS window stops
   reading as a document.

   Dark mode follows the visitor's system setting on the sign-in
   portal only, because that page owns the whole viewport. The
   dashboard and wallet are shortcodes inside the site theme, so
   darkening them alone would leave a light theme header above a dark
   app. Those stay light until the page template can go dark too.

   Type: Segoe UI Variable on Windows, the platform UI font elsewhere.
   No webfont is downloaded.
   ================================================================== */

/* ---------- Fluent accent ramp, derived from Harbour Teal ----------
   #0C3B42 is too dark to act as an accent on a dark surface, so it
   becomes the deep end of the ramp and a brighter teal takes the
   accent role (Base in light, Light-2 in dark).                     */
.ca-app, .ca-hw, .ca-auth-wrap, .ca-auth, .ca-dash{
  --f-acc-d2:#0A3B45; --f-acc-d1:#0E4C58;
  --f-acc:#12616F; --f-acc-l1:#1A7D8E; --f-acc-l2:#2FA0B3; --f-acc-l3:#64C6D6;
  --f-brass:#9A7225;
  --f-ok:#0F7B3F; --f-warn:#9D5D00; --f-bad:#C42B1C;

  --f-base:#F3F3F3;
  --f-layer:#FBFBFB;
  --f-layer-alt:#FFFFFF;
  --f-card:rgba(255,255,255,.72);
  --f-hover:rgba(0,0,0,.0373);
  --f-press:rgba(0,0,0,.0241);
  --f-stroke:rgba(0,0,0,.0578);
  --f-ctrl-stroke:rgba(0,0,0,.16);
  --f-divider:rgba(0,0,0,.0803);
  --f-t1:rgba(0,0,0,.8956); --f-t2:rgba(0,0,0,.6063); --f-t3:rgba(0,0,0,.4458);
  --f-on-acc:#FFFFFF;
  --f-accent:var(--f-acc);
  --f-ok-bg:#DFF6E6; --f-warn-bg:#FFF4CE; --f-bad-bg:#FDE7E9; --f-info-bg:#E2EFF3;
  --f-ok-fg:#0E5132; --f-warn-fg:#6B4E00; --f-bad-fg:#8E1B12; --f-info-fg:#0E4C58;
  --f-shadow:0 1px 2px rgba(0,0,0,.07);
  --f-shadow-win:0 8px 24px rgba(0,0,0,.09), 0 1px 3px rgba(0,0,0,.06);
  --f-shadow-dlg:0 32px 64px rgba(0,0,0,.19), 0 2px 21px rgba(0,0,0,.15);

  --f-sans:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",system-ui,-apple-system,"IBM Plex Sans",Roboto,sans-serif;
  --f-display:"Segoe UI Variable Display","Segoe UI Variable","Segoe UI",system-ui,-apple-system,"Archivo",sans-serif;
  --f-mono:"Cascadia Mono","Cascadia Code",Consolas,"IBM Plex Mono",monospace;
}

/* ==================================================================
   DASHBOARD  —  .ca-app is a 248px + 1fr window inside the page, so
   it is treated as a Windows 11 window: Mica body, light
   NavigationView pane, selection pill, Layer content.
   ================================================================== */
.ca-app{
  font-family:var(--f-sans);
  color:var(--f-t1);
  border:1px solid var(--f-stroke);
  border-radius:8px;
  background:var(--f-base);
  background-image:
    radial-gradient(760px 500px at 6% -12%, rgba(18,97,111,.11) 0%, transparent 62%),
    radial-gradient(620px 430px at 96% -4%, rgba(154,114,37,.075) 0%, transparent 58%);
  box-shadow:var(--f-shadow-win);
}
.ca-app .ca-mono{font-family:var(--f-mono)}
.ca-app .hint{color:var(--f-t2);font-size:12px;line-height:16px}
.ca-app .ca-empty{color:var(--f-t2);font-size:13px}
.ca-app .ca-opt{color:var(--f-t2)}

/* ---------- NavigationView pane (was a dark teal gradient) ---------- */
.ca-app .ca-side{
  background:transparent;
  color:var(--f-t1);
  padding:10px 6px;
  border-right:1px solid var(--f-stroke);
}
.ca-app .ca-brand{padding:4px 10px 14px;gap:10px}
.ca-app .ca-brand-txt{font-family:var(--f-display);font-weight:600;font-size:16px;letter-spacing:0}
.ca-app .ca-brand-txt .c{color:var(--f-brass)}
.ca-app .ca-brand-txt .a{color:var(--f-t1)}

.ca-app .ca-co{
  background:var(--f-card);
  border:1px solid var(--f-stroke);
  border-radius:4px;
  padding:9px 10px;
  margin:0 2px 14px;
}
.ca-app .ca-co-logo{
  width:30px;height:30px;border-radius:4px;
  background:var(--f-accent);color:var(--f-on-acc);
  font-family:var(--f-display);font-weight:600;font-size:12px;
}
.ca-app .ca-co-name{font-weight:600;font-size:13px;color:var(--f-t1)}
.ca-app .ca-co-plan{font:600 10px/1 var(--f-mono);letter-spacing:.06em;color:var(--f-t2)}

/* nav items: 36px rows, 4px radius, 3x16 accent selection pill */
.ca-app .ca-nav-i{
  position:relative;
  height:36px;padding:0 12px;gap:12px;
  border-radius:4px;border-left:0;
  color:var(--f-t1);font-size:14px;font-weight:400;
}
.ca-app .ca-nav-i:hover{background:var(--f-hover);color:var(--f-t1)}
.ca-app .ca-nav-i:active{background:var(--f-press);color:var(--f-t2)}
.ca-app .ca-nav-i.on{background:var(--f-hover);color:var(--f-t1);font-weight:600;border-left:0}
.ca-app .ca-nav-i.on::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:16px;border-radius:2px;background:var(--f-accent);
}
.ca-app .ca-nav-i:focus-visible{outline:2px solid var(--f-t1);outline-offset:-2px}

.ca-app .ca-side-foot{border-top:1px solid var(--f-divider);padding-top:10px}
.ca-app .ca-avatar{background:var(--f-accent);color:var(--f-on-acc);font-weight:600}
.ca-app .ca-sf-n{font-size:13px;font-weight:600;color:var(--f-t1)}
.ca-app .ca-sf-e{font-size:11px;color:var(--f-t2)}
.ca-app .ca-signout{
  width:32px;height:32px;border-radius:4px;
  color:var(--f-t1);background:var(--f-layer-alt);
  border:1px solid var(--f-ctrl-stroke);
  box-shadow:inset 0 -1px 0 var(--f-ctrl-stroke);
}
.ca-app .ca-signout:hover{background:var(--f-hover);color:var(--f-bad);border-color:var(--f-ctrl-stroke)}

/* ---------- content area ---------- */
.ca-app .ca-main{background:transparent}
.ca-app .ca-top{
  background:transparent;
  border-bottom:1px solid var(--f-divider);
  padding:16px 24px 13px;
}
.ca-app .ca-top h1{font-family:var(--f-display);font-weight:600;font-size:22px;line-height:28px;letter-spacing:0;color:var(--f-t1)}
.ca-app .ca-psub{color:var(--f-t2);font-size:13px}
.ca-app .ca-content{padding:20px 24px 24px}
.ca-app .ca-grid{gap:12px}

.ca-app .ca-plan-badge{
  height:24px;padding:0 11px;border-radius:12px;
  background:var(--f-info-bg);color:var(--f-info-fg);
  font:600 12px/1 var(--f-sans);
}
.ca-app .ca-plan-badge .dot{background:currentColor;opacity:.75}
.ca-app .ca-top-signout{
  width:32px;height:32px;border-radius:4px;
  color:var(--f-t1);background:var(--f-layer-alt);
  border:1px solid var(--f-ctrl-stroke);
  box-shadow:inset 0 -1px 0 var(--f-ctrl-stroke);
}
.ca-app .ca-top-signout:hover{background:var(--f-hover);color:var(--f-bad);border-color:var(--f-ctrl-stroke)}

/* ---------- cards (Fluent "Layer on Mica") ---------- */
.ca-app .ca-card{
  background:var(--f-card);
  border:1px solid var(--f-stroke);
  border-radius:8px;
  padding:18px 20px;
  box-shadow:var(--f-shadow);
}
.ca-app .ca-card h3{font-family:var(--f-display);font-weight:600;font-size:14px;line-height:20px;color:var(--f-t1)}
.ca-app .ca-eyebrow{font:600 11px/1 var(--f-mono);letter-spacing:.1em;color:var(--f-t2)}
.ca-app .ca-stat .n{font-family:var(--f-display);font-weight:600;font-size:28px;line-height:36px;letter-spacing:0;color:var(--f-t1)}
.ca-app .ca-stat .l{color:var(--f-t2);font-size:12px;margin-top:6px}
.ca-app .ca-kv{border-top:1px solid var(--f-divider);font-size:13px}
.ca-app .ca-kv .k{color:var(--f-t2)}
.ca-app .ca-kv .v{color:var(--f-t1)}

/* ---------- buttons: 32px tall, 4px radius, bottom-stroke relief --- */
.ca-app .ca-btn{
  height:32px;padding:0 12px;border-radius:4px;white-space:nowrap;
  font:600 14px/1 var(--f-sans);
  background:var(--f-accent);color:var(--f-on-acc);
  border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.20);
}
.ca-app .ca-btn:hover{background:var(--f-acc-l1);color:#fff}
.ca-app .ca-btn:active{background:var(--f-acc-d1);box-shadow:none;color:rgba(255,255,255,.75)}
.ca-app .ca-btn.ghost, .ca-app .ca-btn-ghost{
  background:var(--f-layer-alt);color:var(--f-t1);
  border-color:var(--f-ctrl-stroke);
  box-shadow:inset 0 -1px 0 var(--f-ctrl-stroke);
}
.ca-app .ca-btn.ghost:hover, .ca-app .ca-btn-ghost:hover{background:var(--f-hover);color:var(--f-t1)}
.ca-app .ca-btn.ghost:active, .ca-app .ca-btn-ghost:active{background:var(--f-press);color:var(--f-t2);box-shadow:none}
.ca-app .ca-btn.danger, .ca-app .ca-btn.ghost.danger{color:var(--f-bad)}
.ca-app .ca-btn-sm{height:28px;padding:0 10px;font-size:13px;border-radius:4px}
/* a CommandBar keeps one control height across the row */
.ca-app .ca-toolbar .ca-btn-sm{height:32px;padding:0 12px;font-size:14px}
.ca-app .ca-btn:focus-visible{outline:2px solid var(--f-t1);outline-offset:2px}
.ca-app .ca-lnk{color:var(--f-accent);font:600 13px/1 var(--f-sans);border-radius:4px}
.ca-app .ca-lnk:hover{background:var(--f-hover)}
.ca-app .ca-lnk.rv{color:var(--f-bad)}

/* ---------- text fields: focus thickens the BOTTOM stroke ---------- */
.ca-app .ca-field input:not([type=checkbox]):not([type=radio]),
.ca-app .ca-field select,
.ca-app .ca-field textarea,
.ca-app .ca-pk-add input{
  height:32px;padding:0 11px;border-radius:4px;
  background:var(--f-layer-alt);color:var(--f-t1);
  border:1px solid var(--f-ctrl-stroke);
  box-shadow:inset 0 -1px 0 var(--f-ctrl-stroke);
  font:14px/20px var(--f-sans);
}
.ca-app .ca-field textarea{height:auto;min-height:72px;width:100%;padding:7px 11px;resize:vertical}
.ca-app .ca-field input:not([type=checkbox]):not([type=radio]):hover,
.ca-app .ca-field select:hover,
.ca-app .ca-pk-add input:hover{background:var(--f-layer)}
.ca-app .ca-field input:not([type=checkbox]):not([type=radio]):focus,
.ca-app .ca-field select:focus,
.ca-app .ca-field textarea:focus,
.ca-app .ca-pk-add input:focus{
  outline:none;background:var(--f-layer-alt);
  border-color:var(--f-ctrl-stroke);
  box-shadow:inset 0 -2px 0 var(--f-accent);
}
.ca-app .ca-field input:not([type=checkbox]):not([type=radio]):disabled{
  background:var(--f-hover);color:var(--f-t3);box-shadow:none;
}
.ca-app .ca-field label{font-size:14px;font-weight:400;color:var(--f-t1);margin-bottom:6px}

/* checkboxes / radios: Fluent 20px, 4px radius, accent fill */
.ca-app input[type=checkbox],.ca-app input[type=radio]{
  width:20px;height:20px;min-width:20px;border-radius:4px;
  border:1.5px solid var(--f-t2);background:var(--f-layer-alt);
}
.ca-app input[type=radio]{border-radius:50%}
.ca-app input[type=checkbox]:hover,.ca-app input[type=radio]:hover{border-color:var(--f-t1);background:var(--f-hover)}
.ca-app input[type=checkbox]:checked,.ca-app input[type=radio]:checked{background:var(--f-accent);border-color:var(--f-accent)}
.ca-app input[type=checkbox]:focus-visible,.ca-app input[type=radio]:focus-visible{outline:2px solid var(--f-t1);outline-offset:2px}

/* ---------- CommandBar: search box + filter pills ---------- */
.ca-app .ca-search{
  height:32px;padding:0 11px;border-radius:4px;
  background:var(--f-layer-alt);
  border:1px solid var(--f-ctrl-stroke);
  box-shadow:inset 0 -1px 0 var(--f-ctrl-stroke);
}
.ca-app .ca-search:focus-within{box-shadow:inset 0 -2px 0 var(--f-accent)}
.ca-app .ca-search svg{stroke:var(--f-t2)}
.ca-app .ca-search input{color:var(--f-t1);font:14px/20px var(--f-sans)}
.ca-app .ca-chip{
  height:32px;padding:0 14px;border-radius:16px;white-space:nowrap;
  display:inline-flex;align-items:center;
  background:var(--f-layer-alt);color:var(--f-t1);
  border:1px solid var(--f-ctrl-stroke);
  font:400 13px/1 var(--f-sans);
}
.ca-app .ca-chip:hover{background:var(--f-hover)}
.ca-app .ca-chip.on{background:var(--f-accent);color:var(--f-on-acc);border-color:transparent;font-weight:600}

/* ---------- status badges ---------- */
.ca-app .ca-pill{
  height:22px;padding:0 9px;border-radius:11px;
  font:600 12px/1 var(--f-sans);
  background:var(--f-hover);color:var(--f-t2);
}
.ca-app .ca-pill:before{width:7px;height:7px;opacity:1}
.ca-app .ca-pill.ok{background:var(--f-ok-bg);color:var(--f-ok-fg)}
.ca-app .ca-pill.rv{background:var(--f-bad-bg);color:var(--f-bad-fg)}
.ca-app .ca-pill.ex{background:var(--f-warn-bg);color:var(--f-warn-fg)}
.ca-app .ca-msg{border-radius:4px;font-size:13px}
.ca-app .ca-msg.ok{background:var(--f-ok-bg);color:var(--f-ok-fg)}
.ca-app .ca-msg.err{background:var(--f-bad-bg);color:var(--f-bad-fg)}

/* ---------- tables ---------- */
.ca-app th{
  font:600 12px/16px var(--f-sans);
  text-transform:none;letter-spacing:0;
  color:var(--f-t2);
  border-bottom:1px solid var(--f-divider);
  padding:10px 12px;
}
.ca-app td{border-top:1px solid var(--f-divider);padding:11px 12px;color:var(--f-t1)}
.ca-app tbody tr:hover{background:var(--f-hover)}

/* ---------- passkey list / template picker ---------- */
.ca-app .ca-pk-list li{border:1px solid var(--f-stroke);border-radius:4px;background:var(--f-card)}
.ca-app .ca-pk-meta strong{color:var(--f-t1)}
.ca-app .ca-tpl.is-active{outline:2px solid var(--f-accent);outline-offset:1px;border-radius:8px}

/* Fluent focus rectangle everywhere else in the app */
.ca-app :focus-visible{outline:2px solid var(--f-t1);outline-offset:2px}

/* mobile: the pane becomes a tab strip, so the selection pill moves
   from the left edge to a bottom bar (Fluent's horizontal NavigationView) */
@media(max-width:820px){
  .ca-app .ca-side{padding:0;border-right:0;border-bottom:1px solid var(--f-stroke)}
  .ca-app .ca-nav-i{height:38px}
  .ca-app .ca-nav-i.on::before{
    left:12px;right:12px;top:auto;bottom:3px;
    width:auto;height:3px;transform:none;
  }
}

/* ==================================================================
   CLIENT ADMIN + REGISTRATION  —  .ca-dash, a plainer 820px column
   that reuses the unscoped .ca-form / .ca-btn / .ca-msg rules.
   ================================================================== */
.ca-dash{font-family:var(--f-sans);color:var(--f-t1)}
.ca-dash .ca-mono{font-family:var(--f-mono)}
.ca-dash .ca-empty{color:var(--f-t2)}
.ca-dash .ca-opt{color:var(--f-t3);font-weight:400}
.ca-dash-head h2{font-family:var(--f-display);font-weight:600;font-size:22px;line-height:28px;color:var(--f-t1)}
.ca-dash-sub, .ca-dash-hint{color:var(--f-t2);font-size:13px}
.ca-dash-card .ca-dash-sub{margin-bottom:14px}
.ca-dash-guard, .ca-dash-card{
  background:var(--f-layer-alt);border:1px solid var(--f-stroke);
  border-radius:8px;box-shadow:var(--f-shadow);
}
.ca-dash-card h3{font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--f-t1)}
.ca-dash .ca-stat{
  background:var(--f-layer-alt);border:1px solid var(--f-stroke);
  border-radius:8px;box-shadow:var(--f-shadow);
}
.ca-dash .ca-stat-n{font-family:var(--f-display);font-weight:600;font-size:28px;line-height:36px;color:var(--f-t1)}
.ca-dash .ca-stat-l{color:var(--f-t2);font-size:12px;text-transform:none;letter-spacing:0}
.ca-dash .ca-green{color:var(--f-ok)}
.ca-dash .ca-red{color:var(--f-bad)}
.ca-dash .ca-amber{color:var(--f-warn)}

.ca-dash .ca-form label{font-size:14px;font-weight:400;color:var(--f-t1)}
.ca-dash .ca-form input, .ca-dash .ca-list-head input{
  height:32px;margin-top:6px;padding:0 11px;border-radius:4px;
  background:var(--f-layer-alt);color:var(--f-t1);
  border:1px solid var(--f-ctrl-stroke);
  box-shadow:inset 0 -1px 0 var(--f-ctrl-stroke);
  font:14px/20px var(--f-sans);
}
.ca-dash .ca-form input:focus, .ca-dash .ca-list-head input:focus{
  outline:none;border-color:var(--f-ctrl-stroke);
  box-shadow:inset 0 -2px 0 var(--f-accent);
}
.ca-dash .ca-slug{border-radius:4px;border:1px solid var(--f-ctrl-stroke);background:var(--f-layer-alt);margin-top:6px}
.ca-dash .ca-slug:focus-within{box-shadow:inset 0 -2px 0 var(--f-accent)}
.ca-dash .ca-slug-pre{background:var(--f-hover);color:var(--f-t2);font-family:var(--f-mono);border-right:1px solid var(--f-divider)}
.ca-dash .ca-slug input{height:32px;margin-top:0;box-shadow:none;border:0}
.ca-dash .ca-slug input:focus{outline:none;box-shadow:none}

.ca-dash .ca-btn{
  height:32px;padding:0 14px;border-radius:4px;white-space:nowrap;
  font:600 14px/1 var(--f-sans);
  background:var(--f-accent);color:var(--f-on-acc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.20);
}
.ca-dash .ca-btn:hover{background:var(--f-acc-l1)}
.ca-dash .ca-btn-sm{height:28px;padding:0 11px;border-radius:4px;font:600 13px/1 var(--f-sans)}
.ca-dash .ca-approve{background:var(--f-ok)}
.ca-dash .ca-suspend, .ca-dash .ca-rvk{background:var(--f-bad);border-radius:4px}
.ca-dash .ca-vlink{color:var(--f-accent)}

.ca-dash .ca-msg{border-radius:4px;font-size:13px}
.ca-dash .ca-msg.ok{background:var(--f-ok-bg);border:1px solid var(--f-stroke);color:var(--f-ok-fg)}
.ca-dash .ca-msg.err{background:var(--f-bad-bg);border:1px solid var(--f-stroke);color:var(--f-bad-fg)}
.ca-dash .ca-tbl th{
  font:600 12px/16px var(--f-sans);text-transform:none;letter-spacing:0;
  color:var(--f-t2);border-bottom:1px solid var(--f-divider);padding:10px 8px;
}
.ca-dash .ca-tbl td{border-top:1px solid var(--f-divider);padding:11px 8px;color:var(--f-t1)}
.ca-dash .ca-tbl tbody tr:hover{background:var(--f-hover)}
.ca-dash .ca-badge{
  height:22px;padding:0 9px;border-radius:11px;display:inline-flex;align-items:center;
  font:600 12px/1 var(--f-sans);
}
.ca-dash .ca-badge.active{background:var(--f-ok-bg);color:var(--f-ok-fg)}
.ca-dash .ca-badge.revoked{background:var(--f-bad-bg);color:var(--f-bad-fg)}
.ca-dash .ca-badge.pending{background:var(--f-warn-bg);color:var(--f-warn-fg)}
.ca-dash .ca-badge.pro{background:var(--f-info-bg);color:var(--f-info-fg)}
.ca-dash .ca-badge.free{background:var(--f-hover);color:var(--f-t2)}
.ca-dash :focus-visible{outline:2px solid var(--f-t1);outline-offset:2px}

/* ==================================================================
   HOLDER WALLET  —  a 760px column inside the site theme, so it gets
   Fluent cards and controls but keeps the theme's page background.
   Controls are 36px here: this is a public, mostly-mobile page.
   ================================================================== */
.ca-hw{font-family:var(--f-sans);color:var(--f-t1)}
.ca-hw-head h1{font-family:var(--f-display);font-weight:600;font-size:28px;line-height:36px;color:var(--f-t1)}
.ca-hw-head p{color:var(--f-t2);font-size:15px}
.ca-hw-sub{color:var(--f-t2)}
.ca-hw-fine{color:var(--f-t2);font-size:12px;line-height:16px}
.ca-hw-empty{color:var(--f-t2)}
.ca-hw-eyebrow{font-family:var(--f-mono);color:var(--f-brass);letter-spacing:.1em}
.ca-hw-signout{
  height:32px;padding:0 12px;border-radius:4px;display:inline-flex;align-items:center;
  color:var(--f-t1);background:var(--f-layer-alt);font-weight:400;font-size:14px;
  border:1px solid var(--f-ctrl-stroke);box-shadow:inset 0 -1px 0 var(--f-ctrl-stroke);
}
.ca-hw-signout:hover{background:var(--f-hover);border-color:var(--f-ctrl-stroke)}

.ca-hw-card{
  background:var(--f-layer-alt);border:1px solid var(--f-stroke);
  border-radius:8px;padding:18px 20px;box-shadow:var(--f-shadow);
}
.ca-hw-field label{font-size:14px;font-weight:400;color:var(--f-t1)}
.ca-hw-field input{
  height:36px;padding:0 11px;border-radius:4px;
  background:var(--f-layer-alt);color:var(--f-t1);font-size:14px;
  border:1px solid var(--f-ctrl-stroke);box-shadow:inset 0 -1px 0 var(--f-ctrl-stroke);
}
.ca-hw-field input:focus{
  outline:none;border-color:var(--f-ctrl-stroke);
  box-shadow:inset 0 -2px 0 var(--f-accent);
}
.ca-hw-btn{
  height:36px;padding:0 16px;border-radius:4px;white-space:nowrap;
  font:600 14px/1 var(--f-sans);
  background:var(--f-accent);color:var(--f-on-acc);
  border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.20);
}
.ca-hw-btn:hover{background:var(--f-acc-l1)}
.ca-hw-btn.ghost{
  background:var(--f-layer-alt);color:var(--f-t1);
  border:1px solid var(--f-ctrl-stroke);
  box-shadow:inset 0 -1px 0 var(--f-ctrl-stroke);
}
.ca-hw-btn.ghost:hover{background:var(--f-hover);border-color:var(--f-ctrl-stroke)}
.ca-hw-msg{border-radius:4px;font-size:13px}
.ca-hw-msg.ok{background:var(--f-ok-bg);color:var(--f-ok-fg);border:1px solid var(--f-stroke)}
.ca-hw-msg.err{background:var(--f-bad-bg);color:var(--f-bad-fg);border:1px solid var(--f-stroke)}

.ca-hw-cred{
  background:var(--f-layer-alt);border:1px solid var(--f-stroke);
  border-radius:8px;border-left:3px solid var(--f-ok);
  padding:16px 18px;box-shadow:var(--f-shadow);
}
.ca-hw-cred.st-expired{border-left-color:var(--f-warn)}
.ca-hw-cred.st-revoked{border-left-color:var(--f-bad)}
.ca-hw-cred-link:hover{background:var(--f-hover);border-color:var(--f-stroke);box-shadow:var(--f-shadow)}
.ca-hw-kind{font-family:var(--f-mono);color:var(--f-brass);letter-spacing:.1em}
.ca-hw-type{font-family:var(--f-display);font-weight:600;font-size:17px;color:var(--f-t1)}
.ca-hw-meta{color:var(--f-t2);font-size:13px}
.ca-hw-badge{
  height:22px;padding:0 9px;border-radius:11px;display:inline-flex;align-items:center;
  font:600 12px/1 var(--f-sans);letter-spacing:0;text-transform:none;
}
.ca-hw-badge.b-valid{background:var(--f-ok-bg);color:var(--f-ok-fg)}
.ca-hw-badge.b-expired{background:var(--f-warn-bg);color:var(--f-warn-fg)}
.ca-hw-badge.b-revoked{background:var(--f-bad-bg);color:var(--f-bad-fg)}
.ca-hw-a{
  height:28px;padding:0 10px;border-radius:4px;display:inline-flex;align-items:center;
  color:var(--f-t1);background:var(--f-layer-alt);font-weight:400;font-size:13px;
  border:1px solid var(--f-ctrl-stroke);box-shadow:inset 0 -1px 0 var(--f-ctrl-stroke);
}
.ca-hw-a:hover{background:var(--f-hover);border-color:var(--f-ctrl-stroke)}
.ca-hw-share strong{font-family:var(--f-display);font-weight:600;color:var(--f-t1)}
.ca-hw-share-link input{
  border-radius:4px;background:var(--f-layer-alt);color:var(--f-t1);
  border:1px solid var(--f-ctrl-stroke);box-shadow:inset 0 -1px 0 var(--f-ctrl-stroke);
  font-family:var(--f-mono);
}
.ca-hw-switch span{border-radius:999px;background:var(--f-t3)}
.ca-hw-switch input:checked+span{background:var(--f-accent)}

/* ==================================================================
   SIGN-IN PORTAL  —  .ca-auth-wrap owns the viewport and .ca-auth is
   the card, so this becomes a Fluent ContentDialog on a Mica desktop.
   This is the one surface that follows the system dark mode.
   ================================================================== */
.ca-auth-wrap{
  font-family:var(--f-sans);
  color:var(--f-t1);
  background:var(--f-base);
  background-image:
    radial-gradient(900px 620px at 12% -8%, rgba(18,97,111,.16) 0%, transparent 62%),
    radial-gradient(760px 520px at 92% 4%, rgba(154,114,37,.10) 0%, transparent 58%);
}
.ca-auth{
  background:var(--f-layer);
  border:1px solid var(--f-stroke);
  border-top:1px solid var(--f-stroke);
  border-radius:8px;
  box-shadow:var(--f-shadow-dlg);
}
.ca-auth-word{font-family:var(--f-display);font-weight:600;font-size:24px;letter-spacing:0;color:var(--f-t1)}
.ca-auth-word b{color:var(--f-brass)}
.ca-auth-tag, .ca-auth-lead, .ca-auth-note{color:var(--f-t2)}
.ca-auth-signed{color:var(--f-t1)}

/* Pivot header */
.ca-auth-tabs{border-bottom:1px solid var(--f-divider)}
.ca-auth-tab{
  font-family:var(--f-sans);font-weight:400;font-size:14px;color:var(--f-t2);
  border-bottom:2px solid transparent;border-radius:4px 4px 0 0;
}
.ca-auth-tab:hover{color:var(--f-t1);background:var(--f-hover)}
.ca-auth-tab.on{color:var(--f-t1);font-weight:600;border-bottom-color:var(--f-accent)}

/* fields */
.ca-auth .ca-form label{font-size:14px;font-weight:400;color:var(--f-t1)}
.ca-auth .ca-form input[type=text],
.ca-auth .ca-form input[type=email],
.ca-auth .ca-form input[type=password]{
  padding:9px 11px;border-radius:4px;
  background:var(--f-layer-alt);color:var(--f-t1);font-size:14px;
  border:1px solid var(--f-ctrl-stroke);
  box-shadow:inset 0 -1px 0 var(--f-ctrl-stroke);
}
.ca-auth .ca-form input::placeholder{color:var(--f-t3)}
.ca-auth .ca-form input:focus{
  outline:none;border-color:var(--f-ctrl-stroke);
  box-shadow:inset 0 -2px 0 var(--f-accent);
}
.ca-auth .ca-slug{border-radius:4px;border:1px solid var(--f-ctrl-stroke);background:var(--f-layer-alt)}
.ca-auth .ca-slug:focus-within{border-color:var(--f-ctrl-stroke);box-shadow:inset 0 -2px 0 var(--f-accent)}
.ca-auth .ca-slug-pre{background:var(--f-hover);color:var(--f-t2);font-family:var(--f-mono);border-right:1px solid var(--f-divider)}
.ca-auth .ca-check{color:var(--f-t1)}
.ca-auth .ca-check input[type=checkbox]{accent-color:var(--f-accent)}
.ca-auth .ca-opt{color:var(--f-t3)}
.ca-auth .ca-pw-t{color:var(--f-t2);border-radius:4px}
.ca-auth .ca-pw-t:hover{background:var(--f-hover)}
.ca-auth .ca-pw-t.on{color:var(--f-accent)}

/* buttons */
.ca-auth .ca-btn{
  min-height:36px;padding:0 16px;border-radius:4px;white-space:nowrap;
  font:600 14px/1 var(--f-sans);
  background:var(--f-accent);color:var(--f-on-acc);
  border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.20);
}
.ca-auth .ca-btn:hover{background:var(--f-acc-l1);box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.20)}
.ca-auth .ca-btn:active{transform:none;background:var(--f-acc-d1);box-shadow:none}
.ca-auth .ca-btn-ghost{
  background:var(--f-layer-alt);color:var(--f-t1);
  border:1px solid var(--f-ctrl-stroke);
  box-shadow:inset 0 -1px 0 var(--f-ctrl-stroke);
}
.ca-auth .ca-btn-ghost:hover{background:var(--f-hover);color:var(--f-t1);box-shadow:inset 0 -1px 0 var(--f-ctrl-stroke)}
.ca-auth .ca-auth-link{color:var(--f-accent);font-weight:600}
.ca-auth .ca-auth-alt{color:var(--f-t2)}
.ca-auth .ca-auth-alt:hover{color:var(--f-accent)}

/* passkey divider + messages */
.ca-auth .ca-pk-or{color:var(--f-t3)}
.ca-auth .ca-pk-or::before, .ca-auth .ca-pk-or::after{background:var(--f-divider)}
.ca-auth .ca-msg{border-radius:4px;font-size:13px}
.ca-auth .ca-msg-err{background:var(--f-bad-bg);color:var(--f-bad-fg);border:1px solid var(--f-stroke)}
.ca-auth .ca-msg-ok{background:var(--f-ok-bg);color:var(--f-ok-fg);border:1px solid var(--f-stroke)}

/* ==================================================================
   SITE CHROME  —  the branded navbar and footer that wrap every
   CertAttestor page, including the marketing home page. Kept
   restrained: Fluent geometry and materials, same brand colours, so
   it still sits properly above the home-page hero.
   ================================================================== */
.ca-navbar, .ca-footer{
  --f-acc-d2:#0A3B45; --f-acc-d1:#0E4C58;
  --f-acc:#12616F; --f-acc-l1:#1A7D8E; --f-acc-l2:#2FA0B3; --f-acc-l3:#64C6D6;
  --f-brass:#9A7225;
  --f-base:#F3F3F3; --f-layer:#FBFBFB; --f-layer-alt:#FFFFFF;
  --f-hover:rgba(0,0,0,.0373); --f-press:rgba(0,0,0,.0241);
  --f-stroke:rgba(0,0,0,.0578); --f-ctrl-stroke:rgba(0,0,0,.16);
  --f-divider:rgba(0,0,0,.0803);
  --f-t1:rgba(0,0,0,.8956); --f-t2:rgba(0,0,0,.6063); --f-t3:rgba(0,0,0,.4458);
  --f-on-acc:#FFFFFF; --f-accent:var(--f-acc);
  --f-shadow:0 1px 2px rgba(0,0,0,.07);
  --f-shadow-fly:0 8px 16px rgba(0,0,0,.14), 0 0 1px rgba(0,0,0,.12);
  --f-sans:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",system-ui,-apple-system,"IBM Plex Sans",Roboto,sans-serif;
  --f-display:"Segoe UI Variable Display","Segoe UI Variable","Segoe UI",system-ui,-apple-system,"Archivo",sans-serif;
  --f-mono:"Cascadia Mono","Cascadia Code",Consolas,"IBM Plex Mono",monospace;
}

/* Acrylic command bar: the blur was already there, this retunes the
   trim — no brass top rule, a hairline bottom stroke, no drop shadow */
.ca-navbar{
  background:rgba(249,249,249,.85);
  border-top:0;
  border-bottom:1px solid var(--f-stroke);
  box-shadow:none;
  padding-top:.4rem;padding-bottom:.4rem;
}
.ca-navbar .navbar-brand .brand-name{font-family:var(--f-display);font-weight:600;font-size:18px;letter-spacing:0;color:var(--f-t1)}
.ca-navbar .navbar-brand .brand-name b{color:var(--f-brass);font-weight:600}

/* nav links become Fluent pivot items: hover fill, accent underline */
.ca-navbar .nav-link{
  font-family:var(--f-sans);font-weight:400;font-size:14px;
  color:var(--f-t1);padding:.35rem .6rem;border-radius:4px;
}
.ca-navbar .nav-link::after{background:var(--f-accent);height:2px;bottom:1px;border-radius:1px}
.ca-navbar .nav-link:hover,.ca-navbar .nav-link:focus{color:var(--f-t1);background:var(--f-hover)}
.ca-navbar .nav-link.active,.ca-navbar .current-menu-item>.nav-link,.ca-navbar .current-menu-item>a{color:var(--f-t1);font-weight:600}
.ca-navsep{background:var(--f-divider)}

/* 32px controls at 4px corners, with the bottom-stroke relief */
.ca-navbar .btn{
  --bs-btn-padding-y:0;--bs-btn-padding-x:12px;--bs-btn-font-size:14px;
  height:32px;border-radius:4px;white-space:nowrap;font-family:var(--f-sans);font-weight:600;
}
.ca-navbar .ca-signin-toggle{color:var(--f-t1);background:none;border:1px solid transparent}
.ca-navbar .ca-signin-toggle:hover,.ca-navbar .ca-signin-toggle:focus,.ca-navbar .ca-signin-toggle[aria-expanded=true]{
  background:var(--f-hover);color:var(--f-t1);border-color:transparent;
}
.ca-navbar .btn-primary{
  background:var(--f-accent);border-color:transparent;color:var(--f-on-acc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.20);
}
.ca-navbar .btn-primary:hover,.ca-navbar .btn-primary:focus{
  background:var(--f-acc-l1);border-color:transparent;color:#fff;transform:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.20);
}
.ca-navbar .ca-install-btn{
  background:var(--f-layer-alt);color:var(--f-t1);
  border:1px solid var(--f-ctrl-stroke);
  box-shadow:inset 0 -1px 0 var(--f-ctrl-stroke);
}
.ca-navbar .ca-install-btn:hover{background:var(--f-hover);border-color:var(--f-ctrl-stroke);color:var(--f-t1)}
.ca-navbar :focus-visible{outline:2px solid var(--f-t1);outline-offset:2px}

/* account menu as a Fluent flyout */
.ca-signin-menu{
  background:var(--f-layer);
  border:1px solid var(--f-stroke);border-radius:8px;
  box-shadow:var(--f-shadow-fly);padding:4px;margin-top:6px;
}
.ca-signin-menu .dropdown-item{
  border-radius:4px;font-family:var(--f-sans);font-size:14px;
  padding:7px 11px;color:var(--f-t1);
}
.ca-signin-menu .dropdown-item:hover,.ca-signin-menu .dropdown-item:focus{background:var(--f-hover);color:var(--f-t1)}
.ca-signin-menu .dropdown-divider{border-color:var(--f-divider)}

/* footer */
.ca-footer{background:var(--f-base);border-top:1px solid var(--f-stroke)!important}
.ca-footer .brand-name{font-family:var(--f-display);font-weight:600;font-size:18px;color:var(--f-t1)}
.ca-footer .ca-fh{
  font-family:var(--f-sans);font-weight:600;font-size:12px;
  text-transform:none;letter-spacing:0;color:var(--f-t2);
}
.ca-footer a{color:var(--f-t1);border-radius:4px}
.ca-footer a:hover{color:var(--f-accent);text-decoration:none}
.ca-footer .ca-mono{font-family:var(--f-mono)}
.ca-footer hr{border-color:var(--f-divider);opacity:1}

/* ==================================================================
   DARK MODE  —  the sign-in portal owns its viewport, and app pages
   are marked with .ca-fluent-app on <body>, so page, chrome and app
   can all go dark together. The marketing home page is NOT marked
   and stays light: its hero artwork is painted in fixed colours.
   ================================================================== */
@media (prefers-color-scheme: dark){
  body.ca-fluent-app{
    color-scheme:dark;
    background:#1C1C1C;
  }
  body.ca-fluent-app .ca-navbar{
    background:rgba(44,44,44,.85);
    border-bottom-color:rgba(255,255,255,.0698);
  }
  body.ca-fluent-app .ca-footer{
    background:#1C1C1C;
    border-top-color:rgba(255,255,255,.0698)!important;
  }
  body.ca-fluent-app .ca-navbar, body.ca-fluent-app .ca-footer,
  body.ca-fluent-app .ca-signin-menu,
  body.ca-fluent-app .ca-app, body.ca-fluent-app .ca-hw, body.ca-fluent-app .ca-dash,
  .ca-auth-wrap, .ca-auth{
    color-scheme:dark;
    --f-base:#1C1C1C;
    --f-layer:#2C2C2C;
    --f-layer-alt:#333333;
    --f-card:rgba(255,255,255,.0512);
    --f-hover:rgba(255,255,255,.0605);
    --f-press:rgba(255,255,255,.0419);
    --f-stroke:rgba(255,255,255,.0698);
    --f-ctrl-stroke:rgba(255,255,255,.0698);
    --f-divider:rgba(255,255,255,.0837);
    --f-t1:#FFFFFF; --f-t2:rgba(255,255,255,.786); --f-t3:rgba(255,255,255,.5442);
    --f-on-acc:#000000;
    --f-accent:var(--f-acc-l2);
    --f-brass:#D8B064;
    --f-ok-bg:#0F2E1C; --f-warn-bg:#3D3016; --f-bad-bg:#442726; --f-info-bg:#11343C;
    --f-ok-fg:#6CCB8E; --f-warn-fg:#F3D37A; --f-bad-fg:#FF99A4; --f-info-fg:#7FD3E3;
    --f-shadow:0 1px 3px rgba(0,0,0,.28);
    --f-shadow-win:0 8px 24px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.22);
    --f-shadow-fly:0 8px 16px rgba(0,0,0,.40), 0 0 1px rgba(0,0,0,.30);
    --f-shadow-dlg:0 32px 64px rgba(0,0,0,.37), 0 2px 21px rgba(0,0,0,.37);
  }
  /* accent-filled buttons carry black text on a bright teal in dark mode */
  body.ca-fluent-app .ca-navbar .btn-primary:hover,
  body.ca-fluent-app .ca-app .ca-btn:hover,
  body.ca-fluent-app .ca-hw .ca-hw-btn:hover,
  body.ca-fluent-app .ca-dash .ca-btn:hover{background:var(--f-acc-l3);color:#000}
  body.ca-fluent-app .ca-app .ca-btn:active{background:var(--f-acc-l1);color:rgba(0,0,0,.65)}
  /* the window sits on the dark desktop, not on a white page */
  body.ca-fluent-app .ca-app{
    background-image:
      radial-gradient(760px 500px at 6% -12%, rgba(47,160,179,.12) 0%, transparent 62%),
      radial-gradient(620px 430px at 96% -4%, rgba(216,176,100,.05) 0%, transparent 58%);
  }
  body.ca-fluent-app .ca-app .ca-field select{background-image:none}
}

/* ---------- portal dark mode (this surface owns the viewport) ---------- */
@media (prefers-color-scheme: dark){
  .ca-auth-wrap, .ca-auth{
    color-scheme:dark;
    --f-base:#1C1C1C;
    --f-layer:#2C2C2C;
    --f-layer-alt:#333333;
    --f-card:rgba(255,255,255,.0512);
    --f-hover:rgba(255,255,255,.0605);
    --f-press:rgba(255,255,255,.0419);
    --f-stroke:rgba(255,255,255,.0698);
    --f-ctrl-stroke:rgba(255,255,255,.0698);
    --f-divider:rgba(255,255,255,.0837);
    --f-t1:#FFFFFF; --f-t2:rgba(255,255,255,.786); --f-t3:rgba(255,255,255,.5442);
    --f-on-acc:#000000;
    --f-accent:var(--f-acc-l2);
    --f-brass:#D8B064;
    --f-ok-bg:#0F2E1C; --f-warn-bg:#3D3016; --f-bad-bg:#442726; --f-info-bg:#11343C;
    --f-ok-fg:#6CCB8E; --f-warn-fg:#F3D37A; --f-bad-fg:#FF99A4; --f-info-fg:#7FD3E3;
    --f-shadow-dlg:0 32px 64px rgba(0,0,0,.37), 0 2px 21px rgba(0,0,0,.37);
  }
  .ca-auth-wrap{
    background-image:
      radial-gradient(900px 620px at 12% -8%, rgba(47,160,179,.16) 0%, transparent 62%),
      radial-gradient(760px 520px at 92% 4%, rgba(216,176,100,.07) 0%, transparent 58%);
  }
  .ca-auth .ca-btn:hover{background:var(--f-acc-l3);color:#000}
  .ca-auth .ca-btn:active{background:var(--f-acc-l1);color:rgba(0,0,0,.65)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ca-app *, .ca-hw *, .ca-auth *{transition:none !important;animation:none !important}
}