/* SIPC Hub home and ministry sign-in. Every colour, radius, size and shadow comes from /static/tokens.css,
   which the page loads first; this file defines no palette of its own. Type: Archivo for UI, IBM Plex Mono for numbers. */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{margin:0;min-height:100svh;background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:var(--t-md);line-height:1.6;-webkit-font-smoothing:antialiased;
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
main{max-width:1120px;margin:auto;padding:var(--sp-6) var(--sp-7) 48px}
a{color:inherit}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
b,strong{font-weight:600}
p{margin:0 0 var(--sp-2)}
h1,h2,h3{margin:0;font-weight:600;line-height:1.25;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::selection{background:var(--sel-soft);color:var(--ink)}
.num,.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.skip-link{position:absolute;top:-100px;left:16px;padding:12px 20px;background:var(--brand);color:var(--brand-ink);z-index:20;border-radius:var(--r-md);text-decoration:none;font-weight:600}
.skip-link:focus{top:16px}

/* ---------- header and brand (same mark as the Layout Studio header) ---------- */
.hub-header{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-6);border-bottom:1px solid var(--rule);padding-bottom:var(--sp-5);min-height:54px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-height:44px;white-space:nowrap;border-radius:var(--r-sm)}
.brand .mark{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:var(--brand);color:var(--brand-ink);font-weight:700;font-size:17px;letter-spacing:-.02em;flex:0 0 auto}
.brand .wordmark{display:flex;flex-direction:column;line-height:1.1}
.brand .wordmark strong{font-weight:700;font-size:var(--t-md);letter-spacing:.02em}
.brand small{display:block;font-weight:500;font-size:var(--t-xs);color:var(--muted);letter-spacing:0}
.header-note{font-size:var(--t-sm);color:var(--muted);max-width:240px;text-align:right;line-height:1.4}

/* ---------- intro ---------- */
.intro{padding-top:40px}
.eyebrow{font-size:var(--t-sm);font-weight:600;color:var(--muted);margin:0 0 var(--sp-3)}
h1{font-size:clamp(32px,4.4vw,48px);line-height:1.1;letter-spacing:-.02em;margin:0 0 var(--sp-4)}
h2{font-size:var(--t-xl);font-weight:600;line-height:1.25;letter-spacing:-.01em;margin:var(--sp-4) 0 var(--sp-2)}
.lead{max-width:540px;font-size:var(--t-lg);color:var(--muted);margin:0;line-height:1.55}

/* ---------- workspace cards ---------- */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);margin:var(--sp-7) 0}
.cards>a{display:flex;flex-direction:column;padding:var(--sp-6);border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);color:inherit;text-decoration:none;box-shadow:var(--shadow-1);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.cards>a:hover{border-color:var(--rule-strong);box-shadow:var(--shadow-2);transform:translateY(-1px)}
.cards>a:active{transform:none}
.card-top{display:flex;justify-content:space-between;align-items:center}
.cards small{font-size:var(--t-sm);font-weight:600;color:var(--muted)}
.cards small .num{font-weight:500}
.card-arrow{font-size:18px;line-height:1;color:var(--muted);transition:color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.cards>a:hover .card-arrow{color:var(--brand);transform:translate(1px,-1px)}
.cards p{font-size:var(--t-md);line-height:1.6;color:var(--muted);margin:0 0 var(--sp-5);max-width:390px}
.card-action{margin-top:auto;font-size:var(--t-md);font-weight:600;color:var(--brand)}
.card-action span{margin-left:6px}
.hub-footer{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);border-top:1px solid var(--rule);padding:var(--sp-6) 0 0}
.hub-footer strong{font-size:var(--t-base);font-weight:600}
.hub-footer p,.muted{color:var(--muted);font-size:var(--t-base)}
.hub-footer p{margin:4px 0 0;max-width:440px}

