/* ==========================================================================
   Themes. Each person picks one from the Theme menu in the top bar; it's
   saved to their account (and remembered in this browser so the page opens
   in it straight away). Every colour in this file comes from these tokens,
   so a new theme is just one more block below.
   ========================================================================== */
:root{
  /* Dark (default) */
  --bg:#0b0e14;
  --bg-elev:#12161f;
  --bg-elev-2:#171c27;
  --border:#232937;
  --border-soft:#1a1f2b;
  --border-strong:#39415a;
  --text:#e8ebf1;
  --text-dim:#9aa3b5;
  --text-faint:#5c6478;
  --accent:#5b8def;
  --accent-2:#8b6bf0;
  --highlight:#22d3ee;
  --on-accent:#ffffff;
  --on-green:#0b0e14;
  --green:#3ecf8e;
  --amber:#e8a94a;
  --red:#e5646b;
  --overlay:rgba(5,7,11,.7);
  --shadow:rgba(0,0,0,.45);
  --check-bg:#dfe4ee;
  --check-border:#f4f6fa;
  --check-hover:#ffffff;
  --check-ring:rgba(255,255,255,.14);
  --soft:14%;
  --radius:14px;
  --page-bg:none;
  color-scheme:dark;

  /* worked out from the colours above, so themes don't repeat them */
  --accent-soft:color-mix(in srgb,var(--accent) var(--soft),transparent);
  --green-soft:color-mix(in srgb,var(--green) var(--soft),transparent);
  --amber-soft:color-mix(in srgb,var(--amber) var(--soft),transparent);
  --red-soft:color-mix(in srgb,var(--red) var(--soft),transparent);
  --topbar-bg:color-mix(in srgb,var(--bg) 92%,transparent);
}

:root[data-theme="light"]{
  --bg:#f3f5f9;
  --bg-elev:#ffffff;
  --bg-elev-2:#eef1f6;
  --border:#d6dce6;
  --border-soft:#e4e8ef;
  --border-strong:#aeb8c9;
  --text:#141922;
  --text-dim:#465064;
  --text-faint:#687285;
  --accent:#2c66d8;
  --accent-2:#7a4bd6;
  --highlight:#0a8fb0;
  --on-accent:#ffffff;
  --on-green:#ffffff;
  --green:#148a57;
  --amber:#a8630a;
  --red:#cc3340;
  --overlay:rgba(20,25,34,.45);
  --shadow:rgba(20,25,34,.16);
  --check-bg:#ffffff;
  --check-border:#8f9aae;
  --check-hover:#eef3ff;
  --check-ring:color-mix(in srgb,var(--accent) 18%,transparent);
  --soft:11%;
  color-scheme:light;
}

:root[data-theme="contrast"]{
  --bg:#000000;
  --bg-elev:#000000;
  --bg-elev-2:#121212;
  --border:#ffffff;
  --border-soft:#a0a0a0;
  --border-strong:#ffffff;
  --text:#ffffff;
  --text-dim:#f2f2f2;
  --text-faint:#d6d6d6;
  --accent:#ffd60a;
  --accent-2:#ffd60a;
  --highlight:#00e5ff;
  --on-accent:#000000;
  --on-green:#000000;
  --green:#3dff8b;
  --amber:#ffb020;
  --red:#ff6b6b;
  --overlay:rgba(0,0,0,.88);
  --shadow:rgba(0,0,0,.9);
  --check-bg:#000000;
  --check-border:#ffffff;
  --check-hover:#262626;
  --check-ring:rgba(255,214,10,.45);
  --soft:22%;
  color-scheme:dark;
}
:root[data-theme="contrast"] a{text-decoration:underline;}
:root[data-theme="contrast"] :focus-visible{outline:3px solid var(--accent) !important;outline-offset:2px;}
:root[data-theme="contrast"] .card,
:root[data-theme="contrast"] .modal,
:root[data-theme="contrast"] .stat-tile{border-width:2px;}

/* Colorful: bright and playful, light background */
:root[data-theme="colorful"]{
  --bg:#fdf7ff;
  --bg-elev:#ffffff;
  --bg-elev-2:#f7edff;
  --border:#ead6f8;
  --border-soft:#f2e6fb;
  --border-strong:#c7a1ea;
  --text:#24123a;
  --text-dim:#56427a;
  --text-faint:#7a6596;
  --accent:#d6246f;
  --accent-2:#ff8a00;
  --highlight:#0b94d6;
  --on-accent:#ffffff;
  --on-green:#ffffff;
  --green:#0c9470;
  --amber:#c46a00;
  --red:#d81e46;
  --overlay:rgba(36,18,58,.4);
  --shadow:rgba(110,40,160,.18);
  --check-bg:#ffffff;
  --check-border:#b48ad8;
  --check-hover:#fff0f8;
  --check-ring:color-mix(in srgb,var(--accent) 20%,transparent);
  --soft:13%;
  --page-bg:
    radial-gradient(900px 500px at 0% 0%,rgba(255,138,0,.13),transparent 60%),
    radial-gradient(800px 600px at 100% 10%,rgba(214,36,111,.12),transparent 60%),
    radial-gradient(900px 700px at 50% 110%,rgba(11,148,214,.12),transparent 60%);
  color-scheme:light;
}
:root[data-theme="colorful"] .topbar{
  border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,#ff8a00,#d6246f,#8b3dff,#0b94d6,#0c9470) 1;
}
:root[data-theme="colorful"] .new-project-btn,
:root[data-theme="colorful"] .modal-save{background:linear-gradient(135deg,var(--accent),var(--accent-2));}

/* Synthwave: neon pink and cyan on deep purple */
:root[data-theme="synthwave"]{
  --bg:#120724;
  --bg-elev:#1b0c34;
  --bg-elev-2:#241143;
  --border:#3b2066;
  --border-soft:#2a1650;
  --border-strong:#6a3fa8;
  --text:#f8edff;
  --text-dim:#c9aeea;
  --text-faint:#977bbd;
  --accent:#ff3cbd;
  --accent-2:#00e5ff;
  --highlight:#00e5ff;
  --on-accent:#1a0326;
  --on-green:#0b0420;
  --green:#2dffb3;
  --amber:#ffc548;
  --red:#ff5277;
  --overlay:rgba(10,2,22,.75);
  --shadow:rgba(255,60,189,.18);
  --check-bg:#e9dcff;
  --check-border:#f8edff;
  --check-hover:#ffffff;
  --check-ring:rgba(255,60,189,.3);
  --soft:16%;
  --page-bg:
    radial-gradient(1000px 520px at 50% -10%,rgba(255,60,189,.20),transparent 65%),
    radial-gradient(800px 500px at 100% 100%,rgba(0,229,255,.10),transparent 60%);
  color-scheme:dark;
}
:root[data-theme="synthwave"] .new-project-btn,
:root[data-theme="synthwave"] .modal-save{box-shadow:0 0 18px color-mix(in srgb,var(--accent) 55%,transparent);}
:root[data-theme="synthwave"] .topbar{box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 45%,transparent),0 6px 24px color-mix(in srgb,var(--accent) 12%,transparent);}
:root[data-theme="synthwave"] h1{text-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent);}

