/* ==========================================================================
   PDF Form Data Extractor
   Apex Automation Team

   Brand: the dark navy and cyan of apexautomationteam.com, with the layered
   mark as the recurring device. No webfonts and no external assets of any kind,
   so the page makes zero network requests and keeps working offline.
   ========================================================================== */

:root {
  /* surfaces */
  --bg:         #070d17;
  --bg-2:       #0b1421;
  --panel:      #0e1826;
  --panel-2:    #121e2f;
  --field:      #10283a;   /* the highlight of a fillable PDF field, in brand */
  --line:       #1b2a40;
  --line-soft:  #152338;

  /* ink */
  --fg:         #e7f0f8;
  --fg-soft:    #9db0c8;
  --fg-faint:   #64768f;

  /* accent */
  --cyan:       #22d3ee;
  --cyan-mid:   #18a5c2;
  --cyan-deep:  #10768e;
  --cyan-glow:  rgba(34, 211, 238, .14);

  /* states */
  --ok:         #34d8a4;
  --ok-bg:      rgba(52, 216, 164, .12);
  --warn:       #f7b955;
  --warn-bg:    rgba(247, 185, 85, .13);
  --focus:      #4ee2f8;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --measure: 68ch;
  --radius: 10px;
  --radius-sm: 7px;
  --gutter: 1.25rem;
}

* { box-sizing: border-box; }
::selection { background: var(--cyan); color: #04121a; }

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

body {
  margin: 0;
  background:
    radial-gradient(1100px 620px at 50% -220px, rgba(34, 211, 238, .10), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; }

.wrap {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--cyan); color: #04121a;
  padding: .7rem 1.1rem; z-index: 60; border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; top: 0; }

/* ---------- masthead ---------- */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(7, 13, 23, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .7rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 40px;
  color: var(--fg); text-decoration: none;
  font-size: 1.08rem; letter-spacing: -0.015em; white-space: nowrap;
}
.brand-mark { display: block; flex: 0 0 auto; }
.brand-text { font-weight: 300; }
.brand-text b { font-weight: 700; }

.masthead-nav { display: flex; align-items: center; gap: .3rem; }
.masthead-nav a {
  color: var(--fg-soft); text-decoration: none;
  font-size: .9rem; padding: .45rem .7rem; border-radius: var(--radius-sm);
}
.masthead-nav a:hover { color: var(--fg); background: var(--panel); }
.masthead-nav .cta {
  color: var(--cyan); border: 1px solid rgba(34, 211, 238, .35);
  background: var(--cyan-glow);
}
.masthead-nav .cta:hover { color: #04121a; background: var(--cyan); border-color: var(--cyan); }

/* The masthead is sticky, so anything an in-page link jumps to needs room to
   clear it or the heading lands underneath the bar. */
[id] { scroll-margin-top: 84px; }

/* ---------- hero, centred ---------- */
.hero { padding-block: clamp(2.2rem, 7vw, 4.4rem) clamp(1.3rem, 3vw, 2rem); }
.hero-in { text-align: center; }

.kicker {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: .3rem .85rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  color: var(--cyan);
  background: var(--cyan-glow);
  border: 1px solid rgba(34, 211, 238, .28);
  border-radius: 99px;
}

.hero-mark {
  display: block; margin: 0 auto 1rem;
  width: clamp(72px, 13vw, 104px); height: auto;
}

.hero h1 {
  margin: 0 auto .5rem;
  max-width: 20ch;
  font-size: clamp(1.9rem, 6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-wrap: balance;
}

.tagline {
  margin: 0 auto 1rem;
  max-width: 36ch;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  font-weight: 500;
  color: var(--cyan);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.standfirst {
  margin: 0 auto;
  max-width: 58ch;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  color: var(--fg-soft);
  text-wrap: pretty;
}

.hero-points {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .45rem .5rem;
  list-style: none; margin: 1.5rem 0 0; padding: 0;
}
.hero-points li {
  font-size: .84rem; color: var(--fg-soft);
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 99px; padding: .25rem .85rem;
}
.hero-points li::before {
  content: "";
  display: inline-block; width: 5px; height: 5px; margin-right: .5rem;
  border-radius: 50%; background: var(--cyan); vertical-align: middle;
}

/* ---------- drop zone ---------- */
.tool { padding-bottom: 3rem; }

.dropzone {
  position: relative;
  background:
    radial-gradient(520px 200px at 50% 0%, rgba(34, 211, 238, .10), transparent 70%),
    var(--field);
  border: 1px solid rgba(34, 211, 238, .3);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4.5vw, 2.5rem) var(--gutter) clamp(1.7rem, 4vw, 2.4rem);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.dropzone::after {
  content: "";
  position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1rem;
  border-bottom: 1px dashed rgba(34, 211, 238, .28);
}
.dropzone:hover, .dropzone.is-over {
  border-color: var(--cyan);
  background-color: #123044;
}
.dropzone.is-over { border-style: dashed; }
@media (prefers-reduced-motion: reduce) { .dropzone { transition: none; } }

.dropzone-icon { opacity: .92; margin-bottom: .5rem; }
.dropzone-lead {
  margin: 0 0 .4rem;
  font-size: clamp(1.1rem, 2.6vw, 1.45rem);
  font-weight: 700; letter-spacing: -0.02em;
}
.dropzone-help, .dropzone-sample { margin: .2rem 0 0; color: var(--fg-soft); font-size: .95rem; }
.dropzone-sample { margin-top: .85rem; font-size: .88rem; }
.sep {
  display: inline-block; width: 1px; height: .85em;
  background: rgba(34, 211, 238, .4); margin: 0 .6rem;
  vertical-align: -.1em;
}

.linkish {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--cyan);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(34, 211, 238, .45);
  cursor: pointer;
}
.linkish:hover { text-decoration-color: var(--cyan); }

/* ---------- progress ---------- */
.progress { margin-top: 1.1rem; }
.progress-bar {
  height: 4px; background: var(--line); border-radius: 99px; overflow: hidden;
}
.progress-bar span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan));
  transition: width .18s linear;
}
@media (prefers-reduced-motion: reduce) { .progress-bar span { transition: none; } }
.progress-text { margin: .5rem 0 0; font-size: .88rem; color: var(--fg-soft); }

