:root {
  --desk: #dfe3ea;
  --paper: #ffffff;
  --ink: #1d2433;
  --muted: #5b6577;
  --rule: #d4d9e2;
  --accent: #3348a8;
  --accent-ink: #ffffff;
  --danger: #b4232c;
  --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --circle-fill: #eef1fa;
  --subcircle-fill: #dde3f5;
  --role-fill: #8f9fe0;
  --mandatory-fill: #f0b75e;
  --mandatory-stroke: #b9802a;
  --circle-stroke: #9aa8dc;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --desk: #161a22;
    --paper: #232936;
    --ink: #e7eaf0;
    --muted: #9aa3b5;
    --rule: #3a4252;
    --accent: #8fa2ff;
    --accent-ink: #10142a;
    --danger: #ff8a8f;
    --circle-fill: #252c3e;
    --subcircle-fill: #2f3854;
    --role-fill: #4b5b9c;
    --mandatory-fill: #9a6b22;
    --mandatory-stroke: #d39a45;
    --circle-stroke: #5d6db0;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* Class rules like .login { display: grid } would otherwise override the hidden attribute. */
[hidden] { display: none !important; }
body {
  background: var(--desk);
  color: var(--ink);
  font: 15px/1.5 var(--body);
}

/* ---------- buttons & form controls ---------- */
.button {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  padding: .45rem .9rem;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.button:disabled { opacity: .45; cursor: default; }
.button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

select {
  font: inherit;
  min-width: 11rem;
  max-width: 100%;
  padding: .35rem .5rem;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
}

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login-card {
  max-width: 30rem;
  background: var(--paper);
  padding: 2.5rem;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(20, 30, 50, .08), 0 12px 32px rgba(20, 30, 50, .12);
}
.login-card h1 { font: 600 2rem/1.15 var(--display); margin: 0 0 .75rem; }
.login-card p { color: var(--muted); margin: 0 0 1.5rem; }
.error { color: var(--danger) !important; }

/* ---------- toolbar ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}
.pickers, .actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.pickers label { display: flex; flex-direction: column; font-size: .9rem; color: var(--muted); gap: .3rem; }
.pickers label.check { flex-direction: row; align-items: center; gap: .5rem; padding-bottom: .7rem; font-size: 1rem; color: var(--ink); }
/* The top row uses larger controls than the rest of the page. */
.toolbar select { font-size: 1.05rem; min-width: 13rem; padding: .6rem .75rem; border-radius: 8px; }
.toolbar .button { font-size: 1.05rem; padding: .65rem 1.2rem; border-radius: 8px; }
.toolbar input[type="checkbox"] { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--accent); }
/* Account: a round avatar opening a small menu, as in ClickUp. */
.account { position: relative; align-self: center; }
.avatar-button { display: block; padding: 2px; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; }
.avatar-button:hover, .avatar-button[aria-expanded="true"] { border-color: var(--rule); }
.avatar-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.avatar {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; overflow: hidden;
  background: var(--accent); color: #fff; font-size: .95rem; font-weight: 700; letter-spacing: .02em;
}
.avatar.large { width: 3rem; height: 3rem; font-size: 1.1rem; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-menu {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20; min-width: 15rem; padding: .4rem;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .18);
}
.account-menu[hidden] { display: none; }
.account-head { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem .7rem; border-bottom: 1px solid var(--rule); margin-bottom: .3rem; }
.account-who { display: flex; flex-direction: column; min-width: 0; }
.account-who strong, .account-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-who span { color: var(--muted); font-size: .85rem; }
.menu-item {
  display: block; width: 100%; padding: .45rem .6rem; border: 0; border-radius: 5px; background: none;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--desk); outline: none; }

/* ---------- the sheet ---------- */
.desk { padding: 0 1rem 3rem; }
/* Full width on screen; printing switches to the A4 page below. */
.sheet {
  margin: 0 auto;
  min-height: calc(100vh - 7rem);
  background: var(--paper);
  padding: 3rem 3.25rem;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(20, 30, 50, .08), 0 18px 40px rgba(20, 30, 50, .14);
}
.empty, .status-msg { color: var(--muted); text-align: center; padding: 4rem 0; }
.status-msg.error { color: var(--danger); }

