/* Apex Parking portal, on top of static/css/brand.css. See docs/PORTAL-DESIGN.md.

   One rule: paper = proof, flat = prose. Only artefacts sit on bordered Notice paper (the notice on its
   detail page, photos, the map, the printed slip previews, forms you fill in). Everything else, including
   figures, tables and explanation, sits flat on Copy paper and is organised by type and 1px rules.

   Fonts are the marketing site's: Schibsted Grotesk (display), Public Sans (body), IBM Plex Mono (figures,
   references, labels). Every number is tabular. Below 900px the sidebar becomes a menu. */

:root {
  /* brand.css names, pointed at the brand fonts */
  --font: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* From the marketing DESIGN.md */
  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --sign-blue-deep: #083a78;
  --radius-paper: 6px;
  --radius-control: 6px;
  --shadow-paper: 0 1px 2px rgba(17, 24, 32, 0.08);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --text-small: 0.9375rem;
  --text-mono: 0.8125rem;
  --text-mono-sm: 0.75rem;
  --track-display: -0.025em;
  --track-h3: -0.01em;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-focus: 120ms;
  --dur-menu: 200ms;
  /* Portal only */
  --sidebar: 252px;
  --main-pad: 48px;
  --mobile-bar: 60px;
}

body.portal {
  background: var(--copy-paper);
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.portal h1, .portal h2, .portal h3 { font-family: var(--font-display); color: var(--toner); }
.portal h1 { font-weight: 700; letter-spacing: var(--track-display); }
.portal h2, .portal h3 { font-weight: 600; letter-spacing: var(--track-h3); }
.portal a { text-underline-offset: 2px; }
.portal :focus-visible { outline: 3px solid var(--toner); outline-offset: 2px; box-shadow: 0 0 0 2px var(--copy-paper); }
.portal code { font-family: var(--mono); font-size: 0.875em; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 30; background: var(--white); padding: 10px 14px; border: 1px solid var(--ruled-line); border-radius: var(--radius-control); }
.skip-link:focus { top: 8px; }

/* Utilities */
.small { font-size: 14px; }
.right { text-align: right !important; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); }
.plate { font-family: var(--mono); font-weight: 500; letter-spacing: 0.06em; white-space: nowrap; }
.plate .pill, .mono .pill { font-family: var(--font); letter-spacing: 0.01em; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
section { margin-bottom: var(--space-7); }

/* ------------------------------------------------------------------ Buttons
   brand.css's button.button outranks a variant class on <button>, so variants name both. */
.button, button.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--radius-control);
  background: var(--sign-blue); color: var(--white); border: 1px solid var(--sign-blue);
  font-family: var(--font); font-size: var(--text-small); font-weight: 500; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: none;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.button:hover, button.button:hover, .button[aria-expanded="true"] { background: var(--sign-blue-deep); border-color: var(--sign-blue-deep); }
.button-secondary, button.button-secondary { background: var(--notice-paper); color: var(--toner); border-color: var(--ruled-line); }
.button-secondary:hover, button.button-secondary:hover { background: var(--white); border-color: var(--pencil); }
.button-secondary[aria-expanded="true"], button.button-secondary[aria-expanded="true"] { background: var(--sign-blue-tint); border-color: var(--sign-blue); color: var(--sign-blue); }
.button-danger, button.button-danger { background: var(--notice-paper); color: var(--error); border-color: var(--error); }
.button-danger:hover, button.button-danger:hover, button.button-danger[aria-expanded="true"] { background: var(--error-tint); border-color: var(--error); color: var(--error); }
.button-quiet, button.button-quiet { background: transparent; color: var(--pencil); border-color: var(--ruled-line); }
.button-quiet:hover, button.button-quiet:hover { background: var(--white); color: var(--toner); border-color: var(--pencil); }
.button-small, button.button-small { min-height: 36px; padding: 0 12px; font-size: 14px; }
.button.full { width: 100%; }
@media (pointer: coarse) { .button-small, button.button-small { min-height: 44px; } }

