/* Hancin Consulting. One stylesheet, self-hosted, no framework and no external font.
   The privacy policy claims the browser contacts no third party, and the CSP in
   app/main.py enforces it - pulling in a CDN or Google Fonts breaks both. */

:root {
  --ink:        #12181f;
  --ink-soft:   #47525f;
  --ink-faint:  #737f8c;
  --paper:      #ffffff;
  --paper-alt:  #f5f7f9;
  --line:       #dde3e9;
  --navy:       #16324f;
  --navy-deep:  #0d2137;
  --accent:     #9a6a24;
  --accent-lo:  #f6efe3;
  --danger:     #9b2226;
  --ok:         #1f6b46;

  --wrap:  1120px;
  --narrow: 720px;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(18, 24, 31, .06), 0 8px 24px rgba(18, 24, 31, .05);

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); letter-spacing: -.01em; }
h3 { font-size: 1.125rem; font-family: var(--sans); font-weight: 650; }
p { margin: 0 0 1em; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: 20px; }
.wrap.narrow { max-width: var(--narrow); }
.muted { color: var(--ink-faint); }
.small { font-size: .875rem; }
.nowrap { white-space: nowrap; }

.skip {
  position: absolute; left: -9999px;
  background: var(--navy); color: #fff; padding: 10px 16px; z-index: 10;
}
.skip:focus { left: 12px; top: 12px; }

/* ---- header ---- */
.site-head {
  position: sticky; top: 0; z-index: 5;
  /* Solid, not a translucent backdrop-filter. A blurred sticky header repaints the
     whole strip on every scroll frame, and it was expensive enough here to hang a
     screenshot capture. The visual difference is nil against an opaque page. */
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 12px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--radius);
  background: var(--navy); color: #fff;
  font-family: var(--serif); font-size: .85rem; letter-spacing: .04em;
}
.brand-text { font-family: var(--serif); font-size: 1.075rem; font-weight: 600; }
.head-nav { display: flex; align-items: center; gap: 22px; font-size: .9375rem; }
.head-nav a { color: var(--ink-soft); text-decoration: none; }
.head-nav a:hover { color: var(--navy); }
/* :not(.btn-ghost) matters. Without it this whitens the outlined Sign out button too,
   giving white text on a white header - an invisible control rather than a styled one. */
