/* Coleggo: "paper on a desk". Warm desk-mat surface, plain sheets, ink, square corners.
   Night mode uses a calm charcoal-blue palette (like Jira's dark theme). */
:root {
  --desk: #e7e4dc;
  --desk-grid: rgba(40, 35, 25, 0.05);
  --paper: #fbfaf6;
  --bar: #fbfaf6;
  --ink: #1b1b1a;
  --ink-soft: #55534e;
  --rule: #d9d5cb;
  --rule-strong: #1b1b1a;
  --accent: #1b1b1a;          /* buttons and selected things */
  --accent-ink: #fbfaf6;      /* text on --accent */
  --accent-hover: #fbfaf6;
  --accent-hover-ink: #1b1b1a;
  --note: #f4e48c;
  --note-ink: #3a3410;
  --error: #b42318;
  --shadow: 0 1px 0 rgba(30, 25, 15, 0.06), 0 6px 18px -10px rgba(30, 25, 15, 0.25);
  --mono: "Courier Prime", "Courier New", ui-monospace, monospace;
  --sans: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
}
/* Night: follows the computer setting unless the visitor picked day or night. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --desk: #1d2125;
    --desk-grid: rgba(166, 197, 226, 0.03);
    --paper: #22272b;
    --bar: #1d2125;
    --ink: #c7d1db;
    --ink-soft: #9fadbc;
    --rule: #38414a;
    --rule-strong: #596773;
    --accent: #579dff;
    --accent-ink: #1d2125;
    --accent-hover: #85b8ff;
    --accent-hover-ink: #1d2125;
    --note: #533f04;
    --note-ink: #f8e6a0;
    --error: #f87168;
    --shadow: 0 1px 1px rgba(3, 4, 4, 0.5), 0 0 1px rgba(3, 4, 4, 0.5);
  }
}
:root[data-theme="dark"] {
  --desk: #1d2125;
  --desk-grid: rgba(166, 197, 226, 0.03);
  --paper: #22272b;
  --bar: #1d2125;
  --ink: #c7d1db;
  --ink-soft: #9fadbc;
  --rule: #38414a;
  --rule-strong: #596773;
  --accent: #579dff;
  --accent-ink: #1d2125;
  --accent-hover: #85b8ff;
  --accent-hover-ink: #1d2125;
  --note: #533f04;
  --note-ink: #f8e6a0;
  --error: #f87168;
  --shadow: 0 1px 1px rgba(3, 4, 4, 0.5), 0 0 1px rgba(3, 4, 4, 0.5);
}

* { box-sizing: border-box; border-radius: 0; }
html { background: var(--desk); }
body {
  margin: 0;
  min-height: 100vh;
  font: 15px/1.55 var(--sans);
  color: var(--ink);
  background-color: var(--desk);
  /* faint cutting-mat grid */
  background-image:
    linear-gradient(var(--desk-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--desk-grid) 1px, transparent 1px);
  background-size: 28px 28px;
}
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 1rem; }
h2 { font-size: 1.2rem; font-weight: 600; margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }

.label, .date, .topbar nav, .badge-foot, .value, dt, .field-label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.label { color: var(--ink-soft); margin: 0 0 .4rem; }
.muted { color: var(--ink-soft); }
.small { font-size: .82rem; margin: 1rem 0 0; }
small { font-size: .8rem; font-weight: 400; }
.error { color: var(--error); border-left: 3px solid var(--error); padding-left: .7rem; }

/* --- Top bar: the edge of the desk --- */
.topbar {
  display: flex; align-items: center; gap: 2rem;
  padding: .9rem 1.5rem;
  background: var(--bar);
  border-bottom: 1px solid var(--rule-strong);
}
.brand { font-family: var(--mono); font-weight: 500; font-size: .95rem; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; }
.topbar nav { display: flex; gap: 1.5rem; align-items: center; }
.topbar nav a, .topbar nav .link { text-decoration: none; color: var(--ink-soft); }
.topbar nav a:hover, .topbar nav .link:hover { color: var(--ink); }
.date { margin-left: auto; color: var(--ink-soft); }
.theme-toggle {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  background: transparent; color: var(--ink-soft); border: 1px solid var(--rule); padding: .3rem .6rem;
}
.theme-toggle:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

main { max-width: 900px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

/* --- Sheets of paper --- */
.sheet {
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  padding: 2rem;
  margin-bottom: 1.5rem;
}
.narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.foot { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); }

/* Sticky note for confirmations */
.note {
  display: inline-block;
  background: var(--note); color: var(--note-ink);
  padding: .55rem 1rem; margin: 0 0 1.5rem;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .05em;
  box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .45);
  transform: rotate(-1deg);
}