.report-head { border-bottom: 2px solid var(--ink); padding-bottom: 1rem; margin-bottom: 1.25rem; }
.report-head .path { margin: 0; color: var(--muted); font-size: .9rem; }
.report-head h2 { font: 600 2.4rem/1.1 var(--display); margin: .2rem 0 .3rem; }
.report-head .date { margin: 0; color: var(--muted); font-size: .9rem; }

.summary { font: 500 1.2rem/1.5 var(--display); margin: 0 0 2rem; max-width: 46rem; }
.summary strong { font-weight: 600; }
.summary .overdue { color: var(--danger); }

.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2.25rem; }
.charts figure { margin: 0; break-inside: avoid; }
.charts figcaption { font-weight: 700; margin-bottom: .5rem; }
.chart-box { position: relative; height: 240px; }

h3 { font: 600 1.35rem/1.2 var(--display); margin: 0 0 .5rem; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--ink); padding: .4rem .5rem; }
td { border-bottom: 1px solid var(--rule); padding: .45rem .5rem; vertical-align: top; }
tr { break-inside: avoid; }
td a { color: inherit; text-decoration: none; }
td a:hover { text-decoration: underline; }
td.sub { padding-left: 1.6rem; color: var(--muted); }
td.due.late { color: var(--danger); font-weight: 700; }
.dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .4rem; vertical-align: baseline; }
.group-row td { background: transparent; font-weight: 700; padding-top: 1rem; border-bottom: 1px solid var(--rule); }

/* ---------- Holacracy role-fit pages (one per assignee and role) ---------- */
.role-page { hyphens: auto; }
.role-page + .role-page { margin-top: 3rem; padding-top: 3rem; border-top: 1px dashed var(--rule); }
.role-head { border-bottom: 2px solid var(--ink); padding-bottom: 1.25rem; margin-bottom: 1.75rem; }
.role-kicker { margin: 0 0 .6rem; color: var(--muted); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.role-person { font: 600 3rem/1.05 var(--display); margin: 0; }
.role-person.vacant { color: var(--muted); font-style: italic; }
.role-name { font: 600 2.2rem/1.15 var(--display); color: var(--accent); margin: .4rem 0 0; }
.role-section { margin-bottom: 1.6rem; max-width: 46rem; }
.role-section h3 { break-after: avoid; border-bottom: 1px solid var(--rule); padding-bottom: .25rem; margin-bottom: .6rem; }
.role-section p, .role-section ul, .role-section ol { margin: 0 0 .5rem; }
.role-section ul, .role-section ol { padding-left: 1.3rem; }
.role-section li { margin-bottom: .2rem; }
.role-missing { color: var(--muted); font-style: italic; }

/* ---------- circle map (holaspirit-style) ---------- */
.map { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 2rem; align-items: start; }
.map-figure { margin: 0; }
#map-svg { display: block; width: 100%; height: max(28rem, calc(100vh - 16rem)); cursor: zoom-out; }
#map-svg .node { stroke: var(--circle-stroke); stroke-width: 1; cursor: pointer; transition: fill .15s; }
#map-svg .node.anchor { fill: var(--circle-fill); }
#map-svg .node.circle { fill: var(--subcircle-fill); }
#map-svg .node.role { fill: var(--role-fill); }
#map-svg .node.role.mandatory { fill: var(--mandatory-fill); stroke: var(--mandatory-stroke); }
#map-svg .node:hover, #map-svg .node:focus-visible { stroke: var(--accent); stroke-width: 2.5; outline: none; }
#map-svg .node.focus { stroke: var(--accent); stroke-width: 3; }
#map-svg .node.dim { opacity: .22; }
#map-svg .label { fill: var(--ink); font: 13px var(--body); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
#map-svg .label.anchor, #map-svg .label.circle {
  font: 700 17px var(--display);
  /* A halo keeps circle names readable where they overlap role circles. */
  paint-order: stroke; stroke: var(--subcircle-fill); stroke-width: 4px; stroke-linejoin: round;
}
#map-svg .label.anchor { stroke: var(--circle-fill); }

.map-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin-top: .75rem; color: var(--muted); font-size: .85rem; }
.map-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.swatch { width: .9rem; height: .9rem; border-radius: 50%; border: 1px solid var(--circle-stroke); }
.swatch.circle { background: var(--subcircle-fill); }
.swatch.role { background: var(--role-fill); }
.swatch.mandatory { background: var(--mandatory-fill); border-color: var(--mandatory-stroke); }

