/* Shamboo
   One idea, carried everywhere: bamboo grows in segments joined at nodes.
   Approval chains, the nav rail and the org chart are all stalks with nodes. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  --ink: #16241f;
  --ink-soft: #2a3b33;
  --muted: #5c6b61;
  --faint: #8b9890;
  --paper: #f5f7f2;
  --surface: #ffffff;
  --line: #dde3db;
  --line-soft: #ebefe8;
  --jade: #2e7d5b;
  --jade-deep: #1f5c42;
  --jade-wash: #e8f2ec;
  --straw: #c9a227;
  --straw-wash: #fbf3dc;
  --rose: #a93f4a;
  --rose-wash: #f9eaec;
  --slate: #3f7fa6;

  --display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* One type scale, ten steps. Every font-size in the app is one of these:
     before this there were forty, including 0.78, 0.79, 0.80, 0.81, 0.82 and
     0.83rem all at once — differences of a third of a pixel that cost
     nothing to tell apart and everything to keep consistent.
     Body text is --fs-md, and rem is 16px, so the numbers mean what they
     look like they mean. */
  --fs-3xs: 0.72rem;   /* 11.5px — caps, table heads, chart ticks */
  --fs-2xs: 0.78rem;   /* 12.5px — pills, dense meta */
  --fs-xs: 0.82rem;    /* 13px   — list subs, hints, crumbs */
  --fs-sm: 0.88rem;    /* 14px   — secondary text, small buttons */
  --fs-md: 0.94rem;    /* 15px   — body */
  --fs-base: 1rem;     /* 16px   — h3, card titles */
  --fs-lg: 1.1rem;     /* 17.5px — section leads */
  --fs-xl: 1.25rem;    /* 20px   — h2 */
  --fs-2xl: 1.5rem;    /* 24px   — the brand lockup */
  --fs-3xl: 1.85rem;   /* 29.5px — h1 */

  --rail-w: 232px;
  --r-sm: 3px;
  --r-md: 6px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-md)/1.55 var(--body);
  font-feature-settings: 'cv05' 1;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.016em; margin: 0; }
h1 { font-size: var(--fs-3xl); line-height: 1.15; }
h2 { font-size: var(--fs-xl); line-height: 1.25; }
h3 { font-size: var(--fs-base); }

a { color: var(--jade-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--jade); }

:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ------------------------------------------------------------- the rail -- */

.shell { display: flex; min-height: 100vh; }

.rail {
  width: var(--rail-w);
  flex: 0 0 var(--rail-w);
  background: var(--surface);
  border-right: 1px solid var(--line);
  color: var(--ink);
  padding: 20px 0 16px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.rail__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 18px;
  color: var(--ink);
  text-decoration: none;
}
.rail__brand svg { color: var(--jade); flex: 0 0 auto; }
.rail__brand:hover svg { color: var(--jade-deep); }
.rail__wordmark { display: block; }
.rail__brand b {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
/* Only the company line is muted. The previous selector caught the wrapper
   as well, which quietly greyed out the wordmark. */
.rail__company {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--muted);
  letter-spacing: 0.02em;
  font-weight: 400;
}

