/* exexif page styles. Tokens and element defaults come from the design
   system (tokens/, landed 2026-09-01 from the approved design handoff
   output); the classes below are the vanilla translation of that
   system's components, kept 1:1 with its JSX sources so a future design
   update can be diffed against them. Two weights, sentence case, no em
   dashes; light theme at launch, the token ramps are the dark-mode hook. */

@import "tokens/fonts.css";
@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/radii.css";
@import "tokens/elevation.css";
@import "tokens/motion.css";
@import "tokens/base.css";

/* Page frame */
.page {
  max-width: var(--width-page);
  margin: 0 auto;
  padding: var(--space-9) var(--gutter-desktop) var(--space-11);
}
.page > .app-col {
  max-width: var(--width-app);
  display: grid;
  gap: var(--space-10);
}
@media (max-width: 720px) {
  .page { padding: var(--space-8) var(--gutter-mobile) var(--space-10); }
  .page > .app-col { gap: var(--section-gap-mobile); }
}

/* Icon glyph: masked SVG, tints with currentColor via background-color.
   Set the glyph with --icon: url(assets/icons/name.svg) at the call site. */
.icon {
  display: inline-block;
  width: var(--icon-md);
  height: var(--icon-md);
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon-lg { width: var(--icon-lg); height: var(--icon-lg); }
.spin { animation: exexif-spin 900ms linear infinite; }

/* Hero */
.hero { display: grid; gap: var(--space-7); }
.hero-head { display: grid; gap: var(--space-5); justify-items: start; }
.hero .ds-wordmark { font-size: clamp(46px, 9vw, 64px); line-height: 1; color: var(--green-5); }
.hero h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: clamp(21px, 3.4vw, 31px);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  max-width: 26ch;
}
.counters { display: flex; gap: var(--space-10); flex-wrap: wrap; align-items: flex-start; }
.counter { display: grid; gap: var(--space-1); }
.counter .num {
  font-size: var(--size-38);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-brand);
  transition: color var(--dur-slow) var(--ease-out);
}
.counter.loading .num { color: var(--ink-4); }
.counter.empty .num { color: var(--ink-3); }
.counter .label { font-size: var(--size-13); color: var(--text-meta); }
.hero-nod { font-size: var(--size-13); color: var(--text-meta); max-width: 48ch; }

/* Dropzone */
.dropzone-wrap { display: grid; gap: var(--space-4); }
.dropzone {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
  padding: var(--space-11) var(--space-7);
  min-height: 232px;
  border-radius: var(--radius-4);
  cursor: pointer;
  background: var(--surface-card);
  border: var(--border-hairline) dashed var(--line-strong);
  box-shadow: var(--shadow-1);
  transition: background var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}
.dropzone.compact { padding: var(--space-7) var(--space-6); min-height: 0; }
.dropzone.dragover {
  background: var(--surface-brand-soft);
  border: var(--border-strong) dashed var(--green-5);
  box-shadow: var(--shadow-3);
}
.dropzone .dz-icon { color: var(--ink-3); }
.dropzone.dragover .dz-icon { color: var(--green-5); }
.dropzone .dz-text { display: grid; gap: var(--space-2); }
.dropzone .dz-title { font-size: var(--size-21); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); }
.dropzone.compact .dz-title { font-size: var(--size-18); }
.dropzone .dz-sub { font-size: var(--size-15); color: var(--text-muted); }
.dropzone .dz-formats { font-size: var(--size-13); color: var(--text-meta); max-width: 42ch; }
.privacy-note {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--size-13);
  color: var(--text-meta);
}
.privacy-note .icon { color: var(--green-4); width: 14px; height: 14px; }