/* ---------- counters ---------- */
.counters {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 1.7rem 0 0; font-size: .88rem; color: var(--fg-soft);
}
.counters .chip {
  border: 1px solid var(--line); border-radius: 99px;
  padding: .25rem .8rem; background: var(--panel);
}
.counters .chip b { color: var(--fg); font-weight: 700; }
.counters .chip.warn { border-color: rgba(247, 185, 85, .45); color: var(--warn); }
.counters .chip.warn b { color: var(--warn); }

/* ---------- panels ---------- */
.panel {
  margin-top: 1.4rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem var(--gutter) 1.35rem;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: .85rem;
}
.panel h2 {
  margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.015em;
}
.panel-sub {
  margin: -.4rem 0 .95rem; font-size: .9rem; color: var(--fg-soft);
  max-width: var(--measure);
}

/* ---------- tables ---------- */
.table-scroll {
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.data-scroll { max-height: min(62vh, 640px); }

table { border-collapse: collapse; width: 100%; font-size: .87rem; }

th, td {
  text-align: left; padding: .5rem .7rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  font-weight: 600; white-space: nowrap; color: var(--fg);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .018); }
.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Field names and stored values are identifiers lifted out of the file rather
   than prose, so they are set apart from it. */
.register td.file, .data th.col-field, td.ident {
  font-family: var(--mono); font-size: .81rem;
}
.data th.col-field { color: var(--cyan); }

