/* The site header (31.10.2026, second pass): the live loudflow.ai header 1:1.
   /site.css is the live file and draws the bar, the panels and the phone sheet; this file only holds what the
   branch's own stylesheets would otherwise change about it. Markup: drafts/aqua-1029/hdr.py. */

/* live loudflow.ai sizes everything border-box (v2.css: *{box-sizing:border-box}) and sets the body to 16px/1.5;
   the branch's r.css does neither, so the bar came out 1148 wide instead of 1120 and the panels 376 instead of 360 */
.nav,.nav *,.sheet,.sheet *,.skip{box-sizing:border-box}
.sheet{font-size:16px;line-height:1.5}

/* the page's Read aloud pill sits above everything; it has no business over the open menu sheet */
body.menu-open .lf-rd{visibility:hidden}

/* the fixed "Read aloud" pill sat on the last footer row (Terms / Impressum) at the very bottom on phones (31.10.) */
body:has(.lf-rd) .foot::after{content:"";display:block;height:72px}

/* PHONES: "Coming soon" instead of a download (31.10. night, site.js sets html.lf-phone and a.dl-soon).
   Lauro: "On a phone: 'Coming soon to smartphone' — no copy-link." Every download button turns into one quiet pill:
   no ink fill, no OS logo, a small ink dot in front; it still links to /download, which says the same calmly. */
html.lf-phone a.dl-soon[data-dl]{background:transparent!important;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(21,21,21,.22);font-weight:500}
html.lf-phone a.dl-soon[data-dl]:hover{background:rgba(21,21,21,.04)!important}
html.lf-phone a.dl-soon[data-dl] svg{display:none!important}
html.lf-phone a.dl-soon[data-dl]::before{content:"";position:static;flex:none;width:6px;height:6px;margin:0;border-radius:50%;background:currentColor;opacity:.42}
html.lf-phone .nav a.dl-soon[data-dl]{gap:8px;padding:0 13px}
html.lf-phone .sheet .go.dl-soon{font-weight:500}
/* the line under it: where LoudFlow runs now, the second computer quieter */
/* 01.11.: on a phone this line is the one that matters ("it works on your computer, now"), so it reads at body size
   in ink, and the second computer in the normal grey, not pale */
html.lf-phone .r-os.os-now{font-size:var(--fs-body,18px);line-height:1.45;color:var(--ink-2,rgba(21,21,21,.68))}
.os-now .os-also{color:inherit} /* one colour for the whole phone line (01.11.) */
html.lf-phone .nav .dl-x-s{display:none}
@media(max-width:389px){html.lf-phone .nav .dl-x{display:none}html.lf-phone .nav .dl-x-s{display:inline}}

/* PHONE SHEET GROUPS (01.11.): "Made for" and "Help" open in place, one level, the same row as a plain link */
.sheet .grp summary{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--line);font-size:22px;font-weight:500;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.sheet .grp summary::-webkit-details-marker{display:none}
.sheet .grp summary .chev{width:14px;height:14px;opacity:.6;transition:transform .2s var(--ease-out)}
.sheet .grp details[open] summary .chev{transform:rotate(180deg)}
.sheet .grp summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
.sheet .grp ul{padding:4px 0 8px;border-bottom:1px solid var(--line)}
.sheet .grp ul li a{padding:12px 0 12px 16px;border-bottom:0;font-size:19px;font-weight:450}
@media(max-width:900px)and (max-height:860px){.sheet .grp summary{padding:15px 0}}
@media(max-width:900px)and (max-height:700px){.sheet .grp summary{padding:11px 0;font-size:20px}.sheet .grp ul li a{padding:9px 0 9px 16px}}
@media(prefers-reduced-motion:reduce){.sheet .grp summary .chev{transition:none}}
.sheet .meta{font-size:16px} /* the phone menu line at the 16 px floor (site.css says 15) */

/* FOOTER, 01.11. late (Lauro: "den Footer besser … mehr wie vorher mit großem Logo, und alles clean").
   Mobbin: Wispr Flow, Granola, TravelPerk and Structured end on link columns, then the wordmark across the whole
   content width, then one quiet bottom row; Opennote keeps the columns calm and the copyright small. So: everything
   sits in the same 1120 column as the nav, the big L-wave wordmark is back at full width in ink (the size it had
   before the Swiss round shrank it to 176 px), headings are quiet serif, the bottom row is company line left, links right. */
.foot{padding-top:clamp(64px,8vw,120px)} /* (r.css drops the full-bleed hairline on top: the page ends on paper, the bottom row keeps its own line) */
.foot .cols,.foot .big,.foot .base{width:min(var(--max,1120px),100%);margin-inline:auto;box-sizing:border-box}
.foot .col h2{font:400 20px/28px var(--serif,"Source Serif 4",Georgia,serif);color:var(--mute);letter-spacing:-.005em;margin:0 0 16px}
.foot .ft-t{font:400 20px/28px var(--serif,"Source Serif 4",Georgia,serif)}
.foot .big{padding:clamp(64px,7vw,112px) 0 clamp(32px,4vw,56px)}
.foot .big svg{width:100%}
.foot .base{border-top:1px solid var(--line);padding-top:clamp(20px,2.5vw,28px)}
.foot .base .left{width:100%;row-gap:8px}
.foot .base .left>span:first-child{margin-right:auto}
/* 761–1100 (the 1024 view): four columns, and "Get LoudFlow" sits under Help, the shortest list, so no hole is left
   under Help while Read aloud ran twice as long beside it */
@media(min-width:761px)and (max-width:1100px){
  .foot .col:nth-child(3){grid-column:3;grid-row:1/span 2}
  .foot .col:nth-child(4){grid-column:4;grid-row:1}
  .foot .col:nth-child(5){grid-column:4;grid-row:2}
  .foot .cols{row-gap:40px}
}
@media(max-width:560px){.foot .base .left{column-gap:20px}.foot .base .left>span:first-child{flex-basis:100%;margin-right:0}}
/* the phone sheet's lock line links to /security */
.sheet .priv a{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;padding:8px 0}
.sheet .priv svg{width:14px;height:14px;flex:none}

/* 02.11.2026 (Lauro: "alles überarbeiten, Mobbin, minimal, clean, light"): at the top of a page the bar is flat, no card,
   no hairline, no blur, like Opennote, Linear, Tally, Loops and Steep on Mobbin. site.js sets .is-scrolled after 8 px and the
   bar's own transition fades the card in; an open menu or dropdown keeps it. */
.nav:not(.is-scrolled):not(.is-open):not(.dd-open) .row{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* 02.11. later (Lauro: the phone view "mega clean", no bloat): on a phone the bar is the logo and the menu only. The hero
   already says "Coming soon to iPhone/Android" with the computers it runs on, and on a phone the pill downloads nothing,
   so a second one in the bar is noise. The menu sheet still carries Download. */
html.lf-phone .nav a.dl-soon[data-dl]{display:none}

/* 02.11. later: the phone pill carries the phone's own logo instead of the dot, and says only "Coming soon" (site.js) */
html.lf-os-ios a.dl-soon[data-dl]::before,html.lf-os-android a.dl-soon[data-dl]::before{content:none}
html.lf-os-ios a.dl-soon[data-dl] svg.lf-ic-mac{display:inline-block!important;width:15px;height:15px;margin-top:-2px}
html.lf-os-android a.dl-soon[data-dl] svg.lf-ic-and{display:inline-block!important;width:17px;height:17px;flex:none}
html.lf-os-ios a.dl-soon[data-dl],html.lf-os-android a.dl-soon[data-dl]{gap:9px}