/* Hallmark · genre: modern-minimal · design-system: design.md · designed-as-app
 * Office pages (Django admin frame + the platform's own pages). Colours, fonts and spacing come from tokens.css only. */

/* Django's own variables and the platform's older names, all pointed at the tokens */
:root, html[data-theme="light"], html[data-theme="dark"], html[data-theme="auto"] {
  color-scheme: light;
  --primary: var(--color-accent); --secondary: var(--color-ink); --accent: var(--color-attention); --primary-fg: var(--color-accent-ink);
  --body-fg: var(--color-ink); --body-bg: var(--color-paper); --body-quiet-color: var(--color-ink-2);
  --body-medium-color: var(--color-ink); --body-loud-color: var(--color-ink);
  --header-color: var(--color-ink); --header-branding-color: var(--color-ink); --header-bg: var(--color-paper);
  --header-link-color: var(--color-ink-2);
  --breadcrumbs-fg: var(--color-ink-2); --breadcrumbs-link-fg: var(--color-accent); --breadcrumbs-bg: transparent;
  --link-fg: var(--color-accent); --link-hover-color: var(--color-accent-hover); --link-selected-fg: var(--color-ink);
  --hairline-color: var(--color-rule-soft); --border-color: var(--color-rule);
  --error-fg: var(--color-error); --message-success-bg: var(--color-accent-soft); --message-warning-bg: var(--color-attention-bg);
  --message-error-bg: var(--color-error-bg); --message-debug-bg: var(--color-paper-2); --message-info-bg: var(--color-accent-soft);
  --darkened-bg: var(--color-paper-2); --selected-bg: var(--color-paper-3); --selected-row: var(--color-accent-soft);
  --button-fg: var(--color-accent-ink); --button-bg: var(--color-accent); --button-hover-bg: var(--color-accent-hover);
  --default-button-bg: var(--color-accent); --default-button-hover-bg: var(--color-accent-hover);
  --close-button-bg: var(--color-ink-2); --close-button-hover-bg: var(--color-ink);
  --delete-button-bg: var(--color-error); --delete-button-hover-bg: var(--color-error-hover);
  --object-tools-fg: var(--color-ink); --object-tools-bg: var(--color-paper); --object-tools-hover-bg: var(--color-paper-2);
  --font-family-primary: var(--font-body);
  /* names used by the platform's own pages before the system */
  --ink: var(--color-ink); --ink-quiet: var(--color-ink-2); --ground: var(--color-paper-2); --rule: var(--color-rule);
  --rule-soft: var(--color-rule-soft); --action: var(--color-accent); --action-hover: var(--color-accent-hover);
  --attention: var(--color-attention); --attention-bg: var(--color-attention-bg); --attention-fg: var(--color-attention-fg);
  --attention-strong: var(--color-attention-strong); --paper: var(--color-paper); --on-dark: var(--color-accent-ink);
  --field-border: var(--color-field); --ok: var(--color-ok); --reject: var(--color-reject); --reshoot: var(--color-reshoot);
}

html, body { overflow-x: clip; }
body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.45; background: var(--color-paper); color: var(--color-ink); }
td, th { font-variant-numeric: tabular-nums; }
.ref { font-family: var(--font-outlier); font-weight: 500; letter-spacing: 0; }
h1, #content h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.02em; line-height: 1.15;
  color: var(--color-ink); margin: 0 0 var(--space-sm); overflow-wrap: anywhere; min-width: 0; }
h2 { letter-spacing: -0.01em; }
h1, h2, h3, h4, h5, h6 { font-style: normal; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.breadcrumbs a, #footer a, .prose a { text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.quiet { color: var(--color-ink-2); }
.planning-warning { color: var(--color-error); }

/* ---- Top bar: wordmark · five areas · user ---- */
html body #header { background: var(--color-paper); color: var(--color-ink); border-bottom: 1px solid var(--color-rule);
  min-height: var(--header-h); height: auto; padding: var(--space-2xs) var(--space-lg); display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: flex-start; gap: var(--space-2xs) var(--space-md);
  box-sizing: border-box; position: relative; z-index: 30; flex-shrink: 0; }
