/*
 * The public site (home and contact). The admin keeps /style.css; nothing
 * here reaches it.
 *
 * Dark only, like the site it is modelled on. Structure and measurements
 * follow that site; the accent is Tappizzi's orange rather than its blue,
 * because a blue accent beside the logo's orange clashes.
 *
 * Contrast on --ink (measured on the old #101722; all higher on black): paper 16.8:1, muted 8.3:1, soft 10.5:1, accent 8.2:1,
 * field edge 3.1:1 on a card (WCAG 1.4.11 asks 3:1 of a control's outline).
 */

@font-face {
  font-family: "DM Sans";
  src: url(/fonts/dmsans-v1.woff2) format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #000000;
  --card: #151f2e;
  --paper: #f5f7fa;
  --muted: #a6b1c1;
  --soft: #bac7dc;
  --accent: #f29a5e;
  --brand: #de8344;
  --line: #303847;
  --edge: #5f6b80;
  --font: "DM Sans", Arial, sans-serif;
  --gutter: clamp(24px, 4.2vw, 64px);
}

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img, svg { display: block; max-width: 100%; }

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

.skip-link {
  position: absolute; left: var(--gutter); top: -60px; z-index: 10;
  padding: 10px 16px; background: var(--paper); color: var(--ink);
  font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.shell { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- header ---------- */

.site-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 20px 40px;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.wordmark { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.wordmark svg { width: 150px; height: auto; }
.brand-descriptor { font-size: 12px; color: var(--muted); letter-spacing: .02em; }

.header-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.header-nav a {
  font-size: 14px; text-decoration: none; padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.header-nav a:hover, .header-nav a[aria-current="page"] { border-bottom-color: var(--accent); }

/* ---------- shared type ---------- */

.eyebrow {
  display: flex; align-items: center; gap: 13px; margin: 0 0 29px;
  font-size: 12px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--soft);
}
.eyebrow-rule { width: 24px; height: 2px; background: var(--accent); flex: none; }
.small-label {
  margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent);
}
h1, h2, h3 { font-weight: 500; letter-spacing: -.02em; margin: 0; }
h2 { font-size: clamp(1.75rem, 3vw, 2.3rem); line-height: 1.2; }
.accent { color: var(--accent); }
p { margin: 0 0 1.1em; }

.text-link, .contact-link {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none; border-bottom: 1px solid currentColor;
}
.text-link { color: var(--accent); font-size: 15px; padding-bottom: 3px; }
.text-link::after, .contact-link::after { content: "\2192"; font-size: 1.05em; }
.text-link:hover { color: var(--paper); }

.contact-link {
  justify-content: space-between; min-width: min(313px, 100%);
  padding: 0 0 9px; border-bottom-color: var(--brand);
  font: 500 16px/1.4 var(--font); color: var(--paper);
  background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer;
}
.contact-link:hover { border-bottom-color: var(--paper); }
.contact-link:disabled { opacity: .6; cursor: default; }

/* ---------- hero ---------- */

.hero {
  display: grid; grid-template-columns: 1.25fr 1fr; align-items: center;
  gap: 40px; min-height: 650px; padding: 56px 0 64px;
}
.hero h1 { font-size: clamp(2.6rem, 5.9vw, 4.4rem); line-height: 1.08; margin-bottom: 28px; }
.intro { font-size: 17px; line-height: 1.75; color: var(--muted); max-width: 34em; margin-bottom: 36px; }

.hero-visual {
  position: relative; align-self: stretch; min-height: 480px; overflow: hidden;
  background:
    radial-gradient(60% 55% at 45% 55%, rgba(222, 131, 68, .30), transparent 70%),
    radial-gradient(90% 70% at 50% 100%, #1b2638, transparent 75%),
    #0c121c;
}
.hero-visual svg { position: absolute; inset: 8% 12% 8% 6%; width: 82%; height: 84%; }
.visual-label {
  position: absolute; right: 16px; bottom: 24px; margin: 0;
  writing-mode: vertical-rl; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
}

/* ---------- three-step row ---------- */

.expertise {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 37px 0 40px;
}
.expertise-intro { padding-right: 24px; }
.expertise-intro h2 { font-size: 21px; line-height: 1.35; }
.expertise-item { border-left: 1px solid var(--line); padding: 0 24px; }
.item-number { display: block; margin-bottom: 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.expertise-item h3 { font-size: 21px; margin-bottom: 10px; }
.expertise-item p { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0; }

/* ---------- two-column editorial ---------- */

.editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 76px 0; }
.editorial + .editorial, .section-block + .editorial { border-top: 1px solid var(--line); }
.editorial-body { color: var(--muted); font-size: 16px; line-height: 1.75; }
.editorial-body .links { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 26px; }

/* ---------- cards ---------- */

.section-block { padding: 65px 0; border-top: 1px solid var(--line); }
.section-heading {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 16px; margin-bottom: 32px;
}
.card-grid { display: grid; gap: 16px; }
.service-card { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 28px; }
.service-card .item-number { color: var(--accent); }
.service-card h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); margin-bottom: 12px; }
.service-card p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0; max-width: 60em; }

