/* ============================================================================
   Photo Grid Print — all styling lives here.
   Tokens come from the "Modernist" design system used by the original mock:
   flat surfaces, 0px radius, 2px rules, one red accent.
   ========================================================================= */

:root {
  --color-bg: #f3f2f2;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-100: #fff2ef;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-700: #605d5d;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --weight-heading: 800;

  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;

  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* Sheet geometry — rewritten by js/app.js on every render. */
  --page-w: 210mm;
  --page-h: 297mm;
  --page-pad: 5mm;
  --cell-gap: 2mm;
  --cell-border: 0;
  --grid-cols: 2;
  --grid-rows: 3;
  --scale: 1;
}

/* Telugu needs its own face; Noto Sans Telugu tops out at 700. */
html[lang="te"] {
  --font-heading: "Noto Sans Telugu", "Archivo", system-ui, sans-serif;
  --font-body: "Noto Sans Telugu", "Archivo", system-ui, sans-serif;
  --weight-heading: 700;
}

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

html, body { margin: 0; height: 100%; overflow: hidden; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
}

button { font-family: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.heading { font-family: var(--font-heading); font-weight: var(--weight-heading); }

/* ── App shell ───────────────────────────────────────────────────────────── */

.app { height: 100vh; display: flex; flex-direction: column; }
.workspace { flex: 1; display: flex; min-height: 0; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 0 var(--space-6);
  min-height: 76px;
  flex-wrap: wrap;
  row-gap: 6px;
  border-bottom: 2px solid var(--color-text);
}

.brand { display: flex; align-items: baseline; gap: 10px; flex: none; white-space: nowrap; }
.brand-mark { width: 11px; height: 11px; background: var(--color-accent); display: block; }
.brand-name { font-size: 19px; letter-spacing: -0.02em; }
.brand-tag { font-size: 13px; color: var(--color-neutral-700); }

.langs {
  display: flex;
  flex: none;
  border-left: 2px solid var(--color-divider);
  padding-left: var(--space-3);
}
.lang {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-neutral-700);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.lang:hover { color: var(--color-text); }
.lang[aria-pressed="true"] { color: var(--color-text); border-bottom-color: var(--color-accent); }

.spacer { flex: 1; }

.counts { white-space: nowrap; text-align: right; line-height: 1.15; }
.counts-photos { display: block; font-size: 14px; font-weight: 600; }
.counts-paper {
  display: block;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}

.actions { display: flex; align-items: center; gap: var(--space-4); white-space: nowrap; }

/* Text button with an underline that turns red on hover. */
.action {
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 2px solid var(--color-text);
}
.action:hover { border-bottom-color: var(--color-accent); color: var(--color-accent-700); }
.action-quiet { color: var(--color-neutral-700); font-size: 14px; border-bottom-color: transparent; }

.print-btn {
  border: 0;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  min-height: 52px;
  padding: 9px 22px;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
}
.print-btn:hover { background: var(--color-accent-600); }
.print-btn:active { background: var(--color-accent-700); }
.print-btn-label { display: block; font-size: 18px; line-height: 1.1; }
.print-btn-key { display: block; font-size: 10px; letter-spacing: 0.1em; opacity: 0.85; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.sidebar {
  width: 318px;
  flex: none;
  border-right: 2px solid var(--color-divider);
  overflow-y: auto;
  padding: var(--space-4) var(--space-4) 56px;
}

.section + .section { border-top: 2px solid var(--color-divider); margin-top: var(--space-6); padding-top: var(--space-4); }
.section-num {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: 6px;
}
.section-title { display: block; font-size: 16px; line-height: 1.3; margin-bottom: 14px; }
.hint { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--color-neutral-700); }

/* Option buttons — orientation, per-page presets, fit mode.
   All share the "underline marks the active one" pattern. */
.options { display: flex; gap: 2px; margin-bottom: var(--space-2); }
.option {
  flex: 1;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--color-neutral-700);
  cursor: pointer;
  padding: 9px 2px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.option:hover { background: var(--color-neutral-200); }
.option[aria-pressed="true"] { color: var(--color-text); border-bottom-color: var(--color-accent); }
.option-label { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: 12.5px; line-height: 1; }

/* Miniature page diagram drawn with a CSS grid of filled cells. */
.option-icon {
  display: grid;
  gap: 1.5px;
  opacity: 0.5;
  width: 19px;
  height: 26px;
}
.option[aria-pressed="true"] .option-icon { opacity: 1; }
.option-icon span { background: currentColor; }
html[data-orientation="landscape"] .option-icon { width: 26px; height: 19px; }

/* Orientation icons are just a portrait/landscape rectangle. */
.orient-icon { border: 2.5px solid currentColor; opacity: 0.5; }
.option[aria-pressed="true"] .orient-icon { opacity: 1; }
.orient-portrait { width: 19px; height: 26px; }
.orient-landscape { width: 26px; height: 19px; }

/* Two-up choices with a caption (fill the box / whole photo). */
.choices { display: flex; gap: var(--space-4); margin-bottom: var(--space-4); }
.choice {
  flex: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0 0 7px;
  border-bottom: 3px solid transparent;
  color: var(--color-neutral-700);
  text-align: left;
}
.choice[aria-pressed="true"] { color: var(--color-text); border-bottom-color: var(--color-accent); }
.choice-title { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.choice-note { display: block; font-size: 10.5px; color: var(--color-neutral-700); }

/* Sliders. */
.slider { display: block; margin-bottom: var(--space-4); }
.slider:last-child { margin-bottom: 0; }
.slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.slider-label { font-size: 13.5px; font-weight: 600; }
.slider-value {
  font-variant-numeric: tabular-nums;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 800;
  font-size: 12.5px;
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  accent-color: var(--color-accent);
  width: 100%;
  height: 22px;
  background: transparent;
  display: block;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--color-neutral-400); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; margin-top: -7px;
  background: var(--color-accent);
}
input[type="range"]::-moz-range-track { height: 2px; background: var(--color-neutral-400); }
input[type="range"]::-moz-range-thumb { border: 0; width: 16px; height: 16px; background: var(--color-accent); }

/* Selected-photo panel. */
.sel-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: var(--space-4); }
.sel-thumb { flex: none; width: 58px; height: 58px; overflow: hidden; background: var(--color-neutral-300); }
.sel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sel-hint { min-width: 0; font-size: 12px; line-height: 1.4; color: var(--color-neutral-700); }
.sel-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.link {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0 0 4px;
  border-bottom: 2px solid var(--color-text);
  text-align: left;
  font-size: 14px;
  font-weight: 600;
}
.link:hover { border-bottom-color: var(--color-accent); color: var(--color-accent-700); }
.link-danger { border-bottom-color: var(--color-accent); color: var(--color-accent-700); }
.link-danger:hover { background: var(--color-accent-100); }
.empty-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--color-neutral-700); }