/* ------------------------------------------------------------------ Brand */
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--toner); text-decoration: none; }
.brand-mark { display: block; flex: none; }
.brand-text { display: grid; gap: 2px; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.3125rem; line-height: 1; letter-spacing: -0.015em; color: #47505a; white-space: nowrap; }
.brand-apex { color: var(--sign-blue); }
.brand-sub { font-family: var(--mono); font-weight: 500; font-size: var(--text-mono-sm); color: var(--pencil); line-height: 1.2; }
.brand-large .brand-mark { width: 52px; height: 52px; }
.brand-large .brand-name { font-size: 1.625rem; }

/* ------------------------------------------------------------------ Sidebar */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar); z-index: 20;
  display: flex; flex-direction: column; gap: 28px; padding: 24px 14px 16px;
  background: var(--copy-paper); border-right: 1px solid var(--ruled-line); overflow-y: auto;
}
.sidebar-logo { padding: 0 8px; }
.side-nav { flex: 1; }
.nav-group + .nav-group { margin-top: 22px; }
.nav-heading { margin: 0 0 6px; padding: 0 10px; font-family: var(--mono); font-size: var(--text-mono-sm); font-weight: 500; color: var(--pencil); }
.side-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-nav a {
  position: relative; display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: var(--radius-control);
  color: var(--toner); font-size: var(--text-small); font-weight: 500; text-decoration: none;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.side-nav a:hover { background: var(--white); }
.side-nav a[aria-current="page"] { background: var(--sign-blue-tint); color: var(--sign-blue); }
.side-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sign-blue); }
.sidebar-user { border-top: 1px solid var(--ruled-line); padding: 16px 8px 0; font-size: 14px; }
.who { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.who p { margin: 0; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.avatar {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--toner); color: var(--white); font-family: var(--mono); font-weight: 500; font-size: 12px;
}
.sidebar-backdrop { display: none; }
.mobile-bar { display: none; }

/* ------------------------------------------------------------------ Page */
.main { margin-left: var(--sidebar); padding: 40px var(--main-pad) 64px; max-width: calc(var(--sidebar) + 1280px); outline: none; }
.narrow { max-width: 640px; }
.page-header { margin-bottom: var(--space-6); }
.page-header-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-header h1 { margin: 0 0 6px; font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1.1; }
.page-header p { margin: 0; }
.page-header .muted { font-size: var(--text-small); }
.page-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.page-actions:empty { display: none; }
.page-actions form { margin: 0; }
.crumbs { margin: 0 0 8px; font-size: 14px; }
.crumbs a { color: var(--pencil); text-decoration: none; }
.crumbs a:hover { color: var(--sign-blue); text-decoration: underline; }

/* Section heading: the title, then one 1px rule across the column. */
.section-heading {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 10px; margin-bottom: var(--space-4); border-bottom: 1px solid var(--ruled-line);
}
.section-heading h2, .section-heading h3 { margin: 0; font-size: 1.125rem; line-height: 1.3; }
.section-count { font-family: var(--mono); font-weight: 500; font-size: var(--text-mono); color: var(--pencil); margin-left: 4px; }
.section-link { font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.section-link:hover { text-decoration: underline; }

/* Empty state: a quiet line, not a box. */
.empty-state { padding: 4px 0 4px 14px; border-left: 2px solid var(--ruled-line); margin: 0; }
.empty-state p { margin: 0; }
.empty-message { color: var(--toner); font-weight: 500; }
.empty-hint { color: var(--pencil); font-size: 14px; margin-top: 2px !important; }
.empty-state .button { margin-top: 12px; }

/* Messages and callouts: functional colour, a left rule, no card. */
.messages { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: 8px; }
.messages li { padding: 10px 14px; border-radius: 0 var(--radius-control) var(--radius-control) 0; background: var(--sign-blue-tint); border-left: 3px solid var(--sign-blue); color: var(--toner); margin: 0; }
.messages li.error { background: var(--error-tint); border-left-color: var(--error); color: var(--toner); }
.messages li.success { background: var(--ok-tint); border-left-color: var(--ok); color: var(--toner); }
.callout { padding: 12px 16px; margin-bottom: var(--space-5); border-left: 3px solid var(--sign-blue); background: var(--sign-blue-tint); border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.callout-warn { border-left-color: var(--error); background: var(--error-tint); }

/* Pills: colours from brand.css; one size everywhere. */
.portal .pill { padding: 2px 9px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.5; white-space: nowrap; vertical-align: 1px; }

/* ------------------------------------------------------------------ Data table shell */
.table-scroll { position: relative; overflow-x: auto; margin: 0 -12px; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.portal table.ruled.data-table th, .portal table.ruled.data-table td { padding: 11px 12px; border-top: 0; vertical-align: middle; text-align: left; }
.portal table.ruled.data-table th {
  font-family: var(--mono); font-size: var(--text-mono-sm); font-weight: 500; color: var(--pencil);
  padding-top: 0; padding-bottom: 9px; border-bottom: 1px solid var(--toner); white-space: nowrap;
}
.portal table.ruled.data-table td { border-bottom: 1px solid var(--ruled-line); }
.data-table tbody tr { transition: background-color var(--dur-fast); }
.data-table tbody tr:hover { background: var(--white); }
.data-table tbody tr.is-selected, .data-table tbody tr:target { background: var(--sign-blue-tint); }
.data-table tbody tr.is-selected td:first-child, .data-table tbody tr:target td:first-child { box-shadow: inset 3px 0 0 var(--sign-blue); }
.data-table td a { font-weight: 500; text-decoration: none; }
.data-table td a:hover { text-decoration: underline; }
.data-table td.mono a, .data-table td .mono { font-weight: 500; }
.row-actions a + a { margin-left: 16px; }

/* ------------------------------------------------------------------ Notice list toolbar
   Sticky under the page header. A control that is filtering turns sign blue. */
.toolbar-sentinel { height: 0; }
.toolbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 calc(-1 * var(--main-pad)) var(--space-4); padding: 12px var(--main-pad);
  background: var(--copy-paper); transition: box-shadow var(--dur-fast);
}
.toolbar.is-stuck { box-shadow: 0 1px 0 var(--ruled-line); }
.tool { flex: none; }
.toolbar select, .toolbar input[type="search"], .tool-dates, .chip-face {
  height: 42px; border: 1px solid var(--ruled-line); border-radius: var(--radius-control); background-color: var(--white);
  color: var(--toner); font: inherit; font-size: 14px;
  transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
}
.toolbar select:hover, .toolbar input[type="search"]:hover, .tool-dates:hover, .chip:hover .chip-face { border-color: var(--pencil); }

/* Search: what is typed reads like a plate (upper case, monospace, tracked), as in the table. */
.tool-search { position: relative; flex: 1 1 230px; min-width: 230px; }
.toolbar input[type="search"] {
  width: 100%; padding: 0 40px 0 38px; appearance: none;
  font-family: var(--mono); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--white) no-repeat 14px 50% / 15px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6673' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.8-4.8'/%3E%3C/svg%3E");
}
.toolbar input[type="search"]::placeholder { font-family: var(--font); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--pencil); opacity: 1; }
.toolbar input[type="search"]:not(:placeholder-shown) { border-color: var(--sign-blue); }
.toolbar input[type="search"]:focus { border-color: var(--sign-blue); box-shadow: 0 0 0 3px var(--sign-blue-tint); outline: none; }
.tool-key {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none;
  min-width: 22px; padding: 1px 6px; border: 1px solid var(--ruled-line); border-radius: 4px; background: var(--copy-paper);
  font-family: var(--mono); font-size: 12px; line-height: 18px; text-align: center; color: var(--pencil);
}
.tool-search:focus-within .tool-key, .toolbar input[type="search"]:not(:placeholder-shown) + .tool-key { display: none; }
@media (hover: none) { .tool-key { display: none; } .toolbar input[type="search"] { padding-right: 14px; } }

.toolbar select {
  appearance: none; padding: 0 28px 0 12px; text-overflow: ellipsis; cursor: pointer;
  background: var(--white) no-repeat right 11px center / 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235a6673' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
}
.toolbar select[name="site"] { width: 140px; }
.toolbar select[name="status"] { width: 124px; }
.toolbar select.is-set {
  background-color: var(--sign-blue-tint); border-color: var(--sign-blue); color: var(--sign-blue); font-weight: 600;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230b4f9e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
}

/* Date range: one control, labelled once. */
.tool-dates { display: inline-flex; align-items: center; gap: 0; padding: 0 4px 0 12px; }
.tool-dates:focus-within { border-color: var(--sign-blue); }
.tool-label { font-family: var(--mono); font-size: var(--text-mono-sm); font-weight: 500; color: var(--pencil); margin-right: 6px; white-space: nowrap; }
.tool-dash { color: var(--pencil); padding: 0 2px; }
.tool-dates input::-webkit-calendar-picker-indicator { margin: 0 0 0 4px; padding: 2px; cursor: pointer; }
/* With the script, a click anywhere on the date opens the picker, so the icon can go and it fits one row. */
.js .tool-dates input::-webkit-calendar-picker-indicator { display: none; }
.js .tool-dates input { width: 88px; cursor: pointer; }
.tool-dates input {
  height: 36px; width: 112px; padding: 0 2px; border: 0; border-radius: var(--radius-control); background: transparent;
  font-family: var(--mono); font-size: 13px; color: var(--toner);
}
.tool-dates.is-set { background-color: var(--sign-blue-tint); border-color: var(--sign-blue); }
.tool-dates.is-set .tool-label, .tool-dates.is-set .tool-dash { color: var(--sign-blue); }

/* "Flagged only" toggle chip. The checkbox stays in the page for keyboards and screen readers. */
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip-input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip-face { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 10px; font-weight: 500; color: var(--toner); white-space: nowrap; }
.chip-face::before { content: ""; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--pencil); box-sizing: border-box; transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.chip-input:checked + .chip-face { background-color: var(--sign-blue-tint); border-color: var(--sign-blue); color: var(--sign-blue); }
.chip-input:checked + .chip-face::before {
  border-color: var(--sign-blue); background: var(--sign-blue) no-repeat center / 10px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6.2 2.4 2.4 4.6-5'/%3E%3C/svg%3E");
}
.chip-input:focus-visible + .chip-face { outline: 3px solid var(--toner); outline-offset: 2px; }

.tool-actions { display: inline-flex; align-items: center; gap: 4px; }
.button.tool-apply { min-height: 42px; height: 42px; padding: 0 14px; font-size: 14px; }
.tool-clear { color: var(--pencil); margin-left: 6px; text-decoration: underline; }
.tool-clear:hover { color: var(--sign-blue); }
.toolbar-error { margin: -8px 0 14px; color: var(--error); font-size: 14px; }
.pager { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: var(--space-5); }

/* ------------------------------------------------------------------ Forms */
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label { font-weight: 500; font-size: 14px; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; min-height: 44px; padding: 8px 12px; color: var(--toner);
  border: 1px solid var(--ruled-line); border-radius: var(--radius-control); background: var(--white); width: 100%;
  transition: border-color var(--dur-focus), box-shadow var(--dur-focus);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--pencil); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sign-blue); box-shadow: 0 0 0 3px var(--sign-blue-tint); outline: none; }