/* ---------- ministry sign-in ---------- */
.welcome{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:72px;align-items:center;max-width:1040px;min-height:100svh;padding-top:64px;padding-bottom:64px}
.welcome-intro,.welcome-access{min-width:0}
.welcome .intro{padding-top:48px}
.welcome .eyebrow{color:var(--brand);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.welcome h1{font-size:clamp(32px,4vw,44px);line-height:1.15;letter-spacing:-.035em;margin:var(--sp-3) 0 var(--sp-4)}
.welcome .lead{font-size:17px;max-width:36ch;line-height:1.7}
.login-card{margin:0;padding:var(--sp-7);background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--brand);border-radius:var(--r-xl);box-shadow:var(--shadow-2)}
.login-card label{font-size:var(--t-md);font-weight:600}
.login-card .muted{margin-top:6px;line-height:1.5}
label{display:block;font-size:var(--t-base);font-weight:500;margin:0 0 var(--sp-2);line-height:1.4}
input{display:block;width:100%;min-width:0;height:48px;min-height:48px;padding:0 14px;border:1px solid var(--rule-strong);border-radius:var(--r-md);background:var(--surface-2);color:var(--ink);font-size:var(--t-lg);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
input:hover{border-color:var(--muted)}
input:focus-visible{outline:2px solid var(--focus);outline-offset:0;border-color:var(--focus);background:var(--surface-3)}
input::placeholder{color:var(--muted);opacity:.8}
.form-field{margin-bottom:var(--sp-5)}
.password-wrap{position:relative}
.password-wrap input{padding-right:84px}
.reveal{position:absolute;right:6px;top:6px;height:36px;min-height:36px;padding:0 12px;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--muted);font-size:var(--t-sm);font-weight:600;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.reveal:hover{background:var(--bg);border-color:var(--rule-strong);color:var(--ink)}
.reveal[aria-pressed="true"]{color:var(--ink)}
.caps-warning{font-size:var(--t-sm);color:var(--warn);font-weight:500;margin:var(--sp-2) 0 0}
.login-submit{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:48px;min-height:48px;margin-top:var(--sp-1);padding:0 18px;background:var(--accent);color:var(--accent-ink);border:1px solid transparent;border-radius:var(--r-md);font-size:var(--t-md);font-weight:600;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.login-submit:hover{background:var(--accent-hover)}
.login-submit:active{transform:translateY(1px)}
.login-submit:disabled{background:var(--muted);color:var(--surface-3);cursor:wait;transform:none}
.login-submit[aria-busy=true]::before{content:'';width:12px;height:12px;flex-shrink:0;display:inline-block;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:busy-spin .8s linear infinite}
@keyframes busy-spin{to{transform:rotate(360deg)}}
#error:not(:empty){margin:var(--sp-4) 0 0;padding:12px 14px;background:var(--crit-soft);border-left:3px solid var(--crit);border-radius:var(--r-sm);color:var(--ink);font-size:var(--t-base);line-height:1.5}
#error:empty{display:none}
.login-help{margin-top:var(--sp-5)}
.login-help p{margin:var(--sp-2) 0}
.login-help a{color:var(--brand);font-weight:600;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--brand) 40%,transparent);border-radius:2px}
.login-help a:hover{text-decoration-color:currentColor}
.login-destination{font-size:var(--t-base);font-weight:500;color:var(--brand);margin:var(--sp-3) 0 0}
.back-link{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-base)}
noscript p{margin:16px 0 0;padding:12px 14px;background:var(--crit-soft);border-left:3px solid var(--crit);border-radius:var(--r-sm);font-size:var(--t-base)}

/* ---------- responsive ---------- */
@media(max-width:600px){
  main{padding:var(--sp-4) var(--sp-4) 36px}
  .hub-header{padding-bottom:var(--sp-4)}
  .header-note{max-width:150px;font-size:var(--t-xs)}
  .intro{padding-top:var(--sp-6)}
  .cards{grid-template-columns:1fr;margin:var(--sp-6) 0;gap:var(--sp-3)}
  .cards>a{padding:var(--sp-5)}
  .cards h2{margin-top:var(--sp-3);font-size:var(--t-xl)}
  .cards p{margin-bottom:var(--sp-4)}
  .hub-footer{grid-template-columns:1fr;gap:var(--sp-5)}
  .welcome{padding-top:var(--sp-4)}
  .welcome .intro{padding-top:var(--sp-6)}
  .welcome h1{font-size:28px;line-height:36px}
  .login-card{padding:var(--sp-6) var(--sp-5);border-radius:var(--r-lg)}
}
@media(max-width:800px){
  .welcome{display:block;max-width:480px;min-height:0;padding:32px 20px 40px}
  .welcome .intro{padding-top:24px;margin-bottom:24px}
  .welcome h1{font-size:32px;line-height:1.2}
  .welcome .lead{font-size:15px}
  .login-card{padding:24px 20px}
}
@media(forced-colors:active){.cards>a,.login-card,input,button{border:1px solid CanvasText}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

.login-card select{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r-md);padding:11px 12px;min-height:44px}