/* Waypoint shell styles - the design system (tokens), the auth gate and
   the signed-in frame (sidebar + sheet). app.css styles what renders
   inside the sheet. Restyled 2026-09-13 to the approved "L5" board:
   direction C's structure (floating rounded sidebar, sun-over-hills panel,
   Quicksand, 24px corners, pale ground) in Lisa's Green-blue palette
   (D9ED92 B5E48C 99D98C 76C893 52B69A 34A0A4 168AAD 1A759F 1E6091 184E77).
   Visual only: every id, class and data-* hook the JS and harness read is unchanged. */
:root{
  --ground:#F7FBE9;        /* pale tint of D9ED92: behind everything, the working area */
  --sheet:#F7FBE9;         /* the sheet sits on the ground with no seam */
  --card:#ffffff;
  --panel:#F3F8EC;         /* inner panels inside a card */
  --line:#E3EBE2;          /* hairlines and input borders */
  --line2:#EEF3EA;         /* table rules */
  --ink:#144265;           /* body text: 184E77 pulled toward black (9.98:1 on the ground) */
  --muted:#5C717F;         /* secondary text (4.83:1 on the ground) */
  --faint:#7F8F99;         /* decorative hints only - under AA as body text, so never the sole carrier of meaning */
  --accent:#1A759F;        /* buttons, links, ticks, focus (white on it 5.14:1) */
  --accent-hover:#166387;
  --accent-soft:#EAF7DF;   /* sun tint: the highlight behind the one number that matters, and the current year */
  --sun:#B5E48C;
  --side:#184E77;          /* the sidebar panel */
  --side-panel:#133D5D;    /* the darker sun-over-hills panel inside it */
  --side-text:#DCE6DB;     /* sidebar inactive items (6.84:1 on the panel) */
  --side-foot:#B0C4C5;     /* sidebar foot text (4.82:1 on the panel) */
  --side-line:rgba(255,255,255,.16);
  --hill1:#1E6091; --hill2:#34A0A4;
  --bad:#dd4c2f; --badink:#b3261e; --badbg:#fde7e3;   /* red is for over-capacity only */
  --ok:#1C7346; --okbg:#DDEBE4;
  --warn:#9a5b10; --warnbg:#fbefd9;
  --heat-under:#E6F5EC;    /* gantt load ramp: pale green = under */
  --heat-near:#A4D4D6;     /* teal = near/at */
  --focus:rgba(26,117,159,.22);
  --shadow:0 8px 28px rgba(24,78,119,.08);
  --shadow-deep:0 20px 60px rgba(0,0,0,.22);
  --radius:24px;
  --font:Quicksand,"Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--ground);font-size:14px;font-weight:500;line-height:1.45;-webkit-font-smoothing:antialiased}

.cfg-banner{background:var(--warnbg);color:var(--warn);padding:10px 22px;font-size:14px}
.cfg-banner code{background:#fff;border:1px solid #ecd9b8;border-radius:6px;padding:0 5px}

/* ---- shared controls (the app re-declares .btn for its own surfaces; keep both in step) ---- */
.btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 18px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;line-height:1.3}
.btn:hover{border-color:#C5D4D1;background:#FCFDF7}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.primary:disabled{opacity:.6;cursor:default}
.btn.small{padding:7px 14px;font-size:13px}
.btn.danger{color:var(--badink)}
.btn.danger:hover{border-color:#f0b9ae;background:#fff7f5}
.btn:focus-visible,.link-btn:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- auth gate ---- */
/* the hidden attribute must always win - .gate is display:flex, which otherwise overrides it (found 2026-08-22 by screenshot) */
[hidden]{display:none !important}
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--side);position:relative;overflow:hidden}
/* two soft palette circles behind the card, as on the board's sign-in */
.gate::before{content:'';position:absolute;left:-80px;bottom:-120px;width:380px;height:380px;border-radius:50%;background:var(--hill2);pointer-events:none}
.gate::after{content:'';position:absolute;right:-60px;top:-90px;width:260px;height:260px;border-radius:50%;background:var(--sun);opacity:.9;pointer-events:none}
.login-card{background:var(--card);border-radius:var(--radius);padding:32px 32px 28px 32px;max-width:400px;width:100%;box-shadow:var(--shadow-deep);position:relative;z-index:1}
.login-card h1{margin:0;font-size:18px;font-weight:700;display:flex;align-items:center;gap:11px;line-height:1.2}
/* the mark: a sun disc with a compass needle */
.login-card h1::before{content:'';flex:none;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--sun) 0 1.5px,transparent 2px),radial-gradient(circle at 50% 50%,transparent 0 11px,var(--sun) 11.5px),conic-gradient(from -14deg at 50% 50%,var(--side) 0 28deg,transparent 28deg 180deg,var(--side) 180deg 208deg,transparent 208deg),var(--sun)}
.login-card h2{margin:0 0 14px 0;font-size:22px;font-weight:700;line-height:1.2}
.login-card .tagline{color:var(--muted);margin:14px 0 18px 0;font-size:14px;line-height:1.5}
.login-card label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:6px}
.login-card input[type=email],.login-card input[type=password]{font:inherit;width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px;background:#fff;color:var(--ink)}
.login-card input[type=email]:focus,.login-card input[type=password]:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--focus)}
.login-card .btn.primary{width:100%;padding:13px 16px;font-size:15px;margin-top:4px}
.login-card .btn:not(.primary){display:block;width:100%;padding:12px 16px;margin-top:8px}
.login-card p{font-size:14px;color:var(--ink);margin:0 0 14px 0;line-height:1.5}
.login-card .login-error{background:var(--badbg);color:var(--badink);border-radius:14px;padding:10px 14px;font-size:13.5px;margin:14px 0 0 0}
.login-card .fineprint{color:var(--muted);font-size:12.5px;margin:14px 0 0 0;text-align:center}
.link-btn{display:block;width:100%;background:none;border:0;padding:0;margin:14px 0 0 0;color:var(--accent);font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-align:center;border-radius:6px}
.link-btn:hover{color:var(--accent-hover);text-decoration:underline}
.login-card .login-notice{background:var(--warnbg);color:var(--warn);border-radius:14px;padding:10px 14px;font-size:13.5px;margin:0 0 14px 0}

