/* transcribe web layer -- one hand-written stylesheet, no framework, no
   remote font (docs/architecture.md §7, TP-006/M2b §4.5). Mobile-first,
   360px design width, one breakpoint at 720px. */

:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --ink: #1c1e21;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-ink: #ffffff;
  --line: #d7dade;
  --err: #dc2626;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --card: #1c1f26;
    --ink: #e7e9ee;
    --muted: #9aa1ad;
    --accent: #5b8def;
    --accent-ink: #0b1020;
    --line: #2c313a;
    --err: #f28b82;
  }
}

* { box-sizing: border-box; }
/* The drop zone (below) sets `display` on several elements (.dropzone-
   actions, .dropzone-progress's sibling text, ...) that static/upload.js
   also toggles via the plain `hidden` attribute. Without this rule the
   author-stylesheet `display` declaration and the UA stylesheet's default
   `[hidden] { display: none }` tie on specificity, and the later one in
   the cascade (ours) wins -- silently defeating `hidden`. `!important`
   here is deliberate and the only place in this file that uses it. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  line-height: 1.45;
  min-height: 100vh;
}

.site-header, .site-footer {
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Tap targets >= 40px (TP-017 W3 packet, Part B -- QA TP-011 3.7): the
   brand link and the header nav link both measured well under 40px tall
   (text-only anchors with no box). Scoped to the header nav (and the
   landing's signed-out equivalent of it, .auth-state a, below) on
   purpose -- an ordinary inline link inside a paragraph must not become a
   40px block. */
.site-header .brand,
.site-header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 2px 0;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.site-header nav a { font-weight: 400; color: var(--accent); }
.site-footer { color: var(--muted); font-size: .85rem; }

/* The landing's signed-out "Sign in / Увійти" link plays the same
   navigational role as .site-header nav's "My jobs" link does when
   signed in (it is the only way into /jobs before authenticating) -- same
   40px tap-target fix, same narrow scope: only this one link, not every
   paragraph link on the page. */
.auth-state .auth-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

main {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px 24px;
}

h1 { font-size: 1.3rem; margin: 8px 0 16px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.hero .value-prop { font-size: 1.1rem; font-weight: 600; margin: 4px 0; }
.hero .bullets { margin: 0 0 14px; padding-left: 20px; color: var(--muted); }

.mode-switch { display: flex; gap: 8px; margin-bottom: 12px; }
.mode-btn {
  flex: 1 1 auto;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
}
.mode-btn.active { border-color: var(--accent); color: var(--accent); }

input[type="file"], input[type="url"], select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 1rem;
  font-family: inherit;
  margin-bottom: 8px;
}