html body #header #branding { display: flex; align-items: center; order: 1; }
html body #header .areas { order: 2; }
html body #header #user-tools { order: 3; }
#site-name { margin: 0; font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; }
#site-name a { color: var(--color-ink); text-decoration: none; }
#site-name .practice { color: var(--color-attention-strong); }
.areas { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3xs); margin-right: auto; }
.area { position: relative; }
.area > summary { list-style: none; cursor: pointer; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-input);
  font-weight: 500; color: var(--color-ink-2); white-space: nowrap; line-height: 1.2; min-height: 24px; }
.area > summary::-webkit-details-marker { display: none; }
.area > summary::after { content: ""; display: inline-block; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor;
  transform: translateY(2px); }
.area > summary:hover, .area[open] > summary, .area.current > summary { color: var(--color-ink); background: var(--color-paper-2); }
.area .menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 240px; background: var(--color-paper);
  border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-3xs) 0; margin: 0; list-style: none;
  box-shadow: var(--shadow-menu); }
.area .menu li { list-style: none; margin: 0; padding: 0; }
.area .menu a { display: block; padding: var(--space-2xs) var(--space-sm); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.area .menu a:hover, .area .menu a:focus-visible { background: var(--color-paper-2); }
html body #user-tools { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); text-transform: none; letter-spacing: 0; display: flex;
  flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); }
#user-tools a, #logout-form button { color: var(--color-ink-2); border-bottom: 0; text-decoration: underline; }
#user-tools strong { color: var(--color-ink); font-weight: 600; }
html body #logout-form button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: none; letter-spacing: 0; color: var(--color-ink-2); text-decoration: underline; }
.theme-toggle { display: none; }
#nav-sidebar, #toggle-nav-sidebar { display: none !important; }
.main.shifted > #nav-sidebar + .content, .main > .content { max-width: 100%; }

/* ---- Breadcrumbs, content, footer ---- */
html body div.breadcrumbs { background: transparent; color: var(--color-ink-2); padding: var(--space-sm) var(--space-lg) 0; font-size: var(--text-sm); }
html body #content { padding: var(--space-sm) var(--space-lg) var(--space-xl); }
#footer { padding: var(--space-sm) var(--space-lg); color: var(--color-ink-2); font-size: var(--text-sm); border-top: 1px solid var(--color-rule-soft); }

/* ---- Buttons: solid accent primary, outlined secondary, one height, one line ---- */
.button, input[type=submit], input[type=button], .submit-row input, a.button, button.button {
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 500; line-height: 1.2; border-radius: var(--radius-input);
  min-height: var(--control-h); white-space: nowrap; box-sizing: border-box; }
a.button, .button { display: inline-flex; align-items: center; justify-content: center; padding: 9px 14px; }
.button.quiet, a.button.quiet, button.quiet, .object-tools a { background: var(--color-paper); color: var(--color-ink);
  border: 1px solid var(--color-field); }
.button.quiet:hover, a.button.quiet:hover, button.quiet:hover, .object-tools a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.object-tools a { border-radius: var(--radius-input); text-transform: none; letter-spacing: 0; font-size: var(--text-sm); padding: 7px 12px; }
.object-tools a:focus, .object-tools a:hover { color: var(--color-ink); }
:disabled, [aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* ---- Fields: one height with the buttons, outline focus ---- */
input[type=text], input[type=number], input[type=email], input[type=date], input[type=password], input[type=search], input[type=url],
input[type=tel], input[type=time], input[type=datetime-local], select, textarea, .vTextField {
  font-family: var(--font-body); font-size: var(--text-base); color: var(--color-ink); background: var(--color-paper);
  border-radius: var(--radius-input); border: 1px solid var(--color-field); padding: 7px 9px; min-height: var(--control-h); box-sizing: border-box; }
textarea { min-height: 80px; }
input:focus, select:focus, textarea:focus { border-color: var(--color-field); }

/* ---- Tables: hairline rules, condensed heads ---- */
thead th, tfoot td, #changelist table thead th, table thead th { background: var(--color-paper-2); color: var(--color-ink-2);
  font-family: var(--font-outlier); font-weight: 500; font-size: var(--text-sm); text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid var(--color-rule); }
