/* Onboarding — the welcome gate / sign-in screen and the first-run tour.
   Owned by ONE porting agent so screens can be built in parallel without
   racing on main.css. Loads AFTER main.css, so a bare class here beats a
   bare class there — but an ID rule in main.css still wins. Check the
   cascade before assuming a rule applies.
   Tokens, the .tip tooltip system and the chart series live in main.css and
   must not be redefined here. */

/* ══ AUTH — #auth-modal: split pitch + form, every state ═══════════════════
   Flow from design/Main.dc.html (create account / sign in / forgot / check
   your email / set new password / verify), look from design/ui/_SPEC.md.
   index.html owns the static form; auth.js renders the flow screens into
   #auth-alt with the same classes, so both halves are styled here.
   Cascade notes (checked against main.css):
   · The v218 .auth-* rules are (0,1,0)/(0,2,0) except #auth-form > div
     (1,0,1), #auth-form .auth-title / .auth-sub / .lbl (1,1,0) and
     #auth-forgot a (1,0,1). Everything below is #auth-modal-scoped (>= 1,1,0)
     and loads later, so it wins on specificity or on order. No !important.
   · input (0,0,1), input:focus (0,1,1), input:hover:not(:focus) (0,2,1) ->
     #auth-modal input (1,0,1) / :focus (1,1,1) / :hover:not(:focus) (1,2,1).
   · .btn (0,1,0), .btn:hover:not(:disabled) (0,3,0), .auth-go (0,1,0),
     .auth-flow .btn (0,2,0) -> #auth-modal .btn (1,1,0), :hover (1,2,0).
   · .pw-rules / .pw-rule / .auth-error are ALSO used by Settings -> change
     password and the profile modal; scoping keeps their main.css look there.
   · .auth-main is overflow-y:auto (the form must scroll on short screens),
     so a bubble near its edge relies on "tip up" (skip link) / "tip left"
     (close) and the ui-refresh.js auto-fit. The panel is centred with
     >= 40px clearance at 900px high, measured.
   · Board hexes used literally, as the other ported screens do. */

#auth-modal{background:#FFFFFF;}

/* Left — the pitch. Eyebrow · one display line · three claims. The lead
   paragraph and the footnote are gone (spec section -1): the footnote lives
   on the "Skip for now" link as its tooltip. */
#auth-modal .auth-pitch{width:420px;flex-shrink:0;background:#F5E9E7;padding:44px 40px 40px;display:flex;flex-direction:column;justify-content:flex-start;position:relative;overflow:hidden;}
#auth-modal .auth-pitch-brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:19px;font-weight:500;letter-spacing:-.3px;color:#2A323A;line-height:1;}
#auth-modal .auth-pitch-brand svg{display:block;flex-shrink:0;}
#auth-modal .auth-pitch-brand span{color:#837D68;}
#auth-modal .auth-pitch-mid{flex:1;display:flex;flex-direction:column;justify-content:center;padding:28px 0 48px;position:relative;}
#auth-modal .auth-pitch-eyebrow{font-family:var(--font-mono);font-size:9px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:#A08183;margin:0 0 14px;}
#auth-modal .auth-pitch-h1{font-family:var(--font-display);font-size:38px;font-weight:400;line-height:1.14;letter-spacing:-.8px;margin:0 0 28px;text-wrap:balance;color:#2A323A;}
#auth-modal .auth-pitch-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
#auth-modal .auth-pitch-list li{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;line-height:1.5;color:#4A5560;}
#auth-modal .auth-pitch-list svg{flex-shrink:0;margin-top:2px;color:#837D68;}

/* Right — the form, or a flow screen, in one capped column */
#auth-modal .auth-main{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:48px 56px;position:relative;overflow-y:auto;}
#auth-modal .auth-panel{width:100%;max-width:372px;}
#auth-modal .auth-close{position:absolute;top:20px;right:24px;width:32px;height:32px;border-radius:50%;border:none;padding:0;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#4A5560;font-family:var(--font);font-size:13px;line-height:1;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.07);transition:box-shadow .13s,background .13s;}
#auth-modal .auth-close:hover{background:#F7F7F7;color:#2A323A;box-shadow:0 2px 5px rgba(0,0,0,.13),0 0 0 1px rgba(0,0,0,.11);}