button, .linkbtn {
  -webkit-tap-highlight-color: transparent;
  display: inline-block;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
button:disabled { opacity: .55; cursor: not-allowed; }

.btnrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.btnrow .linkbtn { flex: 1 1 auto; }

.message { min-height: 1.2em; color: var(--muted); font-size: .9rem; }
.hint { color: var(--muted); font-size: .85rem; margin: -4px 0 8px; }

.tab-bar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tab-btn {
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.tab-btn.active { border-color: var(--accent); color: var(--accent); }

/* TP-017 W3 packet, Part B -- QA TP-011 3.7: at 390px wide a long
   source_name (a full URL, one unbreakable token) forced the table wider
   than the viewport (documentElement.scrollWidth 415 vs clientWidth 390).
   table-layout: fixed caps every column at its declared share of the
   table's own 100% width regardless of content, and overflow-wrap: anywhere
   lets a too-long token itself break instead of stretching the cell. */
.jobs-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.jobs-table th, .jobs-table td {
  text-align: left;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
  overflow-wrap: anywhere;
}
.jobs-table th:nth-child(1), .jobs-table td:nth-child(1) { width: 24%; }
.jobs-table th:nth-child(2), .jobs-table td:nth-child(2) { width: 40%; }
.jobs-table th:nth-child(3), .jobs-table td:nth-child(3) { width: 19%; }
/* The last column holds one short link ("Open"). Measured at 390px, 12%
   was narrow enough to wrap it to "Ope/n" -- it fits the viewport, which is
   what the ruling asks for, but a broken word is not a finished page. A
   slightly wider share plus nowrap keeps it on one line at 390px, and
   `overflow-wrap: anywhere` above still applies to the cells that need it
   (a long source URL). */
.jobs-table th:nth-child(4), .jobs-table td:nth-child(4) {
  width: 17%;
  white-space: nowrap;
  overflow-wrap: normal;
}

/* The per-row "Open" link is the primary actionable control on /jobs and
   has to clear the same 40px tap-target minimum as the header nav
   (TP-017b finding 2: it measured 38x18px). inline-flex + min-height/width
   grows the hit area without changing the column layout. */
.jobs-table .row-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 40px;
}

.empty-state { color: var(--muted); }
.error { color: var(--err); }

/* «Коротко»/"Brief" + «Структура»/"Outline" cards (docs/spec/modules/
   summary.md, TP-026 web milestone A) -- class-based and minimal on
   purpose, a full redesign comes later. */
#summary { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
#summary h2 { font-size: 1.05rem; margin: 0 0 4px; }
.provenance-label { font-size: .8rem; color: var(--muted); margin: 0 0 8px; }
.provenance-list { margin: 0; padding: 0; list-style: none; }
.provenance-list li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.provenance-list li:last-child { border-bottom: none; }
.provenance-mark { flex: 0 0 auto; color: var(--accent); }
.outline-link { color: var(--accent); text-decoration: none; }
.outline-link:hover, .outline-link:focus { text-decoration: underline; }
.hint.locked { color: var(--muted); }

.transcript-view { list-style: none; margin: 12px 0 0; padding: 0; }
.transcript-view li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.transcript-view li:last-child { border-bottom: none; }
/* Briefly highlights the segment an Outline deep link jumped to. */
.transcript-view li:target { background: rgba(37, 99, 235, .12); border-radius: 6px; padding-left: 6px; }
.ts-label { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 6px; }

/* Drop zone (TP-026 web milestone A, design note §3; DECISIONS "Landing:
   drag-and-drop zone") -- class-based and minimal on purpose, the owner's
   redesign restyles this later; static/upload.js is the only thing that
   ever writes the data-state attribute, this file only reads it. */
.dropzone {
  display: block;
  position: relative;
  border: 2px dashed var(--line);
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 8px;
}
.dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropzone[data-state="dragover"] { border-color: var(--accent); background: rgba(37, 99, 235, .06); }
.dropzone[data-state="error"] { border-color: var(--err); }
.dropzone-text { display: block; color: var(--muted); }
/* Visually hidden but still present in the DOM -- tabindex="-1" on the
   input itself (landing.html) keeps the actual keyboard focus stop on the
   zone, which static/upload.js wires Enter/Space to. */
.dropzone-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.dropzone-chosen { font-weight: 600; margin: 8px 0 0; word-break: break-word; }
.dropzone-progress { width: 100%; margin-top: 12px; }
.dropzone-percent { color: var(--muted); font-size: .85rem; margin: 4px 0 0; }
.dropzone-actions { display: flex; gap: 8px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }

/* Same visually-hidden technique as .dropzone-input, for the aria-live
   status line -- it must be readable by assistive tech but never visible. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Quota-gated funnel modal (design note §2, docs/spec/product.md §4.4). */
.funnel-modal {
  border: none;
  border-radius: 12px;
  padding: 20px;
  max-width: 90vw;
  width: 340px;
  background: var(--card);
  color: var(--ink);
}
.funnel-modal::backdrop { background: rgba(0, 0, 0, .5); }
.funnel-modal h2 { margin: 0 0 8px; font-size: 1.1rem; }
.funnel-modal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

@media (min-width: 720px) {
  .site-header, .site-footer, main { max-width: 720px; }
}