/* One stylesheet for every page. Served from /style.css, so a page is markup
   and nothing else — and a change to the look happens in one place.

   The look is the one Accrue and the Data Room share: warm paper rather than
   grey, a serif for the things worth reading, rounded surfaces that sit on the
   page instead of being ruled off from it. The neutrals, the shadow and the
   fonts are theirs exactly, so the three read as one suite. Only --brand
   differs, which is how a person tells which tool they are in: the Data Room is
   navy, Accrue is green, this is teal. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..600&display=swap");

:root {
  color-scheme: light;

  /* -- The suite's own palette, named as Accrue and the Data Room name it. */
  --page: #f6f5f1;
  --surface: #fcfcfb;
  --surface-2: #f0eee8;
  --ink: #0c1422;
  --ink-2: #4b5261;
  --muted: #7d828c;
  --line: #e2e0d8;
  --line-strong: #d2cfc4;
  --brand: #15556b;
  --brand-2: #0f4353;
  --brand-wash: #e4eef2;
  --on-brand: #ffffff;
  --accent: #b4690e;
  --good: #006300;
  --bad: #b42318;
  --warn-bg: #fdf3dc;
  --warn-ink: #7a4b00;
  --shadow: 0 1px 2px rgba(12, 20, 34, 0.04), 0 8px 24px -12px rgba(12, 20, 34, 0.08);

  /* The page's own measure, and the gutter either side of it. The site nav
     reads both, so the brand mark lines up with the first column of whatever is
     underneath it. A page that wants a different measure sets these once and
     the nav follows; nothing has to be kept in step by hand. */
  --shell: 74rem;
  --gutter: clamp(1.1rem, 4vw, 3rem);

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Newsreader", ui-serif, Georgia, serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* -- The names this app's own pages already use, kept pointing at the above.
        Seventeen pages carry inline `var(--panel)` and `var(--rule)`; a rename
        that broke them would be a rename nobody asked for. */
  --ground: var(--page);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --ink-soft: var(--ink-2);
  --ink-faint: var(--muted);
  --rule: var(--line);
  --rule-strong: var(--line-strong);
  --read: var(--brand);
  --read-bg: var(--brand-wash);
  --write: var(--bad);
  --write-bg: #b4231814;
  --warn: var(--warn-ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0b0d10;
    --surface: #15171b;
    --surface-2: #1c1f24;
    --ink: #f3f3f0;
    --ink-2: #c3c2b7;
    --muted: #8d9098;
    --line: #2a2d33;
    --line-strong: #3b3e44;
    --brand: #6ec8dd;
    --brand-2: #9adcec;
    --brand-wash: #102c35;
    --on-brand: #05202a;
    --accent: #f0b54a;
    --good: #2fbf4a;
    --bad: #f07b72;
    --warn-bg: #2d2412;
    --warn-ink: #f2c46b;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
    --write-bg: #f07b721f;
    --warn: var(--warn-ink);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0b0d10;
  --surface: #15171b;
  --surface-2: #1c1f24;
  --ink: #f3f3f0;
  --ink-2: #c3c2b7;
  --muted: #8d9098;
  --line: #2a2d33;
  --line-strong: #3b3e44;
  --brand: #6ec8dd;
  --brand-2: #9adcec;
  --brand-wash: #102c35;
  --on-brand: #05202a;
  --accent: #f0b54a;
  --good: #2fbf4a;
  --bad: #f07b72;
  --warn-bg: #2d2412;
  --warn-ink: #f2c46b;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  --write-bg: #f07b721f;
  --warn: var(--warn-ink);
}

* { box-sizing: border-box; }
/* An author `display` rule beats the user-agent's [hidden] rule, so anything
   given a display here would ignore its own hidden attribute. Say it once. */
[hidden] { display: none !important; }
html { background: var(--page); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 3px; }
code, pre { font-family: var(--mono); font-feature-settings: "zero" 1; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--brand-wash); }
.tnum, .num { font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: 44rem; }
.band { border-bottom: 1px solid var(--line); }
.band.alt { background: var(--surface-2); }
.band > .wrap { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); }

/* ---- type ---- */
/* The serif is the suite's signature: it carries the headline and nothing else,
   so the interface stays sans and only the thing being announced is set. */