/* Golden Hour: warm dark, matched to the gold in the logo */
:root[data-theme="golden"]{
  --bg:#15110c;
  --bg-elev:#1d1811;
  --bg-elev-2:#262017;
  --border:#3a3124;
  --border-soft:#2a2319;
  --border-strong:#5c4e37;
  --text:#f4ebda;
  --text-dim:#c6b598;
  --text-faint:#918167;
  --accent:#e2a72a;
  --accent-2:#e0662a;
  --highlight:#f5c242;
  --on-accent:#1a1206;
  --on-green:#10170b;
  --green:#97d46f;
  --amber:#ff9d47;
  --red:#f0705f;
  --overlay:rgba(10,7,3,.72);
  --shadow:rgba(0,0,0,.5);
  --check-bg:#efe4cf;
  --check-border:#f8f0e0;
  --check-hover:#fffaf0;
  --check-ring:rgba(226,167,42,.25);
  --soft:15%;
  --page-bg:radial-gradient(1100px 600px at 85% -10%,rgba(226,167,42,.10),transparent 60%);
  color-scheme:dark;
}

body{background-image:var(--page-bg);background-attachment:fixed;}

/* theme menu in the top bar */
.theme-pick{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-faint);}
.theme-pick select{
  background:var(--bg-elev-2);border:1px solid var(--border);color:var(--text);border-radius:7px;
  padding:5px 8px;font-size:12.5px;cursor:pointer;
}
.theme-pick select:hover{border-color:var(--border-strong);}
@media (max-width: 600px){ .theme-pick .theme-label{display:none;} .theme-pick select{max-width:104px;padding:5px 4px;} }


*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background-color:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
button, input, select, textarea{font-family:inherit;}
button{cursor:pointer;}
a{color:var(--accent);}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;border-bottom:1px solid var(--border-soft);
  position:sticky;top:0;background:var(--topbar-bg);backdrop-filter:blur(10px);z-index:50;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand .mark{
  width:28px;height:28px;border-radius:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:var(--on-accent);
}
.brand .brand-logo{height:26px;width:auto;display:block;}
.brand .name{font-weight:700;font-size:15px;}
.ai-highlight{color:var(--highlight);}
.brand-sub{color:var(--text-faint);font-weight:500;margin-left:4px;}
.test-pill{
  font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  color:var(--amber);background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 30%,transparent);
  padding:4px 10px;border-radius:999px;
}
.topbar-right{display:flex;align-items:center;gap:12px;}
.logout-btn{background:none;border:1px solid var(--border);color:var(--text-dim);padding:6px 12px;border-radius:8px;font-size:12.5px;}
.logout-btn:hover{color:var(--text);border-color:var(--border-strong);}
.acting-as{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-faint);}
.acting-as select{
  background:var(--bg-elev-2);border:1px solid var(--border);color:var(--text);border-radius:7px;
  padding:5px 8px;font-size:12.5px;
}

/* ---------- assets ---------- */
.asset-group{margin-bottom:14px;}
.asset-group:last-child{margin-bottom:0;}
.asset-row{
  display:flex;align-items:center;gap:10px;padding:10px;border-radius:9px;border:1px solid var(--border-soft);
  cursor:pointer;transition:background .12s;
}
.asset-row:hover{background:var(--bg-elev-2);}
.asset-row.open{background:var(--bg-elev-2);border-color:var(--border-strong);}
.asset-icon{
  width:30px;height:30px;border-radius:7px;background:var(--bg-elev-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;
}
.asset-info{flex:1;min-width:0;}
.asset-name{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.asset-uploader{font-size:10.5px;color:var(--text-faint);}
.version-pill{
  font-size:10.5px;font-weight:700;color:var(--text-dim);background:var(--bg-elev-2);border:1px solid var(--border);
  padding:3px 8px;border-radius:6px;flex-shrink:0;
}
.asset-status-pill{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;flex-shrink:0;}
.asset-status-pill.pending{background:var(--amber-soft);color:var(--amber);}
.asset-status-pill.approved{background:var(--green-soft);color:var(--green);}
.asset-status-pill.rejected{background:var(--red-soft);color:var(--red);}

.asset-detail{
  border:1px solid var(--border-soft);border-top:none;border-radius:0 0 9px 9px;margin-top:-1px;margin-bottom:8px;padding:14px;
  background:var(--bg-elev-2);
}
.asset-preview-frame{border:1px solid var(--border);border-radius:9px;overflow:hidden;margin-bottom:8px;background:var(--bg);}
.asset-preview-frame iframe{width:100%;height:220px;border:none;display:block;}
.drive-open-link{display:inline-block;font-size:12px;font-weight:600;color:var(--accent);margin-bottom:12px;text-decoration:none;}
.drive-open-link:hover{text-decoration:underline;}

.approval-row{display:flex;gap:10px;margin-bottom:12px;}
.approve-btn,.reject-btn{
  flex:1;padding:9px;border-radius:9px;font-weight:700;font-size:12.5px;border:1px solid transparent;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.approve-btn{background:var(--green-soft);color:var(--green);border-color:color-mix(in srgb,var(--green) 35%,transparent);}
.approve-btn.active,.approve-btn:hover{background:color-mix(in srgb,var(--green) 22%,transparent);}
.reject-btn{background:var(--red-soft);color:var(--red);border-color:color-mix(in srgb,var(--red) 35%,transparent);}
.reject-btn.active,.reject-btn:hover{background:color-mix(in srgb,var(--red) 22%,transparent);}

.comment-thread{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.comment{font-size:12px;background:var(--bg-elev);border:1px solid var(--border-soft);border-radius:8px;padding:8px 10px;}
.comment b{color:var(--text);}
.comment .meta{color:var(--text-faint);font-size:10.5px;margin-top:2px;}
.comment-add-row{display:flex;gap:8px;}
.comment-add-row textarea{
  flex:1;min-height:38px;background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;color:var(--text);
  font-family:inherit;font-size:12.5px;padding:8px 10px;resize:vertical;
}
.comment-add-row button{
  background:var(--bg-elev);border:1px solid var(--border);color:var(--text-dim);border-radius:8px;padding:0 14px;font-size:12.5px;font-weight:600;
}
.comment-add-row button:hover{color:var(--text);border-color:var(--border-strong);}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-card{
  width:100%;max-width:360px;background:var(--bg-elev);border:1px solid var(--border);
  border-radius:var(--radius);padding:32px;text-align:center;
}
.login-card .mark{
  width:44px;height:44px;border-radius:12px;margin:0 auto 16px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;color:var(--on-accent);
}
.login-card .brand-logo-lg{height:64px;width:auto;display:block;margin:0 auto 16px;}
.login-card h1{font-size:17px;margin:0 0 4px;}
.login-card p{font-size:13px;color:var(--text-dim);margin:0 0 20px;}
.login-card input{
  width:100%;padding:11px 13px;border-radius:9px;border:1px solid var(--border);
  background:var(--bg-elev-2);color:var(--text);font-size:14px;margin-bottom:12px;
}
.login-card button{
  width:100%;padding:11px;border-radius:9px;border:none;background:var(--accent);color:var(--on-accent);
  font-weight:700;font-size:14px;
}
.login-error{color:var(--red);font-size:12.5px;margin-top:10px;min-height:16px;}

/* ---------- views ---------- */
.view{display:none;}
.view.active{display:block;}

/* ---------- HOME ---------- */
.home-header{
  padding:32px 28px 18px;max-width:1240px;margin:0 auto;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.home-header h1{margin:0 0 4px;font-size:22px;font-weight:700;}
.home-header p{margin:0;color:var(--text-dim);font-size:13.5px;}
.new-project-btn{
  background:var(--accent);color:var(--on-accent);border:none;padding:10px 16px;border-radius:9px;
  font-weight:700;font-size:13px;white-space:nowrap;
}
.new-project-btn:hover{filter:brightness(1.08);}

.grid{
  max-width:1240px;margin:0 auto;padding:0 28px 60px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;
}
.empty-state{
  max-width:1240px;margin:0 auto;padding:40px 28px;color:var(--text-faint);font-size:13.5px;text-align:center;
}

.card{
  background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;cursor:pointer;transition:border-color .15s, transform .15s;
  display:flex;flex-direction:column;gap:12px;
}
.card:hover{border-color:var(--border-strong);transform:translateY(-1px);}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.card-title{font-size:14.5px;font-weight:600;line-height:1.3;}
.card-sub{font-size:11.5px;color:var(--text-faint);margin-top:2px;}
.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px;}
.status-dot.on-track{background:var(--green);box-shadow:0 0 0 3px var(--green-soft);}
.status-dot.at-risk{background:var(--amber);box-shadow:0 0 0 3px var(--amber-soft);}
.status-dot.blocked{background:var(--red);box-shadow:0 0 0 3px var(--red-soft);}
.status-dot.delivered{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}

.mini-progress{display:flex;gap:3px;}
.mini-seg{height:4px;flex:1;border-radius:2px;background:var(--border);}
.mini-seg.done{background:var(--accent);}
.mini-seg.current.on-track{background:var(--green);}
.mini-seg.current.at-risk{background:var(--amber);}
.mini-seg.current.blocked{background:var(--red);}

.card-bottom{display:flex;align-items:center;justify-content:space-between;}
.stage-label{font-size:11px;color:var(--text-dim);font-weight:500;}
.card-meta{display:flex;align-items:center;gap:6px;}
.deadline-chip{
  font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:6px;color:var(--text-dim);background:var(--bg-elev-2);
  border:1px solid var(--border);
}
.deadline-chip.soon{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 35%,transparent);}
.mini-avatar{
  width:22px;height:22px;border-radius:50%;background:var(--bg-elev-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--text-dim);
}

/* ---------- DETAIL ---------- */
.detail-topbar{
  padding:14px 28px;border-bottom:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:1240px;margin:0 auto;
}
.back-btn{
  display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--border);
  color:var(--text-dim);padding:7px 12px;border-radius:9px;font-size:13px;font-weight:500;
}
.back-btn:hover{color:var(--text);border-color:var(--border-strong);}
.detail-actions{display:flex;gap:8px;}
.icon-btn{
  background:none;border:1px solid var(--border);color:var(--text-dim);padding:7px 12px;border-radius:9px;font-size:12.5px;font-weight:600;
}
.icon-btn:hover{color:var(--text);border-color:var(--border-strong);}
.icon-btn.danger:hover{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent);}
.icon-btn.archive-btn{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 35%,transparent);}
.icon-btn.archive-btn:hover{background:var(--amber-soft);border-color:color-mix(in srgb,var(--amber) 50%,transparent);color:var(--amber);}

