/* Direction 01 · לוח שקט / Quiet Ledger — ported from Claude Design.
 *
 * Loaded only when this theme is active (app/themes.py → Theme.css). Structure only:
 * the colour and type tokens live in themes.css under [data-theme="ledger"], so the
 * platform can drive them and the admin portal inherits the palette.
 *
 * @container is kept rather than converted to @media: .l-page declares
 * container-type, and in production its inline size IS the viewport, so it behaves
 * identically while staying component-scoped.
 */
.l-page{
  container-type:inline-size; direction:rtl; background:var(--bg); color:var(--ink);
  font-family:var(--font); min-height:100vh; display:flex; flex-direction:column;
}
.l-page *{box-sizing:border-box}
.l-page h1,.l-page h2,.l-page h3{font-family:var(--display);margin:0;font-weight:800;line-height:1.12}
.l-page p{margin:0;text-wrap:pretty}
.l-page :where(a){color:var(--ink);text-decoration:none}
.l-page a:hover{color:var(--accent)}
.l-page :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.l-page ::selection{background:var(--accent-soft)}
.ltr{direction:ltr;unicode-bidi:isolate}
.l-sec{padding:26px 20px}
.l-lab{font-size:12px;font-weight:700;color:var(--accent)}
.l-h{font-family:var(--display);font-size:22px;font-weight:500;padding-bottom:14px}
.l-top{display:flex;align-items:center;gap:11px;padding:16px 20px}
.l-logo{width:36px;height:36px;flex:0 0 36px;border-radius:999px;overflow:hidden;background:var(--hero-bg)}
.l-logo img{width:100%;height:100%;object-fit:cover;display:block}
.l-topname{font-size:12.5px;font-weight:600;color:var(--muted)}
.l-open{padding:8px 20px 30px;display:flex;flex-direction:column;gap:16px}
.l-name{font-size:31px;font-weight:500;max-width:20ch}
.l-desc{font-size:16px;line-height:1.72;color:var(--muted);max-width:44ch}
.l-proof{font-size:13.5px;font-weight:600;color:var(--accent);border-inline-start:2px solid var(--accent);padding-inline-start:10px}
.l-acts{display:flex;flex-wrap:wrap;gap:9px;padding-top:2px}
.l-btn{border:1px solid var(--accent);color:var(--accent);background:transparent;font:600 15px var(--font);
  min-height:46px;padding:11px 17px;border-radius:var(--radius);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer;transition:background .18s,color .18s}
.l-btn:hover{background:var(--accent-soft);color:var(--accent)}
.l-btn-p{background:var(--accent);color:var(--accent-ink)}
.l-btn-p:hover{background:#174842;color:var(--accent-ink)}
.l-rows{display:grid;border-top:1px solid var(--line)}
.l-row{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline}
.l-row dt{font-size:12px;font-weight:700;color:var(--muted)}
.l-row dd{margin:0;font-size:16px;line-height:1.5}
.l-rows dl{margin:0;display:contents}
.l-heroimg{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--hero-bg)}
.l-heroimg img{width:100%;height:100%;object-fit:cover;display:block}
.l-mono{display:none}
.l-page[data-img="none"] .l-heroimg{display:none}
.l-mono{position:relative;overflow:hidden}
.l-mono .v-motif{inset-inline-end:16px;bottom:-22px;opacity:.13}
.l-page[data-img="none"] .l-mono{display:flex;aspect-ratio:3/2;background:var(--hero-bg);color:var(--hero-ink);
  align-items:flex-end;justify-content:center;gap:20px;padding:22px}
