/* ==========================================================================
   Tetragon Editorial Tools — Branded chrome for Laravel views.
   Subset of the main-site stylesheet (tokens, typography, header, nav,
   footer, container). Full reference bundled at
   resources/views/design-reference/tetragon-main.css.
   ========================================================================== */

/* --- Design Tokens --- */
:root {
  color-scheme: light only;
  --color-red: #A01714;
  --color-dark: #302224;
  --color-gray: #A19D96;
  --color-olive: #60632E;
  --font-body: 'EB Garamond', Georgia, serif;
  --font-heading: 'Lato', 'Futura', Arial, sans-serif;
  --max-width: 940px;
  --gutter: 20px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 62.5%; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
::selection { background: #fceaea; }

/* --- Base Typography --- */
body {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-dark);
  background: url('/img/body-bg.png') center center repeat;
  -webkit-font-smoothing: auto;
}
p { font-size: 20px; line-height: 1.5; text-indent: 1.5em; margin: 0; }
p:first-child { text-indent: 0; }
/* First paragraph after a heading: flush left like p:first-child. */
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p,
hgroup + p { text-indent: 0; }
.bodytext p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.bodytext p + p { margin-top: 0; }
a { color: var(--color-dark); }
a:hover { color: var(--color-gray); }
p a, p a:visited { color: var(--color-olive); }
p a:hover { color: #891411; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.25; }
em, i { font-style: italic; }
strong, b { font-weight: bold; }
.small-caps { font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.1em; }
.ital { font-style: italic; }

/* --- Layout: sticky footer, red top rule, centred container --- */
html, body { height: 100%; }
body { display: flex; flex-direction: column; }
.wrapper { flex: 1 0 auto; border-top: 5px solid var(--color-red); position: relative; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }

/* --- Header & Logo --- */
header { height: 125px; position: relative; }
header::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%); width: 100vw; background: rgba(255, 255, 255, 0.45);
}
header::after {
  content: ''; position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%); width: 100vw; height: 5px;
  background: var(--color-dark);
}
header a.logo {
  display: block; width: 105px; height: 105px; margin: 0 auto;
  position: relative; top: 8px; z-index: 1;
  background: url('/img/logo-full.png') no-repeat center center;
  background-size: contain;
}

/* --- Navigation --- */
nav#main-nav {
  height: 72px; line-height: 72px; text-align: justify;
  border-bottom: 2px dotted var(--color-dark);
}
nav#main-nav span { width: 100%; display: inline-block; }
nav#main-nav a {
  font-family: var(--font-heading);
  font-size: 26px; font-weight: normal; text-transform: uppercase;
  display: inline-block; color: var(--color-dark);
}
nav#main-nav a.services { margin-left: 4px; }
nav#main-nav a.sel,
nav#main-nav a.sel:hover { color: var(--color-red); cursor: default; }
nav#main-nav a:visited,
nav#main-nav a:focus,
nav#main-nav a:hover { text-decoration: none; outline: none; }
nav#main-nav::after { content: ''; display: inline-block; width: 100%; }
nav#main-nav a::first-letter { color: var(--color-red); }

/* --- hgroup (page title block) --- */
hgroup { border-bottom: 2px dotted var(--color-dark); padding-bottom: 10px; margin-bottom: 25px; }
hgroup h1 {
  font-family: var(--font-heading);
  font-size: 22px; color: var(--color-red); text-transform: uppercase;
  letter-spacing: 0.1em; line-height: 1.6em; margin-top: 14px;
}
hgroup h2 {
  font-family: var(--font-body);
  font-size: 20px; color: var(--color-olive); font-style: italic;
  padding-left: 76px; font-weight: normal; margin-top: 5px;
}