.map-tip {
  position: fixed; z-index: 10; max-width: 22rem; padding: .55rem .8rem; pointer-events: none;
  background: var(--paper); color: var(--ink); border: 1px solid var(--circle-stroke); border-radius: 6px;
  box-shadow: 0 4px 16px rgb(0 0 0 / .18); font-size: 1rem; line-height: 1.35;
}
.map-tip[hidden] { display: none; }
.map-tip strong { display: block; font: 700 1.15rem/1.2 var(--display); }
.map-tip span { display: block; margin-top: .15rem; color: var(--muted); font-size: .9rem; }

.map-panel { border-left: 1px solid var(--rule); padding-left: 1.5rem; hyphens: auto; }
.map-panel h2 { font: 600 1.7rem/1.15 var(--display); margin: 0 0 .3rem; }
/* Headings get a rule and room above, so a group's title stands apart from its items. */
.map-panel h3 {
  font: 700 1.1rem/1.25 var(--display); margin: 1.75rem 0 .6rem; padding-bottom: .3rem; border-bottom: 1px solid var(--rule);
}
.map-panel [data-pane] > h3:first-child { margin-top: .5rem; }
.map-crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 1rem; }
.map-kicker { margin: 0 0 .4rem; color: var(--muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.map-meta { margin: 0 0 1rem; color: var(--muted); }
.map-meta.vacant { font-style: italic; }
.map-links { list-style: none; padding: 0; margin: 0; }
.map-links li { margin-bottom: .35rem; padding-left: .75rem; }
.map-tabs { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--rule); margin: 0 0 1rem; }
.map-tabs button {
  font: inherit; font-weight: 700; color: var(--muted); background: none; border: 0;
  border-bottom: 2px solid transparent; padding: .35rem 0; margin-bottom: -1px; cursor: pointer;
}
.map-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.map-tabs button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.map-about { margin-bottom: 1rem; }
.map-about h4, .role-section h4 { font-size: .95rem; margin: .9rem 0 .3rem; }
.map-about p, .map-about ul, .map-about ol { margin: 0 0 .5rem; }
.map-about ul, .map-about ol { padding-left: 1.3rem; }
.map-count { color: var(--muted); font-size: .85rem; }
.map-count::before { content: "· "; }
.map-count.none { font-style: italic; }
.map-panel .link {
  font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.map-panel .link:hover { text-decoration: underline; }
.map-panel a { color: var(--accent); }
.status-msg .folder-ids { width: auto; margin: 1.25rem auto 0; text-align: left; color: var(--ink); }
.folder-ids code { user-select: all; }

@media (max-width: 720px) {
  .sheet { padding: 1.5rem 1.25rem; }
  .map { grid-template-columns: 1fr; }
  .map-panel { border-left: none; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1rem; }
  .charts { grid-template-columns: 1fr; }
  .report-head h2 { font-size: 1.8rem; }
  .role-person { font-size: 2.2rem; }
  .role-name { font-size: 1.7rem; }
}

/* ---------- print: only the sheet, always light ---------- */
@page { size: A4; margin: 14mm; }
@media print {
  :root {
    --paper: #fff; --ink: #000; --muted: #444; --rule: #bbb; --danger: #a00; --accent: #3348a8;
    --circle-fill: #eef1fa; --subcircle-fill: #dde3f5; --role-fill: #8f9fe0; --circle-stroke: #9aa8dc;
    --mandatory-fill: #f0b75e; --mandatory-stroke: #b9802a;
    color-scheme: light;
  }
  body { background: #fff; font-size: 10.5pt; }
  .toolbar, .empty, .status-msg { display: none !important; }
  .desk { padding: 0; }
  .sheet { box-shadow: none; padding: 0; max-width: none; min-height: 0; }
  .chart-box { height: 200px; }
  .table-wrap { overflow: visible; }
  thead { display: table-header-group; } /* repeat header on each page */
  .role-page + .role-page { break-before: page; margin-top: 0; padding-top: 0; border-top: none; }
  .role-person { font-size: 32pt; }
  .role-name { font-size: 22pt; }
  .map { display: block; }
  .map-panel, .map-tip { display: none; }
  #map-svg { height: auto; aspect-ratio: 1; }
  .swatch, #map-svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}