/* Strategy Map — one strategy map per company.
   Dark and glassy on screen: a deep navy ground, translucent panels, a
   cyan-to-violet roof, status lights that glow. Print flips to a clean white
   board paper (bottom of this file) because that is what gets handed round. */
:root {
  --bg: #070b14; --bg-2: #0b1220;
  --panel: rgba(255,255,255,.045); --panel-2: rgba(255,255,255,.075);
  --line: rgba(255,255,255,.09); --line-strong: rgba(255,255,255,.16);
  --ink: #e7ecf5; --muted: #8b97ad; --faint: #5b6780;
  --accent: #22d3ee; --accent-2: #8b5cf6; --accent-ink: #04121a;
  --glow: 0 0 24px rgba(34,211,238,.35);
  --roof-a: #22d3ee; --roof-b: #8b5cf6;
  --head: rgba(34,211,238,.10); --head-line: rgba(34,211,238,.35); --head-ink: #dff9ff;
  --straw: rgba(255,255,255,.035); --straw-line: rgba(255,255,255,.08);
  --base: linear-gradient(90deg, rgba(139,92,246,.18), rgba(34,211,238,.14)); --base-line: rgba(139,92,246,.4);
  --pass: #34d399; --fail: #fb7185; --open: #64748b; --amber: #fbbf24;
  --pen: #93c5fd;                  /* the blue of Miki's handwriting, lit */
  --radius: 14px; --shadow: 0 20px 60px rgba(0,0,0,.55);
  --font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(900px 500px at 95% 0%, rgba(139,92,246,.16), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 40%);
  background-attachment: fixed;
  color: var(--ink); font-family: var(--font);
  font-size: 15px; line-height: 1.5; min-height: 100dvh;
}
a { color: var(--accent); }
.loading { color: var(--muted); padding: 3rem; text-align: center; }
.muted { color: var(--muted); font-size: .85rem; }
.faint { color: var(--faint); }
.hidden { display: none !important; }
::selection { background: rgba(34,211,238,.35); }

/* ── forms ─────────────────────────────────────────────────────────── */
label { display: block; margin: .9rem 0 .3rem; font-size: .74rem; color: var(--muted); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
input, select, textarea {
  width: 100%; padding: .65rem .8rem; background: rgba(0,0,0,.35);
  border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink);
  font: inherit; font-size: 16px; color-scheme: dark;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { min-height: 4.5rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34,211,238,.18); }