/* --- Footer --- */
footer {
  flex-shrink: 0; background-color: var(--color-dark);
  border-top: 4px solid var(--color-red);
  width: 100%; padding: 0 0 14px;
}
footer section { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }
footer h6 {
  font-size: 28px; border-left: 16px solid var(--color-red);
  margin-left: calc(var(--gutter) * -1);
  padding: 14px 0 6px 14px;
  color: var(--color-gray); text-transform: lowercase;
}
footer p.address {
  font-variant: small-caps; letter-spacing: 0.18em;
  padding-left: 30px; font-size: 16px;
  color: var(--color-gray); text-transform: lowercase;
  text-indent: 0; white-space: nowrap;
}

/* --- User strip (auth'd chrome, sits in wrapper's top-right) --- */
.user-strip {
  position: absolute;
  top: 16px; right: 20px;
  z-index: 3;
  text-align: right;
  font-family: var(--font-heading);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-gray);
  line-height: 1.7;
  max-width: 180px;
}
.user-strip .name { display: block; color: var(--color-dark); font-weight: bold; }
.user-strip a { color: var(--color-olive); text-decoration: none; display: inline-block; }
.user-strip a:hover { color: var(--color-red); }
.user-strip form { display: inline; margin: 0; }
.user-strip .linky {
  color: var(--color-olive); background: none; border: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  padding: 0; cursor: pointer; text-decoration: none;
}
.user-strip .linky:hover { color: var(--color-red); }
.user-strip .sep { color: var(--color-gray); margin: 0 2px; }

/* --- Auth surface (login, register, reset, invite) --- */

.auth-form { max-width: 420px; margin: 10px auto 40px; }
.auth-form label {
  display: block; font-family: var(--font-heading);
  font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  margin: 14px 0 4px; color: var(--color-dark);
}
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="number"],
.auth-form select,
.auth-form textarea {
  width: 100%; padding: 8px 10px; font: inherit;
  background: #fff; border: 1px solid var(--color-gray); border-radius: 2px;
  color: var(--color-dark);
}
.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus { outline: 2px solid var(--color-olive); outline-offset: 1px; }
.auth-form fieldset {
  margin-top: 22px;
  padding: 14px 18px 6px;
  border: 1px solid var(--color-gray);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}
.auth-form fieldset legend {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-dark);
  padding: 0 8px;
}
.auth-form .hint {
  font-family: var(--font-heading);
  font-size: 12px;
  color: #666;
  margin: 4px 0 6px;
  text-indent: 0;
}
.auth-form button[type="submit"] {
  margin-top: 18px; padding: 10px 22px; font-family: var(--font-heading);
  font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--color-red); color: #fff; border: none; cursor: pointer;
  border-radius: 2px;
}
.auth-form button[type="submit"]:hover { background: var(--color-dark); }
.auth-form .inline-link { font-size: 15px; margin-top: 14px; display: block; }
.auth-form .checkbox-row { margin-top: 14px; font-family: var(--font-heading); font-size: 14px; }
.auth-form .checkbox-row input { margin-right: 6px; }
.error-list {
  margin: 12px 0; padding: 10px 14px;
  background: #fceaea; border-left: 3px solid var(--color-red);
  color: var(--color-red); font-size: 16px;
}
.error-list li { list-style: none; }
.status-message {
  margin: 12px 0; padding: 10px 14px;
  background: #f4f2e8; border-left: 3px solid var(--color-olive);
  color: var(--color-dark); font-size: 16px;
}

/* Prominent confirmation panel — for when a flashed status is the whole point
   of the page state (e.g. "password reset link sent"), replacing the form. */
.info-notice {
  margin: 14px 0 24px;
  padding: 16px 20px;
  background: #f4f2e8;
  border-left: 3px solid var(--color-olive);
  color: var(--color-dark);
}
.info-notice h3 {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-olive);
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px dotted var(--color-olive);
}
.info-notice p {
  font-family: var(--font-heading);
  font-size: 14px;
  text-indent: 0;
  margin: 6px 0;
}
.info-notice a { color: var(--color-olive); text-decoration: underline; }
.info-notice a:hover { color: var(--color-red); }