/* ---- signed-in frame: a floating rounded sidebar on the ground, the sheet to its right ---- */
#appShell{display:flex;min-height:100vh;align-items:stretch;background:var(--ground)}
.side{flex:none;width:236px;margin:16px 0 16px 16px;padding:22px 16px 20px 16px;display:flex;flex-direction:column;gap:6px;color:#fff;background:var(--side);border-radius:28px;position:sticky;top:16px;height:calc(100vh - 32px);overflow:hidden}
/* the one illustration touch: a sun over two soft hills, drawn in CSS so the markup stays untouched */
.side::before{content:'';flex:none;display:block;height:92px;border-radius:18px;margin:0 0 14px 0;background-color:var(--side-panel);
  background-image:
    radial-gradient(110px 44px at 92% 122%,rgba(52,160,164,.9) 99%,transparent 100%),
    radial-gradient(110px 46px at 33% 113%,var(--hill1) 99%,transparent 100%),
    radial-gradient(24px 24px at 70% 43%,var(--sun) 99%,transparent 100%);
  background-repeat:no-repeat}
.mark{display:flex;align-items:center;gap:11px;margin-bottom:22px;padding:0 6px;font-weight:700;font-size:16px;line-height:1.15;color:#fff;letter-spacing:-.01em}
.mark-ring{flex:none;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--sun) 0 1.5px,transparent 2px),radial-gradient(circle at 50% 50%,transparent 0 11px,var(--sun) 11.5px),conic-gradient(from -14deg at 50% 50%,var(--side) 0 28deg,transparent 28deg 180deg,var(--side) 180deg 208deg,transparent 208deg),var(--sun)}
/* 20 Sept 2026 - the Planning Room logo replaces the drawn ring + typed name (sign-in card, sidebar, the print-only header).
   The logo SVGs carry their own clear space (30 of 160 units on every side) and the mark is 100/160 of the logo's height, so a logo
   40px tall is the floor for the brand book's 24px minimum mark: sign-in 64px -> 40px mark; sidebar 41-50px -> 26-31px mark;
   print 14mm -> 8.75mm mark (minimum 8mm). The old .mark-ring and h1::before rules above stay for rollback; nothing uses them now. */