/* Section heads */
.section-head { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-5); }
.section-head .n { font-size: var(--size-13); color: var(--text-meta); }
.section-head h2 { font-size: var(--size-21); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); }
.section-head .hint { margin-left: auto; font-size: var(--size-13); color: var(--text-meta); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--control-h-md);
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: var(--size-15);
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--control-secondary-fg);
  background: transparent;
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-2);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}
.btn:active:not(:disabled) { transform: scale(var(--press-scale)); }
.btn-sm { min-height: var(--hit-min); padding: 0 10px; font-size: var(--size-13); }
.btn-lg { min-height: var(--control-h-lg); padding: 0 20px; font-size: var(--size-16); }
.btn-full { width: 100%; }
.btn-primary { background: var(--control-primary-bg); color: var(--control-primary-fg); box-shadow: var(--shadow-2); }
.btn-primary:hover:not(:disabled) { background: var(--control-primary-bg-hover); }
.btn-primary:active:not(:disabled) { background: var(--control-primary-bg-active); }
.btn-secondary { background: var(--control-secondary-bg); border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.btn-secondary:hover:not(:disabled) { background: var(--control-secondary-bg-hover); }
.btn-ghost { color: var(--text-brand); }
.btn-ghost:hover:not(:disabled) { background: var(--control-ghost-bg-hover); }
.btn:disabled { cursor: not-allowed; color: var(--control-disabled-fg); box-shadow: none; }
.btn-primary:disabled { background: var(--control-disabled-bg); }

/* Chips (destination) */
.chips { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--hit-min);
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: var(--size-15);
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--text-body);
  background: var(--paper-2);
  border: var(--border-hairline) solid var(--line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}
.chip:hover { background: var(--paper-3); }
.chip[aria-checked="true"] {
  color: var(--text-on-brand);
  background: var(--green-5);
  border-color: var(--green-5);
  box-shadow: var(--shadow-2);
}
.preset-line { margin-top: var(--space-5); font-size: var(--size-13); color: var(--text-muted); }

/* Radio cards (location modes) */
.radio-cards { display: grid; gap: var(--space-3); }
.radio-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--line-hairline);
  border-radius: var(--radius-3);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard);
}
.radio-card:hover { border-color: var(--line-strong); }
.radio-card.selected {
  background: var(--surface-brand-soft);
  border: var(--border-strong) solid var(--green-5);
  box-shadow: var(--shadow-2);
}
.radio-card.disabled { cursor: not-allowed; opacity: 0.6; }
.radio-card input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: var(--hit-min);
  height: var(--hit-min);
  /* The 18 px ring is drawn in the middle of a 44 px box; the box is the hit target
     and the negative margins keep the ring where the old 18 px input sat. */
  margin: -11px -13px -13px -13px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle, var(--paper-2) 0 7.5px, var(--line-strong) 7.5px 9px, transparent 9.5px);
  cursor: inherit;
}
.radio-card.selected input[type="radio"] {
  background: radial-gradient(circle, var(--green-5) 0 4.5px, var(--paper-2) 5px 7.5px, var(--green-5) 7.5px 9px, transparent 9.5px);
}
.radio-card input[type="radio"]:focus-visible { box-shadow: none; }
.radio-card:focus-within { box-shadow: var(--focus-ring); }
.radio-card .rc-body { display: grid; gap: var(--space-2); min-width: 0; }
.radio-card .rc-title-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.radio-card .rc-title-row .icon { color: var(--text-meta); }
.radio-card.selected .rc-title-row .icon { color: var(--green-6); }
.radio-card .rc-title { font-size: var(--size-16); font-weight: var(--weight-medium); }
.radio-card .rc-default {
  font-size: var(--size-11);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--green-6);
  background: var(--green-2);
  border-radius: var(--radius-pill);
  padding: 2px 7px;
}
.radio-card .rc-desc { font-size: var(--size-15); color: var(--text-muted); }
.radio-card .rc-warning {
  display: flex;
  gap: var(--space-3);
  font-size: var(--size-13);
  color: var(--ochre-5);
  background: var(--surface-accent-soft);
  border: var(--border-hairline) solid var(--ochre-2);
  border-radius: var(--radius-1);
  padding: var(--space-3) var(--space-4);
}
.radio-card .rc-warning .icon { width: 14px; height: 14px; color: var(--ochre-4); margin-top: 2px; }

