/* pnk viewer — plain CSS, no framework, no runtime fetches. */

:root {
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --accent: #d0403c;      /* pnk */
  --surface: #f5f5f7;
  --card: #ffffff;
  --line: #d2d2d7;
  font-size: 15px;
  color-scheme: light dark;
}

/* Dark chrome — the app shell follows the OS; document canvases stay paper
   (.canvas-frame/.canvas-inner/.sheet-* keep their explicit whites). */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ececf0;
    --muted: #9a9aa2;
    --surface: #1c1c1f;
    --card: #28282c;
    --line: #414147;
  }
  #drop-target.dragover { background: #3a2523; }
  #drag-overlay { background: rgba(28, 28, 31, .82); }
  /* document content areas render on paper regardless of OS theme
     (body-prefixed: this block sits above the base rules, and media queries
     don't add specificity — source order would otherwise undo these) */
  body .sheet-area, body .pages-flow, body .notes-panel, body .error-card { color: #1d1d1f; }
  body .sheet-area, body .pages-flow { background: #ffffff; border-color: #d2d2d7; }
  .drag-overlay-card { background: #28282c; }
  #parse-status { background: #ececf0; color: #1d1d1f; }
}

* { box-sizing: border-box; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.spacer { flex: 1; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--surface);
}
.mono, #brand, .fmt-chip, #doc-filename, #doc-meta, .badge {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

#app { max-width: 1160px; margin: 0 auto; padding: 10px 16px 16px; }

/* ---- top nav ------------------------------------------------------------- */

#topnav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 14px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
#brand {
  font-size: 15px; font-weight: 700; letter-spacing: .5px;
  color: var(--ink); text-decoration: none;
}
.brand-tld { color: var(--accent); font-weight: 700; }
#doc-filename {
  font-size: 12px; color: var(--ink);
  max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#doc-meta { font-size: 11.5px; }
@media (max-width: 860px) { #doc-meta { display: none; } }
#topnav button {
  padding: 3px 12px; font-size: 12px; border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

#gh-link {
  color: var(--muted); display: inline-flex; align-items: center;
  padding: 3px 6px; border-radius: 6px;
}
#gh-link:hover { color: var(--ink); background: var(--card); }

/* subtle warnings indicator + dropdown */
#warnings-dd { position: relative; }
#warnings-dd summary {
  list-style: none; cursor: pointer; user-select: none;
  color: #9a7b18; font-size: 12px; padding: 2px 8px; border-radius: 6px;
}
#warnings-dd summary::-webkit-details-marker { display: none; }
#warnings-dd summary:hover, #warnings-dd[open] summary { background: rgba(200, 160, 30, .12); }
#warnings-dd .warn-mark { font-size: 9px; vertical-align: 1px; }
#warnings-list {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: min(560px, 86vw); max-height: 55vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.14);
  padding: 14px 18px 16px; font-size: 12.5px;
}
#warnings-list .chips { padding: 0 0 10px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
#warnings-list .warning-row { padding: 5px 0; }

/* ---- landing / drop zone ------------------------------------------------ */

#drop-zone { padding: 9vh 0; }
#drop-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 36px 44px;
  max-width: 560px; margin: 0 auto;
  text-align: center;
}
#drop-card h1 {
  margin: 0; font-size: 34px; letter-spacing: .5px; color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
#drop-card .tagline { margin: 10px 0 18px; font-size: 14px; color: var(--muted); }
#drop-card .tagline strong { color: var(--ink); }

.fmt-chips { display: flex; justify-content: center; gap: 8px; margin: 0 0 20px; }
.fmt-chip {
  border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 10px; font-size: 12px; background: var(--surface);
  display: inline-flex; align-items: center; gap: 6px;
}
.fmt-chip i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.fmt-pages i   { background: #e8883a; }
.fmt-numbers i { background: #35a651; }
.fmt-keynote i { background: #2f8bde; }

#drop-target {
  border: 2px dashed var(--line);
  border-radius: 12px;
  padding: 28px 20px;
  transition: border-color .15s, background .15s;
  color: var(--muted);
}
#pick-btn {
  margin-top: 12px;
  background: var(--accent); color: #fff; border-color: var(--accent);
  font-weight: 600;
}
#pick-btn:hover { background: #b73632; border-color: #b73632; }
#drop-target.dragover { border-color: var(--accent); background: #fdf1f0; }
#drop-target code { background: var(--surface); padding: 1px 5px; border-radius: 4px; }

button {
  font: inherit;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
}
button:hover { border-color: var(--muted); }

/* ---- whole-window drag overlay + parse toast ----------------------------- */

#drag-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245, 245, 247, .82);
  backdrop-filter: blur(3px);
  pointer-events: none;          /* drops land on window, not this layer */
}
.drag-overlay-card {
  border: 3px dashed var(--accent);
  border-radius: 20px;
  padding: 48px 72px;
  font-size: 28px; font-weight: 700; color: var(--accent);
  text-align: center; background: var(--card);
  box-shadow: 0 8px 40px rgba(0,0,0,.12);
}
.drag-overlay-sub { font-size: 14px; font-weight: 400; color: var(--muted); }
.drag-overlay-sub code { background: var(--surface); padding: 1px 5px; border-radius: 4px; }

