/* Berkeley Mono, self-hosted. The licence covers this deployment; the files
   are served from /static/fonts/ by nginx with a long cache lifetime. */
@font-face {
  font-family: 'Berkeley Mono';
  src: url("../fonts/BerkeleyMono-Regular.e3b324d93b79.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Berkeley Mono';
  src: url("../fonts/BerkeleyMono-Bold.df3936e8db02.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Berkeley Mono';
  src: url("../fonts/BerkeleyMono-Italic.ee40cb0dd325.woff2") format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Berkeley Mono';
  src: url("../fonts/BerkeleyMono-BoldItalic.55c7c2a4e0bd.woff2") format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ------------------------------------------------------------------ *
 * Theme tokens. Light is the default; [data-theme="dark"] overrides.
 * ------------------------------------------------------------------ */
:root {
  --font-mono: 'Berkeley Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --bg: #fbfaf8;
  --bg-raised: #ffffff;
  --bg-sunken: #f1efeb;
  --fg: #1c1a17;
  --fg-muted: #6b675f;
  --border: #ddd8ce;
  --border-strong: #c3bcae;
  --accent: #7a4a12;
  --accent-fg: #ffffff;
  --link: #8a4b10;
  --danger: #a3231c;
  --warning: #8a6412;
  --success: #2f6b3a;
  --focus: #b06a1c;
  --shadow: 0 1px 2px rgba(28, 26, 23, 0.06), 0 4px 16px rgba(28, 26, 23, 0.05);

  --step--1: 0.8125rem;
  --step-0: 0.9375rem;
  --step-1: 1.125rem;
  --step-2: 1.35rem;
  --step-3: 1.75rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.25rem;
  --radius: 6px;
  --max-width: 78rem;
}

[data-theme='dark'] {
  --bg: #14130f;
  --bg-raised: #1d1b16;
  --bg-sunken: #100f0c;
  --fg: #eae5da;
  --fg-muted: #9c968a;
  --border: #302d26;
  --border-strong: #4a453a;
  --accent: #d99a4e;
  --accent-fg: #14130f;
  --link: #e0a75c;
  --danger: #e8776e;
  --warning: #d9b45c;
  --success: #7fb98a;
  --focus: #e0a75c;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--step-0);
  line-height: 1.6;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  line-height: 1.25;
  margin: 0 0 var(--space-3);
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); }

p { margin: 0 0 var(--space-4); }

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

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-5) 0;
}

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

/* Respect a user's request for less motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--accent-fg);
}
.skip-link:focus {
  left: var(--space-3);
  top: var(--space-3);
}

/* ------------------------------------------------------------------ *
 * Layout
 * ------------------------------------------------------------------ */
.shell {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header .shell {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 3.5rem;
  flex-wrap: wrap;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.brand {
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--fg);
  text-decoration: none;
  letter-spacing: -0.02em;
  margin-right: auto;
}
.brand:hover { color: var(--link); }
.brand::before {
  content: '■ ';
  color: var(--accent);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.site-nav a,
.site-nav button {
  color: var(--fg-muted);
  text-decoration: none;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  font: inherit;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.site-nav a:hover,
.site-nav button:hover {
  color: var(--fg);
  background: var(--bg-sunken);
}
.site-nav a[aria-current='page'] {
  color: var(--fg);
  border-color: var(--border-strong);
  background: var(--bg-sunken);
}

.whoami {
  color: var(--fg-muted);
  font-size: var(--step--1);
  padding: var(--space-1) var(--space-2);
  border-left: 1px solid var(--border);
  text-decoration: none;
}
a.whoami:hover { color: var(--fg); }

main {
  padding: var(--space-5) 0 var(--space-6);
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-4) 0;
  color: var(--fg-muted);
  font-size: var(--step--1);
}

/* Mobile: stack the header, drop the account separator. */
@media (max-width: 42rem) {
  .site-header .shell { gap: var(--space-2); }
  .brand { margin-right: 0; width: 100%; }
  .whoami { border-left: 0; padding-left: 0; }
  .site-nav { width: 100%; }
  main { padding-top: var(--space-4); }
}

/* ------------------------------------------------------------------ *
 * Components
 * ------------------------------------------------------------------ */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow);
}

.panel + .panel { margin-top: var(--space-4); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: inherit;
  font-size: var(--step--1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg-raised);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}
