/* Membership app - Hadar brand. Colors/fonts pulled from brand/brand.json. */
@font-face { font-family: "Spider"; src: url("/static/fonts/spider-regular.otf?v=revert20260726") format("opentype"); font-weight: 400; }
@font-face { font-family: "Spider"; src: url("/static/fonts/spider-black.otf?v=revert20260726") format("opentype"); font-weight: 900; }
@font-face { font-family: "Kohenet"; src: url("/static/fonts/kohenet.otf?v=revert20260726") format("opentype"); font-weight: 400; }

/* All interactive elements inherit the brand font (Spider) - browsers default buttons/inputs to
   Arial otherwise, which made .pill render in the wrong font (fixed 29/6/2026). */
button, input, select, textarea, optgroup{font-family:inherit}
:root{
  --ivory:#fdf8ed; --cream:#f6eedd; --pearl:#ece7e4; --sand:#ddd4c8;
  --powder:#e6eef3; --teal:#bdd5db; --sage:#afc1b3; --sage-grey:#cddbd3; --mint:#dee6e0;
  --ink:#42584A; --heading:#5E7A66; --muted:#85978B; --accent:#5E7A66;
  --card:#ffffff; --radius:22px; --shadow:0 10px 34px rgba(66,88,74,.09);
  --hairline:rgba(221,212,200,.7);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Spider", "Kohenet", serif;
  /* Hadar's planner look: her favourite watercolor-horizon background (planner-bg-1),
     with a faint cream wash so text stays crisp. */
  background:
    linear-gradient(rgba(253,248,237,.16), rgba(253,248,237,.30)),
    url("/static/planner-bg-1.jpg") center center / cover fixed,
    var(--cream);
  color:var(--ink); direction:rtl; line-height:1.6; min-height:100vh;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-weight:900;color:var(--heading);line-height:1.25;margin:.2em 0 .5em}
.script{font-family:"Kohenet",cursive;color:var(--heading)}
.muted{color:var(--muted)}
.btn{
  display:inline-block;background:var(--accent);color:#fff;border:none;border-radius:999px;
  padding:.6em 1.4em;font-family:inherit;font-size:1rem;cursor:pointer;transition:.15s;
}
.btn:hover{filter:brightness(1.07);text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--sage)}
.btn.small{padding:.35em .9em;font-size:.9rem}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;border:1px solid var(--hairline)}

/* top bar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  /* NOTE: no backdrop-filter here. A sticky/position backdrop-filter layer crashes the macOS
     Safari WebKit/GPU process when a Vimeo video enters fullscreen ("This webpage was reloaded
     because a problem occurred") - reported by שני צדוק 318 (15/7), Safari desktop, on a lesson
     video. We keep the light translucent bar with a near-opaque background instead of a blur. */
  padding:14px 28px;background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--pearl);position:sticky;top:0;z-index:10;
}
.topbar .brand{display:flex;align-items:center;gap:14px}
.topbar img{height:38px}
.topbar-tfc{font-family:"Abril Fatface",Georgia,serif;color:var(--heading);font-size:1.05rem;
  letter-spacing:1px;border-inline-start:1px solid var(--hairline);padding-inline-start:14px}
@media(max-width:560px){.topbar-tfc{display:none}}
.topbar nav a{margin-inline-start:18px;color:var(--ink)}
.wrap{max-width:1060px;margin:0 auto;padding:28px}
@media(max-width:480px){.wrap{padding:14px 16px}}
/* Mobile topbar (12/7): HAMBURGER menu on phones. The ☰ label toggles a hidden checkbox (#navtog);
   the nav drops down as a full-width panel below the bar. Desktop hides the hamburger + checkbox and
   keeps the normal inline nav. CSS + a 2-element markup add only (checkbox+label in base.html) - no JS
   and no base.html overwrite (prod base.html is deploy-divergent: the life.board line is removed there). */
.hamb{display:none}
.navtog{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
@media(max-width:700px){
  .topbar{padding:10px 14px}
  .hamb{display:inline-flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;
    cursor:pointer;padding:2px 10px;color:var(--ink);user-select:none}
  .topbar > nav{display:none;position:absolute;top:100%;inset-inline:0;flex-direction:column;
    align-items:flex-start;gap:2px;background:#ffffff;border-bottom:1px solid var(--pearl);
    padding:8px 20px 16px;box-shadow:0 10px 24px rgba(60,50,30,.12);z-index:30}
  .navtog:checked ~ nav{display:flex}
  .topbar nav a{margin-inline-start:0;width:100%;padding:10px 0;white-space:nowrap}
  .persona-link{flex-direction:row;gap:6px;align-items:baseline}
  .persona-link .pr{color:var(--muted);font-size:.7rem}
}

/* login */
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{width:100%;max-width:420px;text-align:center}
.login-card img{height:64px;margin-bottom:8px}
.tfc-en{font-family:"Abril Fatface",Georgia,serif;color:var(--heading);font-size:1.5rem;letter-spacing:1.5px;margin:-4px 0 6px;line-height:1.1}
/* planner-style title banner: Hadar's real watercolor ellipse (PNG) behind a hand-script title,
   exactly like her planning boards. The oval stretches to wrap the title text. */
.pill-title{display:inline-block;font-family:"Kohenet",Spider,serif;font-weight:400;color:var(--heading);
  font-size:2.1rem;line-height:1.1;
  background:url("/static/title-ellipse.png") center center / 100% 100% no-repeat;
  padding:.42em 1.9em .46em;margin:.1em 0}
.login-card input{
  width:100%;padding:.8em 1em;margin:.4em 0;border:1.5px solid var(--sand);border-radius:12px;
  font-family:inherit;font-size:1rem;background:#fff;color:var(--ink)
}
.login-card .btn{width:100%;margin-top:10px}
.demo-hint{margin-top:18px;font-size:.86rem;color:var(--muted);text-align:start;background:var(--cream);
  border-radius:12px;padding:12px 14px}
.error{background:#fbe6e2;color:#9a3b2c;border-radius:10px;padding:.5em .8em;margin:.4em 0}

/* dashboard */
.hero{display:flex;gap:22px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:6px}
.progress-ring{display:flex;align-items:center;gap:18px}
.bar{height:14px;background:var(--pearl);border-radius:999px;overflow:hidden;flex:1;min-width:180px}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--sage),var(--teal));border-radius:999px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
.steplist{list-style:none;padding:0;margin:0}
.steplist li{display:flex;align-items:center;gap:12px;padding:11px 6px;border-bottom:1px solid var(--pearl)}
.steplist li:last-child{border-bottom:none}
.dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;flex:0 0 auto;
  background:var(--pearl);color:var(--muted)}