.detail-head{max-width:1240px;margin:0 auto;padding:26px 28px 0;}
.detail-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.detail-title{font-size:24px;font-weight:800;margin:0 0 6px;}
.detail-sub{color:var(--text-dim);font-size:13.5px;}
.status-banner{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.3px;
  flex-shrink:0;
}
.status-banner.on-track{background:var(--green-soft);color:var(--green);}
.status-banner.at-risk{background:var(--amber-soft);color:var(--amber);}
.status-banner.blocked{background:var(--red-soft);color:var(--red);}
.status-banner.delivered{background:var(--accent-soft);color:var(--accent);}
.status-banner .dot{width:7px;height:7px;border-radius:50%;background:currentColor;}

.meta-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.meta-chip{
  font-size:12px;color:var(--text-dim);background:var(--bg-elev);border:1px solid var(--border);
  padding:6px 11px;border-radius:8px;display:flex;align-items:center;gap:6px;
}
.meta-chip b{color:var(--text);font-weight:600;}
.edit-project-btn{background:none;border:none;color:var(--text-faint);font-size:11.5px;text-decoration:underline;padding:0;}

/* progress rail */
.rail-wrap{max-width:1240px;margin:0 auto;padding:26px 28px 8px;}
.rail{position:relative;display:flex;justify-content:space-between;}
.rail::before{content:"";position:absolute;top:13px;left:20px;right:20px;height:2px;background:var(--border);z-index:0;}
.rail-fill{position:absolute;top:13px;left:20px;height:2px;background:var(--accent);z-index:1;transition:width .3s;}
.rail-stop{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;width:100px;}
.rail-node{
  width:26px;height:26px;border-radius:50%;background:var(--bg-elev);border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text-faint);
}
.rail-node.done{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.rail-node.current{border-color:var(--accent);color:var(--accent);background:var(--bg);box-shadow:0 0 0 4px var(--accent-soft);}
.rail-node.current.blocked{border-color:var(--red);color:var(--red);box-shadow:0 0 0 4px var(--red-soft);}
.rail-label{font-size:11px;text-align:center;color:var(--text-faint);font-weight:500;line-height:1.25;}
.rail-label.current{color:var(--text);font-weight:700;}
.rail-label.done{color:var(--text-dim);}

/* content */
.detail-body{max-width:1240px;margin:0 auto;padding:30px 28px 70px;}
.panel{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:20px;}
.panel + .panel{margin-top:18px;}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.panel-title{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:8px;}
.panel-title .n{color:var(--text-faint);font-weight:500;}
.outstanding-badge{font-size:11px;font-weight:700;color:var(--red);background:var(--red-soft);padding:4px 10px;border-radius:999px;}
.outstanding-badge.clear{color:var(--green);background:var(--green-soft);}

.checklist{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;}
.check-item{display:flex;align-items:center;gap:11px;padding:9px 4px;border-bottom:1px solid var(--border-soft);}
.check-item:last-child{border-bottom:none;}
.box{
  width:18px;height:18px;border-radius:5px;border:1.5px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;background:none;padding:0;
}
.box.checked{background:var(--green);border-color:var(--green);color:var(--on-green);font-size:12px;font-weight:900;}
.check-label{font-size:13px;color:var(--text-dim);flex:1;}
.check-item.checked .check-label{color:var(--text);text-decoration:line-through;text-decoration-color:var(--border);}
.row-remove{background:none;border:none;color:var(--text-faint);font-size:15px;padding:2px 6px;}
.row-remove:hover{color:var(--red);}

.clear-gate-btn{
  margin-top:10px;width:100%;padding:11px;border-radius:9px;border:1px solid color-mix(in srgb,var(--green) 35%,transparent);
  background:var(--green-soft);color:var(--green);font-weight:700;font-size:13px;
}
.clear-gate-btn:disabled{opacity:.4;cursor:not-allowed;}
.clear-gate-btn:not(:disabled):hover{background:color-mix(in srgb,var(--green) 22%,transparent);}

.add-row{display:flex;gap:8px;margin-top:4px;}
.add-row input, .add-row select{
  background:var(--bg-elev-2);border:1px solid var(--border);border-radius:8px;color:var(--text);
  font-size:12.5px;padding:8px 10px;
}
.add-row input{flex:1;}
.add-row button{
  background:var(--bg-elev-2);border:1px solid var(--border);color:var(--text-dim);border-radius:8px;
  padding:8px 14px;font-size:12.5px;font-weight:600;
}
.add-row button:hover{color:var(--text);border-color:var(--border-strong);}

table.deps{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:12px;}
table.deps th{
  text-align:left;color:var(--text-faint);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.3px;
  padding:0 8px 8px 4px;border-bottom:1px solid var(--border);
}
table.deps td{padding:8px 8px 8px 4px;border-bottom:1px solid var(--border-soft);color:var(--text-dim);}
table.deps tr:last-child td{border-bottom:none;}
table.deps td.item{color:var(--text);font-weight:500;}
table.deps select{background:var(--bg-elev-2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:4px 8px;font-size:11.5px;}
.dep-status-select.waiting{color:var(--red);}
.dep-status-select.progress{color:var(--amber);}
.dep-status-select.done{color:var(--green);}

.notes-box textarea{
  width:100%;min-height:80px;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:9px;
  color:var(--text);font-family:inherit;font-size:13px;padding:10px 12px;resize:none;overflow:hidden;
}
.save-hint{font-size:11px;color:var(--text-faint);margin-top:6px;min-height:14px;}

.history-list{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-dim);}
.history-row{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;padding:4px 0;border-bottom:1px solid var(--border-soft);}
.history-row:last-child{border-bottom:none;}
.history-gate{font-size:10px;font-weight:700;color:var(--text-faint);background:var(--bg-elev-2);border:1px solid var(--border);border-radius:6px;padding:1px 6px;}
.history-date{color:var(--text-faint);font-size:11px;margin-left:auto;}

/* ---------- archived cards ---------- */
.card.archived{opacity:.75;}
.archived-pill{
  font-size:10.5px;font-weight:700;color:var(--text-faint);background:var(--bg-elev-2);border:1px solid var(--border);
  padding:3px 9px;border-radius:999px;flex-shrink:0;
}
.restore-btn{
  margin-top:2px;background:none;border:1px solid var(--border);color:var(--text-dim);padding:8px;border-radius:8px;
  font-size:12px;font-weight:600;
}
.restore-btn:hover{color:var(--text);border-color:var(--border-strong);}

/* ---------- archive & report modal ---------- */
.report-ready{
  display:flex;align-items:center;gap:12px;background:var(--green-soft);border:1px solid color-mix(in srgb,var(--green) 30%,transparent);
  border-radius:10px;padding:12px 14px;margin-bottom:14px;
}
.report-ready-icon{
  width:26px;height:26px;border-radius:50%;background:var(--green);color:var(--on-green);
  display:flex;align-items:center;justify-content:center;font-weight:900;flex-shrink:0;font-size:13px;
}
.report-ready-title{font-size:13px;font-weight:700;color:var(--green);}
.report-ready-sub{font-size:11.5px;color:var(--text-dim);}
.archive-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;}

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:var(--overlay);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;
}
.modal-overlay.active{display:flex;}
.modal{
  width:100%;max-width:420px;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;max-height:90vh;overflow-y:auto;
}
.modal h2{margin:0 0 16px;font-size:16px;}
.field{margin-bottom:12px;}
.field label{display:block;font-size:11.5px;color:var(--text-faint);margin-bottom:5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;}
.field input, .field select, .field textarea{
  width:100%;padding:9px 11px;border-radius:8px;border:1px solid var(--border);background:var(--bg-elev-2);
  color:var(--text);font-size:13.5px;
}
.field-row{display:flex;gap:10px;}
.field-row .field{flex:1;}
.modal-actions{display:flex;gap:10px;margin-top:18px;}
.modal-actions button{flex:1;padding:10px;border-radius:9px;font-weight:700;font-size:13px;border:1px solid transparent;}
.modal-cancel{background:none;border-color:var(--border);color:var(--text-dim);}
.modal-cancel:hover{color:var(--text);border-color:var(--border-strong);}
.modal-save{background:var(--accent);color:var(--on-accent);}
.modal-save:hover{filter:brightness(1.08);}
.modal-error{color:var(--red);font-size:12px;margin-top:8px;min-height:14px;}

