/* ---------------------------------------------------
   QuikLab — darkroom palette & type tokens
   Concept: a photo lab's contact-sheet workflow. The
   accent is a safelight red (the light a darkroom can
   use without exposing film), not a decorative brand
   color — everything else stays quiet around it.
--------------------------------------------------- */
:root{
  --bg:#EFEAE0;
  --panel:#FBF9F4;
  --ink:#211D19;
  --ink-muted:#6E655A;
  --accent:#C8331F;
  --accent-ink:#8F2415;
  --accent-soft:#F4DAD3;
  --good:#3D6B4C;
  --good-soft:#DEE8DF;
  --border:#DCD4C4;
  --track-bg:#E2D9C6;
  --mono-bg:#E7E0D0;
  --rail-bg:#E4DDCA;
  --rail-ink:#211D19;
  --rail-muted:#6E655A;
  --rail-border:#CFC5AC;
  --rail-field-bg:#FBF9F4;
  --btn-on-accent:#FBF3EF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121011; --panel:#1B1817; --ink:#EFE9DE; --ink-muted:#9C9285;
    --accent:#E4432B; --accent-ink:#FF7A5C; --accent-soft:rgba(228,67,43,0.16);
    --good:#7FBF9E; --good-soft:rgba(127,191,158,0.12);
    --border:#2E2A26; --track-bg:#26221E; --mono-bg:#1D1A17;
    --rail-bg:#0B0A09; --rail-ink:#EFE9DE; --rail-muted:#867C6E; --rail-border:#221F1B;
    --rail-field-bg:#17140F; --btn-on-accent:#FBF3EF;
  }
}
:root[data-theme="dark"]{
  --bg:#121011; --panel:#1B1817; --ink:#EFE9DE; --ink-muted:#9C9285;
  --accent:#E4432B; --accent-ink:#FF7A5C; --accent-soft:rgba(228,67,43,0.16);
  --good:#7FBF9E; --good-soft:rgba(127,191,158,0.12);
  --border:#2E2A26; --track-bg:#26221E; --mono-bg:#1D1A17;
  --rail-bg:#0B0A09; --rail-ink:#EFE9DE; --rail-muted:#867C6E; --rail-border:#221F1B;
  --rail-field-bg:#17140F; --btn-on-accent:#FBF3EF;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ color-scheme:light dark; }
:root[data-theme="light"]{ color-scheme:light; }
:root[data-theme="dark"]{ color-scheme:dark; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  line-height:1.55; font-size:14px;
  transition: background-color .25s ease, color .25s ease;
}
h1,h2{ font-family:"Fraunces", Georgia, serif; font-weight:600; font-optical-sizing:auto; text-wrap:balance; margin:0; }
.mono{ font-family:"IBM Plex Mono", ui-monospace, monospace; }

::selection{ background:var(--accent); color:var(--btn-on-accent); }

button:focus-visible, a:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;
}

/* ---------------------------------------------------
   Icons
--------------------------------------------------- */
.icon{ width:18px; height:18px; flex-shrink:0; }
.icon-sm{ width:14px; height:14px; }

/* ---------------------------------------------------
   Page shell: ad rail | app | ad rail
--------------------------------------------------- */
/* Ad rails claim a real track once the viewport has enough width to
   spare beyond the app's own comfortable width; container-query-free
   fallback (a fixed threshold) since Grid alone can't ask "is there
   180px+ of slack on each side" — sized off the app's actual max
   width (880px) plus the smallest usable ad slot (180px each side). */
.page{
  display:grid;
  grid-template-columns: minmax(0, 1fr);
  min-height:100vh;
}
@media (min-width:1240px){
  .page{ grid-template-columns: minmax(160px, 1fr) minmax(0, 1100px) minmax(160px, 1fr); }
}

.ad-rail{
  display:none;
  align-items:flex-start; justify-content:center;
  padding:clamp(16px, 4vw, 40px) 20px;
}
@media (min-width:1240px){
  .ad-rail{ display:flex; }
}
/* Standard 300x600 skyscraper proportions, but fluid — scales down
   with its track instead of forcing horizontal scroll or a hard
   breakpoint cutover. */
.ad-slot{
  width:100%; max-width:300px; aspect-ratio:1 / 2; position:relative;
  background:
    radial-gradient(circle at 10px 10px, var(--bg) 3px, transparent 3.5px) 0 0 / 20px 20px repeat-x,
    radial-gradient(circle at 10px 10px, var(--bg) 3px, transparent 3.5px) 0 100% / 20px 20px repeat-x,
    var(--mono-bg);
  border:1px solid var(--border); border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  transition: background-color .25s ease, border-color .25s ease;
}