/* one title + one subtitle line, Fraunces */
#auth-modal .auth-title{font-family:var(--font-display);font-size:26px;font-weight:400;letter-spacing:-.5px;line-height:1.15;color:#2A323A;margin:0 0 5px;}
#auth-modal .auth-sub{font-size:12.5px;color:#6B7480;line-height:1.5;margin:0 0 24px;}

/* fields — spacing is owned by .auth-field, not by #auth-form > div */
#auth-form > div{margin-bottom:0;}
#auth-modal .auth-field{margin:0 0 14px;}
#auth-modal .auth-lbl{display:block;font-family:var(--font-mono);font-size:10px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:#6B7480;line-height:1.3;margin:0 0 6px;}
#auth-modal input{width:100%;margin:0;padding:10px 13px;border:1px solid #D2DAE3;border-radius:9px;font-family:var(--font);font-size:13px;font-weight:400;color:#2A323A;background:#fff;box-shadow:none;transition:border-color .12s,box-shadow .12s;}
#auth-modal input:hover:not(:focus){border-color:#8A9DB1;}
#auth-modal input:focus{outline:none;border-color:#8A9DB1;background:#fff;box-shadow:0 0 0 3px rgba(138,157,177,.13);}
#auth-modal input::placeholder{color:#A8AEB6;}
#auth-modal input:disabled{opacity:.6;}

/* password rules (tick / ring) and the confirm-match line, rendered by auth.js */
#auth-modal .pw-rules{display:flex;flex-wrap:wrap;gap:5px 14px;margin:9px 0 0;font-size:11px;line-height:1.4;color:#9BA3AC;}
#auth-modal .pw-rule{white-space:nowrap;}
#auth-modal .pw-rule-ok{color:#6E7F5C;font-weight:600;}
#auth-modal .pw-match{font-size:11.5px;line-height:1.4;min-height:16px;margin:7px 0 0;}

/* forgot link · error · submit · switch · skip */
#auth-modal .auth-forgot{text-align:right;font-size:11.5px;line-height:1.4;margin:-6px 0 16px;}
#auth-modal .auth-forgot a{color:#6B7480;text-decoration:underline;text-underline-offset:2px;}
#auth-modal .auth-forgot a:hover{color:#2A323A;}
#auth-modal .auth-error{font-size:12px;font-weight:500;line-height:1.45;color:#8A1C1C;background:#FDE7E7;border:1px solid #F3CACA;border-radius:9px;padding:8px 12px;margin:0 0 14px;}
#auth-modal .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:9999px;background:#2A323A;color:#FCFBF9;font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:0;line-height:1.2;padding:11px 18px;box-shadow:0 1px 2px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.1);cursor:pointer;white-space:nowrap;transition:background .13s,box-shadow .13s;}
#auth-modal .btn:hover{background:#3D4854;box-shadow:0 2px 6px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.12);}
#auth-modal .btn:disabled{opacity:.55;cursor:default;background:#2A323A;box-shadow:0 1px 2px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.1);}
#auth-modal .btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:9999px;background:#fff;color:#2A323A;font-family:var(--font);font-size:13px;font-weight:500;letter-spacing:0;line-height:1.2;padding:10px 18px;box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.07);cursor:pointer;white-space:nowrap;transition:background .13s,box-shadow .13s;}
#auth-modal .btn-ghost:hover{background:#fff;color:#2A323A;box-shadow:0 2px 5px rgba(0,0,0,.13),0 0 0 1px rgba(0,0,0,.11);}
#auth-modal .btn-ghost:disabled{opacity:.55;cursor:default;}
#auth-modal .auth-go,#auth-modal .auth-flow .btn,#auth-modal .auth-flow .btn-ghost{width:100%;margin:2px 0 0;}
#auth-modal .auth-switch{font-size:12.5px;color:#6B7480;text-align:center;margin:16px 0 0;line-height:1.4;}
#auth-modal .auth-switch a{color:#837D68;font-weight:600;text-decoration:none;}
#auth-modal .auth-switch a:hover{color:#4D4936;}
#auth-modal .auth-skip{text-align:center;font-size:11.5px;line-height:1.4;margin:20px 0 0;padding:16px 0 0;border-top:1px solid #E8EDF2;}
#auth-modal .auth-skip a{display:inline-block;color:#9BA3AC;text-decoration:underline;text-underline-offset:2px;}
#auth-modal .auth-skip a:hover{color:#6B7480;}