.brand-logo{display:block;height:auto;max-width:100%}
.login-card h1.brand-h1{display:block;line-height:0;margin:-12px 0 -8px -12px}
.login-card h1.brand-h1::before{content:none}
.brand-logo-login{width:260px}
.mark.mark-logo{display:block;padding:0;margin:-4px 0 12px 0;line-height:0}
.brand-logo-side{width:100%}
.brand-logo-print{height:14mm;width:auto;max-width:none;margin:-2.6mm 0 0 -2.6mm}
#tabs{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0}
#tabs button{border:0;background:transparent;color:var(--side-text);font-family:inherit;font-size:14.5px;font-weight:600;text-align:left;padding:11px 14px;border-radius:14px;cursor:pointer;line-height:1.3;display:flex;align-items:center;gap:11px}
#tabs button::before{content:'';flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:var(--tab-icon) center/contain no-repeat;mask:var(--tab-icon) center/contain no-repeat}
#tabs button[data-tab="plan"]{--tab-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M5 4h10l4 4v12H5z'/><path d='M15 4v4h4'/><path d='M8 13h8M8 17h5'/></svg>")}
#tabs button[data-tab="roadmap"]{--tab-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16M4 12h10M4 17h13'/><circle cx='19' cy='12' r='1.6'/></svg>")}
#tabs button[data-tab="people"]{--tab-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.2'/><path d='M3.5 19c0-3 2.5-5 5.5-5s5.5 2 5.5 5'/><circle cx='17' cy='9' r='2.4'/><path d='M15.5 14.4c2.6.2 5 2 5 4.6'/></svg>")}
#tabs button[data-tab="allocate"]{--tab-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 7.5V12l3 2'/></svg>")}
#tabs button[data-tab="matrix"]{--tab-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19V9M10 19V5M16 19v-8M22 19H2'/></svg>")}
#tabs button[data-tab="gantt"]{--tab-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='6' width='9' height='3' rx='1.5'/><rect x='8' y='11' width='10' height='3' rx='1.5'/><rect x='6' y='16' width='6' height='3' rx='1.5'/></svg>")}
#tabs button[data-tab="sufficiency"]{--tab-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M8.5 12.5l2.5 2.5 4.5-5'/></svg>")}
#tabs button[data-tab="settings"]{--tab-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21M5.6 5.6l1.8 1.8M16.6 16.6l1.8 1.8M5.6 18.4l1.8-1.8M16.6 7.4l1.8-1.8'/></svg>")}
#tabs button:hover{background:rgba(255,255,255,.08);color:#fff}
#tabs button.active{background:var(--ground);color:var(--side);font-weight:700}
#tabs button.active:hover{background:var(--ground)}
#tabs button:focus-visible{outline:2px solid #fff;outline-offset:2px}
#tabs button[data-tab="settings"]{margin-top:auto}
.side-foot{padding:16px 14px 0 14px;font-size:12.5px;color:var(--side-foot);line-height:1.5;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere;border-top:1px solid var(--side-line);margin-top:12px}
.side-plan{font-weight:700;color:#fff}
.whoami{font-size:12.5px;color:var(--side-foot)}

.sheet{flex:1;min-width:0;background:transparent;border-radius:0;display:flex;flex-direction:column;position:relative;z-index:0}
/* the two soft circles at the top right of the sheet (fixed, so they never add scroll) */
.sheet::before{content:'';position:fixed;right:-90px;top:-110px;width:360px;height:360px;border-radius:50%;background:var(--sun);opacity:.28;pointer-events:none;z-index:-1}
.sheet::after{content:'';position:fixed;right:120px;top:-200px;width:300px;height:300px;border-radius:50%;background:var(--accent);opacity:.14;pointer-events:none;z-index:-1}
/* the bar holds Plan + select + New/Rename/Copy/Delete + (admin) Edit this plan + status + Sign out on ONE row at 1300px;
   tighter gaps and a 260px select keep it there (13 Sept: Copy + the Edit toggle pushed Sign out onto a second row) */
.plan-bar{display:flex;align-items:center;gap:8px;row-gap:8px;flex-wrap:wrap;background:rgba(247,251,233,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:18px 28px 10px 28px;position:sticky;top:0;z-index:30}
.plan-bar-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700}
.plan-bar select{font:inherit;font-size:13.5px;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:8px 30px 8px 14px;background:#fff;max-width:260px;color:var(--ink);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235C717F' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.plan-bar .btn.small{padding:7px 12px;white-space:nowrap}
#editPlanWrap{white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.plan-bar-spacer{flex:1 1 0;min-width:0}
.save-state{font-size:12.5px;color:var(--ok);background:var(--okbg);padding:5px 11px;border-radius:999px;font-weight:700;margin-left:4px}
.save-state:empty{display:none}
.save-state.saving{color:var(--warn);background:var(--warnbg)}
.save-state.error{color:var(--badink);background:var(--badbg);font-weight:700}
.mount-placeholder{color:var(--muted);padding:40px;text-align:center}

/* laptop-first; at 1024 the sidebar narrows and the sheet tightens */
@media (max-width:1100px){
  .side{width:188px;margin:12px 0 12px 12px;padding:16px 10px 14px 10px;top:12px;height:calc(100vh - 24px)}
  .side::before{height:72px;margin-bottom:10px}
  .mark{font-size:14px;margin-bottom:16px}
  #tabs button{padding:9px 12px;font-size:13.5px}
  .side-foot{padding:10px 12px 0 12px}
  .plan-bar{padding:16px 22px 8px 22px}
}

@media print{
  body{background:#fff;color:#000}
  .side,.plan-bar,#cfgBanner,.sheet::before,.sheet::after{display:none !important}
  #appShell{display:block;background:#fff}
  .sheet{background:#fff;border-radius:0}
}