/* ── Stage (the paper preview) ───────────────────────────────────────────── */

.stage {
  flex: 1;
  min-width: 0;
  overflow: auto;
  background: var(--color-neutral-300);
  padding: 28px 24px 40px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}

/* Empty state doubles as a big click-to-pick target. */
.empty {
  width: 100%;
  max-width: 620px;
  margin-top: 8vh;
  cursor: pointer;
  background: var(--color-neutral-100);
  border-top: 3px solid var(--color-accent);
  padding: 40px 40px 44px;
}
.empty-title { display: block; font-size: 36px; line-height: 1.1; letter-spacing: -0.03em; }
.empty-body { font-size: 15.5px; line-height: 1.55; margin: 18px 0 0; max-width: 44ch; }
.empty-cta { font-size: 14px; line-height: 1.5; margin: 8px 0 0; color: var(--color-neutral-700); }

/* .fit reserves the scaled footprint; .sheets is the unscaled, printable tree. */
.fit { position: relative; }
.sheets {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(var(--scale));
  transform-origin: top left;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.sheet {
  width: var(--page-w);
  height: var(--page-h);
  flex: none;
  background: #fff;
  box-shadow: var(--shadow-lg);
  padding: var(--page-pad);
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  gap: var(--cell-gap);
}

.cell {
  position: relative;
  overflow: hidden;
  background: var(--color-neutral-200);
  border: var(--cell-border);
  outline-offset: -3px;
  cursor: grab;
  touch-action: none;
}
.cell.is-selected { outline: 3px solid var(--color-accent); }
.cell img {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  pointer-events: none;
}
.cell-remove {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  width: 34px;
  height: 34px;
  border: 0;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cell.is-selected .cell-remove { display: flex; }
.cell-remove:hover { background: var(--color-accent-700); }

/* Drag-and-drop overlay. */
.dropzone {
  display: none;
  position: absolute;
  inset: 0;
  border: 5px solid var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 13%, transparent);
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.dropzone.is-active { display: flex; }
.dropzone span { background: var(--color-accent); color: #fff; padding: 14px 24px; font-size: 25px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer {
  flex: none;
  border-top: 2px solid var(--color-divider);
  padding: 7px var(--space-6);
  display: flex;
  column-gap: var(--space-4);
  align-items: center;
  overflow: hidden;
  font-size: 12px;
  color: var(--color-neutral-700);
}
.footer b { color: var(--color-text); }
.footer > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.footer-saving { color: var(--color-text); }

/* Offline status, far right. Hidden until the service worker really has the
   app cached — see renderChrome() in js/app.js. */
.footer-offline { flex: none; color: var(--color-neutral-700); }
.footer-offline::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline-end: 6px;
  background: var(--color-accent);
}

.footer-update {
  flex: none;
  border: 0;
  padding: 3px 10px;
  background: var(--color-accent);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.footer-update:hover { background: var(--color-accent-700); }

.is-hidden { display: none !important; }

/* ── Print ───────────────────────────────────────────────────────────────── */
/* Everything chrome-related disappears; the sheets print at true mm size.
   @page (size + orientation) is injected by js/app.js. */

@media print {
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
  [data-print="ui"] { display: none !important; }
  .app, .workspace, .stage, .fit {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    position: static !important;
    border: 0 !important;
  }
  .sheets {
    position: static !important;
    transform: none !important;
    width: auto !important;
    gap: 0 !important;
    display: block !important;
  }
  .sheet {
    box-shadow: none !important;
    margin: 0 !important;
    outline: 0 !important;
    break-after: page;
    page-break-after: always;
  }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
  .cell { outline: 0 !important; }
  /* Nothing loaded, nothing to print — never send a blank sheet. */
  .fit.is-hidden { display: none !important; }
}