.asset-choice-btn{
  display:block;width:100%;text-align:left;padding:13px 14px;margin-bottom:8px;border-radius:10px;
  border:1px solid var(--border);background:var(--bg-elev-2);color:var(--text);font-size:13.5px;font-weight:600;
}
.asset-choice-btn:hover{border-color:var(--accent);background:var(--bg-elev-2);color:var(--text);}

/* ---------- settings: project types ---------- */
.settings-body{max-width:1240px;margin:0 auto;padding:24px 28px 70px;}
.settings-header{padding:0 0 18px;max-width:none;}
.settings-error{
  display:none;margin-bottom:16px;padding:11px 14px;border-radius:10px;font-size:13px;
  color:var(--red);background:var(--red-soft);border:1px solid color-mix(in srgb,var(--red) 35%,transparent);
}
.settings-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;align-items:start;}
.settings-layout > section .panel + .panel{margin-top:18px;}
.s-type-list{padding:10px;position:sticky;top:78px;}
.s-type-row{
  display:block;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:10px;
  padding:10px 12px;color:var(--text);margin-bottom:2px;
}
.s-type-row:hover{background:var(--bg-elev-2);}
.s-type-row.selected{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,transparent);}
.s-type-row.retired .s-type-name{color:var(--text-dim);}
.s-type-name{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.s-type-meta{font-size:11.5px;color:var(--text-faint);margin-top:3px;}
.s-badge{font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:2px 7px;border-radius:999px;}
.s-badge.accent{color:var(--accent);background:var(--accent-soft);}
.s-badge.amber{color:var(--amber);background:var(--amber-soft);}
.s-section-label{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-faint);padding:4px 12px 6px;}
.s-new-type{border-top:1px solid var(--border-soft);margin-top:10px;padding:12px 2px 2px;display:flex;flex-direction:column;gap:8px;}
.s-new-type .s-section-label{padding:0 0 2px;}
.s-new-type input, .s-new-type select{
  width:100%;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:8px;color:var(--text);
  font-size:12.5px;padding:8px 10px;
}
.s-new-type .new-project-btn{width:100%;}