.field .help { margin: 0; font-size: 13px; }
.field .error { color: var(--error); font-size: 14px; margin: 0; }
.field .optional { font-weight: 400; }
.field-check .check, .field-radio .check { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 14px; min-height: 44px; }
.field .check input { width: 20px; min-height: 20px; height: 20px; margin: 0; accent-color: var(--sign-blue); box-shadow: none; }
.field-radio { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.field-radio legend { font-weight: 500; font-size: 14px; padding: 0; margin-bottom: 4px; }
.field-radio .check { font-weight: 400; font-size: 15px; }
.field input[type="file"] { padding: 9px 12px; }
.field textarea { min-height: 88px; }
.pair { display: grid; gap: 0 16px; grid-template-columns: 1fr 1fr; }
/* Settings forms: flat on the page, one column, a rule above the buttons. */
.narrow > form > .actions { border-top: 1px solid var(--ruled-line); padding-top: var(--space-5); margin-top: var(--space-2); }

/* Sign in (no sidebar). The form is the one paper panel. */
.signin { max-width: 440px; margin: 0 auto; padding: 72px var(--gutter) 48px; }
.signin-logo { margin-bottom: 40px; }
.signin h1 { font-size: 1.75rem; margin-bottom: 6px; }
.portal .signin form.paper { margin-top: 24px; padding: 24px; }

/* ------------------------------------------------------------------ Paper (artefacts only) */
.portal .paper {
  background: var(--notice-paper); border: 1px solid var(--ruled-line); border-radius: var(--radius-paper);
  box-shadow: var(--shadow-paper);
}

/* ------------------------------------------------------------------ Dashboard */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin-bottom: var(--space-4); }
.figure { padding: 4px 32px 4px 0; }
.figure + .figure { border-left: 1px solid var(--ruled-line); padding-left: 32px; }
.figure-link { display: grid; gap: 6px; color: var(--toner); text-decoration: none; }
.figure-label { font-family: var(--mono); font-weight: 500; font-size: var(--text-mono); color: var(--pencil); }
.figure-value { font-family: var(--mono); font-weight: 500; font-size: clamp(3rem, 4.6vw, 4.25rem); line-height: 1; letter-spacing: -0.04em; color: var(--toner); transition: color var(--dur-fast); }
.figure-hint { font-size: 14px; color: var(--pencil); max-width: 30ch; }
.figure-more { font-size: 14px; font-weight: 500; color: var(--sign-blue); }
.figure-link:hover .figure-value { color: var(--sign-blue); }
.figure-link:hover .figure-more { text-decoration: underline; }
.quiet-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; color: var(--pencil); font-size: var(--text-small); }
.quiet-line::before {
  content: ""; width: 18px; height: 18px; margin-right: 6px; flex: none; border-radius: 50%; border: 1.5px solid var(--pencil);
  background: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235a6673' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6.2 2.4 2.4 4.6-5'/%3E%3C/svg%3E");
}
.quiet-line a { color: var(--pencil); }
.quiet-line a:hover { color: var(--sign-blue); }
.quiet-line strong { color: var(--toner); font-weight: 600; }
.figures + .quiet-line { padding-top: 14px; border-top: 1px solid var(--ruled-line); }