.rail__nav { padding: 2px 0; flex: 1; overflow-y: auto; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1px 10px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--fs-md);
}
.nav-item:hover { background: #f1f4f0; color: var(--ink); }
.nav-item[aria-current='page'] {
  background: var(--jade-wash);
  color: var(--jade-deep);
  font-weight: 600;
}

.nav-count {
  margin-left: auto;
  background: var(--straw);
  color: #3a2f08;
  font-size: var(--fs-3xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9px;
  font-variant-numeric: tabular-nums;
}

.rail__foot {
  padding: 13px 18px 0;
  border-top: 1px solid var(--line-soft);
  margin-top: 8px;
}
.rail__me { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.rail__role { font-size: var(--fs-3xs); color: var(--muted); }

.rail__links {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 7px;
}
.rail__links form { display: contents; }

.rail__links a,
.rail__links button {
  font: inherit;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-decoration: none;
  cursor: pointer;
}
.rail__links a:hover,
.rail__links button:hover { color: var(--jade-deep); text-decoration: underline; }
.rail__links a:focus-visible,
.rail__links button:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }

/* ------------------------------------------------------------ main area -- */

.main { flex: 1; min-width: 0; padding: 30px 34px 60px; max-width: 1180px; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.page-head p { margin: 5px 0 0; color: var(--muted); max-width: 62ch; }

/* A panel is a bamboo segment: a node line across the top. */
.seg {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  position: relative;
  margin-bottom: 18px;
}
.seg::before {
  content: '';
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 2px;
  background: var(--jade);
  opacity: 0.17;
  border-radius: 2px;
}
/* The node line is a header accent. Without a header it is just a stray
   green rule across the top of the panel. */
.seg--plain::before { display: none; }
/* Even breathing room on all four sides. The chart's own row spacing is
   taken off the first and last rows so the gap above the top card matches
   the gap beside it. */
.seg__body.org { padding: 14px; }

.seg__head {
  padding: 15px 18px 12px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.seg__body { padding: 16px 18px; }
.seg__body--flush { padding: 0; }

.grid-2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* -------------------------------------------------------------- buttons -- */

.btn {
  font: 500 0.9rem/1 var(--body);
  padding: 9px 15px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.btn:hover { border-color: var(--jade); color: var(--jade-deep); }
.btn--primary { background: var(--jade); border-color: var(--jade); color: #fff; font-weight: 600; }
.btn--primary:hover { background: var(--jade-deep); border-color: var(--jade-deep); color: #fff; }
.btn--danger { color: var(--rose); border-color: #e3c4c8; }
.btn--danger:hover { background: var(--rose); border-color: var(--rose); color: #fff; }
.btn--sm { padding: 6px 11px; font-size: var(--fs-xs); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------- forms --- */

.field { margin-bottom: 15px; }
.field > label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--ink-soft);
}
.field__hint { font-size: var(--fs-xs); color: var(--muted); margin: 4px 0 0; }

/* The (i) beside a field label: the explanation is in the page, shown on
   hover or when the button is tabbed to. No script, so it survives the CSP,
   and aria-describedby means a screen reader gets it regardless. */
.field__top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.field__top label { margin-bottom: 0; }

.hint { position: relative; display: inline-flex; line-height: 1; }
.hint__btn {
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--paper);
  color: var(--muted);
  font: 600 var(--fs-3xs)/1 var(--body);
  font-style: italic;
  cursor: help;
}
.hint__btn:hover { border-color: var(--jade); color: var(--jade-deep); }
.hint__btn:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }

.hint__bubble {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: max-content;
  max-width: 250px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: #f3f7f3;
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 6px 18px rgba(12, 28, 20, 0.22);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
}
/* The little tail, so it points at the (i) rather than floating. */
.hint__bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.hint:hover .hint__bubble,
.hint:focus-within .hint__bubble { opacity: 1; visibility: visible; }

/* Near the left edge a centred bubble would hang off the page. */
.row > .field:first-child .hint__bubble { left: 0; transform: none; }
.row > .field:first-child .hint__bubble::after { left: 14px; }
/* A value shown in a form that the viewer may not change: it lines up with
   the inputs beside it without pretending to be one. */
.field__static {
  margin: 0;
  padding: 7px 0;
  font-size: var(--fs-md);
  color: var(--ink-soft);
  min-height: 34px;
}
.field__error { font-size: var(--fs-xs); color: var(--rose); margin: 4px 0 0; font-weight: 500; }

/* Every text-like input, listed by exclusion. Naming them one by one meant
   tel, time and search were quietly left at the browser's default width,
   which is why phone fields came out narrower than everything beside them. */
input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='submit']):not([type='button']),
select, textarea {
  width: 100%;
  font: 400 0.93rem var(--body);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
}
textarea { min-height: 82px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--jade); outline-offset: 1px; }
input[type='checkbox'], input[type='radio'] { width: auto; }
.field--bad input, .field--bad select, .field--bad textarea { border-color: var(--rose); }

.row { display: flex; gap: 13px; flex-wrap: wrap; }
.row > * { flex: 1 1 165px; }
/* A three-letter currency code does not need the width of a salary. */
.row > .field--narrow { flex: 0 1 110px; }

.radio-row { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-chip { position: relative; }
.radio-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-chip span {
  display: block;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.radio-chip input:checked + span {
  border-color: var(--jade);
  background: var(--jade-wash);
  color: var(--jade-deep);
  font-weight: 600;
}
.radio-chip input:focus-visible + span { outline: 2px solid var(--jade); outline-offset: 2px; }

/* -------------------------------------------------------------- status --- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 100px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill--approved { background: var(--jade-wash); color: var(--jade-deep); border-color: #bfdfcd; }
.pill--pending  { background: var(--straw-wash); color: #7a6410; border-color: #e8d79a; }
.pill--denied   { background: var(--rose-wash); color: var(--rose); border-color: #e8c7cb; }
.pill--cancelled{ background: #f0f2ef; color: var(--muted); border-color: var(--line); }

/* ------------------------------------------------------- approval chain -- */
/* The clearest place to use the motif: approvals really are a stalk. */

.chain { list-style: none; margin: 0; padding: 0; position: relative; }
.chain::before {
  content: '';
  position: absolute;
  left: 8px; top: 12px; bottom: 12px;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
}
.chain li {
  position: relative;
  padding: 9px 0 9px 30px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}
.chain li::before {
  content: '';
  position: absolute;
  left: 2px; top: 13px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line);
}
.chain li[data-state='approved']::before { background: var(--jade); border-color: var(--jade); }
.chain li[data-state='pending']::before  { border-color: var(--straw); background: var(--straw-wash); }
.chain li[data-state='denied']::before   { background: var(--rose); border-color: var(--rose); }
.chain li[data-state='skipped']::before  { border-style: dashed; }
.chain li[data-state='skipped'] { color: var(--faint); }
.chain__who { font-weight: 600; }
.chain__when { font-size: var(--fs-xs); color: var(--muted); }
.chain__note {
  flex-basis: 100%;
  font-size: var(--fs-sm);
  color: var(--muted);
  background: var(--paper);
  border-left: 2px solid var(--line);
  padding: 6px 10px;
  margin-top: 4px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ------------------------------------------------------------ calendar --- */

.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal th {
  font-size: var(--fs-3xs);
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
}
.cal td {
  border: 1px solid var(--line-soft);
  vertical-align: top;
  height: 104px;   /* a floor, not a cap: a busy day grows */
  padding: 5px 5px 6px;
  background: var(--surface);
}
.cal td.is-weekend { background: #fafbf9; }
.cal td.out-of-month { background: #f7f9f6; }
.cal td.out-of-month .cal__num { color: #b6c0b8; }
.cal td.is-today { box-shadow: inset 0 0 0 2px var(--jade); }
.cal__num {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 3px;
}
.cal td.is-today .cal__num { color: var(--jade-deep); }

/* A run of days off is one bar. Each cell holds a slice of it, and the
   slices bleed over the gridlines so they join up into something continuous.
   Lanes keep a person on the same row all week, which is what makes the
   whole thing read as one absence rather than five. */

.cal td { padding: 5px 0 6px; }
.cal__num { padding: 0 6px; }

.chip {
  display: block;
  font-size: var(--fs-3xs);
  line-height: 1.45;
  padding: 1px 6px;
  margin: 0 5px 2px;
  border-radius: 3px;
  background: var(--jade-wash);
  border-left: 3px solid var(--jade);
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

/* A slice of a multi-day bar. */
.chip--bar {
  background: var(--chip-tint, var(--jade-wash));
  border-left: 3px solid var(--chip-edge, var(--jade));
  position: relative;
}
.chip--bar:hover { filter: brightness(0.96); }

/* Where the bar carries on, square the edge and reach across the gridline. */
.chip--bar.is-open-right {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: -1px;
  padding-right: 11px;
}
.chip--bar.is-open-left {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-width: 0;
  margin-left: -1px;
  padding-left: 9px;
}

/* An empty lane, holding a person's row open across a day they are in. */
.chip--gap {
  background: none;
  border-left-color: transparent;
  pointer-events: none;
}

.chip--pending {
  background-image: repeating-linear-gradient(
    -45deg, transparent, transparent 4px, rgba(90, 80, 40, 0.14) 4px, rgba(90, 80, 40, 0.14) 8px
  );
  border-left-style: dashed;
  color: var(--muted);
}

/* A birthday is not an absence, so it gets no bar: just the icon and a name,
   lined up under whatever time off is on that day. */
.cal__note {
  display: block;
  font-size: var(--fs-3xs);
  line-height: 1.45;
  padding: 1px 6px 1px 3px;
  margin: 0 5px 2px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-legend { display: flex; gap: 15px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 13px; height: 13px; border-radius: 2px; display: inline-block; }

.toggles { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-sm); }
.toggles label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.toggles input { accent-color: var(--jade); }

.month-nav { display: flex; align-items: center; gap: 10px; }
.month-nav h2 { min-width: 11ch; }

/* --------------------------------------------------------------- people -- */
/* Shared by the directory, the dashboard lists and the org chart. */

.avatar {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--jade-wash);
  color: var(--jade-deep);
  display: grid;
  place-items: center;
  font-size: var(--fs-3xs);
  font-weight: 700;
  flex: 0 0 auto;
  letter-spacing: 0.01em;
  overflow: hidden;
}
.avatar--lg { width: 54px; height: 54px; font-size: var(--fs-lg); }

.person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  margin: 2px 0;
}
.person:hover { border-color: var(--jade); background: #fcfdfc; }
.person__name { font-weight: 600; font-size: var(--fs-md); }
.person__meta { font-size: var(--fs-2xs); color: var(--muted); }

.reports-count {
  margin-left: auto;
  font-size: var(--fs-3xs);
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

/* ----------------------------------------------------------- org chart --- */
/* A grove. Each team hangs off a culm, and every person is a node on it.
   Cards hug their contents: the ragged right edge is what makes a tree
   readable as a tree rather than as a stack of identical bars. */

.org {
  --rail: #cbd9d0;
  --rail-lit: var(--jade);
  /* Nested cards are a fixed height, so the rail can be told exactly where
     the first and last rows are centred. */
  --row-h: 50px;
  --row-gap: 3px;
  --row-mid: calc(var(--row-gap) + (var(--row-h) / 2));
  /* The gutter: rail, elbow, then the node, ending flush with the card. */
  --rail-x: -20px;
  --node-size: 11px;
  overflow-x: auto;
}

/* No leading or trailing row spacing, at any depth, so the gap above the
   first card and below the last one both equal the panel's own padding. */
.org > ul > li:first-child { padding-top: 0; }
.org li:last-child { padding-bottom: 0; }

.org ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 34px;
  position: relative;
}
.org > ul { padding-left: 0; }
.org li { position: relative; padding: var(--row-gap) 0; }

/* Each child draws its own length of rail. Together they make one continuous
   culm; the last child stops at its own row, so the line never dangles past
   the final person. */
.org ul ul > li::before {
  content: '';
  position: absolute;
  left: var(--rail-x);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--rail);
  border-radius: 2px;
}
.org ul ul > li:last-child::before {
  bottom: auto;
  height: var(--row-mid);
}

/* The branch and its node, centred on the card rather than on the list item
   — a manager's list item also contains their whole team. */
.org__row { position: relative; }

.org ul ul > li > .org__row::before,
.org ul ul > li > details > summary > .org__row::before {
  content: '';
  position: absolute;
  left: calc(var(--rail-x) + 1px);
  top: 50%;
  transform: translateY(-50%);
  width: calc(0px - var(--rail-x) - var(--node-size) - 1px);
  height: 2px;
  background: var(--rail);
  border-radius: 2px;
}

.org ul ul > li > .org__row::after,
.org ul ul > li > details > summary > .org__row::after {
  content: '';
  position: absolute;
  /* Sits flush against the card's left edge, never over it. */
  left: calc(0px - var(--node-size));
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--node-size) - 4px);
  height: calc(var(--node-size) - 4px);
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--rail);
  box-sizing: content-box;
}

.org__row:hover::after,
.org__row:focus-within::after { border-color: var(--rail-lit); }

/* ---- the card ---- */

.org .person {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--row-h);
  box-sizing: border-box;
  margin: 0;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}

.org .person__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.25;
}
.org .person__name {
  font-weight: 600;
  font-size: var(--fs-md);
  white-space: nowrap;
}
.org .person__meta {
  font-size: var(--fs-2xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A leaf looks the same as any other row. The chevron and the count already
   say who has a team; tinting the rest only raised the question of what the
   tint meant. */
.org .person--leaf {
  border-color: var(--line-soft);
}
/* A leaf has no chevron, but still reserves its width so that every avatar
   in a team lines up with the ones above and below it. */
.org .person--leaf::before {
  content: '';
  flex: 0 0 auto;
  width: 15px;
}
.org .person--leaf:hover { border-color: var(--jade); }

/* A manager's card is the toggle for their team. */
.org .person--toggle { cursor: pointer; user-select: none; }
.org .person--toggle:hover { border-color: var(--jade); background: #fbfdfc; }

/* The owner, at the top of the stalk. */
.org .person--root {
  background: var(--jade-wash);
  border-color: #b4d8c4;
  padding: 10px 18px 10px 13px;
}
.org .person--root .person__name { font-size: var(--fs-base); }
.org .person.person--root .avatar {
  width: 38px;
  height: 38px;
  font-size: var(--fs-xs);
  background: var(--surface);
}

.org .person .avatar { width: 34px; height: 34px; }

/* How many people are under them. */
.org .person__count {
  margin-left: auto;
  font-size: var(--fs-3xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--jade-deep);
  background: var(--jade-wash);
  border: 1px solid #bfdfcd;
  border-radius: 100px;
  min-width: 22px;
  padding: 1px 7px;
  text-align: center;
}
.org .person--root .person__count { background: var(--surface); }

/* ---- the open/close marker ---- */

.org .person__chev {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  position: relative;
  color: var(--faint);
}
.org .person__chev::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform 120ms ease;
}
.org details:not([open]) > summary .person__chev::before { transform: rotate(-45deg); }
.org .person--toggle:hover .person__chev { color: var(--jade); }

.org details > summary { list-style: none; cursor: pointer; }
.org details > summary::-webkit-details-marker { display: none; }
.org details > summary::marker { content: ''; }

/* ---- the name is its own link inside a row that toggles ---- */

.org .person__name a {
  color: inherit;
  text-decoration: none;
}
.org .person__name a:hover {
  color: var(--jade-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* On a leaf row the whole card is the link, but the underline should still
   follow the name itself rather than the width of the row. The name hugs its
   text so that :hover means "over these words", not "somewhere on this line". */
.org .person__name { align-self: flex-start; }

.org .person--leaf .person__name:hover,
.org .person--leaf:focus-visible .person__name {
  color: var(--jade-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.org .person__name a:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }

.org details > summary:focus-visible { outline: none; }
.org details > summary:focus-visible .person {
  outline: 2px solid var(--jade);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .org ul { padding-left: 22px; }
  .org .person__meta { display: none; }
}

/* --------------------------------------------------------------- lists --- */

/* A name or title that links somewhere. Quiet at rest so a list does not look
   like a page of hyperlinks, underlined when the pointer is over the words —
   the same rule the org chart follows. */
.link-quiet {
  color: inherit;
  text-decoration: none;
}
.link-quiet:hover {
  color: var(--jade-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-quiet:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }



.list { list-style: none; margin: 0; padding: 0; }
.list > li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.list > li:last-child { border-bottom: none; }
.list__main { min-width: 0; flex: 1; }
.list__title { font-weight: 600; font-size: var(--fs-md); }
.list__sub { font-size: var(--fs-xs); color: var(--muted); }

/* Departments: the rename form and the Remove button share one row, so the
   two buttons sit on the same line instead of Remove centring on a tall cell. */
.dept__main { display: flex; align-items: center; gap: 10px; }
.dept__form { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.dept__form input { flex: 1; min-width: 0; }
.dept__main .list__sub { white-space: nowrap; }

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th {
  text-align: left;
  font-size: var(--fs-3xs);
  font-weight: 600;
  color: var(--muted);
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
.table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: #fbfcfa; }

.stat { padding: 13px 15px; }
.stat__n {
  font-family: var(--display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }

.empty { padding: 30px 20px; text-align: center; color: var(--muted); }
.empty p { margin: 0 0 12px; }

.flash {
  padding: 11px 15px;
  border-radius: var(--r-sm);
  margin-bottom: 18px;
  border: 1px solid;
  font-size: var(--fs-md);
}
.flash--ok { background: var(--jade-wash); border-color: #bfdfcd; color: var(--jade-deep); }
.flash--bad { background: var(--rose-wash); border-color: #e8c7cb; color: var(--rose); }
.flash--note { background: var(--straw-wash); border-color: #e8d79a; color: #7a6410; }

/* Someone who has left reads as quieter, but only their details — never the
   buttons beside them, which work exactly as they do on anybody else. */
.is-former { opacity: 0.6; }

.muted { color: var(--muted); }
.small { font-size: var(--fs-xs); }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: 13px; }
.divider { height: 1px; background: var(--line-soft); margin: 15px 0; border: 0; }

/* --------------------------------------------------------------- login --- */

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 420px at 50% -8%, #e6efe9 0%, transparent 62%),
    var(--paper);
}
.login {
  width: 100%;
  max-width: 374px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 30px 28px 26px;
}
.login__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.login__brand svg { color: var(--jade); }
.login__brand b { font-family: var(--display); font-size: var(--fs-2xl); letter-spacing: -0.025em; }
.login__tag { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 22px; }
.login__hint {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* ------------------------------------------------------------ responsive - */

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .shell { flex-direction: column; }
  .rail {
    width: 100%; flex: none; height: auto; position: static;
    padding: 14px 0 10px; flex-direction: column;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .rail__nav { display: flex; overflow-x: auto; padding: 4px 8px; gap: 2px; }
  .nav-item { margin: 0; padding: 7px 12px; white-space: nowrap; border-radius: 100px; }
  .rail__foot { display: flex; justify-content: space-between; align-items: center; }
  .main { padding: 20px 16px 48px; }
  .cal td { height: auto; min-height: 62px; }
  .cal th:not(:first-child) { font-size: 0; }
  .cal th::first-letter { font-size: var(--fs-3xs); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media print {
  .rail, .btn, .toggles { display: none; }
  .main { padding: 0; }
  .seg { break-inside: avoid; }
}

/* ------------------------------------------------------------- docs ----- */

/* Masonry by multi-column, not grid.
   These cards are wildly uneven — Customer Success has 1007px of sections,
   MemberPress training has 134px — and a grid makes every row as tall as
   its tallest card, which left half the page empty. Columns let each card
   sit directly under the one above it. Reading order becomes down-then-
   across, which is the right trade for a list of categories. */
.doc-grid {
  columns: 3 290px;
  column-gap: 14px;
}
.doc-grid .seg {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  /* A block-level child of a multi-column container can still be split in
     some engines; an inline-block cannot. */
  display: inline-block;
  width: 100%;
  margin: 0 0 14px;
}

.doc-sub { list-style: none; margin: 0 0 10px; padding: 0; }
.doc-sub li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  font-size: var(--fs-sm);
}
.doc-links { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.doc-links li { padding: 3px 0; }

.crumbs { margin: 0 0 4px; font-size: var(--fs-xs); color: var(--muted); }
.crumbs a { color: inherit; }

.doc-cat--child .list__main { padding-left: 22px; }

/* The article itself. Narrow measure: documentation is read, not scanned. */
.doc {
  padding: 22px 26px 30px;
  max-width: 44rem;
  font-size: var(--fs-base);
  line-height: 1.68;
}
.doc > :first-child { margin-top: 0; }
.doc h2 { font-size: var(--fs-xl); margin: 1.7em 0 0.5em; }
.doc h3 { font-size: var(--fs-lg); margin: 1.5em 0 0.4em; }
.doc h4, .doc h5, .doc h6 { font-size: var(--fs-base); margin: 1.3em 0 0.3em; }
.doc p { margin: 0 0 1em; }
.doc__list { margin: 0 0 1em 1.2em; padding: 0; }
.doc__list li { margin: 0.28em 0; }
.doc blockquote {
  margin: 0 0 1em;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--line);
  color: var(--muted);
}
.doc code {
  font-size: 0.88em;
  background: var(--tint);
  padding: 1px 5px;
  border-radius: 4px;
}
.doc__code {
  margin: 0 0 1.2em;
  padding: 12px 14px;
  background: var(--tint);
  border-radius: 8px;
  overflow-x: auto;
}
.doc__code code { background: none; padding: 0; }
.doc__img { max-width: 100%; height: auto; border-radius: 8px; }
.doc__tablewrap { overflow-x: auto; margin: 0 0 1.2em; }
.doc hr { border: none; border-top: 1px solid var(--line-soft); margin: 1.8em 0; }

/* 16:9, so a video keeps its shape at any width. */
.doc__embed {
  position: relative;
  margin: 0 0 1.2em;
  padding-top: 56.25%;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.doc__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The editor is wider than the measure above: it is a workspace. */
.doc-editor { margin-bottom: 6px; }
.toastui-editor-defaultUI { border-radius: 8px; }

/* ---------------------------------------------------------- reviews ----- */

.review__tablewrap { overflow-x: auto; }
.review__table { width: 100%; }
.review__table th, .review__table td { padding: 8px 14px; vertical-align: middle; }
.review__table td:first-child { width: 100%; }
.review__table input[type="text"] { width: 100%; }
.review__score { width: 9.5rem; text-align: center; }
.review__score select { width: 100%; }
.review__read {
  padding: 9px 12px;
  background: var(--tint);
  border-radius: 7px;
  font-size: var(--fs-md);
  line-height: 1.6;
}
.review__read p { margin: 0 0 0.7em; }
.review__read p:last-child { margin-bottom: 0; }
.seg--note .seg__body { padding-top: 12px; padding-bottom: 12px; }

/* ------------------------------------------------- announcements ------- */
/* A notice is a card on the page, so it sits on --surface. It used to be
   --paper, the same colour as the page behind it, which left a row of
   outlines rather than a row of cards. */

.notes { display: flex; flex-direction: column; gap: 16px; }

.note {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  background: var(--surface);
}

/* Pinned notices carry the straw edge the rest of the app uses for
   "needs attention", rather than an emoji. */
.note--pinned { border-left: 3px solid var(--straw); padding-left: 15px; }

.note__head {
  display: flex;
  align-items: center;
  gap: 11px;
}
.note__headings { flex: 1; min-width: 0; }
.note__tags { display: flex; gap: 6px; flex-wrap: wrap; flex: none; }
.note__title { margin: 0; font-size: var(--fs-lg); line-height: 1.3; }
.note__meta { margin: 1px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.note__meta strong { font-weight: 600; color: var(--ink-soft); }

/* The body is documentation markup, at announcement size. */
.note__body.doc { padding: 11px 0 0; max-width: none; font-size: var(--fs-md); }
.note__body.doc > :last-child { margin-bottom: 0; }

.note__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}
.note__status { font-size: var(--fs-xs); color: var(--muted); }

/* On the dashboard the notices already sit inside a white panel, so the card
   chrome would be a box drawn inside a box. There they are flat, separated
   by a rule, and only the pinned edge survives. */
.seg__body.notes { gap: 0; }
.seg__body .note {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 14px 0;
}
.seg__body .note + .note { border-top: 1px solid var(--line-soft); }
.seg__body .note:first-child { padding-top: 2px; }
.seg__body .note:last-child { padding-bottom: 2px; }
.seg__body .note--pinned { border-left: 3px solid var(--straw); padding-left: 13px; }

/* Third-level sections, on the documentation home and in the category list. */
.doc-sub--deep { padding-left: 14px; font-size: var(--fs-sm); }
.doc-sub--deep a { color: var(--muted); }
.doc-cat--d3 .list__main { padding-left: 44px; }

/* The grid is a block in the page flow; without this the panel that follows
   it sits flush against the bottom row of cards. */
.doc-grid { margin-bottom: 18px; }

/* An address with a Copy button beside it: the MCP endpoint on /security. */
.copy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 6px 6px 11px;
}
.copy-row__value {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-size: var(--fs-sm);
  user-select: all;
}
.copy-row .btn { flex: none; }