.s-editor-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.s-name-wrap{flex:1;min-width:220px;}
.s-type-actions{display:flex;gap:8px;flex-wrap:wrap;}
.icon-btn:disabled{opacity:.4;cursor:default;}
.icon-btn:disabled:hover{color:var(--text-dim);border-color:var(--border);}
.s-inline{
  background:transparent;border:1px solid transparent;border-radius:7px;color:var(--text);
  font-size:13px;padding:6px 8px;min-width:0;
}
.s-inline:hover:not(:disabled){border-color:var(--border);}
.s-inline:focus{outline:none;border-color:var(--accent);background:var(--bg-elev-2);}
.s-type-title{font-size:19px;font-weight:700;width:100%;margin-left:-8px;}
.s-flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px;}
.s-flow-step{font-size:12px;color:var(--text-dim);background:var(--bg-elev-2);border:1px solid var(--border-soft);padding:4px 10px;border-radius:999px;}
.s-flow-step b{color:var(--text-faint);margin-right:3px;}
.s-flow-step.done{color:var(--green);background:var(--green-soft);border-color:transparent;}
.s-flow-arrow{color:var(--text-faint);font-size:12px;}

.s-gate{border:1px solid var(--border-soft);border-radius:10px;background:var(--bg-elev-2);}
.s-gate + .s-gate{margin-top:8px;}
.s-gate.open{border-color:var(--border);}
.s-gate-row{display:flex;align-items:center;gap:6px;padding:7px 8px;}
.s-gate-num{
  width:24px;height:24px;flex:none;border-radius:50%;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text-dim);
}
.s-gate-label{flex:1;font-weight:600;}
.s-here{font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:3px 9px;border-radius:999px;white-space:nowrap;cursor:default;}
.s-toggle{background:none;border:none;color:var(--text-dim);font-size:12px;font-weight:600;padding:4px 8px;white-space:nowrap;}
.s-toggle:hover{color:var(--text);}
.s-mini{background:none;border:1px solid transparent;color:var(--text-faint);border-radius:6px;font-size:13px;padding:2px 7px;}
.s-mini:hover:not(:disabled){color:var(--text);border-color:var(--border);}
.s-mini:disabled{opacity:.3;cursor:default;}
.s-checklist{border-top:1px solid var(--border-soft);padding:8px 10px 10px 40px;}
.s-item{display:flex;align-items:center;gap:4px;}
.s-item .s-inline{flex:1;font-size:12.5px;}
.s-empty{color:var(--text-faint);font-size:12.5px;padding:4px 0 8px;}
.s-hint{margin-top:14px;font-size:12px;line-height:1.55;color:var(--text-faint);}

@media (max-width: 820px){
  .settings-layout{grid-template-columns:1fr;}
  .s-type-list{position:static;}
  .settings-body{padding:18px 16px 60px;}
  .s-gate-row{flex-wrap:wrap;}
  .s-gate-label{flex-basis:calc(100% - 40px);}
  .s-checklist{padding-left:12px;}
}

@media (max-width: 600px){
  .topbar{padding:12px 14px;gap:8px;}
  .topbar .brand .name{display:none;}
  .topbar-right{gap:6px;}
  .me-chip .me-name{display:none;}         /* keep just the avatar + badge on phones */
  .logout-btn{padding:6px 9px;}
}

/* ---------- signed-in user, roles, sign-in ---------- */
body:not(.is-admin) .admin-only{display:none !important;}
.me-chip{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-dim);}
.me-chip img, .me-chip .me-initials{
  width:26px;height:26px;border-radius:50%;flex:none;object-fit:cover;
  display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;
  background:var(--bg-elev-2);border:1px solid var(--border);color:var(--text-dim);
}
.me-chip .me-name{font-weight:600;color:var(--text);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gsi-wrap{display:flex;justify-content:center;min-height:44px;}
.login-status{color:var(--text-dim);font-size:12.5px;margin-top:10px;min-height:16px;}

.s-tabs{display:flex;gap:4px;margin-top:10px;}
.s-tab{background:none;border:1px solid transparent;color:var(--text-dim);padding:6px 12px;border-radius:8px;font-size:13px;font-weight:600;}
.s-tab:hover{color:var(--text);}
.s-tab.active{background:var(--bg-elev-2);border-color:var(--border);color:var(--text);}
#s-team-panel .panel + .panel{margin-top:18px;}
.t-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border-soft);}
.t-row:last-child{border-bottom:none;}
.t-row.inactive{opacity:.55;}
.t-avatar{
  width:32px;height:32px;border-radius:50%;flex:none;overflow:hidden;background:var(--bg-elev-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text-dim);
}
.t-avatar img{width:100%;height:100%;object-fit:cover;}
.t-main{flex:1;min-width:0;}
.t-name{font-weight:600;font-size:13.5px;margin-left:-8px;width:100%;max-width:320px;}
.t-role{background:var(--bg-elev-2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:7px 9px;font-size:12.5px;}
.t-role:disabled{opacity:.6;}
.t-spacer{width:122px;flex:none;}
.t-add input[type=email]{flex:2;}
.t-add input[type=text]{flex:1.4;}
@media (max-width: 700px){
  .t-row{flex-wrap:wrap;}
  .t-main{flex-basis:calc(100% - 50px);}
  .t-spacer{display:none;}
  .t-add{flex-wrap:wrap;}
  .t-add input{flex-basis:100% !important;}
}

/* the generic .view.active{display:block} rule was overriding the centered sign-in layout */
.login-wrap.view.active{display:flex;}

/* ---------- waiting-on + reminders ---------- */
.dep-owner-select{background:var(--bg-elev-2);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:5px 7px;font-size:12px;max-width:190px;}
.dep-owner-select.unlinked{border-color:color-mix(in srgb,var(--amber) 55%,transparent);color:var(--amber);}
.dep-reminder{font-size:11.5px;color:var(--text-faint);margin-top:3px;font-weight:400;}
.dep-reminder.warn{color:var(--amber);}
.dep-actions{white-space:nowrap;text-align:right;}
.s-mini.muted{opacity:.55;}
tr.dep-open td{border-bottom-color:transparent;}
tr.dep-details td{background:var(--bg-elev-2);border-radius:0 0 8px 8px;padding:10px 12px;}
.dep-details-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--text-dim);}
.dep-toggle{display:flex;align-items:center;gap:7px;cursor:pointer;}
.dep-snooze{display:flex;align-items:center;gap:7px;}
.dep-snooze input{background:var(--bg-elev);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:4px 7px;font-size:12px;color-scheme:inherit;}
.dep-note{font-size:12px;color:var(--text-faint);margin-top:6px;}
.dep-log{margin-top:8px;font-size:11.5px;color:var(--text-faint);line-height:1.6;}
.dep-help{font-size:11.5px;color:var(--text-faint);margin-top:10px;line-height:1.5;}
.add-row select{flex:1;}