.l-monoletter{font-family:var(--display);font-weight:500;font-size:132px;line-height:.78;color:var(--accent)}
.l-monometa{display:flex;flex-direction:column;gap:5px;text-align:start;border-top:1px solid var(--ink);padding-top:9px;align-self:flex-end}
.l-monometa b{font-family:var(--display);font-size:24px;font-weight:500}
.l-monometa span{font-size:11.5px;font-weight:700;color:var(--muted)}
.l-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 20px}
.l-gal figure{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);background:var(--hero-bg)}
.l-gal img{width:100%;height:100%;object-fit:cover;display:block}
.l-faq details{border-bottom:1px solid var(--line)}
.l-faq summary{list-style:none;cursor:pointer;padding:14px 0;font-size:16px;font-weight:600;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.l-faq summary::-webkit-details-marker{display:none}
.l-faq summary::after{content:"+";color:var(--accent);font-weight:700}
.l-faq details[open] summary::after{content:"–"}
.l-faq p{font-size:15px;line-height:1.7;color:var(--muted);padding-bottom:15px;max-width:44ch}
.l-lead{background:var(--surface);border-top:1px solid var(--line)}
.l-form{display:grid;gap:10px;max-width:34ch}
.l-form label{font-size:12px;font-weight:700;color:var(--muted);display:grid;gap:5px}
.l-form input,.l-form textarea{font:400 16px var(--font);min-height:46px;padding:11px 12px;background:var(--bg);
  border:1px solid var(--line);color:var(--ink);border-radius:var(--radius)}
.l-form input:hover,.l-form textarea:hover{border-color:var(--accent)}
.l-form textarea{min-height:80px;resize:vertical}
.l-foot{padding:20px;font-size:12px;color:var(--muted);margin-top:auto}
.l-sticky{position:sticky;bottom:0;z-index:5;margin-top:auto}
/* padding-inline-end reserves the corner widget.js puts its bubble in. */
.l-bar{display:flex;gap:9px;padding:11px 20px;padding-inline-end:80px;background:var(--surface);border-top:1px solid var(--line)}
.l-bar .l-btn{flex:1;justify-content:center}
.l-min .l-open{padding-block:26px 22px}
.l-min .l-name{font-size:28px}
.l-bigphone{font-family:var(--display);font-weight:500;font-size:clamp(30px,13cqi,76px);line-height:1;display:block;color:var(--accent);white-space:nowrap}
.l-min .l-row{grid-template-columns:1fr;gap:6px}
.l-quiet{flex:1;min-height:120px;background:
  radial-gradient(circle at 82% 18%,var(--accent-soft) 0 38%,transparent 39%),
  var(--bg);}
@container (min-width:700px){
  .l-sec{padding:52px 64px}
  .l-top{padding:26px 64px}
  .l-open{padding:16px 64px 56px;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end}
  .l-name{font-size:60px;max-width:18ch}
  .l-desc{font-size:18px}
  .l-acts{grid-column:2;grid-row:2}
  .l-row{grid-template-columns:150px 1fr;padding:18px 0}
  .l-row dd{font-size:18px}
  .l-heroimg{aspect-ratio:2.6/1}
  /* Shorter and grouped at wide sizes — a tall band with the letter in one
     corner and the count in the other is dead space, not composition. */
  .l-page[data-img="none"] .l-mono{aspect-ratio:4.4/1;gap:40px;padding:30px}
  .l-monoletter{font-size:210px}
  .l-gal{padding-inline:64px;gap:12px}
  .l-bar{padding-inline:64px;padding-inline-end:104px}
}
@media (prefers-reduced-motion:no-preference){
  [data-motion="on"] .l-page>*{animation:l-fade .62s cubic-bezier(.22,.68,.3,1) both}
  [data-motion="on"] .l-page>*:nth-child(2){animation-delay:.07s}
  [data-motion="on"] .l-page>*:nth-child(3){animation-delay:.14s}
  [data-motion="on"] .l-page>*:nth-child(4){animation-delay:.21s}
  [data-motion="on"] .l-page>*:nth-child(n+5){animation-delay:.28s}
  @keyframes l-fade{from{opacity:0;transform:translateY(8px)}}
}

@media (min-width:1180px){
  /* A ledger is a sheet, not a wall: past this width the page centres instead of
     stretching, so a label stays beside its value. */
  .l-page{max-width:1120px;margin-inline:auto;box-shadow:0 0 0 1px var(--line)}
}