.queue-groups { display: grid; gap: var(--space-6) var(--space-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); align-items: start; }
.queue-group-head { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline; margin-bottom: 8px; }
.queue-group-head h3 { margin: 0; font-size: 1rem; }
.queue-group-head p { grid-column: 1; margin: 0; }
.queue-group-head .section-link { grid-column: 2; grid-row: 1; }
.queue { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--toner); }
.queue-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ruled-line); }
.queue-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.queue-ref { font-family: var(--mono); font-weight: 500; text-decoration: none; }
.queue-ref:hover { text-decoration: underline; }
.queue-who { font-weight: 500; }
.queue-meta { flex-basis: 100%; font-size: 14px; color: var(--pencil); }
.queue-quote { flex-basis: 100%; font-size: 14px; color: var(--toner); overflow-wrap: anywhere; }
.queue-panel {
  grid-column: 1 / -1; padding: 16px; margin-top: 4px;
  background: var(--notice-paper); border: 1px solid var(--ruled-line); border-radius: var(--radius-paper); box-shadow: var(--shadow-paper);
}
.queue-panel > label { display: block; font-weight: 500; font-size: 14px; margin-bottom: 6px; }
.queue-panel textarea {
  width: 100%; min-height: 64px; padding: 8px 12px; font: inherit; font-size: 16px; color: var(--toner);
  border: 1px solid var(--ruled-line); border-radius: var(--radius-control); background: var(--white); resize: vertical;
}
.queue-panel textarea:focus { border-color: var(--sign-blue); box-shadow: 0 0 0 3px var(--sign-blue-tint); outline: none; }
.queue-panel .help { margin: 6px 0 12px; font-size: 13px; }
.queue-panel .field-radio { margin-bottom: 8px; }
.queue-panel .field-radio .check { min-height: 36px; }
.queue-panel .check input { width: 18px; height: 18px; margin: 0; accent-color: var(--sign-blue); }
.js .queue-panel:not(.is-open), .js .action-panel:not(.is-open) { display: none; }
html:not(.js) [data-toggle] { display: none; }

