:root{--cream:#f4efe6;--cream-soft:#eae3d6;--paper:#fbf8f2;--ink:#1a1614;--ink-soft:#3b342f;--ink-mute:#6e655c;--line:#d9d0c2;--line-soft:#e8e1d4;--forest:#1a2818;--forest-light:#2c4028;--moss:#6b7a4d;--wheat:#c9a961;--red:#a03318;--ok:#2f6b3d;--radius-sm:4px;--radius:8px;--radius-lg:14px;--font-display:'Fraunces','Georgia',serif;--font-body:'Inter',system-ui,sans-serif;--shadow-lg:0 20px 50px -20px rgba(26,22,20,0.28)}
*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}
body{font-family:var(--font-body);background:var(--paper);color:var(--ink);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}input,select,textarea{font-family:inherit}

/* CRITICAL: only one pane shows at a time. Login and portal live in the same shell. */
.shell{min-height:100vh;display:flex;flex-direction:column}
.pane{display:none;flex:1;width:100%;min-height:100vh}
.pane-active{display:flex;flex-direction:column}

/* LOGIN PANE */
.pane-login{justify-content:center;align-items:center;background:radial-gradient(ellipse at top,rgba(26,40,24,0.08),transparent 60%),linear-gradient(180deg,var(--paper) 0%,var(--cream) 100%);padding:40px 20px;position:relative}
.pane-login::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:80px 80px;opacity:0.35;pointer-events:none;mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%)}
.login-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:48px 44px 40px;width:100%;max-width:420px;box-shadow:var(--shadow-lg);text-align:center}
.brand-mark{margin-bottom:18px;display:inline-block}
.brand-logo-large{height:72px;width:auto;display:block}
.brand-logo-small{height:36px;width:auto;display:block}
.brand-name{font-family:var(--font-display);font-weight:500;font-size:34px;letter-spacing:-0.02em;margin:0 0 6px;color:var(--ink);font-variation-settings:"opsz" 144}
.brand-tag{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 36px;font-weight:500}
.login-form{text-align:left}
.login-form label{display:block;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);margin-bottom:8px}
.login-form input{width:100%;padding:14px 16px;font-size:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink)}
.login-form input:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(26,40,24,0.08)}
.login-form button{width:100%;margin-top:16px;padding:14px;background:var(--forest);color:var(--paper);border:none;border-radius:var(--radius);font-size:14px;font-weight:600;letter-spacing:0.04em;transition:background 0.15s}
.login-form button:hover{background:var(--forest-light)}
.login-error{color:var(--red);font-size:13px;margin:14px 0 0;text-align:center}
.login-footer{position:absolute;bottom:24px;font-size:11px;color:var(--ink-mute);letter-spacing:0.08em;margin:0;left:50%;transform:translateX(-50%)}

/* PORTAL PANE */
.pane-portal{background:var(--paper)}
.portal-header{background:var(--forest);color:var(--cream);position:sticky;top:0;z-index:50}
.portal-header-inner{max-width:1120px;margin:0 auto;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.portal-brand{display:flex;align-items:center;gap:14px;color:var(--cream)}
.portal-brand-name{font-family:var(--font-display);font-size:20px;font-weight:500;letter-spacing:-0.01em}
.portal-brand-tag{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;opacity:0.7;margin-top:2px}
.portal-nav{display:flex;gap:4px;flex-wrap:wrap}
.nav-btn{background:transparent;border:1px solid transparent;color:var(--cream);font-size:13px;padding:8px 14px;border-radius:var(--radius-sm);opacity:0.7;transition:opacity 0.15s,background 0.15s;font-weight:500}
.nav-btn:hover{opacity:1;background:rgba(255,255,255,0.06)}
.nav-btn-active{opacity:1;background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.15)}
.nav-btn-logout{opacity:0.5;margin-left:8px;border-left:1px solid rgba(255,255,255,0.15);padding-left:16px;border-radius:0}
.nav-btn-logout:hover{opacity:1;background:transparent;color:var(--wheat)}
.streak-bar{max-width:1120px;margin:0 auto;padding:10px 32px;display:flex;align-items:center;gap:10px;font-size:12px;background:rgba(0,0,0,0.15);border-top:1px solid rgba(255,255,255,0.06);color:rgba(244,239,230,0.85)}
.streak-label{letter-spacing:0.14em;text-transform:uppercase;opacity:0.55;font-weight:500;font-size:10px}
.streak-value,.streak-today{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--wheat)}
.streak-sep{opacity:0.3}
.tab-panel{display:none;max-width:960px;margin:0 auto;padding:48px 32px 80px}
.tab-panel-active{display:block}
.intro-block{margin-bottom:40px}
.eyebrow{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--moss);margin:0 0 12px;font-weight:600}
.section-title{font-family:var(--font-display);font-weight:400;font-size:44px;line-height:1.05;letter-spacing:-0.02em;margin:0 0 14px;color:var(--ink);font-variation-settings:"opsz" 144}
.section-lede{font-size:16px;color:var(--ink-mute);margin:0;max-width:54ch}
.report-form{display:flex;flex-direction:column;gap:28px}
.group{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 28px 32px;margin:0}
.group legend{font-family:var(--font-display);font-weight:500;font-size:14px;letter-spacing:0.1em;text-transform:uppercase;color:var(--forest);padding:0 10px;margin-left:-10px;background:var(--paper)}
.group-lede{color:var(--ink-mute);font-size:13px;margin:0 0 18px}
.step-hint{font-size:13px;color:var(--moss);margin:18px 0 0;font-style:italic}