.btn:hover { background: var(--bg-sunken); border-color: var(--accent); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
.btn-primary:hover { background: var(--link); border-color: var(--link); color: var(--accent-fg); }

.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-google { width: 100%; justify-content: center; padding: var(--space-3) var(--space-4); font-size: var(--step-0); }

.btn-icon {
  padding: var(--space-1);
  border-color: transparent;
  background: none;
}
.btn-icon:hover { background: var(--bg-sunken); border-color: var(--border); }

.badge {
  display: inline-block;
  font-size: var(--step--1);
  padding: 0 var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--fg-muted);
  white-space: nowrap;
}
.badge-approved { color: var(--success); border-color: var(--success); }
.badge-in_review { color: var(--warning); border-color: var(--warning); }
.badge-rejected { color: var(--danger); border-color: var(--danger); }
.badge-draft { color: var(--fg-muted); }

/* Tables: scroll rather than squash on narrow screens. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}
th,
td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
th {
  color: var(--fg-muted);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  white-space: nowrap;
  border-bottom-color: var(--border-strong);
}
tbody tr:hover { background: var(--bg-sunken); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Forms */
label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--fg-muted);
  font-size: var(--step--1);
}
input[type='text'],
input[type='email'],
input[type='search'],
input[type='url'],
input[type='number'],
input[type='file'],
input[type='datetime-local'],
select,
textarea {
  width: 100%;
  font: inherit;
  color: var(--fg);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
}
/* Rows of labelled fields align to the top: controls are not pixel-identical
   across browsers, and a helptext or error list under one field must not
   push the other labels down. */
.row.fields { align-items: flex-start; }

/* Single-line controls share one height, so an input and a select beside
   each other line up exactly (they differ by a few pixels intrinsically). */
input[type='text'],
input[type='email'],
input[type='search'],
input[type='url'],
input[type='number'],
input[type='file'],
input[type='datetime-local'],
select {
  height: 2.65rem;
}
textarea { min-height: 14rem; resize: vertical; line-height: 1.6; }
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}
.field + .field { margin-top: var(--space-4); }
.helptext { color: var(--fg-muted); font-size: var(--step--1); margin-top: var(--space-1); }
.errorlist {
  color: var(--danger);
  font-size: var(--step--1);
  margin: var(--space-1) 0 0;
  padding-left: var(--space-4);
}

/* Flash messages */
.messages { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.messages li {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-left-width: 4px;
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
  background: var(--bg-raised);
}
.messages .success { border-left-color: var(--success); }
.messages .error { border-left-color: var(--danger); }
.messages .warning { border-left-color: var(--warning); }
.messages .info { border-left-color: var(--accent); }

/* Centred narrow column for login and error pages. */
.narrow { max-width: 26rem; margin: var(--space-6) auto; }
.narrow .card { padding: var(--space-5); }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.page-head h1 { margin-bottom: var(--space-1); }
.muted { color: var(--fg-muted); }
.small { font-size: var(--step--1); }
.stack > * + * { margin-top: var(--space-4); }
.row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

/* Statistic tiles on the dashboard. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.stat {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.stat b {
  display: block;
  font-size: var(--step-2);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.stat span { color: var(--fg-muted); font-size: var(--step--1); }

/* Markdown document bodies. */
.markdown { max-width: 46rem; }

/* An embedded PDF preview on the document page. */
.pdf-preview {
  width: 100%;
  height: 42rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-sunken);
}
.markdown h1, .markdown h2, .markdown h3 { margin-top: var(--space-5); }
.markdown pre {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  overflow-x: auto;
  font-size: var(--step--1);
}
.markdown blockquote {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-4);
  border-left: 3px solid var(--border-strong);
  color: var(--fg-muted);
}
.markdown table { margin-bottom: var(--space-4); }
.markdown img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------------ *
 * Markdown editor: toolbar, tabs, preview, dictation
 * ------------------------------------------------------------------ */
.editor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  border: 1px solid var(--border-strong);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg-sunken);
  padding: var(--space-1) var(--space-2);
  margin-bottom: 0;
}

.editor-toolbar, .editor-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

/* The toolbar buttons are small and square, text buttons wider. */
.btn-tool {
  padding: var(--space-1) var(--space-2);
  font-size: var(--step--1);
  border: 1px solid transparent;
  background: none;
  color: var(--fg);
  min-width: 2.1rem;
}
.btn-tool:hover { background: var(--bg-raised); border-color: var(--border-strong); }
.btn-tool[aria-pressed='true'] {
  background: var(--bg-raised);
  border-color: var(--border-strong);
  color: var(--fg);
}