/* ---------- client review links (on an asset) ---------- */
.rl-box{margin:12px 0 4px;padding:12px;border:1px solid var(--border-soft);border-radius:10px;background:var(--bg-elev);}
.rl-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;font-weight:700;margin-bottom:6px;}
.rl-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--border-soft);font-size:12px;flex-wrap:wrap;}
.rl-who{flex:1;color:var(--text-dim);min-width:180px;}
.rl-empty{font-size:12px;color:var(--text-faint);}
.asset-status-pill.changes{color:var(--amber);background:var(--amber-soft);}
.asset-status-pill.muted{color:var(--text-faint);background:var(--bg-elev-2);}
#rl-link{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;}
.modal textarea{width:100%;padding:9px 11px;border-radius:8px;border:1px solid var(--border);background:var(--bg-elev-2);color:var(--text);font-size:13.5px;box-sizing:border-box;resize:vertical;font-family:inherit;}

/* ---------- settings: reminders & email ---------- */
#s-reminders-panel .panel + .panel{margin-top:18px;}
.rem-p{font-size:13px;color:var(--text-dim);line-height:1.55;margin:0 0 12px;}
.rem-p code{background:var(--bg-elev-2);padding:1px 5px;border-radius:4px;font-size:12px;}
.rem-master{font-size:13.5px;color:var(--text);margin-bottom:14px;}
.rem-grid{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:12px;}
.rem-num{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-dim);}
.rem-num input{width:60px;background:var(--bg-elev-2);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:6px 8px;font-size:13px;}
.rem-report{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--bg-elev-2);font-size:12.5px;line-height:1.6;color:var(--text-dim);}
.rem-report ul{margin:4px 0 8px 18px;padding:0;}
.rem-log-wrap{overflow-x:auto;}
.rem-log td{vertical-align:top;}
@media (max-width: 700px){
  .dep-owner-select{max-width:120px;}
  table.deps th:nth-child(2), table.deps td:nth-child(2){min-width:0;}
}

.deps-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
@media (max-width: 700px){ .deps-scroll table.deps{min-width:560px;} }
.add-row select{min-width:0;}
@media (max-width: 700px){
  .panel .add-row{flex-wrap:wrap;}
  #new-dep-item{flex-basis:100% !important;}
  #new-dep-contact input{flex-basis:100% !important;}
}

.history-gate.ok{color:var(--green);background:var(--green-soft);}
.history-gate.warn{color:var(--amber);background:var(--amber-soft);}

/* =====================================================================
   Navigation, staging, views, My work, Overview, bell, mentions
   ===================================================================== */

/* top bar tabs */
.topbar{gap:16px;}
.main-nav{display:flex;gap:4px;flex:1;justify-content:center;}
.nav-btn{background:none;border:1px solid transparent;color:var(--text-dim);padding:7px 13px;border-radius:9px;font-size:13px;font-weight:600;}
.nav-btn:hover{color:var(--text);}
.nav-btn.active{background:var(--bg-elev-2);border-color:var(--border);color:var(--text);}
.nav-btn:focus-visible,.bell-btn:focus-visible,.view-switch button:focus-visible,.chip-btn:focus-visible,.stat-tile:focus-visible,.link-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* staging */
body:not(.is-staging) .staging-only{display:none !important;}
body.is-staging .staging-hide{display:none !important;}
.staging-banner{
  width:calc(100% - 56px);max-width:1184px;margin:14px auto 0;padding:10px 14px;border-radius:10px;font-size:12.5px;line-height:1.5;
  color:var(--amber);background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 30%,transparent);
}

/* small shared bits */
.faint{color:var(--text-faint);}
.small{font-size:11.5px;}
.late{color:var(--red);}
.soon-text{color:var(--amber);}
.link-btn{background:none;border:none;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-align:left;}
.link-btn:hover{text-decoration:underline;}
.chip-btn{background:var(--bg-elev);border:1px solid var(--border);color:var(--text-dim);padding:5px 10px;border-radius:999px;font-size:12px;font-weight:600;}
.chip-btn:hover{color:var(--text);border-color:var(--border-strong);}
.chip-btn.active{color:var(--text);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 45%,transparent);}
.page-body{max-width:1240px;margin:0 auto;padding:0 28px 60px;}
.page-body > .panel + .panel{margin-top:18px;}
.status-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.status-chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.status-chip.on-track{color:var(--green);background:var(--green-soft);}
.status-chip.at-risk{color:var(--amber);background:var(--amber-soft);}
.status-chip.blocked{color:var(--red);background:var(--red-soft);}
.status-chip.delivered{color:var(--accent);background:var(--accent-soft);}
.status-dot{display:inline-block;}

/* projects toolbar */
.home-toolbar{max-width:1240px;margin:0 auto;padding:0 28px 16px;display:flex;flex-direction:column;gap:10px;}
.tb-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.tb-row-2{justify-content:space-between;}
.search-wrap{position:relative;flex:1 1 260px;min-width:200px;}
.search-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-faint);}
.home-toolbar .search-wrap input{width:100%;padding:9px 12px 9px 32px;}
.home-toolbar input,.home-toolbar select{
  background:var(--bg-elev);border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:13px;padding:8px 10px;
}
.home-toolbar input:focus,.home-toolbar select:focus{outline:none;border-color:var(--accent);}
.view-switch{display:inline-flex;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap;}
.view-switch button{background:none;border:none;color:var(--text-dim);padding:6px 12px;border-radius:7px;font-size:12.5px;font-weight:600;}
.view-switch button:hover{color:var(--text);}
.view-switch button.active{background:var(--bg-elev-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--border);}
.tb-count{font-size:12.5px;color:var(--text-faint);}

/* list view */
.table-panel{padding:6px 14px;}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.plist{margin-bottom:0;}
table.plist td{vertical-align:top;}
table.plist .pl-name b{color:var(--text);font-weight:600;}
tr.click-row{cursor:pointer;}
tr.click-row:hover td{background:var(--bg-elev-2);}
tr.click-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.th-sort{background:none;border:none;padding:0;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;}
.th-sort:hover,.th-sort.on{color:var(--text);}
@media (max-width:900px){ table.plist{min-width:760px;} }

/* board view */
.board-wrap{max-width:1240px;margin:0 auto;padding:0 28px 60px;}
.board-opts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--text-dim);margin-bottom:12px;}
.board-opts .small{margin-left:6px;}
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start;-webkit-overflow-scrolling:touch;}
.board-col{flex:0 0 260px;background:var(--bg-elev);border:1px solid var(--border-soft);border-radius:var(--radius);padding:10px;}
.board-col-head{display:flex;align-items:center;gap:8px;font-size:13px;padding:2px 4px 10px;}
.board-col-head .n{margin-left:auto;color:var(--text-faint);font-size:12px;font-weight:600;}
.board-col-head .status-dot{margin-top:0;}
.board-cards{display:flex;flex-direction:column;gap:8px;}
.board-cards .card{background:var(--bg-elev-2);}
.board-empty{font-size:12px;color:var(--text-faint);padding:6px 4px;}