/* ---------- closing + footer ---------- */

.closing {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 32px; padding: 58px 0; border-top: 1px solid var(--line);
}
.closing h2 { font-size: clamp(1.75rem, 3vw, 2.3rem); }

.site-footer {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px; padding: 40px 0 48px;
  border-top: 1px solid var(--line); font-size: 15px; color: #9eabbd;
}
.site-footer svg { width: 96px; height: auto; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--paper); }

/* ---------- contact form ---------- */

.form { display: grid; gap: 20px; }
.field label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--soft); }
.field input, .field textarea {
  width: 100%; padding: 12px 14px; font: 400 16px/1.5 var(--font); color: var(--paper);
  background: var(--card); border: 1px solid var(--edge); border-radius: 4px;
}
.field textarea { min-height: 170px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.banner { padding: 14px 16px; border-radius: 4px; border: 1px solid var(--line); margin: 0 0 20px; }
.banner.ok { border-color: #3f7d5c; background: #12291f; color: #bfe8cf; }
.banner.err { border-color: #8a3b3b; background: #2a1414; color: #f3c2c2; }

/* ---------- customer portal (/portal) ---------- */

.portal-narrow { max-width: 540px; padding: 72px 0 96px; }
.portal-title { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.1; margin-bottom: 24px; }
.portal-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 24px; padding: 64px 0 32px;
}
.portal-head .portal-title { margin: 0; }
.whoami { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: 14px; color: var(--muted); }
button.text-link {
  background: none; border-top: 0; border-left: 0; border-right: 0;
  font: inherit; font-size: 15px; cursor: pointer; padding: 0 0 3px;
}
.date-filter { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 20px; }
.date-filter .field input { width: auto; padding: 8px 12px; font-size: 15px; }
/* Range on a line of its own, above the two dates. */
.date-filter .range-field { flex-basis: 100%; }
.date-filter select {
  padding: 8px 36px 8px 12px; font: 400 15px var(--font); color: var(--paper); cursor: pointer;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23bac7dc' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--edge); border-radius: 4px; appearance: none; min-width: 12rem;
}
.date-filter select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.date-filter .field input::-webkit-calendar-picker-indicator { cursor: pointer; }
.filter-btn {
  padding: 9px 20px; font: 500 15px var(--font); color: var(--ink); cursor: pointer;
  background: var(--accent); border: 1px solid var(--accent); border-radius: 4px;
}
.filter-btn:hover { background: var(--brand); border-color: var(--brand); }
.note { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.count-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 0 0 6px; }
.count-row .scan-count { margin: 0; }
.scan-count { font-size: 16px; color: var(--soft); margin: 0 0 6px; }
/* Export: a button that opens a small menu of formats. */
.export { position: relative; margin-left: auto; }
.export-btn {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; font: 500 15px var(--font); color: var(--paper);
  border: 1px solid var(--edge); border-radius: 4px; background: var(--card);
}
.export-btn::-webkit-details-marker { display: none; }
.export-btn::after {
  content: ''; width: 7px; height: 7px; margin-top: -4px;
  border-right: 1.6px solid var(--soft); border-bottom: 1.6px solid var(--soft); transform: rotate(45deg);
}
.export[open] .export-btn::after { transform: rotate(-135deg); margin-top: 3px; }
.export-btn:hover, .export[open] .export-btn { border-color: var(--accent); }
.export-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.export-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 15rem; padding: 6px;
  background: var(--card); border: 1px solid var(--edge); border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.export-title { margin: 4px 10px 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.export-menu a {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 4px;
  color: var(--paper); text-decoration: none; font-size: 15px; font-weight: 500;
}
.export-menu a small { font-size: 12px; font-weight: 400; color: var(--muted); }
.export-menu a:hover, .export-menu a:focus-visible { background: color-mix(in srgb, var(--accent) 16%, transparent); outline: none; }
.scan-count strong { color: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums; }
.scans td.empty-row { padding: 28px 14px; text-align: center; color: var(--muted); white-space: normal; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; margin-bottom: 72px; }
/* The scroll bar above the portal's scans grid (portal.js adds it). Styled,
   because macOS hides overlay scroll bars until you scroll -- no use at the top. */
.topscroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; margin-bottom: 6px; }
.topscroll div { height: 1px; }
.topscroll::-webkit-scrollbar { height: 12px; }
.topscroll::-webkit-scrollbar-track { background: var(--line); border-radius: 6px; }
.topscroll::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 6px; }
@supports not selector(::-webkit-scrollbar) {
  .topscroll { scrollbar-color: var(--edge) var(--line); scrollbar-width: auto; }
}
table.scans { width: 100%; border-collapse: collapse; font-size: 14px; }
.scans th, .scans td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: top; }
.scans th { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); background: var(--card); }
.scans tr:last-child td { border-bottom: 0; }
.scans code { font-size: 12px; color: var(--muted); }
.scans .cmt { white-space: normal; min-width: 14rem; max-width: 26rem; overflow-wrap: anywhere; }
.scans .cmt summary { cursor: pointer; color: var(--paper); }
.scans .url { display: inline-block; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; color: var(--muted); }
.stars-cell { color: #ffc61a; letter-spacing: 1px; }
.stars-cell .off { color: var(--line); }
.dash { color: var(--edge); }

/* ---------- customer portal: Your page (editor.js) ---------- */

/* Scans | Your page: the same segmented control as Admin's top menu, in the
   portal's own accent. The current tab is filled, its text the page colour
   (black in dark mode, white in light), so it reads in both. */
.ptabs { display: flex; flex-wrap: wrap; gap: 5px; margin: -8px 0 28px; padding: 5px;
         width: fit-content; max-width: 100%;
         background: color-mix(in srgb, var(--line) 32%, transparent);
         border: 1px solid var(--line); border-radius: 13px; }
.ptabs a { padding: 10px 22px; border-radius: 10px; font-size: 16px; font-weight: 600;
           color: var(--muted); text-decoration: none; white-space: nowrap; }
.ptabs a:hover { color: var(--accent); }
.ptabs a[aria-current] { color: var(--ink); background: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; margin-bottom: 72px; }
.pagepick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.pagepick label { font-size: 13px; font-weight: 500; color: var(--soft); }
.editform select, .pagepick select {
  padding: 10px 36px 10px 12px; font: 400 16px var(--font); color: var(--paper); cursor: pointer; max-width: 100%;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23bac7dc' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--edge); border-radius: 4px; appearance: none;
}
.blist { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.bitem {
  display: grid; grid-template-columns: auto 26px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
}
.bitem.off .btxt, .bitem.off .bic { opacity: .55; }
/* Between the full-width buttons and the small ones, as on the guest page. */
.bsep { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; font-size: 13px; color: var(--muted); }
.bsep::before, .bsep::after { content: ''; flex: 1; border-top: 1px solid var(--edge); }
.inl { display: inline; margin: 0; }
.bmove { display: grid; gap: 4px; }
.bmove button {
  font: inherit; font-size: 11px; line-height: 1; padding: 6px 8px; cursor: pointer;
  border: 1px solid var(--edge); border-radius: 4px; background: none; color: var(--soft);
}
.bmove button:hover:not(:disabled) { border-color: var(--accent); color: var(--paper); }
.bmove button:disabled { opacity: .3; cursor: default; }
.pi { width: 22px; height: 22px; color: var(--accent); display: block; }
.btxt b { display: block; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.btxt small { color: var(--muted); font-size: 13px; }
.bsw { position: relative; width: 46px; height: 28px; border: 0; border-radius: 99px; background: var(--edge); cursor: pointer; padding: 0; }
.bsw i { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.bsw[aria-checked="true"] { background: #2e9e5b; }
.bsw[aria-checked="true"] i { left: 22px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bedit { color: var(--accent); font-weight: 600; text-decoration: none; padding: 8px 2px; }
.bedit:hover { text-decoration: underline; }
.pvlink { display: none; }
.pvside .pvframe { display: block; width: 100%; height: 720px; border: 1px solid var(--line); border-radius: 28px; background: #fff; }
.crumb { margin: 0 0 18px; color: var(--muted); }
.crumb a { color: var(--accent); }
.editform { max-width: 640px; margin-bottom: 72px; }
.field em { display: block; font-style: normal; font-size: 13px; color: var(--muted); margin-top: 6px; }
.field .opt { color: var(--muted); font-weight: 400; }
.field code { font-size: 12px; }
.hgrid { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px 10px; align-items: center; }
.hgrid input { padding: 8px 10px; }
.picnow { display: flex; gap: 14px; align-items: center; }
.picnow img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); flex: none; }
.upl { display: inline-block; position: relative; overflow: hidden; cursor: pointer; }
/* It is a label, so the form's label style would make it small and grey. */
.field label.upl { margin: 0 0 6px; font-size: 15px; font-weight: 500; color: var(--ink); }
.upl input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chk { display: flex; gap: 10px; align-items: center; font-size: 16px; }
.chk input { width: 18px; height: 18px; accent-color: var(--accent); }
.acts { display: flex; gap: 24px; align-items: center; }
.banner.saved form { display: inline; }
.banner .text-link { color: inherit; text-decoration: underline; border: 0; }
.listhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.listhead .note { margin-top: 4px; }
.addbtn { white-space: nowrap; text-decoration: none; }
.types { display: grid; gap: 8px; max-width: 640px; margin-bottom: 72px; }
.type {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px; color: var(--paper); text-decoration: none;
}
a.type:hover { border-color: var(--accent); }
.type b { display: block; font-weight: 600; }
.type small { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; }
.type.off { opacity: .5; }
.type .chev { color: var(--muted); font-size: 24px; line-height: 1; }
.gone { margin: 8px 0 20px; }
.gone summary { cursor: pointer; color: var(--soft); font-size: 15px; padding: 6px 0; }
.gone .gonerow { grid-template-columns: 26px minmax(0, 1fr) auto; }
.gone .gonerow .btxt { opacity: .7; }
.morehours { margin: 0 0 20px; }
.morehours summary { cursor: pointer; color: var(--accent); font-size: 15px; margin-bottom: 12px; }
.pdfnow { display: inline-flex; gap: 8px; align-items: center; color: var(--paper); max-width: 14rem; overflow-wrap: anywhere; font-size: 14px; }
.delrow { max-width: 640px; margin: -40px 0 72px; padding-top: 16px; border-top: 1px solid var(--line); }
.danger-link { color: #ff8a8a; }
.confirm { max-width: 560px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 24px; margin-bottom: 72px; }
.confirm h2 { font-size: 1.4rem; margin: 0 0 10px; }
.confirm p { color: var(--soft); }
.dangerbtn { background: #d64545; border-color: #d64545; color: #fff; }
.dangerbtn:hover { background: #b93636; border-color: #b93636; }
.radio { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: 16px; color: var(--paper); cursor: pointer; }
.radio input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; transform: translateY(3px); }
.radio small { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
/* A choice's note (the review link it uses) sits on its own line under the choice. */
.radio { flex-wrap: wrap; }
.radio small { display: block; flex-basis: 100%; padding-left: 28px; margin-top: 2px; }
.radio small a { color: inherit; text-underline-offset: 2px; }
.radio.off { opacity: .55; cursor: default; }
/* .field label is the small grey heading style; these are choices, not headings. */
.field label.radio { font-size: 16px; font-weight: 400; color: var(--paper); margin-bottom: 8px; }
/* The text page editor (textpage.js): sections, items, prices, descriptions. */
.tp { display: grid; gap: 8px; }
.tp .tplabel { display: block; margin: 0; font-size: 13px; font-weight: 500; color: var(--soft); }
.tp .tplabel .opt { color: var(--muted); font-weight: 400; }
.tp em { font-style: normal; font-size: 13px; color: var(--muted); margin-top: -2px; }
.tp input, .tp textarea {
  width: 100%; padding: 9px 11px; font: 400 16px/1.4 var(--font); color: var(--paper);
  background: var(--card); border: 1px solid var(--edge); border-radius: 4px;
}
.tp input:focus, .tp textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* min-height 0: the contact form's .field textarea rule would make every box 170px tall. */
.tp textarea { resize: none; overflow: hidden; display: block; margin-top: 6px; min-height: 0; }
.tpsecs { display: grid; gap: 10px; }
.tpsec { border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: color-mix(in srgb, var(--card) 45%, transparent); }
.tphead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 10px; }
.tp .tptitle { font-weight: 700; }
.tpit { border-left: 2px solid var(--accent); padding-left: 8px; margin: 0 0 12px; }
.tprow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.tprow2 { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 6px; padding-left: 31px; align-items: start; }
.tp .tpdesc { margin: 0; font-size: 15px; color: var(--soft); }
.tparr { display: grid; gap: 3px; }
.tparr button { font: inherit; font-size: 10px; line-height: 1; padding: 4px 6px; cursor: pointer; border: 1px solid var(--edge); border-radius: 4px; background: none; color: var(--soft); }
.tparr button:hover { border-color: var(--accent); color: var(--paper); }
.tpsec:first-child > .tphead .tparr button:first-child, .tpsec:last-child > .tphead .tparr button:last-child,
.tpit:first-child > .tprow .tparr button:first-child, .tpit:last-child > .tprow .tparr button:last-child { opacity: .3; pointer-events: none; }
.tpx { border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; padding: 0 4px; cursor: pointer; }
.tpx:hover { color: #ff8a8a; }
.tpadd { justify-self: start; border: 0; background: none; padding: 2px 0 2px 10px; cursor: pointer; color: var(--accent); font: 600 15px var(--font); }
.tpaddsec { border: 1px dashed var(--edge); border-radius: 8px; background: none; padding: 11px; cursor: pointer; color: var(--accent); font: 600 15px var(--font); }
.tpaddsec:hover, .tpadd:hover { text-decoration: underline; }
.tpwarn { margin: 0; padding: 10px 12px; border-radius: 4px; border: 1px solid #8a6a2b; background: color-mix(in srgb, #c9a227 12%, transparent); font-size: 14px; color: var(--paper); }
.tpcount { margin: 0; font-size: 13px; color: var(--muted); }
.tpcount.over { color: #ff8a8a; }
/* The icon picker (iconpick.js), as in Admin, in the portal's colours. */
.iconpick.enhanced > select { display: none; }
.icon-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; cursor: pointer; text-align: left;
  font: 400 16px var(--font); color: var(--paper); background: var(--card); border: 1px solid var(--edge); border-radius: 4px;
}
.icon-btn .ai { color: var(--accent); }
.icon-btn .caret { margin-left: auto; color: var(--muted); font-size: 13px; }
.icon-btn:focus-visible, .icon-btn[aria-expanded="true"] { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ai { width: 22px; height: 22px; flex: none; }
.ai-none { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--muted); opacity: .7; flex: none; }
.icon-panel { margin-top: 8px; padding: 12px; max-height: 26rem; overflow: auto; background: var(--card); border: 1px solid var(--edge); border-radius: 8px; }
.icon-panel input[type="search"] {
  width: 100%; margin-bottom: 10px; padding: 10px 12px; font: 400 16px var(--font); color: var(--paper);
  background: var(--ink); border: 1px solid var(--edge); border-radius: 4px;
}
.icon-group-name { margin: 12px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.icon-grid { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.icon-tile {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 3px 7px; cursor: pointer; text-align: center;
  font: 400 12px/1.2 var(--font); color: var(--paper); background: none; border: 1px solid transparent; border-radius: 8px;
}
.icon-tile .ai, .icon-tile .ai-none { width: 26px; height: 26px; color: var(--accent); }
.icon-tile:hover { border-color: var(--edge); }
.icon-tile[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.icon-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.icon-tile[hidden], .icon-group[hidden] { display: none; }
.icon-empty { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
@media (width <= 900px) {
  .editor { grid-template-columns: 1fr; gap: 0; }
  .pvside { display: none; }
  .pvlink { display: block; position: sticky; bottom: 16px; text-align: center; margin-top: 8px; text-decoration: none; }
}
@media (width <= 520px) {
  .bitem { grid-template-columns: auto 22px minmax(0, 1fr) auto; gap: 10px; }
  .bitem .bedit { grid-column: 3 / -1; justify-self: start; padding: 0; }
  .hgrid { grid-template-columns: 1fr 1fr; }
  .hgrid span { grid-column: 1 / -1; margin-top: 6px; }
  .listhead { flex-direction: column; gap: 4px; }
  .delrow { margin-top: -48px; }
}

/* ---------- smaller screens ---------- */

@media (width <= 760px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 40px; }
  .hero-visual { min-height: 340px; }
  /* Intro and 01 on the first row, 02 and 03 on the second, a rule between
     each pair -- the way the reference site folds the same row. */
  .expertise { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .expertise-intro { padding-right: 16px; }
  .expertise-item { padding: 0 0 0 16px; }
  .expertise-item:nth-child(3) { border-left: 0; padding-left: 0; padding-right: 16px; }
  .editorial { grid-template-columns: 1fr; gap: 24px; padding: 56px 0; }
  .section-block { padding: 48px 0; }
  .service-card { padding: 22px; }
  .closing { flex-direction: column; align-items: flex-start; }
  .whoami { align-items: flex-start; }
  .portal-narrow { padding: 48px 0 72px; }
  /* The grid is wider than a phone, so a message centred across it lands
     off-screen. Pin it to the visible part of the scroll box instead. */
  .scans td.empty-row { text-align: left; }
  .scans td.empty-row span { position: sticky; left: 14px; display: inline-block; max-width: calc(100vw - 80px); }
}

/* ---------- customer portal: light mode ---------- */
/*
 * The public pages stay dark. The portal (html.portal) follows the device's
 * light/dark setting, and its toggle (/theme.js, the same one /admin uses)
 * can override it in both directions -- hence a media rule scoped
 * :not([data-theme="dark"]) plus a plain [data-theme="light"] rule. The light
 * values are named once, as --l-*, and both rules only point at them.
 *
 * Contrast on white: paper 17:1, muted 6.0:1, accent 4.9:1, edge 3.6:1.
 */
html.portal {
  --l-ink: #ffffff; --l-card: #f6f7f9; --l-paper: #101722; --l-muted: #5a6475;
  --l-soft: #3a4352; --l-accent: #b65d1f; --l-line: #e3e6eb; --l-edge: #7d8797;
}
@media (prefers-color-scheme: light) {
  html.portal:not([data-theme="dark"]) {
    color-scheme: light;
    --ink: var(--l-ink); --card: var(--l-card); --paper: var(--l-paper); --muted: var(--l-muted);
    --soft: var(--l-soft); --accent: var(--l-accent); --line: var(--l-line); --edge: var(--l-edge);
  }
}
html.portal[data-theme="light"] {
  color-scheme: light;
  --ink: var(--l-ink); --card: var(--l-card); --paper: var(--l-paper); --muted: var(--l-muted);
  --soft: var(--l-soft); --accent: var(--l-accent); --line: var(--l-line); --edge: var(--l-edge);
}
/* The few colours set directly rather than through the tokens above. The
   class is added by the same rules' conditions, so they match exactly. */
@media (prefers-color-scheme: light) {
  html.portal:not([data-theme="dark"]) .site-footer { color: var(--muted); }
  html.portal:not([data-theme="dark"]) .banner.ok { border-color: #8cc5a4; background: #eef8f2; color: #1d5a3a; }
  html.portal:not([data-theme="dark"]) .banner.err { border-color: #e2a1a1; background: #fcf0f0; color: #8a2a2a; }
  html.portal:not([data-theme="dark"]) .export-menu { box-shadow: 0 12px 32px rgba(16, 23, 34, .14); }
  html.portal:not([data-theme="dark"]) .stars-cell { color: #e0a400; }
  html.portal:not([data-theme="dark"]) .topscroll::-webkit-scrollbar-thumb { background: #b9c0cb; }
}
html.portal[data-theme="light"] .site-footer { color: var(--muted); }
html.portal[data-theme="light"] .banner.ok { border-color: #8cc5a4; background: #eef8f2; color: #1d5a3a; }
html.portal[data-theme="light"] .banner.err { border-color: #e2a1a1; background: #fcf0f0; color: #8a2a2a; }
html.portal[data-theme="light"] .export-menu { box-shadow: 0 12px 32px rgba(16, 23, 34, .14); }
html.portal[data-theme="light"] .stars-cell { color: #e0a400; }
html.portal[data-theme="light"] .topscroll::-webkit-scrollbar-thumb { background: #b9c0cb; }

/* The toggle button (drawn by /theme.js), as on /admin: top right, showing
   the mode you would switch TO. The header nav makes room for it. */
.themetoggle {
  position: fixed; top: calc(1.4rem + env(safe-area-inset-top, 0px));
  right: calc(1rem + env(safe-area-inset-right, 0px)); z-index: 50;
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid var(--edge); border-radius: 999px; background: var(--card);
  color: var(--paper); cursor: pointer;
}
.themetoggle:hover { color: var(--accent); border-color: var(--accent); }
.themetoggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.themetoggle svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2;
                   stroke-linecap: round; stroke-linejoin: round; }
.themetoggle .sun, .themetoggle .moon { display: none; }
.themetoggle[data-now="dark"] .sun { display: block; }
.themetoggle[data-now="light"] .moon { display: block; }
html.portal .header-nav { margin-right: 3.25rem; }

/* Portal: the "What happened" key above the scans grid, folded by default. */
.key { margin: 4px 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.key summary { cursor: pointer; padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--paper); }
.key dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; padding: 4px 14px 14px; font-size: 14px; }
.key dt { font-weight: 600; color: var(--paper); white-space: nowrap; }
.key dd { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .key dl { grid-template-columns: 1fr; gap: 2px; } .key dd { margin-bottom: 8px; } }