/* ============================================================
   razdel.css — sphere/раздел page, 4 layout variants (mobile-first).
   Reuses tokens + the .vcard viz-kit from /assets/styles.css.
   Sphere colour is driven by --c (set per page on .rz).
   A = calm bento · B = chaotic scatter (no container) ·
   C = editorial river (no boxes) · D = real app-screen peeks.
   ============================================================ */
:root{--c:#81B52C;}
body{background:var(--bg);color:var(--ink);min-height:100svh;overflow-x:clip;}

.rz{position:relative;max-width:440px;margin-inline:auto;min-height:100svh;
  padding:70px 0 0;display:flex;flex-direction:column;}

/* header reuses .pz-top / .brand / .pz-seclabel from pages.css */

/* ---------- shared head ---------- */
.rz-head{padding:8px 20px 0;}
.rz-head h1,.rz-head h2{font-family:'Sansation',sans-serif;font-weight:700;
  font-size:clamp(1.68rem,7vw,2.1rem);line-height:1.08;letter-spacing:-.018em;color:var(--ink);}
.rz-head h1 .accent,.rz-head h2 .accent{color:var(--accent);}
.rz-head .sub{margin-top:.55rem;font-size:1rem;line-height:1.42;color:var(--ink-muted);max-width:33ch;}
.rz-head--tight h1,.rz-head--tight h2{font-size:clamp(1.5rem,6.4vw,1.85rem);}
.rz-head--tight .sub{margin-top:.45rem;font-size:.96rem;}
/* title row with sphere-icon tile on the right */
.rz-head--ic{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;}
.rz-head--ic .rz-htext{min-width:0;}
.rz-ic{flex:none;width:56px;height:56px;border-radius:18px;display:grid;place-items:center;margin-top:4px;
  background:color-mix(in srgb,var(--c) 16%,var(--surface));box-shadow:0 6px 16px -8px rgba(43,41,56,.28);}
.rz-ic i{width:46%;height:46%;background:var(--c);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;}

/* render reused vcards in finished state (no reveal animation here) */
.rz .vcard{opacity:1;}
.rz .mac-bar i,.rz .track i,.rz .cat-bar i{width:var(--w);}
.rz .vweek .wb i{height:var(--h);}
.rz .lab-scale i{opacity:1;transform:translate(-50%,-50%) scale(1);}
.rz .titem.done .cb::after{transform:rotate(43deg) scale(1);}
.rz .ring .rg-a{stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,60));}
.rz .vtrip-stats{display:flex;}
/* per-row cost, flush-right, muted — reconciles with the vtrip budget/spent footer */
.rz .vtrip .titem-cost{margin-left:auto;font-size:.8rem;font-weight:600;color:var(--ink-faint);white-space:nowrap;}
.rz .vnote{display:inline-flex;opacity:1;}

/* ============================================================
   A — «Панель»: calm bento (varied sizes, aligned — NOT a rigid 2×2)
   ============================================================ */
.rza{padding:14px 16px 34px;display:flex;flex-direction:column;gap:12px;}
.rza .vcard{width:100%;}
.rza > .vcard:first-child{margin-top:22px;}   /* clear the top-note from the sub */
.rza-row{display:flex;gap:12px;align-items:stretch;}
.rza-row .vcard{flex:1 1 0;min-width:0;}

/* ============================================================
   B — «Витрина»: chaotic plashkas floating on cream, no wrapper.
   Vertical controlled-chaos: alternating sides, varied widths,
   small tilts, gentle overlap → fills the column, zero dead air.
   ============================================================ */
/* height-aware: the scatter takes the leftover height and spreads the cards
   to fill it (gaps grow/shrink with the screen); bottom padding reserves a
   fixed strip for the assistant/mascot on any screen height. */
.rzb{position:relative;display:flex;flex-direction:column;flex:1;justify-content:space-between;
  padding:14px 12px 96px;}
.rzb-p{position:relative;transform:rotate(var(--r,0deg));}
.rzb-p > *{width:100%;}
/* 4-plashka sphere scatter: strong left/right zig-zag, varied widths, tilts,
   gentle overlap so the tossed cards fill the frame with no empty pockets.
   Insight slot is the small one tucked to a side. */
/* varied tilts (magnitude AND direction not a strict herringbone), varied
   widths, gaps and horizontal bias/edge-bleed → organic, interesting, but
   no card-on-card intersections. */
.rzb-p.pa{align-self:flex-start;width:88%;--r:-2.4deg;z-index:4;margin-left:-3%;}
.rzb-p.pb{align-self:flex-end;width:73%;--r:1.5deg;z-index:7;margin-right:-4%;}
.rzb-p.pc{align-self:flex-start;width:93%;--r:-0.8deg;z-index:5;margin-left:-3%;}
.rzb-p.pd{align-self:flex-end;width:84%;--r:2.6deg;z-index:6;margin-right:-3%;}
.rzb-p.pe{align-self:flex-start;width:82%;--r:-1.7deg;z-index:5;margin-left:-1%;}

