/* ═══════════════ SITE-WIDE (not mobile-only) ═══════════════════════════════
 * Everything below applies at every width. It is here rather than in the export for the
 * same reason as the mobile block: a re-export would drop it.
 */

/* KEYBOARD FOCUS — WCAG 2.4.7.
 * The export defines no :focus or :focus-visible rule anywhere (verified by walking every
 * stylesheet in the document and finding zero), and the three form inputs additionally carry
 * `outline: none` inline. A keyboard or switch user therefore had no idea where they were on
 * a page selling to lawyers and DPOs. :focus-visible rather than :focus so a mouse click does
 * not draw a ring nobody asked for.
 * Two colours because the page alternates cream and near-black sections; a brass ring
 * disappears on cream and a cream ring disappears on ink. */
:focus-visible {
  outline: 2px solid #8a5a18;
  outline-offset: 3px;
}
#stacks :focus-visible,
#agents :focus-visible,
#contact :focus-visible,
footer :focus-visible {
  outline-color: #f5ebd6;
}
/* The inline `outline: none` on the inputs beats a plain rule. */
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #8a5a18 !important;
  outline-offset: 2px;
}

/* CONTRAST — WCAG 1.4.3.
 * The scrolly eyebrow is #4a3620 on the #0d0a06 opening: measured 1.73:1 against a required
 * 4.5:1, the only real contrast failure on the page across 234 text nodes at desktop width.
 * It carries a light text-shadow, which suggests it was drawn to sit over the bright part of
 * the video; over the dark part it is unreadable. Brass at #c9962f clears the bar against the
 * same ground and stays inside the palette. */
[data-scrolly-eyebrow] {
  color: #c9962f !important;
}

/* Corrections for the exported landing page.
 *
 * WHY THIS FILE EXISTS INSTEAD OF EDITS TO index.html
 * ───────────────────────────────────────────────────
 * The page is authored in Claude Design and exported. Every rule here would be lost on the
 * next export if it lived in the HTML, so the fixes live in one file that apply-fixes.py
 * links in. The design tool owns the layout; this file owns only what it gets wrong at
 * phone width, and each rule says which measurement it answers.
 *
 * Measured on the built image at 390x844 (iPhone 14 Pro), device scale 3:
 *   document.scrollWidth 558 against a 390 viewport — 168 px of sideways scroll
 *   9 elements past the right edge: agents 7, method 1, pricing 1
 *   23 tap targets under 40 px, the nav links being 21 px tall
 *   33 text nodes under 13 px, the masthead at 9.5 px
 *
 * The page is otherwise responsive; these are the places where fixed-width or non-breaking
 * content wins over the layout.
 */