/* The dictation language dropdown lives in the toolbar, so it is compact
   and matches the tool buttons rather than full-width form selects. */
.language-select {
  width: auto;
  font-size: var(--step--1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  background: none;
  border-radius: var(--radius);
  color: var(--fg-muted);
  height: auto;
}
.language-select:hover {
  color: var(--fg);
  background: var(--bg-raised);
  border-color: var(--border-strong);
}
.language-select:focus { outline-offset: 0; }

/* The header language selector: same compact styling, inline in the nav. */
.language-form { display: inline; }

/* --- Tag chips on the documents list ---------------------------------------- *
 * A checkbox styled as a pill: clicking toggles it and the existing
 * data-autosubmit handler submits the form, so a chip click is a filter
 * submission that keeps every other filter. The input itself is invisible;
 * the pill lights up when it is checked (:has, supported by all evergreen
 * browsers). */
.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  font-size: var(--step--1);
  color: var(--fg-muted);
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.chip:hover { border-color: var(--accent); color: var(--fg); }
.chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}
.chip:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
.chip:has(input:checked) .swatch { border-color: var(--accent-fg); }
.chip:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Label present for screen readers, invisible to everyone else. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.toolbar-gap { width: 1px; height: 1.4rem; background: var(--border-strong); margin: 0 var(--space-1); }

/* The textarea and preview sit inside the frame the toolbar started. */
[data-editor] textarea,
[data-editor] .editor-preview {
  border-radius: 0 0 var(--radius) var(--radius);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.editor-preview {
  min-height: 14rem;
  padding: var(--space-4);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  overflow-wrap: break-word;
}
.editor-status { min-height: 1.2rem; margin: var(--space-1) 0; }

/* The microphone: recording is loud, unmistakable and polite to reduced
   motion users (a colour change, not a pulse). */
.btn-mic.recording {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--bg-raised);
}
@media (prefers-reduced-motion: no-preference) {
  .btn-mic.recording { animation: mic-breathe 1.6s ease-in-out infinite; }
}
@keyframes mic-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(163, 35, 28, 0.35); }
  50% { box-shadow: 0 0 0 4px rgba(163, 35, 28, 0.0); }
}

/* Small forms rendered inline next to a badge or list item. */
.inline-form { display: inline; }

/* The × that removes a tag / link / grant: hugs the text it removes,
   with a little padding so it stays an easy touch target. */
.badge-x {
  border: 0;
  background: none;
  color: var(--fg-muted);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  margin-left: 0.15rem;
  padding: 0.25rem 0.2rem;
  border-radius: var(--radius);
}
.badge-x:hover {
  color: var(--danger);
  background: var(--bg-sunken);
}

/* A colour dot next to a tag name. */
.swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  vertical-align: middle;
}

/* The tag colour picker: compact, the same height as its neighbours. */
input[type='color'] {
  width: 3.4rem;
  height: 2.65rem;
  padding: 0.25rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  cursor: pointer;
}
input[type='color']:disabled { opacity: 0.4; cursor: not-allowed; }

/* A checkbox label sitting inline under a control. */
.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-1);
  font-size: var(--step--1);
  color: var(--fg-muted);
}

/* Slightly narrower single-object forms (company, department, tag). */
.narrow-form { max-width: 40rem; }

/* Print: drop chrome, keep the document. */
@media print {
  .site-header, .site-footer, .site-nav, .btn, .messages { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .card { border: 0; box-shadow: none; padding: 0; }
  a { color: #000; text-decoration: underline; }
}

/* ------------------------------------------------------------------ *
 * Version diff colouring.
 * ------------------------------------------------------------------ */
.diff {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.5;
  margin: 0;
  padding: var(--space-3);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  white-space: pre;
}

.diff .diff-add {
  color: var(--success);
  background: rgba(47, 107, 58, 0.12);
  display: block;
}

.diff .diff-remove {
  color: var(--danger);
  background: rgba(163, 35, 28, 0.12);
  display: block;
}

.diff .diff-hunk {
  color: var(--fg-muted);
  font-weight: 700;
  display: block;
}

.diff .diff-context {
  color: var(--fg);
}