.head-nav .btn:not(.btn-ghost) { color: #fff; }

/* ---- buttons ---- */
.btn {
  display: inline-block;
  background: var(--navy); color: #fff;
  padding: 10px 20px; border: 1px solid var(--navy); border-radius: var(--radius);
  font: inherit; font-size: .9375rem; font-weight: 550;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.btn-lg { padding: 13px 26px; font-size: 1rem; }
.btn-sm { padding: 7px 14px; font-size: .875rem; }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { background: var(--paper-alt); color: var(--navy); border-color: var(--navy); }

/* ---- hero ---- */
.hero {
  background: linear-gradient(180deg, var(--navy-deep), var(--navy));
  color: #fff;
  padding-block: clamp(56px, 9vw, 104px);
}
/* .hero-inner is also a .wrap, so it must NOT narrow the wrapper - doing that pulls
   the hero text inboard of the header brand and the two stop lining up. Constrain
   the measure on the text instead. */
.hero h1 { color: #fff; max-width: 18ch; }
.hero .lede { font-size: 1.1875rem; color: #d3dde7; max-width: 58ch; }
.eyebrow {
  font-size: .8125rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: #c8a262; margin-bottom: 14px;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero .btn { background: #fff; color: var(--navy-deep); border-color: #fff; }
.hero .btn:hover { background: var(--accent-lo); color: var(--navy-deep); border-color: var(--accent-lo); }
.hero .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.hero .btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.hero-note { margin-top: 20px; font-size: .9375rem; color: #a9bacb; }

/* ---- bands ---- */
.band { padding-block: clamp(48px, 7vw, 84px); }
.band.alt { background: var(--paper-alt); border-block: 1px solid var(--line); }
.narrow-page { padding-block: clamp(40px, 6vw, 72px); }
.section-lede { font-size: 1.0625rem; color: var(--ink-soft); max-width: 60ch; margin-bottom: 2em; }
.lede { font-size: 1.125rem; color: var(--ink-soft); }

/* ---- cards ---- */
.cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .4em; }
.card p { margin: 0; color: var(--ink-soft); font-size: .9375rem; }

/* ---- steps ---- */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.steps li { position: relative; padding-left: 52px; }
.step-n {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-lo); color: var(--accent);
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600;
}
.steps h3 { margin-bottom: .3em; }
.steps p { margin: 0; color: var(--ink-soft); font-size: .9375rem; }

/* ---- lists ---- */
.two-col { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ticks { list-style: none; margin: 0 0 1em; padding: 0; }
.ticks li {
  position: relative; padding-left: 28px; margin-bottom: .6em;
  color: var(--ink-soft); font-size: .9375rem;
}
.ticks li::before {
  content: ""; position: absolute; left: 4px; top: .55em;
  width: 7px; height: 12px; border: solid var(--accent);
  border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px);
}

/* ---- placeholder blocks (content Mike or counsel still owes) ---- */
.placeholder {
  border: 1px dashed var(--accent); border-radius: var(--radius);
  background: var(--accent-lo); padding: 18px 20px; margin-bottom: 1.5em;
}
.placeholder p:last-child { margin-bottom: 0; }
.placeholder p { font-size: .9375rem; color: #6d4c17; }

/* ---- forms ---- */
.lead-form { max-width: 560px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 6px; }
.opt { font-weight: 400; color: var(--ink-faint); }
.field input, .field textarea {
  width: 100%; padding: 11px 13px;
  font: inherit; font-size: .9375rem; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy);
}
.field textarea { resize: vertical; }
.form-error { color: var(--danger); font-size: .875rem; margin: 6px 0 0; }
.form-error.banner {
  background: #fdf2f2; border: 1px solid #f2c9c9; border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 20px;
}

/* The honeypot. Off-screen rather than display:none, because some bots skip fields that
   are explicitly hidden. Kept out of the tab order and out of the accessibility tree by
   the markup. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- tables (admin) ---- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.data th, table.data td {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data th {
  background: var(--paper-alt); font-weight: 650; font-size: .8125rem;
  letter-spacing: .02em; text-transform: uppercase; color: var(--ink-soft);
  white-space: nowrap;
}
table.data tr:last-child td { border-bottom: 0; }
.wrap-cell { max-width: 320px; }
.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; background: var(--paper-alt); color: var(--ink-soft);
}
.pill-new { background: var(--accent-lo); color: var(--accent); }
.pill-converted { background: #e6f2ec; color: var(--ok); }
.pill-lost { background: #f3f4f5; color: var(--ink-faint); }

/* ---- legal pages ---- */
.legal h2 { margin-top: 1.8em; font-size: 1.375rem; }
.legal h3 { margin-top: 1.4em; }
.legal p, .legal li { color: var(--ink-soft); }

/* ---- footer ---- */
.site-foot { background: var(--navy-deep); color: #b9c7d4; padding-block: 44px 28px; margin-top: 0; }
.foot-inner {
  display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.site-foot a { color: #dce6ef; }
.site-foot a:hover { color: #fff; }
.foot-brand { font-family: var(--serif); font-size: 1.05rem; color: #fff; margin-bottom: .3em; }
.foot-head { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: #8fa3b6; margin-bottom: .6em; }
.foot-col p { margin: 0 0 .35em; font-size: .9375rem; }
.foot-col .muted { color: #8fa3b6; }
.disclaimer { padding-top: 24px; }
.disclaimer p { font-size: .8125rem; line-height: 1.55; color: #8fa3b6; max-width: 80ch; }

@media (max-width: 720px) {
  body { font-size: 16px; }
  .head-nav a:not(.btn) { display: none; }
  .steps li { padding-left: 46px; }
}

/* ---- signed-in chrome ---- */
.head-nav .who { color: var(--ink-faint); font-size: .8125rem; }
form.inline { display: inline; margin: 0; }
.auth-wrap { max-width: 460px; }
.auth-note { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.hint { margin-top: 6px; }
.section-head { margin-top: 2.4em; font-size: 1.25rem; }

/* ---- admin dashboard tiles ---- */
.stat-row {
  display: grid; gap: 16px; margin-bottom: 8px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.stat {
  display: block; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px;
}
.stat:hover { border-color: var(--navy); color: inherit; }
.stat-n { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1.1; }
.stat-label {
  display: block; margin-top: 4px;
  font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-faint);
}
.next-up { margin-top: 2.5em; }

/* ---- forms with two fields on a line ---- */
.field-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.user-form { max-width: 640px; }
.field select {
  width: 100%; padding: 11px 13px;
  font: inherit; font-size: .9375rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.field select:focus { outline: 2px solid var(--navy); outline-offset: 1px; }

/* ---- the one-time password reveal ----
   Loud on purpose. It is the only time this value is ever visible, and a person who
   scrolls past it has to reset the account to get another. */
.reveal {
  border: 2px solid var(--accent); border-radius: var(--radius);
  background: var(--accent-lo); padding: 18px 20px; margin-bottom: 1.8em;
}
.reveal p { color: #6d4c17; }
.reveal p:last-child { margin-bottom: 0; }
.reveal-pw code {
  display: inline-block; padding: 8px 14px; margin: 4px 0;
  background: var(--paper); border: 1px solid var(--accent); border-radius: var(--radius);
  font-size: 1.0625rem; letter-spacing: .02em; user-select: all;
}

/* ---- table actions ---- */
.row-off { opacity: .55; }
.actions form + form { margin-left: 12px; }
.linkish {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: .8125rem; color: var(--navy);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.linkish:hover { color: var(--accent); }

/* ---- portal ---- */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 1.5em;
}
.page-head h1 { margin-bottom: .2em; }
.plain { list-style: none; margin: .4em 0 0; padding: 0; }
.plain li { margin-bottom: .3em; }

.callout {
  border: 1px solid var(--line); border-left: 3px solid var(--navy);
  border-radius: var(--radius); background: var(--paper-alt);
  padding: 18px 20px; margin-bottom: 2em;
}
.callout p:last-child { margin-bottom: 0; }
/* Something is waiting on the client. Warmer than the neutral callout, because the
   whole point is that it should be noticed on a page they are skimming. */
.callout-action { border-left-color: var(--accent); background: var(--accent-lo); }
.callout-action p { color: #6d4c17; }

.row-attention td { background: var(--accent-lo); }

/* Client-facing statuses only. There is no styling for an internal status because no
   portal template renders one. */
.status-documents_being_reviewed { background: var(--paper-alt); color: var(--ink-soft); }
.status-information_needed { background: var(--accent-lo); color: var(--accent); }
.status-under_review { background: #e8eef5; color: var(--navy); }
.status-estimate_ready { background: #e6f2ec; color: var(--ok); }
.status-submitted, .status-awaiting_outcome { background: #e8eef5; color: var(--navy); }
.status-closed { background: #f3f4f5; color: var(--ink-faint); }
.status-declined { background: #fdf2f2; color: var(--danger); }

/* ---- upload ---- */
.dropzone {
  display: block; position: relative;
  border: 2px dashed var(--line); border-radius: var(--radius);
  background: var(--paper-alt);
  padding: 40px 24px; margin-bottom: 16px;
  text-align: center; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone:focus-within { border-color: var(--navy); }
.dropzone.is-over { border-color: var(--accent); background: var(--accent-lo); }
.dropzone-main { display: block; font-size: 1.0625rem; font-weight: 600; }
.dropzone-sub { display: block; margin-top: 6px; font-size: .875rem; color: var(--ink-faint); }
/* Off-screen rather than display:none, so it stays focusable by keyboard and the label
   still opens the picker with no script at all. */
.dropzone input[type="file"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
}
.file-list { list-style: none; margin: 0 0 1.5em; padding: 0; }
.file-list li {
  padding: 9px 0; border-bottom: 1px solid var(--line);
  display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap;
}
.file-list li:last-child { border-bottom: 0; }
.submit-row { padding-top: 20px; border-top: 1px solid var(--line); }
.form-success.banner {
  background: #e6f2ec; border: 1px solid #bcdccb; color: var(--ok);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 20px;
}

/* ---- confirmation ---- */
.confirm-form { max-width: 640px; }
.confirm-field { margin-bottom: 26px; }
.field-note { margin: 6px 0 0; font-size: .8125rem; color: var(--ink-faint); }
.excerpt { font-style: italic; }
/* A conflicted field is marked until somebody picks. The resolved class is added by
   confirm.js so outstanding conflicts stay visible at a glance. */
.field-conflict input { border-color: var(--accent); background: #fffdf8; }
.field-conflict.resolved input { border-color: var(--ok); background: var(--paper); }
.conflict-note { color: var(--accent); font-weight: 600; }
.candidates { list-style: none; margin: 8px 0 0; padding: 0; }
.candidates li { margin-bottom: 4px; font-size: .875rem; }
.confirm-actions { padding-top: 8px; }

dl.summary { margin: 0; }
dl.summary dt {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint); margin-top: 14px;
}
dl.summary dd { margin: 2px 0 0; font-size: .9375rem; }

/* ---- admin claim workspace ---- */
.tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--line); margin: 1.5em 0 2em;
}
.tab {
  padding: 9px 16px; font-size: .9375rem; text-decoration: none;
  color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--navy); }
.tab.is-current { color: var(--navy); font-weight: 600; border-bottom-color: var(--navy); }
/* Named, not hidden. A tab that silently does not exist makes the product look smaller
   than the plan, and Mike should see where this is going. */
.tab-disabled { color: var(--line); cursor: help; }

/* The internal status. Visually distinct from every client-facing pill, so a screenshot
   from this page is never mistaken for something a firm saw. */
.pill-internal {
  background: var(--navy); color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .6875rem;
}

.field-edit { margin-bottom: 22px; }
.field-edit label {
  display: block; font-size: .875rem; font-weight: 600; margin-bottom: 6px;
}
.field-edit-row { display: flex; gap: 8px; }
.field-edit-row input { flex: 1; }
/* Where a value came from, colour-coded: a person's decision should be visible at a
   glance, because it is the one a re-run will not overwrite. */
.src {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
}
.src-ai_extraction { background: var(--paper-alt); color: var(--ink-faint); }
.src-client_confirmation, .src-client_edit { background: #e6f2ec; color: var(--ok); }
.src-admin_edit { background: var(--accent-lo); color: var(--accent); }

.request-list { list-style: none; margin: 0 0 1.5em; padding: 0; }
.request-list li {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 10px;
}
.request-list p { margin: 0 0 .4em; font-size: .9375rem; }

.run { border-left: 3px solid var(--line); padding: 0 0 4px 16px; margin-bottom: 1.6em; }
.error-detail {
  background: #fdf2f2; border: 1px solid #f2c9c9; border-radius: var(--radius);
  padding: 10px 12px; font-size: .8125rem; overflow-x: auto; white-space: pre-wrap;
}
table.data.compact th, table.data.compact td { padding: 6px 10px; font-size: .8125rem; }

/* A pipeline group that is waiting on Mike. The only tiles on the overview that should
   pull the eye, because everything else is informational. */
.stat-attention { border-color: var(--accent); background: var(--accent-lo); }
.stat-attention .stat-n { color: var(--accent); }

/* ---- the two steps ----
   Deliberately large. The whole message of this section is that there are only two of
   them, and small numbered items read as a list rather than as a claim about simplicity. */
.big-steps {
  list-style: none; margin: 0 0 1.5em; padding: 0;
  display: grid; gap: 24px;
}
.big-steps li {
  display: flex; gap: 24px; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 30px; box-shadow: var(--shadow);
}
.big-step-n {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: var(--serif); font-size: 1.65rem; line-height: 1;
}
.big-steps h3 { font-size: 1.25rem; font-family: var(--serif); margin-bottom: .35em; }
.big-steps p { margin: 0; color: var(--ink-soft); }
.step-note { padding-top: 4px; }

@media (max-width: 560px) {
  .big-steps li { flex-direction: column; gap: 14px; padding: 22px; }
  .big-step-n { width: 44px; height: 44px; font-size: 1.35rem; }
}

/* The "what happens in between" grid reads as prose, not as feature cards - it is
   reassurance about depth, and boxing it would make it compete with the two steps. */
#review .two-col { gap: 32px 40px; }
#review h3 { margin-bottom: .3em; }
#review p { color: var(--ink-soft); font-size: .9375rem; }

/* ---- two-factor ---- */
/* The code box. Wide, monospaced and spaced out, because six digits read off a phone
   are transcribed one at a time and a cramped field invites a typo. */
.code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.5rem; letter-spacing: .4em; text-align: center;
  max-width: 260px; padding: 12px 14px;
}
.qr { margin: 1em 0 1.5em; max-width: 220px; }
.qr svg { width: 100%; height: auto; display: block; }
code.secret {
  display: inline-block; padding: 4px 10px; margin-top: 4px;
  background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .9375rem; letter-spacing: .06em; user-select: all;
}
.recovery-codes {
  list-style: none; margin: 12px 0; padding: 0;
  display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.recovery-codes code {
  display: block; padding: 7px 10px; text-align: center;
  background: var(--paper); border: 1px solid var(--accent); border-radius: var(--radius);
  font-size: .9375rem; letter-spacing: .04em; user-select: all;
}
/* The signed-in address doubles as the link to security settings, which is where people
   look for them. */
a.who { text-decoration: none; }
a.who:hover { color: var(--navy); text-decoration: underline; }

/* ---- estimate line items ---- */
/* Money right-aligned and tabular, so a column of figures lines up digit for digit. A
   ragged column of currency is genuinely harder to scan for the outlier. */
td.money, th.money {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8125rem;
}
td.money.positive { color: var(--ok); }
td.money.negative { color: var(--danger); }
table.data tfoot td { border-top: 1px solid var(--line); font-weight: 600; }
table.data tfoot .total-row td { border-top: 2px solid var(--navy); }

/* Images tab --------------------------------------------------------------- */

.notice {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 1.6em; background: var(--paper-alt);
}
.notice p { margin: 0 0 .5em; }
.notice p:last-child { margin-bottom: 0; }

.image-grid {
  display: grid; gap: 16px; margin-bottom: 2em;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.image-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; background: #fff;
}
.image-card img {
  /* Fixed height with object-fit, so a portrait phone photograph and a wide aerial sit
     in the same grid without one of them being three cards tall. */
  width: 100%; height: 150px; object-fit: cover;
  border-radius: 3px; background: var(--paper-alt); display: block;
}
.image-card p { margin: .6em 0 0; line-height: 1.4; }
/* A photograph too poor to read is not a photograph of no damage. Dimmed so the
   distinction is visible at a glance, not hidden so it looks like a clean result. */
.image-card.is-unusable { border-color: #e0c68a; background: #fffaf0; }

table.findings td { white-space: normal; vertical-align: top; }
table.findings td.small { max-width: 280px; }

/* Deletion --------------------------------------------------------------------
   The only destructive action in the product. Styled to look like one: this is the
   single place red is used, so it never becomes ordinary. */

.danger-panel {
  border: 1px solid #c0392b; border-left-width: 4px; border-radius: var(--radius);
  background: #fdf3f2; padding: 14px 16px; margin-bottom: 1.6em;
}
.danger-panel p { margin: 0; }

.btn-danger { background: #c0392b; border-color: #c0392b; color: #fff; }
.btn-danger:hover { background: #a93226; border-color: #a93226; color: #fff; }

.danger-link { color: #c0392b; }

hr.rule { border: 0; border-top: 1px solid var(--line); margin: 2em 0 1em; }

ul.plain { list-style: none; padding-left: 0; }
ul.plain li { padding: 2px 0; }

/* Stacked form controls, for the confirmation page. */
form.stack label { display: block; margin-top: 1em; font-weight: 600; font-size: .9375rem; }
form.stack input[type="text"] {
  display: block; width: 100%; max-width: 420px; margin-top: .4em;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit;
}
form.stack .cta-row { margin-top: 1.6em; }