/* ---- FINANCE: same system, different composition (hero on the right, insight
   lower, mirrored tilts) so the page doesn't twin Здоровье ---- */
.rzb--fin .rzb-p.pa{align-self:flex-end;width:92%;--r:1.7deg;margin-left:0;margin-right:-3%;}
.rzb--fin .rzb-p.pb{align-self:flex-start;width:84%;--r:-2.5deg;margin-right:0;margin-left:-3%;}
.rzb--fin .rzb-p.pc{align-self:flex-end;width:77%;--r:0.9deg;z-index:7;margin-left:0;margin-right:-4%;}
.rzb--fin .rzb-p.pd{align-self:flex-start;width:89%;--r:-1.4deg;margin-right:0;margin-left:-3%;}

/* ---- TASKS: hero left, insight LAST (bottom-right) ---- */
.rzb--tasks .rzb-p.pa{align-self:flex-start;width:91%;--r:-1.5deg;margin-right:0;margin-left:-3%;}
.rzb--tasks .rzb-p.pb{align-self:flex-end;width:83%;--r:2.4deg;margin-left:0;margin-right:-3%;}
.rzb--tasks .rzb-p.pc{align-self:flex-start;width:88%;--r:-2.6deg;margin-right:0;margin-left:-3%;}
.rzb--tasks .rzb-p.pd{align-self:flex-end;width:79%;--r:1.2deg;z-index:7;margin-left:0;margin-right:-4%;}

/* ---- NOTES: hero right, insight 2nd (left) ---- */
.rzb--notes .rzb-p.pa{align-self:flex-end;width:91%;--r:2.6deg;margin-left:0;margin-right:-3%;}
.rzb--notes .rzb-p.pb{align-self:flex-start;width:78%;--r:-1.3deg;z-index:7;margin-right:0;margin-left:-3%;}
.rzb--notes .rzb-p.pc{align-self:flex-end;width:85%;--r:1.6deg;margin-left:0;margin-right:-3%;}
.rzb--notes .rzb-p.pd{align-self:flex-start;width:89%;--r:-2.2deg;margin-right:0;margin-left:-3%;}
/* one unified soft shadow so the chaos reads deliberate */
.rzb .vcard,.rzb .rz-pro,.rzb .rz-voice{
  box-shadow:0 20px 40px -20px rgba(43,41,56,.34),0 5px 14px -10px rgba(43,41,56,.14);}

/* insight plashka (peach) — mascot avatar + text, no label */
.rz-pro{background:color-mix(in srgb,var(--accent) 9%,var(--surface));border-radius:18px;padding:12px 15px 13px;
  display:flex;gap:10px;align-items:flex-start;}
.rz-pro-av{width:27px;height:27px;border-radius:50%;flex:none;margin-top:1px;}
.rz-pro p{font-size:.95rem;line-height:1.34;color:var(--ink);font-weight:500;}
.rz-pro p b{color:var(--ink);font-weight:800;}