.dash-columns { display: grid; gap: 0 var(--space-7); grid-template-columns: minmax(0, 1fr); }
.money { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0 0 4px; }
.money dt { font-family: var(--mono); font-weight: 500; font-size: var(--text-mono); color: var(--pencil); }
.money dd { margin: 0; font-family: var(--mono); font-weight: 500; font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.02em; }
.money-note { margin: 0 0 var(--space-5); font-size: 13px; color: var(--pencil); }
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 14px; }
.portal .chart-title { margin: 0; font-family: var(--mono); font-weight: 500; font-size: var(--text-mono); color: var(--pencil); letter-spacing: 0; }
.chart-legend { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; font-size: 14px; color: var(--pencil); }
.chart-legend li { display: inline-flex; align-items: center; gap: 8px; }
.chart-legend strong { color: var(--toner); font-family: var(--mono); font-weight: 500; }
.swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.swatch-issued { background: #c4ced8; }
.swatch-paid { background: var(--sign-blue); }
.chart { position: relative; padding-left: 34px; }
.chart-plot { display: block; width: 100%; height: 200px; overflow: visible; }
.chart-y { position: absolute; left: 0; top: 0; width: 28px; height: 200px; }
.chart-y span { position: absolute; right: 0; transform: translateY(50%); font-family: var(--mono); font-size: 11px; line-height: 1; color: var(--pencil); }
.chart-x { position: relative; height: 24px; margin-top: 6px; }
.chart-x span { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; color: var(--pencil); white-space: nowrap; }
.chart-x span:last-child { transform: translateX(-85%); color: var(--toner); }
.chart-grid { stroke: var(--ruled-line); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-base { stroke: var(--pencil); stroke-width: 1; }
.chart-hit { fill: transparent; }
.chart-day:hover .chart-hit { fill: rgba(11, 79, 158, 0.06); }
.bar-issued { fill: #c4ced8; }
.bar-paid { fill: var(--sign-blue); }
.site-month td:first-child { min-width: 11rem; }
.site-month abbr { text-decoration: none; }
.rate { display: inline-flex; align-items: center; gap: 10px; }
.rate-bar { display: block; width: 44px; height: 6px; border-radius: 3px; background: var(--ruled-line); overflow: hidden; }
.rate-bar span { display: block; height: 100%; background: var(--sign-blue); }

/* ------------------------------------------------------------------ Notice detail */
.reference { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-weight: 500; letter-spacing: -0.01em; }
.reference .pill { font-family: var(--font); letter-spacing: 0.01em; font-size: 13px; }
.detail { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.detail-main > section, .detail-side > section { margin-bottom: 40px; }

/* The notice: Notice paper with a printed edge and a perforated strip at the top (DESIGN.md "Paper"). */
.portal .sheet { margin-bottom: 40px; padding: 0; overflow: hidden; }
.sheet-perforated::before { content: ""; display: block; height: 12px; border-bottom: 1px dashed var(--ruled-line); }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ruled-line); }
.sheet-heading { flex: 1 1 0; min-width: 0; }
.sheet-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: var(--track-h3); line-height: 1.25; }
.sheet-meta { margin: 0; font-family: var(--mono); font-size: var(--text-mono); color: var(--pencil); }
.sheet-ref { margin: 0 0 0 auto; font-family: var(--mono); font-size: var(--text-mono); color: var(--toner); white-space: nowrap; align-self: flex-start; }
.sheet-fields { margin: -1px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sheet-field { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 16px; padding: 10px 20px; border-top: 1px solid var(--ruled-line); }
.sheet-field:nth-child(odd) { border-right: 1px solid var(--ruled-line); }
.sheet-field dt { font-family: var(--mono); font-weight: 500; font-size: var(--text-mono-sm); color: var(--pencil); padding-top: 3px; }
.sheet-field dd { margin: 0; font-size: var(--text-small); overflow-wrap: anywhere; }
.sheet-field .plate {
  display: inline-block; padding: 1px 8px; font-size: 1.0625rem; font-weight: 500; letter-spacing: 0.08em;
  background: var(--white); border: 1.5px solid var(--toner); border-radius: 4px;
}
.sheet-figure { font-family: var(--mono); font-weight: 500; }
.sheet-secondary { display: block; font-size: 13px; color: var(--pencil); }
.sheet-note { border-top: 1px solid var(--ruled-line); padding: 14px 20px 18px; }
.portal .sheet-label { margin: 0 0 4px; font-family: var(--mono); font-weight: 500; font-size: var(--text-mono-sm); color: var(--pencil); letter-spacing: 0; }
.sheet-note p { margin: 0; }

/* Photos: real thumbnails on a printed edge; a neutral placeholder when the file is missing. */
.photos { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.photos li { display: grid; gap: 6px; }
.photo {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--copy-paper); border: 1px solid var(--ruled-line); border-radius: var(--radius-paper); box-shadow: var(--shadow-paper);
  transition: border-color var(--dur-fast);
}
a.photo:hover { border-color: var(--pencil); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-missing {
  display: none; position: absolute; inset: 0; place-content: center; justify-items: center; gap: 8px; padding: 12px;
  font-size: 13px; color: var(--pencil); text-align: center;
}
.photo-missing::before {
  content: ""; width: 28px; height: 28px; opacity: 0.7;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6673' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m21 16-5-5-8 8'/%3E%3C/svg%3E");
}
.photo.is-missing { cursor: default; }
.photo.is-missing img { display: none; }
.photo.is-missing .photo-missing { display: grid; }
.photo-caption { font-size: 13px; color: var(--pencil); }

.lightbox { padding: 0; border: 0; background: transparent; max-width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: visible; }
.lightbox::backdrop { background: rgba(17, 24, 32, 0.82); }
.lightbox figure { margin: 0; }
.lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 140px); margin: 0 auto; border-radius: var(--radius-paper); background: var(--asphalt, #2b3139); }
.lightbox figcaption { margin-top: 10px; color: var(--white); font-size: 14px; text-align: center; }
.lightbox-bar { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.lightbox[open] { animation: lightbox-in var(--dur-menu) var(--ease-out); }
@keyframes lightbox-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }

/* Location: a static map on a printed edge, the coordinates beside it. */
.location { display: grid; gap: 16px 24px; grid-template-columns: minmax(0, 1.6fr) minmax(200px, 1fr); align-items: start; }
.map {
  position: relative; display: block; height: 240px; overflow: hidden;
  background: #e8ecef; border: 1px solid var(--ruled-line); border-radius: var(--radius-paper); box-shadow: var(--shadow-paper);
}
.map-tiles { position: absolute; display: block; }
.map-tiles img { position: absolute; display: block; max-width: none; width: 256px; height: 256px; }
.map-pin {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--sign-blue); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--sign-blue), 0 2px 6px rgba(17, 24, 32, 0.35);
}
.map:hover { border-color: var(--pencil); }
.location-side p { margin: 0 0 6px; font-size: 14px; }
.location-facts { margin: 0 0 12px; display: grid; gap: 10px; }
.location-facts dt { font-family: var(--mono); font-weight: 500; font-size: var(--text-mono-sm); color: var(--pencil); }
.location-facts dd { margin: 0; font-size: var(--text-small); }
.location-facts dd.mono { font-size: 15px; }
.map-credit { font-size: 12px !important; color: var(--pencil); }
.map-credit a { color: var(--pencil); }

.appeal { padding: 16px 0; border-bottom: 1px solid var(--ruled-line); }
.appeal:first-of-type { padding-top: 0; }
.appeal-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.appeal p { margin: 4px 0; }
.appeal blockquote { margin: 10px 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--ruled-line); }