td, th { border-bottom-color: var(--color-rule-soft); }
tr:nth-child(even), .row2 { background: transparent; }
#changelist table tbody tr:hover { background: var(--color-paper-2); }

/* ---- Modules (Django's boxed sections): a hairline card with a plain heading ---- */
.module { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.module h2, .module caption, .inline-group h2 { background: var(--color-paper-2); color: var(--color-ink); font-weight: 600;
  text-transform: none; letter-spacing: 0; font-size: var(--text-base); border-bottom: 1px solid var(--color-rule); padding: var(--space-xs) var(--space-sm); }
.module caption a, .module h2 a { color: var(--color-accent); }
fieldset.module { margin-bottom: var(--space-md); }
.submit-row { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-xs); }
.paginator { border-top: 1px solid var(--color-rule-soft); }
#changelist-filter { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
#changelist-filter h2 { background: var(--color-paper-2); color: var(--color-ink); text-transform: none; letter-spacing: 0; font-size: var(--text-base); }
#changelist-filter li.selected a { color: var(--color-accent); }
#toolbar { background: transparent; border: 0; padding: 0 0 var(--space-xs); }

/* ---- Messages: tinted, no side stripe ---- */
.messagelist li { border-radius: var(--radius-input); font-weight: 500; background-image: none; padding-left: var(--space-sm);
  color: var(--color-ink); margin: 0 var(--space-lg) var(--space-2xs); }
.messagelist li.warning { background-color: var(--color-attention-bg); color: var(--color-attention-fg); }
.messagelist li.error { background-color: var(--color-error-bg); color: var(--color-error); }
ul.messagelist { margin-top: var(--space-sm); }

/* ---- Workbench: the work, then context and actions ---- */
.workbench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: var(--space-lg); align-items: start; }
.workbench__aside { position: sticky; top: var(--space-sm); display: grid; gap: var(--space-sm); }
.workbench__aside .panel, .panel { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-card);
  padding: var(--space-sm); }
.panel h2 { margin: 0 0 var(--space-2xs); font-size: var(--text-base); font-weight: 600; background: none; color: var(--color-ink); padding: 0; }
.panel > :last-child { margin-bottom: 0; }

/* ---- Index-first: filters, then the table ---- */
.index-head { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); align-items: end; padding: var(--space-xs) 0 var(--space-sm);
  border-bottom: 1px solid var(--color-rule); margin-bottom: var(--space-sm); }

/* ---- Phones ---- */
@media (max-width: 48rem) {
  html body #header { padding: var(--space-2xs) var(--space-sm); }
  html body #header .areas { order: 3; width: 100%; margin-right: 0; }
  .area > summary { padding: var(--space-3xs) var(--space-2xs); }
  .area .menu { position: fixed; left: var(--space-sm); right: var(--space-sm); top: auto; min-width: 0; }
  html body div.breadcrumbs { padding: var(--space-xs) var(--space-sm) 0; }
  html body #content { padding: var(--space-sm); }
  .messagelist li { margin: 0 var(--space-sm) var(--space-2xs); }
  .workbench { grid-template-columns: minmax(0, 1fr); }
  /* phone: only the side column's first panel (the day, the upload) above the work; its lists (recent days, the scan's
     counts) after it, so they don't push the page's own content two screens down */
  .workbench__aside { display: contents; }
  .workbench__aside > * { order: 1; }
  .workbench__aside > :first-child { order: -1; }
  .board-actions .button, .bar .button { white-space: normal; text-align: center; max-width: 100%; }
  #content table:not(#result_list) { display: block; max-width: 100%; overflow-x: auto; }
}
@media print {
  #header, .breadcrumbs, #footer, .workbench__aside, .areas, #nav-sidebar, #toggle-nav-sidebar, .bar, .no-print { display: none !important; }
  .workbench { display: block; }
}