/* Progressive reveal animation for step-2 */
.step-2{display:flex;flex-direction:column;gap:28px;animation:slideIn 0.35s ease-out}
@keyframes slideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

.grid{display:grid;gap:18px}.grid-2{grid-template-columns:1fr 1fr}
@media (max-width:640px){.grid-2{grid-template-columns:1fr}}
.field-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media (max-width:640px){.field-row{grid-template-columns:1fr 1fr}.field-row .field-readonly{grid-column:1/-1}}
.field{display:flex;flex-direction:column;gap:7px}
.field-label{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
.field-hint{font-size:12px;color:var(--ink-mute);margin-top:2px}
.field-hint-inline{font-size:10px;font-weight:500;color:var(--ink-mute);letter-spacing:0.04em;text-transform:none;margin-left:4px}
input[type="text"],input[type="number"],input[type="time"],input[type="date"],input[type="password"],select,textarea{width:100%;padding:11px 13px;font-size:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink)}
textarea{resize:vertical;font-family:inherit;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(26,40,24,0.08)}
.hours-output{padding:11px 13px;font-size:14px;font-family:var(--font-display);font-weight:600;border:1px solid var(--line-soft);border-radius:var(--radius);background:var(--cream);color:var(--forest)}
.checkin-row{display:flex;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.gps-status{font-size:13px;color:var(--ink-mute);flex:1;min-width:200px}
.gps-status.ok{color:var(--ok);font-weight:500}.gps-status.err{color:var(--red)}
.btn-secondary{background:var(--cream);border:1px solid var(--line);color:var(--ink);padding:10px 16px;border-radius:var(--radius);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.btn-secondary:hover{background:var(--cream-soft);border-color:var(--forest)}
.btn-ghost{background:transparent;border:1px dashed var(--line);color:var(--ink-soft);padding:10px 16px;border-radius:var(--radius);font-size:13px;font-weight:500;width:100%}
.btn-ghost:hover{border-color:var(--forest);color:var(--forest);background:var(--cream)}
.btn-primary{background:var(--forest);color:var(--cream);border:none;padding:14px 28px;border-radius:var(--radius);font-size:14px;font-weight:600;letter-spacing:0.04em;display:inline-flex;align-items:center;gap:10px}
.btn-primary:hover{background:var(--forest-light)}
.btn-primary:disabled{opacity:0.5;cursor:wait}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:760px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
.kpi-cell{display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--cream);border:1px solid var(--line-soft);border-radius:var(--radius)}
.kpi-cell-wide{grid-column:span 2}
@media (max-width:760px){.kpi-cell-wide{grid-column:1/-1}}
.kpi-label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
.kpi-cell input{background:var(--paper);font-family:var(--font-display);font-size:18px;font-weight:600;padding:8px 10px}
.rel-rows{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.loom-section{margin-top:18px}
.loom-rows{display:flex;flex-direction:column;gap:14px;margin-bottom:12px}
.loom-row{display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--cream);border:1px solid var(--line-soft);border-radius:var(--radius);position:relative}
.loom-row .loom-url-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.loom-row input.loom-url{font-size:13px;padding:9px 10px}
.loom-row textarea.loom-transcript{font-size:13px;padding:9px 10px;resize:vertical;min-height:70px;font-family:var(--font-body);line-height:1.5}
.loom-row .loom-remove{background:transparent;border:1px solid var(--line);color:var(--ink-mute);width:36px;height:36px;border-radius:var(--radius);font-size:18px;line-height:1;flex-shrink:0}
.loom-row .loom-remove:hover{border-color:var(--red);color:var(--red)}
.loom-row .loom-transcript-label{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}
.rel-row{display:grid;grid-template-columns:1.2fr 1fr 0.9fr 1.5fr auto;gap:8px;align-items:start}
@media (max-width:760px){.rel-row{grid-template-columns:1fr 1fr}.rel-row .rel-notes{grid-column:1/-1}.rel-row .rel-remove{grid-column:1/-1;justify-self:end}}
.rel-row input,.rel-row select{font-size:13px;padding:9px 10px}
.rel-remove{background:transparent;border:1px solid var(--line);color:var(--ink-mute);width:36px;height:36px;border-radius:var(--radius);font-size:18px;line-height:1}
.rel-remove:hover{border-color:var(--red);color:var(--red)}
.submit-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px;background:var(--forest);border-radius:var(--radius-lg);color:var(--cream);flex-wrap:wrap}
.submit-copy{display:flex;flex-direction:column;gap:4px}
.submit-copy strong{font-weight:600;font-size:14px}.submit-copy span{font-size:13px;opacity:0.7}
.submit-row .btn-primary{background:var(--wheat);color:var(--forest)}
.submit-row .btn-primary:hover{background:#d6b76e}
.form-msg{padding:14px 18px;border-radius:var(--radius);font-size:14px;font-weight:500;margin:0}
.form-msg.ok{background:rgba(47,107,61,0.1);color:var(--ok);border:1px solid rgba(47,107,61,0.25)}
.form-msg.err{background:rgba(160,51,24,0.08);color:var(--red);border:1px solid rgba(160,51,24,0.2)}
.history-list{display:flex;flex-direction:column;gap:10px}
.history-empty{padding:60px 20px;text-align:center;color:var(--ink-mute);background:var(--cream);border-radius:var(--radius-lg);border:1px dashed var(--line)}
.history-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.history-summary{padding:18px 22px;display:grid;grid-template-columns:140px 1fr auto;gap:20px;align-items:center;cursor:pointer;background:transparent;border:none;width:100%;text-align:left;color:inherit;font-family:inherit;font-size:inherit}
@media (max-width:640px){.history-summary{grid-template-columns:1fr;gap:8px}}
.history-date{font-family:var(--font-display);font-weight:500;font-size:15px}
.history-date small{display:block;font-family:var(--font-body);font-weight:400;font-size:11px;color:var(--ink-mute);letter-spacing:0.08em;text-transform:uppercase;margin-top:3px}
.history-preview{color:var(--ink-soft);font-size:14px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.history-chevron{color:var(--ink-mute);transition:transform 0.2s}
.history-item.expanded .history-chevron{transform:rotate(90deg)}
.history-detail{display:none;padding:0 22px 22px;border-top:1px solid var(--line-soft);padding-top:20px}
.history-item.expanded .history-detail{display:block}
.history-detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
@media (max-width:640px){.history-detail-grid{grid-template-columns:repeat(2,1fr)}}
.history-kpi{padding:10px 12px;background:var(--cream);border-radius:var(--radius-sm);border:1px solid var(--line-soft)}
.history-kpi-label{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-mute);font-weight:600}
.history-kpi-value{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--ink)}
.history-detail h4{font-family:var(--font-display);font-size:13px;letter-spacing:0.08em;text-transform:uppercase;margin:20px 0 8px;color:var(--forest);font-weight:600}
.history-detail p{margin:0 0 10px;color:var(--ink-soft);font-size:14px;white-space:pre-wrap}
.rollup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:760px){.rollup-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.rollup-grid{grid-template-columns:1fr}}
.rollup-card{padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);position:relative;overflow:hidden}
.rollup-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--forest);opacity:0.7}
.rollup-label{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;margin-bottom:10px}
.rollup-value{font-family:var(--font-display);font-weight:500;font-size:36px;line-height:1;color:var(--ink);letter-spacing:-0.02em}
.rollup-value small{font-family:var(--font-body);font-weight:400;font-size:13px;color:var(--ink-mute);margin-left:6px;letter-spacing:0}