/* ---------------------------------------------------
   Layout — the rail takes a comfortable reading width and the
   sheet claims whatever remains, so the split adapts continuously
   instead of jumping between two fixed states.
--------------------------------------------------- */
.darkroom{
  display:grid; grid-template-columns: minmax(260px, 22vw) minmax(0, 1fr);
  min-height:100vh;
  box-shadow: 0 0 0 1px var(--border);
}
@media (max-width:820px){
  .darkroom{ grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------
   Left rail
--------------------------------------------------- */
.rail{
  background:var(--rail-bg); color:var(--rail-ink);
  position:relative; border-right:1px solid var(--rail-border);
  transition: background-color .25s ease, border-color .25s ease;
}
/* A strip of 35mm sprocket holes along the rail's outer edge —
   the same perforation pitch as real film stock, not a
   decorative gradient guessed at arbitrary spacing. */
.rail-sprockets{
  position:absolute; right:0; top:0; bottom:0; width:12px;
  background-image: radial-gradient(circle at 6px 9px, var(--rail-bg) 2.6px, var(--accent) 2.7px 3.1px, transparent 3.2px);
  background-size: 12px 18px;
  opacity:.5;
}
@media (max-width:820px){ .rail-sprockets{ display:none; } }

.rail-inner{ padding:28px 30px 22px 26px; display:flex; flex-direction:column; gap:26px; min-height:100%; }
@media (max-width:820px){ .rail-inner{ padding:22px; } }

.brand{ display:flex; align-items:flex-start; gap:12px; }
.brand-copy{ display:flex; flex-direction:column; gap:4px; flex:1; }
.theme-toggle{
  flex-shrink:0; width:34px; height:34px; border-radius:8px;
  border:1px solid var(--rail-border); background:transparent; color:var(--rail-ink);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.theme-toggle .icon{ width:17px; height:17px; transition:transform .3s ease; }
.theme-toggle:hover{ background:color-mix(in srgb, var(--rail-ink) 8%, transparent); border-color:var(--accent); }
.theme-toggle:active{ transform:scale(.92); }
.theme-toggle:active .icon{ transform:rotate(-14deg); }
.brand-mark{
  font-family:"IBM Plex Mono",monospace; font-weight:700; font-size:13px;
  background:var(--accent); color:var(--btn-on-accent); padding:5px 8px; border-radius:3px; letter-spacing:.02em;
  align-self:flex-start; position:relative; top:3px;
}
.brand h1{ font-size:22px; color:var(--rail-ink); font-weight:600; display:flex; flex-direction:column; gap:4px; }
.brand .tag{
  font-family:"IBM Plex Mono", monospace; font-size:12.5px;
  font-weight:400; color:var(--rail-muted); max-width:32ch;
}

.drop{
  border:1px dashed var(--rail-border); border-radius:10px; padding:22px 16px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center; transition:border-color .15s, background .15s;
}
.drop.drag{ border-color:var(--accent); background:rgba(200,51,31,0.1); transform:scale(1.015); }
.drop-icon{ width:26px; height:26px; color:var(--rail-muted); transition:color .15s ease, transform .15s ease; }
.drop.drag .drop-icon{ color:var(--accent); transform:translateY(-2px); }
.drop-label{ font-size:14.5px; color:var(--rail-ink); font-weight:500; }
.drop-sub{ font-size:13px; color:var(--rail-muted); }
.drop-note{ font-size:11.5px; color:var(--rail-muted); }
.link-btn{
  background:none; border:none; padding:0; color:var(--accent); font:inherit;
  text-decoration:underline; cursor:pointer;
}

.controls{ display:flex; flex-direction:column; gap:16px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--rail-muted); display:flex; justify-content:space-between; }
.field-row{ display:flex; gap:10px; }
.field-row .field{ flex:1; }
#targetField .field-row input{ flex:2; }
#targetField .field-row select{ flex:1; }

input[type="number"], select{
  background:var(--rail-field-bg); border:1px solid var(--rail-border); color:var(--rail-ink);
  border-radius:6px; padding:8px 10px; font-family:inherit; font-size:13.5px; width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input[type="number"]:focus-visible, select:focus-visible{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
select option{ background:var(--rail-field-bg); color:var(--rail-ink); }
input[type="range"]{
  -webkit-appearance:none; width:100%; height:4px; background:var(--rail-border); border-radius:2px; outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; border-radius:50%; background:var(--accent);
  border:2px solid var(--rail-field-bg); cursor:pointer; transition:transform .1s ease;
}
input[type="range"]::-webkit-slider-thumb:active{ transform:scale(1.15); }
input[type="range"]::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; background:var(--accent); border:2px solid var(--rail-field-bg); cursor:pointer;
}

.btn-primary, .btn-ghost, .btn-text{
  font-family:"IBM Plex Mono", monospace; font-weight:600; font-size:14px; cursor:pointer;
  border-radius:7px; padding:11px 16px; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:filter .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, opacity .15s ease;
}
.btn-primary{ background:var(--accent); color:var(--btn-on-accent); border:none; }
.btn-primary:disabled{ opacity:.4; cursor:not-allowed; }
.btn-primary:not(:disabled):hover{ filter:brightness(1.1); }
.btn-primary:not(:disabled):active, .btn-ghost:not(:disabled):active{ transform:scale(.98); }
.count-badge{
  background:rgba(0,0,0,.28); color:var(--btn-on-accent); font-family:"IBM Plex Mono",monospace;
  font-size:12px; padding:1px 7px; border-radius:99px;
}
.btn-ghost{ background:transparent; color:var(--rail-ink); border:1px solid var(--rail-border); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-text{ background:none; border:none; color:var(--rail-muted); text-decoration:underline; padding:4px; }
.btn-text:hover{ color:var(--rail-ink); }

.rail-foot{
  margin-top:auto; padding-top:18px; border-top:1px solid var(--rail-border);
  display:flex; flex-direction:column; gap:10px;
}
.rail-foot p{ font-size:11.5px; color:var(--rail-muted); line-height:1.5; }

/* ---------------------------------------------------
   Main: sheet — a faint grid stands in for a light table,
   the surface a contact sheet actually gets reviewed on.
--------------------------------------------------- */
.sheet{
  padding:30px 34px 60px; min-width:0;
  display:flex; flex-direction:column; gap:22px;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
  transition:background-color .25s ease;
}
:root[data-theme="dark"] .sheet{ background-image:none; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .sheet{ background-image:none; } }
@media (max-width:820px){ .sheet{ padding:22px 18px 50px; } }

.sheet-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.sheet-head h2{ font-size:24px; }
.totals{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-muted); flex-wrap:wrap; }
.totals .arrow{ color:var(--ink-muted); }
.save-chip{
  background:var(--good-soft); color:var(--good); font-family:"IBM Plex Mono",monospace;
  font-size:12.5px; font-weight:600; padding:3px 9px; border-radius:99px;
}

.frames{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:18px;
}

.empty-state{
  grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:60px 20px; color:var(--ink-muted); text-align:center;
}
.empty-icon{ width:48px; height:48px; opacity:.35; }
.empty-state p{ max-width:32ch; font-size:14px; }

@keyframes frame-in{
  from{ opacity:0; transform:translateY(6px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.frame{
  background:var(--panel); border:1px solid var(--border); border-radius:6px;
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow: 0 1px 0 var(--border);
  animation: frame-in .25s ease both;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .15s ease;
}
.frame:hover{ box-shadow: 0 4px 14px rgba(0,0,0,.08); }
@media (prefers-reduced-motion: reduce){
  .frame{ animation:none; }
}
.frame-strip{
  height:8px;
  background-image: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 9px);
  opacity:.18;
}
.frame-shot{
  aspect-ratio:4/3; background:var(--mono-bg); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.frame-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.frame-num{
  position:absolute; top:0; left:0; font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:700;
  background:#1a1815; color:var(--accent); padding:3px 8px 3px 7px; border-radius:0 0 5px 0;
  letter-spacing:.03em;
}
.frame-status{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35); color:#fff; font-size:12px; font-family:"IBM Plex Mono",monospace;
}
.frame-body{ padding:12px 13px 14px; display:flex; flex-direction:column; gap:8px; }
.frame-name{ font-size:12.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.frame-sizes{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-muted); flex-wrap:wrap; }
.frame-sizes .after{ color:var(--good); font-weight:600; }
.frame-sizes .arrow{ opacity:.5; }
.frame-bar{ height:5px; border-radius:3px; background:var(--track-bg); overflow:hidden; }
.frame-bar > span{ display:block; height:100%; background:var(--good); transition:width .4s ease; }
.frame-actions{ display:flex; justify-content:space-between; align-items:center; }
.frame-save{ font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--good); font-weight:600; }
.frame-dl{
  font-size:12px; font-weight:600; color:var(--accent-ink); background:var(--accent-soft);
  border:none; border-radius:5px; padding:5px 10px; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
  transition:filter .15s ease, opacity .15s ease, transform .1s ease;
}
.frame-dl:hover{ filter:brightness(.97); }
.frame-dl:active{ transform:scale(.96); }
.frame-dl:disabled{ opacity:.4; cursor:not-allowed; }