/* Cards and callouts */
.card {
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--line-hairline);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-1);
  color: var(--text-body);
}
.card.elevated { box-shadow: var(--shadow-3); }
.card.tone-well { background: var(--surface-well); }
.card.tone-brand { background: var(--surface-brand-soft); border-color: var(--green-2); }
.card.pad-sm { padding: var(--space-5); }
.card.pad-lg { padding: var(--space-8); }
.callout {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-well);
  border: var(--border-hairline) solid var(--line-hairline);
  border-radius: var(--radius-2);
  color: var(--text-body);
  font-size: var(--size-15);
  line-height: var(--leading-normal);
}
.callout .icon { color: var(--text-muted); margin-top: 3px; }
.callout .co-title { font-weight: var(--weight-medium); margin-bottom: 2px; }
.callout .co-body { color: var(--text-muted); }
.callout.tone-caution { background: var(--surface-accent-soft); border-color: var(--ochre-2); }
.callout.tone-caution .icon { color: var(--ochre-5); }
.callout.tone-error { background: var(--surface-caution-soft); border-color: var(--oxide-2); }
.callout.tone-error .icon { color: var(--oxide-4); }

/* Meta rows (the reveal panel) */
.meta-rows { padding: 0 var(--space-6); }
.meta-row {
  display: grid;
  grid-template-columns: minmax(88px, 124px) 1fr auto;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-top: var(--border-hairline) solid var(--line-hairline);
}
.meta-row:first-child { border-top: none; }
.meta-row .mr-label {
  font-size: var(--size-11);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-meta);
}
.meta-row .mr-value-wrap { display: grid; gap: var(--space-2); min-width: 0; }
.meta-row .mr-value {
  font-size: var(--size-15);
  color: var(--text-body);
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}
.meta-row.struck .mr-value {
  color: var(--text-meta);
  text-decoration: line-through;
  text-decoration-color: var(--oxide-2);
  text-decoration-thickness: 1px;
}
.meta-row .mr-detail { font-size: var(--size-13); color: var(--text-meta); }
.meta-row .mr-side { display: flex; align-items: center; gap: var(--space-3); justify-self: end; }
.status-word {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-13);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.status-word.kept { color: var(--state-kept); }
.status-word.removed { color: var(--state-removed); }
.status-word.coarsened { color: var(--state-coarsened); }
.reveal-more { border-top: var(--border-hairline) solid var(--line-hairline); padding: var(--space-2) var(--space-6); }
.per-file { display: grid; gap: var(--space-5); }
.per-file .pf-item { display: grid; gap: var(--space-2); }
.per-file .pf-name-row { display: flex; align-items: baseline; gap: var(--space-3); }
.per-file .pf-name { font-size: var(--size-15); font-weight: var(--weight-medium); }
.per-file .pf-fields {
  font-size: var(--size-13);
  color: var(--text-meta);
  display: grid;
  gap: var(--space-1);
  font-variant-numeric: tabular-nums lining-nums;
}
.per-file .pf-fields .struck { text-decoration: line-through; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 8px;
  background: var(--paper-3);
  color: var(--text-muted);
  border: var(--border-hairline) solid var(--line-hairline);
  border-radius: var(--radius-pill);
  font-size: var(--size-11);
  font-weight: var(--weight-medium);
  line-height: 16px;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

/* Disclosures: native details, framed for the options strip, plain rows
   for per-file detail and the FAQ. */
details.disclosure > summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--hit-min);
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--size-16);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary .chev {
  transition: transform var(--dur-fast) var(--ease-standard);
  color: var(--ink-3);
}
details.disclosure[open] > summary .chev { transform: rotate(90deg); }
details.disclosure > summary .sum-label { flex: 1; }
details.disclosure > summary .sum-meta { font-size: var(--size-13); font-weight: var(--weight-regular); color: var(--text-meta); }
details.disclosure > .disclosure-body {
  padding: 0 0 var(--space-5);
  font-size: var(--size-15);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}
details.disclosure.framed {
  border-radius: var(--radius-3);
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--line-hairline);
  overflow: hidden;
}
details.disclosure.framed > summary { padding: var(--space-4) var(--space-5); }
details.disclosure.framed > .disclosure-body { padding: 0 var(--space-5) var(--space-5); }
details.disclosure.plain { border-top: var(--border-hairline) solid var(--line-hairline); }