/* flow screens — check your email · confirm your email (centred) and
   forgot / set new password (left, form-like); all rendered by auth.js */
#auth-modal .auth-flow{text-align:center;}
#auth-modal .auth-flow-icon{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
#auth-modal .auth-flow-icon svg{display:block;}
#auth-modal .auth-flow-icon-mail{background:#F5DEDE;color:#B8797B;}
#auth-modal .auth-flow-icon-ok{background:#E4EADF;color:#6E7F5C;}
#auth-modal .auth-flow .auth-title{margin-bottom:8px;}
#auth-modal .auth-flow .auth-sub{margin-bottom:22px;}
#auth-modal .auth-flow-lead{font-size:13px;color:#6B7480;line-height:1.6;margin:0 0 4px;}
#auth-modal .auth-flow-addr{font-size:14px;font-weight:600;color:#2A323A;line-height:1.4;margin:0 0 14px;word-break:break-all;}
#auth-modal .auth-msg{font-size:12px;line-height:1.45;min-height:18px;margin:10px 0 0;}
#auth-modal .auth-form-msg{font-size:12px;line-height:1.45;min-height:18px;margin:-4px 0 12px;}
#auth-modal .auth-msg-ok{color:#6E7F5C;}
#auth-modal .auth-msg-err{color:#B4544F;}
#auth-modal .auth-flow-alt{margin:14px 0 0;font-size:11.5px;line-height:1.4;}
#auth-modal .auth-flow-alt a{color:#9BA3AC;text-decoration:underline;text-underline-offset:2px;}
#auth-modal .auth-flow-alt a:hover{color:#6B7480;}

/* narrow: hide the pitch and keep the form's own padding sane. main.css hides
   .auth-pitch at (0,1,0) under this same query, but #auth-modal .auth-pitch above
   is (1,1,0) and would win — measured at 800px: the 420px pitch stayed and left the
   form 380px. The ID-scoped rule must hide it here too. */