@media (max-width: 720px) {

  /* ── 0. the actual problem: the page has no breakpoint ───────────────────
   * Twelve multi-column grids, every one of them still multi-column at 390 px, because the
   * export declares fr-based columns and never collapses them. Measured widths:
   *
   *     pricing   5 columns x 66 px   ← the five plans side by side on a phone
   *     stacks    4 columns x 54 px
   *     method    4 columns x 84 px
   *     agents    2 columns x 55 px  (nested inside another 2-column grid)
   *     + eight more between 104 and 166 px
   *
   * The sideways scroll was a symptom of this; the columns were the disease. Rather than
   * twelve hand-written overrides that a re-export could desynchronise, one auto-fit rule
   * lets each grid decide for itself: a column may not go below 240 px, so anything that
   * cannot fit two of them stacks. It needs no per-section tuning and it keeps working at
   * 360 px and at 430 px without a second breakpoint.
   *
   * One column, flatly. `repeat(auto-fit, minmax(min(100%, 240px), 1fr))` was tried first
   * and Chrome's parser DROPPED the whole declaration — verified by walking
   * document.styleSheets and finding 10 of 11 rules present. A rule that silently does not
   * exist is worse than a blunt one that does, and at 390 px every one of these grids wants
   * a single column anyway.
   */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* ── 0b. the shelf ───────────────────────────────────────────────────────
   * The six spines are fixed-width (126, 120, 114, 106, 102, 98 px — the width encodes the
   * collection's size, as does the height) inside `display:flex; align-items:flex-end;
   * flex-wrap:wrap`. On a phone that wraps into ragged rows of two or three, each row
   * bottom-aligned to a different baseline, and the result reads as books knocked over
   * rather than as a shelf. On the reporter's device the last spine in each row was also
   * being cut off at the right edge — clipped, not scrollable, by the overflow-x:clip
   * backstop further down this file. That backstop's own comment says it hides rather than
   * fixes; this is the case it was hiding.
   *
   * A shelf is the one layout that has an obvious phone form: keep the single row and let
   * the finger travel along it. Nothing is clipped, nothing is reordered, the width and
   * height encoding survives, and the spines running past the edge are their own
   * affordance — you can see there are more books.
   *
   * scroll-padding matches the section's 28 px inset so a snapped spine is not flush
   * against the screen edge.
   */
  #stacks [style*="align-items: flex-end"] {
    flex-wrap: wrap !important;
    gap: 4px !important;
    overflow: visible;
  }
  /* `zoom`, not width overrides. The spines carry both width AND height inline (124x330 down
   * to 96x268) and the title is set in vertical-rl inside them, so overriding widths alone
   * would squash the aspect ratio and overflow the rotated text. zoom scales box, image and
   * type together — the desktop shelf, smaller — which is exactly what "same as desktop"
   * asks for. It is the one property that does this without touching the export's markup.
   *
   * Bands rather than a formula: CSS cannot divide a length by a length, so the scale that
   * makes 654 px of spine plus 20 px of gaps fit the section's inner width has to be stated
   * per range. Each value is the measured fit, rounded down:
   *     360 px viewport → 304 px inner → (304-20)/654 = 0.43
   *     390            → 334          → 0.48
   *     430            → 374          → 0.54
   */
  #stacks [style*="align-items: flex-end"] > *:not(:last-child) {
    zoom: 0.46;
  }
  /* The last child is the caption block (`flex: 1 1 120px`), not a spine. Full width on its
   * own line, below the shelf, where it reads as a caption instead of a seventh book. */
  #stacks [style*="align-items: flex-end"] > *:last-child {
    flex: 1 0 100% !important;
    align-self: auto !important;
    margin-top: 10px;
  }
  #stacks [style*="align-items: flex-end"] > *:not(:last-child) {
    zoom: 0.40;
  }

  /* ── 1. the MCP config card ──────────────────────────────────────────────
   * The whole 168 px of overflow starts here. Two separate causes:
   *
   * (a) Its header is `display:flex; justify-content:space-between` holding the filename
   *     `claude_desktop_config.json` (172 px, unbreakable) beside the MCP badge and the
   *     copy button. Flex items default to min-width:auto, so the filename refuses to
   *     shrink and shoves the badge and button out to x=558.
   * (b) The body is a hand-indented JSON block — plain divs with padding-left 20/40/60 —
   *     and the URL string is 225 px starting at 60 px of padding.
   *
   * (b) is content a visitor needs to read, so it scrolls inside its own box rather than
   *     being hidden or force-wrapped into something that no longer looks like JSON.
   */
  #agents [style*="justify-content: space-between"] {
    flex-wrap: wrap;
    gap: 10px;
  }
  #agents [style*="justify-content: space-between"] > * {
    min-width: 0;
  }
  #agents [style*="font-size: 12.5px"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* The filename is a label, not prose: let it ellipsis rather than set the card's width. */
  #agents [style*="font-size: 11px"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* ── 1b. the five plans read as one card ─────────────────────────────────
   * The pricing block is ONE bordered rectangle subdivided by hairlines: the grid carries
   * `border: 1px` with `gap: 0`, and each plan carries `border-right: 1px` and nothing else.
   * That is the right desktop treatment — a catalogue page with five ruled columns, not five
   * floating cards. Stacked into one column it falls apart: a right-hand rule separates
   * nothing, there is no bottom rule, and the five plans run together into a single 2,650 px
   * card. Reported from a phone as «φαίνονται σαν μία κάρτα όλες οι τιμές», and measured:
   * five children, border-bottom 0 on every one of them, gap 0.
   *
   * The fix keeps the design's own idea rather than replacing it with card-and-shadow: turn
   * the column rule into a row rule. One block, seven ruled entries, still a catalogue.
   *
   * The row tracks are undone as well. On desktop the seven plans SHARE the section's eight
   * rows (`grid-template-rows: subgrid` on each card, `grid-row: 1 / -1`) so the price, the
   * hairlines and the CTA sit on one straight line across all seven. Collapsed to a single
   * column, `1 / -1` would stack all seven cards INTO those same eight rows, on top of each
   * other. Back to a plain flex column, where a phone wants them anyway.
   */
  #pricing [style*="grid-template-columns"] {
    grid-template-rows: none !important;
  }
  #pricing [style*="grid-template-columns"] > * {
    grid-row: auto !important;
    display: flex !important;
    flex-direction: column !important;
    border-right-width: 0 !important;
    border-bottom: 1px solid var(--ink) !important;
  }
  #pricing [style*="grid-template-columns"] > *:last-child {
    border-bottom-width: 0 !important;
  }

  /* ── 2. long Greek words in headings ────────────────────────────────────
   * «Παραπέμπει» (method) and «Όλη η βιβλιοθήκη» (pricing) each sit a few pixels past the
   * edge. Greek compounds are long and these are set in a display face at heading size, so
   * there is no break opportunity inside them.
   */
   * #agents was initially left out — its overflow at 390 px was the code card, not text.
   * At 360 px sixteen elements went past the edge, all of them headings in that section
   * («Για τους agents σας», «Δώστε στους agents σ…»). Narrower phones are the ones that
   * find the omission, which is why the check was re-run at 360 and not only at 390.
   */
  header, #stacks, #desk, #method, #agents, #pricing, #faq, #contact, footer {
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* ── 3. the header, which was eating a third of the screen ───────────────
   * Measured at 390x844 after the grid fix:
   *     masthead      89 px   the decorative archival strip
   *     nav          203 px   logo + six links over two rows + language + CTA
   *     ─────────────────
   *     292 px before the hero — 35% of the viewport
   *
   * And the nav is `position: sticky; top: 0`, so those 203 px would have followed the
   * visitor down the whole page. That, more than the columns, is what made it feel broken
   * on a phone: a quarter of the screen permanently occupied by navigation for a page you
   * scroll.
   *
   * The masthead is ornament — a plate number, a volume number, a list of what is archived.
   * It carries the printed-catalogue register on a desktop and nothing at all on a phone,
   * so it goes.
   *
   * The six section links do NOT go. Deleting them was the first attempt and it was wrong:
   * a visitor on a phone then has no way to reach pricing except scrolling past everything,
   * and the reporter's words were «ούτε menu ούτε τπτ». The adapt reference says hamburger or
   * bottom navigation, not removal. Without markup access a disclosure is out, so the links
   * become one horizontally scrollable row — the same pattern as the shelf, and the standard
   * scrollable tab bar. That costs ~44 px of sticky header instead of 203.
   */
  [data-screen-label="Masthead"] { display: none !important; }

  /* !important because the element carries `style="display:flex"` inline, and an inline
   * declaration beats any stylesheet rule without it. */
  nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    gap: 0 18px !important;
    scrollbar-width: none;          /* the row is short; a bar under it reads as chrome */
    margin-inline: -4px;
    padding-inline: 4px;
  }
  nav::-webkit-scrollbar { display: none; }
  nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Tap targets: what remains must still be hittable. The nav links were 21 px tall, the
   * language toggle and footer links similar; WCAG 2.5.8 asks 24 px and every platform
   * guideline says 44. Padding rather than height so flex rows still wrap. */
   * 44 px, not 36: the impeccable adapt reference and every platform guideline put the touch
   * target at 44x44, and WCAG 2.5.8's 24 px is a floor, not a target. */
  header a, footer a, nav a, button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  nav a {
    padding-block: 11px;
    display: inline-block;
  }

  /* ── 4. the archival micro-type ──────────────────────────────────────────
   * The masthead and plate labels are set at 9.5–10.5 px. That is a deliberate part of the
   * printed-catalogue look and it works on a desktop; on a phone held at arm's length it is
   * not readable. Raised to 11 px, which keeps the register without pretending 9.5 px was
   * a choice anyone could read.
   */
  [style*="font-size: 9.5px"]  { font-size: 11px !important; }
  [style*="font-size: 10px"]   { font-size: 11px !important; }
  [style*="font-size: 10.5px"] { font-size: 11px !important; }

  /* ── 5. backstop ─────────────────────────────────────────────────────────
   * If a future export introduces a new wide element, this keeps the page itself from
   * scrolling sideways. It is deliberately LAST and deliberately narrow in scope: it hides
   * overflow rather than making it reachable, so it is a net, not a fix. Anything that
   * lands in it should be found and given a real rule above.
   */
  /* `clip`, not `hidden`: overflow-x:hidden on <html> turns it into a scroll container,
   * which broke documentElement.scrollHeight (reported 844 against a body of 19,129) and
   * would break any script that measures page height. `clip` hides without that side effect. */
  body { overflow-x: clip; }
}

/* The narrowest common phone. 654 px of spine plus 20 px of gaps has to fit 304 px of inner
 * width, so the scale drops to 0.40 and the smallest spine lands at 38 px — under the 44 px
 * touch target. It is a picker, not a control, and its title, count and description repeat in
 * the detail panel below the shelf, so the cost is accepted rather than hidden. Above 380 px
 * the smallest spine is 45 px and the question does not arise.
 *
 * This band lives at the END of the file on purpose. It was first inserted mid-file, and the
 * `}` that opened it closed the main @media early — every rule after that point (the pricing
 * rules, the agents card, the type sizes, the backstop) silently moved inside a query that
 * only matches phones under 380 px, so none of them applied at 430. Caught by measuring
 * border-bottom on the pricing cards and finding 0 again. */
@media (max-width: 380px) {
  #stacks [style*="align-items: flex-end"] > *:not(:last-child) {
    zoom: 0.40;
  }
}