.data td {
  max-width: 28ch;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.data th:first-child, .data td:first-child { min-width: 15ch; max-width: 30ch; }
.data td.empty {
  background: repeating-linear-gradient(
    135deg, transparent, transparent 5px,
    rgba(157, 176, 200, .07) 5px, rgba(157, 176, 200, .07) 10px);
}
.data th .col-meta {
  display: block; font-weight: 400; font-size: .71rem; color: var(--warn);
  font-family: var(--sans);
}

/* status pills */
.pill {
  display: inline-block; padding: .1rem .55rem; border-radius: 99px;
  font-size: .76rem; font-weight: 600; white-space: nowrap;
}
.pill.ok   { background: var(--ok-bg);   color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.info { background: var(--cyan-glow); color: var(--cyan); }

.reason {
  display: block; margin-top: .3rem;
  color: var(--fg-soft); font-size: .82rem; max-width: 54ch;
}

.pw-form { display: flex; gap: .4rem; margin-top: .45rem; flex-wrap: wrap; }
.pw-form input {
  font: inherit; font-size: .85rem; padding: .45rem .55rem; min-height: 38px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--fg); width: 11rem; min-width: 0;
}
.pw-form input::placeholder { color: var(--fg-faint); }

.file-notes { margin-top: .85rem; font-size: .86rem; color: var(--fg-soft); }
.file-notes p { margin: .35rem 0; }
.file-notes strong { color: var(--fg); }
.file-notes code {
  font-family: var(--mono); font-size: .8rem; color: var(--cyan);
  background: rgba(34, 211, 238, .08); padding: .05rem .3rem; border-radius: 4px;
}

/* ---------- controls ---------- */
.seg {
  display: inline-flex; border: 1px solid var(--line);
  border-radius: 99px; overflow: hidden; background: var(--bg-2);
}
.seg-btn {
  font: inherit; font-size: .83rem; padding: .4rem .85rem;
  background: transparent; color: var(--fg-soft);
  border: 0; cursor: pointer; white-space: nowrap;
}
.seg-btn.is-on { background: var(--cyan); color: #04121a; font-weight: 600; }

.opts { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; margin: 0 0 .9rem; }
.opt {
  font-size: .86rem; color: var(--fg-soft);
  display: inline-flex; gap: .55rem; align-items: center; cursor: pointer;
  max-width: 42ch; min-height: 36px; padding-block: .15rem;
}
/* Comfortably tappable on a phone: the box itself, not just the label. */
.opt input {
  flex: 0 0 auto; accent-color: var(--cyan);
  width: 1.2rem; height: 1.2rem; margin: 0;
}

.columns {
  margin-bottom: .95rem; border-top: 1px solid var(--line-soft); padding-top: .8rem;
}
.columns summary {
  cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--fg);
  display: flex; align-items: center; gap: .55rem;
  min-height: 40px; padding-block: .3rem;
  list-style: none;
}
.columns summary::-webkit-details-marker { display: none; }
/* display:flex removes the browser's own disclosure triangle, so the panel
   draws its own and turns it when the panel opens. */
.columns summary::before {
  content: ""; flex: 0 0 auto;
  width: 0; height: 0;
  border-left: 6px solid var(--cyan);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  transition: transform .15s ease;
}
.columns[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .columns summary::before { transition: none; }
}
.columns-help { font-size: .85rem; color: var(--fg-soft); max-width: var(--measure); }
.columns-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .65rem; }
.columns-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .35rem; max-height: 20rem; overflow: auto;
}
.columns-list li {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  min-height: 42px; padding: .4rem .45rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--bg-2);
}
.columns-list input[type=checkbox] {
  accent-color: var(--cyan); flex: 0 0 auto;
  width: 1.2rem; height: 1.2rem; margin: 0;
}
.ctoggle {
  display: flex; align-items: center; gap: .5rem;
  min-height: 34px; cursor: pointer; flex: 0 1 auto; min-width: 0;
}
.columns-list .cname {
  font-family: var(--mono); font-size: .77rem; color: var(--fg-soft);
  flex: 0 1 auto; max-width: 18ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.columns-list input[type=text] {
  flex: 1 1 7rem; min-width: 5rem; font: inherit; font-size: .82rem;
  padding: .2rem .45rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel); color: var(--fg);
}
.columns-list .cmeta { font-size: .73rem; color: var(--warn); flex: 0 0 auto; }
.columns-list .move {
  font: inherit; font-size: .8rem; line-height: 1;
  min-width: 2rem; min-height: 2rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--fg-soft);
}
.columns-list .move:hover:not([disabled]) { color: var(--cyan); border-color: var(--cyan-deep); }