.eyebrow { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.h-sec { font-family: var(--display); font-weight: 500; font-size: clamp(1.9rem, 4.2vw, 2.9rem); letter-spacing: -0.015em; line-height: 1.12; }
.h-sec em, .h-sec i { font-style: italic; color: var(--brand); }
.sub { color: var(--ink-2); font-size: clamp(1rem, 1.6vw, 1.08rem); max-width: 60ch; line-height: 1.7; }
.sec-head { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 2.2rem; }
.muted, .quiet { color: var(--ink-2); }
.hint { color: var(--muted); font-size: 0.85rem; }
.cap, .label { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* ---- site navigation ---- */
.sitenav { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: saturate(180%) blur(8px); position: sticky; top: 0; z-index: 30; }
/* Nothing wraps. A navigation bar that reflows onto a second line at an
   awkward width looks like a mistake, so the links scroll instead and the
   brand and the controls either side of them stay put. */
.sitenav .wrap { display: flex; align-items: center; gap: 0.15rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }

/* The mark, then the name. The tile is the favicon's own geometry, so the thing
   in the browser tab and the thing at the top of the page are one mark. */
.sitenav .brand {
  display: inline-flex; align-items: center; gap: 0.5rem; flex: 0 0 auto;
  font-weight: 600; font-size: 0.95rem; letter-spacing: -0.015em; text-decoration: none;
  margin-right: 1.4rem; white-space: nowrap;
}
.sitenav .brand .mark { width: 22px; height: 22px; display: block; border-radius: 5px; }
.sitenav .brand .mark .tile { fill: var(--brand); }
.sitenav .brand .mark .figure { fill: var(--on-brand); }

.sitenav .nl {
  font-size: 0.85rem; color: var(--ink-2); text-decoration: none; white-space: nowrap;
  padding: 0.35rem 0.6rem; border-radius: 8px; flex: 0 0 auto;
}
.sitenav .nl:hover { color: var(--ink); background: var(--surface-2); }
/* Where you are, said once and quietly. */
.sitenav .nl[aria-current] { color: var(--brand); background: var(--brand-wash); font-weight: 500; }
.sitenav .spacer { margin-left: auto; flex: 1 1 auto; }
/* The controls at the right-hand end are not navigation, so they are set apart
   from it rather than reading as two more links. */
.sitenav .wrap > button.link,
.sitenav .wrap > [data-theme-switch] { flex: 0 0 auto; margin-left: 0.6rem; }
.sitenav .wrap > button.link { font-size: 0.82rem; text-decoration: none; color: var(--ink-2); padding: 0.35rem 0.6rem; border-radius: 8px; }
.sitenav .wrap > button.link:hover { color: var(--ink); background: var(--surface-2); }
/* The one call to action in the bar is a pill, the way it is on the others. */
.sitenav a.nl.signin { background: var(--brand); color: var(--on-brand); border-radius: 999px; padding: 0.35rem 0.9rem; font-weight: 500; margin-left: 0.4rem; }
.sitenav a.nl.signin:hover { opacity: 0.9; color: var(--on-brand); background: var(--brand); }

/* Narrow enough that the links no longer fit: they scroll sideways under the
   brand rather than stacking. */
@media (max-width: 60rem) {
  .sitenav .wrap { gap: 0.1rem; overflow-x: auto; scrollbar-width: none; }
  .sitenav .wrap::-webkit-scrollbar { display: none; }
  .sitenav .spacer { flex: 0 0 0.6rem; margin-left: 0; }
  /* The links slide under the mark rather than taking it with them, so you can
     always see where you are and always get back. */
  .sitenav .brand {
    position: sticky; left: 0; z-index: 1; margin-right: 0.6rem;
    background: var(--page); padding-right: 0.7rem;
    mask-image: linear-gradient(to right, #000 calc(100% - 0.7rem), transparent);
  }
}

/* ---- buttons and forms ---- */
button, .btn {
  font-family: var(--sans); font-size: 0.875rem; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: 0.45rem 1rem; text-decoration: none;
  transition: opacity 120ms, border-color 120ms;
}
button:hover, .btn:hover { border-color: var(--ink-2); }
button.primary, .btn.primary, .btn-brand {
  background: var(--brand); color: var(--on-brand); border-color: transparent; font-weight: 500;
}
button.primary:hover, .btn.primary:hover { opacity: 0.9; border-color: transparent; }
button.quiet, .btn-ghost { background: transparent; }
button.link { border: 0; background: none; color: var(--ink-2); padding: 0.2rem; text-decoration: underline; border-radius: 6px; }
button.link:hover { color: var(--ink); }
button.danger, .btn-danger { color: var(--bad); border-color: var(--bad); }
button[disabled], button:disabled { opacity: 0.5; cursor: default; }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; }

label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
label.check { flex-direction: row; align-items: center; gap: 0.4rem; }
input, select, textarea, .field {
  font-family: var(--sans); font-size: 0.9rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 0.5rem 0.7rem; width: 100%;
}
input:focus, select:focus, textarea:focus, .field:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: transparent; }
input[type="checkbox"] { width: auto; }
textarea { min-height: 6rem; resize: vertical; }

.msg { border: 1px solid var(--line-strong); border-radius: 12px; padding: 0.75rem 0.9rem; font-size: 0.9rem; margin: 0.8rem 0; }
.msg.err { border-color: transparent; background: var(--write-bg); color: var(--bad); }
.msg.ok { border-color: transparent; background: var(--brand-wash); color: var(--brand); }
.msg.warn { border-color: transparent; background: var(--warn-bg); color: var(--warn-ink); }

/* ---- cards ---- */
/* Cards used to be divided by hairlines in a shared box. Here each one is its
   own surface with air around it, which is what makes the page read as paper
   rather than as a form. */
.grid { display: grid; gap: 0.9rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.g3 { grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A grid that ends on a dead cell reads as a mistake. When the last card
     would sit alone on its row, let it take the width instead. */
  .g3 > .card:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (min-width: 62rem) {
  .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g3 > .card:last-child:nth-child(3n + 1) { grid-column: span 3; }
  .g3 > .card:last-child:nth-child(3n + 2) { grid-column: span 2; }
}
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 1.2rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.band.alt .card { background: var(--surface); }
.card h3 { font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.card p { color: var(--ink-2); font-size: 0.9rem; line-height: 1.65; }
.card ul { margin: 0.1rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
.card li { position: relative; padding-left: 1rem; font-size: 0.875rem; color: var(--ink-2); }
.card li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 999px; background: var(--brand); opacity: 0.55; }
.card li strong, .card p strong { color: var(--ink); font-weight: 600; }
code.inline, .card code, li code, p code, td code {
  font-size: 0.84em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 0.05em 0.32em;
}
.band.alt .card code { background: var(--surface-2); }

/* ---- code blocks ---- */
pre.block {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem;
  font-size: 0.78rem; line-height: 1.6; overflow-x: auto; margin: 0;
}
pre.block .k { color: var(--brand); }
pre.block .s { color: var(--accent); }
pre.block .c { color: var(--muted); }

/* ---- an endpoint you can copy ---- */
.ep { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.ep code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 0.6rem 0.75rem; font-size: 0.8rem; }
.ep button { border: 0; border-left: 1px solid var(--line); background: var(--brand); color: var(--on-brand); padding: 0 1rem; border-radius: 0; }

/* ---- signed-in pages ---- */
.authwrap { max-width: var(--shell); margin: 0 auto; padding: clamp(1.4rem, 4vw, 2.6rem) var(--gutter) 4rem; }
.authwrap.full { max-width: none; }
.authwrap h1 { font-family: var(--display); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: -0.015em; }
.panel {
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  box-shadow: var(--shadow); padding: 1.2rem 1.3rem; margin: 1.2rem 0;
}
.panel h2 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.row { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 12rem; }
.row > .tight { flex: 0 0 auto; }

/* ---- sign-in card ---- */
.centre { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.1rem; }
div.signin {
  width: 100%; max-width: 24rem; border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow); padding: 1.8rem 1.7rem;
}
div.signin h1 { font-family: var(--display); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.015em; margin-bottom: 0.35rem; }
div.signin form { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1.2rem; }
div.signin .foot { margin-top: 1.1rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: var(--muted); }

/* ---- tables ---- */
/* A wide table scrolls inside its own box rather than pushing the page sideways
   or, worse, quietly clipping the controls at the right-hand end. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-x > table { min-width: max-content; }
table, .table { border-collapse: collapse; width: 100%; font-size: 0.86rem; }
td select, td input { min-width: 7.5rem; }
td .actions { display: flex; gap: 0.3rem; white-space: nowrap; }
th, td { text-align: left; padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
tbody tr:hover { background: var(--surface-2); }
.tag, .chip {
  display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--sans); font-size: 0.72rem; font-weight: 500;
  border-radius: 999px; padding: 0.1rem 0.55rem; background: var(--surface-2); color: var(--ink-2);
  white-space: nowrap; margin-right: 0.25rem; border: 0;
}
.tag.on, .chip-brand { background: var(--brand-wash); color: var(--brand); }
.tag.off, .chip-bad { background: var(--write-bg); color: var(--bad); }
.tag.mid, .chip-warn { background: var(--warn-bg); color: var(--warn-ink); }

/* ---- theme switch ---- */
.themeswitch { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.themeswitch button { border: 0; border-left: 1px solid var(--line-strong); background: transparent; padding: 0.2rem 0.6rem; font-size: 0.7rem; color: var(--muted); border-radius: 0; }
.themeswitch button:first-child { border-left: 0; }
.themeswitch button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }