/* Jobshot design system.
   One accent, one radius scale, hairlines rather than boxes-in-boxes; dark mode is a token swap
   so nothing is styled twice. Field use in mind: large tap targets, tabular numerals for counts
   and times, and no reliance on colour alone (labels carry the meaning). */

:root {
  color-scheme: light dark;

  --bg: #f7f8f7;
  --surface: #ffffff;
  --surface-2: #f1f3f1;
  --line: #e2e5e2;
  --line-strong: #cbd0cb;
  --fg: #14181a;
  --fg-soft: #3d4548;
  --muted: #6b7376;
  --accent: #0f6b42;
  --accent-hover: #0c5936;
  --accent-fg: #ffffff;
  --accent-soft: #e6f2ea;
  --danger: #a4232b;
  --danger-soft: #fdecec;

  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 20, .06), 0 8px 24px -16px rgba(16, 24, 20, .28);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* iOS safe areas. base.html sets viewport-fit=cover, so the page paints edge to edge and the
     shell pads itself clear of the status bar, the home indicator and the landscape notch.
     env() is 0px wherever no inset exists, so desktop layout is untouched. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1113;
    --surface: #16191b;
    --surface-2: #1d2124;
    --line: #272c2f;
    --line-strong: #3a4145;
    --fg: #eef1f0;
    --fg-soft: #c7cfcd;
    --muted: #98a2a0;
    --accent: #35b273;
    --accent-hover: #46c584;
    --accent-fg: #06170f;
    --accent-soft: #16301f;
    --danger: #f2777f;
    --danger-soft: #2d1a1c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px -20px rgba(0, 0, 0, .8);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- shell ---------- */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  /* The bar paints behind the status bar; its own content clears it. */
  padding: max(var(--s3), var(--safe-top)) max(var(--s5), var(--safe-right))
           var(--s3) max(var(--s5), var(--safe-left));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; letter-spacing: -.01em;
  color: var(--fg); text-decoration: none; font-size: 1.05rem; }
.brand .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); display: inline-block; }
.bar nav { display: flex; align-items: center; gap: var(--s4); }
.bar nav a { color: var(--fg-soft); text-decoration: none; font-weight: 500; }
.bar nav a:hover { color: var(--fg); }

main { max-width: 1060px; margin: 0 auto;
  padding: var(--s6) max(var(--s5), var(--safe-right)) var(--s8) max(var(--s5), var(--safe-left)); }
main.narrow { max-width: 660px; }
footer {
  border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem;
  padding: var(--s5) max(var(--s5), var(--safe-right)) max(var(--s5), var(--safe-bottom))
           max(var(--s5), var(--safe-left));
  max-width: 1060px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center;
}
footer .foot-nav { display: flex; gap: var(--s4); }
footer .foot-nav a { color: var(--muted); text-decoration: none; }
footer .foot-nav a:hover { color: var(--fg); text-decoration: underline; }

/* ---------- type ---------- */
h1 { font-size: clamp(1.55rem, 1.1rem + 2vw, 2.15rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 var(--s3); }
h2 { font-size: 1.1rem; letter-spacing: -.01em; margin: var(--s6) 0 var(--s3); }
h3 { font-size: .95rem; margin: var(--s5) 0 var(--s2); }
p { margin: 0 0 var(--s3); }
.lead { font-size: 1.06rem; color: var(--fg-soft); max-width: 62ch; }
.muted, .mut { color: var(--muted); }
.small { font-size: .875rem; }
.mono { font-family: var(--mono); font-size: .9em; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.err { color: var(--danger); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

/* ---------- controls ---------- */
.btn {
  --btn-bg: var(--accent); --btn-fg: var(--accent-fg); --btn-line: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 42px; padding: 0 var(--s4);
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-line);
  border-radius: var(--radius); font: inherit; font-weight: 600; text-decoration: none;
  white-space: nowrap;                     /* a narrow table cell must not break "Open" into "Ope n" */
  cursor: pointer; transition: background .12s ease, transform .04s ease;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn.ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-line: var(--line-strong); }
.btn.ghost:hover { --btn-bg: var(--surface-2); }
.btn.danger { --btn-bg: transparent; --btn-fg: var(--danger); --btn-line: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn.danger:hover { --btn-bg: var(--danger-soft); }
.btn.sm { min-height: 34px; padding: 0 var(--s3); font-size: .9rem; }
.btn.block { width: 100%; }
.link { background: none; border: 0; padding: 0; color: var(--fg-soft); font: inherit;
  text-decoration: underline; text-decoration-color: var(--line-strong); cursor: pointer; }
.link:hover { color: var(--fg); }
.inline { display: inline; }

input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  width: 100%; min-height: 42px; padding: 8px 10px; font: inherit; color: var(--fg);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
input[type="file"] { padding: 7px 9px; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; margin-right: 10px; padding: 6px 12px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-2); color: var(--fg);
}
input[type="file"]::file-selector-button:hover { background: var(--line); }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
label { display: block; font-weight: 600; font-size: .9rem; color: var(--fg-soft); }
label > input, label > textarea, label > select { margin-top: 6px; font-weight: 400; color: var(--fg); }
.hint { font-weight: 400; color: var(--muted); font-size: .82rem; }

/* form layouts: narrow stacked forms read better than stretched grids */
.form-narrow { display: grid; gap: var(--s3); max-width: 620px; }
.form-narrow .btn { justify-self: start; }
.form-upload { display: grid; gap: var(--s3); grid-template-columns: minmax(200px, 1.3fr) minmax(160px, 1fr) auto; align-items: end; }
@media (max-width: 760px) { .form-upload { grid-template-columns: 1fr; } .form-upload .btn { justify-self: start; } }
.form-inline { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; max-width: 560px; }
.form-inline input[type="number"] { width: 110px; }
.form-inline label { flex: 0 0 auto; }

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s4); }
.card + .card { margin-top: var(--s4); }
.stack { display: grid; gap: var(--s3); }
.grid-form { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
.grid-form .span-all { grid-column: 1 / -1; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: var(--s4) 0; }
.spread { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; justify-content: space-between; }
.banner { border-radius: var(--radius); padding: var(--s3) var(--s4); border: 1px solid; margin: 0 0 var(--s4); }
.banner.error { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.banner.info { color: var(--fg-soft); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--fg-soft); font-size: .8rem; font-weight: 600; }
.badge.warn { color: #7a4a05; background: #fdf3e2; border-color: #f0dcbb; }
@media (prefers-color-scheme: dark) { .badge.warn { color: #f3c37a; background: #2c2317; border-color: #40331f; } }

/* ---------- table ---------- */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 700; padding: 0 var(--s3) var(--s2); border-bottom: 1px solid var(--line); }
table.table td { padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: middle;
  overflow-wrap: anywhere; }
table.table tr:last-child td { border-bottom: 0; }
table.table td.right, table.table th.right { text-align: right; }
table.table tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
table.table .job-name { font-weight: 600; color: var(--fg); text-decoration: none; }
table.table .job-name:hover { text-decoration: underline; }

/* ---------- gallery ---------- */
.gallery { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-top: var(--s4); }
.shot { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow); }
.shot button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
.shot figcaption { display: grid; gap: 2px; padding: var(--s2) var(--s3) var(--s3); font-size: .82rem; }
.shot time { color: var(--muted); font-variant-numeric: tabular-nums; }
.notice { background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s3) var(--s4); margin-top: var(--s4); font-size: .9rem; }
.shot .note { color: var(--fg-soft); overflow-wrap: anywhere; }

dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; }
dialog.lightbox::backdrop { background: rgba(8, 10, 9, .82); backdrop-filter: blur(2px); }
dialog.lightbox img { display: block; max-height: 84vh; max-width: 92vw; margin: 0 auto; border-radius: var(--radius); }
/* A 2 MB original over a phone connection takes seconds: without this the lightbox looks frozen
   (the operator's words) after a click. The old photo dims, a spinner turns, and the image fades in. */
