/* MOMENT / The whole picture. Original assets: app/docs/BRAND_ASSETS.md.
   ADAPTED from app/moment/web/static/brand.css (legacy-shell-auth, M13,
   docs/SHELL_AUTH_REUSE_MAP.md §1: mixed verdict -- verbatim for :root tokens and the auth/shell
   components, adapt/trim for business work-surface components).
   Adaptations (legacy-engine/business references removed per the M13 hard rule):
     - @font-face src paths updated /static/fbalfi-*.woff -> /static/fonts/fbalfi-*.woff to match
       this track's static/fonts/ layout (this file is "adapt", so its own paths may change; the
       verbatim brand_head.html font preload still hardcodes the old flat path -- see this agent's
       change request to implementation-lead about serving static/fonts and static/img at /static/ too).
     - Removed entirely (legacy business-only work surfaces, confirmed unused outside legacy
       period.html/periods.html/settings.html/_source_pair_form.html by grepping app/moment/web/templates):
       .workspace-hero/.hero-* (periods-landing poster), .new-period-panel/.new-period-form/
       .periods-heading/.period-count/.period-list/.period-row/.period-index/.period-name/
       .period-year/.period-state/.period-description/.period-open/.periods-empty/.empty-mark/
       .count-stats (month list), .matrix/.dot/.dot.ready (rep x insurer status matrix), .rep-grid/
       .avatar (agent picker), .folder-upload-zone overrides (legacy folder-upload widget --
       app.js's matching widget code was dropped too), .finding dd and .code-editor/.code-view
       (legacy config/reconciliation viewers -- no template in this track renders them; a future
       milestone that needs a code/diff viewer owns that styling in v2.css, built from the tokens
       below, not by reviving this block).
     - Kept as-is, including every responsive breakpoint that only affects them: design tokens,
       base typography/buttons/inputs, skip-link, sidebar/nav/account, page-heading, workspace-footer,
       .section-kicker, .card/.toolbar/.stats/.pill/.tag (+status modifiers)/.upload-zone (base only)/
       .section-heading/th/td/.notice/summary/.narrow, and the entire .auth-* / .poster-* component
       (must stay byte-identical in *content*, since auth_base.html/login.html/totp.html are copied
       byte-for-byte and depend on these exact class names).
     - .form-grid (used by app.css and by this track's new admin/users.html) now lives in v2.css,
       not here or in app.css, per "v2.css holds any new-app-only styling".
*/
@font-face{font-family:"Fb Alfi";src:url("/static/fonts/fbalfi-regular.woff") format("woff");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Fb Alfi";src:url("/static/fonts/fbalfi-medium.woff") format("woff");font-style:normal;font-weight:500 600;font-display:swap}
@font-face{font-family:"Fb Alfi";src:url("/static/fonts/fbalfi-bold.woff") format("woff");font-style:normal;font-weight:700 900;font-display:swap}

:root{
  --brand:#0b3f9b;
  --electric:#046ee3;
  --navy:#122b6e;
  --ink:#182b51;
  --paper:#f6f5f0;
  --surface:#fff;
  --lemon:#ffde59;
  --line:#dce0e4;
  --muted:#63718a;
  --radius:4px;
  --sidebar-width:236px;
}
html{scroll-padding-top:28px}
body{font-family:"Fb Alfi",Tahoma,Arial,sans-serif;font-size:16px;line-height:1.6;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
::selection{background:var(--lemon);color:var(--navy)}
a{color:var(--brand)}
h1,h2,h3{color:var(--ink);letter-spacing:-.035em}
h1{font-size:30px}
h2{font-size:25px}
h3{font-size:21px}
.ui-icon{display:block;flex:none}
.muted,.eyebrow{color:var(--muted)}
.small{font-size:13px}
button,.button{min-height:46px;padding:11px 22px;border-radius:var(--radius);background:var(--brand);color:#fff;font-weight:700;border:1px solid var(--brand);transition:background .18s,color .18s,transform .18s}
button:hover,.button:hover{background:var(--navy);border-color:var(--navy);color:#fff}
button:active,.button:active{transform:translateY(1px)}
button:disabled{opacity:.48}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--electric);outline-offset:4px}
.secondary{color:var(--brand);background:transparent;border-color:#b6c3d8}
.secondary:hover{color:var(--brand);background:#eaf0fa;border-color:var(--brand)}
.subtle{background:transparent;color:var(--muted);border-color:transparent;padding:8px;min-height:40px}
.subtle:hover{background:#e7edf8;color:var(--brand);border-color:transparent}
.danger-button{background:#a73737;border-color:#a73737}
.danger-button:hover{background:#842828;border-color:#842828}
label{font-size:14px;color:var(--ink);gap:8px}
input,select,textarea{border:1px solid #bdc6d3;border-radius:var(--radius);background:#fff;color:var(--ink);padding:11px 13px;min-height:47px}
input:hover,select:hover,textarea:hover{border-color:#8193b1}
input:focus,select:focus,textarea:focus{border-color:var(--electric)}
input[type=checkbox]{min-height:19px;accent-color:var(--brand)}
.skip-link{position:fixed;top:-100px;right:20px;z-index:100;background:var(--lemon);padding:12px 20px;color:var(--navy)}
.skip-link:focus{top:12px}

/* A quiet navigation rail lets the brand and the work carry the page. */
.sidebar{overflow-y:auto;width:var(--sidebar-width);padding:32px 22px 20px;background:var(--surface);border-left:1px solid var(--line);color:var(--ink)}
.brand{display:block;width:110px;margin:0 16px;letter-spacing:0;line-height:1}
.brand img{display:block;width:110px;height:auto;max-width:100%}
.nav-caption{margin:50px 14px 14px;color:#79849a;font-size:12px}
.sidebar nav{flex-shrink:0;display:grid;gap:6px;margin:0}
.sidebar nav a{display:flex;align-items:center;gap:12px;min-height:48px;padding:12px;border:1px solid transparent;border-radius:3px;font-size:15px;font-weight:500;color:#56647d;line-height:1.4;transition:background .18s,color .18s}
.sidebar nav a:hover{background:#eef2fa;color:var(--brand);text-decoration:none}
.sidebar nav a[aria-current=page]{background:var(--brand);color:#fff}
.sidebar nav a[aria-current=page] .ui-icon{--surface:var(--brand)}
.nav-caret{margin-inline-start:auto;opacity:0}
.sidebar nav a[aria-current=page] .nav-caret{opacity:1}
.sidebar-signature{margin-top:auto;padding:42px 13px 28px;display:flex;align-items:flex-start;gap:12px}
.signature-dot{display:block;width:12px;height:12px;background:var(--lemon);border-radius:50%;flex:none;margin-top:7px;box-shadow:0 0 0 4px #ffde5922}
.sidebar-signature p{font-size:14px;line-height:1.7;margin:0;color:#69748a}
.sidebar-signature strong{color:var(--navy);font-weight:500}
.account{flex-shrink:0;display:flex;gap:6px;align-items:center;margin-top:0;padding:20px 0 0;border-top:1px solid var(--line)}
.account-id{display:flex;align-items:center;gap:9px;min-width:0}
.account-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#edf1f8;color:var(--brand);font:600 13px Arial,sans-serif;flex:none}
.account-id small{display:block;color:var(--muted);font-size:10px}
.account-id strong{display:block;font:600 13px Arial,sans-serif;max-width:100px;overflow:hidden;text-overflow:ellipsis}
.account button{color:var(--muted)}
.account form{margin-inline-start:auto}
main{margin-right:var(--sidebar-width);padding:27px 46px 24px;max-width:1850px}
.page-heading{min-height:73px;padding-bottom:25px;margin-bottom:30px;border-bottom:1px solid var(--line);gap:20px}
.page-heading>div{min-width:0}
.page-heading h1{font-size:27px;line-height:1.2}
.page-heading .eyebrow{font-size:11px;margin-bottom:7px;color:var(--muted)}
.page-edition{font:600 10px Arial,sans-serif;letter-spacing:.11em;white-space:nowrap;color:#7a8496}
.edition-separator{display:inline-block;margin:0 11px;color:var(--electric)}
.workspace-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:48px;padding-top:21px;font-size:11px;color:#788396;text-align:right}
.workspace-footer span[dir=ltr]{font:500 9px Arial,sans-serif;letter-spacing:.14em}

.section-kicker{font-size:11px;color:var(--muted);margin:0 0 5px}

/* Work surfaces: precise lines, calm density, semantic status colors. */
.card{padding:28px;border:1px solid var(--line);border-radius:var(--radius);box-shadow:none;background:#fff;margin-bottom:22px}
.toolbar{gap:10px 24px;padding:0 0 22px;border-bottom:1px solid var(--line);margin-bottom:24px;font-size:14px}
.toolbar a{color:var(--brand)}
.toolbar a.button{color:#fff}
.stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0;margin-bottom:28px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);overflow:hidden}
.stats .card{border:0;border-left:1px solid var(--line);border-radius:0;margin:0;padding:20px 25px;background:transparent;gap:8px}
.stats .card:last-child{border-left:0}
.stats span{font-size:12px;color:var(--muted)}
.stats strong{overflow-wrap:anywhere;min-width:0;font-family:Arial,"Fb Alfi",sans-serif;font-size:38px;font-weight:500;letter-spacing:-.04em;color:var(--brand);line-height:1.2;font-variant-numeric:tabular-nums}
.pill,.tag{font-size:12px;padding:4px 11px;line-height:1.5;background:#edf0f5;color:#556179;border-radius:4px}
.pill.approved,.pill.closed,.pill.completed{background:#e7f2e9;color:#28653c}
.pill.computed{background:#e8edff;color:#354a95}
.pill.blocked,.pill.failed,.pill.danger{background:#fbe9e4;color:#9b3729}
.tag{font-size:11px;border:1px solid #e4e7ed}
.upload-zone{background:#f7f9fd;border:1px dashed #a5b5d0;border-radius:var(--radius);padding:24px}
.section-heading h2,.card>h2{font-size:23px}
th{background:#f4f5f7;font-size:12px;color:#65718a;padding-block:14px}
td{font-size:14px}
th,td{border-color:var(--line)}
tbody tr:hover{background:#f6f8fc}
.notice{border-radius:3px}
summary{color:var(--brand)}
.narrow{max-width:760px}

/* The entrance is a brand poster, with a deliberately quiet form. */
.auth-page{display:block;min-height:100vh;min-height:100svh;padding:0;background:var(--paper)}
.auth-layout{display:grid;grid-template-columns:minmax(350px,.85fr) minmax(0,1.15fr);width:100%;max-width:none;min-height:100vh;min-height:100svh;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;overflow:hidden}
.auth-card{display:flex;flex-direction:column;width:auto;max-width:none;min-width:0;background:var(--paper);padding:36px 54px 26px;border:0;border-radius:0;box-shadow:none}
.auth-card-header{display:flex;justify-content:space-between;align-items:center;gap:30px}
.auth-brand{display:block;margin:0;line-height:1;letter-spacing:0}
.auth-brand img{display:block;width:109px;height:auto}
.auth-edition{font:500 9px/1.9 Arial,sans-serif;letter-spacing:.12em;color:#7b8396}
.auth-form-content{width:100%;max-width:375px;margin:auto;padding:45px 0 55px}
.auth-kicker{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin:0 0 20px}
.auth-kicker>span{display:block;width:6px;height:6px;border-radius:50%;background:var(--electric)}
.auth-card h1{font-size:44px;line-height:1.1;letter-spacing:-.055em;margin:0 0 17px}
.auth-card h1::after{display:none}
.auth-form-content>p.muted{font-size:15px;line-height:1.6}
.auth-card form{margin-top:32px}
.auth-card label{font-size:13px;gap:8px;margin-bottom:20px}
.auth-card input{background:transparent;border:0;border-bottom:1px solid #a7b2c6;border-radius:0;padding:10px 0;min-height:45px;font-size:17px}
.auth-card input:focus{border-bottom-color:var(--electric)}
.auth-card input:focus-visible{outline:2px solid var(--electric);outline-offset:4px}
.auth-card button{width:100%;min-height:52px;margin-top:7px;border-radius:3px;display:flex;justify-content:space-between;padding-inline:20px}
.auth-card button::after{content:"←";font-family:Arial,sans-serif;font-size:21px;font-weight:400}
.auth-form-content>.small{font-size:11px;margin:21px 0 0;line-height:1.7;color:var(--muted)}
.auth-card-footer{display:flex;align-items:center;gap:9px;border-top:1px solid var(--line);padding-top:20px;color:var(--muted);font-size:11px}
.auth-card-footer .ui-icon{width:14px;height:14px}
.auth-footer-mark{margin-inline-start:auto;font:700 14px Arial,sans-serif;color:var(--brand)}
.auth-back{display:inline-block;margin-top:22px;font-size:14px}
.auth-card .qr{max-width:215px;background:#fff;border:1px solid var(--line);padding:10px}
.auth-card .otp{font-family:Arial,sans-serif;letter-spacing:10px;font-size:27px}
.auth-story{position:relative;isolation:isolate;display:block;overflow:hidden;min-height:700px;padding:37px 52px;background:var(--brand);color:#fff}
.poster-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:2}
.poster-topline>span:first-child{font:500 10px Arial,sans-serif;letter-spacing:.18em}
.poster-spark{font:400 36px/1 Arial,sans-serif;color:var(--lemon)}
.auth-story-copy{position:relative;z-index:2;margin-top:74px}
.auth-story-eyebrow{font-size:14px;color:#d4e4ff;margin:0 0 22px}
.auth-story h2{color:#fff;font-size:clamp(78px,8vw,126px);line-height:.94;letter-spacing:-.065em;margin:0}
.auth-story h2 span{color:var(--lemon)}
.poster-disc{position:absolute;z-index:0;bottom:-65px;left:-95px;width:485px;height:485px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;transform:rotate(-16deg)}
.poster-disc::before{content:"";position:absolute;inset:-36px;border:1px solid #ffffff36;border-radius:50%}
.poster-disc::after{content:"";position:absolute;inset:-72px;border:1px solid #ffffff1a;border-radius:50%}
.poster-disc img{width:340px;height:auto;transform:translate(5px,-10px)}
.poster-note{position:absolute;right:55px;bottom:198px;z-index:2;display:grid;place-content:center;width:98px;height:98px;border:1px solid #ffffff70;border-radius:50%;font-size:18px;line-height:1.3;text-align:center;transform:rotate(12deg);color:#fff}
.poster-bottomline{position:absolute;right:52px;left:52px;bottom:31px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;z-index:2}
.poster-bottomline p{font-size:13px;line-height:1.7;color:#d4e4ff;margin:0;max-width:230px}
.poster-bottomline>span{font:500 12px Arial,sans-serif;letter-spacing:.13em;color:var(--brand)}

@media(min-width:1500px){
  .auth-card{padding:42px 80px 32px}
  .auth-form-content{max-width:400px}
  .auth-story{padding:42px 80px}
  .auth-story-copy{margin-top:90px}
  .poster-disc{width:610px;height:610px;bottom:-90px;left:-105px}
  .poster-disc img{width:425px}
  .poster-note{right:85px;bottom:220px}
  .poster-bottomline{right:80px;left:80px}
}
@media(max-width:1150px){
  :root{--sidebar-width:215px}
  main{padding:25px 30px}
  .sidebar{padding:28px 16px 20px}
  .sidebar nav a{font-size:14px;gap:10px}
  .auth-card{padding:30px 36px 25px}
  .auth-story{padding:35px;min-height:710px}
  .poster-disc{width:420px;height:420px;left:-120px;bottom:-50px}
  .poster-disc img{width:300px}
  .poster-note{right:35px;bottom:195px;width:80px;height:80px;font-size:16px}
  .poster-bottomline{right:35px;left:35px}
  .poster-bottomline p{max-width:190px;font-size:12px}
}
@media(max-width:900px){
  .sidebar{position:relative;width:100%;padding:17px 24px 0;border-left:0;border-bottom:1px solid var(--line)}
  .brand{width:80px;margin:0}
  .brand img{width:80px}
  .nav-caption,.sidebar-signature{display:none}
  .sidebar nav{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px;margin:17px -9px 0;padding-bottom:12px}
  .sidebar nav a{padding:10px 12px;min-height:44px;white-space:nowrap;flex:none;font-size:13px;gap:7px}
  .sidebar nav .ui-icon{width:16px;height:16px}
  .nav-caret{display:none}
  .account{position:absolute;left:24px;top:25px;margin:0;padding:0;border:0}
  .account-id .account-avatar,.account-id small{display:none}
  .account-id strong{display:block}
  main{margin:0;padding:24px}
  .page-heading{margin-bottom:24px;min-height:64px;padding-bottom:22px}
  .page-heading h1{font-size:26px}
  .card{padding:23px}
  .section-heading{flex-wrap:wrap}
  .auth-layout{grid-template-columns:minmax(320px,1fr) minmax(0,1fr)}
  .auth-story h2{font-size:86px}
  .auth-story-copy{margin-top:100px}
  .poster-disc{width:350px;height:350px;left:-145px}
  .poster-disc img{width:240px}
  .poster-note{bottom:195px}
  .poster-bottomline>span{display:none}
  .poster-bottomline p{max-width:180px;margin-bottom:10px}
  .auth-card h1{font-size:38px}
}
@media(max-width:700px){
  .page-edition{font-size:8px;letter-spacing:.06em}
  .edition-separator{margin:0 5px}
  .stats .card{padding:17px 13px}
  .stats strong{font-size:28px}
  .stats span{font-size:11px}
  .auth-layout{display:flex;flex-direction:column;min-height:100svh}
  .auth-card{flex:1;padding:25px 28px 21px;min-height:100svh;border-top:6px solid var(--brand)}
  .auth-card-header{gap:24px}
  .auth-brand img{width:95px}
  .auth-edition{font-size:8px}
  .auth-form-content{max-width:420px;padding:43px 0;margin-block:auto}
  .auth-card h1{font-size:42px}
  .auth-card-footer{font-size:10px}
  .auth-story{display:none}
  .auth-card .qr{max-width:210px}
}
@media(max-width:450px){
  main{padding:22px 18px}
  .sidebar{padding:16px 18px 0}
  .account{left:18px;top:25px}
  .account-id strong{max-width:95px;font-size:12px}
  .page-heading h1{font-size:24px}
  .page-edition{font-size:7px;letter-spacing:0}
  .toolbar{gap:12px 18px;font-size:13px}
  .card{padding:20px}
  .card>h2,.section-heading h2{font-size:21px}
  .stats .card{padding:15px 11px}
  .stats strong{font-size:27px}
  .upload-zone{padding:20px 15px}
  .workspace-footer{margin-top:35px;gap:10px;font-size:10px}
  .workspace-footer span[dir=ltr]{font-size:7px;letter-spacing:.04em}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}


@media(min-width:901px) and (max-height:740px){.sidebar-signature{display:none}.account{margin-top:auto}.nav-caption{margin-top:34px}}

.auth-mobile-line{display:none}
@media(max-width:700px){
  .auth-card{border-top:0}
  .auth-card-header{position:relative;flex-wrap:wrap;gap:20px;margin:-25px -28px 0;padding:25px 28px 22px;background:var(--brand);overflow:hidden}
  .auth-brand picture{display:block}
  .auth-brand img{width:148px;height:auto}
  .auth-edition{color:#d4e4ff}
  .auth-mobile-line{display:block;flex-basis:100%;font-size:34px;line-height:1;margin:0;color:var(--lemon);letter-spacing:-.04em}
  .auth-form-content{padding-top:34px;padding-bottom:35px}
  .auth-card-header::after{content:"";position:absolute;left:-40px;bottom:-75px;border:1px solid #ffffff38;width:160px;height:160px;border-radius:50%;pointer-events:none}
}

@media(max-width:900px){.sidebar nav{scrollbar-width:none}.sidebar nav::-webkit-scrollbar{display:none}}
@media(max-width:360px){
  .auth-card h1{font-size:36px}
}