/* ---- Dashboard: Bento grid of today's boards (real counts only) ---- */
.dash h1 { margin-bottom: var(--space-3xs); }
.dash .lede { margin: 0 0 var(--space-md); color: var(--color-ink-2); }
.setup { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); align-items: center; padding: var(--space-sm) var(--space-md);
  background: var(--color-attention-bg); color: var(--color-attention-fg); border-radius: var(--radius-card); margin-bottom: var(--space-md); }
.setup p { margin: 0; flex: 1 1 320px; }
.counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--color-paper);
  border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; margin-bottom: var(--space-md); }
.counts a { background: var(--color-paper); box-shadow: 0 0 0 1px var(--color-rule-soft); padding: var(--space-sm) var(--space-md); color: var(--color-ink); text-decoration: none; }
.counts a:hover { background: var(--color-paper-2); }
.counts strong { display: block; font-family: var(--font-outlier); font-size: var(--text-xl); font-weight: 500; line-height: 1.1; }
.counts span { font-size: var(--text-sm); color: var(--color-ink-2); }
.bento { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-sm); align-items: start; }
.board { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-card); min-width: 0; }
.board:has(li.overdue) { grid-column: span 2; border-color: var(--color-attention); }
.board h2 { margin: 0; padding: var(--space-xs) var(--space-sm); font-size: var(--text-base); font-weight: 600; background: none;
  color: var(--color-ink); border-bottom: 1px solid var(--color-rule-soft); display: flex; justify-content: space-between; gap: var(--space-2xs); }
.board h2 .n { font-family: var(--font-outlier); font-weight: 500; color: var(--color-ink-2); }
.board ul { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow-y: auto; }
.board li { list-style: none; margin: 0; padding: var(--space-2xs) var(--space-sm); border-bottom: 1px solid var(--color-rule-soft); font-size: var(--text-sm); }
.board li:last-child { border-bottom: 0; }
.board li.overdue { background: var(--color-attention-bg); }
.board li.overdue a { color: var(--color-attention-fg); font-weight: 600; }
.ontrack { color: var(--color-ink-2); margin: var(--space-sm) 0 0; font-size: var(--text-sm); }
details.records { margin-top: var(--space-xl); border-top: 1px solid var(--color-rule); padding-top: var(--space-sm); }
details.records summary { cursor: pointer; font-weight: 600; padding: var(--space-2xs) 0; }
@media (max-width: 48rem) { .board:has(li.overdue) { grid-column: auto; } }
.panel.links { display: grid; gap: var(--space-2xs); }
.panel.links .button { justify-content: flex-start; }
.panel p { margin: var(--space-2xs) 0 0; }
.panel input[type=date] { width: 100%; }
.bar { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: end; }
.index-head input[name="q"] { width: min(100%, 20rem); }
html body .object-tools a:link, html body .object-tools a:visited { text-transform: none; letter-spacing: 0; color: var(--color-ink);
  background: var(--color-paper); border: 1px solid var(--color-field); border-radius: var(--radius-input); }
html body .selector-chosen h2, html body .selector-chosen-title, html body .selector-available h2, html body .selector-available-title {
  background: var(--color-paper-2); color: var(--color-ink); border: 1px solid var(--color-rule); }
html body .selector-chosen-title label, html body .selector-available-title label { color: var(--color-ink); }
/* Tab rows (Gamma / X-ray, years, teams, branches): the chosen one solid, the others outlined, so the choice shows */
:has(> a.button[aria-current]) > a.button:not([aria-current]) { background: var(--color-paper); color: var(--color-ink); border: 1px solid var(--color-field); }
:has(> a.button[aria-current]) > a.button:not([aria-current]):hover { background: var(--color-paper-2); }