/* step numbers are the protocol week + a letter ('4ב'), so the dot can carry two glyphs */
.dot{line-height:1;letter-spacing:-.02em;white-space:nowrap}
.dot.two{font-size:.68rem}
.dot.done{background:var(--sage);color:#fff}
.dot.current{background:var(--accent);color:#fff;box-shadow:0 0 0 4px rgba(94,122,102,.18)}
.dot.locked{background:var(--pearl);color:var(--sand);opacity:.45}
/* 'resume' = the furthest step during an edit detour: reached + in-progress (not a done step). Hollow
   accent ring reads as "your current spot you stepped away from", distinct from the solid done/current. */
.dot.resume{background:#fff;color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.step-t{flex:1}
.step-t small{display:block;color:var(--muted);font-size:.82rem}
/* display:block above overrides HTML [hidden] on the ✓ mark (mi-done) - restore hide (רחל 154, 7/7) */
.step-t small[hidden]{display:none}
.built{list-style:none;padding:0;margin:0}
.built li{padding:9px 0;border-bottom:1px dashed var(--pearl)}
.built b{color:var(--heading)}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;background:var(--mint);color:var(--heading);border-radius:999px;padding:.15em .7em}
.lock-banner{background:#fff4e6;border:1px solid #f0d9b5;color:#8a6a2f;border-radius:12px;padding:12px 16px;margin:14px 0}

/* lesson */
.video-ph{aspect-ratio:16/9;background:linear-gradient(135deg,var(--teal),var(--sage-grey));
  border-radius:var(--radius);display:grid;place-items:center;color:#fff;text-align:center;margin:10px 0 18px}
.video-ph span{font-size:1.1rem;opacity:.95}

/* mentor chat */
.chat-shell{display:grid;grid-template-columns:260px 1fr;gap:22px}
.side .steplist li{font-size:.92rem}
/* Size the chat to the viewport MINUS the real chrome (sticky topbar + .wrap padding) so the
   composer never falls below the fold. 100dvh = the *dynamic* viewport (mobile 100vh is the taller
   large-viewport and hid the composer behind the browser toolbar); the 100vh line is an old-browser
   fallback. min-height lowered from 620 (it overflowed short desktop windows - e.g. Mac Safari with
   a bookmarks bar - forcing the composer + last message off-screen; the שני-desktop bug). */
.chat{display:flex;flex-direction:column;height:calc(100vh - 96px);height:calc(100dvh - 96px);min-height:520px}
/* This media block is AFTER the base .chat rule ON PURPOSE - equal specificity, so source order
   decides; if it came before, the base rule below would win and the mobile sizing would never apply. */
@media(max-width:820px){.chat-shell{grid-template-columns:1fr;overflow-x:hidden}.chat-shell>*{min-width:0}.side{order:2}
  /* mobile: the topbar nav wraps to several tall lines + the browser toolbar/home-indicator eat
     space, so drop the rigid min-height and reserve more room. */
  .chat{min-height:0;height:calc(100vh - 155px);height:calc(100dvh - 155px);
    padding-bottom:env(safe-area-inset-bottom,0px)}
  /* mobile chrome diet (מורן 3/7): the pills row wrapped to 2-3 lines and, with the legend +
     composer, swallowed the chat - Ivy's messages got ~4 visible lines. Compact everything
     around the messages; the conversation is the hero of this screen. */
  .mode-row{gap:5px;margin-bottom:6px}
  .mode-row .pill{font-size:.72rem;padding:.22em .6em}
  .mode-row #step-title{font-size:.92rem}
  .mode-row>span.muted{display:none}
  .persona-legend{font-size:.72rem;line-height:1.5;margin:0 0 .45em;padding:.4em .6em}
  .composer textarea{min-height:56px}
  /* Rachel 154 / רחל קארה (5/7): the edit-mode + soft-lock banners were left OUT of the 3/7
     mobile chrome diet, so an edit-mode client (current<furthest) got a full-size banner stacked
     above the messages and reported "החלון הקטן מסתיר את ההתכתבות" - the conversation collapsed
     to a sliver on the phone. Compact these two banners like the rest of the chrome so the
     messages keep their space; the ✕ still fully dismisses the edit banner. */
  .edit-banner{font-size:.74rem;line-height:1.4;gap:6px;margin:0 0 .45em;padding:.4em .6em}
  .edit-banner .btn.small{font-size:.7rem;padding:.25em .6em}
  .edit-banner .banner-x{font-size:.9rem;padding:1px 4px}
  .softlock-banner{font-size:.74rem;line-height:1.4;margin:0 0 .45em;padding:.4em .6em}
  /* portrait (12/7): the below-message controls were never compacted for mobile (the 403/417 blocks
     are desktop-only), so the paste hint + advance bar + composer ate the height where portrait is
     tightest. Tighten them so the conversation - the hero - keeps its room. Nothing is hidden. */
  .import-bar{margin-top:5px}
  .import-bar .pill{font-size:.7rem;padding:.26em .7em;line-height:1.3}
  .advance-bar{gap:7px;margin-top:6px}
  .advance-btn{padding:.5em 1em;font-size:.9rem}
  .advance-bar .btn.small{font-size:.72rem;padding:.32em .7em}
  .advance-hint{font-size:.72rem}
  .edit-banner{flex-wrap:nowrap}
  .eb-long{display:none}
  .eb-short{display:inline}
  .composer{margin-top:6px}}
.mode-row{display:flex;gap:8px;margin-bottom:10px;align-items:center}
.msgs{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px;display:flex;flex-direction:column;gap:12px}
/* Conversation floor (Hadar 22/7 - מרים 209 tickets 2181/2175, גל 162 t2179): at the freebie/guide
   step the chat stacks a LOT of chrome inside the fixed-height .chat - the "לקריאת דף הנחיתה" action
   box + three toggle bars (מיתוג / בנייה / הדבקה) + the advance bar - and .msgs (flex:1) was the loser,
   collapsing to ~1-2 visible lines ("אין לי בכלל דרך לראות את הצאט", confirmed on her screenshot). Earlier
   fixes only COMPACTED chrome; with five stacked blocks that still wasn't enough. Give the conversation a
   hard floor so it can never be crushed below readability, and let the whole chat CARD scroll when the
   chrome genuinely overflows, so the composer stays reachable (before, a floored .msgs would have pushed
   the composer off the clipped box). Light-chrome steps are UNCHANGED: the floor only binds once the
   chrome leaves less than ~190px, and overflow:auto shows nothing until content actually overflows.
   Scoped to .chat-shell so Bloom/Sky chats are untouched. */
.chat-shell .msgs{min-height:190px}
.chat-shell .chat{overflow-y:auto}
/* סיגל 332 (t2894/2895) + חני 53 (t2118): on DESKTOP the 190px floor above still left a long
   research/guide message readable only as a thin strip - "רוב המסך מכוסה בחלק הצהוב... אני מגוללת
   חלק קטן מהמסך כדי לראות את החלק הכחול". Desktop windows are tall, so give the conversation a much
   larger floor there (mobile keeps 190). And cap an OPEN paste/import panel (the cream .import-panel
   that goes flex-basis:100%) so it scrolls internally instead of taking over the whole fixed-height
   card. Scoped to .chat-shell .chat (the mentor page) exactly like the 22/7 floor above. */
@media(min-width:821px){
  .chat-shell .msgs{min-height:min(46vh,400px)}
  .chat-shell .chat .import-panel{max-height:min(40vh,300px);overflow-y:auto;overflow-x:hidden}
}
/* overflow-wrap + word-break match .sup-msg: long AI responses (URLs, unbroken Hebrew runs) no
   longer overflow the bubble and push the page wider than the mobile viewport (מורן 214 / Hani 53). */
.msg{max-width:78%;padding:.7em 1em;border-radius:16px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;font-size:1.08rem;line-height:1.65}
.msg.user{align-self:flex-start;background:var(--sage);color:var(--ink);border-bottom-right-radius:4px}
.msg.assistant{align-self:flex-end;background:var(--mint);color:var(--ink);border-bottom-left-radius:4px}
.msg.sys{align-self:center;background:var(--cream);color:var(--muted);font-size:.85rem;text-align:center}
.composer{display:flex;gap:8px;margin-top:10px}
.composer textarea{flex:1;resize:vertical;border:1.5px solid var(--sand);border-radius:14px;padding:.7em 1em;
  font-family:inherit;font-size:1.06rem;min-height:84px;max-height:min(260px,35vh);overflow-y:auto;background:#fff;color:var(--ink)}
/* Hani 53 (13/7, ticket 1108; recurring from 525/837): the mentor composer is a flex row, and with the
   default align-items:stretch the Send + attach buttons stretched to match the TALL (auto-growing)
   textarea - ballooning into giant ovals/circles that ate the row width and crushed the text box to a
   narrow sliver on Android ("החלונית מאוד קטנה", her typed text wrapped every word or two). Pin the
   buttons to the bottom at their natural height and stop them flex-growing, so the textarea keeps the
   row width and stays the hero; on the phone give the buttons a compact footprint. Scoped to
   .chat-shell (the mentor layout) so the Bloom composers - which share .composer and id="send" - are
   untouched. */
.chat-shell .composer{align-items:flex-end}
/* Pin the composer to the bottom of the scrolling chat card (Hadar 24/7 - דניאלה 61 tickets
   2089/2090). The card scrolls (.chat-shell .chat{overflow-y:auto}) once the stacked chrome
   overflows, and the composer - the LAST child - used to scroll away with it, so with a panel
   open the "כתבי לאייבי" box slid below the fold and she couldn't reach the chat to type.
   Sticky bottom:0 keeps it welded to the bottom of the viewport at every screen size (desktop +
   phone); the opaque card background + hairline top-rule stop the messages showing through.
   Scoped to .chat-shell so Bloom/Sky composers are untouched. */
.chat-shell .composer{position:sticky;bottom:0;z-index:3;background:var(--card);
  padding-top:8px;margin-top:8px;border-top:1px solid var(--hairline)}
.chat-shell .composer .btn{flex:0 0 auto}
@media(max-width:820px){
  .chat-shell .composer{gap:6px}
  .chat-shell .composer #send{padding:.55em 1.05em}
  .chat-shell .composer #attach{padding:.5em .7em;font-size:1.15rem}
}
.pill{font-family:inherit;font-size:.8rem;border:1.5px solid var(--sage);color:var(--heading);background:#fff;border-radius:999px;
  padding:.3em .9em;cursor:pointer}
.pill.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.typing{align-self:flex-end;color:var(--heading);font-size:1rem;font-weight:600;font-style:italic;padding:.35em .7em;opacity:.92}
.persona-legend{font-size:.8rem;line-height:1.7;margin:.1em 0 .6em;padding:.5em .8em;background:#f3f6f1;border:1px solid #e3ece4;border-radius:9px}
.persona-legend b{color:var(--heading)}
.home-personas{display:flex;flex-wrap:wrap;gap:.5em 1.2em;align-items:center;font-size:.86rem;margin:0 0 1em}
.home-personas .pl-title{font-weight:700;color:var(--heading)}
.home-personas span{white-space:nowrap}
.persona-link{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;text-align:center}
.persona-link .pn{font-weight:600}
.persona-link .pr{font-size:.62rem;color:var(--muted);font-weight:400;margin-top:1px}
.state-box{font-size:.86rem}
.state-box li{padding:6px 0;border-bottom:1px dashed var(--pearl)}

/* zone hub */
.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:24px}
@media(max-width:820px){.zones{grid-template-columns:1fr}}
.zone-card{display:block;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:28px;text-align:center;color:var(--ink);transition:.16s;border:1.5px solid transparent}
.zone-card:hover{transform:translateY(-3px);text-decoration:none;border-color:var(--sage-grey)}
.zone-card.locked{opacity:.6;filter:grayscale(.3)}
.zone-icon{font-size:2.6rem;margin-bottom:6px}
/* round watercolor disc icon (Hadar's brand elements) - white corners blend on the white card */
.zone-icon-img{width:118px;height:118px;object-fit:contain;margin:0 auto 8px;display:block;border-radius:50%}
.zone-name{font-family:"Kohenet",Spider,serif;font-weight:400;font-size:1.75rem;line-height:1.15;margin:.1em 0 .35em}
.zone-go{display:inline-block;margin-top:10px;color:var(--accent);font-weight:900}

/* generic finance/cards (hub + bloom zones) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:20px}
.metric{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;display:block;color:var(--ink)}
.metric:hover{text-decoration:none;transform:translateY(-2px);transition:.15s}
.metric .v{font-size:1.9rem;font-weight:900;color:var(--heading)}
.metric .l{color:var(--muted);font-size:.9rem}
table.lines{width:100%;border-collapse:collapse;margin-top:12px}
table.lines th,table.lines td{text-align:start;padding:9px 8px;border-bottom:1px solid var(--pearl);font-size:.94rem}
table.lines th{color:var(--muted);font-weight:400}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.inline-form input,.inline-form select{padding:.55em .8em;border:1.5px solid var(--sand);border-radius:10px;
  font-family:inherit;background:#fff;color:var(--ink)}
.back-link{display:inline-block;margin-bottom:6px;color:var(--muted)}
.chip{display:inline-block;font-size:.78rem;background:var(--powder);color:var(--heading);border-radius:999px;padding:.15em .7em}
.bloom-item{display:flex;gap:10px;align-items:flex-start;padding:11px 6px;border-bottom:1px solid var(--pearl)}
.bloom-col h3{margin:.2em 0}
.prio{font-size:.75rem;border-radius:999px;padding:.1em .6em;color:#fff}
.prio.now{background:#c98a6a}.prio.soon{background:var(--sage)}.prio.later{background:var(--muted)}

/* clickable completed steps in the journey sidebar */
/* touch-action:manipulation removes the 300ms iOS tap delay on non-interactive elements,
   fixing clicks not firing on PWA home-screen mode (רחל 154, 7/7) */
.steplist li.clickable{cursor:pointer;border-radius:10px;transition:.12s;touch-action:manipulation}
.steplist li.clickable:hover{background:var(--mint)}
.steplist li.clickable .step-t small{display:block;color:var(--accent);font-size:.72rem;margin-top:2px}
/* same override guard for the clickable variant (higher specificity selector) */
.steplist li .step-t small[hidden]{display:none}

/* step detail card (overlay over the chat) */
.detail-overlay{position:fixed;inset:0;background:rgba(66,88,74,.28);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;z-index:90;padding:20px}
/* CRITICAL: the display:flex above overrides the HTML [hidden] attribute, so without this
   the overlay would always show and never close. This makes hidden actually hide it. */
.detail-overlay[hidden]{display:none}
.detail-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);max-width:640px;width:100%;
  max-height:84vh;display:flex;flex-direction:column;padding:22px;border:1px solid var(--hairline)}
.detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.detail-head h3{margin:0;color:var(--heading)}
.detail-body{overflow-y:auto;white-space:pre-wrap;line-height:1.7;color:var(--ink);
  background:var(--cream);border-radius:12px;padding:14px 16px;flex:1;min-height:0;scroll-padding-block-end:24px}
/* On mobile / installed PWA (iOS Safari) the bottom padding of a flex:1 overflow-y:auto
   container is often excluded from the scrollable extent, so the last line of a long
   research artifact gets clipped when scrolled to the very bottom (tzmoran78, 365). A
   spacer pseudo-element guarantees the final sentence is fully scrollable into view. */
.detail-body::after{content:"";display:block;height:24px}
/* her actual saved items (the original פריטים), each labelled - shown in the detail card
   so the short recap no longer hides the real deliverables. */
.detail-items{display:flex;flex-direction:column;gap:14px}
.detail-item{white-space:normal}
.detail-item-label{font-weight:700;color:var(--heading);font-size:.9rem;margin-bottom:3px}
.detail-item-val{white-space:pre-wrap;line-height:1.7}
.detail-item-list{margin:2px 0 0;padding-inline-start:20px}
.detail-item-list li{padding:3px 0}
.detail-recap{margin-top:16px;padding-top:12px;border-top:1px dashed var(--pearl)}
.detail-recap .detail-item-label{color:var(--muted)}
.detail-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px}
.detail-row-label{font-size:.82rem;font-weight:700;color:var(--muted);min-width:74px}
.detail-actions-step{margin-top:8px;padding-top:10px;border-top:1px solid var(--hairline)}
.btn.danger{background:#fff;color:#a4543f;border:1.5px solid #e3b6ab}
.btn.danger:hover{background:#fbeeea}
/* during image capture, hide the controls so only the title + content are in the picture */
.detail-card.capturing #detail-close,
.detail-card.capturing .detail-actions{display:none}
/* floating ✕ - always visible in the overlay's corner regardless of card content/scroll/capture.
   Placed outside the card so heavy content (step 5: 40+ list items; step 1: week-board) can never
   push it off-screen on mobile. top/right use max() + env(safe-area-inset-*) so the button is never
   hidden under iOS notch / Dynamic Island (safe-area-inset-top up to 59px on Face ID phones). */
.detail-esc{position:absolute;
  top:max(12px,env(safe-area-inset-top,12px));
  right:max(12px,env(safe-area-inset-right,12px));
  width:44px;height:44px;border-radius:50%;
  background:#fff;border:1.5px solid var(--sage,#c5d7cd);font-size:1.25rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--heading,#5E7A66);
  box-shadow:0 2px 8px rgba(0,0,0,.12);z-index:91;flex-shrink:0}

/* explicit "לשלב הבא" promotion bar (the only way forward) */
.advance-bar{display:flex;align-items:center;gap:10px;margin-top:10px}
.advance-bar[hidden]{display:none}
/* .btn sets display:inline-block, which overrides the HTML [hidden] attribute - so the
   disabled next-task pill stayed on screen through the whole step. Same fix already
   used for .advance-bar and .detail-overlay above. (Hadar 13/8/2026) */
.advance-btn[hidden]{display:none}
.advance-btn:disabled{opacity:.45;cursor:not-allowed}
.advance-hint{font-size:.82rem}

/* edit-mode banner (returned to an already-completed step) */
.edit-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:.2em 0 .6em;
  padding:.6em .9em;background:#fbf4e9;border:1px solid #ecdcc2;border-radius:10px;
  font-size:.85rem;color:var(--ink);line-height:1.6}
.edit-banner[hidden]{display:none}
.eb-short{display:none}
.steplist li.editing .step-t{font-weight:800;color:var(--heading)}

/* meditations zone */
.med-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;margin-top:18px}
.med-card{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:.16s}
.med-card:hover{transform:translateY(-2px)}
.med-thumb{background:linear-gradient(160deg,var(--mint),var(--powder));display:grid;place-items:center;
  height:150px;padding:8px}
.med-thumb img{max-height:140px;max-width:90%;object-fit:contain}
.med-body{padding:14px 16px}
.med-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.med-top h3{margin:0;font-size:1.05rem;color:var(--heading)}
.med-card audio{width:100%;margin-top:10px}

/* weekly planner board (work-hours step detail) */
.week-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.week-day{background:#fff;border:1px solid var(--hairline);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.wd-name{background:var(--sage);color:#fff;font-weight:900;text-align:center;padding:6px;font-size:.92rem}
.wd-plan{padding:8px 10px;font-size:.86rem;line-height:1.45;flex:1;color:var(--ink)}
.wd-plan .empty{color:var(--muted)}
.wd-line{padding:5px 0;border-bottom:1px dashed var(--pearl)}
.wd-line:last-child{border-bottom:none}
.week-text{white-space:pre-wrap;line-height:1.7;color:var(--ink)}
.week-target{margin-top:6px;font-size:1.05rem;background:var(--mint);color:var(--heading);border-radius:12px;padding:12px 16px;text-align:center}
.week-actions{margin-top:12px;color:var(--ink)}
.week-actions ul{margin:6px 0 0;padding-inline-start:20px}

/* import external research panel */
.import-bar{margin-top:8px}
.import-panel{margin-top:8px;background:var(--cream);border-radius:12px;padding:12px}
.import-panel textarea{width:100%;border:1.5px solid var(--sand);border-radius:10px;padding:.6em .8em;
  font-family:inherit;font-size:.95rem;background:#fff;color:var(--ink);resize:vertical;margin-bottom:8px}

/* technical support chat */
.support-thread{max-height:52vh;min-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.sup-msg{padding:8px 12px;border-radius:12px;font-size:.92rem;max-width:88%;word-break:break-word;overflow-wrap:break-word;white-space:pre-wrap}
.sup-msg small{display:block;color:var(--muted);font-size:.72rem;margin-top:2px}
.sup-you{background:var(--cream);align-self:flex-start}
.sup-hadar{background:var(--mint);color:var(--ink);align-self:flex-end}
.sup-pending{font-size:.8rem;align-self:flex-end}
/* ענבל 142 (12/7): the mentor composer was widened to ~2.5 lines long ago, but the Amber SUPPORT
   textarea kept its floor only inside the mobile block (Hani 53, 9/7) - so on desktop it collapsed
   back to a single line (she wrote "the line I type in is one line, you said it was widened and it's
   not"). Give it the same 80px desktop floor as the mentor composer; the mobile block keeps 72px. */
#support-text{width:100%;border:1.5px solid var(--sand);border-radius:10px;padding:.6em .8em;
  font-family:inherit;font-size:.95rem;background:#fff;color:var(--ink);resize:vertical;min-height:80px}

/* brand UI icons & illustrations (replacing emoji) */
.ico{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.16em;flex:0 0 auto}
/* watercolor brand illustration for hero / empty / popup states */
.ill{display:block;margin:0 auto 12px;width:104px;height:104px;object-fit:contain}
.ill.sm{width:78px;margin-bottom:8px}
.dot .ico{width:14px;height:14px;vertical-align:0}
.video-ph .ico{width:1.25em;height:1.25em;vertical-align:-.22em;margin-inline-end:7px}
button .ico,.pill .ico,.btn .ico{margin-inline-end:5px}

/* ---- access wave (spec 5+6): business-switcher + soft lock ---- */
.biz-switch{position:relative;display:inline-block;margin-inline-start:18px}
.biz-btn{font-family:inherit;font-size:.8rem;border:1.5px solid var(--sage);color:var(--heading);
  background:#fff;border-radius:999px;padding:.32em .8em;cursor:pointer;display:inline-flex;
  align-items:center;gap:5px;max-width:200px}
.biz-btn #biz-current{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.biz-btn .ico{width:13px;height:13px;margin:0}
.biz-menu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);min-width:210px;background:#fff;
  border:1px solid var(--hairline);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:60}
.biz-menu[hidden]{display:none}
.biz-menu form{margin:0}
.biz-item{display:block;width:100%;text-align:start;font-family:inherit;font-size:.85rem;
  color:var(--ink);background:transparent;border:none;border-radius:8px;padding:.5em .7em;cursor:pointer}
.biz-item:hover{background:var(--mint)}
.biz-item.on{font-weight:800;color:var(--heading);background:var(--mint)}
.biz-item.biz-add{color:var(--accent);font-weight:700;border-top:1px solid var(--hairline);margin-top:4px;padding-top:.6em}
a.biz-item{text-decoration:none}

/* soft advisory lock warning (a partner is in this step right now) */
.softlock-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:.2em 0 .6em;
  padding:.55em .9em;background:#eef3ef;border:1px solid #cfe0d4;border-radius:10px;
  font-size:.85rem;color:var(--ink);line-height:1.6}
.softlock-banner[hidden]{display:none}

/* partners (sharing) area */
.partner-list{list-style:none;padding:0;margin:14px 0}
.partner-list li{display:flex;align-items:center;gap:10px;padding:.6em .2em;border-bottom:1px solid var(--hairline)}
.partner-list .who b{color:var(--heading)}
.partner-list .role{font-size:.76rem;background:var(--mint);color:var(--heading);border-radius:999px;padding:.1em .6em}
.partner-invite{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.partner-invite input{flex:1;min-width:200px;padding:.6em .8em;border:1.5px solid var(--sage);border-radius:10px;font-family:inherit}

/* Amber support chat readability (client request, 3/7): bigger text + roomier panel */
#support-overlay .detail-card{max-width:760px;max-height:92vh;overflow-y:auto}
/* ענבל 142 (WhatsApp, 15/7) - "עדיין אין לי כפתור שליחה": the composer (textarea+hint+file+send) sat
   below a fixed 64vh thread, so on a short / OS-zoomed desktop the total overflowed the 92vh card and
   the שליחה button spilled past the viewport bottom with no way to scroll to it. Fix: ONLY the thread
   flexes+scrolls (can shrink to 0), and the composer is a non-shrinking footer that is always visible. */
/* תחיה עצר 92 (#5026, 18/8, +צילום): min-height:0 let the reply box collapse below its own text
   on a constrained card - she saw Amber's answer squeezed into ~2 lines with a tiny inner scroll
   and had to drag arrows to read it ("להחזיר לתצוגה יותר גדולה, 4 שורות לפחות"). A viewport-
   proportional floor (22vh ~ 6 lines on a normal screen, never below ~4) restores a readable box
   while still flexing+scrolling above it, so ענבל 142's always-visible שליחה footer is preserved. */
#support-overlay .support-thread{flex:1 1 auto;min-height:22vh;max-height:64vh}
.support-composer{flex-shrink:0}
#support-overlay .sup-msg{font-size:1.06rem;line-height:1.7}
#support-overlay .sup-msg small{font-size:.78rem}
#support-overlay textarea{font-size:1.05rem}
/* התוכן שלי: מסמכי התוכן נקראים/נערכים ב-.post-content, שלא היה לו font-size ולכן
   נפל לברירת המחדל של הדפדפן ל-textarea (~13px) בעוד שאר הדף 16px - כל החומרים נראו
   קטנים מדי ולא נוחים לעבודה במחשב (אורית 257, 2/8). מיישרים לגודל גוף-הטקסט. */
.post-content{font-size:1.05rem}
/* ענבל 142 (15/7, ticket 1255): put the שליחה button BESIDE the textarea instead of in a row below
   it, so the button no longer steals ~50px of vertical space from the reading thread (she saw the
   response window collapse to ~3 lines). Bottom-aligned, NOT align-items:stretch (that balloons the
   button into a tall oval - see the mentor composer buttons fix). */
.support-input-row{display:flex;align-items:flex-end;gap:8px}
.support-input-row #support-text{flex:1 1 auto;min-height:80px}
.support-input-row #support-send{flex:0 0 auto;white-space:nowrap}
/* דניאלה אברהם 61 (t2089 22/7 + t2867 28/7, with a phone screenshot): the attach instructions and
   the file input sat permanently in the non-shrinking composer footer, so on her phone they ate about
   a third of the support panel and the conversation - the reason the panel exists - was the smallest
   block on screen. Folded into one line by default (see base.html), which hands that height straight
   back to the thread. The thread's 64vh ceiling was written for a footer that tall; with the fold it
   only limited the panel, so on a phone it now uses what the footer released. */
.support-attach{margin:4px 0}
.support-attach > summary{font-size:.86rem;cursor:pointer;list-style:none;padding:2px 0;
  color:var(--heading);user-select:none}
.support-attach > summary::-webkit-details-marker{display:none}
.support-attach > summary::after{content:" ⌄";font-size:.9em}
.support-attach[open] > summary::after{content:" ⌃"}
@media(max-width:820px){
  #support-overlay .support-thread{max-height:55vh}
  #support-overlay .detail-card{overflow-y:auto}
}

/* Ronit 90 (4/7): reclaim chat space on desktop AND mobile. The fixed explainer collapses
   to a single line (tap/click expands), chrome margins are trimmed, the composer starts
   lower, and .chat no longer forces a 520px minimum that pushed the composer below the
   fold on small effective viewports (browser zoom / short laptops). */
/* one line, and the room that one line needs: measured live at 15px tall for a 35px line,
   which sliced the letters across the middle (Hadar 13/8/2026) */
.persona-legend{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
  min-height:2.9em;box-sizing:border-box;flex:0 0 auto}
.persona-legend.open{min-height:0}
.persona-legend.open{white-space:normal;overflow:visible;text-overflow:clip}
.mode-row{margin-bottom:6px}
.composer{margin-top:8px}
.composer textarea{min-height:80px}
.chat{min-height:380px}
/* tzmoran (365, 8/7): mobile 48px left only ~26px for text after padding → 1 visible line.
   Desktop min-height was also too small (64px → ~42px text ≈ 1.5 lines visible before typing).
   Raised desktop→80px (≈ 2.5 visible lines), mobile→72px (≈ 2 visible lines). Auto-grow handles expansion when typing.
   Hani Kaplan 53 (9/7): same problem in the Amber support textarea (rows=3 collapses on some Android);
   match the same 72px floor. Also ensure sidebar card content can't overflow horizontally. */
@media(max-width:820px){.composer textarea{min-height:72px}.msgs{padding:6px}
  #support-text{min-height:72px}
  .side .card{overflow:hidden;word-break:break-word}}
/* ענבל 142 (12/7), tickets 408-412 + 1002 - recurring, earlier fixes only WIDENED: on a short or
   OS-scaled desktop the step-action chrome (edit-banner "חזרת לעבוד", the "בני לי את חודש התוכן" bar
   and the "חזרה לשלב N" return bar) stacked inside the fixed-height .chat and crushed the conversation
   (.msgs, flex:1) to ~3 lines - "רואים בקושי 3 שורות", "15-20 שורות לפחות". These chrome elements are
   mentor-only; compact them on desktop so flex:1 hands the reclaimed height to the messages, which are
   the hero of this screen. NO min-height on .msgs on purpose (that would overflow the fixed .chat and
   push the composer below the fold - the exact regression earlier fixes fought). On a normal-height
   desktop this yields ~15-20 visible lines; on a short/scaled laptop the conversation roughly doubles. */
@media(min-width:821px){
  .edit-banner{font-size:.85rem;line-height:1.4;gap:8px;margin:0 0 .4em;padding:.45em .75em}
  .edit-banner .btn.small{font-size:.82rem;padding:.3em .8em}
  .generate-bar{margin:.15em 0}
  .generate-bar .bar-blurb{margin:.1em 0 .4em}
  .advance-bar{margin-top:.4em;margin-bottom:0}
  #return-bar{margin-top:.35em}
}
/* ...and when the desktop viewport is genuinely SHORT (ענבל runs an OS-scaled display, effective
   height ~640px, where even the compacting above still left the conversation small) reclaim more,
   surgically, WITHOUT touching normal-height screens: drop the one-line persona explainer (it is
   secondary and collapsible), hide the generate blurb (redundant with the button it sits above), and
   trim the composer floor a touch (still ~1.7 lines and it auto-grows as she types). This roughly
   triples the visible conversation on her screen while keeping the composer on-screen. */
@media(min-width:821px) and (max-height:760px){
  .persona-legend{display:none}
  .generate-bar .bar-blurb{display:none}
  .generate-bar{margin:.1em 0}
  .composer textarea{min-height:68px}
  .advance-bar,#return-bar{margin-top:.3em}
  .edit-banner{margin-bottom:.3em}
}

/* cache-bust 2026-07-16: force SW/version refresh after Hadar journey unify */

/* cache-bust 2026-07-16b: couple+parenting domains filled */

/* Lesson-video "enlarge" (theater) mode (16/7). macOS Safari's WebKit/GPU process crashes when a
   Vimeo iframe enters NATIVE fullscreen on our page ("This webpage was reloaded because a problem
   occurred" - שני צדוק 318; it RECURRED 16/7 after the 15/7 topbar-blur fix, so the native
   fullscreen path itself is the crash, not just the blur). We drop the iframe's native fullscreen
   (remove allowfullscreen -> Vimeo hides its ⛶ button) and give this in-page enlarge instead: pure
   CSS, no Fullscreen API, so the crash cannot happen in ANY browser. The video fills the viewport. */
.vzoom-btn{position:absolute;top:8px;inset-inline-start:8px;z-index:3;background:rgba(0,0,0,.55);
  color:#fff;border:0;border-radius:8px;padding:6px 11px;font-size:.85rem;line-height:1;cursor:pointer}
.vzoom-btn:hover{background:rgba(0,0,0,.78)}
.video-embed.theater{position:fixed !important;inset:0 !important;width:100vw !important;
  height:100vh !important;height:100dvh !important;margin:0 !important;padding-top:0 !important;
  border-radius:0 !important;z-index:9998;background:#000}
.video-embed.theater .vzoom-btn{top:14px;inset-inline-start:14px;font-size:1rem;padding:8px 14px}
body.vzoom-open{overflow:hidden}

/* Hadar 17/7 - "החלון של אייבי לא מגיע עד תחתית המסך". The chat is already sized to the viewport
   (100dvh - chrome), but the PAGE is taller than the viewport: the right column (steplist + "מה
   כבר ידוע עליי") keeps going, so the moment she scrolls, the viewport-height chat scrolls up with
   it and its bottom lands mid-screen with dead space underneath - it LOOKS like a short window.
   Desktop fix: pin the chat to the viewport so it stays full-height while the sidebar scrolls past
   it. align-items:start is required - a stretched grid item can't stick. Mobile (<=820px) is
   untouched: there the shell is a single column and sticky would fight the browser toolbar. */
@media(min-width:821px){
  /* The chat was already viewport-tall; what broke it is that the PAGE outgrows the viewport - the
     right column is longer than the chat, so the document scrolls, and a sticky chat can only stick
     as far as its grid parent allows (measured: at max scroll it stranded with ~100px dead space
     below AND its head cut off at the top). Fix the cause: let the sidebar scroll INSIDE itself, so
     the document height == the viewport and nothing scrolls the chat away. 105px = sticky topbar
     (77) + .wrap top padding (28); the extra 28 keeps the page's bottom padding as the design margin. */
  .chat-shell{align-items:start}
  .chat{height:calc(100vh - 133px);height:calc(100dvh - 133px)}
  .side{position:sticky;top:14px;max-height:calc(100dvh - 133px);overflow-y:auto;overscroll-behavior:contain}
  /* and a roomier composer - 80px was ~2.5 lines; 116px ≈ 4 lines before it auto-grows. The chat
     is a fixed height, so this is taken from .msgs (flex:1) - on a normal desktop the conversation
     still shows ~15+ lines, and short screens keep their own smaller floor below.
     Deliberately NOT scoped to .chat: Hadar wants the roomier box in Bloom's chat too. Sky/monthly/
     yearly are unaffected (their own <style> sets min-height:52px and template CSS wins); Bloom's
     chat uses height:54px, which min-height overrides - so bloom_chat.html reserves matching room
     for its FIXED bottom bar (raised 96px -> 150px there, or the bar covers its jump buttons). */
  .composer textarea{min-height:116px}
}
/* short desktops (OS-scaled / small laptops): the roomier composer would eat the conversation, so
   keep it near the old floor there - the messages stay the hero (same principle as the ענבל 12/7 fix). */
@media(min-width:821px) and (max-height:760px){
  .composer textarea{min-height:84px}
}

/* ---- THE BUTTON SHE HAS TO PRESS (Hadar, 10/8/2026: "שיהיה בולט וזהו") ----------------
   A finished step used to end in a button indistinguishable from "שליחה". Four clients stood
   on a completed step 1 (27, 129, 291, 330) and 45 across the journey stand on a completed step
   right now, each one line away from the next step and reading it as "nothing happened".
   Keyed on :not([hidden]) - the exact attribute app.js flips when the step completes - so it is
   loud only when there really is something to press, and never on a step still in progress.
   Nothing here advances anyone: the press stays hers. */
.advance-btn:not([hidden]){
  font-size:1.14rem;font-weight:800;padding:.72em 1.7em;border-radius:999px;
  background:linear-gradient(180deg,#6d8d75,#4c6a55);color:#fff;border:none;
  letter-spacing:.01em;box-shadow:0 4px 14px rgba(94,122,102,.42);
  animation:advance-pulse 2.4s ease-in-out infinite}
@keyframes advance-pulse{
  0%,100%{box-shadow:0 4px 14px rgba(94,122,102,.38)}
  50%{box-shadow:0 5px 24px rgba(94,122,102,.78)}}
.advance-btn:not([hidden]):hover{filter:brightness(1.06)}
.advance-btn:not([hidden])+.advance-hint{
  font-size:.95rem;font-weight:700;color:var(--heading,#5E7A66)}
/* the bar itself becomes a soft tray, so the button reads as a destination and not as chrome.
   Progressive enhancement: a browser without :has() simply keeps the loud button above. */
.advance-bar:has(.advance-btn:not([hidden])){
  background:linear-gradient(180deg,#f3f7f4,#e7efe9);border:1px solid #cddbd3;
  border-radius:16px;padding:12px 14px;margin-top:12px;flex-wrap:wrap}
/* a restart link must not compete with the way forward */
.advance-bar:has(.advance-btn:not([hidden])) #current-restart{opacity:.55;font-size:.75rem}
@media(max-width:820px){
  .advance-btn:not([hidden]){font-size:1.05rem;padding:.66em 1.4em;width:100%;
    justify-content:center;text-align:center}
  .advance-bar:has(.advance-btn:not([hidden])){padding:10px 12px}
  .advance-btn:not([hidden])+.advance-hint{font-size:.86rem}
}
@media (prefers-reduced-motion:reduce){
  .advance-btn:not([hidden]){animation:none;box-shadow:0 4px 18px rgba(94,122,102,.6)}
}