/* ==========================================================================
   Responsive — Tablet (up to 939px)
   ========================================================================== */
@media only screen and (max-width: 939px) {
  header { height: 110px; }
  header a.logo { width: 90px; height: 90px; }
  nav#main-nav { border-bottom: none; }
  nav#main-nav a { font-size: 22px; }
  hgroup { border-top: 2px dotted var(--color-dark); padding-top: 10px; }
}

/* ==========================================================================
   Responsive — Phone (up to 767px)
   ========================================================================== */
@media only screen and (max-width: 767px) {
  p { font-size: 18px; }
  .bodytext p { text-align: left; hyphens: none; -webkit-hyphens: none; }
  .user-strip {
    position: static; max-width: none;
    text-align: center; padding: 8px 20px 0;
  }
  .user-strip .name { display: inline; }
  .user-strip .name::after { content: ' · '; color: var(--color-gray); margin: 0 2px; }
  header { height: auto; padding: 20px 0; }
  header a.logo { top: 0; width: 80px; height: 73px; }
  nav#main-nav {
    height: auto; line-height: 1.6; text-align: center;
    border-bottom: none; padding: 8px 0;
  }
  nav#main-nav a { font-size: 21px; display: inline; padding: 0; }
  nav#main-nav a + a::before { content: '\b7'; margin: 0 6px; color: var(--color-gray); }
  nav#main-nav a.services { margin-left: 0; }
  nav#main-nav span,
  nav#main-nav::after { display: none; }
  hgroup { margin-bottom: 10px; }
  hgroup h1 { font-size: 18px; }
  hgroup h2 { padding-left: 0; font-size: 18px; }
}

/* ==========================================================================
   App surface — dashboard, tools/upload, jobs index + show.
   Sans-serif (Lato) for tabular + operational content; serif stays for prose.
   Status badge palette echoes the inline report stylesheet.
   ========================================================================== */

/* --- Dashboard: tool list --- */
.tool-list { margin: 10px 0 10px; padding: 0; }
.tool-list li {
  font-family: var(--font-heading);
  font-size: 15px;
  padding: 10px 14px;
  margin-bottom: 6px;
  border-left: 3px solid var(--color-olive);
  background: rgba(255, 255, 255, 0.55);
}
.tool-list li a strong {
  font-size: 17px;
  color: var(--color-red);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tool-list li a:hover strong { color: var(--color-dark); }

/* --- Dashboard: recent-jobs list --- */
.recent-jobs {
  margin: 10px 0;
  font-family: var(--font-heading);
  font-size: 14px;
}
.recent-jobs li {
  padding: 6px 0;
  line-height: 1.5;
  border-bottom: 1px dotted var(--color-gray);
}
.recent-jobs li:last-child { border-bottom: none; }
.recent-jobs li a { color: var(--color-olive); font-weight: bold; }
.recent-jobs li a:hover { color: var(--color-red); }

/* --- Dashboard: section headings --- */
.dashboard h3,
.bodytext h3,
.dashboard-jobs h3 {
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--color-red);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 28px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px dotted var(--color-dark);
}

/* Extra breathing room above the Recent-jobs section on the upload page —
   the section sits below the .upload-grid (form + processing-notes panel)
   and benefits from a clear vertical break so the eye registers it as a
   distinct list rather than overflow from the form column. */
.upload-view .dashboard-jobs { margin-top: 40px; }
.bodytext h4 {
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--color-olive);
  font-weight: bold;
  margin: 18px 0 6px;
}
.bodytext ul {
  font-size: 20px;
  line-height: 1.5;
  margin: 0 0 12px;
  padding-left: 1.4em;
  list-style: disc;
}
.bodytext ul li { margin-bottom: 6px; text-align: left; }
.bodytext ul li::marker { color: var(--color-red); }
.about-page { padding-bottom: 2em; }