dialog.lightbox img.loading { opacity: .28; }
dialog.lightbox .spinner { position: fixed; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%;
  animation: lightbox-spin .8s linear infinite; pointer-events: none; }
@keyframes lightbox-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { dialog.lightbox .spinner { animation-duration: 2s; } }
dialog.lightbox .meta { color: #e9eeec; text-align: center; padding: var(--s3); font-size: .9rem; }
dialog.lightbox .controls { display: flex; gap: var(--s3); justify-content: center; padding-bottom: var(--s4); }
dialog.lightbox .controls button { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius); min-height: 38px; padding: 0 var(--s4); font: inherit; cursor: pointer; }

/* ---------- landing ---------- */
.hero { display: grid; gap: var(--s6); grid-template-columns: 1.05fr .95fr; align-items: center; padding-top: var(--s5); }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3rem); }
.hero .price { font-size: 1.5rem; font-weight: 700; margin: var(--s4) 0 var(--s2); }
.hero .price small { font-weight: 500; font-size: .95rem; color: var(--muted); }
.hero .cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0 var(--s3); }
.shot-frame { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--surface); }
.shot-frame img { display: block; width: 100%; }
.features { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: var(--s6); }
.feature { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.feature h3 { margin: 0 0 6px; font-size: 1rem; }
.feature p { margin: 0; color: var(--fg-soft); font-size: .95rem; }
.compare { width: 100%; border-collapse: collapse; margin-top: var(--s4); font-size: .95rem; min-width: 430px; }
.compare th, .compare td { text-align: left; padding: var(--s3); border-bottom: 1px solid var(--line); }
.compare th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.compare td.us { font-weight: 700; }
.faq { margin-top: var(--s5); }
.split { display: grid; gap: var(--s6); grid-template-columns: minmax(200px, 300px) 1fr; align-items: center; }
.split .shot-frame { max-width: 300px; }
@media (max-width: 700px) { .split { grid-template-columns: 1fr; } .split .shot-frame { max-width: 260px; } }
.faq details { border-bottom: 1px solid var(--line); padding: var(--s3) 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { margin: var(--s2) 0 0; color: var(--fg-soft); }

/* ---------- misc ---------- */
.empty { border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); padding: var(--s6) var(--s4);
  text-align: center; color: var(--muted); background: var(--surface); }
.empty strong { display: block; color: var(--fg); margin-bottom: 6px; font-size: 1.02rem; }
.upload-progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: var(--s2); }
.upload-progress > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s ease; }
.share-head { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; }
.storage { display: inline-flex; gap: var(--s2); align-items: center; color: var(--muted); font-size: .85rem; }

@media (max-width: 560px) {
  main { padding: var(--s5) max(var(--s4), var(--safe-right)) var(--s7) max(var(--s4), var(--safe-left)); }
  .bar { padding: max(var(--s3), var(--safe-top)) max(var(--s4), var(--safe-right))
                  var(--s3) max(var(--s4), var(--safe-left)); }
  .hide-sm { display: none; }
  .btn.block-sm { width: 100%; }
}