/* --- Forms --- */
.stack { display: flex; flex-direction: column; gap: 1.2rem; }
.stack.tight { gap: .5rem; }
.row { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.inline { display: inline; margin: 0; }

label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--ink-soft); }
input:not([type=radio]):not([type=checkbox]):not([type=file]), textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--ink-soft);
  padding: .35rem 0;
}
textarea { border: 1px solid var(--rule); padding: .5rem .6rem; resize: vertical; }
input:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
textarea:focus { box-shadow: inset 0 0 0 1px var(--ink); }
label.check { flex-direction: row; align-items: center; gap: .5rem; color: var(--ink); }
label.check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }

button, .button {
  font: 500 .9rem var(--sans); cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent);
  padding: .65rem 1.3rem;
  display: inline-block; text-decoration: none; text-align: center;
}
button:hover, .button:hover { background: var(--accent-hover); color: var(--accent-hover-ink); border-color: var(--accent); }
button:focus-visible, .button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.button.secondary { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.button.secondary:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.link { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-soft); }
button.spaced { margin-top: 1.5rem; }

.photo-field { display: flex; gap: 1.25rem; align-items: flex-start; }
.file-button { position: relative; align-self: flex-start; font-size: .85rem; padding: .45rem .9rem; }
.file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-button:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }

/* --- Photos --- */
.photo {
  flex: none; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--rule);
  color: var(--ink-soft);
  font-family: var(--mono); font-size: 1.6rem; letter-spacing: .05em;
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.15) contrast(1.02); }
.photo.medium { width: 96px; font-size: 1.3rem; }
.photo.large { width: 180px; font-size: 2.4rem; }

/* --- Directory --- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.page-head h1 { margin: 0; }
.search input { width: 280px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.25rem; }
.badge {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow);
  text-decoration: none; color: var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.badge:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 12px 24px -12px rgba(30,25,15,.35); }
.badge .photo { width: 100%; aspect-ratio: 1 / 1; font-size: 2rem; }
.badge-body { display: flex; flex-direction: column; padding: .9rem 1rem .75rem; flex: 1; }
.badge-body strong { font-weight: 600; margin-bottom: .15rem; }
.badge-body .muted { font-size: .85rem; line-height: 1.4; }
.badge-foot { display: flex; justify-content: space-between; padding: .55rem 1rem; border-top: 1px solid var(--rule); color: var(--ink-soft); }
.badge-foot span:last-child { color: var(--ink); }

/* --- Profile: an ID card --- */
.id-card { display: grid; grid-template-columns: 180px 1fr; gap: 2rem; }
.id-body h1 { margin-bottom: 1.25rem; }
.id-body dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.5rem; margin: 0 0 1.5rem; }
dt { color: var(--ink-soft); margin-bottom: .1rem; }
dd { margin: 0; }
.bio { grid-column: 1 / -1; white-space: pre-line; margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); }

/* Trait scores: a ruler with a filled ink line */
.traits { margin-top: 1rem; border-top: 1px solid var(--rule); }
.trait-row { display: grid; grid-template-columns: 140px 1fr 72px; gap: 1rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.scale {
  position: relative; height: 10px;
  background-image: linear-gradient(90deg, var(--ink-soft) 1px, transparent 1px);
  background-size: 25% 100%;
  border-right: 1px solid var(--ink-soft);
  opacity: 1;
}
.scale::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule); }
.scale span { position: absolute; left: 0; top: 3px; height: 4px; background: var(--accent); }
.value { text-align: right; font-size: .85rem; letter-spacing: .02em; }
.value small { color: var(--ink-soft); font-size: .72rem; }

/* Rating form: a paper form with square boxes */
.form-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border: 0; border-bottom: 1px solid var(--rule); margin: 0; padding: .8rem 0; }
.form-row:first-of-type { border-top: 1px solid var(--rule); margin-top: 1rem; }
.form-row legend { float: left; display: flex; flex-direction: column; padding: 0; }
.boxes { display: flex; gap: .35rem; }
.box { position: relative; }
.box input { position: absolute; opacity: 0; pointer-events: none; }
.box span {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid var(--ink-soft); cursor: pointer;
  font-family: var(--mono); font-size: .85rem; color: var(--ink);
}
.box:hover span { border-color: var(--ink); }
.box input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.box input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.box.skip span { color: var(--ink-soft); border-style: dashed; }
.box.skip input:checked + span { background: transparent; color: var(--ink); border: 1px solid var(--ink); }