/* Actions: a button group; the chosen action's form opens below on paper. */
.button-group { display: flex; flex-wrap: wrap; gap: 8px; }
.button-group .button { flex: 1 1 auto; }
.action-panel {
  margin-top: 14px; padding: 16px;
  background: var(--notice-paper); border: 1px solid var(--ruled-line); border-radius: var(--radius-paper); box-shadow: var(--shadow-paper);
}
.portal .action-title { margin: 0 0 8px; font-size: 1rem; }
.js .action-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.action-panel > p { margin: 0 0 12px; }
.actions-box > p { margin: 14px 0 0; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: grid; gap: 2px; padding: 0 0 18px 22px; border-left: 1px solid var(--ruled-line); position: relative; font-size: 14px; margin-left: 5px; }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--copy-paper); border: 2px solid var(--sign-blue); box-sizing: border-box; }
.timeline-status { margin-bottom: 2px; }
.timeline-reason { color: var(--pencil); }

/* ------------------------------------------------------------------ Permits */
.search-inline { display: flex; gap: 12px; align-items: flex-end; margin-bottom: var(--space-5); }
.search-inline .field { flex: 1; max-width: 320px; margin-bottom: 0; }
.linkish { font: inherit; font-size: 14px; background: none; border: 0; padding: 0; min-height: 44px; min-width: 44px; color: var(--sign-blue); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.linkish.danger { color: var(--error); }
.result { padding: 12px 16px; margin-bottom: var(--space-6); background: var(--ok-tint); border-left: 3px solid var(--ok); border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.result h2 { margin-bottom: 4px; font-size: 1rem; }
.result p { margin: 0; }
.result-errors { margin: 8px 0 0; color: var(--error); }
/* The add and upload forms beside the permit list: flat, separated by section rules. */
.actions-panel { margin-bottom: 40px; }
.actions-panel > h2 { font-size: 1.125rem; padding-bottom: 10px; margin-bottom: var(--space-4); border-bottom: 1px solid var(--ruled-line); }

/* ------------------------------------------------------------------ Responsive */
@media (min-width: 1300px) {
  .dash-columns { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
@media (max-width: 1180px) {
  .detail { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wide-only { display: none; }
}
@media (max-width: 900px) {
  :root { --main-pad: var(--gutter); }
  .main { margin-left: 0; padding: 24px var(--main-pad) 56px; }
  .mobile-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    position: sticky; top: 0; z-index: 15; min-height: var(--mobile-bar); padding: 8px var(--gutter);
    background: var(--copy-paper); border-bottom: 1px solid var(--ruled-line);
  }
  .mobile-bar .brand-mark { width: 34px; height: 34px; }
  .mobile-bar .brand-name { font-size: 1.125rem; }
  .toolbar { top: var(--mobile-bar); }
  .location { grid-template-columns: minmax(0, 1fr); }
  /* Without JavaScript the sidebar simply sits above the page. */
  html:not(.js) .mobile-bar .menu-button { display: none; }
  html:not(.js) .sidebar { position: static; width: auto; border-right: 0; border-bottom: 1px solid var(--ruled-line); }
  html:not(.js) .sidebar-logo { display: none; }
  .js .sidebar {
    width: min(300px, 85vw); background: var(--copy-paper); box-shadow: 0 12px 32px -8px rgba(17, 24, 32, 0.25);
    transform: translateX(-100%); visibility: hidden; transition: transform var(--dur-menu) var(--ease-out), visibility 0s linear var(--dur-menu);
  }
  .js .nav-open .sidebar { transform: none; visibility: visible; transition: transform var(--dur-menu) var(--ease-out); }
  .js .nav-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 18; background: rgba(17, 24, 32, 0.35); }
}
@media (max-width: 700px) {
  .figures { grid-template-columns: minmax(0, 1fr); }
  .figure, .figure + .figure { padding: 14px 0; border-left: 0; }
  .figure + .figure { border-top: 1px solid var(--ruled-line); }
  .figure:first-child { padding-top: 0; }
  .figure-link { grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 16px; }
  .figure-label { grid-column: 1; }
  .figure-value { grid-column: 2; grid-row: 1 / span 3; font-size: 2.75rem; align-self: center; }
  .figure-hint, .figure-more { grid-column: 1; }
  .sheet-fields { grid-template-columns: minmax(0, 1fr); }
  .sheet-field:nth-child(odd) { border-right: 0; }
  .map { height: 200px; }
}
@media (max-width: 560px) {
  .pair { grid-template-columns: 1fr; }
  .queue-row { grid-template-columns: minmax(0, 1fr) auto; }
  .queue-buttons { grid-column: 1 / -1; }
  .queue-buttons .button { width: 100%; }
  .money { gap: 10px 24px; }
  .money dd { font-size: 1.25rem; }
  /* Phones: search and dates take the full width, the two selects share a row. */
  .toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .tool-search, .tool-dates { grid-column: 1 / -1; min-width: 0; }
  .toolbar select[name="site"], .toolbar select[name="status"] { width: 100%; }
  .tool-dates input { flex: 1; width: auto; min-width: 0; }
  .chip-face { width: 100%; justify-content: center; }
  .tool-actions { justify-content: flex-end; }
  .sheet-head { flex-wrap: wrap; }
  .sheet-ref { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 400px) {
  .sheet-field { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .portal *, .portal *::before, .portal *::after { transition: none !important; animation: none !important; }
}

/* Printed notice layout previews (Settings > Business rules > Preview) */
.slips { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; align-items: start; }
.slip-column h2 { font-size: 1.125rem; margin: 0 0 .25rem; }
.slip-column .tag { font: 500 .75rem var(--mono); color: var(--sign-blue, #0B4F9E); border: 1px solid currentColor; border-radius: 999px; padding: .1rem .5rem; vertical-align: middle; margin-left: .5rem; }
.slip {
  --slip-font: 11px;
  width: calc(32ch + 2rem);
  max-width: 100%;
  box-sizing: border-box;
  padding: 1rem;
  background: #fff;
  color: #111;
  border: 1px solid var(--ruled-line, #d9dde3);
  border-top: 12px solid transparent;
  border-image: repeating-linear-gradient(90deg, #d9dde3 0 6px, transparent 6px 12px) 12 / 12px 0 0 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  font: var(--slip-font) / 1.35 var(--mono);
  white-space: pre;
  overflow-x: auto;
}
.slip-line { min-height: 1.35em; }
.slip-center { text-align: center; }
.slip-bold { font-weight: 700; }
.slip-large { font-size: 2em; line-height: 1.2; }
.slip-small { font-size: .7619em; }
.slip-qr { width: 9em; height: 9em; margin: .75em auto; display: grid; place-items: center; background:
  repeating-linear-gradient(0deg, #111 0 2px, transparent 2px 6px), repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 6px);
  color: #fff; font-weight: 700; }
.slip-qr span { background: #111; padding: .2em .5em; }