/* calendar view */
.cal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.cal-nav{display:flex;align-items:center;gap:6px;}
.cal-title{font-size:16px;min-width:150px;text-align:center;}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--border-soft);border:1px solid var(--border-soft);border-radius:var(--radius);overflow:hidden;}
.cal-wd{background:var(--bg-elev);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text-faint);padding:8px;}
.cal-cell{background:var(--bg-elev);min-height:96px;padding:6px;display:flex;flex-direction:column;gap:3px;min-width:0;}
.cal-cell.pad{background:var(--bg);}
.cal-cell.past .cal-day{color:var(--text-faint);}
.cal-cell.today{box-shadow:inset 0 0 0 2px var(--accent);}
.cal-cell.today .cal-day{color:var(--accent);font-weight:800;}
.cal-day{font-size:12px;font-weight:600;color:var(--text-dim);}
.cal-item{
  display:flex;align-items:center;gap:5px;width:100%;text-align:left;background:var(--bg-elev-2);border:1px solid var(--border);
  border-radius:6px;padding:3px 6px;font-size:11.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cal-item .dot{width:6px;height:6px;border-radius:50%;flex:none;}
.cal-item.on-track .dot{background:var(--green);}
.cal-item.at-risk .dot{background:var(--amber);}
.cal-item.blocked .dot{background:var(--red);}
.cal-item.delivered .dot{background:var(--accent);}
.cal-item.late{border-color:color-mix(in srgb,var(--red) 45%,transparent);}
.cal-item:hover{border-color:var(--accent);}
.undated{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
@media (max-width:700px){
  .cal-cell{min-height:64px;padding:4px;}
  .cal-item{font-size:0;padding:4px;justify-content:center;}
  .cal-item .dot{width:8px;height:8px;}
  .cal-wd{padding:6px 2px;text-align:center;font-size:10px;}
}

/* timeline view */
.tl-panel{padding:14px 14px 10px;}
.tl-legend{margin-bottom:10px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.tl-key{display:inline-flex;align-items:center;gap:6px;}
.tl-today-key{width:2px;height:12px;background:var(--accent);display:inline-block;}
.tl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tl{min-width:720px;position:relative;}
.tl-row{display:flex;align-items:center;min-height:34px;border-bottom:1px solid var(--border-soft);}
.tl-row:last-child{border-bottom:none;}
.tl-name{flex:0 0 var(--tl-name);display:flex;align-items:center;gap:8px;background:none;border:none;color:var(--text);font-size:12.5px;font-weight:600;text-align:left;padding:4px 10px 4px 0;min-width:0;}
.tl-name .status-dot{margin-top:0;}
.tl-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
button.tl-name:hover .tl-name-text{text-decoration:underline;}
.tl-track{flex:1;position:relative;height:34px;}
.tl-axis{min-height:26px;border-bottom:1px solid var(--border);}
.tl-axis .tl-track{height:26px;}
.tl-tick{position:absolute;top:0;bottom:0;border-left:1px solid var(--border);}
.tl-tick span{position:absolute;left:5px;top:5px;font-size:11px;color:var(--text-faint);white-space:nowrap;}
.tl-tick.minor{border-left-style:dashed;border-left-color:var(--border-soft);}
.tl-today{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);margin-left:-1px;z-index:2;}
.tl{--tl-name:200px;}
.tl-today-line{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);margin-left:-1px;z-index:1;pointer-events:none;opacity:.8;}
.tl-bar-out{position:absolute;top:50%;transform:translateY(-50%);font-size:10.5px;font-weight:600;color:var(--text-dim);white-space:nowrap;pointer-events:none;}
.tl-bar{
  position:absolute;top:8px;height:18px;border-radius:4px;border:none;padding:0;min-width:6px;overflow:hidden;
  background:var(--bg-elev-2);box-shadow:inset 0 0 0 1px var(--border);cursor:pointer;
}
.tl-bar.on-track{background:color-mix(in srgb,var(--green) 28%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 60%,transparent);}
.tl-bar.at-risk{background:color-mix(in srgb,var(--amber) 28%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--amber) 60%,transparent);}
.tl-bar.blocked{background:color-mix(in srgb,var(--red) 26%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 60%,transparent);}
.tl-bar.delivered{background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent);}
.tl-bar.late{background-image:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--red) 35%,transparent) 5px 7px);}
.tl-bar:hover{filter:brightness(1.25);}
.tl-bar-label{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-size:10.5px;font-weight:600;color:var(--text);white-space:nowrap;}
@media (max-width:700px){ .tl{--tl-name:130px;} }

/* My work */
.mw-person{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-faint);}
.mw-person select{background:var(--bg-elev);border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:13px;padding:7px 9px;}
.mw-row{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--border-soft);}
.mw-row:last-child{border-bottom:none;}
.mw-main{flex:1;min-width:0;}
.mw-item{font-size:13.5px;font-weight:600;color:var(--text);}
.mw-row select{background:var(--bg-elev-2);border:1px solid var(--border);border-radius:7px;padding:5px 8px;font-size:12px;}
.mw-section-title{font-size:13.5px;font-weight:700;margin:26px 0 10px;display:flex;gap:8px;}
.mw-section-title .n{color:var(--text-faint);font-weight:500;}
.mw-project + .mw-project{margin-top:12px;}
.mw-phead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.mw-pname{background:none;border:none;padding:0;color:var(--text);font-size:15px;font-weight:700;text-align:left;}
.mw-pname:hover{text-decoration:underline;}
.mw-sub{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text-faint);margin:14px 0 6px;}
.mw-checks{display:flex;flex-direction:column;gap:2px;}
.mw-check{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-dim);padding:5px 2px;cursor:pointer;}
.mw-check input{width:16px;height:16px;accent-color:var(--green);}
.mw-check.done span{text-decoration:line-through;color:var(--text-faint);}
.mw-list{margin:12px 0 0 18px;padding:0;font-size:12.5px;color:var(--text-dim);line-height:1.7;}

