/* layout.css — the desktop layout (docs/DESKTOP_LAYOUT_PLAN.md). Linked on every page by
   scripts/lib/layout.mjs at assembly, so changing it rebuilds no tool.

   BELOW 880px NOTHING HERE APPLIES: phones keep today's single 480px column exactly. Every rule
   sits inside a min-width media query, and the column (#ct-side) is display:none by default.

   THE GEOMETRY (all widths are of the page box, i.e. the window minus its scrollbar):
     main column  M = clamp(480px, 100% - 382px, 700px)    382 = right column 310 + gap 24 + padding 2 x 24
     right column 310px, 24px after the main column
     the block (M + 24 + 310) is centred, so the main column's centre sits 167px (half of 334)
     left of the window's centre: --ct-offset. With the drawer pushing (>= 1440px) the block centres in
     the space beside the drawer instead (bottom of this file).
   Pages without a tool have no right column and centre their column instead (see below).

   Custom properties holding `100%` are resolved where they are USED, so each percentage below is
   of that element's own containing block, which is the full page width in every case here. */

@media screen and (min-width: 880px) {
  html:not([data-embed]):not([data-layout="single"]) {
    --ct-main-w: clamp(480px, 100% - 382px, 700px);
    --ct-offset: 167px;
    /* Fixed bars that are centred on the window (a tool's Download bar, a saved-pill, a toast)
       carry `translate: var(--ct-fixed-shift, none)`: this moves them onto the main column. */
    --ct-fixed-shift: calc(-167px * var(--slide-dir, 1)) 0;
    /* Floating buttons pinned to the column's end (a tool's Copy / Add button): the distance from
       the window's inline-end edge to the main column's. */
    --ct-col-end: calc(50% - var(--ct-main-w) / 2 + var(--ct-offset));
  }

  /* Tool pages: the app's <main> and the help article below it share the main column. #root main
     (an id) beats every app's own .main rule, including the few that widen it. */
  html:not([data-embed]):not([data-layout="single"]) #root main,
  html:not([data-embed]):not([data-layout="single"]) #tool-article {
    width: var(--ct-main-w);
    max-width: none;
    margin-inline-start: calc(50% - var(--ct-main-w) / 2 - var(--ct-offset));
    margin-inline-end: 0;
  }

  /* Pages without a tool (home, hubs, search, about, privacy) have no right column, so their column
     is simply centred (Ken, 2026-10-26: off-centre looked jarring there). It is the main column's
     CONTENT box: 700px less the 16px a tool's <main> pads each side. */
  html:not([data-embed]):not([data-layout="single"]) main.container {
    width: 668px;
    max-width: none;
    margin-inline: auto;
  }

  /* The right column: the article's own Amazon and Related blocks move here (as copies, made at
     assembly), and the tool page's ads (assets/ads.css, ads.js). Absolute, so it never changes the
     page's height or moves when the tool changes view. */
  .ct-side {
    position: absolute;
    top: calc(var(--app-bar-h, 56px) + var(--safe-top, 0px) + 24px);
    inset-inline-start: calc(50% + var(--ct-main-w) / 2 - var(--ct-offset) + 24px);
    width: 310px;
    padding-inline: 5px;
    font-family: var(--font-sans);
    color: var(--ink);
  }
  .ct-side h2 { margin: 0 0 var(--space-3); }
  .ct-side > .affiliate { margin-top: 0; }
  .ct-side > * + .related { margin-top: var(--space-8); }
  /* The "View on Amazon" pill is grey here (Ken, 2026-10-26): beside the tool the bright orange pulled the eye from
     what the visitor came to do. On phones the picks sit under the tool, below the fold, so the pill stays orange
     there (tool-article.css, OutputExtras). Hover and press keep the orange card tint and the lighter pill
     (tool-article.css :is(.tool-article, .ct-side) rules), which out-rank this. A neutral that reads on the card in
     light and dark: the ink colour mixed into the card's own tint. */
  .ct-side .affiliate .affiliate-cta {
    background: color-mix(in srgb, var(--ink) 14%, var(--tint, light-dark(#e5e8ef, #2b2f3a)));
    color: var(--ink);
  }
  /* On hover / press the pill turns the lighter orange again, so its text goes back to the near-black it has there
     (the light ink above would be unreadable on it in dark mode). */
  .ct-side .affiliate .affiliate-card:active .affiliate-cta { color: #0f1111; }
  @media (hover: hover) { .ct-side .affiliate .affiliate-card:hover .affiliate-cta { color: #0f1111; } }
  /* The related cards are a two-column grid in the article; one column fits 300px. */
  .ct-side .tools { grid-template-columns: 1fr; }

  /* What the column replaces: the article's own copies, and the Amazon picks the app renders
     under its result (packages/ui/OutputExtras; the phone ad slot is hidden by assets/ads.css). */
  html:not([data-embed]):not([data-layout="single"]) #tool-article .affiliate,
  html:not([data-embed]):not([data-layout="single"]) #tool-article .related,
  html:not([data-embed]):not([data-layout="single"]) #root main [data-ct-extras] { display: none; }
}

/* Drawer pushing (>= 1440px): the drawer is the phone's full-height panel at the window's start edge
   (packages/ui/SideDrawer.module.css), and the whole page moves across beside it. The header and the
   bottom bar start after its 310px; the block (main + right column) centres in the space that is
   left, which puts the main column's centre 155 - 167 = 12px before the window's centre. */
@media screen and (min-width: 1440px) {
  html:not([data-embed]):not([data-layout="single"])[data-drawer="push"] {
    --ct-offset: 12px;
    --ct-fixed-shift: calc(-12px * var(--slide-dir, 1)) 0;
  }
  html:not([data-embed]):not([data-layout="single"])[data-drawer="push"] #root header { margin-inline-start: 310px; }
  html:not([data-embed]):not([data-layout="single"])[data-drawer="push"] #root nav[data-ct-chrome],
  html:not([data-embed]):not([data-layout="single"])[data-drawer="push"] .top-bar,
  html:not([data-embed]):not([data-layout="single"])[data-drawer="push"] .bottom-bar { inset-inline-start: 310px; }
  /* Pages without a tool: still centred, now in the space beside the drawer. */
  html:not([data-embed]):not([data-layout="single"])[data-drawer="push"] main.container {
    margin-inline-start: calc(50% - 334px + 155px);
    margin-inline-end: 0;
  }
}

/* THE SIDEBAR BUTTON (Ken, 2026-10-26). One toggle, drawn by the drawer itself (packages/ui/SideDrawer.tsx
   .toggle; scripts/lib/drawer.mjs .drawer-toggle), pinned to the window's top-start corner above every
   layer, opens and closes the drawer. The header's own button keeps its slot, so the title does not move,
   but is hidden: the toggle sits exactly on it (and on tool pages clicks it, so the app's logic runs). */
html:not([data-embed]) #root header > button:has(> svg.lucide-panel-left),
html:not([data-embed]) #hamburger-btn { visibility: hidden; }

.ct-side { display: none; }
@media screen and (min-width: 880px) { html:not([data-embed]):not([data-layout="single"]) .ct-side { display: block; } }
@media print { .ct-side { display: none !important; } }