/* compact segmented progress — a slim, pretty count in a card header (no ring) */
.segprog{display:inline-flex;gap:3px;vertical-align:middle;margin-right:8px;}
.segprog i{width:13px;height:6px;border-radius:3px;background:var(--surface-muted);}
.segprog i.on{background:var(--c,#EF7E2C);}

/* products shopping-list — 2-column checklist */
.prodgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;}

/* voice-capture plashka */
.rz-voice{display:flex;align-items:center;gap:11px;background:var(--surface);border-radius:16px;padding:9px 15px 9px 9px;}
.rz-voice .vplay{width:37px;height:37px;border-radius:50%;background:var(--c);display:grid;place-items:center;flex:none;}
.rz-voice .vplay svg{width:14px;height:14px;fill:#fff;}
.rz-voice .wave{display:flex;align-items:center;gap:2.5px;height:24px;flex:none;}
.rz-voice .wave i{width:2.6px;border-radius:2px;background:color-mix(in srgb,var(--c) 60%,var(--surface-muted));}
.rz-voice .vt{display:flex;flex-direction:column;gap:2px;min-width:0;font-family:'Onest',sans-serif;}
.rz-voice .vt b{font-weight:700;font-size:.85rem;color:var(--ink);line-height:1.12;}
.rz-voice .vt small{font-weight:600;font-size:.72rem;color:var(--ink-faint);}

/* mascot peeking from the very bottom edge (fixed → clipped, no scroll) */
.rz-peek{position:fixed;z-index:0;bottom:clamp(-120px,-9vh,-96px);left:40%;
  width:122px;transform:rotate(-6deg);pointer-events:none;}

/* ============================================================
   C — «Полоса»: editorial river, no white boxes. Everything sits
   on cream; two-font hierarchy + a sphere-colour spine carry it.
   ============================================================ */
.rzc{padding:8px 22px 30px;display:flex;flex-direction:column;position:relative;flex:1;}
.rzc-metrics{display:flex;margin-top:26px;}
.rzc-m{flex:1;}
.rzc-m + .rzc-m{border-left:1px solid var(--outline);padding-left:15px;}
.rzc-m:not(:last-child){padding-right:15px;}
.rzc-m .n{font-family:'Sansation',sans-serif;font-weight:700;font-size:1.86rem;color:var(--ink);
  font-feature-settings:'tnum';line-height:1;}
.rzc-m .n em{font-style:normal;font-size:.86rem;font-weight:700;color:var(--c);margin-left:2px;}
.rzc-m .cap{display:block;margin-top:6px;font-size:.8rem;color:var(--ink-muted);font-weight:600;line-height:1.2;}

.rzc-rule{height:1px;background:linear-gradient(90deg,var(--c),transparent);opacity:.5;margin:26px 0 22px;}

/* tuto pull-quote (no box) */
.rzc-quote{display:flex;gap:12px;align-items:flex-start;}
.rzc-quote img{width:34px;height:34px;border-radius:50%;flex:none;margin-top:2px;}
.rzc-quote p{font-family:'Sansation',sans-serif;font-weight:700;font-size:1.14rem;line-height:1.34;color:var(--ink);letter-spacing:-.01em;}
.rzc-quote p .accent{color:var(--accent);}

/* inline analyses line (naked data) */
.rzc-lab{margin-top:26px;}
.rzc-h{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px;}
.rzc-labrow{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:1rem;}
.rzc-labrow span{font-weight:600;color:var(--ink);}
.rzc-labrow span b{font-family:'Sansation',sans-serif;font-weight:700;font-feature-settings:'tnum';margin-left:5px;}
.rzc-labrow span.low b{color:var(--accent);}
.rzc-labrow span.low::after{content:"↓";color:var(--accent);font-weight:800;margin-left:2px;}

/* closing breadth line — pins to the bottom so the page reads full */
.rzc-more{margin-top:auto;padding-top:30px;font-size:.95rem;line-height:1.5;color:var(--ink-muted);
  border-top:1px solid var(--outline);}
.rzc-more::before{content:"Ещё в разделе";display:block;font-size:.72rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:9px;}
.rzc-more b{color:var(--c);font-weight:700;}

/* naked week bars */
.rzc-week{margin-top:26px;}
.rzc-bars{display:flex;align-items:flex-end;gap:9px;height:84px;margin-top:12px;}
.rzc-bars i{flex:1;background:color-mix(in srgb,var(--c) 30%,var(--surface-muted));border-radius:6px;filter:url(#wc);}
.rzc-bars i.bad{background:color-mix(in srgb,var(--accent) 62%,var(--surface));}
.rzc-wx{display:flex;gap:9px;margin-top:7px;}
.rzc-wx span{flex:1;text-align:center;font-size:.66rem;color:var(--ink-faint);font-weight:600;}

/* ============================================================
   D — «Живые экраны»: real cropped app screens as device-less
   peeks (rounded mask + soft shadow + small tilt). Honest product.
   ============================================================ */
/* header row: title + sphere-icon tile (sphere identity) */
.rzd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;}
.rzd-head .rzd-headtext{min-width:0;}
.rzd-ic{flex:none;width:54px;height:54px;border-radius:18px;display:grid;place-items:center;margin-top:3px;
  background:color-mix(in srgb,var(--c) 16%,var(--surface));box-shadow:0 6px 16px -8px rgba(43,41,56,.28);}
.rzd-ic i{width:46%;height:46%;background:var(--c);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;}

.rzd{position:relative;padding:20px 10px 24px;display:flex;flex-direction:column;flex:1;}
.rzd-stage{position:relative;flex:1;min-height:clamp(480px,66vh,580px);}
.rzd-shot{position:absolute;border-radius:22px;overflow:hidden;background:var(--surface);
  box-shadow:0 30px 56px -26px rgba(43,41,56,.42),0 8px 20px -12px rgba(43,41,56,.24);}
.rzd-shot img{width:100%;display:block;}
.rzd-hero{left:1%;top:0;width:70%;transform:rotate(-3deg);z-index:2;}
.rzd-sec{right:0;top:40%;width:57%;transform:rotate(4.5deg);z-index:3;}
/* tuto note floating on the cream lower-left — adds the «noticed» beat and
   fills the space beside the analyses peek */
.rzd-note{position:absolute;z-index:5;left:2%;top:74%;display:flex;align-items:center;gap:7px;
  background:color-mix(in srgb,var(--accent) 10%,var(--surface));border-radius:14px;padding:8px 13px 8px 9px;
  box-shadow:0 16px 30px -14px rgba(43,41,56,.32);transform:rotate(-3deg);max-width:44%;}
.rzd-note img{width:24px;height:24px;border-radius:50%;flex:none;}
.rzd-note span{font-family:'Onest',sans-serif;font-weight:700;font-size:.84rem;color:var(--ink);line-height:1.15;}
.rzd-note span b{color:var(--accent);}