/* Overview */
.ov-export{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--text-dim);}
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px;}
.stat-tile{
  text-align:left;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;color:var(--text);
}
.stat-tile:hover{border-color:var(--border-strong);}
.stat-tile.warn .stat-n{color:var(--red);}
.stat-n{font-size:28px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;}
.stat-label{font-size:12.5px;font-weight:600;color:var(--text-dim);margin-top:4px;display:flex;align-items:center;gap:6px;}
.stat-label .status-dot{margin-top:0;width:7px;height:7px;}
.stat-sub{font-size:11px;color:var(--text-faint);margin-top:3px;}
.ov-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:18px;}
.ov-grid .panel + .panel{margin-top:0;}
.wl-bar-wrap{display:flex;align-items:center;gap:8px;min-width:110px;}
.wl-bar{height:8px;border-radius:0 4px 4px 0;background:var(--accent);min-width:2px;max-width:100px;flex:none;}
.wl-n{font-size:12px;color:var(--text);font-variant-numeric:tabular-nums;}
@media (max-width:900px){ .ov-grid{grid-template-columns:minmax(0,1fr);} .stat-row{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* history filter + edit rows */
.hist-filter{display:flex;gap:2px;flex-wrap:wrap;}
.hist-filter button{background:none;border:1px solid transparent;color:var(--text-faint);border-radius:7px;padding:3px 8px;font-size:11.5px;font-weight:600;}
.hist-filter button:hover{color:var(--text);}
.hist-filter button.active{color:var(--text);background:var(--bg-elev-2);border-color:var(--border);}
.history-gate.edit{color:var(--accent);background:var(--accent-soft);}
#d-history-panel .panel-head{flex-wrap:wrap;gap:8px;}

/* bell */
.bell-wrap{position:relative;}
.bell-btn{position:relative;background:none;border:1px solid var(--border);color:var(--text-dim);width:34px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0;}
.bell-btn:hover{color:var(--text);border-color:var(--border-strong);}
.bell-badge{
  position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;border-radius:999px;background:var(--red);color:var(--on-accent);
  font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--bg);
}
.bell-panel{
  display:none;position:absolute;right:0;top:40px;width:380px;max-width:calc(100vw - 24px);max-height:70vh;overflow:hidden;
  background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 18px 50px var(--shadow);z-index:120;
  flex-direction:column;
}
.bell-panel.open{display:flex;}
.bell-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border-soft);font-size:13.5px;}
.bell-list{overflow-y:auto;}
.bell-item{display:flex;gap:10px;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--border-soft);padding:11px 14px;color:var(--text-dim);}
.bell-item:hover{background:var(--bg-elev-2);}
.bell-item.unread{background:color-mix(in srgb,var(--accent) 7%,transparent);}
.bell-item.unread .bell-title{color:var(--text);font-weight:700;}
.bell-ico{flex:none;width:26px;height:26px;border-radius:50%;background:var(--bg-elev-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--text-dim);}
.bell-ico.kind-mention{color:var(--accent);background:var(--accent-soft);border-color:transparent;}
.bell-ico.kind-review{color:var(--green);background:var(--green-soft);border-color:transparent;}
.bell-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.bell-title{font-size:12.5px;color:var(--text-dim);font-weight:600;}
.bell-body{font-size:12px;color:var(--text-faint);overflow-wrap:anywhere;}
.bell-meta{font-size:11px;color:var(--text-faint);}

/* mentions */
.mention{color:var(--accent);font-weight:600;}
.mention-pop{
  display:none;position:absolute;z-index:200;min-width:220px;max-width:280px;background:var(--bg-elev);border:1px solid var(--border);
  border-radius:10px;box-shadow:0 12px 30px var(--shadow);padding:4px;
}
.mention-pop.open{display:block;}
.mention-opt{padding:7px 9px;border-radius:7px;font-size:12.5px;cursor:pointer;color:var(--text);}
.mention-opt.active,.mention-opt:hover{background:var(--accent-soft);}

/* email preview modal */
.mail-preview-modal{max-width:680px;}
.mail-preview-meta{color:var(--text-dim);font-size:12.5px;margin:-8px 0 10px;}
#mail-preview-frame{width:100%;height:60vh;border:1px solid var(--border);border-radius:10px;background:#f5f3ee;}
.digest-to{margin:6px 0 10px;display:flex;flex-direction:column;gap:8px;}
.digest-to select{background:var(--bg-elev-2);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:6px 8px;font-size:13px;}

/* phones */
@media (max-width: 900px){
  .topbar{flex-wrap:wrap;}
  .main-nav{order:3;flex-basis:100%;justify-content:flex-start;overflow-x:auto;}
}
@media (max-width: 600px){
  .home-toolbar,.page-body,.board-wrap{padding-left:16px;padding-right:16px;}
  .home-header{padding:22px 16px 14px;}
  .grid{padding-left:16px;padding-right:16px;}
  .home-toolbar select{flex:1 1 45%;}
  .staging-banner{width:calc(100% - 32px);margin-top:10px;}
}

/* ---------- checkboxes: colours come from the theme ---------- */
input[type=checkbox]{
  -webkit-appearance:none;appearance:none;
  flex:0 0 auto;width:18px;height:18px;margin:0;
  background:var(--check-bg);border:2px solid var(--check-border);border-radius:5px;
  display:inline-grid;place-content:center;cursor:pointer;
  transition:background .12s,border-color .12s,box-shadow .12s;
}
input[type=checkbox]:hover{background:var(--check-hover);box-shadow:0 0 0 3px var(--check-ring);}
input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
input[type=checkbox]::after{
  content:"";width:5px;height:10px;margin-top:-2px;
  border:solid var(--on-accent);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);
  transition:transform .12s;
}
input[type=checkbox]:checked{background:var(--accent);border-color:color-mix(in srgb,var(--accent) 60%,var(--check-border));}
input[type=checkbox]:checked::after{transform:rotate(45deg) scale(1);}
input[type=checkbox]:disabled{opacity:.45;cursor:not-allowed;}
.mw-check input[type=checkbox]:checked::after{border-color:var(--on-green);}
.mw-check input[type=checkbox]:checked{background:var(--green);border-color:color-mix(in srgb,var(--green) 60%,var(--check-border));}
/* project checklist boxes (these are buttons, not real checkboxes) */
.box:not(.checked){background:var(--check-bg);border:2px solid var(--check-border);}
.box:not(.checked):hover{background:var(--check-hover);box-shadow:0 0 0 3px var(--check-ring);}
.box.checked{border-width:2px;border-color:color-mix(in srgb,var(--green) 60%,var(--check-border));}
/* gates not reached yet: full-strength text so they're easy to read */
.rail-label:not(.current):not(.done){color:var(--text);}
.rail-node:not(.current):not(.done){color:var(--text);border-color:var(--text-faint);}

/* Settings → Message log */
.msg-summary{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--text-dim, #6b675e);margin:4px 0 12px;}
.msg-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.msg-filters select,.msg-filters input{font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--border, #d9d5cb);border-radius:7px;background:var(--bg-elev);color:inherit;}
.msg-filters input{flex:1;min-width:140px;}
.msg-log td{font-size:12.5px;}
.msg-when{white-space:nowrap;color:var(--text-faint, #8a8577);}
.msg-sub{font-size:11.5px;color:var(--text-faint, #8a8577);margin-top:2px;}
.msg-type{white-space:nowrap;font-weight:600;}
.msg-type.email{color:var(--accent);}
.msg-status{white-space:nowrap;}
.msg-pill{display:inline-block;font-size:11px;padding:2px 7px;border-radius:999px;background:rgba(128,128,128,.14);margin:1px 0;}
.msg-pill.ok{background:var(--green-soft);color:var(--green);}
.msg-pill.warn{background:var(--amber-soft);color:var(--amber);}
.msg-pill.bad{background:var(--red-soft);color:var(--red);}
.msg-warn{color:var(--amber);}
.msg-bad{color:var(--red);}
.msg-detail td{background:rgba(128,128,128,.06);}
.msg-body{white-space:pre-wrap;font-size:13px;line-height:1.5;padding:4px 0 6px;}
.msg-body.bad{color:var(--red);}
.msg-log tr.open td{background:var(--accent-soft);}