/* | Styles of the public Lorevid site (the Blade pages). Light default + .dark. | | These are plain CSS, not Tailwind, on purpose: the site is server-rendered Blade served to | crawlers, and it must paint without the Vite bundle the Inertia cabinet loads. The palette is the | brand one — graphite and steel with teal as the ONLY accent — expressed as the same variables the | Tailwind theme defines for the Vue side, so the two surfaces stay the same product visually. | Nothing here may reintroduce a second accent colour: indigo and violet exist for chart series, | amber only for warnings. */ :root{ --bg:#f5f7fa; --surface:#ffffff; --surface2:#eef1f5; --text:#1f2933; --muted:#7b8794; --muted2:#b0b8c1; --border:#e4e7eb; --border-strong:#cbd2d9; /* ONE accent for the whole chrome: links, buttons, timecodes, the AI answer card. Teal-700 is the primary action, teal-800 its pressed/hover state — the same ramp the core's brand tokens are overridden with in resources/css/app.css. */ --accent:#0f766e; --accent-d:#115e59; --accent-soft:rgba(15,118,110,.10); /* Text ON an accent surface (filled buttons, badges, numbered steps). A token rather than a literal #fff because the dark theme's accent is a LIGHT teal — white on it is unreadable. */ --on-accent:#ffffff; --green:#0f766e; --red:#e0563b; --amber:#e69a0b; --maxw:1152px; --r:12px; } body.dark{ --bg:#0f141b; --surface:#161d27; --surface2:#1b2430; --text:#dce4ee; --muted:#8493a5; --muted2:#5e6b7c; --border:#28313f; --border-strong:#3a4553; /* Teal-400 in the dark theme: teal-700 on a near-black surface fails contrast for body links. */ --accent:#2dd4bf; --accent-d:#5eead4; --accent-soft:rgba(45,212,191,.14); --on-accent:#04211f; } /* Set by the head script when the visitor's OS asks for dark and they have expressed no explicit preference. Paints the page background before is parsed, so there is no white flash. */ html.pre-dark{background:#0f141b} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text); font:16px/1.65 -apple-system,Segoe UI,Roboto,Arial,sans-serif} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%} .mut{color:var(--muted)} .sm{font-size:13px} .xs{font-size:12px} [id]{scroll-margin-top:74px} .ai{font-size:11px;font-weight:800;letter-spacing:.5px;color:var(--on-accent);background:var(--accent);padding:2px 7px;border-radius:6px;flex:none} /* header */ .bhead{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--border)} .bhead .in{position:relative;max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:18px;padding:12px 24px} .blogo{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.3px;color:var(--text)} .blogo .lg{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--accent),#2dd4bf)} .bnav{display:flex;align-items:center;gap:4px;margin-left:8px;flex:1} .bnav a{padding:7px 11px;border-radius:8px;color:var(--text);font-size:14px} .bnav a:hover{background:var(--surface2);text-decoration:none} .navspace{margin-left:auto} /* Burger is mobile-only. Uses .icbtn.burger (0,2,0) so it beats .icbtn{display:grid} (0,1,0) below regardless of source order — otherwise it leaks onto the desktop header. */ .icbtn.burger{display:none} .sel{position:relative;display:inline-block} .sel::after{content:"▾";position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;font-size:11px} select{appearance:none;-webkit-appearance:none;background:var(--surface);color:var(--text);border:1px solid var(--border); border-radius:8px;padding:7px 26px 7px 11px;font:inherit;font-size:14px;cursor:pointer} .icbtn{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-size:16px;flex:none;display:grid;place-items:center;line-height:1} .cta{background:var(--accent);color:var(--on-accent);border:0;border-radius:9px;padding:9px 15px;font-weight:700;cursor:pointer;font:inherit;font-size:14px} .cta:hover{background:var(--accent-d)} /* layout: content + sidebar */ .page{max-width:var(--maxw);margin:0 auto;padding:24px 20px 60px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start} .art{min-width:0} .side{position:sticky;top:74px;display:flex;flex-direction:column;gap:16px} /* article */ .crumbs{color:var(--muted2);font-size:13px;margin-bottom:14px} .crumbs a{color:var(--muted)} .art h1{font-size:32px;line-height:1.22;margin:6px 0 14px;font-weight:800} .byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:14px;margin-bottom:16px} .byline .av{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none} .tag{font-size:11px;padding:3px 9px;border-radius:20px;background:var(--surface2);color:var(--muted);border:1px solid var(--border);font-weight:600} .tag.cat{color:var(--accent);border-color:rgba(15,118,110,.35);background:rgba(15,118,110,.08)} .tag.author{color:var(--accent);border-color:rgba(15,118,110,.35);background:var(--accent-soft)} .player{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#1b2530,#2b3b4f);background-size:cover;background-position:center;position:relative;display:grid;place-items:center;margin:8px 0 6px} .player.js-player{cursor:pointer} .player.js-player::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18);transition:background .15s} .player.js-player:hover::after{background:rgba(0,0,0,.05)} .player .pl{position:relative;z-index:1;width:62px;height:62px;border:0;border-radius:50%;background:rgba(255,0,0,.85);display:grid;place-items:center;color:#fff;font-size:24px;cursor:pointer;font:inherit;padding-left:4px} .player.playing{background:#000} .player.playing::after{display:none} .player .ytmount,.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .vstats{display:flex;gap:16px;color:var(--muted);font-size:13px;margin:8px 0 4px;flex-wrap:wrap} .disc{background:var(--surface2);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:8px; padding:10px 13px;color:var(--muted);font-size:13px;margin:14px 0} /* full auto-transcript (collapsed, SEO-deprioritised) */ .transcript{border:1px solid var(--border);border-radius:10px;background:var(--surface);margin:22px 0} .transcript>summary{cursor:pointer;padding:13px 16px;font-weight:700;font-size:14.5px;color:var(--text);list-style:none;display:flex;align-items:center;gap:8px} .transcript>summary::-webkit-details-marker{display:none} .transcript>summary::before{content:"▸";color:var(--muted2);font-size:12px;transition:transform .15s} .transcript[open]>summary::before{transform:rotate(90deg)} .transcript .tx-body{padding:0 16px 4px;color:var(--muted);font-size:14px;line-height:1.7;max-height:520px;overflow:auto} .transcript .tx-body p{margin:0 0 10px} .transcript .tx-note{padding:0 16px 14px;margin:0;color:var(--muted2);font-size:12px} /* ask (RAG entry on spoke) */ .ask{border:1px solid rgba(15,118,110,.35);background:var(--accent-soft);border-radius:12px;padding:16px 16px 14px;margin:20px 0} .ask .h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;margin-bottom:4px} .ask .sub{color:var(--muted);font-size:13px;margin-bottom:10px} .ask .field{display:flex;gap:8px} .ask input{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:11px 13px;color:var(--text);font:inherit;font-size:15px} .ask .go{background:var(--accent);color:var(--on-accent);border:0;border-radius:9px;padding:0 16px;font-weight:700;cursor:pointer;font:inherit} .ask .chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px} .ask .chip{font-size:13px;padding:6px 11px;border-radius:20px;background:var(--surface);border:1px solid var(--border);color:var(--muted);cursor:pointer} .ask .chip:hover{border-color:var(--accent);color:var(--accent)} /* Q&A direct answer */ .answer{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--green);border-radius:12px;padding:18px 20px;margin:10px 0 18px} .answer .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--green);font-weight:700;margin-bottom:7px} .answer p{margin:0 0 12px;font-size:17px;line-height:1.6} .answer .jump{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--accent);font-weight:600;cursor:pointer;background:var(--accent-soft);padding:6px 11px;border-radius:8px} .prose p{font-size:16px;line-height:1.7;margin:0 0 14px;color:var(--text)} /* Q&A table of contents */ .qtoc{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin:6px 0 22px} .qtoc-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;margin-bottom:10px} .qtoc-h .ic{width:24px;height:24px;border-radius:7px;background:var(--surface2);display:grid;place-items:center;font-size:13px;flex:none} .qtoc-n{margin-left:4px;font-size:12px;font-weight:700;color:var(--muted);background:var(--surface2);border-radius:20px;padding:1px 9px} .qtoc ol{margin:0;padding-left:22px;counter-reset:qtoc} .qtoc li{margin:7px 0;line-height:1.45} .qtoc a{color:var(--text);font-size:15px} .qtoc a:hover{color:var(--accent)} .miniq a{display:block;padding:9px 0;border-bottom:1px solid var(--border);font-size:14px;color:var(--text)} .miniq a:last-child{border-bottom:0} .miniq a:hover{color:var(--accent);text-decoration:none} /* section headings */ h2.sec{font-size:22px;margin:34px 0 12px;display:flex;align-items:center;gap:9px} h2.sec .ic{width:26px;height:26px;border-radius:7px;background:var(--surface2);display:grid;place-items:center;font-size:14px;flex:none} /* kratko / TL;DR */ .kratko{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:10px;padding:16px 18px;margin:6px 0 8px} .kratko b{display:block;margin-bottom:6px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2)} .kratko p{margin:0;font-size:16.5px;line-height:1.6} /* need */ .need{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:640px){.need{grid-template-columns:1fr}} .need .col{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px} .need .col h4{margin:0 0 8px;font-size:14px} .need ul{margin:0;padding-left:18px} .need li{margin:5px 0;font-size:14.5px} /* steps */ .step{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--border)} .step:last-child{border-bottom:0} .step .no{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:700;display:grid;place-items:center;flex:none} .step .b{flex:1} .step .t{font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .step .t .ts{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;font-size:13px;background:var(--accent-soft);padding:2px 8px;border-radius:6px} .step p{margin:5px 0 0;color:var(--muted);font-size:14.5px} /* norms */ .norms{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:6px 4px} .norms .row{display:flex;gap:12px;padding:9px 14px;border-bottom:1px solid var(--border);font-size:14.5px} .norms .row:last-child{border-bottom:0} .norms .k{flex:1} .norms .v{font-weight:700;text-align:right;flex:none;max-width:46%} .norms .src{color:var(--muted2);font-size:12px} /* defects */ .defect{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)} .defect:last-child{border-bottom:0} .defect .mk{width:24px;height:24px;border-radius:6px;background:rgba(224,86,59,.12);color:var(--red);display:grid;place-items:center;flex:none;font-size:13px;margin-top:2px} .defect .t{font-weight:700;font-size:15px} .defect p{margin:3px 0 0;color:var(--muted);font-size:14px} /* cost */ .cost{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px} .cost .note{color:var(--amber);font-size:12.5px;background:rgba(230,154,11,.1);border:1px solid rgba(230,154,11,.3);border-radius:7px;padding:6px 10px;margin-bottom:10px;display:inline-block} .cost table{width:100%;border-collapse:collapse;font-size:14.5px} .cost td{padding:8px 4px;border-bottom:1px solid var(--border)} .cost td:last-child{text-align:right;font-weight:700} .cost tr:last-child td{border-bottom:0;font-size:15.5px} /* key moments */ .moment{display:flex;gap:10px;align-items:center;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;margin:8px 0;font-size:15px} .moment .ts{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;flex:none} /* toolbar */ .toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:26px 0;padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .tags{display:flex;gap:6px;flex-wrap:wrap} .share{display:flex;gap:8px;margin-left:auto} .sbtn{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--muted)} /* related */ .related{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px} @media(max-width:640px){.related{grid-template-columns:1fr}} .rcard{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:13px 15px;display:flex;gap:12px;align-items:center} .rcard .th{width:60px;height:44px;border-radius:7px;background:linear-gradient(135deg,#cdd7e2,#aeb9c7);background-size:cover;background-position:center;flex:none;display:grid;place-items:center;color:#fff;font-size:13px} body.dark .rcard .th{background:linear-gradient(135deg,#2b3b4f,#1b2530);color:#5d7a93} .rcard a{color:var(--text);font-weight:600;font-size:14.5px;line-height:1.3} .rcard .m{color:var(--muted2);font-size:12px;margin-top:3px} /* comments summary (AI) */ .csum{background:var(--accent-soft);border:1px solid rgba(15,118,110,.3);border-radius:12px;padding:15px 18px;margin:26px 0 12px} .csum .h{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:8px} .csum ul{margin:0;padding-left:20px} .csum li{margin:6px 0;font-size:15px} .csum .new{color:var(--green);font-weight:700} /* comments */ .cmts{margin-top:22px} .cmts .head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px} .cmts .head h2{margin:0;font-size:20px} .cmt{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)} .cmt .av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px} .cmt .nm{font-weight:700;font-size:14px} .cmt .tx{font-size:15px;margin-top:3px} /* sidebar widgets */ .side-ask{display:flex;align-items:center;gap:11px;border:1px solid rgba(15,118,110,.35);background:var(--accent-soft);border-radius:12px;padding:13px 14px;cursor:pointer} .side-ask:hover{border-color:var(--accent);text-decoration:none} .side-ask b{font-size:14.5px;color:var(--text)} .side-ask .s{color:var(--muted);font-size:12.5px} .swid{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px} .swid h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted2)} .toc-nav a{display:block;padding:7px 0;font-size:14px;color:var(--text);border-bottom:1px solid var(--border)} .toc-nav a:last-child{border-bottom:0} .toc-nav a:hover{color:var(--accent);text-decoration:none} /* ad */ .ad{border:1px dashed var(--border);border-radius:10px;background:var(--surface2);color:var(--muted2); display:grid;place-items:center;text-align:center;font-size:12px;letter-spacing:.4px;text-transform:uppercase} .ad.body{height:110px;margin:28px 0} .ad.side{height:250px} /* ===== search / assistant page ===== */ .search{max-width:860px;margin:0 auto;padding:24px 20px 60px} .search h1{font-size:26px;margin:2px 0 4px} .search .lead{color:var(--muted);font-size:14px;margin-bottom:16px} .sform{display:flex;gap:8px;margin:6px 0 12px} .sform input{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:14px 15px;color:var(--text);font:inherit;font-size:16px} .sform input:focus{outline:none;border-color:var(--accent)} .sform .go{background:var(--accent);color:var(--on-accent);border:0;border-radius:11px;padding:0 22px;font-weight:700;font-size:15px;cursor:pointer;font:inherit} .sfilters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:22px;color:var(--muted2);font-size:13px} .fchip{font-size:13px;padding:6px 12px;border-radius:20px;background:var(--surface);border:1px solid var(--border);color:var(--muted);cursor:pointer} .fchip.on{background:rgba(15,118,110,.1);border-color:rgba(15,118,110,.4);color:var(--accent)} .airesult{border:1px solid rgba(15,118,110,.3);background:var(--accent-soft);border-radius:14px;padding:18px 20px;margin-bottom:22px} .airesult .h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;margin-bottom:10px} .airesult p{margin:0 0 12px;font-size:16.5px;line-height:1.65} .airesult .cites{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .airesult .cites .lbl{color:var(--muted);font-size:12.5px} .cite{font-size:12.5px;padding:5px 11px;border-radius:20px;background:var(--surface);border:1px solid var(--border);color:var(--accent);cursor:pointer;font-weight:600} .cite:hover{border-color:var(--accent);text-decoration:none} .hits h3{font-size:14px;color:var(--muted2);text-transform:uppercase;letter-spacing:.5px;margin:0 0 12px} .hit{display:flex;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:12px} .hit .hbody{min-width:0;flex:1} .hit .hthumb{position:relative;flex:none;width:150px;height:84px;border-radius:9px;overflow:hidden;background:#12161c center/cover no-repeat;display:grid;place-items:center;text-decoration:none} .hit .hthumb .pl{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center;color:#fff;font-size:13px} .hit .hthumb:hover .pl{background:rgba(0,0,0,.75)} .hit .hmeta{color:var(--muted2);font-size:12.5px;margin:3px 0 2px} .hit .hmeta b{color:var(--muted)} @media(max-width:560px){.hit{flex-direction:column}.hit .hthumb{width:100%;height:auto;aspect-ratio:16/9}} .hit .top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px} .hit .src{font-size:11px;padding:2px 9px;border-radius:20px;font-weight:700} .hit .src.tr{color:var(--accent);background:var(--accent-soft);border:1px solid rgba(15,118,110,.3)} .hit .src.qa{color:var(--green);background:rgba(31,157,87,.1);border:1px solid rgba(31,157,87,.3)} .hit .src.cm{color:var(--amber);background:rgba(230,154,11,.1);border:1px solid rgba(230,154,11,.35)} .hit .path{color:var(--muted2);font-size:12px} .hit .ttl{font-weight:700;font-size:15.5px} .hit .ttl a{color:var(--text)} .hit .snip{color:var(--muted);font-size:14.5px;margin:5px 0 9px;line-height:1.55} .hit mark{background:rgba(15,118,110,.2);color:inherit;border-radius:3px;padding:0 2px} .hit .go2{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--accent);font-weight:600;cursor:pointer;background:var(--accent-soft);padding:6px 11px;border-radius:8px} /* ===== home / hub ===== */ .wrap{max-width:var(--maxw);margin:0 auto;padding:24px 20px 60px} .hero{text-align:center;padding:26px 0 10px} .hero h1{font-size:36px;line-height:1.15;margin:0 0 10px;font-weight:800} .hero .sub{color:var(--muted);font-size:17px;max-width:640px;margin:0 auto 20px} .hero .sform{max-width:600px;margin:0 auto} .hero .exs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px} .hero .ex{font-size:13px;padding:6px 12px;border-radius:20px;background:var(--surface);border:1px solid var(--border);color:var(--muted);cursor:pointer} .hero .ex:hover{border-color:var(--accent);color:var(--accent);text-decoration:none} .htitle{font-size:20px;margin:36px 0 14px;display:flex;align-items:center;gap:10px} .htitle a{font-size:13px;font-weight:600;margin-left:auto} .silos{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:640px){.silos{grid-template-columns:1fr}} .silo{display:block;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;color:var(--text)} .silo:hover{border-color:var(--accent);text-decoration:none} .silo .ic{width:46px;height:46px;border-radius:11px;background:rgba(15,118,110,.1);display:grid;place-items:center;font-size:24px;margin-bottom:12px} .silo h3{margin:0 0 4px;font-size:19px;display:flex;align-items:center;gap:10px} .silo .cnt{color:var(--muted2);font-size:13px;margin-bottom:10px} .silo .subs{display:flex;gap:6px;flex-wrap:wrap} .silo.soon{opacity:.75} .silo.soon .ic{background:var(--surface2)} .badge-soon{font-size:11px;font-weight:700;color:var(--amber);background:rgba(230,154,11,.12);border:1px solid rgba(230,154,11,.3);padding:2px 8px;border-radius:20px} .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} @media(max-width:820px){.cards{grid-template-columns:1fr 1fr}} @media(max-width:560px){.cards{grid-template-columns:1fr}} .card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column} .card .ph{aspect-ratio:16/9;background:linear-gradient(135deg,#cdd7e2,#aeb9c7);background-size:cover;background-position:center;position:relative;display:grid;place-items:center;color:#fff;font-size:20px} body.dark .card .ph{background:linear-gradient(135deg,#2b3b4f,#1b2530);color:#5d7a93} .card .ph .du{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.7);color:#fff;border-radius:5px;font-size:11px;padding:2px 6px} .card .ph .ty{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.62);color:#fff;border-radius:5px;font-size:11px;padding:2px 7px;font-weight:600} .card .bd{padding:13px 15px 15px;display:flex;flex-direction:column;gap:7px} .card h3{font-size:16px;margin:0;line-height:1.3} .card h3 a{color:var(--text)} .card .ex{color:var(--muted);font-size:13.5px;line-height:1.5} .card .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted2);font-size:12px;margin-top:auto} .how{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px} @media(max-width:640px){.how{grid-template-columns:1fr}} .how .st{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px} .how .st .n{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:700;display:grid;place-items:center;margin-bottom:10px} .how .st b{display:block;margin-bottom:5px} .how .st p{margin:0;color:var(--muted);font-size:14px} @media(max-width:640px){.hero h1{font-size:27px}.hero .sub{font-size:15px}} /* sub-topic grid (silo hub) */ .subgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} @media(max-width:760px){.subgrid{grid-template-columns:1fr 1fr}} @media(max-width:480px){.subgrid{grid-template-columns:1fr}} .subtile{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:13px 15px;color:var(--text)} .subtile:hover{border-color:var(--accent);text-decoration:none} .subtile .ic{width:38px;height:38px;border-radius:9px;background:var(--surface2);display:grid;place-items:center;font-size:18px;flex:none} .subtile b{font-size:15px;display:block} .subtile .c{color:var(--muted2);font-size:12px} /* Submit spinner: a search is a full page load, so the button says "working" while it happens. The JS pins the button's width first, so neither the header row nor the form shifts. */ .kspin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.45); border-top-color:#fff;border-radius:50%;animation:kspin .7s linear infinite} @keyframes kspin{to{transform:rotate(360deg)}} button[aria-busy="true"]{display:inline-flex;align-items:center;justify-content:center} /* Quiet pointer to the header search bar (home page, catalogue page). Deliberately low-key — the accented control is the tool's, and the search bar itself lives in the header. */ .ksearch-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; margin:28px 0 0;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface)} .ksearch-cta b{display:block;font-size:15px;margin-bottom:2px} .ksearch-cta .mut{display:block;max-width:640px} .ksearch-cta .ksignin-alt{flex:none} /* Catalogue page (/{lang}/sections): a directory — big SECTION heading, its topics listed underneath in columns, the way category portals used to lay this out. */ .kcat{padding:22px 0;border-top:1px solid var(--border)} .kcat-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px;font-size:23px;line-height:1.2} .kcat-h a{color:var(--text)} .kcat-h a:hover{color:var(--accent);text-decoration:none} .kcat-ic{width:38px;height:38px;border-radius:10px;background:rgba(15,118,110,.1);display:grid;place-items:center;font-size:20px;flex:none} .kcat-cnt{color:var(--muted2);font-size:13px;font-weight:400;margin-left:4px} .kcat-intro{color:var(--muted);font-size:14.5px;margin:0 0 12px;max-width:760px} .kcat-subs{list-style:none;margin:10px 0 0;padding:0;columns:3;column-gap:26px} .kcat-subs li{break-inside:avoid;display:flex;align-items:baseline;gap:8px;padding:5px 0} .kcat-subs li a{font-size:15px;color:var(--text)} .kcat-subs li a:hover{color:var(--accent)} .kcat-n{color:var(--muted2);font-size:12px} @media(max-width:760px){.kcat-subs{columns:2}} @media(max-width:480px){.kcat-subs{columns:1}} /* Q&A list */ .qalist{display:flex;flex-direction:column} .qarow{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--border);color:var(--text)} .qarow:last-child{border-bottom:0} .qarow:hover{text-decoration:none} .qarow .qic{color:var(--green);font-weight:800;flex:none;font-size:15px} .qarow .q{flex:1;font-weight:600;font-size:15px} .qarow:hover .q{color:var(--accent)} .qarow .qm{color:var(--muted2);font-size:12px;flex:none} .result{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;margin-top:22px} .result .rh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px} .result .rh b{font-size:16px} .okbadge{font-size:11px;font-weight:700;color:var(--green);background:rgba(31,157,87,.1);border:1px solid rgba(31,157,87,.3);padding:2px 9px;border-radius:20px} .rtabs{display:flex;gap:6px;margin:12px 0 14px} .rtabs .tb{padding:7px 13px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;font-size:13px;font-weight:600} .rtabs .tb.on{background:var(--surface2);color:var(--text)} .transcript .seg{display:flex;gap:12px;padding:7px 0} .transcript .seg .ts{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;flex:none;font-size:13px;padding-top:3px;width:48px} .transcript .seg p{margin:0;font-size:15px} .dlbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)} .dlbtn{border:1px solid var(--border);background:var(--surface2);border-radius:8px;padding:8px 13px;font-size:13px;font-weight:600;cursor:pointer;color:var(--text)} .dlbtn:hover{border-color:var(--accent)} /* footer */ .bfoot{border-top:1px solid var(--border);background:var(--surface);margin-top:40px} .bfoot .in{max-width:var(--maxw);margin:0 auto;padding:28px 20px;display:flex;gap:30px;flex-wrap:wrap;color:var(--muted);font-size:14px} .bfoot a{color:var(--muted)} .bfoot .made{color:var(--muted2);font-size:13px;margin-top:8px;max-width:440px} .bfoot b{color:var(--text)} /* ===== tablet: drop sidebar ===== */ @media(max-width:900px){ .page{grid-template-columns:1fr} .side{display:none} } /* ===== mobile: burger header ===== */ @media(max-width:760px){ .bhead .in{gap:10px} .blogo{margin-right:auto} /* Mobile menu: a fixed-width panel that slides in from the right (Comentor-style), over a dimmed backdrop — not a full-width push-down dropdown. */ .bnav{position:fixed;top:0;right:0;bottom:0;left:auto;width:300px;max-width:84vw; flex-direction:column;align-items:stretch;gap:4px; background:var(--surface);border-left:1px solid var(--border);padding:14px 16px 24px;margin-left:0; transform:translateX(100%);transition:transform .22s ease;display:flex; box-shadow:-10px 0 28px rgba(0,0,0,.18);z-index:80;overflow-y:auto} .bnav.open{transform:translateX(0)} .navspace{display:none} .bnav a{padding:11px 10px;border-radius:8px} .bnav .sel,.bnav select{width:100%} .icbtn.burger{display:grid} .page{padding:18px 15px 50px} .art h1{font-size:25px} h2.sec{font-size:19px;margin:28px 0 10px} .kratko p{font-size:15.5px} .norms .row{flex-direction:column;gap:2px} .norms .v{text-align:left;max-width:none} .search{padding:18px 15px 50px} } @media(max-width:460px){ .ask .field{flex-direction:column} .ask .go{padding:12px} .byline{font-size:13px} .sform{flex-direction:column} .sform .go{padding:12px} }