/* --- Jobs table (index page) --- */
.jobs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 24px;
  font-family: var(--font-heading);
  font-size: 14px;
  background: rgba(255, 255, 255, 0.65);
}
.jobs-table th,
.jobs-table td {
  padding: 9px 12px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-gray);
}
.jobs-table th {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-dark);
  background: rgba(0, 0, 0, 0.035);
  border-bottom: 2px solid var(--color-dark);
  font-weight: bold;
}
.jobs-table tbody tr:hover { background: rgba(255, 255, 255, 0.85); }
.jobs-table tbody tr.clickable-row { cursor: pointer; }
/* Stronger row affordance on hover — 4px brand-red bar on the left.
   box-shadow inset (vs border-left) avoids any cell-width shift, so the
   bar appears/disappears without nudging neighbouring text. */
.jobs-table tbody tr.clickable-row:hover td:first-child {
  box-shadow: inset 4px 0 0 var(--color-red);
}
.jobs-table td:nth-child(4) {
  font-variant-numeric: tabular-nums;
  color: #666;
  white-space: nowrap;
}
.jobs-table td a { color: var(--color-olive); font-weight: bold; }
.jobs-table td a:hover { color: var(--color-red); }

/* Cancelled rows: faded out, filename muted */
.jobs-table tr.job-cancelled td { opacity: 0.55; }
.jobs-table tr.job-cancelled td:first-child { color: #888; }
.jobs-table tr.job-cancelled:hover { background: rgba(255, 255, 255, 0.85); }
.jobs-table tr.job-cancelled:hover td { opacity: 0.85; }

/* Expired rows — fully-dispatched job whose bundle has been deleted
   (either by the daily prune sweep or by the user clicking "Delete
   from server"). Strikethrough across the whole row + reduced opacity
   so they're visually distinct from "Completed with warnings" rows
   (which share the amber palette). The status pill itself overrides
   text-decoration so the pill text stays readable. */
.jobs-table tr.job-expired td {
  opacity: 0.55;
  text-decoration: line-through;
  text-decoration-color: var(--color-gray);
}
.jobs-table tr.job-expired td:first-child { color: #888; }
.jobs-table tr.job-expired .status { text-decoration: none; }
.jobs-table tr.job-expired:hover { background: rgba(255, 255, 255, 0.85); }
.jobs-table tr.job-expired:hover td { opacity: 0.85; }

/* Sortable column header — currently only the Submitted column. The arrow
   character (▲ / ▼) is part of the link text so click target stays one piece. */
.jobs-table th .sort-toggle {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  letter-spacing: inherit;
}
.jobs-table th .sort-toggle:hover { color: var(--color-red); }

/* Result count line — sits between the filter row and the table, always
   visible (paginator only renders when there's more than one page). */
.jobs-count {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #666;
  margin: 0 0 6px;
  text-indent: 0;
}

/* Filter row above the table — single label + select, optional Apply
   button shows only when JS is disabled (the select fires onchange submit
   when JS is on). */
.jobs-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-dark);
}
.jobs-filter label { font-weight: bold; }
.jobs-filter select {
  font: inherit;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid var(--color-gray);
  border-radius: 2px;
  color: var(--color-dark);
  text-transform: none;
  letter-spacing: normal;
}
.jobs-filter select:focus { outline: 2px solid var(--color-olive); outline-offset: 1px; }

/* Paginator — Previous / page-of-pages info / Next, branded with the
   heading-font uppercase idiom used by .back-link and .btn-secondary.
   Disabled prev/next stay rendered (greyed) so the row width doesn't jump
   between pages. */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pagination a,