button.ghost {
  font: inherit; font-size: .82rem; padding: .35rem .7rem;
  background: var(--bg-2); color: var(--fg-soft);
  border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
button.ghost:hover { color: var(--fg); border-color: var(--cyan-deep); }

button.primary, button.secondary {
  font: inherit; font-size: .93rem; font-weight: 600;
  padding: .62rem 1.15rem; border-radius: var(--radius-sm); cursor: pointer;
  min-height: 44px;
}
button.primary {
  background: var(--cyan); color: #04121a; border: 1px solid var(--cyan);
}
button.primary:hover { background: #4ee2f8; border-color: #4ee2f8; }
button.secondary {
  background: transparent; color: var(--fg); border: 1px solid var(--line);
}
button.secondary:hover { border-color: var(--cyan-deep); color: var(--cyan); }
button[disabled] { opacity: .45; cursor: not-allowed; }

.export-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.export-status { font-size: .86rem; color: var(--ok); }
.export-note {
  margin: .9rem 0 0; font-size: .85rem; color: var(--fg-soft);
  max-width: var(--measure);
}
.export-warnings {
  margin-top: .85rem; padding: .65rem .8rem; font-size: .85rem;
  background: var(--warn-bg); color: var(--warn);
  border: 1px solid rgba(247, 185, 85, .3); border-radius: var(--radius-sm);
}
.export-warnings p { margin: .15rem 0; }

.preview-note { margin: .6rem 0 0; font-size: .82rem; color: var(--fg-faint); }
.boot-error {
  margin-top: 1.2rem; padding: .85rem 1rem;
  background: var(--warn-bg); color: var(--warn);
  border: 1px solid rgba(247, 185, 85, .3);
  border-radius: var(--radius-sm); font-size: .9rem;
}

/* ---------- inline export rows ---------- */
.inline-export {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-top: .9rem;
}
.inline-export-label { font-size: .84rem; color: var(--fg-faint); margin-right: .2rem; }

.row-actions { display: flex; flex-wrap: wrap; gap: .3rem; }
.row-actions button {
  font: inherit; font-size: .76rem; font-weight: 600;
  padding: .3rem .55rem; min-height: 32px;
  background: transparent; color: var(--fg-soft);
  border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
.row-actions button:hover { color: var(--cyan); border-color: var(--cyan-deep); }
.row-actions .none { color: var(--fg-faint); font-size: .78rem; align-self: center; }

/* ---------- prose ----------
   The written part of the page is centred as a column: headings and paragraphs
   centred outright, list items left aligned inside a centred block so they stay
   readable rather than ragged on both edges. */
.prose { padding-block: 2.6rem .4rem; text-align: center; }
.prose h2 {
  margin: 0 auto .8rem; font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  font-weight: 700; letter-spacing: -0.02em; max-width: 30ch; text-wrap: balance;
}
.prose h3 {
  margin: 1.4rem auto .45rem; font-size: 1.02rem; font-weight: 600; color: var(--fg);
  max-width: 44ch; text-wrap: balance;
}
.prose p {
  margin: 0 auto .8rem; max-width: 62ch; color: var(--fg-soft); text-wrap: pretty;
}
.prose .small { font-size: .88rem; }
.verify {
  display: block; max-width: 58ch;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-block: .9rem; margin-block: 1.4rem;
}
.meter { font-size: .85rem; color: var(--ok); font-family: var(--mono); }

.two-col {
  display: grid; gap: 1.8rem; grid-template-columns: 1fr;
  justify-items: center; margin-top: 1.2rem;
}
@media (min-width: 820px) {
  .two-col { grid-template-columns: 1fr 1fr; gap: 2.6rem; align-items: start; }
}
.col-block {
  text-align: left; max-width: 44ch; width: 100%;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem 1.3rem 1.3rem;
}
.col-block h3 { margin: 0 0 .7rem; max-width: none; text-align: left; }
.col-block p { text-align: left; margin-inline: 0; }

.tick, .cross { list-style: none; margin: 0; padding: 0; }
.tick li, .cross li {
  position: relative; padding-left: 1.6rem; margin-bottom: .5rem;
  color: var(--fg-soft); font-size: .92rem; text-align: left;
}
.tick li::before {
  content: ""; position: absolute; left: .2rem; top: .5em;
  width: 9px; height: 5px; border-left: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok); transform: rotate(-45deg);
}
.cross li::before {
  content: ""; position: absolute; left: .15rem; top: .72em;
  width: 10px; height: 2px; background: var(--warn); border-radius: 2px;
}

.faq { display: grid; gap: .2rem; }
.faq h3 { margin: 1.7rem auto .4rem; }
.faq h3:first-child { margin-top: .5rem; }
.faq p { margin: 0 auto; }

/* ---------- support band ---------- */
.support { padding-block: 3rem 1rem; }
.support-inner {
  background:
    radial-gradient(760px 300px at 50% -10%, rgba(34, 211, 238, .14), transparent 70%),
    var(--panel);
  border: 1px solid rgba(34, 211, 238, .25);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 4.5vw, 2.6rem) clamp(1.1rem, 4vw, 2.4rem);
  text-align: center;
}
.support-mark { display: block; margin: 0 auto .9rem; width: 56px; height: auto; }
.support-inner h2 {
  margin: 0 auto .6rem; font-size: clamp(1.25rem, 3vw, 1.7rem);
  font-weight: 700; letter-spacing: -0.02em; max-width: 30ch; text-wrap: balance;
}
.support-inner > p { margin: 0 auto .9rem; color: var(--fg-soft); max-width: 64ch; }
/* The address is long enough to overflow a folded phone, so it is allowed to
   break anywhere and is padded into a proper tap target. */
.mail, .foot-mail a {
  display: inline-flex; align-items: center; min-height: 36px;
  max-width: 100%; overflow-wrap: anywhere;
  color: var(--cyan); text-decoration: underline; text-underline-offset: 3px;
}
.mail:hover, .foot-mail a:hover { text-decoration-thickness: 2px; }
.foot-mail { margin: .5rem 0 0; font-size: .88rem; }

.support-list {
  list-style: none; margin: 1.2rem auto 1.5rem; padding: 0;
  display: grid; gap: .5rem; max-width: 46ch; text-align: left;
}
.support-list li {
  position: relative; padding-left: 1.7rem;
  font-size: .92rem; color: var(--fg-soft);
}
.support-list li::before {
  content: ""; position: absolute; left: .2rem; top: .5em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan);
  transform: rotate(-45deg);
}