@media (max-width:900px){ #auth-modal .auth-pitch{display:none;} #auth-modal .auth-main{padding:28px 22px;} }

/* ══ INTRO TOUR — #intro-modal: six slide cards over the dimmed app ═══════
   onboarding.js renders the whole card into #intro-body (it IS the card —
   not a .modal, so the 24px .modal radius / 720px width never apply). The
   art keeps main.css's ob-* keyframes (global by name); every ob-* rule is
   re-set here under the ID so the calm look wins over main.css's (0,1,0)
   originals. The stage is overflow:hidden — no .tip inside it. The footer
   bubbles open "up", the close "left"; the card only scrolls below ~560px of
   viewport height, and the auto-fit flips anything that would clip. */
#intro-modal{background:rgba(34,41,48,.46);}
#intro-modal .intro{width:600px;max-width:calc(100vw - 24px);max-height:calc(100vh - 32px);overflow-y:auto;background:#fff;border-radius:18px;box-shadow:0 30px 70px rgba(20,26,32,.32),0 6px 18px rgba(20,26,32,.16);padding:20px 28px 22px;position:relative;font-family:var(--font);color:#2A323A;text-align:left;}
#intro-modal .intro-hdr{display:flex;align-items:center;gap:12px;margin:0 0 14px;}
#intro-modal .intro-eyebrow{flex:1;min-width:0;font-family:var(--font-mono);font-size:9.5px;font-weight:400;letter-spacing:.13em;text-transform:uppercase;color:#9BA3AC;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#intro-modal .intro-x{width:30px;height:30px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:none;padding:0;background:#fff;font-family:var(--font);font-size:13px;line-height:1;color:#4A5560;box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.07);cursor:pointer;transition:box-shadow .13s,background .13s;}
#intro-modal .intro-x:hover{background:#F7F7F7;box-shadow:0 2px 5px rgba(0,0,0,.13),0 0 0 1px rgba(0,0,0,.11);}
#intro-modal .intro-title{font-family:var(--font-display);font-size:23px;font-weight:400;letter-spacing:-.4px;line-height:1.2;color:#2A323A;margin:0 0 8px;}
#intro-modal .intro-body{font-size:13px;line-height:1.65;color:#4A5560;max-width:500px;margin:0;}
#intro-modal .intro-body strong{color:#2A323A;font-weight:600;}
#intro-modal .intro-foot{display:flex;align-items:center;gap:10px;margin:22px 0 0;padding:16px 0 0;border-top:1px solid #E8EDF2;}
#intro-modal .intro-skip{background:none;border:none;box-shadow:none;padding:0;font-family:var(--font);font-size:11.5px;line-height:1.4;color:#9BA3AC;text-decoration:underline;text-underline-offset:2px;cursor:pointer;white-space:nowrap;}
#intro-modal .intro-skip:hover{color:#6B7480;}
#intro-modal .intro-dots{flex:1;display:flex;align-items:center;justify-content:center;gap:2px;}
#intro-modal .intro-dot{width:16px;height:16px;display:flex;align-items:center;justify-content:center;border:none;padding:0;background:transparent;cursor:pointer;}
#intro-modal .intro-dot i{display:block;width:7px;height:7px;border-radius:50%;background:#D2DAE3;transition:background .12s,transform .12s;}
#intro-modal .intro-dot:hover i{background:#9BA3AC;}
#intro-modal .intro-dot.on i{background:#2A323A;transform:scale(1.15);}
#intro-modal .intro-nav{display:flex;gap:8px;flex-shrink:0;}
#intro-modal .intro-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:9999px;background:#fff;color:#2A323A;font-family:var(--font);font-size:12.5px;font-weight:500;letter-spacing:0;line-height:1.2;padding:8px 15px;box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.07);cursor:pointer;white-space:nowrap;transition:background .13s,box-shadow .13s;}
#intro-modal .intro-btn:hover{box-shadow:0 2px 5px rgba(0,0,0,.13),0 0 0 1px rgba(0,0,0,.11);}
#intro-modal .intro-btn-dark{background:#2A323A;color:#FCFBF9;font-weight:600;padding:8px 17px;box-shadow:0 1px 2px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.1);}
#intro-modal .intro-btn-dark:hover{background:#3D4854;box-shadow:0 2px 6px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.12);}

/* the slide art — calm: ground stage, white rows, sage for "done", mono
   captions, dark pills where the app has a dark pill */
#intro-modal .ob-stage{position:relative;height:190px;border:1px solid #E8EDF2;border-radius:12px;background:#F7F7F7;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;margin:0 0 18px;}
#intro-modal .ob-brand{font-family:var(--font-display);font-size:30px;font-weight:500;letter-spacing:-.6px;line-height:1;color:#2A323A;}
#intro-modal .ob-brand span{color:#837D68;}
#intro-modal .ob-flow{display:flex;align-items:center;gap:12px;font-size:22px;line-height:1;}
#intro-modal .ob-to{font-size:18px;color:#9BA3AC;}
#intro-modal .ob-cap{font-family:var(--font-mono);font-size:9px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:#9BA3AC;text-align:center;line-height:1.4;}
#intro-modal .ob-cap-sage{color:#6E7F5C;}
#intro-modal .ob-cloud{font-size:34px;line-height:1;animation:ob-pulse 2s ease-in-out infinite;}
#intro-modal .ob-arrow{font-size:18px;line-height:1;color:#9BA3AC;animation:ob-down 1.4s ease-in-out infinite;}
#intro-modal .ob-arrow-sm{font-size:15px;}
#intro-modal .ob-row{background:#fff;border:1px solid #D2DAE3;border-radius:9px;padding:6px 12px;font-size:12px;font-weight:500;color:#2A323A;min-width:190px;text-align:center;line-height:1.3;box-shadow:0 1px 2px rgba(0,0,0,.04);}
#intro-modal .ob-row-sm{min-width:0;}
#intro-modal .ob-row-left{text-align:left;}
#intro-modal .ob-pick{opacity:0;border-color:#6E7F5C;color:#6E7F5C;animation:ob-fadeup .5s ease forwards,intro-glow 1.6s ease-in-out 1s infinite;}
@keyframes intro-glow{0%,100%{box-shadow:0 0 0 0 rgba(110,127,92,0)}50%{box-shadow:0 0 0 4px rgba(110,127,92,.22)}}
#intro-modal .ob-caret{display:inline-block;color:#837D68;font-weight:700;animation:ob-blink 1s steps(1) infinite;}
#intro-modal .ob-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation:ob-type 1.8s steps(24) infinite alternate;}
#intro-modal .ob-chip{display:inline-block;background:#2A323A;color:#FCFBF9;border-radius:9999px;padding:4px 12px;font-size:11px;font-weight:600;letter-spacing:0;line-height:1.4;animation:ob-pop .5s ease both;}
#intro-modal .ob-ok{background:#6E7F5C;color:#fff;border:none;animation:ob-pop .5s ease both,intro-glow 1.6s ease-in-out .6s infinite;}
#intro-modal .ob-code{display:inline-block;font-family:var(--font-mono);font-size:11px;line-height:1.5;color:#2A323A;background:#fff;border:1px solid #E8EDF2;border-radius:6px;padding:2px 9px;animation:ob-pop .5s ease both;}
#intro-modal .ob-pulsebtn{background:#2A323A;color:#FCFBF9;border-radius:9999px;padding:6px 16px;font-size:12px;font-weight:600;line-height:1.3;box-shadow:0 1px 2px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.1);animation:ob-pulse 1.3s ease-in-out infinite;}
#intro-modal .ob-half{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;}
#intro-modal .ob-or{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#9BA3AC;}
#intro-modal .ob-doc{background:#fff;border:1px solid #E8EDF2;border-radius:8px;padding:9px 10px;width:170px;display:flex;flex-direction:column;gap:5px;box-shadow:0 1px 3px rgba(42,50,58,.04),0 4px 14px rgba(42,50,58,.06);}
#intro-modal .ob-line{height:5px;border-radius:3px;background:#D2DAE3;opacity:0;animation:ob-fadeup .4s ease forwards;}
#intro-modal .ob-line-accent{background:#837D68;}
#intro-modal .ob-fields{display:flex;flex-direction:column;gap:4px;width:252px;}
#intro-modal .ob-field{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10.5px;font-weight:500;line-height:1.4;padding:4px 10px;border-radius:7px;background:#fff;border:1px solid #E8EDF2;color:#2A323A;opacity:0;animation:ob-fadeup .5s ease forwards;}
#intro-modal .ob-field b{color:#6E7F5C;font-weight:600;}
#intro-modal .ob-field-review{background:#FFF4D6;border-color:#F0E0B0;color:#7A4A00;}
#intro-modal .ob-review-tag{font-family:var(--font-mono);font-size:8px;font-weight:500;letter-spacing:.08em;line-height:1.5;background:#7A4A00;color:#FFF4D6;border-radius:4px;padding:1px 6px;animation:ob-pulse 1.4s ease-in-out infinite;}
#intro-modal .ob-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:9999px;padding:6px 14px 6px 10px;font-size:12px;font-weight:500;line-height:1.3;color:#2A323A;box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.07);opacity:0;animation:ob-fadeup .5s ease forwards;}
#intro-modal .ob-pill i{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block;}