.pagination span {
  color: var(--color-dark);
  text-decoration: none;
}
.pagination a:hover { color: var(--color-red); }
.pagination .disabled { color: var(--color-gray); cursor: default; }
.pagination .pagination-info {
  flex: 1;
  text-align: center;
  color: #666;
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* Admin users index — reuses .jobs-table; just needs row-state styling. */
.jobs-table tr.user-deleted td { opacity: 0.45; }
.jobs-table tr.user-disabled td { opacity: 0.7; }
.jobs-table tr.user-deleted td:first-child,
.jobs-table tr.user-disabled td:first-child { color: #888; }

/* Actions column: View link + optional inline cancel X */
.jobs-table td.row-actions { white-space: nowrap; }
.jobs-table .inline-cancel {
  display: inline;
  margin: 0 0 0 10px;
}
.btn-x {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: normal;
  line-height: 1;
  color: var(--color-gray);
  background: none;
  border: none;
  padding: 0 4px;
  cursor: pointer;
  vertical-align: middle;
}
.btn-x:hover { color: var(--color-red); }

/* Recent-jobs list (on dashboard + upload page): fade cancelled items */
.recent-jobs li.cancelled { opacity: 0.55; }
.recent-jobs li.cancelled a { color: #888; }

/* Empty-state copy on jobs index */
.jobs-index > p {
  font-family: var(--font-heading);
  font-size: 15px;
  text-indent: 0;
}

/* --- Job status page — metadata dl --- */
.job-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 18px;
  margin: 10px 0 20px;
  padding: 14px 18px;
  font-family: var(--font-heading);
  font-size: 14px;
  background: rgba(255, 255, 255, 0.55);
  border-left: 3px solid var(--color-olive);
}
.job-meta dt {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #666;
  align-self: center;
}
.job-meta dd {
  color: var(--color-dark);
  font-variant-numeric: tabular-nums;
}

/* "Reason" dt+dd injected into .job-meta when a failed job carries a
   recognised user-actionable failure_code (tracked_changes, doc_format).
   Red text on both label and value — the cause is the most important
   piece of information on the page when the job has failed, so make it
   visually unmissable. The inline info marker tooltip mirrors the body
   block's lead so hover gives a preview without scrolling. */
.job-meta dt.meta-failure-row,
.job-meta dd.meta-failure-row {
  color: var(--color-red);
}
.job-meta .meta-failure-info {
  color: var(--color-red);
}

/* Status-contingent prose on the show page (serif, so it reads as copy) */
.status-detail {
  margin: 18px 0;
}
.status-detail p { text-indent: 0; font-size: 18px; }

/* "Type" column pills on /jobs — Enhanced gets the same warm amber as the
   `.status-enhancing` pill so a glance at the column tells you which rows
   ran the GPU-bearing enhance step. Basic stays muted gray-on-gray so it
   reads as the default / unremarkable case. Same pill shape as `.status`
   so the Type and Status columns line up visually. */
.job-type {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  display: inline-block;
  white-space: nowrap;
}
.job-type-enhanced { background: #fff3cd; color: #856404; }
.job-type-basic    { background: #f0eee9; color: #6b6864; }

/* User-actionable Phase-1 failure banner. Same visual treatment as
   .enhance-banner--failed (pink/red panel, red left border) — keeps the
   page's "something didn't work, here's what" affordance consistent
   between Phase-1 user-actionable failures and Phase-2 enhance failures.
   Held in its own class so semantic separation survives a refactor. */
.failure-banner {
  background: #fdecea;
  border-left: 3px solid #b3261e;
  padding: 12px 16px;
  margin: 0 0 16px;
  font-size: 16px;
}
.failure-banner p {
  margin: 0 0 8px;
  text-indent: 0;
  font-size: 16px;
}
.failure-banner p:last-child {
  margin-bottom: 0;
}

/* Extra breathing room before the Reupload action so it doesn't crowd
   the credit-note paragraph above it; visually separates "explanation"
   from "next step". */
.status-detail p.failure-action {
  margin-top: 28px;
}
.status-detail p.failure-credit-note {
  color: var(--color-gray);
  font-size: 16px;
}

/* --- Status badges — echoes report.css palette --- */
.status {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  display: inline-block;
  white-space: nowrap;
}
.status-queued             { background: #e2e3e5; color: #424242; }
.status-processing         { background: #d1ecf1; color: #0c5460; }
.status-enhancing-queued   { background: #fff3cd; color: #856404; }
.status-enhancing          { background: #ffe8b3; color: #7a5300; }
.status-completed          { background: #d4edda; color: #155724; }
.status-completed-warnings { background: #fff3cd; color: #856404; cursor: help; }
.status-failed             { background: #f8d7da; color: #721c24; }
.status-failed-enhancing   { background: #f8d7da; color: #721c24; }
.status-expired            { background: #d6d8db; color: #4a4d50; }
.status-cancelled          { background: #e2e3e5; color: #6c757d; }

/* Quiet secondary hint shown next to the status pill on /jobs for states
   where the basic Phase-1 report is viewable but the pill alone reads as
   in-flight or failure (enhancing_queued / enhancing / failed_enhancing).
   Italic + muted so it reads as supplementary, not primary status. */
.status-aside {
  display: inline-block;
  margin-left: 6px;
  font-size: 13px;
  font-style: italic;
  color: var(--color-gray);
}

/* Enhancement banner sits above the View basic report / Download / Stop
   enhancing buttons during enhance states + after a failed_enhancing run.
   Same warm amber as the enhance status pill so the page reads as a
   coherent state. The --failed variant uses the same red palette as the
   .status-failed pill to mark "we tried, it didn't work". */
.enhance-banner {
  background: #fff8e1;
  border-left: 3px solid #d49d2c;
  padding: 12px 16px;
  margin: 0 0 16px;
  font-size: 16px;
}
.enhance-banner--failed {
  background: #fdecea;
  border-left-color: #b3261e;
}

/* Manually-imported marker (small upload-arrow) sits next to a Completed badge
   on rows that bypassed the queue via the admin "Import report" action. */
.status-marker-imported {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  vertical-align: middle;
  color: var(--color-dark);
  cursor: help;
}

/* (i) info marker next to dt labels — renders a muted circled-i, native
   tooltip on hover via the title attribute, cursor becomes help-cursor. */
.info-marker {
  color: var(--color-gray);
  font-size: 13px;
  font-weight: normal;
  cursor: help;
  margin-left: 3px;
  vertical-align: 1px;
}

/* "Stop enhancing" sits inline with the spinner on jobs/show during the
   enhance states. Small icon-only button — the user-facing affordance
   for cancel-during-enhance, semantically distinct from Phase-1 cancel
   (which discards the whole job; this preserves the basic report). */
.inline-stop-enhance {
  display: inline;
  margin-left: 8px;
}
.btn-stop-enhance {
  background: none;
  border: 1px solid var(--color-gray);
  border-radius: 3px;
  padding: 2px 5px;
  cursor: pointer;
  color: var(--color-gray);
  vertical-align: middle;
  line-height: 0;
}
.btn-stop-enhance:hover {
  color: var(--color-red);
  border-color: var(--color-red);
}

/* Spinner shown next to the Processing pill on a job status page */
.spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 8px;
  border: 2px solid rgba(48, 34, 36, 0.15);
  border-top-color: var(--color-red);
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- Duplicate-upload warning banner --- */
.dup-warning {
  margin: 10px 0 18px;
  padding: 10px 14px;
  background: #fff3cd;
  border-left: 3px solid #856404;
  color: #856404;
}
.dup-warning p {
  text-indent: 0;
  font-size: 15px;
  font-family: var(--font-heading);
  margin: 0;
}
.dup-warning a { color: #856404; text-decoration: underline; }
.dup-warning a:hover { color: var(--color-red); }

/* --- Cancel-queued-job button --- */
.cancel-form { margin: 18px 0 0; }
.btn-cancel {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  background: transparent;
  color: var(--color-red);
  border: 1px solid var(--color-red);
  border-radius: 2px;
  cursor: pointer;
}
.btn-cancel:hover { background: var(--color-red); color: #fff; }

/* Secondary button — outlined olive. Used for Download HTML, Rotate link,
   Generate share link, Copy. Sits next to the red primary CTAs. */
.btn-secondary {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  background: transparent;
  color: var(--color-olive);
  border: 1px solid var(--color-olive);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
}
.btn-secondary:hover { background: var(--color-olive); color: #fff; }

/* --- Share panel on completed-job status page --- */
.share-panel {
  margin: 24px 0 0;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.55);
  border-left: 3px solid var(--color-olive);
}
.share-panel h3 {
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--color-red);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px dotted var(--color-dark);
}
.share-hint {
  font-family: var(--font-heading);
  font-size: 13px;
  color: #555;
  margin: 6px 0 12px;
  text-indent: 0;
}
.share-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0 12px;
}
.share-link-row input[type="text"] {
  flex: 1;
  padding: 8px 10px;
  font: inherit;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--color-gray);
  border-radius: 2px;
  color: var(--color-dark);
  min-width: 0;
}
.share-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.share-actions form.inline {
  display: inline;
  margin: 0;
}

/* --- Confirm modal (jobs.show "Delete from server") -----------------------
   Native <dialog> with showModal(). Browser supplies the backdrop + focus
   trap; we just brand the box. position:fixed + inset:0 + margin:auto centers
   it across Chrome/Firefox/Safari (UA-default centering is inconsistent —
   Safari historically renders <dialog> top-left without explicit positioning).
   ::backdrop dims the page behind. */
.confirm-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  border: 1px solid var(--color-red);
  border-radius: 4px;
  padding: 24px 28px;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  background: #fff;
  color: var(--color-dark);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}
.confirm-modal::backdrop {
  background: rgba(48, 34, 36, 0.55);
}
.confirm-modal h3 {
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-red);
  margin: 0 0 12px;
}
.confirm-modal p {
  margin: 0 0 18px;
  text-indent: 0;
}
.confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* --- Admin UI chrome ------------------------------------------------------ */

.admin-actions {
  text-indent: 0;
  margin: 14px 0 20px;
}

/* Generic section divider used on the admin user detail page: each
   "Tool entitlements", "Account actions", "Recent jobs" gets a dotted
   red uppercase title matching .bodytext h3 / .dashboard h3. */
.admin-section {
  margin: 28px 0;
}
.admin-section h3 {
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--color-red);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 10px;
  padding-bottom: 4px;
  border-bottom: 1px dotted var(--color-dark);
}
.admin-section h4 {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-dark);
  margin: 18px 0 10px;
}

/* Admin "grant / update access" form lives inline with the entitlements
   table — narrower max-width and less top margin than the auth surface. */
.admin-user-show .grant-form {
  max-width: 520px;
  margin: 18px 0 0;
}

/* Row of action buttons (promote, disable, delete, restore) on user detail */
.action-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.action-row form.inline { display: inline; margin: 0; }

/* --- Upload page --- */
.upload-view .auth-form { max-width: 520px; }

/* Two-column layout: upload form on the left, "How your file is processed"
   panel on the right. Wraps to single column at narrower widths — the
   intrinsic 320px min-width on each cell triggers the stack before the
   columns get cramped. Inside .upload-grid the form's 520px max-width
   still applies so it doesn't sprawl on a wide monitor. */
.upload-view .upload-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 14px 0 0;
}
.upload-view .upload-grid__form { flex: 1 1 320px; min-width: 0; margin: 0; }
.upload-view .upload-grid > .processing-notes { flex: 1 1 320px; min-width: 0; }

/* "How your file is processed" sidebar panel. Olive/cream palette so it
   reads as informational alongside the form, distinct from the
   warning-palette .over-quota-notice that REPLACES the form. */
.processing-notes {
  margin: 14px 0 0;
  padding: 16px 20px;
  background: rgba(96, 99, 46, 0.06);
  border-left: 3px solid var(--color-olive);
}
.processing-notes h3 {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-olive);
  margin: 0 0 10px;
  padding-bottom: 4px;
  border-bottom: 1px dotted var(--color-olive);
}
.processing-notes p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  text-indent: 0;
  margin: 8px 0;
}
.processing-notes ul {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  margin: 8px 0 0;
  padding-left: 18px;
  list-style: none;
}
.processing-notes li {
  position: relative;
  margin: 6px 0;
}
/* Small red triangle marker. Unicode BLACK RIGHT-POINTING SMALL TRIANGLE
   sits in every system font we care about — no icon font / SVG needed. */
.processing-notes li::before {
  content: '\25B8';
  position: absolute;
  left: -14px;
  top: 2px;
  color: var(--color-red);
  font-size: 13px;
}
.processing-notes code {
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 13px;
  padding: 1px 4px;
  background: rgba(96, 99, 46, 0.1);
  border-radius: 2px;
}

.upload-view .hint {
  font-family: var(--font-heading);
  font-size: 12px;
  color: #666;
  margin: 4px 0 14px;
  text-indent: 0;
}

/* Drag-and-drop zone (also serves as the <label>, so click-to-browse is
   native — drop events are a JS enhancement in the upload blade). */
.upload-view .dropzone {
  display: block;
  position: relative;
  margin: 14px 0 0;
  padding: 36px 20px;
  border: 2px dashed var(--color-gray);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  /* Reset .auth-form label chrome so this renders as a zone, not a label. */
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}
.upload-view .dropzone:hover {
  border-color: var(--color-olive);
  background: rgba(96, 99, 46, 0.05);
}
.upload-view .dropzone.dragover {
  border-color: var(--color-red);
  background: rgba(160, 23, 20, 0.06);
}
.dropzone input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.dropzone-inner {
  pointer-events: none; /* let clicks fall through to the <label> */
}
.dropzone-prompt {
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--color-dark);
  text-indent: 0;
  margin: 0;
}
.dropzone-prompt strong { color: var(--color-red); }
.dropzone-filename {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: bold;
  color: var(--color-red);
  text-indent: 0;
  margin: 0;
}
.dropzone .hint { margin: 10px 0 0; }
.upload-view .allowance-note {
  font-family: var(--font-heading);
  font-size: 13px;
  margin: 16px 0 4px;
  padding: 8px 12px;
  background: rgba(96, 99, 46, 0.08);
  border-left: 3px solid var(--color-olive);
  text-indent: 0;
}
.upload-view .allowance-note strong { color: var(--color-red); }

/* Over-quota panel replaces the upload form when the user's used up their
   allowance for the period (including in-flight). */
.over-quota-notice {
  margin: 14px 0 24px;
  padding: 16px 20px;
  background: #fff3cd;
  border-left: 3px solid #856404;
  color: #856404;
}
.over-quota-notice h3 {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #856404;
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px dotted #856404;
}
.over-quota-notice p {
  font-family: var(--font-heading);
  font-size: 14px;
  text-indent: 0;
  margin: 6px 0;
}
.over-quota-notice a { color: #856404; text-decoration: underline; }
.over-quota-notice a:hover { color: var(--color-red); }

/* Primary CTA link — looks like the .auth-form submit button, for "View report"
   and similar call-to-action anchors that aren't form submits. */
.btn-primary {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 22px;
  background: var(--color-red);
  color: #fff !important;
  border-radius: 2px;
  text-decoration: none;
}
.btn-primary:hover { background: var(--color-dark); color: #fff; }

/* --- Back-link anchors (upload, jobs index, job show) --- */
.back-link {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 24px;
  text-indent: 0;
}
.back-link a { color: var(--color-olive); }
.back-link a:hover { color: var(--color-red); }