.support-cta {
  display: flex; flex-wrap: wrap; gap: .7rem;
  justify-content: center; align-items: center;
  margin: 0 auto 1rem; max-width: 100%;
}
.support-note { font-size: .88rem; color: var(--fg-faint); max-width: 54ch; margin-inline: auto; }

.primary-link, .plain-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; text-align: center; max-width: 100%;
  padding: .55rem 1.2rem; border-radius: var(--radius-sm);
  text-decoration: none; font-weight: 600; font-size: .93rem;
  overflow-wrap: anywhere;
}
.primary-link { background: var(--cyan); color: #04121a; }
.primary-link:hover { background: #4ee2f8; }
.plain-link { color: var(--fg-soft); border: 1px solid var(--line); }
.plain-link:hover { color: var(--cyan); border-color: var(--cyan-deep); }

/* ---------- footer ---------- */
.foot {
  margin-top: 3rem;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.foot-in {
  display: grid; gap: 1.8rem;
  grid-template-columns: 1fr;
  padding-block: 2.2rem 1.6rem;
}
@media (min-width: 640px) { .foot-in { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .foot-in { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.4rem; } }

.foot-brand p {
  margin: .8rem 0 0; color: var(--fg-soft); font-size: .88rem; max-width: 34ch;
}
.foot-col h2 {
  margin: 0 0 .6rem; font-size: .83rem; font-weight: 700; color: var(--fg);
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.foot-col li { font-size: .88rem; color: var(--fg-soft); padding-block: .25rem; }
/* Padded so each line is a comfortable tap on a phone rather than a 17px strip. */
.foot-col a {
  color: var(--fg-soft); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 34px;
}
.foot-col a:hover { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

.foot-base {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
  justify-content: space-between;
  border-top: 1px solid var(--line-soft);
  padding-block: 1.1rem 2rem;
}
.foot-base p { margin: 0; font-size: .82rem; color: var(--fg-faint); }

/* ---------- narrow screens ---------- */
@media (max-width: 860px) {
  .masthead-nav a:not(.cta) { display: none; }
}
@media (max-width: 620px) {
  :root { --gutter: 1rem; }
  .panel { padding-inline: .85rem; }
  .panel-head { align-items: flex-start; }
  .seg { width: 100%; }
  .seg-btn { flex: 1 1 0; padding-inline: .5rem; }
  .data td { max-width: 20ch; }
  .data th:first-child, .data td:first-child { min-width: 12ch; }
  .export-row > button { width: 100%; }
  .export-status { width: 100%; }
  .ctoggle {
  display: flex; align-items: center; gap: .5rem;
  min-height: 34px; cursor: pointer; flex: 0 1 auto; min-width: 0;
}
.columns-list .cname { max-width: 100%; flex-basis: 100%; }
  .foot-base { flex-direction: column; }
}
@media (max-width: 380px) {
  body { font-size: 15px; }
  .brand { font-size: 1rem; }
  .masthead-nav .cta { padding: .4rem .55rem; font-size: .84rem; }
  .hero-points li { font-size: .79rem; padding: .22rem .6rem; }
  .counters { font-size: .83rem; }
}

/* ---------- print ---------- */
@media print {
  .masthead, .dropzone, .support, .foot, .export, .skip, .progress,
  .inline-export, .row-actions { display: none; }
  body { background: #fff; color: #000; }
  .panel { border-color: #ccc; break-inside: avoid; }
  .data-scroll { max-height: none; }
}

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 1.1rem;
  transform: translate(-50%, 1rem);
  z-index: 70; pointer-events: none;
  max-width: min(92vw, 30rem);
  padding: .65rem 1.05rem;
  background: var(--panel-2);
  border: 1px solid rgba(34, 211, 238, .4);
  border-radius: 99px;
  color: var(--fg); font-size: .88rem; font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  text-align: center;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity .18s ease; }
  .toast.is-on { transform: translate(-50%, 0); }
}
@media print { .toast { display: none; } }