input:disabled, select:disabled { opacity: .6; }
button {
  padding: .55rem 1rem; border: 0; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; font-size: .92rem;
  background: linear-gradient(135deg, var(--accent), #38bdf8); color: var(--accent-ink);
  box-shadow: 0 6px 18px rgba(34,211,238,.25);
  transition: transform .08s, box-shadow .15s, background .15s;
}
button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(34,211,238,.35); }
button:disabled { opacity: .45; cursor: default; box-shadow: none; }
button.ghost { background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong); font-weight: 500; box-shadow: none; }
button.ghost:hover:not(:disabled) { background: var(--panel-2); border-color: rgba(34,211,238,.5); }
button.danger { background: rgba(251,113,133,.08); color: var(--fail); border: 1px solid rgba(251,113,133,.35); font-weight: 500; box-shadow: none; }
button.link { background: none; color: var(--accent); padding: 0; font-weight: 500; box-shadow: none; }
button.link:hover { transform: none; box-shadow: none; text-decoration: underline; }
button.sm { padding: .3rem .65rem; font-size: .82rem; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.msg { margin-top: 1rem; padding: .7rem .85rem; border-radius: 10px; font-size: .9rem; border: 1px solid transparent; }
.msg.bad  { background: rgba(251,113,133,.10); color: #fecdd3; border-color: rgba(251,113,133,.3); }
.msg.good { background: rgba(52,211,153,.10); color: #bbf7d0; border-color: rgba(52,211,153,.3); }
.msg.info { background: rgba(34,211,238,.10); color: #cffafe; border-color: rgba(34,211,238,.3); }

/* ── sign in ───────────────────────────────────────────────────────── */
.wrap { max-width: 440px; margin: 0 auto; padding: 5rem 1.25rem; }
.brandmark { display: flex; align-items: center; gap: .6rem; }
.brandmark svg { width: 34px; height: 34px; filter: drop-shadow(0 0 10px rgba(34,211,238,.45)); }
h1 { font-size: 1.7rem; margin: 0; letter-spacing: -.02em; background: linear-gradient(90deg, #fff, #a5f3fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { color: var(--muted); margin: .35rem 0 1.5rem; }
.wrap button { width: 100%; margin-top: 1.25rem; padding: .85rem; }
.wrap .build { margin-top: 2rem; text-align: center; font-size: .75rem; color: var(--faint); }

/* ── shell ─────────────────────────────────────────────────────────── */
.bar {
  display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem;
  background: rgba(7,11,20,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20; flex-wrap: wrap;
}
.bar .brandmark { font-weight: 700; text-decoration: none; color: var(--ink); letter-spacing: -.01em; }
.bar .brandmark svg { width: 24px; height: 24px; }
.bar select.switch { width: auto; max-width: 16rem; padding: .35rem 1.8rem .35rem .6rem; font-size: .9rem; font-weight: 600; background: var(--panel); }
.bar nav { display: flex; gap: .15rem; flex: 1; flex-wrap: wrap; }
.tab { background: transparent; color: var(--muted); padding: .4rem .75rem; font-weight: 500; font-size: .9rem; border-radius: 8px; box-shadow: none; }
.tab:hover:not(:disabled) { background: var(--panel); color: var(--ink); transform: none; box-shadow: none; }
.tab.on { background: rgba(34,211,238,.12); color: var(--accent); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(34,211,238,.35); }
.bar .who { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted); margin-left: auto; }
.bar .who b { color: var(--ink); font-weight: 600; }
main { padding: 1.25rem; max-width: 1400px; margin: 0 auto; }
main.narrow { max-width: 820px; }
.page-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head h2 { margin: 0; font-size: 1.3rem; letter-spacing: -.01em; }
.page-head .spacer { flex: 1; }
h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1rem; backdrop-filter: blur(8px); }
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  padding: .7rem 1.1rem; border-radius: 999px; font-size: .9rem; z-index: 100;
  box-shadow: var(--shadow); color: #fff; background: #1f2937; max-width: 90vw; border: 1px solid var(--line-strong);
}
.toast.bad { background: #9f1239; } .toast.good { background: #047857; }

/* ── companies ─────────────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.co-card { cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; display: flex; flex-direction: column; gap: .5rem; position: relative; overflow: hidden; }
.co-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--roof-a), var(--roof-b)); opacity: .8; }
.co-card:hover { transform: translateY(-2px); border-color: rgba(34,211,238,.45); box-shadow: var(--shadow), var(--glow); }
.co-card h3 { margin: 0; font-size: 1.05rem; }
.co-card .target { color: var(--accent); font-weight: 600; font-size: .9rem; }
.co-card.archived { opacity: .55; }
.meter { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.07); }
.meter span { display: block; height: 100%; }
.meter .p { background: var(--pass); box-shadow: 0 0 10px var(--pass); } .meter .f { background: var(--fail); } .meter .o { background: transparent; }
.co-card .stats { display: flex; gap: 1rem; font-size: .8rem; color: var(--muted); flex-wrap: wrap; }

/* ── the map ───────────────────────────────────────────────────────── */
.map { display: flex; flex-direction: column; gap: .8rem; }
.toolbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.toolbar .legend { display: flex; gap: .85rem; font-size: .8rem; color: var(--muted); margin-left: auto; align-items: center; }
.toolbar .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .3rem; vertical-align: middle; box-shadow: 0 0 8px currentColor; }
.roof-wrap { position: relative; cursor: pointer; filter: drop-shadow(0 10px 30px rgba(34,211,238,.25)); }
.roof {
  position: relative; text-align: center; color: transparent; font-weight: 700; font-size: 1.25rem;
  padding: 1.1rem 2rem .8rem;
  background: linear-gradient(90deg, var(--roof-a), var(--roof-b));
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  min-height: 100px; display: flex; align-items: flex-end; justify-content: center;
}
.roof::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 60%); }
.roof-label {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: .65rem; pointer-events: none; color: #fff; font-weight: 700; font-size: 1.25rem;
  text-shadow: 0 1px 12px rgba(0,0,0,.45); letter-spacing: .04em; text-transform: uppercase;
}
.roof-wrap .badge-row { position: absolute; right: 0; top: 0; display: flex; gap: .4rem; }
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: .8rem; align-items: stretch; }
.pillar { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.pillar-head {
  background: var(--head); color: var(--head-ink); border: 1px solid var(--head-line); border-radius: 12px;
  padding: .75rem .8rem .65rem; text-align: center; cursor: pointer; position: relative; backdrop-filter: blur(8px);
  transition: border-color .15s, box-shadow .15s;
}
.pillar-head:hover { border-color: var(--accent); box-shadow: var(--glow); }
.pillar-head h4 { margin: 0; font-size: .98rem; line-height: 1.3; letter-spacing: -.005em; }
.pillar-head .kpi { display: flex; justify-content: center; gap: .4rem; margin-top: .55rem; flex-wrap: wrap; align-items: center; }
.light { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.light.green { background: var(--pass); box-shadow: 0 0 10px var(--pass), 0 0 2px #fff inset; }
.light.amber { background: var(--amber); box-shadow: 0 0 10px var(--amber), 0 0 2px #fff inset; }
.light.red { background: var(--fail); box-shadow: 0 0 10px var(--fail), 0 0 2px #fff inset; }
.light.grey { background: #3b4657; box-shadow: none; }
.chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 600; padding: .12rem .55rem; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--head-ink); border: 1px solid var(--line-strong); box-shadow: none; }
button.chip:hover:not(:disabled) { transform: none; border-color: var(--accent); box-shadow: none; }
.chip.risk-low { background: rgba(52,211,153,.15); color: #a7f3d0; border-color: rgba(52,211,153,.4); }
.chip.risk-med { background: rgba(251,191,36,.15); color: #fde68a; border-color: rgba(251,191,36,.4); }
.chip.risk-high { background: rgba(251,113,133,.15); color: #fecdd3; border-color: rgba(251,113,133,.4); }
.chip.unset { color: var(--muted); font-weight: 500; }
.pillar-body {
  flex: 1; background: var(--straw); border: 1px solid var(--straw-line); border-radius: 12px;
  padding: .8rem .85rem .65rem; font-size: .88rem; display: flex; flex-direction: column; gap: .4rem;
}
.pillar-body .purpose { margin: 0 0 .3rem; color: #c7d0df; }
.pillar-body .purpose b { font-weight: 700; color: var(--ink); }
.pillar-body h5 { margin: .45rem 0 .15rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.check {
  display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: start;
  padding: .32rem .4rem; border-radius: 8px; cursor: pointer; margin: 0 -.4rem;
  transition: background .12s;
}
.check:hover { background: rgba(255,255,255,.05); }
.check.sel { background: rgba(34,211,238,.10); outline: 1px solid rgba(34,211,238,.6); box-shadow: var(--glow); }
.seg { display: inline-flex; border-radius: 7px; overflow: hidden; border: 1px solid var(--line-strong); background: rgba(0,0,0,.35); margin-top: .1rem; }
.seg button { padding: 0 .4rem; height: 22px; background: transparent; color: var(--faint); font-size: .8rem; font-weight: 700; border-radius: 0; line-height: 1; min-width: 24px; box-shadow: none; }
.seg button:hover:not(:disabled) { transform: none; box-shadow: none; color: var(--ink); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on.pass { background: var(--pass); color: #04120c; box-shadow: 0 0 10px rgba(52,211,153,.6); }
.seg button.on.fail { background: var(--fail); color: #2a0610; box-shadow: 0 0 10px rgba(251,113,133,.6); }
.seg button:disabled { cursor: default; }
.check .lbl { min-width: 0; }
.check .lbl .t { display: block; line-height: 1.3; }
.check.fail .t { color: #fecdd3; }
.check .note { display: block; color: var(--pen); font-size: .8rem; line-height: 1.25; margin-top: .1rem; font-style: italic; }
.check .meta { display: flex; gap: .5rem; font-size: .72rem; color: var(--muted); margin-top: .15rem; flex-wrap: wrap; }
.check .meta span { display: inline-flex; align-items: center; gap: .2rem; }
.check .meta .owner { color: var(--accent); }
.pillar-body .empty { color: var(--muted); font-size: .8rem; font-style: italic; margin: .1rem 0; }
.base {
  background: var(--base); border: 1px solid var(--base-line); border-radius: 12px;
  padding: .85rem 1.1rem 1rem; font-size: .9rem; color: #dcd6ff;
}
.base-h { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.base-h .cap { font-size: .82rem; color: #c4bdf0; flex: 1; }
.mgroups { display: grid; grid-template-columns: 5fr 5fr 5fr; gap: .8rem; }
.mgroup { min-width: 0; }
.mg-h { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 .4rem; display: flex; justify-content: space-between; align-items: center; }
.mg-h button { padding: .1rem .45rem; font-size: .7rem; }
.mgroup .empty { color: var(--muted); font-size: .8rem; font-style: italic; margin: .2rem 0; }
.mtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.mtile { background: rgba(7,11,20,.55); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .65rem .5rem; cursor: pointer; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.mtile:hover { border-color: rgba(34,211,238,.5); }
.mtile.sel { border-color: var(--accent); box-shadow: var(--glow); }
.mtile .mh { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: #c7d0df; line-height: 1.25; }
.mtile .mh .light { width: 8px; height: 8px; flex-shrink: 0; }
.mtile .mn { flex: 1; min-width: 0; }
.mtile .auto { font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); border: 1px solid rgba(139,92,246,.5); border-radius: 4px; padding: 0 .3rem; }
.mtile .mv { display: flex; align-items: center; gap: .45rem; margin-top: .3rem; }
.mtile .v { font-size: 1.25rem; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.mtile .tr { font-weight: 700; } .tr.good { color: var(--pass); } .tr.bad { color: var(--fail); } .tr.flat { color: var(--muted); }
.spark { width: 72px; height: 22px; margin-left: auto; color: var(--accent); opacity: .8; }
.mtile .mm { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .7rem; color: var(--muted); margin-top: .2rem; }
.mtile .mm .owner { color: var(--accent); }
.light.blue { background: #60a5fa; box-shadow: 0 0 10px #60a5fa; }
.mbig { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .4rem; }
.mbig .light { align-self: center; }
.mbig .v { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.three input { padding: .5rem .6rem; }
.reading { display: grid; grid-template-columns: 6.5rem 5rem 1fr auto; gap: .6rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.reading .v { font-weight: 700; } .reading .n { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reading .x { background: transparent; color: var(--faint); padding: 0 .3rem; box-shadow: none; }
.reading .x:hover { color: var(--fail); transform: none; box-shadow: none; }
.lens { font-size: .85rem; color: var(--muted); padding: 0 .25rem; }
.lens b { color: #c7d0df; }
.edit-tools { display: flex; gap: .3rem; justify-content: center; margin-top: .3rem; flex-wrap: wrap; }
.edit-tools button { padding: .2rem .5rem; font-size: .75rem; }
.check .tools { grid-column: 1 / -1; display: flex; gap: .25rem; }
.check .tools button { padding: .1rem .45rem; font-size: .72rem; }
.add-pillar { border: 1px dashed var(--line-strong); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; min-height: 120px; }
.add-pillar:hover { background: var(--panel); border-color: var(--accent); color: var(--accent); }

/* ── drawer ────────────────────────────────────────────────────────── */
.drawer-veil { position: fixed; inset: 0; background: rgba(3,6,12,.55); backdrop-filter: blur(2px); z-index: 30; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(540px, 100vw);
  background: linear-gradient(180deg, #0e1626, #0a101c); border-left: 1px solid var(--line-strong);
  z-index: 31; box-shadow: -20px 0 60px rgba(0,0,0,.6); display: flex; flex-direction: column;
  animation: slide .18s ease-out;
}
@keyframes slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer header { padding: 1.1rem 1.2rem .8rem; border-bottom: 1px solid var(--line); position: relative; }
.drawer header .crumb { font-size: .7rem; color: var(--accent); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.drawer header h3 { margin: .2rem 0 0; font-size: 1.15rem; line-height: 1.3; padding-right: 2rem; }
.drawer .close { position: absolute; top: .8rem; right: .8rem; background: var(--panel); color: var(--muted); font-size: 1.2rem; padding: .1rem .55rem; border-radius: 8px; box-shadow: none; line-height: 1.4; }
.drawer .close:hover { color: var(--ink); transform: none; box-shadow: none; }
.drawer .body { flex: 1; overflow-y: auto; padding: 1rem 1.2rem 1.5rem; }
.status-row { display: flex; gap: .45rem; margin-bottom: .5rem; }
.status-row button { flex: 1; background: var(--panel); color: var(--ink); font-weight: 600; border: 1px solid var(--line-strong); box-shadow: none; }
.status-row button:hover:not(:disabled) { transform: none; border-color: var(--accent); box-shadow: none; }
.status-row button.on.pass { background: var(--pass); color: #04120c; border-color: transparent; box-shadow: 0 0 18px rgba(52,211,153,.5); }
.status-row button.on.fail { background: var(--fail); color: #2a0610; border-color: transparent; box-shadow: 0 0 18px rgba(251,113,133,.5); }
.status-row button.on.open { background: rgba(255,255,255,.14); border-color: var(--line-strong); }
.dtabs { display: flex; gap: .15rem; border-bottom: 1px solid var(--line); margin: 1.1rem 0 .8rem; }
.dtabs button { background: transparent; color: var(--muted); border-radius: 8px 8px 0 0; padding: .45rem .75rem; font-weight: 500; font-size: .88rem; box-shadow: none; }
.dtabs button:hover:not(:disabled) { transform: none; box-shadow: none; color: var(--ink); }
.dtabs button.on { color: var(--accent); border-bottom: 2px solid var(--accent); font-weight: 600; }
.dtabs button .n { color: var(--faint); font-size: .75rem; margin-left: .25rem; }
.comment { padding: .65rem 0; border-bottom: 1px solid var(--line); }
.comment .h { display: flex; gap: .5rem; font-size: .78rem; color: var(--muted); align-items: baseline; }
.comment .h b { color: var(--ink); }
.comment .h .r { margin-left: auto; display: flex; gap: .5rem; }
.comment p { margin: .25rem 0 0; white-space: pre-wrap; word-break: break-word; color: #d5dcea; }
.composer { margin-top: .8rem; }
.composer textarea { min-height: 3.5rem; }
.composer .btn-row { margin-top: .5rem; justify-content: flex-end; }
.file { display: flex; gap: .65rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.file .ico { width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, rgba(34,211,238,.25), rgba(139,92,246,.25)); border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 700; color: var(--ink); flex-shrink: 0; letter-spacing: .04em; }
.file .n { flex: 1; min-width: 0; }
.file .n a { display: block; text-decoration: none; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.file .n a:hover { color: var(--accent); }
.file .n small { color: var(--muted); }
.upload { border: 1px dashed var(--line-strong); border-radius: 12px; padding: 1rem; text-align: center; color: var(--muted); font-size: .88rem; margin-top: .8rem; cursor: pointer; background: rgba(0,0,0,.2); }
.upload:hover, .upload.over { border-color: var(--accent); color: var(--accent); background: rgba(34,211,238,.06); }
.upload input { display: none; }
.todo { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: start; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.todo input[type=checkbox] { width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--pass); }
.todo .t { line-height: 1.35; }
.todo.done .t { text-decoration: line-through; color: var(--muted); }
.todo .m { font-size: .78rem; color: var(--muted); display: flex; gap: .6rem; flex-wrap: wrap; }
.todo .m .late { color: var(--fail); font-weight: 600; }
.todo .m .where { color: var(--accent); cursor: pointer; }
.todo .x { background: transparent; color: var(--faint); padding: 0 .3rem; font-size: 1rem; box-shadow: none; }
.todo .x:hover { color: var(--fail); transform: none; box-shadow: none; }
.todo-form { display: grid; grid-template-columns: 1fr; gap: .45rem; margin-top: .8rem; }
.todo-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.todo-form input, .todo-form select { font-size: 15px; padding: .5rem .65rem; }
.hist { font-size: .85rem; padding: .4rem 0; border-bottom: 1px solid var(--line); display: flex; gap: .5rem; }
.hist .when { color: var(--muted); white-space: nowrap; }
.tag { display: inline-block; font-size: .7rem; font-weight: 700; padding: .05rem .45rem; border-radius: 5px; letter-spacing: .03em; }
.tag.pass { background: rgba(52,211,153,.18); color: #a7f3d0; } .tag.fail { background: rgba(251,113,133,.18); color: #fecdd3; } .tag.open { background: rgba(255,255,255,.08); color: var(--muted); }

/* ── lists (to-dos, trail, members) ────────────────────────────────── */
.trail .item { display: grid; grid-template-columns: 3.2rem auto 1fr; gap: .6rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.trail .item:hover { background: rgba(255,255,255,.025); }
.trail .item .when { color: var(--muted); font-size: .78rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.trail .item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); align-self: center; }
.trail .k-marks .dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.trail .k-comments .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.trail .k-files .dot { background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }
.trail .k-todos .dot { background: var(--pass); box-shadow: 0 0 8px var(--pass); }
.trail .k-metrics .dot { background: #60a5fa; box-shadow: 0 0 8px #60a5fa; }
.trail .k-people .dot { background: #f472b6; }
.trail .item b { font-weight: 600; }
.trail .item .act { color: var(--muted); }
.trail .item .det { color: var(--ink); }
.trail .group-h { margin-top: 1.4rem; }
.filters { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.filters button { background: var(--panel); color: var(--ink); font-weight: 500; padding: .35rem .75rem; font-size: .85rem; border: 1px solid var(--line-strong); box-shadow: none; }
.filters button:hover:not(:disabled) { transform: none; box-shadow: none; border-color: var(--accent); }
.filters button.on { background: rgba(34,211,238,.15); color: var(--accent); border-color: rgba(34,211,238,.5); }
.group-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin: 1.25rem 0 .25rem; font-weight: 700; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: .45rem .5rem; border-bottom: 1px solid var(--line-strong); }
td { padding: .55rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
td select { width: auto; padding: .3rem 1.6rem .3rem .5rem; font-size: .85rem; }
.role { display: inline-block; font-size: .7rem; font-weight: 700; padding: .08rem .5rem; border-radius: 5px; background: rgba(255,255,255,.08); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.role.lead, .role.owner { background: rgba(34,211,238,.15); color: var(--accent); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; align-items: end; }
.form-grid label { margin-top: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin: .5rem 0 1rem; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .75rem; }
.tile .v { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.tile .k { font-size: .75rem; color: var(--muted); }
.copybox { background: rgba(0,0,0,.35); border: 1px solid var(--line-strong); border-radius: 10px; padding: .65rem .8rem; font-size: .85rem; white-space: pre-wrap; word-break: break-word; color: #d5dcea; }

/* ── mobile ────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  main { padding: .75rem; }
  .bar { gap: .5rem; }
  .bar nav { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bar nav .tab { white-space: nowrap; }
  .bar .who { margin-left: auto; }
  .bar select.switch { max-width: 11rem; }
  .roof-label { font-size: .95rem; padding-bottom: .45rem; }
  .roof { min-height: 74px; }
  .two-col, .form-grid, .mgroups { grid-template-columns: 1fr; }
  .three { grid-template-columns: 1fr 1fr; }
  .drawer { width: 100vw; }
}

/* ── print: the map as a one-page board paper, on white ────────────── */
@media print {
  :root {
    --bg: #fff; --bg-2: #fff; --panel: #fff; --line: #ccc; --line-strong: #999;
    --ink: #111; --muted: #555; --faint: #888; --accent: #0e7490; --pen: #1d4fd6;
    --head: #e0f2fe; --head-line: #7dd3fc; --head-ink: #0c4a6e;
    --straw: #fff; --straw-line: #bbb; --base: #f5f3ff; --base-line: #a78bfa;
    --pass: #059669; --fail: #dc2626; --amber: #d97706;
  }
  body { background: #fff; color: #111; }
  .bar, .toolbar, .drawer, .drawer-veil, .toast, .edit-tools, .check .tools, .add-pillar { display: none !important; }
  main { padding: 0; max-width: none; }
  .roof-wrap { filter: none; } .roof { background: linear-gradient(90deg, #0891b2, #7c3aed); }
  .pillars { grid-template-columns: repeat(5, 1fr); gap: .4rem; }
  .pillar-head, .pillar-body, .base { backdrop-filter: none; box-shadow: none; }
  .pillar-body, .base, .pillar-head { font-size: .72rem; }
  .mgroups { grid-template-columns: 1fr 1fr 1fr; } .mtile { background: #fff; } .mtile .v, .mtile .mh { color: #111; } .base-h .cap { color: #333; }
  .pillar-body .purpose, .base, .lens b, .comment p { color: #111; }
  .light { box-shadow: none; }
  .check { break-inside: avoid; }
  @page { size: A4 landscape; margin: 10mm; }
}