/* The product's brand is not known until /api/config resolves. Painting the Signature default and
   then overwriting it makes a product's sign-in page visibly flash a DIFFERENT brand's identity --
   wrong, and on a credential page alarming. So this header is held back until the answer arrives and
   revealed once, with whatever that answer turned out to be.
   visibility, NOT display:none: the header keeps occupying its space, so revealing it cannot shift
   the credential fields under someone who has started typing.
   The trust line is deliberately OUTSIDE this header and stays visible throughout. Product branding
   is decoration and may be hidden; the statement of who is taking your credentials may not. */
#product-brand { visibility: hidden; }
#product-brand[data-brand-resolved] { visibility: visible; }

/* Platform-owned credential controls. Client colors are confined to the hero. */
:root { color-scheme: light; --fg:#1b2a4a; --accent:#1b2a4a; --muted:#6b6459; --line:#c9c0ad; --surface:#f6f1e7; }
* { box-sizing:border-box; }
body { background:var(--surface); color:var(--fg); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.5; }
body.signature-login { width:100%; max-width:460px; margin:16px auto; padding:0 28px 20px; }
[hidden] { display:none !important; }
a { color:var(--accent); text-underline-offset:3px; }
button, input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.6; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:3px solid #9b751e; outline-offset:3px; }
.signature-hero { position:relative; text-align:center; padding:16px 0 24px; color:var(--brand-accent, #1b2a4a); background:var(--brand-surface, #f6f1e7); border-radius:20px; }
.signature-art { position:relative; height:140px; margin:0 8px; overflow:hidden; border-radius:19px; background:linear-gradient(125deg,#e2dbc7,#bfb59e); }
.signature-art::before, .signature-art::after { content:""; position:absolute; width:82px; height:102px; top:18px; border-radius:7px; box-shadow:0 12px 22px #382f2529; }
.signature-art::before { left:17%; transform:rotate(-8deg); background:linear-gradient(155deg,#f2e9d4,#cfbf98); }
.signature-art::after { right:16%; top:34px; transform:rotate(7deg); background:linear-gradient(165deg,#e8ddc4,#ac9d78); }
.signature-art img { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover; }
.signature-mark { position:relative; z-index:2; display:grid; place-items:center; width:64px; height:64px; margin: -1px auto 12px; border-radius:19px; background:#1b2a4a; }
.signature-mark::before { content:""; width:27px; height:27px; border:3px solid #b8912e; border-radius:50%; box-shadow:inset 0 0 0 6px #1b2a4a, inset 0 0 0 20px #b8912e; }
.signature-mark:has(img)::before { display:none; }
.signature-mark img { width:48px; height:48px; object-fit:contain; }
.signature-hero h1 { font-size:30px; letter-spacing:.025em; line-height:1.2; margin:0 12px 12px; overflow-wrap:anywhere; }
.signature-hero .tag { margin:0 16px; font-size:16px; color:inherit; }
.signature-actions { padding-top:12px; }
.signature-button, .signature-login button.wide { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:49px; padding:11px 16px; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--fg); font-size:16px; font-weight:550; text-decoration:none; }
.signature-actions > button + button { margin-top:9px; }
#social-providers > button + button { margin-top:9px; }
button.provider-apple { background:#000 !important; color:#fff !important; border-color:#000 !important; }
button.provider-google { background:#fff !important; color:#1f1f1f !important; border-color:#747775 !important; }
.signature-login .sep { text-align:center; color:var(--muted); font-size:13px; margin:15px 0 9px; }
.signature-login label { display:block; font-size:13px; margin:10px 0 5px; color:var(--muted); }
.signature-login input { display:block; width:100%; min-height:48px; padding:11px 13px; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--fg); font-size:16px; }
.signature-login input[type=password] { padding-right:62px; }
.signature-login .pw { position:relative; }
.signature-login .peek { position:absolute; right:8px; top:8px; min-height:32px; padding:4px 8px; background:transparent; color:var(--muted); font-size:13px; border:0; }
.signature-login .alt { text-align:center; font-size:14px; margin:16px 0 0; }
.signature-login .alt button { background:none; color:var(--accent); border:0; padding:0; text-decoration:underline; text-underline-offset:3px; font-size:inherit; }
.signature-login .muted, .signature-login .rule { color:var(--muted); font-size:13px; }
.signature-login .rule:empty, #blurb:empty, #msg:empty, #err:empty { display:none; }
.signature-login #title { text-align:center; font-size:16px; font-weight:600; margin:0 0 4px; }
.signature-login #blurb { text-align:center; margin:0 0 12px; }
.signature-trust { text-align:center; font-size:12px; color:var(--muted); padding-top:26px; }
#janus-identity.signature-trust { margin:0; font-size:12px; letter-spacing:normal; }
.signature-trust .trust-line { display:flex; align-items:center; justify-content:center; gap:7px; margin:0 0 9px; }
.signature-trust .trust-dot { width:12px; height:12px; border-radius:50%; background:#1b2a4a; box-shadow:inset 0 0 0 2px var(--surface), 0 0 0 1px #1b2a4a; }
#msg, #err { white-space:pre-wrap; overflow-wrap:anywhere; }
@media (min-width:600px) { body.signature-login { margin:40px auto; border:1px solid #e6dfd0; border-radius:28px; box-shadow:0 18px 70px #382f250c; padding-top:8px; } }
@media (max-width:360px) { body.signature-login { padding-left:18px; padding-right:18px; } .signature-art { height:145px; } }