/* --- Small screens --- */
@media (max-width: 640px) {
  .topbar { gap: 1rem; padding: .8rem 1rem; flex-wrap: wrap; }
  .date { display: none; }
  .topbar nav { margin-left: auto; gap: 1rem; }
  .theme-toggle { order: 3; }
  main { padding: 1.5rem 1rem 3rem; }
  .sheet { padding: 1.25rem; }
  .two { grid-template-columns: 1fr; }
  .search, .search input { width: 100%; }
  .badges { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .id-card { grid-template-columns: 1fr; gap: 1.25rem; }
  .photo.large { width: 140px; }
  .trait-row { grid-template-columns: 1fr 64px; }
  .trait-row .scale { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- v0.3: roles, networks, admin ---------- */
.topbar nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.count { display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; padding: 0 .3em; margin-left: .2em; background: var(--accent); color: var(--accent-ink); font-size: .65rem; letter-spacing: 0; }
.tag { display: inline-block; vertical-align: middle; margin-left: .25rem; padding: .05rem .4rem; border: 1px solid var(--ink-soft); font: 500 .6rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.hint { background: var(--note); color: var(--note-ink); padding: .6rem .9rem; font-size: .9rem; }
.hint a { color: inherit; }
.mono { font-family: var(--mono); font-size: .85rem; }
.right { text-align: right; }
.block { display: block; }
.push-right { margin-left: auto; }
.sheet.wide { max-width: 640px; }
button.link.danger, .danger { color: var(--error); }
.secondary-btn { background: transparent; color: var(--ink); }
.secondary-btn:hover { background: var(--accent); color: var(--accent-ink); }

select {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink-soft);
  padding: .35rem 1.4rem .35rem 0; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
select:focus { outline: none; border-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
select option { background: var(--paper); color: var(--ink); }

fieldset.group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
fieldset.group legend { font-size: .85rem; color: var(--ink-soft); padding: 0; margin-bottom: .4rem; }
.checks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* Tabs: like index-card dividers */
.tabs { display: flex; gap: 0; margin: 0 0 1.5rem; border-bottom: 1px solid var(--rule-strong); flex-wrap: wrap; }
.tabs a { padding: .55rem 1rem; text-decoration: none; color: var(--ink-soft); font: .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { background: var(--paper); color: var(--ink); border-color: var(--rule-strong); }

/* Ruled tables */
.table-wrap { overflow-x: auto; margin-top: 1rem; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font: 500 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); padding: .5rem .75rem .5rem 0; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
th small { display: block; font-size: .62rem; letter-spacing: .04em; text-transform: none; }
td { padding: .6rem .75rem .6rem 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
td:last-child, th:last-child { padding-right: 0; }

.add-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.25rem; margin: 1.25rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.add-row > label:first-child { flex: 1 1 220px; }
.inline-edit { display: flex; gap: .75rem; align-items: center; }
.inline-edit input { flex: 1; min-width: 0; }

/* In brief: typed sentences */
.sentences { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.sentences li { padding: .8rem 0 .8rem 1.6rem; border-bottom: 1px solid var(--rule); position: relative; font-size: 1.02rem; }
.sentences li::before { content: ""; position: absolute; left: .2rem; top: 1.35rem; width: 6px; height: 6px; background: var(--ink-soft); }

.trait-row { grid-template-columns: 140px 1fr 72px 56px; }
.trend-cell { text-align: right; }
.trend { font: .72rem var(--mono); }
.trend.up { color: var(--ink); }
.trend.down { color: var(--error); }
.trend.flat { color: var(--ink-soft); }

.people-list { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.people-list li { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.people-list .muted { font-size: .85rem; }
.photo.tiny { width: 28px; font-size: .65rem; }

.request { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.request:first-of-type { border-top: 1px solid var(--rule); margin-top: 1rem; }
.request .muted { font-size: .85rem; margin-right: .35rem; }
.request .arrow { font: .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; margin: 0 .5rem; }

.rules { margin-top: 1.25rem; border-top: 1px solid var(--rule-strong); }
.rule { display: flex; gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.rule-form { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; flex: 1; }
.rule-form > input, .new-rule > input { flex: 1 1 100%; }
.rule-cond { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; font-size: .9rem; }
.rule-cond select { font-size: .9rem; }
.new-rule { flex-wrap: wrap; border: 1px dashed var(--ink-soft); padding: 1rem; margin-top: 1rem; }
.new-rule .label { flex: 1 1 100%; margin: 0; }

@media (max-width: 640px) {
  .trait-row { grid-template-columns: 1fr 64px 48px; }
  .trait-row .scale { grid-column: 1 / -1; grid-row: 2; }
  .rule { flex-direction: column; align-items: stretch; }
}

/* Top bar with more links: date goes first on medium screens; menu gets its own row on phones */
@media (max-width: 1000px) { .date { display: none; } .theme-toggle { margin-left: auto; } }
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; row-gap: .6rem; }
  .topbar nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; white-space: nowrap; padding-bottom: .2rem; }
  .theme-toggle { order: 2; margin-left: auto; }
}

[hidden] { display: none !important; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.sheet-head h2 { margin: 0 0 .5rem; }
input.full { width: 100%; }
.sheet-head .button { flex: none; }
.credentials { margin: 1.25rem 0; border-top: 1px solid var(--rule); }
.credentials > div { display: grid; grid-template-columns: 170px 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.credentials dd { font-size: 1rem; word-break: break-all; }
table.groups td:not(:first-child), table.groups th:not(:first-child) { text-align: right; }
table.groups tr.total td { border-top: 1px solid var(--rule-strong); }
table.records td:nth-child(n+5), table.records th:nth-child(n+5) { text-align: right; }
table.records { font-size: .88rem; }
.button.small { padding: .4rem .8rem; font-size: .82rem; }
.table-filter { width: 100%; margin-bottom: .75rem; }

/* Admin → Settings: a ruled line under each section, like sections on a paper form */
.settings-form.stack { gap: 0; }
.settings-form.stack > * { padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
.settings-form.stack > * + * { margin-top: 1.25rem; }
.settings-form.stack > *:last-child { border-bottom: 0; padding-bottom: 0; }

/* Sortable column headers */
th button.sort { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
th button.sort:hover { color: var(--ink); background: none; }
th button.sort::after { content: "↕"; margin-left: .3em; opacity: .35; }
th[aria-sort="ascending"] button.sort::after { content: "▲"; opacity: 1; }
th[aria-sort="descending"] button.sort::after { content: "▼"; opacity: 1; }
th[aria-sort] { color: var(--ink); }
table.records th, table.records td { white-space: nowrap; padding-right: .9rem; }
.sheet-head .row { flex-wrap: nowrap; gap: .75rem; }
@media (max-width: 640px) { .sheet-head { flex-wrap: wrap; } .sheet-head .row { flex-wrap: wrap; } }
main.wide { max-width: 1240px; }
.sheet-head > div:first-child { flex: 1; min-width: 0; }

/* ---------- v0.6 top bar: log-out icon left, lamp next to the date, avatar right ---------- */
.topbar { gap: 1.5rem; }
.topbar .logout { display: flex; }
.icon-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
  background: transparent; color: var(--ink-soft); border: 1px solid transparent;
}
.icon-btn:hover { background: transparent; color: var(--ink); border-color: var(--rule); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.topbar-right .date { margin-left: 0; }
.theme-toggle.icon-btn { border: 1px solid transparent; padding: 0; }
.theme-toggle .rays { stroke: #c9a227; }
/* Lamp on = day mode, lamp off = night mode. */
.lamp-off { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lamp-on { display: none; }
  :root:not([data-theme="light"]) .lamp-off { display: block; }
}
:root[data-theme="dark"] .lamp-on { display: none; }
:root[data-theme="dark"] .lamp-off { display: block; }
:root[data-theme="light"] .lamp-on { display: block; }
:root[data-theme="light"] .lamp-off { display: none; }

.avatar-link { display: block; border: 1px solid var(--rule); padding: 1px; }
.avatar-link:hover, .avatar-link[aria-current="page"] { border-color: var(--ink); }
.photo.avatar { width: 30px; aspect-ratio: 1 / 1; font-size: .7rem; }

@media (max-width: 1000px) { .topbar-right .date { display: none; } }
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; row-gap: .6rem; }
  .topbar nav { order: 5; width: 100%; margin-left: 0; overflow-x: auto; white-space: nowrap; }
  .topbar-right { order: 3; }
}

.topbar-right .theme-toggle { margin-left: 0; order: 0; }

/* Department colour + icon. --dept is set per element; --dept-c is the version to draw with
   (lightened at night so it stays readable on dark paper). */
.dept-tag, .badge, .chip, .id-card { --dept-c: var(--dept, var(--ink-soft)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.dept-tag, .badge, .chip, .id-card) { --dept-c: color-mix(in srgb, var(--dept, var(--ink-soft)) 62%, white); }
}
:root[data-theme="dark"] :is(.dept-tag, .badge, .chip, .id-card) { --dept-c: color-mix(in srgb, var(--dept, var(--ink-soft)) 62%, white); }
.dept-tag { display: inline-flex; align-items: center; gap: .35rem; color: var(--dept-c); }
.dept-tag span { color: var(--ink-soft); }

/* Colleagues: badges carry their department's colour band and icon */
.badge { border-top: 4px solid var(--dept-c); position: relative; }
.badge .photo.empty { background: color-mix(in srgb, var(--dept-c) 16%, var(--paper)); color: var(--dept-c); }
.badge-body { position: relative; overflow: hidden; gap: .1rem; }
.badge-body .dept-tag { margin-top: .35rem; font-size: .84rem; }
.badge-mark { position: absolute; right: -10px; bottom: -14px; color: var(--dept-c); opacity: .09; pointer-events: none; }
.badge:hover { border-top-color: var(--dept-c); }

/* Department chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: -0.5rem 0 1.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font: 500 .8rem var(--sans); padding: .35rem .7rem;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule);
  border-left: 3px solid var(--dept-c);
}
.chip svg { color: var(--dept-c); }
.chip:hover { background: var(--paper); color: var(--ink); border-color: var(--ink-soft); border-left-color: var(--dept-c); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); border-left-color: var(--dept-c); }
.chip[aria-pressed="true"] svg { color: var(--paper); }
.chip-count { font: .7rem var(--mono); opacity: .7; }

/* Profile ID card gets the department colour too */
.id-card { border-top: 4px solid var(--dept-c); }

/* Admin → Departments: look column and picker */
.dept-swatch { display: inline-grid; place-items: center; width: 34px; height: 34px; background: var(--dept); color: #fff; }
table.departments td { vertical-align: top; }
table.departments td small { display: block; margin-top: .3rem; }
.look-picker { margin-top: .4rem; font-size: .85rem; }
.look-picker summary { cursor: pointer; color: var(--ink-soft); }
.look-picker summary:hover { color: var(--ink); }
.look-picker fieldset { border: 0; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.look-picker legend { font: .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .35rem; padding: 0; }
.swatch, .icon-choice { position: relative; flex-direction: row; }
.swatch input, .icon-choice input { position: absolute; opacity: 0; pointer-events: none; }
.swatch span { display: block; width: 26px; height: 26px; background: var(--dept); border: 2px solid transparent; outline: 1px solid var(--rule); cursor: pointer; }
.swatch em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.swatch input:checked + span { border-color: var(--paper); outline: 2px solid var(--ink); }
.icon-choice span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--rule); color: var(--ink-soft); cursor: pointer; }
.icon-choice input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.swatch input:focus-visible + span, .icon-choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.add-department .look-picker { flex: 1 1 100%; }
.add-department > small { flex: 1 1 100%; margin-top: -.5rem; }

/* Views by group: numbers and arrows stay on one line; long team names wrap in the header */
table.groups td { white-space: nowrap; }
table.groups th { white-space: normal; vertical-align: bottom; line-height: 1.35; min-width: 4.5rem; }
table.groups th:first-child { min-width: 0; }
table.groups th small { display: block; font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; }
table.groups .mark { display: inline-block; width: 1.1em; text-align: right; }

/* Scrollbars and form controls follow day / night mode */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
@media (max-width: 640px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -1rem; padding: 0 1rem .35rem 0; scrollbar-width: none; }
  .chip { flex: none; }
}

/* Colleagues: "Your network" first, then everyone else */
.badge-group + .badge-group { margin-top: 2.5rem; }
.group-title { font: 500 .78rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--rule-strong); }

/* ---------- v0.7 Colleagues: stamps, paper clips, progress, folder tabs, org chart ---------- */

/* Rubber stamps on the photo corner */
.badge-photo { position: relative; display: block; }
.stamps { position: absolute; top: .6rem; right: .5rem; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; pointer-events: none; }
.stamp {
  font: 600 .62rem var(--mono); letter-spacing: .14em; text-transform: uppercase;
  padding: .2rem .45rem; border: 2px solid currentColor; background: color-mix(in srgb, var(--paper) 78%, transparent);
  transform: rotate(-7deg); opacity: .92;
}
.stamp.to-review { color: #b5553f; }
.stamp.new { color: #34507a; transform: rotate(5deg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stamp.to-review { color: #ef9a85; }
  :root:not([data-theme="light"]) .stamp.new { color: #9db6e0; }
}
:root[data-theme="dark"] .stamp.to-review { color: #ef9a85; }
:root[data-theme="dark"] .stamp.new { color: #9db6e0; }

/* A paper clip on the cards of people in your network */
.badge .clip { position: absolute; top: -14px; left: 14px; z-index: 2; color: var(--ink-soft); transform: rotate(-8deg); }
.badge:hover .clip { color: var(--ink); }

/* Review progress: a pencil line */
.progress { display: flex; align-items: center; gap: 1rem; margin: -.4rem 0 1.4rem; flex-wrap: wrap; }
.progress-line { position: relative; flex: 0 0 220px; height: 6px; background: repeating-linear-gradient(90deg, var(--rule) 0 6px, transparent 6px 9px); }
.progress-line span { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.progress .small { margin: 0; }

/* Folder-tab dividers instead of chips */
.chips { display: none; }
.folder-tabs { display: flex; flex-wrap: wrap; gap: 0 .2rem; align-items: flex-end; margin: 0; padding-left: .5rem; position: relative; z-index: 1; }
.ftab {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem;
  font: 500 .78rem var(--sans); padding: .45rem .8rem .4rem;
  background: color-mix(in srgb, var(--paper) 70%, var(--desk)); color: var(--ink-soft);
  border: 1px solid var(--rule); border-bottom: 0; border-top: 3px solid var(--dept-c);
  margin-bottom: -1px;
}
.ftab svg { color: var(--dept-c); }
.ftab:hover { background: var(--paper); color: var(--ink); border-top-color: var(--dept-c); }
.ftab[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--rule-strong); border-top: 3px solid var(--dept-c, var(--ink)); padding-bottom: .55rem; }
.ftab[aria-pressed="true"] svg { color: var(--dept-c); }
.ftab, .chip { --dept-c: var(--dept, var(--ink)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ftab { --dept-c: color-mix(in srgb, var(--dept, var(--ink)) 62%, white); }
}
:root[data-theme="dark"] .ftab { --dept-c: color-mix(in srgb, var(--dept, var(--ink)) 62%, white); }
.drawer { border-top: 1px solid var(--rule-strong); padding-top: 2rem; }

/* Cards / Org chart switch and the "/" hint */
.view-switch { display: flex; gap: 1rem; margin-top: .6rem; font: .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.view-switch a { color: var(--ink-soft); text-decoration: none; padding-bottom: .15rem; border-bottom: 1px solid transparent; }
.view-switch a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.search { position: relative; }
.key-hint { position: absolute; right: 0; bottom: .45rem; font: .7rem var(--mono); color: var(--ink-soft); border: 1px solid var(--rule); padding: 0 .35rem; background: var(--paper); }
.search input:focus + .key-hint, .search input:not(:placeholder-shown) + .key-hint { display: none; }

/* Org chart: pinned notes on the desk */
.org { display: flex; flex-direction: column; gap: 2.5rem; }
.org-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; }
.org-top { grid-template-columns: repeat(auto-fill, minmax(260px, 320px)); justify-content: center; }
.org-branch { display: flex; flex-direction: column; gap: 1.25rem; padding-top: 1.5rem; border-top: 1px dashed var(--rule); }
.org-branch > .label { margin: 0; }
.org-note { position: relative; background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow); padding: 1.1rem 1rem 1rem; }
.org-note .label { margin-bottom: .5rem; }
.pin { position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--dept-c, #b5553f); box-shadow: 0 2px 2px rgba(0, 0, 0, .25); }
.org-note { --dept-c: var(--dept, #b5553f); }
.director-note { max-width: 320px; }
.dept-note { border-top: 4px solid var(--dept-c); }
.dept-note h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .75rem; font-size: 1rem; }
.dept-note h3 svg { color: var(--dept-c); }
.org-person { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); padding: .25rem 0; }
.org-person span { display: flex; flex-direction: column; line-height: 1.3; }
.org-person small { color: var(--ink-soft); font-size: .78rem; }
.org-person .photo.tiny { width: 30px; }
.org-managers { padding-bottom: .6rem; margin-bottom: .6rem; border-bottom: 1px solid var(--rule); }
.org-staff { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1rem; font-size: .84rem; }
.org-staff li { break-inside: avoid; padding: .12rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-staff a { color: var(--ink-soft); text-decoration: none; }
.org-staff a:hover { color: var(--ink); text-decoration: underline; }
.org-more { margin-top: .4rem; font-size: .8rem; }
.org-more summary { cursor: pointer; color: var(--ink-soft); }

@media (max-width: 640px) {
  .folder-tabs { flex-wrap: nowrap; overflow-x: auto; margin-right: -1rem; padding-right: 1rem; scrollbar-width: none; }
  .ftab { flex: none; }
  .progress-line { flex-basis: 140px; }
}
.org-top { display: flex; justify-content: center; flex-wrap: wrap; }
.org-top .org-note { width: min(320px, 100%); }
@media (hover: none) { .key-hint { display: none; } }

/* ---------- v0.8 polish ---------- */
/* Labels: parts are spaced apart instead of separated by a symbol */
.label > span + span { margin-left: 1.4em; }

/* Folder tabs: always one tidy row; scroll sideways when there are many (a fade shows there's more) */
.folder-tabs {
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  padding: .4rem 2.5rem 0 .5rem; margin: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
}
.folder-tabs.at-end { -webkit-mask-image: none; mask-image: none; }
.folder-tabs::-webkit-scrollbar { display: none; }
.ftab { flex: none; margin-top: 0; white-space: nowrap; padding: .45rem .8rem; }
.ftab[aria-pressed="true"] { padding-bottom: .45rem; border-bottom: 1px solid var(--paper); position: relative; z-index: 1; }
.drawer { border-top-color: var(--rule-strong); }

/* Typewriter labels read better slightly tighter */
.label, .date, .topbar nav, .badge-foot, .value, dt, .field-label, .tabs a, .view-switch, .group-title { letter-spacing: .06em; }
.brand { font-weight: 700; letter-spacing: .2em; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.015em; }

/* Rating form: the Skip box holds a word now */
.box.skip span { width: auto; padding: 0 .6rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }

/* Night mode details in the Jira-like palette */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .note { box-shadow: none; }
  :root:not([data-theme="light"]) .ftab { background: #1d2125; }
  :root:not([data-theme="light"]) .ftab:hover, :root:not([data-theme="light"]) .ftab[aria-pressed="true"] { background: var(--paper); }
  :root:not([data-theme="light"]) .badge:hover { background: #282e33; }
}
:root[data-theme="dark"] .note { box-shadow: none; }
:root[data-theme="dark"] .ftab { background: #1d2125; }
:root[data-theme="dark"] .ftab:hover, :root[data-theme="dark"] .ftab[aria-pressed="true"] { background: var(--paper); }
:root[data-theme="dark"] .badge:hover { background: #282e33; }
/* Role label sits in the photo corner, so names always stay on one line */
.role-label { position: absolute; left: .55rem; bottom: .55rem; font: 700 .6rem var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: .15rem .4rem; background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); }
.badge-body strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Room for the "/" hint at the end of the search box */
.search input { padding-right: 2.2rem; }
.search input[type="search"]:not([type=radio]):not([type=checkbox]):not([type=file]) { padding-right: 2.4rem; }

/* Arrow buttons at the ends of the department tabs (shown only when there are hidden tabs) */
.tabs-wrap { position: relative; }
.tab-arrow {
  position: absolute; top: .4rem; bottom: 1px; z-index: 3; width: 34px; padding: 0;
  display: grid; place-items: center;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule);
  box-shadow: var(--shadow);
}
.tab-arrow[hidden] { display: none; }
.tab-arrow.prev { left: 0; }
.tab-arrow.next { right: 0; }
.tab-arrow:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.folder-tabs { cursor: grab; user-select: none; }
.folder-tabs.dragging { cursor: grabbing; }
.folder-tabs.dragging .ftab { pointer-events: none; }
/* Fade on whichever side has hidden tabs */
.folder-tabs:not(.at-start):not(.at-end) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
.folder-tabs.at-end:not(.at-start) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem); mask-image: linear-gradient(90deg, transparent, #000 3rem); }

/* v0.9 */
.org-branch > .director-note { align-self: center; width: min(320px, 100%); }
.view-switch a { word-spacing: -0.35em; }  /* "Org chart" reads as one label in the typewriter font */
.topbar .logout { margin-left: .1rem; }
.summary-settings { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; margin: 1rem 0 1.5rem; border: 1px solid var(--rule); }
.summary-settings .label, .summary-settings p { margin: 0; }

/* Live demo */
.demo-banner { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; padding: .6rem 1.5rem; background: var(--note); color: var(--note-ink); font-size: .88rem; border-bottom: 1px solid var(--rule); }
.demo-banner strong { font: 700 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.demo-logins { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.demo-logins .row { gap: .5rem; }
.demo-logins button { padding: .45rem .9rem; font-size: .85rem; border: 1px solid var(--rule-strong); }
.demo-banner { flex-wrap: nowrap; }
.demo-banner span { flex: 1; min-width: 0; }
@media (max-width: 640px) { .demo-banner { flex-wrap: wrap; padding: .6rem 1rem; } }

/* Top bar stays at the top of the screen while scrolling */
.topbar { position: sticky; top: 0; z-index: 100; }
.topbar.scrolled { box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .35); }
/* Jumping to a section (e.g. the rating form) lands below the bar, not under it */
html { scroll-padding-top: 5rem; }

/* "Are you sure?" dialog: a small sheet of paper over a dimmed desk */
.confirm-dialog { border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); padding: 1.5rem; width: min(400px, calc(100vw - 2rem)); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55); }
.confirm-dialog::backdrop { background: rgba(20, 18, 14, .45); }
.confirm-dialog form { margin: 0; }
.confirm-text { margin: 0 0 1.25rem; font-size: 1rem; }
.confirm-dialog .row { justify-content: flex-end; gap: .6rem; }
.confirm-dialog .secondary-btn { border: 1px solid var(--rule-strong); }
.small-check { font-size: .82rem; margin-top: .35rem; }

/* Department emblem on each card: a crisp line icon on a tinted tile (replaces the big faded watermark) */
.badge-mark { display: none; }
.badge-body { padding-right: 3.6rem; }
.badge-emblem {
  position: absolute; top: .85rem; right: .85rem;
  display: grid; place-items: center; width: 40px; height: 40px;
  color: var(--dept-c);
  background: color-mix(in srgb, var(--dept-c) 12%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--dept-c) 45%, var(--paper));
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--dept-c) 28%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.badge-emblem svg { stroke-width: 1.7; }
.badge:hover .badge-emblem { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 color-mix(in srgb, var(--dept-c) 40%, transparent); }
/* Small colour square before the department name (the emblem already shows the icon) */
.dept-dot { display: inline-block; width: 8px; height: 8px; background: var(--dept-c); }

/* v1.0: profile reporting lines */
.reporting { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem 2rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.reporting .label { margin-bottom: .6rem; }
.chips-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.person-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .7rem .3rem .3rem; border: 1px solid var(--rule); text-decoration: none; color: var(--ink); background: var(--paper); }
.person-chip:hover { border-color: var(--ink-soft); }
.person-chip span { display: flex; flex-direction: column; line-height: 1.25; font-size: .86rem; }
.person-chip small { color: var(--ink-soft); font-size: .74rem; }
.person-chip .photo.tiny { width: 28px; }
.faq-hint { margin: 1.5rem 0 0; text-align: center; }
.badge-emblem { cursor: pointer; z-index: 2; }
.badge-emblem:hover { background: var(--dept-c); color: var(--paper); }
.badge-emblem:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Green "Save" buttons (Summary sentences, FAQ) */
:root { --ok: #2f7a4f; --ok-ink: #ffffff; --ok-hover: #256340; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ok: #4bce97; --ok-ink: #1d2125; --ok-hover: #7ee2b8; } }
:root[data-theme="dark"] { --ok: #4bce97; --ok-ink: #1d2125; --ok-hover: #7ee2b8; }
.btn-ok { background: var(--ok); border-color: var(--ok); color: var(--ok-ink); padding: .45rem 1.1rem; font-size: .85rem; }
.btn-ok:hover { background: var(--ok-hover); border-color: var(--ok-hover); color: var(--ok-ink); }
.rule-actions { display: flex; flex-direction: column; align-items: center; gap: .55rem; flex: none; min-width: 80px; }
.save-row { margin-top: 1.5rem; }

/* FAQ */
.faq-list { margin: 1.25rem 0 0; border-top: 1px solid var(--rule); }
.faq-item { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.faq-item dt { font-weight: 700; font-size: 1.02rem; margin-bottom: .35rem; }
.faq-item dd { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.faq-edit { margin-top: .6rem; font-size: .85rem; }
.faq-edit summary { cursor: pointer; color: var(--ink-soft); }
.faq-edit form { margin: .75rem 0; }
.faq-edit .row { gap: 1rem; }
.faq-add { margin-top: 1.75rem; padding: 1rem; border: 1px dashed var(--ink-soft); }
.faq-add .label { margin: 0; }

/* NEW and TO REVIEW as post-it notes stuck on the photo */
.stamps { top: .55rem; right: .45rem; gap: .45rem; }
.stamp {
  position: relative; border: 0; opacity: 1;
  font: 700 .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: .55rem .6rem .45rem; min-width: 4.4rem; text-align: center;
  color: #3b3415; background: #f6e27a;
  box-shadow: 0 6px 8px -6px rgba(0, 0, 0, .45), inset 0 -10px 12px -12px rgba(0, 0, 0, .25);
  transform: rotate(3deg);
}
/* a strip of tape on top */
.stamp::before { content: ""; position: absolute; top: -6px; left: 50%; width: 26px; height: 10px; margin-left: -13px; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .04); transform: rotate(-4deg); }
.stamp.to-review { color: #4a1f1c; background: #f7b9ae; transform: rotate(-4deg); }
.stamp.new { color: #3b3415; background: #f6e27a; transform: rotate(4deg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stamp.to-review { color: #4a1f1c; background: #e9a397; }
  :root:not([data-theme="light"]) .stamp.new { color: #3b3415; background: #e3cf6a; }
}
:root[data-theme="dark"] .stamp.to-review { color: #4a1f1c; background: #e9a397; }
:root[data-theme="dark"] .stamp.new { color: #3b3415; background: #e3cf6a; }
.faq-item dt { font-family: var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 1.05rem; font-weight: 700; }
.chips-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .5rem; }
.person-chip { min-width: 0; }
.person-chip span { min-width: 0; }
.person-chip strong, .person-chip span > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Quick filters (NEW / TO REVIEW) as post-it notes, right above the people list */
.quick-filters { display: flex; justify-content: flex-end; gap: 1rem; margin: -.75rem 0 1rem; padding-right: .25rem; }
.stamp.quick { cursor: pointer; font-size: .7rem; padding: .7rem .85rem .55rem; min-width: 6.5rem; transition: transform .15s ease, box-shadow .15s ease; }
.stamp.quick:hover { transform: rotate(0deg) translateY(-2px); }
.stamp.quick.to-review:hover { background: #f7b9ae; color: #4a1f1c; }
.stamp.quick.new:hover { background: #f6e27a; color: #3b3415; }
.stamp.quick[aria-pressed="true"] { transform: rotate(0deg) translateY(1px); box-shadow: inset 0 0 0 2px currentColor, 0 3px 5px -4px rgba(0, 0, 0, .45); }
.quick-count { display: inline-block; margin-left: .35rem; font-weight: 400; opacity: .75; }
.stamp.quick:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 640px) { .quick-filters { justify-content: flex-start; margin-top: 0; } }