/* Options strip */
.options-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.field { display: grid; gap: var(--space-3); }
.field > .f-label {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--size-13);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-meta);
}
.field .f-hint { font-size: var(--size-13); color: var(--text-meta); max-width: var(--measure-narrow); }
.field .f-warning { font-size: var(--size-13); color: var(--ochre-5); max-width: var(--measure-narrow); }
.seg {
  display: inline-flex;
  width: 100%;
  padding: 3px;
  gap: 2px;
  background: var(--surface-well);
  border: var(--border-hairline) solid var(--line-hairline);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-inset-well);
}
.seg button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--hit-min);
  padding: 0 12px;
  font-family: var(--font-sans);
  font-size: var(--size-15);
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--text-meta);
  background: transparent;
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-1);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.seg button[aria-checked="true"] {
  color: var(--text-body);
  background: var(--paper-2);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-1);
}
.seg button:disabled { cursor: not-allowed; color: var(--control-disabled-fg); }
.input-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: calc(var(--hit-min) + 6px); /* the segmented control's outer height: 44 plus 3 px padding each side */
  padding: 0 10px;
  background: var(--paper-2);
  border: var(--border-hairline) solid var(--line-strong);
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-inset-well);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.input-wrap:focus-within { border-color: var(--line-brand); box-shadow: var(--focus-ring); }
.input-wrap.disabled { background: var(--paper-3); }
.input-wrap input {
  flex: 1;
  min-width: 0;
  width: 100%;
  align-self: stretch;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--size-15);
  color: var(--text-body);
  font-variant-numeric: tabular-nums lining-nums;
}
.input-wrap input:disabled { color: var(--text-disabled); }
.input-wrap .affix { font-size: var(--size-13); color: var(--text-meta); }
.switch-row { display: flex; align-items: flex-start; gap: var(--space-4); cursor: pointer; }
.switch-row.disabled { cursor: not-allowed; }
.switch-track { position: relative; display: inline-block; width: 38px; height: 22px; flex: 0 0 auto; margin-top: 1px; }
.switch-track input { position: absolute; top: -11px; bottom: -11px; left: -3px; right: -3px; opacity: 0; margin: 0; width: auto; height: auto; cursor: inherit; /* 44 px hit box around the 38 by 22 track */ }
.switch-track .track {
  position: absolute;
  inset: 0;
  background: var(--line-strong);
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-standard);
}
.switch-track input:checked + .track { background: var(--green-5); }
.switch-track input:disabled + .track { background: var(--paper-4); }
.switch-track .knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--paper-2);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-2);
  transition: left var(--dur-fast) var(--ease-standard);
  pointer-events: none;
}
.switch-track input:checked ~ .knob { left: 19px; }
.switch-row .sw-text { display: grid; gap: 2px; }
.switch-row .sw-label { font-size: var(--size-15); font-weight: var(--weight-medium); color: var(--text-body); }
.switch-row.disabled .sw-label { color: var(--text-disabled); }
.switch-row .sw-hint { font-size: var(--size-13); color: var(--text-meta); }

/* Progress */
.progress { display: grid; gap: var(--space-3); }
.progress .p-head { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--size-13); }
.progress .p-label { color: var(--text-body); font-weight: var(--weight-medium); }
.progress .p-hint { color: var(--text-meta); font-variant-numeric: tabular-nums; }
.progress .p-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--paper-4);
  overflow: hidden;
  box-shadow: var(--shadow-inset-well);
}
.progress .p-fill {
  height: 100%;
  width: 0%;
  background: var(--green-5);
  border-radius: var(--radius-pill);
  transition: width var(--dur-base) var(--ease-standard);
}