#parse-status {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 1001;
  background: var(--ink); color: #fff;
  border-radius: 999px; padding: 8px 20px; font-size: 13px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

/* ---- envelope bits ------------------------------------------------------- */

/* App badge: quiet colored text chip, not a shouty pill. */
.badge {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: .5px;
  color: var(--muted);
}
.badge[data-app="pages"]   { color: #b06a20; border-color: #e0b98c; }
.badge[data-app="numbers"] { color: #2c7d43; border-color: #a3d4b1; }
.badge[data-app="keynote"] { color: #2569ab; border-color: #a7cced; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.chips .chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
}
.warning-row { display: flex; gap: 10px; padding: 3px 0; border-top: 1px solid var(--surface); }
.warning-row code { color: var(--muted); flex: 0 0 160px; }
.warning-row .path { color: var(--muted); font-style: italic; }

/* ---- JSON model view ------------------------------------------------------ */

#topnav button.active { background: var(--ink); color: var(--card); border-color: var(--ink); }
#json-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 2px; font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
#json-toolbar button {
  padding: 3px 12px; font-size: 12px; border-radius: 6px;
  font-family: inherit;
}
#json-pre {
  margin: 0; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.5;
  overflow-x: auto; white-space: pre;
}
.j-key { color: #8250df; }
.j-str { color: #0a7d4d; }
.j-num { color: #1a6ec0; }
.j-kw  { color: var(--accent); }
@media (prefers-color-scheme: dark) {
  .j-key { color: #c197ff; }
  .j-str { color: #5fd39a; }
  .j-num { color: #6cb4f5; }
}

/* ---- footer --------------------------------------------------------------- */

#app-footer {
  margin: 40px 0 8px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--muted); text-align: center;
}
#app-footer p { margin: 4px 0; }
#app-footer a { color: var(--muted); }
#legal { margin-top: 2px; }
#legal summary {
  cursor: pointer; user-select: none; display: inline-block; list-style: none;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
#legal summary::-webkit-details-marker { display: none; }
#legal summary:hover { color: var(--ink); }
#legal p { max-width: 620px; margin: 6px auto; }

/* ---- error card ---------------------------------------------------------- */

.error-card {
  background: #fff6f5;
  border: 1px solid #f2c4c0;
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 24px 0;
}
.error-card h2 { margin: 0 0 8px; color: var(--accent); font-size: 18px; }
.error-card .error-detail { margin: 8px 0 0; font-size: 13px; color: var(--muted); word-break: break-word; }

/* ---- canvases (Keynote slides / Pages layout pages) ---------------------- */

.canvas-outer { margin: 18px 0; }
.canvas-frame {           /* scaled wrapper: aspect kept via padding trick below */
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.canvas-inner { position: absolute; top: 0; left: 0; transform-origin: top left; background: #fff; }
.canvas-drawable { position: absolute; }
.canvas-drawable > * { width: 100%; height: 100%; }
.canvas-caption { font-size: 12px; color: var(--muted); margin-top: 4px; }

.drawable-text { overflow: hidden; display: flex; }
.drawable-text-inner { width: 100%; }

.media-missing {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line); color: var(--muted); font-size: 11px;
  text-align: center; padding: 4px; background: var(--surface);
}
.unknown-drawable {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed #e0b0ae; color: #9c5350; font-size: 11px;
  text-align: center; padding: 4px; background: #fdf7f6;
}

/* ---- Keynote -------------------------------------------------------------- */

#keynote-view { display: flex; gap: 18px; align-items: flex-start; }
.slide-list {
  flex: 0 0 190px; overflow-y: auto;
  position: sticky; top: 52px; max-height: calc(100vh - 66px);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px;
}
.slide-list-item {
  border-radius: 8px; padding: 8px; cursor: pointer; border: 2px solid transparent;
  font-size: 13px;
}
.slide-list-item:hover { background: var(--surface); }
.slide-list-item.active { border-color: var(--accent); }
.slide-list-item .canvas-frame { position: relative; }
.slide-list-item .label { display: block; margin-top: 4px; color: var(--muted); }
/* Continuous deck flow: every slide stacked, Pages-style. */
.slides-scroll { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.slide-stage { min-width: 0; margin-bottom: 14px; }
.slide-stage .canvas-frame { border-radius: 3px; }
/* Compact presenter-notes strip: rendered only when a slide HAS notes.
   Notes storages carry the editor's 18pt+ styles — normalize the strip's
   typography (size/leading) while bold/italic/color survive. */
.notes-panel {
  background: #fffbe8; border: 1px solid #efe3b0; border-radius: 8px;
  padding: 6px 12px 8px; margin-top: 8px; font-size: 13px; line-height: 1.45;
  max-height: 150px; overflow-y: auto; color: #1d1d1f;
}
.notes-panel h3 {
  margin: 0 0 4px; font-size: 10px; text-transform: uppercase;
  color: #8a7b3a; letter-spacing: 1px;
}
.notes-panel .styled-text p { margin: 2px 0; font-size: inherit !important; line-height: inherit !important; }
.notes-panel .styled-text span { font-size: inherit !important; }
.slide-number {
  position: absolute; right: 6px; bottom: 4px; font-size: 11px;
  color: var(--muted); background: rgba(255,255,255,.7);
  padding: 0 5px; border-radius: 4px; pointer-events: none;
}

/* ---- Numbers --------------------------------------------------------------- */

.sheet-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; }
.sheet-tab {
  border-radius: 8px 8px 0 0; border-bottom: 3px solid transparent; padding: 6px 16px;
}
.sheet-tab.active { border-bottom-color: var(--accent); font-weight: 600; background: var(--card); }

.sheet-area { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px; overflow: auto; }
.sheet-canvas { position: relative; }
table.sheet-table { border-collapse: collapse; font-size: 13px; margin: 0 0 18px; }
table.sheet-table td, table.sheet-table th {
  border: 1px solid #e3e3e8;
  padding: 4px 8px;
  min-width: 42px;
  empty-cells: show;
}
table.sheet-table th { font-weight: 700; background: #ececf1; text-align: left; }
table.sheet-table tfoot td { font-style: italic; background: #f6f6f9; }
table.sheet-table td.cell-error { color: #b03030; font-style: italic; }
.table-caption { font-size: 12px; color: var(--muted); margin-bottom: 4px; }

/* ---- Pages ------------------------------------------------------------------ */

.pages-flow {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 40px 56px; max-width: 820px; margin: 18px auto; line-height: 1.45;
}
.pages-flow h1, .pages-flow h2, .pages-flow h3,
.pages-flow h4, .pages-flow h5, .pages-flow h6 { margin: 0.6em 0 0.3em; }
.pages-flow p { margin: 0.4em 0; }
.footnotes-section {
  border-top: 1px solid var(--line); margin-top: 24px; padding-top: 10px;
  font-size: 12.5px; color: #3c3c43;
}
.footnote { margin: 3px 0; }
.footnote .mark { font-weight: 600; margin-right: 6px; }
.pages-page + .pages-page { margin-top: 22px; }
/* ---- list markers ---------------------------------------------------------- */

.list-item { display: flex; align-items: baseline; }
.list-item > p, .list-item > h1, .list-item > h2, .list-item > h3,
.list-item > h4, .list-item > h5, .list-item > h6 { flex: 1; }
.list-marker { flex: 0 0 auto; white-space: pre; }

/* === pages/text (agent P) === */
/* Word-processing pagination: .pages-print is the printable area inside a
   page frame (positioned at the document margins). display:flow-root keeps
   paragraph margins from collapsing out, so offscreen measurement and the
   final page agree. Tight defaults: Apple has no implicit paragraph margins;
   spacing comes from the paragraph styles. */
.pages-print { display: flow-root; color: #1d1d1f; line-height: 1.2; font-size: 11px; }
.pages-print p { margin: 0; }
.pages-print h1, .pages-print h2, .pages-print h3,
.pages-print h4, .pages-print h5, .pages-print h6 { margin: 0; }
.pages-wp-page { margin: 18px auto; max-width: 720px; }

/* === keynote/drawables (agent K) === */
/* A shape's text layer must overlay its SVG, not flow below it: both children
   get 100%x100% from `.canvas-drawable > *`, so the second (text) block was
   pushed a full shape-height down. Pin it over the geometry instead. */
.canvas-drawable > .drawable-text { position: absolute; inset: 0; }
/* tabs + preserved spaces inside the printable area: pre-wrap keeps TAB and
   runs of spaces visible (Apple preserves both); tab-size approximates the
   36pt default tab interval (overridden per-paragraph from defaultTabStopPt) */
.pages-print p, .pages-print h1, .pages-print h2, .pages-print h3,
.pages-print h4, .pages-print h5, .pages-print h6,
.pages-print .list-item { white-space: pre-wrap; tab-size: 36px; }

/* === numbers/tables (agent N) === */
/* Numbers clips cell content at the cell boundary — text never spills into
   a neighbor cell (Apple renders template placeholder keys like
   "S_LOCALIZABLE_Sunday" clipped to "S_L" in narrow columns; we match). */
table.sheet-table td, table.sheet-table th { overflow: hidden; }
/* Exact stored column widths (fixed layout): the 42px readability guard
   would inflate genuinely narrow columns (mini-calendar day columns are
   ~15pt in Apple's templates). */
table.sheet-table.exact-cols td, table.sheet-table.exact-cols th { min-width: 0; }
/* headers/footers inside word-processing page frames: 3 column storages
   (left/center/right), absolutely positioned at the header/footer margins */
.pages-hf { position: absolute; display: flex; gap: 8px; font-size: 11px; color: #1d1d1f; }
.pages-hf-col { flex: 1 1 0; min-width: 0; }
.pages-hf .styled-text p { margin: 0; }
/* footnote marks render as superscript indexes */
.pages-print .field[data-field-kind="footnote-mark"] { vertical-align: super; font-size: 0.7em; }
/* A table with decoded stroke styles draws only its own borders; the base
   gridline would add lines Apple doesn't (Invoice: horizontal rules only). */
table.sheet-table.own-strokes td, table.sheet-table.own-strokes th { border: none; }

/* === keynote/drawables (agent K) === */
/* contact-shadow: soft elliptical blob painted behind the drawable's content */
.canvas-drawable .contact-shadow { position: absolute; pointer-events: none; z-index: 0; }

/* === pages/text (agent P) === */
/* multi-column section block (PagesSection.columns): fixed height so
   column-fill:auto flows column-by-column like Pages, not balanced */
.pages-cols { column-fill: auto; }
/* page-bottom footnotes (footnotePlacement absent = Apple's default):
   pinned inside the printable area with the separator rule Apple draws */
.pages-footnote-area {
  position: absolute;
  border-top: 1px solid #555;
  padding-top: 4px;
  font-size: 0.85em;
}
.pages-footnote-area .footnote { display: flex; gap: 4px; margin: 2px 0; }
.pages-footnote-area .styled-text p { margin: 2px 0; }
.pages-footnote-area .field[data-field-kind="footnote-mark"] {
  vertical-align: super;
  font-size: 0.7em;
}
/* placed vector art without a raster twin: neutral gray shape + tiny caption */
.media-vector {
  width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center;
  background: #d4d4d8; border-radius: 2px; overflow: hidden;
}
.media-vector-caption { font-size: 9px; color: #71717a; padding: 2px 4px; max-width: 100%;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

/* === drawables specialist === */
/* Inline vector attachment (PDF/AI/EPS with no raster twin): a quiet tile
   instead of a broken-image icon; sized by the drawable, tiny by nature. */
.inline-vector-tile {
  display: inline-block; vertical-align: text-bottom;
  background: #d4d4d8; border-radius: 2px; min-width: 8px; min-height: 8px;
}
/* Canvas drawable text needs the same TAB treatment as the print area:
   Labothek heading bands store "\t Arbeitsmaterialien" and Apple jumps the
   default 36pt tab stop past the deco square — collapsed tabs overlap it. */
.drawable-text p, .drawable-text h1, .drawable-text h2, .drawable-text h3,
.drawable-text h4, .drawable-text h5, .drawable-text h6,
.drawable-text .list-item { white-space: pre-wrap; tab-size: 36px; }
/* Apple has no implicit paragraph margins in shape/textbox text either —
   the UA's 1em <p> margin read as a phantom blank line between consecutive
   paragraphs (G2's caption box). Spacing comes only from spaceBefore/After
   on the paragraph style. */
.drawable-text p, .drawable-text h1, .drawable-text h2, .drawable-text h3,
.drawable-text h4, .drawable-text h5, .drawable-text h6 { margin: 0; }

/* ---- mobile --------------------------------------------------------------- */

@media (max-width: 700px) {
  #app { padding: 8px; }
  /* Keynote: the thumbnail rail eats half the screen — the continuous
     scroll IS the navigation on a phone. */
  #keynote-view .slide-list { display: none; }
  /* Numbers: sheet tabs stay one row, scrolled horizontally. */
  .sheet-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .sheet-tab { flex: 0 0 auto; white-space: nowrap; padding: 6px 12px; }
  .sheet-area { padding: 10px; }
  /* Pages: page frames already size to the container (pages.ts
     pageDisplayWidth); trim the chrome around them. */
  .pages-flow { padding: 20px 16px; }
  .canvas-outer { margin: 10px 0; }
  #drop-card { padding: 24px 18px; }
}