/* Queue rows */
.file-rows { overflow: hidden; }
.file-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border-top: var(--border-hairline) solid var(--line-hairline);
  border-left: var(--border-strong) solid transparent;
  transition: background var(--dur-base) var(--ease-standard), padding var(--dur-base) var(--ease-standard);
}
.file-row:first-child { border-top: none; }
.file-row.current { background: var(--surface-brand-soft); border-left-color: var(--green-5); }
.file-row.error { background: var(--surface-caution-soft); }
.file-row.done { padding: var(--space-3) var(--space-4); }
.file-row .fr-thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-1);
  background: var(--surface-well);
  border: var(--border-hairline) solid var(--line-hairline);
  display: grid;
  place-items: center;
}
.file-row .fr-thumb .icon { width: 15px; height: 15px; color: var(--ink-4); }
.file-row .fr-main { display: grid; gap: var(--space-2); min-width: 0; }
.file-row .fr-name-row { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.file-row .fr-name {
  font-size: var(--size-15);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-row.current .fr-name { font-weight: var(--weight-medium); }
.file-row .fr-kind {
  font-size: var(--size-11);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-meta);
  flex: 0 0 auto;
}
.file-row .fr-error { font-size: var(--size-13); color: var(--text-caution); }
.file-row .fr-sizes {
  font-size: var(--size-13);
  color: var(--text-meta);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  justify-self: end;
}
.file-row .fr-sizes .out { color: var(--text-body); }
.file-row .fr-side { display: flex; align-items: center; gap: var(--space-3); justify-self: end; min-width: 92px; justify-content: flex-end; }
.file-row .fr-state { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--size-13); white-space: nowrap; }
.file-row .fr-state.queued { color: var(--state-queued); }
.file-row .fr-state.working { color: var(--state-working); }
.file-row .fr-state.done { color: var(--state-done); }
.file-row .fr-state.error { color: var(--state-error); }
.file-row .fr-remove,
.file-row .fr-action {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-1);
  cursor: pointer;
  color: var(--text-meta);
}
.file-row .fr-action { color: var(--text-brand); }
.file-row .fr-action:hover, .file-row .fr-remove:hover { background: var(--control-ghost-bg-hover); }
@media (max-width: 560px) {
  .file-row { grid-template-columns: 36px 1fr auto; }
  .file-row .fr-sizes { display: none; }
}

/* Queue frame */
.queue-head { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-5); }
.queue-head .count { font-size: var(--size-13); color: var(--text-meta); }
.queue-head .clear { margin-left: auto; }
.queue-progress-card { margin-bottom: var(--space-4); }
.process-row { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-6); flex-wrap: wrap; }
.process-row .process-wrap { flex: 1 1 260px; }
.process-row .process-note { font-size: var(--size-13); color: var(--text-meta); max-width: 34ch; }

/* Result */
.result-card { display: grid; gap: var(--space-5); }
.result-card .r-head { display: flex; align-items: center; gap: var(--space-3); }
.result-card .r-head .icon { width: 20px; height: 20px; color: var(--green-5); }
.result-card .r-head h2 { font-size: var(--size-21); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); }
.result-card .r-summary { font-size: var(--size-15); line-height: var(--leading-relaxed); font-variant-numeric: tabular-nums lining-nums; }
.result-card .r-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.result-card .r-note { font-size: var(--size-13); color: var(--text-meta); }

/* Explainer and footer */
.explainer { display: grid; gap: var(--space-10); max-width: var(--measure-prose); }
.explainer h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--size-31);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.explainer p { margin: 0 0 var(--space-5); font-size: var(--size-16); line-height: var(--leading-relaxed); max-width: var(--measure-prose); }
.explainer .faq { border-top: var(--border-hairline) solid var(--line-hairline); }
.explainer .faq p { margin: 0; font-size: var(--size-15); color: var(--text-muted); }
.site-footer {
  border-top: var(--border-hairline) solid var(--line-hairline);
  padding-top: var(--space-8);
  display: grid;
  gap: var(--space-5);
}
.site-footer .f-row { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: center; }
.site-footer .ds-wordmark { font-size: var(--size-25); color: var(--green-5); }
.site-footer .f-mail { font-size: var(--size-15); display: inline-flex; align-items: center; gap: var(--space-2); }
.site-footer .f-mail .icon { width: 14px; height: 14px; color: var(--green-5); }
.site-footer .f-privacy { font-size: var(--size-13); line-height: var(--leading-relaxed); color: var(--text-muted); max-width: var(--measure-prose); }
.site-footer .f-meta { font-size: var(--size-13); color: var(--text-meta); }

/* Utility */
[hidden] { display: none !important; }
.divider { border: 0; border-top: var(--border-hairline) solid var(--line-hairline); }