@font-face { font-family: Plex; src: url(assets/fonts/plexhe-200.woff2) format('woff2'); font-weight: 200; font-display: swap; }
@font-face { font-family: Plex; src: url(assets/fonts/plexhe-300.woff2) format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: Plex; src: url(assets/fonts/plexhe-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Plex; src: url(assets/fonts/plexhe-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Plex; src: url(assets/fonts/plexhe-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: DMV; src: url(assets/fonts/dmsans-var.woff2) format('woff2-variations'); font-weight: 100 1000; font-display: swap; }

:root {
  --bone: #F5F3EF; --ink: #1A1917; --butter: #F7DE96;
  --sage: #DDE7CB; --lilac: #E4DEF2; --peach: #F8DFD1;
  --grey: #6E6E68; --paper: #FFFFFF;
  --line: rgba(26,25,23,.14);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --settle: 240ms; --reveal: 700ms;
  --radius: 20px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* B1 · a class selector beats the browser default for [hidden], so any element
   with a display rule ignores the attribute. Nothing should outrank hidden. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; min-height: 100%; background: var(--bone); overscroll-behavior: none; }
body {
  font-family: Plex, sans-serif; font-weight: 300; color: var(--ink);
  direction: rtl; letter-spacing: 0; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }

/* the mark is fixed artwork with measured sidebearings — brand book p04.
   it is never re-typed, so it ships as an image, not as text. */
/* the mark is fixed artwork — brand book p04. It ships as an alpha mask so
   one file serves both the bone and the ink version, and CSS paints it. */
.mark-sm {
  display: block; width: 58px; height: 27px;
  background: var(--ink);
  -webkit-mask-image: url(assets/mask-semibold.png);
          mask-image: url(assets/mask-semibold.png);
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
}

/* the wordmark, exactly as the Design renders it — real text (DM Sans 700,
   -.03em tracking), not a mask image against a rasterised PNG. Used at
   17px throughout every header (source: every non-splash "olla." in the
   .dc.html is this literal styling); the splash gets its own 44px rule
   below since it's a different size, colour and animation, not a variant
   of this class. */
.wordmark {
  font-family: DMV, sans-serif; font-weight: 700; font-size: 17px;
  letter-spacing: -.03em; color: var(--ink); unicode-bidi: isolate;
}

/* ── splash · source lines 30-37, verbatim — ink screen, real "olla." text
   animated with ollaMarkIn, thinking dots fading in under it. `#intro`
   itself gets a plain opacity fade on exit (leaveIntro in app.js); Design
   has no exit animation for atSplash, it simply unmounts when atGate
   mounts (which fades itself in via ollaFade — see #gate.d-flow.on). ───── */
#intro {
  position: absolute; inset: 0; z-index: 60; background: #1A1917;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px;
  transition: opacity var(--reveal) var(--ease);
}
#intro.gone { opacity: 0; pointer-events: none; }

#splashMark {
  font-family: DMV, sans-serif; font-weight: 700; font-size: 44px; color: #F5F3EF;
  unicode-bidi: isolate;
  animation: ollaMarkIn 1500ms cubic-bezier(.22,.61,.36,1) both;
}
#splashThinking { animation: ollaFade 900ms cubic-bezier(.22,.61,.36,1) 900ms both; }

@keyframes ollaMarkIn {
  from { opacity: 0; letter-spacing: .24em; transform: translateY(5px); }
  to   { opacity: 1; letter-spacing: -.03em; transform: translateY(0); }
}
@keyframes ollaFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ollaSettle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  @keyframes ollaMarkIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ollaSettle { from { opacity: 0; } to { opacity: 1; } }
}

/* on a desktop the app sits in a phone-sized frame.
   the transform on body makes position:fixed children resolve against it */
/* ── the shell ─────────────────────────────────────────────────────────────
   A phone frame drawn on a desktop is a costume, and a bare column in an
   empty page is not an application either. On a wide window olla gets a rail
   that never moves: where you are, where you can go, and every client one
   click away. Below that width the rail is gone and the screens are the app,
   which is the right shape for a phone.                                     */
#rail { display: none; }

@media (min-width: 900px) {
  #rail {
    display: flex; flex-direction: column; gap: 2px;
    position: fixed; inset-block: 0; inset-inline-start: 0; width: 236px;
    padding: 22px 16px calc(16px + env(safe-area-inset-bottom));
    background: var(--paper); border-inline-end: 1px solid var(--line);
    overflow-y: auto; z-index: 40;
  }
  body { padding-inline-start: 236px; }
  body.no-shell { padding-inline-start: 0; }
  body.no-shell #rail { display: none; }

  .rail-mark { margin: 2px 4px 20px; }
  .rail-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; text-align: start; background: none; border: none;
    border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 400;
    transition: background var(--settle) var(--ease);
  }
  .rail-item:hover { background: rgba(26,25,23,.05); }
  .rail-item.on { background: var(--ink); color: var(--bone); }
  .rail-item .ri-n { font-size: 11px; opacity: .65; }
  .rail-item.ghost-item { color: var(--grey); margin-top: 6px; }

  .rail-h { font-size: 11px; color: var(--grey); margin: 20px 12px 6px; }
  .rail-c {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: start;
    background: none; border: none; border-radius: 12px; padding: 8px 12px;
    font-size: 13px; font-weight: 300;
    transition: background var(--settle) var(--ease);
  }
  .rail-c:hover { background: rgba(26,25,23,.05); }
  .rail-c.on { background: rgba(26,25,23,.07); font-weight: 400; }
  .rail-c .dotm { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
                  background: var(--line); }
  .rail-c .dotm.urgent { background: #E24B4A; }
  .rail-c .dotm.ask { background: #EF9F27; }
  .rail-c .dotm.ok { background: #97C459; }
  .rail-c .nm2 { flex: 1; min-width: 0; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }

  .rail-foot { margin-top: auto; padding-top: 18px; display: flex;
               flex-direction: column; gap: 4px; font-size: 11px; color: var(--grey); }

  /* the rail already says the name and holds the navigation; repeating both
     inside every screen is just noise */
  .screen .bar .mark-sm { display: none; }
  #todayScreen .foot, #home .foot { display: none; }

  /* content sits in the room the rail leaves it */
  .screen { max-width: 720px; margin-inline: auto; padding-inline: 28px; padding-block-start: 26px; }
  .screen.wide { max-width: 1180px; }
  .sheet { max-width: 720px; inset-inline-start: 236px; margin-inline: auto; }
  .sheet.wide-sheet { max-width: 1100px; }
  #scrim { inset-inline-start: 236px; }
  #toast { max-width: 620px; inset-inline-start: 236px; }
}

/* between phone and rail: a plain centred column, no rail, no frame */
@media (min-width: 720px) and (max-width: 899px) {
  .screen { max-width: 640px; margin-inline: auto; padding-inline: 24px; }
  .screen.wide { max-width: none; }
  .sheet { max-width: 640px; margin-inline: auto; }
}

/* ── screens ───────────────────────────────────────────────────────────── */
.screen {
  display: none; min-height: 100vh;
  padding: max(18px, env(safe-area-inset-top)) 14px calc(30px + env(safe-area-inset-bottom));
}
/* the desktop height rule lives with the frame above — a second one here
   would come later in the cascade and undo it */
.screen.on { display: block; animation: rise var(--reveal) var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.bar { display: flex; align-items: center; justify-content: space-between; }

.wk { font-size: 11px; color: var(--grey); font-weight: 400; }
.wk.grow { margin-inline-start: auto; }
.back { background: none; border: none; font-size: 13px; color: var(--grey); font-weight: 400; padding: 0; }

h1 { font-size: 30px; font-weight: 200; line-height: 1.3; margin: 18px 2px 2px; }
.lede { font-size: 13px; color: var(--grey); margin: 0 2px 18px; line-height: 1.85; }

.tools { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; }
.ghost { background: none; border: 1px solid var(--line); border-radius: 999px; font-size: 13px;
         font-weight: 400; padding: 9px 16px; transition: background var(--settle) var(--ease); }
.ghost:active { background: rgba(26,25,23,.05); }

/* padding/font-size verified against the Design's own wide primary buttons
   (build/approve, source lines 663/729): padding:17px 0, font-size:15px.
   The auth-flow screens (gate/sign-up/setup) use 18px 0 in the source —
   1px of drift left un-chased here as below-perceptible, not unverified. */
.btn { background: var(--butter); color: var(--ink); border: none; border-radius: 999px;
       font-weight: 700; font-size: 15px; padding: 17px 0;
       display: inline-flex; align-items: center; justify-content: center; gap: 10px;
       transition: transform var(--settle) var(--ease); }
.btn:active { transform: scale(.98); }
.btn.wide { width: 100%; }
/* source line 95: nameBg/nameFg/nameCursor — muted until the name field
   has something in it, exact values (not the browser default grey-out) */
.btn:disabled { background: rgba(26,25,23,.07); color: var(--grey); cursor: default; }
.btn:disabled:active { transform: none; }

/* ── sign in ───────────────────────────────────────────────────────────── */
input[type="email"], input[type="password"] {
  width: 100%; font: inherit; font-size: 16px; font-weight: 300;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 16px; margin-bottom: 10px; color: var(--ink);
}
input[type="email"]:focus, input[type="password"]:focus { outline: none; border-color: var(--ink); }
input[type="email"]::placeholder, input[type="password"]::placeholder { color: #B5AB9F; }
input[type="password"] { direction: ltr; text-align: start; }
.ghost.wide { width: 100%; padding: 14px 0; }
.sent { font-size: 14px; line-height: 1.85; margin: 0 2px 16px; }

/* ── greeting ──────────────────────────────────────────────────────────── */
#hello { display: none; }
#hello.on { display: flex; flex-direction: column; }
.hello-mark { align-self: flex-start; }
.hello-copy { margin: auto 2px; }
.hi { font-size: 34px; font-weight: 200; line-height: 1.3; margin: 0 0 6px; }
.hi-sub { font-size: 20px; font-weight: 200; line-height: 1.4; color: var(--grey); margin: 0; }

/* ── client list ───────────────────────────────────────────────────────── */
.client {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
  background: var(--paper); border: none; border-radius: var(--radius);
  padding: 15px 14px; margin-bottom: 9px;
  transition: transform var(--settle) var(--ease);
}
.client:active { transform: scale(.99); }
.client .dot { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
               display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.client .nm { font-size: 16px; font-weight: 400; margin: 0; }
.client .st { font-size: 11px; color: var(--grey); margin: 3px 0 0; }
.client .go { margin-inline-start: auto; color: var(--grey); font-size: 15px; }

/* ── week feed · flat expandable day rows, the Design's own structure —
   no card, no shadow, no per-story approve button on the collapsed row.
   Tapping a day expands it to two story previews; approving happens inside
   the story sheet, not here. ─────────────────────────────────────────────── */
.d-day { border-top: 1px solid rgba(26,25,23,.09); }
.d-day-head { display: flex; align-items: flex-start; gap: 14px; padding: 15px 26px;
              cursor: pointer; transition: background var(--settle) var(--ease); }
.d-day-head:active { background: #FFFFFF; }
.d-day-num { width: 22px; flex: none; text-align: center; }
.d-day-num b { display: block; font-family: DMV, sans-serif; font-weight: 700; font-size: 17px;
               line-height: 1; color: rgba(26,25,23,.55); direction: ltr; unicode-bidi: isolate; }
.d-day-num.on b { color: var(--ink); }
.d-day-num span { display: block; font-weight: 300; font-size: 10.5px; color: var(--grey); margin-top: 4px; }
.d-day-main { flex: 1; min-width: 0; }
.d-day-row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.d-day-theme { font-weight: 600; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-day-state { font-weight: 400; font-size: 10.5px; color: var(--grey); white-space: nowrap; }
.d-day-summary { font-weight: 300; font-size: 11.5px; color: var(--grey); margin-top: 3px;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-day-body { padding: 2px 26px 22px; display: flex; flex-direction: column; gap: 14px; }
.d-story-prev { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
.d-story-thumb { width: 74px; height: 118px; border-radius: 18px; overflow: hidden; flex: none; background: #FFFFFF; }
.d-story-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-story-prev-meta { flex: 1; min-width: 0; padding-top: 2px; }
.d-story-prev-cap { font-size: 10.5px; font-weight: 400; letter-spacing: .06em; color: var(--grey); }
.d-story-prev-copy { font-weight: 300; font-size: 13px; line-height: 1.8; color: var(--ink); margin-top: 8px; }
.d-story-prev-open { font-weight: 400; font-size: 11px; color: var(--ink);
                      border-bottom: 1px solid rgba(26,25,23,.3); display: inline-block; margin-top: 12px; }
.d-day-regen-link { font-weight: 400; font-size: 12px; color: var(--ink);
                     border-bottom: 1px solid rgba(26,25,23,.28); cursor: pointer; align-self: flex-start; }

/* ── cards · superseded by the day-row system above for the week feed, kept
   only for anything not yet migrated ─────────────────────────────────────── */
.card { background: var(--paper); border-radius: var(--radius); padding: 12px; margin-bottom: 10px;
        transition: background var(--settle) var(--ease); }
.card.done { background: var(--sage); }
.card-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.slot { font-size: 11px; color: var(--grey); font-weight: 400; }
.pill { font-size: 10px; font-weight: 400; padding: 3px 9px; border-radius: 999px;
        background: rgba(26,25,23,.06); color: var(--grey); }
.pill.warn { background: var(--peach); color: #8A4A28; }
.pill.ok { background: var(--sage); color: #3F5A2A; }
.row { display: flex; gap: 11px; }
.thumb { width: 62px; height: 104px; border-radius: 12px; object-fit: cover; flex-shrink: 0;
         background: rgba(26,25,23,.06); }
.meta { min-width: 0; flex: 1; }
.copy { font-size: 14px; font-weight: 300; line-height: 1.6; margin: 0; }
.copy.empty { color: var(--grey); }
.kind { font-size: 11px; color: var(--grey); font-weight: 400; margin: 6px 0 0; }
.cta-line { font-size: 11px; color: var(--grey); margin: 6px 0 0; }
.acts { display: flex; gap: 7px; margin-top: 12px; }
.acts button { border-radius: 999px; font-size: 13px; padding: 11px 0; flex: 1;
               border: 1px solid var(--line); background: none; font-weight: 400; }
.acts .go { background: var(--butter); border-color: var(--butter); font-weight: 700; flex: 1.5; }
.acts button:active { transform: scale(.98); }
.foot { font-size: 11px; color: var(--grey); line-height: 1.9; margin: 22px 4px 0; }

/* ── sheets ────────────────────────────────────────────────────────────── */
#scrim { position: absolute; inset: 0; background: rgba(26,25,23,.32); opacity: 0; pointer-events: none;
         transition: opacity var(--settle) var(--ease); z-index: 70; }
#scrim.on { opacity: 1; pointer-events: auto; }

.sheet {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 80;
  background: var(--bone); border-radius: 24px 24px 0 0;
  padding: 10px 14px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(101%); visibility: hidden;
  transition: transform var(--settle) var(--ease), visibility 0s linear var(--settle);
  max-height: 88vh; display: flex; flex-direction: column;
}
.sheet.on { transform: none; visibility: visible; transition-delay: 0s; }
.grab { width: 38px; height: 4px; border-radius: 999px; background: var(--line); margin: 2px auto 12px; }
.sheet-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.sheet-head span { font-size: 15px; font-weight: 400; }
.x { background: none; border: none; font-size: 12px; color: var(--grey); padding: 0; }
.sheet-body { overflow: auto; }
.sheet-acts { display: flex; gap: 8px; margin: 14px 0 10px; }
.sheet-acts .ghost { flex: 1; }

/* story preview — the client's brand lives here, not in the chrome */
.preview { position: relative; aspect-ratio: 9/16; max-height: 46vh; margin: 0 auto;
           border-radius: 14px; overflow: hidden; background: var(--ink); }
.preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prev-scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.10) 45%, rgba(0,0,0,.36)); }
/* the preview is a photo and the words for it — not a finished story.
   the client's own mark belongs on the artwork, not here. */
.prev-copy { position: absolute; inset-inline: 22px; top: 50%; transform: translateY(-50%);
             text-align: center; color: #fff; font-weight: 200; font-size: 15px; line-height: 1.45;
             border-radius: 8px; padding: 6px 4px; transition: background var(--settle) var(--ease); }
.prev-copy:focus { outline: none; background: rgba(0,0,0,.35); }
.edit-hint { font-size: 11px; color: var(--grey); text-align: center; margin: 10px 0 0; }

/* the library is browsed one kitchen at a time — never 61 in a row */
.chips { display: flex; gap: 7px; overflow-x: auto; padding: 0 0 12px;
         scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; border: 1px solid var(--line); border-radius: 999px;
        background: none; font-size: 13px; font-weight: 400; padding: 9px 15px;
        white-space: nowrap; transition: background var(--settle) var(--ease); }
.chip.on { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.chip b { font-weight: 400; opacity: .55; margin-inline-start: 5px; }

/* the Design's filter-chip row (clientFilters/libFilters) is a distinct,
   smaller chip than the topic/category selection chips above —
   padding:7px 14px, font-size:12px, exactly as in atClients/atMedia */
.d-chiprow .chip { padding: 7px 14px; font-size: 12px; }

.group-label { font-size: 11px; color: var(--grey); font-weight: 400; margin: 4px 2px 8px; }
.group-label:not(:first-child) { margin-top: 18px; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.grid img { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 10px; display: block;
            border: 2px solid transparent; }
.grid img.sel { border-color: var(--ink); }
.grid .wrap { position: relative; }
.grid .tag { position: absolute; bottom: 5px; inset-inline: 5px; font-size: 9px; text-align: center;
             background: rgba(245,243,239,.9); border-radius: 5px; padding: 2px; color: var(--grey); }

.opt { width: 100%; text-align: start; background: var(--paper); border: 1px solid transparent;
       border-radius: 14px; padding: 13px; margin-bottom: 8px; font-size: 14px; font-weight: 300;
       line-height: 1.55; }
.opt.sel { border-color: var(--ink); }
.opt .why { display: block; font-size: 10px; color: var(--grey); margin-top: 6px; }

pre { background: var(--paper); border-radius: 14px; padding: 13px; font-size: 11px; line-height: 1.8;
      white-space: pre-wrap; font-family: Plex, monospace; margin: 0 0 14px; max-height: 40vh; overflow: auto; }

/* ── added in v2 ──────────────────────────────────────────────────────── */
.err { font-size: 13px; color: #A32D2D; margin: 10px 2px 0; line-height: 1.6; }
.link { background: none; border: none; padding: 0; font: inherit; font-size: 12px;
        color: var(--grey); text-decoration: underline; }

/* client state cards: colour is the state, one action each */
.state {
  display: block; width: 100%; text-align: start; background: var(--paper);
  border: none; border-radius: var(--radius); padding: 13px 13px 12px;
  margin-bottom: 9px; border-inline-start: 3px solid var(--line);
  transition: transform var(--settle) var(--ease);
}
.state:active { transform: scale(.995); }
.state.unplanned { border-inline-start-color: #E24B4A; }
.state.started,
.state.partial   { border-inline-start-color: #EF9F27; }
.state.ready     { border-inline-start-color: #97C459; }
/* B2 · everything inside the card is a span, so each part that should own a
   line has to say so. Without this the name, the state and the action share
   one line and the button lands on top of the status text. */
.state-top { display: flex; align-items: center; gap: 11px; }
.state .dot { width: 33px; height: 33px; border-radius: 50%; flex-shrink: 0;
              display: flex; align-items: center; justify-content: center; font-size: 13px; }
.state .who { display: block; flex: 1; min-width: 0; }
.state .nm { display: block; font-size: 16px; font-weight: 400; margin: 0;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.state .st { display: block; font-size: 11px; margin: 3px 0 0; color: var(--grey); }
.state.unplanned .st { color: #A32D2D; }
.state.partial .st, .state.started .st { color: #854F0B; }
.state.ready .st { color: #3B6D11; }
.meter { display: flex; gap: 4px; margin-top: 10px; }
.meter span { height: 4px; border-radius: 999px; background: rgba(26,25,23,.12); }
.meter span.on { background: #97C459; }
.state .act { display: block; width: 100%; margin-top: 10px; border-radius: 999px;
              padding: 9px; font-size: 13px; text-align: center;
              border: 1px solid var(--line); background: none; }
.state.unplanned .act { background: var(--butter); border-color: var(--ink); font-weight: 700; }

/* ── forms ─────────────────────────────────────────────────────────────── */
.fld { display: block; margin-bottom: 16px; }
.fld-l { display: block; font-size: 13px; font-weight: 400; margin-bottom: 6px; }
.fld-h { display: block; font-size: 11px; color: var(--grey); line-height: 1.7; margin-top: 6px; }
/* .opt is reused for two unrelated things — a block-level choice button
   (sheetCopy's option list) and this small inline "not required" badge next
   to a field label. Without resetting the block-button properties, the
   badge inherits width:100%/padding/background from the other one and
   overlaps whatever follows it — exactly what showed up once this markup
   rendered inside the narrower phone frame. */
.fld .opt {
  display: inline; width: auto; padding: 0; margin: 0 4px 0 0;
  background: none; border: none; border-radius: 0;
  color: var(--grey); font-size: 11px; font-weight: 400; line-height: inherit;
}
.fld input[type="text"], .fld input[type="number"], .fld textarea, select.mini {
  width: 100%; font: inherit; font-size: 16px; font-weight: 300;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 14px; color: var(--ink);
}
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--ink); }
.fld-row { display: flex; gap: 10px; }
.fld-row .fld { flex: 1; }

/* ── library ───────────────────────────────────────────────────────────── */
.lib-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.lib-head h1 { margin-bottom: 2px; }
.lib-actions { flex-shrink: 0; padding-bottom: 18px; }

.lib-filters { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.chips-l { flex-shrink: 0; align-self: center; font-size: 11px; color: var(--grey);
           margin-inline-end: 2px; }
.chip.ghost-chip { border-style: dashed; color: var(--grey); }
.lib-filters input[type="search"] {
  width: 100%; font: inherit; font-size: 15px; font-weight: 300;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 16px; color: var(--ink);
}
.lib-filters input[type="search"]:focus { outline: none; border-color: var(--ink); }

.lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cell { position: relative; border-radius: 10px; overflow: hidden; background: rgba(26,25,23,.06);
        aspect-ratio: 3/4; cursor: pointer; }
.cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cell .mark { position: absolute; inset-block-start: 5px; inset-inline-start: 5px;
              width: 19px; height: 19px; border-radius: 50%; border: 2px solid #fff;
              background: rgba(0,0,0,.25); }
.cell.sel { outline: 3px solid var(--ink); outline-offset: -3px; }
.cell.sel .mark { background: var(--ink); }
.cell .badge { position: absolute; inset-block-end: 0; inset-inline: 0;
               font-size: 9px; padding: 3px 5px; color: #fff;
               background: linear-gradient(transparent, rgba(0,0,0,.65));
               display: flex; justify-content: space-between; gap: 4px; }
.cell.untagged::after { content: ""; position: absolute; inset: 0;
                        border: 2px solid #EF9F27; border-radius: 10px; pointer-events: none; }

.bulk { position: sticky; bottom: 0; z-index: 30; margin-top: 10px;
        background: var(--ink); color: var(--bone); border-radius: 16px;
        padding: 10px 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bulk-n { font-size: 13px; flex-shrink: 0; }
.bulk-acts { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; justify-content: flex-end; }
.bulk .ghost { border-color: rgba(245,243,239,.35); color: var(--bone); font-size: 12px; padding: 7px 12px; }
.bulk .ghost.danger { border-color: #E24B4A; color: #FFB3B2; }
.bulk select.mini { width: auto; font-size: 12px; padding: 7px 10px; border-radius: 999px; }

.up-bar { height: 4px; border-radius: 999px; background: rgba(26,25,23,.12); overflow: hidden; margin: 10px 0 6px; }
.up-fill { display: block; height: 100%; background: var(--ink); width: 0; transition: width 160ms linear; }
.up-text { font-size: 11px; color: var(--grey); margin: 0 2px 10px; }

/* the grid follows the room it has, not a breakpoint guess */
.lib-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
@media (min-width: 720px) {
  .lib-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .lib-filters { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .lib-filters input[type="search"] { width: 240px; flex-shrink: 0; }
}

/* ── today ─────────────────────────────────────────────────────────────── */
.sec { margin: 26px 4px 9px; display: flex; flex-direction: column; gap: 2px; }
.sec:first-child { margin-top: 4px; }
.sec-t { font-size: 13px; font-weight: 400; }
.sec-s { font-size: 11px; color: var(--grey); }

.task {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  background: var(--paper); border: none; border-radius: var(--radius);
  padding: 13px 14px; margin-bottom: 8px;
  border-inline-start: 3px solid var(--line);
  transition: transform var(--settle) var(--ease);
}
.task:active { transform: scale(.995); }
.task.urgent { border-inline-start-color: #E24B4A; }
.task.ask    { border-inline-start-color: #EF9F27; }
.task.work   { border-inline-start-color: #97C459; }
.task-main { display: block; flex: 1; min-width: 0; }
.task-t { display: block; font-size: 15px; font-weight: 400;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-s { display: block; font-size: 11px; color: var(--grey); margin-top: 3px; }
.task-a { flex-shrink: 0; font-size: 12px; color: var(--grey); }

.empty { background: var(--paper); border-radius: var(--radius);
         padding: 26px 20px; text-align: center; margin-top: 6px; }
.empty-t { font-size: 16px; font-weight: 400; margin: 0 0 8px; }
.empty-b { font-size: 13px; color: var(--grey); line-height: 1.8; margin: 0 0 16px; }
.empty-b:last-child { margin-bottom: 0; }

#warnBox { background: var(--peach); border-radius: 14px; padding: 11px 13px; margin-bottom: 14px; }
#warnBox p { margin: 0 0 5px; font-size: 12px; line-height: 1.6; color: #8A4A28; }
#warnBox p:last-child { margin-bottom: 0; }

.card.published { background: var(--lilac); }
.pill.pub { background: var(--lilac); color: #3C3489; }

#toast {
  position: absolute; inset-inline: 0; bottom: calc(20px + env(safe-area-inset-bottom));
  margin-inline: auto; width: fit-content; max-width: 84%;
  background: var(--ink); color: var(--bone); font-size: 13px;
  padding: 11px 18px; border-radius: 999px; z-index: 90;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--settle) var(--ease), transform var(--settle) var(--ease);
}
#toast.on { opacity: 1; transform: none; pointer-events: auto; }
/* a toast that can be answered — the undo has to be reachable, which means
   the toast stops being pointer-transparent while it is on screen */
#toast { display: flex; align-items: center; gap: 14px; }
#toastAct { background: none; border: 0; color: var(--butter); font: inherit;
            font-weight: 600; padding: 4px 2px; min-height: 36px; cursor: pointer;
            border-bottom: 1px solid var(--butter); border-radius: 0; }

.skeleton { background: rgba(26,25,23,.06); border-radius: var(--radius);
            height: 92px; margin-bottom: 9px; }

/* ── forced phone view ─────────────────────────────────────────────────────
   The layout follows the window, so a wide browser always shows the desktop
   shell. This makes the phone layout available on a big screen without
   resizing anything — same code, same data, just the narrow arrangement. */
body.force-mobile { padding-inline-start: 0 !important; background: #DEDAD2; }
body.force-mobile #rail { display: none !important; }
body.force-mobile .screen {
  max-width: 402px !important; margin-inline: auto !important;
  padding-inline: 14px !important; padding-block-start: 18px !important;
  background: var(--bone); min-height: 100vh;
  box-shadow: 0 0 0 1px rgba(26,25,23,.10);
}
body.force-mobile .screen .bar .mark-sm { display: block !important; }
body.force-mobile #todayScreen .foot,
body.force-mobile #home .foot { display: block !important; }
body.force-mobile .sheet {
  max-width: 402px !important; inset-inline-start: 0 !important;
  margin-inline: auto !important;
}
body.force-mobile #scrim, body.force-mobile #toast { inset-inline-start: 0 !important; }
body.force-mobile #toast { max-width: 402px !important; }
body.force-mobile .lib-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
body.force-mobile .lib-filters { flex-direction: column !important; align-items: stretch !important; }
body.force-mobile .lib-filters input[type="search"] { width: 100% !important; }
body.force-mobile .lib-head { flex-direction: column; align-items: stretch; }
body.force-mobile .lib-actions { padding-bottom: 0; margin-bottom: 12px; }

/* ── the rail as a drawer, on a phone ──────────────────────────────────────
   Same markup, same contents. On a narrow screen it waits off the edge until
   it is asked for, so the client switcher is one tap away instead of gone. */
#menuBtn { display: none; }
#railScrim { position: fixed; inset: 0; z-index: 44; background: rgba(26,25,23,.32);
             opacity: 0; pointer-events: none; transition: opacity var(--settle) var(--ease); }
#railScrim.on { opacity: 1; pointer-events: auto; }

@media (max-width: 899px) {
  #menuBtn { display: flex; }
  #rail { display: flex; }
  body.no-shell #rail, body.no-shell #menuBtn { display: none; }
}
body.force-mobile #menuBtn { display: flex; }
body.force-mobile #rail { display: flex !important; }
body.force-mobile.no-shell #rail,
body.force-mobile.no-shell #menuBtn { display: none !important; }

/* the drawer shape — only where the rail is a drawer, never on the wide rail */
@media (max-width: 899px) {
  #rail {
    flex-direction: column; gap: 2px;
    position: fixed; inset-block: 0; inset-inline-start: 0;
    width: 264px; max-width: 82vw;
    padding: 22px 16px calc(16px + env(safe-area-inset-bottom));
    background: var(--paper); overflow-y: auto; z-index: 45;
    transform: translateX(100%);
    transition: transform var(--reveal) var(--ease);
    box-shadow: -18px 0 40px rgba(26,25,23,.10);
  }
}
body.force-mobile #rail {
  flex-direction: column; gap: 2px;
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: 264px; max-width: 82vw;
  padding: 22px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--paper); overflow-y: auto; z-index: 45;
  transform: translateX(100%);
  transition: transform var(--reveal) var(--ease);
  box-shadow: -18px 0 40px rgba(26,25,23,.10);
  border-inline-end: none;
}
#rail.open { transform: none !important; }

/* the rail's contents look the same whether it is pinned or slides in */
.rail-mark { margin: 2px 4px 20px; }
.rail-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: start; background: none; border: none;
  border-radius: 12px; padding: 11px 12px; font-size: 15px; font-weight: 400;
  transition: background var(--settle) var(--ease);
}
.rail-item.on { background: var(--ink); color: var(--bone); }
.rail-item .ri-n { font-size: 11px; opacity: .65; }
.rail-item.ghost-item { color: var(--grey); margin-top: 6px; }
.rail-h { font-size: 11px; color: var(--grey); margin: 20px 12px 6px; }
.rail-c {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: start;
  background: none; border: none; border-radius: 12px; padding: 10px 12px;
  font-size: 14px; font-weight: 300;
  transition: background var(--settle) var(--ease);
}
.rail-c.on { background: rgba(26,25,23,.07); font-weight: 400; }
.rail-c .dotm { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--line); }
.rail-c .dotm.urgent { background: #E24B4A; }
.rail-c .dotm.ask    { background: #EF9F27; }
.rail-c .dotm.ok     { background: #97C459; }
.rail-c .nm2 { flex: 1; min-width: 0; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.rail-foot { margin-top: auto; padding-top: 18px; display: flex;
             flex-direction: column; gap: 4px; font-size: 11px; color: var(--grey); }

#menuBtn {
  position: fixed; inset-block-start: max(14px, env(safe-area-inset-top));
  inset-inline-start: 14px; z-index: 46;
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--paper); align-items: center; justify-content: center;
  flex-direction: column; gap: 4px; padding: 0;
}
#menuBtn span { display: block; width: 16px; height: 1.5px; background: var(--ink);
                border-radius: 2px; transition: transform var(--settle) var(--ease),
                opacity var(--settle) var(--ease); }
#menuBtn[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
#menuBtn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#menuBtn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 899px) { .screen .bar { padding-inline-start: 46px; } }
body.force-mobile .screen .bar { padding-inline-start: 46px; }

#viewToggle {
  position: fixed; inset-block-end: 16px; inset-inline-end: 16px; z-index: 95;
  background: var(--ink); color: var(--bone); border: none; border-radius: 999px;
  font-size: 12px; padding: 9px 15px; opacity: .55;
  transition: opacity var(--settle) var(--ease);
}
#viewToggle:hover { opacity: 1; }
@media (max-width: 899px) { #viewToggle { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* the brief · onboarding and the client sheet share one look */
.brief-sec { margin-top: 26px; }
.fld textarea { line-height: 1.75; resize: vertical; min-height: 120px; }
.fld textarea::placeholder { color: #B5AB9F; line-height: 1.9; }

/* topic chips wrap instead of scrolling — a dozen of them is a paragraph,
   not a filmstrip, and hiding half off the edge hides half the choices */
.chips-wrap { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
.chip.topic { font-weight: 300; }
.chip.topic.on { font-weight: 400; }
.chip-input {
  flex-shrink: 0; border: 1px dashed var(--ink); border-radius: 999px;
  background: var(--paper); font: inherit; font-size: 13px; font-weight: 300;
  padding: 9px 15px; width: 130px; color: var(--ink);
}
.chip-input:focus { outline: none; }

/* at the cap the unchosen priorities stay legible but stop inviting a tap */
.chip.muted { opacity: .38; }
.sec-s b { font-weight: 400; }

/* ── building a week ───────────────────────────────────────────────────── */
#genBox { background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
          padding: 13px 15px; margin-bottom: 14px; }
#genBox.failed { background: var(--peach); border-color: transparent; }
.gen-row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.gen-sub { font-size: 11px; color: var(--grey); margin: 6px 0 0; line-height: 1.6; }
#genBox.failed .gen-sub { color: #8A4A28; }
.gen-acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.gen-acts .btn { padding: 10px 20px; font-size: 14px; }
/* ── the plan ─────────────────────────────────────────────────────────────
   Paper, not peach. This is the calmest thing on the screen and the first
   thing read: it says what the week is for. Nothing in it competes with the
   feed below — no colour, no weight, one hairline between days. */

#planBox { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
           padding: 16px 18px 14px; margin-bottom: 18px; }

.plan-head { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.plan-when { font-size: 12px; color: var(--grey); min-width: 78px; text-align: center; }
.plan-state { font-size: 11px; color: var(--grey); }
.step { background: none; border: none; padding: 2px 8px; font-size: 17px; line-height: 1;
        color: var(--grey); font-weight: 300;
        transition: color var(--settle) var(--ease); }
.step:active { color: var(--ink); }
.step:disabled { opacity: .3; }

.plan-reason { font-size: 12px; color: var(--grey); line-height: 1.75;
               margin: 6px 2px 14px; }

/* One day per block. The rule sits above the day rather than between the two
   frames, so a day reads as one thing and not as two loose rows. */
.pd { border-top: 1px solid var(--line); padding: 12px 0 2px; }
.pd:first-child { border-top: none; padding-top: 4px; }
.pd h4 { font-size: 12px; font-weight: 400; color: var(--grey); margin: 0 0 8px; }

.pf { margin: 0 0 12px; }
.pf:last-child { margin-bottom: 4px; }
.pf-tag { display: block; font-size: 11px; color: var(--grey); margin-bottom: 3px; }
.pf p { margin: 0; font-size: 14px; line-height: 1.8; }

.plan-status { display: flex; align-items: center; gap: 10px; font-size: 13px;
               color: var(--grey); margin: 10px 0 2px; }
#planBox.failed { background: var(--peach); border-color: transparent; }
#planBox.failed .plan-status { color: #8A4A28; }
#planBox.failed .spin { display: none; }

.plan-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.plan-acts:empty, .plan-acts.none { display: none; }
.plan-acts .btn { padding: 10px 22px; font-size: 14px; }
.plan-acts .ghost { padding: 9px 18px; }

.spin { width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%;
        border: 2px solid var(--line); border-top-color: var(--ink);
        animation: spin 700ms linear infinite; }
#genBox.failed .spin { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   the Claude Design phone-frame shell — the one user-facing surface now.
   Everything above this line still targets the old rail/dual-mode layout;
   none of it is deleted (phase 1 of the migration — see the plan), but
   nothing in the live navigation reaches it any more. These rules simply
   win the cascade for the elements that are still shown.
   ═══════════════════════════════════════════════════════════════════════ */

/* the rail no longer exists in the live UI at any width — it moved into
   #legacyShell — so nothing should still be reserving 236px for it */
body { padding-inline-start: 0 !important; }

body {
  background: #EDEAE4;
  display: flex; min-height: 100vh; align-items: center; justify-content: center;
}

/* fixed phone dimensions always — small viewports get a uniform scale()
   transform (see fitShell() in app.js), the same mechanism the Design
   prototype itself uses, rather than letting width/height clamp
   independently and distort the frame's aspect ratio */
#appShell {
  position: relative; width: 390px; height: 844px; flex: none;
  background: var(--bone); overflow: hidden; border-radius: 38px;
  border: 1px solid rgba(26,25,23,.14); box-shadow: 0 2px 10px rgba(26,25,23,.05);
}

/* every .screen becomes one panel of the frame instead of a full page —
   same on() toggle app.js already drives, just re-homed */
#appShell .screen {
  position: absolute; inset: 0; min-height: 0; overflow-y: auto;
  max-width: none; margin: 0; padding: 52px 26px 100px;
}
#appShell .screen.wide { max-width: none; }
#appShell .screen .bar { padding: 0 0 0; margin-bottom: 4px; }
#appShell .screen .bar .mark-sm { display: block; }
#appShell h1 { font-size: 30px; }

/* ═══════════════════════════════════════════════════════════════════════
   d-panel — screens rebuilt structurally around the Design's own layout:
   a header at fixed padding, a scrolling middle, an optional fixed footer.
   Design's own screens are exactly this shape (`padding:52px 26px 0` on
   the header, independent scroll region below). Screens not yet migrated
   to this system keep the older #appShell .screen padding above.
   ═══════════════════════════════════════════════════════════════════════ */
/* bottom nav — text only, underline active state, space-between. Exactly
   the Design's `nav`: no pill, no background box. */
#bottomNav {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 20;
  display: none; align-items: baseline; justify-content: center;
  min-height: 68px; padding: 2px 0 calc(22px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(26,25,23,.09);
  background: var(--bone); isolation: isolate;
}
#bottomNav::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: env(safe-area-inset-bottom); background: var(--bone); z-index: -1; }
#bottomNav.on { display: flex; }
.bn-item { font-family: Plex, sans-serif; font-size: 11.5px; font-weight: 400; color: var(--grey);
           padding: 14px 12px 4px; border-bottom: 1.5px solid transparent; cursor: pointer;
           transition: color var(--settle) var(--ease), border-color var(--settle) var(--ease); }
.bn-item.on { color: var(--ink); border-bottom-color: var(--butter); }
/* a nav item with nothing behind it yet (Clients, before any client exists)
   is inert — source line 1760: `live: has`, faint colour, no pointer */
.bn-item.off { color: rgba(26,25,23,.28); cursor: default; }

/* display must stay gated on .on — a bare .d-panel rule here would make
   every panel screen visible at once regardless of which is active */
#appShell .screen.d-panel { padding: 0; }
#appShell .screen.d-panel.on { display: flex; flex-direction: column; }

/* ── d-flow — Gate/Sign-in/etc: header, a flex:1 centred middle, a footer
   pinned to the bottom. `.d-flow` was referenced on these screens but had
   no rule of its own, so `.d-mid{flex:1}` had no flex parent to center
   within and every element stacked at the top instead of the Design's
   header-top/content-centred/buttons-bottom composition. */
#appShell .screen.d-flow { padding: 0; }
#appShell .screen.d-flow.on { display: flex; flex-direction: column; }
/* source line 351/57: 52px is the shared inApp-style header padding gate
   and sign-in both start from; gate's own header is 56px (line 41) */
#appShell .d-flow > .bar { padding: 52px 26px 0; margin-bottom: 0; flex: none; }
#appShell #gate.d-flow > .bar { padding-top: 56px; }
/* entrance timing, verbatim per screen (source lines 40/56) — not the
   generic `rise` keyframe every other .screen.on falls back to */
#appShell #gate.on { animation: ollaFade 620ms cubic-bezier(.22,.61,.36,1) both; }
#appShell #suName.on { animation: ollaFade 420ms cubic-bezier(.22,.61,.36,1) both; }
#appShell #signin.on { animation: ollaFade 460ms cubic-bezier(.22,.61,.36,1) both; }
#appShell #sent.on { animation: ollaFade 400ms cubic-bezier(.22,.61,.36,1) both; }
#appShell #ready.on { animation: ollaFade 620ms cubic-bezier(.22,.61,.36,1) both; }
#appShell #suDone.on { animation: ollaFade 520ms cubic-bezier(.22,.61,.36,1) both; }
#appShell #fte.on { animation: ollaFade 620ms cubic-bezier(.22,.61,.36,1) both; }
/* source line 194: inSetup fades in — .ob was inheriting the generic
   `rise` timing/curve instead of the Design's own value for this screen */
#appShell #addClient.on { animation: ollaFade 420ms cubic-bezier(.22,.61,.36,1) both; }
/* source line 345: the inApp wrapper itself has NO animation property —
   Today/Clients/Workspace/Week/Media/Me swap instantly in the Design,
   they don't fade or rise. The generic `rise` below only belongs to
   screens with no more specific rule (pending, and any future ones). */
#appShell .hdr-screen.on { animation: none; }

/* ── thinking · source lines 892-899, verbatim — full-bleed bone takeover,
   one rotating line cross-fading above the thinking dots. Not a card, not
   an inline spinner within another screen. */
#appShell #thinking {
  position: absolute; inset: 0; z-index: 50; background: var(--bone);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 34px 80px; font-family: Plex, sans-serif;
}
#appShell #thinking.on { display: flex; }
#thinkLine {
  font-weight: 200; font-size: 22px; line-height: 1.5; color: var(--ink);
  text-align: center; min-height: 36px;
  transition: opacity 240ms cubic-bezier(.22,.61,.36,1);
}
#thinkDots { margin-top: 30px; }
/* #appShell prefix required: #appShell .screen .bar (line 767) is
   (1 id, 2 classes) and would otherwise win over this ID-less rule
   regardless of source order, zeroing the header's top padding back
   to 0 — exactly the bug reported live (onboarding header cramped
   against the top edge). Same specificity fight as the earlier
   #appShell .hdr-screen.on fix. */
#appShell .d-panel > .bar { padding: 52px 26px 0; flex: none; margin-bottom: 0; }
#appShell .d-panel > .bar .back-b { margin-inline-start: 0; }

.d-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 26px; }
.d-scroll::-webkit-scrollbar { display: none; }
.d-scroll { scrollbar-width: none; }
/* today/clients/me sit under the floating bottom nav and need clearance so
   the last row isn't hidden behind it */
#todayScreen .d-scroll, #home .d-scroll, #me .d-scroll, #ws .d-scroll { padding-bottom: 116px; }
#weekBoard .d-scroll { padding-bottom: 116px; }
.ed-scroll { padding-bottom: 116px; }
.week-board-head { padding: 30px 26px 18px; }
.week-board-head h1 { margin-bottom: 8px; font-size: 36px; color: var(--ink); }
.week-board-head #weekBoardRange { margin: 0 0 4px; }
.week-board-head #weekBoardSummary { margin: 0; }
.week-board-days { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-top:18px; color:var(--grey); font-size:10px; text-align:center; }
.week-board-row { display:grid; grid-template-columns: 1fr auto; gap:4px 10px; width:100%; padding:16px 26px; border:0; border-top:1px solid rgba(26,25,23,.09); background:none; text-align:start; }
.wb-name { font-size:16px; font-weight:400; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wb-state { font-size:11px; color:var(--grey); }
.wb-slots { grid-column:1 / -1; display:grid; grid-template-columns:repeat(6,1fr); gap:6px; padding-top:10px; }
.wb-day-slots { display:flex; gap:3px; justify-content:center; }
.wb-slot { width:10px; height:10px; border:1px solid rgba(26,25,23,.22); border-radius:3px; }
.wb-slot.filled { background:var(--sage); border-color:transparent; }
.wb-empty { grid-column:1 / -1; font-size:11px; color:var(--grey); }

.d-pad-top { padding: 34px 26px 0; }
.d-pad-top-sm { padding: 20px 26px 0; }
.d-h1-lg { font-weight: 200; font-size: 34px; line-height: 1.26; margin: 0; }
.d-h1 { font-weight: 200; font-size: 31px; line-height: 1.3; margin: 0; }
.d-h1-sm { font-weight: 200; font-size: 29px; line-height: 1.3; margin: 0; }
.d-body { font-weight: 300; font-size: 15px; line-height: 1.9; color: #3A3936; margin: 20px 0 0; max-width: 30ch; }
.d-note { font-weight: 300; font-size: 13px; line-height: 1.85; color: var(--grey); margin: 0; }
.d-center { text-align: center; }
.d-eyebrow { font-size: 10px; font-weight: 400; letter-spacing: .14em; color: var(--grey); }
.d-label { font-size: 10.5px; font-weight: 400; letter-spacing: .08em; color: var(--grey); margin-bottom: 2px; }
.d-cap { font-size: 10.5px; font-weight: 400; letter-spacing: .08em; color: var(--grey); padding: 0 0 6px; }
.d-cap-row { font-size: 10.5px; font-weight: 400; letter-spacing: .08em; color: var(--grey); padding: 22px 0 8px; }

.d-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 26px 30px; }
.d-foot-stack { flex: none; padding: 14px 26px 40px; display: flex; flex-direction: column; gap: 12px; }

/* bottom-border-only fields — Design never boxes an input */
.d-input {
  display: block; width: 100%; box-sizing: border-box; border: none;
  border-bottom: 1px solid rgba(26,25,23,.22); background: none;
  padding: 12px 0 10px; font-family: Plex, sans-serif; font-weight: 300; font-size: 16px;
  color: var(--ink); outline: none;
}
.d-area { display: block; width: 100%; box-sizing: border-box; border: none; background: none;
          resize: none; outline: none; font-family: Plex, sans-serif; font-weight: 300; font-size: 15px;
          line-height: 1.8; color: var(--ink); padding: 11px 0 9px;
          border-bottom: 1px solid rgba(26,25,23,.22); }

/* the bordered ghost pill Design uses for secondary actions (תור/צור מחדש/
   the tools row) — larger and softer-bordered than the old .ghost */
.ghost-b { background: none; border: 1px solid rgba(26,25,23,.25); border-radius: 999px;
           font-family: Plex, sans-serif; font-weight: 600; font-size: 14px; color: var(--ink);
           padding: 10px 16px; cursor: pointer; transition: border-color var(--settle) var(--ease); white-space: nowrap; }
.ghost-b:active { border-color: rgba(26,25,23,.5); }
.ghost-b.wide { width: 100%; padding: 14px 0; }
.ghost-b.danger { color: #A32D2D; border-color: rgba(163,45,45,.3); }

/* back-link with the underline Design always gives it, instead of a bare
   arrow+text button */
.back-b { background: none; border: none; padding: 10px 8px 3px; margin: -10px -8px -3px;
          font-family: Plex, sans-serif; font-weight: 400; font-size: 11.5px; color: var(--ink);
          border-bottom: 1px solid rgba(26,25,23,.3); cursor: pointer; }

.d-textlink { background: none; border: none; padding: 0 0 3px; font-family: Plex, sans-serif;
              font-weight: 600; font-size: 13.5px; color: var(--ink);
              border-bottom: 1px solid rgba(26,25,23,.28); cursor: pointer; }

.d-chiprow { display: flex; gap: 7px; overflow-x: auto; padding: 16px 26px 0; }
.d-chiprow::-webkit-scrollbar { display: none; }
.d-chiprow { scrollbar-width: none; }

/* ── flat, bordered-top rows — the one repeating structural unit across
   Today's queue, Clients' roster, the workspace section list, story-sheet
   actions and Me's account rows. Never a card, never a shadow. ─────────── */
.d-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: start;
         background: none; border: none; border-top: 1px solid rgba(26,25,23,.09);
         padding: 16px 26px; cursor: pointer; transition: background var(--settle) var(--ease); }
.d-row:active { background: #FFFFFF; }
.d-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.d-row-t { font-weight: 600; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-row-note { font-weight: 300; font-size: 11.5px; line-height: 1.7; color: var(--grey); margin-top: 3px; }
.d-row-arrow { font-weight: 400; font-size: 14px; color: var(--grey); flex: none; }
.d-row-badge { font-family: DMV, sans-serif; font-weight: 500; font-size: 10px; letter-spacing: .1em;
               color: var(--grey); margin-inline-start: 9px; }
.d-row-badge-end { font-family: DMV, sans-serif; font-weight: 500; font-size: 10px; letter-spacing: .14em; color: var(--grey); }
.d-sectlist { margin-top: 6px; }
.d-tint { width: 3px; border-radius: 2px; flex: none; }
.d-endrow { border-top: 1px solid rgba(26,25,23,.09); padding: 18px 0 34px; }

/* Planning v2 evaluation lab: deliberately small and visually separate from
   the production Week surface. It has no save, writer or media controls. */
.planning-lab-bar { display: flex; align-items: center; justify-content: space-between; }
.planning-lab-scroll { padding-top: 26px; padding-bottom: 60px; }
.planning-lab-scroll > .d-note { margin-top: 8px; }
.planning-lab-actions { display: flex; gap: 8px; margin: 24px 0 0; }
.planning-lab-actions .ghost-b { flex: 1; white-space: normal; }
.planning-lab-status { min-height: 24px; margin: 18px 0 0; color: var(--grey); font-size: 12.5px; }
.planning-lab-intro { border-inline-start: 2px solid var(--butter); padding-inline-start: 12px; margin: 12px 0 22px; }
.planning-lab-objective, .planning-lab-concept { margin: 0 0 8px; font-size: 13.5px; line-height: 1.75; }
.planning-lab-day { border-top: 1px solid rgba(26,25,23,.12); padding: 20px 0 16px; }
.planning-lab-day h2 { margin: 0 0 14px; font-size: 17px; font-weight: 600; line-height: 1.55; }
.planning-lab-story + .planning-lab-story { margin-top: 14px; }
.planning-lab-story p { margin: 0; }
.planning-lab-story-label { color: var(--grey); font-size: 10.5px; font-weight: 600; }
.planning-lab-story-idea { margin-top: 3px !important; font-size: 14px; line-height: 1.7; }
.planning-lab-diagnostics { border-top: 1px solid rgba(26,25,23,.12); padding: 18px 0; }
.planning-lab-diagnostics summary { cursor: pointer; font-size: 12px; color: var(--grey); }
.planning-lab-diagnostics pre { direction: ltr; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere;
                                font: 10.5px/1.55 monospace; margin: 14px 0 0; }

/* accent callouts (warnings, comments, low-material notices) — Design never
   uses a filled box for these, only a 2px accent rule */
.d-warn { border-inline-start: 2px solid var(--ink); padding-inline-start: 12px;
          font-weight: 300; font-size: 12.5px; line-height: 1.8; color: var(--ink); margin: 16px 26px 0; }
.d-comment { border-inline-start: 2px solid var(--butter); padding-inline-start: 12px;
             font-weight: 300; font-size: 12.5px; line-height: 1.8; color: var(--ink); margin: 16px 0 0; }

.d-cta-card { margin: 22px 0 0; border: 1px solid rgba(26,25,23,.16); border-radius: 20px; padding: 20px 20px 18px; }
.d-cta-head { font-weight: 600; font-size: 15px; line-height: 1.5; color: var(--ink); }
.d-cta-card .d-note { margin-top: 7px; max-width: 32ch; }
.d-cta-card .btn { margin-top: 16px; padding: 16px 0; }

/* inline expand — no card, no border box, just the next row in flow with a
   top rule; this is how the Design shows day-regenerate, bank, history and
   move without ever opening a second sheet */
.d-inline-form { border-top: 1px solid rgba(26,25,23,.09); padding: 14px 0 6px; }
.d-inline-form .d-area { margin-top: 6px; }
.d-inline-acts { display: flex; gap: 8px; margin-top: 12px; }
.d-inline-acts .btn, .d-inline-acts .ghost-b { flex: 1; padding: 12px 0; font-size: 13.5px; }

/* ══ olla · the assistant · source lines 1202-1277 ══════════════════════
   The one element that floats. White on the bone ground, right-anchored,
   the only real shadow in the product — that separation is what makes her
   read as beside the work rather than part of it. Type, palette and the
   butter rule for her own voice are the existing language. ══════════════ */

#appShell #ollaDot {
  position: absolute; inset-inline-start: auto; right: 12px; z-index: 87;
  width: 46px; height: 46px; border-radius: 50%; padding: 0;
  background: var(--paper); border: 1px solid rgba(26,25,23,.12);
  box-shadow: 0 10px 26px rgba(26,25,23,.16), 0 2px 6px rgba(26,25,23,.10);
  display: flex; align-items: center; justify-content: center;
  font-family: DMV, sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: -.03em; color: var(--ink);
  transition: transform var(--settle) var(--ease);
}
#appShell #ollaDot span { unicode-bidi: isolate; line-height: 1; }
#appShell #ollaDot i { font-style: normal; }
#appShell #ollaDot:active { transform: translateY(-1px); }
/* an unread contextual notice · one butter dot, ringed in bone so it reads
   against the white. Fades in once; never pulses (source line 1206). */
/* physical left, exactly as source line 1206 places it — the inner side of
   a right-anchored medallion, so it never sits off the frame edge */
.od-notice { position: absolute; top: -1px; left: -1px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--butter);
  border: 1.5px solid var(--bone); display: none;
  animation: ollaFade 620ms cubic-bezier(.22,.61,.36,1) both; }
#ollaDot.hint .od-notice { display: block; }
#ollaDot.pos-story { bottom: 28px; }
#ollaDot.pos-week  { bottom: 104px; }
#ollaDot.pos-plain { bottom: 92px; }

#appShell #ollaCatch { position: absolute; inset: 0; z-index: 86; background: transparent; }

#appShell #ollaWin {
  position: absolute; inset-inline: 16px; z-index: 88;
  box-sizing: border-box; background: var(--paper);
  border: 1px solid rgba(26,25,23,.10); border-radius: 26px;
  box-shadow: 0 16px 40px rgba(26,25,23,.10);
  display: flex; flex-direction: column; overflow: hidden;
  transition: height var(--settle) var(--ease);
  animation: ollaOpenBox 280ms cubic-bezier(.22,.61,.36,1) both;
}
#ollaWin.pos-story { bottom: 20px; height: 396px; min-height: 396px; }
#ollaWin.pos-week  { bottom: 102px; }
#ollaWin.pos-plain { bottom: 74px; }
/* idle vs. in-conversation — she grows once there is something to hold */
#ollaWin.h-idle:not(.pos-story) { height: 300px; min-height: 300px; }
#ollaWin.h-conv:not(.pos-story) { height: 530px; min-height: 530px; }
#ollaWin.h-min { height: 62px !important; min-height: 62px !important; }
@keyframes ollaOpenBox {
  from { opacity: 0; transform: scale(.42); transform-origin: 100% 100%; }
  to   { opacity: 1; transform: scale(1);   transform-origin: 100% 100%; }
}

.ow-top { flex: none; display: flex; align-items: center; justify-content: space-between;
          gap: 12px; padding: 15px 18px 0; }
.ow-ctx { font-weight: 300; font-size: 11px; color: var(--grey);
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-top-end { display: flex; align-items: center; gap: 10px; flex: none; }
.ow-x { background: none; border: none; padding: 0; font-weight: 400; font-size: 11.5px;
        color: var(--ink); border-bottom: 1px solid rgba(26,25,23,.3); }
.ow-mark { background: none; border: none; padding: 0; font-family: DMV, sans-serif;
           font-weight: 700; font-size: 14px; letter-spacing: -.03em;
           color: rgba(26,25,23,.55); unicode-bidi: isolate; }

.ow-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 0;
           display: flex; flex-direction: column; gap: 14px; }
.olla-proposal-item { padding: 10px 0; border-top: 1px solid rgba(26,25,23,.10); }
.olla-proposal-item strong, .olla-proposal-item span, .olla-proposal-item p,
.olla-proposal-unchanged strong, .olla-proposal-unchanged span { display: block; }
.olla-proposal-item span, .olla-proposal-unchanged span { color: var(--grey); font-size: 11px; margin-top: 4px; }
.olla-proposal-item p { margin: 4px 0 0; line-height: 1.65; }
.olla-proposal-unchanged { margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(26,25,23,.12); }
.ow-opener { border-inline-start: 2px solid var(--butter); padding-inline-start: 12px;
             font-weight: 300; font-size: 15px; line-height: 1.8; color: var(--ink); margin: 0; }
#ollaTurns { display: flex; flex-direction: column; gap: 14px; }
/* the two most recent turns are live; everything older recedes rather than
   forming a scrollback (source lines 1788-1799) */
.ow-turn { margin: 0; animation: ollaFade 300ms cubic-bezier(.22,.61,.36,1) both; }
.ow-turn.ol.live { border-inline-start: 2px solid var(--butter); padding-inline-start: 12px;
                   font-weight: 300; font-size: 15px; line-height: 1.8; color: var(--ink); }
.ow-turn.ol.past { font-weight: 300; font-size: 13px; line-height: 1.8; color: rgba(26,25,23,.5); }
.ow-turn.me.live { font-weight: 400; font-size: 12.5px; line-height: 1.6; color: var(--grey); }
.ow-turn.me.past { font-weight: 400; font-size: 11.5px; line-height: 1.6; color: rgba(26,25,23,.42); }

.ow-chips { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ow-chips button { border: 1px solid rgba(26,25,23,.18); border-radius: 999px;
                   background: none; padding: 8px 13px; font-family: Plex, sans-serif;
                   font-weight: 400; font-size: 12px; color: var(--ink);
                   transition: border-color var(--settle) var(--ease); }
.ow-chips button:active { border-color: rgba(26,25,23,.4); }

.ow-think { border-inline-start: 2px solid rgba(247,222,150,.5); padding-inline-start: 12px;
            height: 22px; display: flex; align-items: center; }

.ow-prop { display: flex; flex-direction: column; gap: 11px; }
.ow-prop.dim { opacity: .42; }
.ow-now { border-top: 1px solid rgba(26,25,23,.08); padding-top: 12px;
          display: flex; flex-direction: column; gap: 6px; }
.ow-cap { font-size: 9.5px; font-weight: 400; letter-spacing: .16em; color: var(--grey); }
/* what it replaces, struck through — she shows the trade, not just the result */
.ow-now-text { font-weight: 300; font-size: 12.5px; line-height: 1.7; color: var(--grey);
               text-decoration: line-through; text-decoration-color: rgba(26,25,23,.26); }
.ow-new { border-inline-start: 2px solid var(--butter); padding-inline-start: 12px;
          display: flex; flex-direction: column; gap: 7px; }
.ow-prop-title { font-weight: 600; font-size: 15px; line-height: 1.5; color: var(--ink); }
.ow-prop-body { font-weight: 400; font-size: 14px; line-height: 1.8; color: var(--ink); }
.ow-prop-note { font-weight: 300; font-size: 11.5px; line-height: 1.7; color: var(--grey); margin: 0; }

.ow-acts { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px 0; }
.ow-acts .btn { flex: 1; min-width: 0; padding: 14px 0; font-size: 14.5px; }
.ow-link { flex: none; background: none; border: none; padding: 0; font-weight: 400;
           font-size: 12.5px; color: var(--ink); border-bottom: 1px solid rgba(26,25,23,.28); }
.ow-link.quiet { color: var(--grey); border-bottom-color: rgba(26,25,23,.18); }

.ow-foot { flex: none; margin-top: 10px; border-top: 1px solid rgba(26,25,23,.09);
           padding: 12px 14px 14px; display: flex; align-items: center; gap: 10px; }
#ollaField { flex: 1; min-width: 0; box-sizing: border-box; border: none; background: var(--bone);
             border-radius: 999px; padding: 12px 15px; font-family: Plex, sans-serif;
             font-weight: 400; font-size: 13px; color: var(--ink); outline: none; }
#ollaField::placeholder { color: var(--grey); opacity: 1; }
#ollaSend { width: 36px; height: 36px; flex: none; border: none; border-radius: 50%;
            background: rgba(26,25,23,.28); color: var(--bone); font-size: 15px;
            display: flex; align-items: center; justify-content: center;
            unicode-bidi: isolate; transition: background var(--settle) var(--ease); }
#ollaSend.ready { background: var(--ink); }

/* the week's own footer recedes while she is open — one primary action at a
   time, hers (source line 727's footDim/footPE) */
#weekActions.olla-dim { opacity: .4; pointer-events: none;
  transition: opacity var(--settle) var(--ease); }

/* content olla is referring to · a faint butter wash, never a scroll */
.olla-ref { background: rgba(247,222,150,.16); }

.d-scrim-foot { flex: none; padding: 14px 26px calc(24px + env(safe-area-inset-bottom));
                background: linear-gradient(to top, var(--bone) 55%, rgba(245,243,239,0)); }

.d-toolrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; row-gap: 8px;
             padding: 22px 26px 0; }
.d-toolrow .wk.grow { flex-basis: 100%; order: -1; margin-inline-start: 0; text-align: start; }

/* ── media grid — 3 columns, 4:5, radius 10, corner overlay badges ───────── */
.d-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 0 30px; }
.d-media-cell { position: relative; width: 100%; aspect-ratio: 4/5; border-radius: 10px; overflow: hidden;
                background: var(--paper); cursor: pointer; }
.d-media-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-media-cell.sel { outline: 2px solid var(--ink); outline-offset: -2px; }
.d-media-vid { position: absolute; inset: auto auto 6px 6px; background: rgba(26,25,23,.7); color: var(--bone);
               border-radius: 999px; padding: 3px 7px; font-weight: 400; font-size: 9px; letter-spacing: .04em; }
.d-media-dot { position: absolute; inset: 6px 6px auto auto; width: 17px; height: 17px; border-radius: 50%;
               border: 1px solid rgba(26,25,23,.3); background: rgba(245,243,239,.9);
               display: flex; align-items: center; justify-content: center; }
.d-media-cell.sel .d-media-dot { background: var(--ink); border-color: var(--ink); }
.d-media-dot i { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.d-media-cell.sel .d-media-dot i { background: var(--bone); }

#matHas { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.d-selbar { border-top: 1px solid rgba(26,25,23,.09); background: var(--bone);
            padding: 12px 26px calc(20px + env(safe-area-inset-bottom)); flex: none; }
.d-selbar-row { display: flex; align-items: baseline; justify-content: space-between; }

/* ── story sheet · the story is the media, caption overlaid ─────────────── */
.d-story-wrap { display: flex; justify-content: center; padding: 22px 0 0; }
.d-story-card { position: relative; width: 224px; height: 398px; max-width: 62%; aspect-ratio: 9/16;
                border-radius: 18px; overflow: hidden; background: var(--paper); }
.d-story-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-story-scrim { position: absolute; inset: auto 0 0 0; height: 52%; pointer-events: none;
                 background: linear-gradient(to top, rgba(26,25,23,.62), rgba(26,25,23,0)); }
.d-story-copy { position: absolute; inset: auto 0 0 0; padding: 0 18px 22px; font-weight: 400;
                font-size: 15px; line-height: 1.55; color: var(--bone); outline: none; }
.d-story-mark { position: absolute; inset: 14px 14px auto auto; font-family: DMV, sans-serif;
                font-weight: 700; font-size: 12px; letter-spacing: -.03em; color: rgba(245,243,239,.9);
                direction: ltr; unicode-bidi: isolate; }
.d-story-meta { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 0 0; }
.d-chrome-label { font-weight: 400; font-size: 11px; letter-spacing: .02em; color: var(--grey); }

/* sheets belong to the frame now, not the browser viewport */
.sheet { border-radius: 32px 32px 0 0; }
.sheet-full {
  position: absolute; inset: 74px 0 0 0; bottom: auto; z-index: 80;
  background: var(--bone); border-radius: 32px 32px 0 0; overflow: hidden;
  display: flex; flex-direction: column;
  transform: translateY(101%); visibility: hidden;
  transition: transform var(--settle) var(--ease), visibility 0s linear var(--settle);
}
.sheet-full.on { transform: none; visibility: visible; transition-delay: 0s; }
.sheet-top-bar { flex: none; padding: 20px 26px 0; display: flex; align-items: baseline; justify-content: space-between; }
.sheet-full .sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 26px; }

/* the splash used to cover the browser window; now it covers the frame,
   same as the Design's atSplash never leaving the phone card */
#intro { position: absolute; z-index: 60; }

/* ── shared header · the Design's one persistent inApp header ───────────────
   One DOM node instead of six per-screen copies. Sits above every inApp
   screen; those screens carry the matching top padding instead of a .bar
   of their own (see .hdr-screen below). Not shown pre-auth or mid-onboarding
   — same boundary as Design's own `inApp` phase. ─────────────────────────── */
/* header — literal values from the Design's shared inApp header (source
   lines 351-363). height:90px/box-sizing are ours (the Design has no
   explicit height there; it's a flex sibling in a column layout the
   Design's own architecture allows and our absolute-positioned .screen
   panels don't) — everything else below is transcribed, not approximated. */
#appHeader {
  position: absolute; inset-inline: 0; top: 0; z-index: 15;
  padding: 52px 22px 0; height: 90px; box-sizing: border-box;
  display: block; direction: rtl;
  background: var(--bone);
}
.app-menu-button { position: absolute; right: 22px; top: 52px; width: 34px; height: 34px; border: 0; background: none; padding: 0; font-size: 20px; line-height: 1; }
.hdr-center { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); text-align: center; font-size: 11.5px; color: var(--grey); white-space: nowrap; pointer-events: none; }
.hdr-left-side { display: none; }
#appHeader > .wordmark { position: absolute; left: 22px; top: 59px; }
.hdr-left { display: flex; align-items: center; gap: 11px; min-width: 0; overflow: hidden; }
.hdr-left-side .wordmark { flex: none; }
/* the bare back arrow — no underline. Distinct from .back-b (the onboarding/
   sign-in back LINK, which does have an underline) — these are two
   different Design components, not one reused for both. */
.hdr-back { font-weight: 400; font-size: 16px; color: var(--ink);
            padding: 12px 14px 12px 8px; margin: -12px -14px -12px -8px;
            cursor: pointer; flex: none; }
.hdr-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: default; }
.hdr-tint { width: 3px; height: 13px; border-radius: 2px; flex: none; background: transparent; }
#hdrLabel { font-weight: 400; font-size: 11.5px; letter-spacing: .02em; color: var(--ink);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-chev { font-weight: 400; font-size: 10px; color: var(--grey); flex: none; }

/* #appShell prefix needed to out-specificity the ID-scoped
   `#appShell .screen.d-panel { padding: 0; }` rule above */
#appShell .hdr-screen.d-panel.on { padding-top: 90px; }
.app-home { border:0; background:none; padding:8px; margin:-8px; cursor:pointer; }

.app-drawer-scrim { position: absolute; inset: 0; z-index: 38; background: rgba(26,25,23,.22); opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease); }
.app-drawer-scrim.on { opacity: 1; pointer-events: auto; }
.app-drawer { position: absolute; inset-block: 0; right: 0; left: auto; width: min(290px, 86%); z-index: 39; background: var(--paper); padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); transform: translateX(100%); transition: transform 240ms var(--ease); overflow-y: auto; box-shadow: 12px 0 34px rgba(26,25,23,.08); }
.app-drawer:not(.on) { pointer-events: none; }
.app-drawer.on { transform: translateX(0); }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:24px; border-bottom:1px solid var(--line); }
.drawer-section { padding: 22px 0 0; }
.drawer-section h2 { margin:0 0 10px; font-size:12px; font-weight:400; color:var(--grey); }
.drawer-client, .drawer-action { display:flex; align-items:center; justify-content:space-between; width:100%; border:0; border-radius:10px; background:none; padding:11px 10px; text-align:start; font-size:14px; font-weight:300; }
.drawer-client.selected { background:rgba(26,25,23,.07); font-weight:400; }
.drawer-action { margin-top:5px; color:var(--grey); }
.drawer-action.quiet { font-size:12px; }
.drawer-empty { color:var(--grey); font-size:12px; margin:0; }

/* ── client sub-navigation · Week/Media tabs (source lines 369-373),
   shown while inside a client instead of leaving through Workspace to
   switch between them. Active rule is the butter accent, not ink — same
   colour the bottom nav's own active state uses (source line 1762). ───── */
.client-tabs { display: flex; gap: 22px; padding: 10px 26px 0; }
/* source lines 370-379: tabs at the start, the rebuild utility at the far
   end of the same row — a quiet text link, deliberately not a button */
.client-tabs.ct-row { align-items: baseline; justify-content: space-between; gap: 16px; }
.ct-tabs { display: flex; gap: 22px; min-width: 0; }
.ct-util { flex: none; font-weight: 400; font-size: 11.5px; color: var(--grey);
           border-bottom: 1px solid rgba(26,25,23,.16); padding: 10px 2px 4px;
           cursor: pointer; transition: color var(--settle) var(--ease); }
.ct-util:active { color: var(--ink); }
.ct-item { font-weight: 400; font-size: 13.5px; color: var(--grey); padding: 10px 4px 6px;
           border-bottom: 1.5px solid transparent; cursor: pointer;
           transition: color var(--settle) var(--ease), border-color var(--settle) var(--ease); }
.ct-item.on { font-weight: 600; color: var(--ink); border-bottom-color: var(--butter); }

/* ── week's bottom action bar · pinned below the feed, not above it ─────── */
#weekActions { padding: 14px 26px calc(24px + env(safe-area-inset-bottom));
               background: linear-gradient(to top, var(--bone) 55%, rgba(245,243,239,0)); }
#weekActions #regenBox { margin: 0; }
#weekActions #approveWeek { margin-top: 10px; }


/* ── client switcher row · source lines 920-927, distinct padding/gap/tint
   height from every other flat-row pattern in the app. ─────────────────── */
.sw-row { display: flex; align-items: center; gap: 12px; padding: 14px 26px;
          border-top: 1px solid rgba(26,25,23,.09); cursor: pointer;
          transition: background var(--settle) var(--ease); }
.sw-row:active { background: #FFFFFF; }
.sw-tint { width: 3px; height: 15px; border-radius: 2px; flex: none; }
.sw-name { flex: 1; min-width: 0; font-weight: 400; font-size: 14px; color: var(--ink);
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-state { font-weight: 300; font-size: 10.5px; color: var(--grey); flex: none; }
.sw-foot { border-top: 1px solid rgba(26,25,23,.09); padding: 16px 26px 34px;
           font-weight: 400; font-size: 13.5px; color: var(--ink); cursor: pointer; }
/* max-height:70% — source line 915. The generic .sheet chrome (.grab +
   .sheet-head, both from the pre-Design sheet system) never matched the
   Design's own sheet header at all; this one uses the already-verified
   .sheet-top-bar treatment instead. */
#sheetSwitcher { max-height: 70%; padding: 0; }
#sheetSwitcher .sheet-top-bar { padding: 20px 26px 0; margin-bottom: 16px; }

/* legacy shell — present, inert. [hidden] above already removes it from
   layout entirely; this is just documentation of intent for anyone reading
   the stylesheet during phase 1. */
#legacyShell { }

/* ── onboarding · source lines 193-323, verbatim. Five steps, one shared
   title block (see index.html's #obStepCaps/#obStepTitle/#obStepNote),
   line-style fields (bottom border only, no boxed card) throughout except
   step 5's notes field, which Design itself boxes with the page's own
   recessed tone (#EDEAE4) rather than white. ─────────────────────────── */
.screen.ob { padding: 0; }

.screen.ob.on { display: flex; flex-direction: column; }
/* #appShell prefix required — same specificity fight as the .d-panel > .bar
   fix above: the ID-less rule here loses to #appShell .screen .bar
   (1 id, 2 classes) without it. */
#appShell .ob > .bar { flex: none; padding: 52px 26px 0; }
.ob-bars { display: flex; gap: 5px; padding: 24px 26px 0; margin: 0; flex: none; }
.ob-bar { height: 2px; flex: 1; border-radius: 2px; background: rgba(26,25,23,.14);
          transition: background 320ms cubic-bezier(.22,.61,.36,1); }
.ob-bar.on { background: var(--ink); }
#obScroll { flex: 1; min-height: 0; overflow-y: auto; padding: 30px 26px 20px; }
#obScroll::-webkit-scrollbar { display: none; }
#obScroll { scrollbar-width: none; }

/* field label — source lines 215/219/227 etc: 10.5px, .08em tracking, grey.
   NOT .fld-l (13px, no tracking) — that class belongs to the old
   pre-Design form system. */
.ob-lbl { font-size: 10.5px; font-weight: 400; letter-spacing: .08em; color: var(--grey); }

/* bottom-border-only text field — source line 216 (19px, business name) —
   font-size overridden inline per field since Design itself varies it
   (19px name, 17px DM-Sans Instagram handle, 16px "other") */
.ob-field {
  display: block; width: 100%; box-sizing: border-box; border: none;
  border-bottom: 1px solid rgba(26,25,23,.22); background: none;
  padding: 11px 0 9px; font-family: Plex, sans-serif; font-weight: 300;
  font-size: 19px; color: var(--ink); outline: none;
}
.ob-field-dm { font-family: DMV, sans-serif; font-size: 17px; }
/* source line 246/258: same bottom-line treatment, for a textarea */
.ob-area {
  display: block; width: 100%; box-sizing: border-box; border: none;
  border-bottom: 1px solid rgba(26,25,23,.22); background: none;
  padding: 11px 0 9px; font-family: Plex, sans-serif; font-weight: 300;
  font-size: 15px; line-height: 1.7; color: var(--ink); outline: none; resize: none;
}
/* source line 313: step 5's notes field is the one boxed exception,
   recessed to the page's own background tone, not white */
.ob-area-boxed {
  display: block; width: 100%; box-sizing: border-box;
  border: 1px solid rgba(26,25,23,.16); border-radius: 16px; background: #EDEAE4;
  padding: 16px; font-family: Plex, sans-serif; font-weight: 300; font-size: 15px;
  line-height: 1.8; color: var(--ink); outline: none; resize: none;
}
.ob-hint { font-weight: 300; font-size: 11.5px; line-height: 1.7; color: var(--grey); margin-top: 10px; }
.ob-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
/* source line 222: chips here are 12.5px/9px-15px padding, not the 13px
   generic .chip elsewhere — scoped override, same on/off ink logic */
.ob-chiprow .chip { padding: 9px 15px; font-size: 12.5px; border-color: rgba(26,25,23,.25); }

/* step 4's upload/Drive cards — source lines 293-306 */
.ob-card {
  border: 1px solid rgba(26,25,23,.18); background: transparent; border-radius: 18px;
  padding: 20px 20px; cursor: pointer; transition: border-color 200ms, background 200ms;
}
.ob-card.on { border-color: var(--butter); background: var(--butter); }
.ob-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ob-card-t { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.ob-card-state { font-weight: 400; font-size: 11.5px; color: var(--grey); }
.ob-card-sub { font-weight: 300; font-size: 12.5px; line-height: 1.75; color: var(--grey); margin-top: 6px; }

/* footer — source line 319: a top rule, NOT the gradient-fade .d-scrim-foot
   Week/Media use */
.ob-foot { flex: none; padding: 14px 26px 30px; border-top: 1px solid rgba(26,25,23,.08);
           display: flex; flex-direction: column; gap: 12px; }

/* segmented tap-to-pick counts — source lines 271-283 (storyOpts/videoOpts),
   the same chip() helper Details' dStoryOpts/dVideoOpts use, transcribed
   here rather than left as free number inputs. */
.d-segrow { display: flex; gap: 7px; }
/* same chip() helper Design's category/topic chips use (ink bg when on) —
   storyOpts/videoOpts share that exact function, not a butter variant */
.d-seg { flex: 1; text-align: center; border-radius: 12px; padding: 13px 0;
         font-family: DMV, sans-serif; font-weight: 400; font-size: 15px;
         cursor: pointer; border: 1px solid rgba(26,25,23,.25); background: transparent; color: var(--ink);
         transition: background 200ms, border-color 200ms; }
.d-seg.on { background: var(--ink); border-color: var(--ink); color: var(--bone); }

/* skip-step link — source line 322 */
.ob-skip { text-align: center; padding: 8px 0; margin: -8px 0 0;
           font-weight: 400; font-size: 12.5px; color: var(--grey); cursor: pointer; }

/* ── week / day regenerate — inline expand, no card ──────────────────────── */
#regenBox { margin: 12px 26px 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   REAL MOBILE — the app, not a picture of a phone
   ═══════════════════════════════════════════════════════════════════════════
   #appShell is a fixed 390×844 box with a bezel, a radius and a shadow,
   centred on a grey page and scaled down by fitShell() to fit whatever window
   it finds. On a desktop that is a faithful design reference. On an actual
   iPhone it was the bug: 390 wide against ~664 of usable height resolved to
   scale ≈ 0.77, so the whole product — every glyph, every hairline — rendered
   at 77% inside a drawn bezel, letterboxed on grey. That is what "looks
   different and less polished on a real iPhone" was.

   Below the reference width the frame stops being a reference and starts
   being a lie, so here it is dismantled: real width, real height, no scale,
   no bezel. Everything inside #appShell is already positioned against it
   (position:absolute, inset:0), so nothing else has to move — the children
   inherit a correct coordinate space the moment the parent is honest.

   Desktop keeps the frame exactly as it was. This whole file above this line
   is untouched.

   768px, not 430px: a narrowed desktop window is someone previewing the real
   thing, and should see the real thing. Above it there is room for the
   reference; below it there is not.                                        */
@media (max-width: 767px) {

  body {
    display: block; min-height: 100dvh; background: var(--bone);
    /* the frame used to cover the grey page; with no frame, rubber-banding
       would expose it at the top and bottom of every scroll */
    overscroll-behavior: none;
  }

  #appShell {
    width: 100%; height: 100dvh;
    border: 0; border-radius: 0; box-shadow: none;
    /* fitShell() also stops writing a transform below this width (app.js) —
       this is the CSS half of the same decision, so the frame is gone even
       on the first paint, before any script has run */
    transform: none;

    /* the frame held the app clear of the screen edges, so no screen ever
       needed to know about a notch. Now the screen edge IS the app edge.
       Bottom insets were already handled everywhere (#bottomNav, #weekActions,
       .sheet, #toast all carry env(safe-area-inset-bottom) already) — only
       the top was missing, because the frame never had one. */
    --top-pad: max(52px, calc(env(safe-area-inset-top) + 12px));
    --hdr-h:   max(90px, calc(env(safe-area-inset-top) + 50px));
  }

  #appShell .screen        { padding-top: var(--top-pad); }
  #appShell .d-panel > .bar { padding-top: var(--top-pad); }
  #appShell #gate.d-flow > .bar { padding-top: calc(var(--top-pad) + 4px); }
  #appHeader { padding-top: var(--top-pad); height: var(--hdr-h); }
  #appShell .hdr-screen.d-panel.on { padding-top: var(--hdr-h); }

  /* ── the keyboard ────────────────────────────────────────────────────────
     iOS shrinks the VISUAL viewport when the keyboard opens and leaves the
     layout viewport alone, so anything anchored to the bottom sits calmly
     underneath it. --kb is how much of the screen the keyboard is covering,
     measured from visualViewport in app.js; it is 0 whenever no keyboard is
     up, which makes every calc() below a no-op the rest of the time.

     Olla is moved by `bottom`, never by `transform`: #ollaWin's open state is
     an animation (ollaOpenBox) that owns transform, and a second transform
     here would fight it mid-flight. */
  #ollaWin.pos-story { bottom: calc(20px  + var(--kb, 0px)); }
  #ollaWin.pos-week  { bottom: calc(102px + var(--kb, 0px)); }
  #ollaWin.pos-plain { bottom: calc(74px  + var(--kb, 0px)); }
  #ollaDot.pos-story { bottom: calc(28px  + var(--kb, 0px)); }
  #ollaDot.pos-week  { bottom: calc(104px + var(--kb, 0px)); }
  #ollaDot.pos-plain { bottom: calc(92px  + var(--kb, 0px)); }

  /* her fixed heights (300 / 396 / 530) were chosen against 844px of frame.
     With a keyboard up there can be less than 400px of screen left, so the
     composer — the one part that has to stay reachable — would be pushed off.
     A ceiling costs nothing when the keyboard is down. */
  #appShell #ollaWin {
    max-height: calc(100dvh - var(--kb, 0px) - var(--top-pad) - 16px);
  }

  /* ── sheets ──────────────────────────────────────────────────────────────
     Two kinds, and they need opposite treatment.

     An ordinary .sheet is bottom-anchored (bottom:0, height from content), so
     the keyboard should LIFT it. Its closed state is translateY(101%) and its
     open state was `none`, so this rides on the same property and does not
     disturb the slide. */
  .sheet:not(.sheet-full)    { max-height: calc(100dvh - var(--top-pad)); }
  .sheet:not(.sheet-full).on { transform: translateY(calc(-1 * var(--kb, 0px))); }

  /* .sheet-full (the Story sheet) is the opposite: top-anchored at a literal
     `inset: 74px 0 0 0; bottom: auto`, which makes it CONTENT-sized. 74px was
     measured against the 844px frame, where a 760px sheet still fit. At a real
     812px viewport the same sheet overflows the bottom by 22px and is silently
     clipped by #appShell's overflow:hidden — the Story sheet's own footer
     controls being the part that goes missing.

     Re-anchoring it to both edges makes its height the viewport's business
     rather than the content's. .sheet-body is already `flex:1; overflow-y:auto`,
     so the scrolling region absorbs the difference on any screen size. Lifting
     this one would leave a gap under it, so the keyboard SHRINKS it instead.

     Written as #appShell-scoped longhands because the rule being replaced uses
     the `inset` shorthand, and a shorthand fighting longhand overrides across
     two rules is the kind of cascade argument that looks fine and lays out
     wrong. Geometry only — the existing .sheet-full / .sheet-full.on pair still
     owns the open/closed transform, untouched. */
  #appShell .sheet-full {
    top: var(--top-pad); inset-inline: 0;
    bottom: var(--kb, 0px);
    height: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE WEEK · editorial
   ═══════════════════════════════════════════════════════════════════════════
   Design: "Olla Editorial.dc.html". One screen at four depths — week, day,
   story, צילום — with the crumb rail as the only moving part.

   The flush yellow rail (.ed-focus) is the whole navigational idea: at week
   level there is no rail, and from the moment you go deeper a 2px accent line
   runs down the leading edge of the focused content. It is what tells you that
   what you are reading is a part of something, not the whole thing. It sits
   flush against the frame edge — inset-inline-end:0, not inside the padding —
   which is why the padding lives on an inner element instead.        */
#appShell .screen.ed { padding: 0; }
#appShell .screen.ed.on { display: flex; flex-direction: column; }

/* ── header ─────────────────────────────────────────────────────────────── */
.ed-head { position: relative; z-index: 3; background: var(--bone);
           padding: 46px 22px 14px; box-shadow: 0 1px 0 rgba(26,25,23,.07); }
@media (max-width: 767px) { .ed-head { padding-top: var(--top-pad); } }
.ed-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ed-exit { display: flex; align-items: center; gap: 8px; margin-inline-end: -6px;
           padding: 6px; border-radius: 10px; cursor: pointer;
           transition: background var(--settle) var(--ease); }
.ed-exit:active { background: rgba(26,25,23,.05); }
.ed-replan { border: 0; border-radius: 7px; background: #E9C84A; color: var(--ink); padding: 7px 10px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; margin-inline-start: auto; }
.ed-replan:disabled { opacity: .55; cursor: wait; }
.ed-exit-arrow { font-weight: 300; font-size: 15px; line-height: 1; color: #3A3936; }
.ed-exit-name { font-weight: 600; font-size: 12.5px; color: var(--ink); }

.ed-rail { display: flex; align-items: center; gap: 8px; margin-top: 15px; overflow-x: auto; }
.ed-crumb { display: flex; align-items: center; gap: 8px; flex: none; }
.ed-crumb b { font-weight: 400; font-size: 11.5px; color: var(--grey);
              border-bottom: 1px solid rgba(26,25,23,.22); padding-bottom: 2px;
              white-space: nowrap; cursor: pointer; }
.ed-crumb.here b { font-weight: 600; color: var(--ink); border-bottom-color: transparent; cursor: default; }
.ed-crumb i { font-style: normal; font-weight: 300; font-size: 10px; color: #C0BAAE; }

.ed-title { font-weight: 200; font-size: 23px; line-height: 1.35; color: var(--ink);
            margin: 13px 0 0; max-width: 31ch; }
.ed-title[hidden] { display: none; }
.ed-sub { font-weight: 300; font-size: 12px; line-height: 1.75; color: var(--grey);
          margin: 7px 0 0; max-width: 34ch; }

/* ── scroller ───────────────────────────────────────────────────────────── */
.ed-scroll { flex: 1; min-height: 0; overflow-y: auto; position: relative; z-index: 1; }
.ed-pad { padding-inline: 22px; }
.ed-tail { height: 40px; }
.ed-storypad { padding-top: 20px; padding-bottom: 40px; }

.ed-focus { position: relative; }
.ed-focus::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0;
                    width: 2px; background: var(--butter); }

/* ── week level ─────────────────────────────────────────────────────────── */
.ed-thesis-wrap { padding: 20px 22px 18px; }
.ed-thesis { border-inline-start: 2px solid var(--butter); padding-inline-start: 13px;
             font-weight: 300; font-size: 14px; line-height: 1.85; color: var(--ink); max-width: 32ch; }
.ed-warn { margin: 0 22px 14px; font-weight: 300; font-size: 12px; line-height: 1.8; color: var(--grey); }
.ed-warn p { margin: 0 0 5px; }

.ed-day { border-top: 1px solid rgba(26,25,23,.09); display: flex; align-items: flex-start;
          gap: 13px; padding: 16px 22px; cursor: pointer; width: 100%; text-align: start;
          background: none; border-inline: 0; border-bottom: 0; font: inherit;
          transition: background var(--settle) var(--ease); }
.ed-day:active { background: var(--paper); }
.ed-daynum { width: 22px; flex: none; text-align: center; }
.ed-daynum b { display: block; font-family: DMV, sans-serif; font-weight: 700; font-size: 16px;
               line-height: 1; color: rgba(26,25,23,.45); unicode-bidi: isolate; }
.ed-daynum span { display: block; font-weight: 300; font-size: 10px; color: var(--grey); margin-top: 4px; }
.ed-daymain { flex: 1; min-width: 0; }
.ed-dayrow { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.ed-daytheme { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.ed-tag { font-weight: 400; font-size: 9.5px; border-radius: 999px; padding: 2px 7px; }
.ed-tag.ok { color: #3A3936; border: 1px solid rgba(26,25,23,.18); }
.ed-tag.gap { color: var(--ink); background: var(--butter); }
.ed-daynote { font-weight: 300; font-size: 11.5px; line-height: 1.65; color: var(--grey);
              margin-top: 5px; max-width: 30ch; }
.ed-daystrip { display: flex; align-items: flex-start; gap: 9px; margin-top: 9px; }
.ed-thumbs { display: flex; gap: 4px; flex: none; }
.ed-thumb { width: 22px; height: 34px; border-radius: 5px; overflow: hidden; background: var(--paper); }
.ed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-thumb.none { opacity: .32; }
.ed-daytitles { flex: 1; min-width: 0; font-weight: 300; font-size: 11px; line-height: 1.65; color: #A9A49A; }
.ed-daycount { flex: none; font-family: DMV, sans-serif; font-weight: 500; font-size: 10px;
               letter-spacing: .1em; color: #A9A49A; unicode-bidi: isolate; padding-top: 3px; }
.ed-runway { font-weight: 300; font-size: 11px; line-height: 1.7; color: #A9A49A;
             margin: 16px 22px 0; }

/* ── day level ──────────────────────────────────────────────────────────── */
.ed-beats { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding-top: 20px; }
.ed-beat { font-weight: 400; font-size: 11px; color: #3A3936; }
.ed-beatsep { font-weight: 300; font-size: 10px; color: #C0BAAE; }
.ed-stories { padding-top: 18px; padding-bottom: 22px; }
.ed-story { display: flex; gap: 13px; align-items: flex-start; cursor: pointer; width: 100%;
            text-align: start; background: none; border: 0; font: inherit; padding: 0; }
.ed-story + .ed-arrow, .ed-story-wrap + .ed-story-wrap { margin-top: 20px; }
.ed-sthumb-sm { width: 58px; height: 92px; border-radius: 12px; overflow: hidden; flex: none;
                background: var(--paper); }
.ed-sthumb-sm img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-sbody { flex: 1; min-width: 0; }
.ed-srow { display: flex; align-items: center; gap: 8px; }
.ed-snum { font-family: DMV, sans-serif; font-weight: 500; font-size: 11px; color: #A9A49A;
           unicode-bidi: isolate; }
.ed-stitle { font-weight: 600; font-size: 13px; color: var(--ink); }
.ed-kind { font-weight: 400; font-size: 9.5px; color: var(--ink); background: var(--butter);
           border-radius: 999px; padding: 3px 7px; }
.ed-spurpose { font-weight: 300; font-size: 11.5px; line-height: 1.7; color: var(--grey); margin-top: 5px; }
.ed-scopy { font-weight: 300; font-size: 12.5px; line-height: 1.75; color: #3A3936; margin-top: 7px;
            display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ed-sstat { font-weight: 400; font-size: 10px; margin-top: 8px; }
.ed-arrow { display: flex; align-items: center; gap: 9px; padding: 13px 0; }
.ed-arrow i { font-style: normal; font-weight: 300; font-size: 11px; color: #C0BAAE; }
.ed-arrow span { font-weight: 300; font-size: 10.5px; color: #A9A49A; }

.ed-otherhead { font-size: 10px; font-weight: 400; letter-spacing: .08em; color: #A9A49A;
                padding-top: 14px; padding-bottom: 2px; }
.ed-navday { border-top: 1px solid rgba(26,25,23,.09); display: flex; align-items: center; gap: 13px;
             padding: 13px 22px; cursor: pointer; width: 100%; text-align: start; background: none;
             border-inline: 0; border-bottom: 0; font: inherit; }
.ed-navday:active { background: var(--paper); }
.ed-navdate { width: 22px; flex: none; text-align: center; font-family: DMV, sans-serif;
              font-weight: 500; font-size: 12px; color: #A9A49A; unicode-bidi: isolate; }
.ed-navname { font-weight: 400; font-size: 12.5px; color: #3A3936; flex: none; }
.ed-navtheme { flex: 1; min-width: 0; font-weight: 300; font-size: 12px; color: var(--grey);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-navcount { flex: none; font-family: DMV, sans-serif; font-weight: 500; font-size: 10px;
               letter-spacing: .1em; color: #C0BAAE; unicode-bidi: isolate; }

/* ── story level ────────────────────────────────────────────────────────── */
.ed-shead { display: flex; gap: 14px; align-items: flex-start; }
.ed-sthumb { width: 82px; height: 130px; border-radius: 16px; overflow: hidden; flex: none;
             background: var(--paper); }
.ed-sthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-smeta { flex: 1; min-width: 0; padding-top: 2px; }
.ed-smeta .ed-snum { font-weight: 700; font-size: 13px; color: var(--ink); }
.ed-smeta .ed-stitle { font-size: 14px; }
.ed-smeta .ed-kind { display: inline-block; margin-top: 9px; padding: 3px 8px; }
.ed-smeta .ed-sstat { margin-top: 10px; }

/* variable-length copy: the card grows with the text, never clamps it */
.ed-copycard { background: var(--paper); border-radius: 20px; padding: 17px; margin-top: 16px; }
.ed-copy { font-weight: 300; font-size: 14.5px; line-height: 1.9; color: var(--ink);
           white-space: pre-line; cursor: text; outline: none; min-height: 1.9em; }
.ed-copy:empty::before { content: attr(data-empty); color: #A9A49A; }
.ed-edithint { font-weight: 300; font-size: 10.5px; color: #A9A49A; margin: 8px 2px 0; }

.ed-varshead { font-size: 10px; font-weight: 400; letter-spacing: .08em; color: var(--grey); }
.ed-var { background: var(--paper); border: 1px solid transparent; border-radius: 18px;
          padding: 15px 16px; margin-top: 10px; cursor: pointer; width: 100%; text-align: start;
          font: inherit; display: block; }
.ed-var.cur { background: rgba(255,255,255,.55); border-color: rgba(26,25,23,.14); cursor: default; }
.ed-var-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ed-var-lbl { font-weight: 600; font-size: 11.5px; color: var(--ink); }
.ed-var-meta { font-weight: 300; font-size: 10.5px; color: #A9A49A; }
.ed-var-text { font-weight: 300; font-size: 13.5px; line-height: 1.85; color: var(--ink);
               margin-top: 9px; white-space: pre-line; }
.ed-varsclose { padding: 11px 0; font-weight: 400; font-size: 12px; color: var(--grey);
                cursor: pointer; margin-top: 12px; }

.ed-facts { margin-top: 18px; }
.ed-fact { display: flex; align-items: baseline; gap: 12px; padding: 11px 0;
           border-bottom: 1px solid rgba(26,25,23,.07); }
.ed-fact b { flex: none; width: 74px; font-weight: 400; font-size: 10.5px; color: #A9A49A; }
.ed-fact span { flex: 1; min-width: 0; font-weight: 300; font-size: 12.5px; line-height: 1.7; color: #3A3936; }

.ed-prop { background: var(--paper); border-radius: 20px; padding: 16px; margin-top: 12px;
           animation: ollaSettle 420ms cubic-bezier(.22,.61,.36,1) both; }
.ed-prop-caps { font-size: 10px; font-weight: 400; letter-spacing: .08em; color: var(--grey); }
.ed-prop-now { font-weight: 300; font-size: 12px; line-height: 1.8; color: var(--grey);
               margin-top: 9px; white-space: pre-line; }
.ed-prop-body { font-weight: 300; font-size: 13.5px; line-height: 1.9; color: var(--ink);
                margin-top: 11px; border-inline-start: 2px solid var(--butter);
                padding-inline-start: 11px; white-space: pre-line; }
.ed-prop-acts { display: flex; gap: 16px; align-items: center; margin-top: 14px; }
.ed-apply { font-weight: 600; font-size: 12.5px; color: var(--ink);
            border-bottom: 1px solid rgba(26,25,23,.35); cursor: pointer; }
.ed-quiet { font-weight: 400; font-size: 12.5px; color: var(--grey); cursor: pointer; }
.ed-say { border-inline-start: 2px solid var(--butter); padding-inline-start: 12px; margin-top: 14px;
          font-weight: 300; font-size: 13px; line-height: 1.9; color: var(--ink); max-width: 33ch;
          white-space: pre-line; animation: ollaSettle 420ms cubic-bezier(.22,.61,.36,1) both; }

.ed-acts { display: flex; gap: 8px; margin-top: 16px; }
.ed-ok { flex: 1; text-align: center; background: var(--butter); border: 1px solid var(--butter);
         border-radius: 999px; padding: 12px 0; font-weight: 600; font-size: 12.5px;
         color: var(--ink); cursor: pointer; font-family: inherit; }
.ed-ok.done { background: none; border-color: rgba(26,25,23,.22); }
.ed-ghost { flex: none; background: none; border: 1px solid rgba(26,25,23,.16); border-radius: 999px;
            padding: 12px 15px; font-weight: 400; font-size: 12.5px; color: #3A3936; cursor: pointer;
            font-family: inherit; }
.ed-mark { font-family: DMV, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: -.03em;
           color: var(--ink); unicode-bidi: isolate; }

.ed-more-toggle { margin-top: 14px; border: 1px solid rgba(26,25,23,.16); border-radius: 16px;
                  padding: 14px 16px; cursor: pointer; }
.ed-more-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ed-more-label { font-weight: 600; font-size: 12.5px; color: var(--ink); }
.ed-more-sign { font-weight: 300; font-size: 15px; line-height: 1; color: #3A3936; }
.ed-more-hint { font-weight: 300; font-size: 11px; color: var(--grey); margin: 6px 0 0; }
.ed-mrow { padding: 11px 0; font-weight: 400; font-size: 12.5px; color: #3A3936;
           border-bottom: 1px solid rgba(26,25,23,.07); cursor: pointer; }
.ed-mrow:first-child { font-weight: 600; color: var(--ink); }
.ed-mrow.ed-mlast { border-bottom: 0; }
#edMore { animation: ollaSettle 380ms cubic-bezier(.22,.61,.36,1) both; }

.ed-step { margin-top: 22px; border-top: 1px solid rgba(26,25,23,.09); }
.ed-steprow { display: flex; align-items: center; gap: 10px; padding: 15px 0;
              border-bottom: 1px solid rgba(26,25,23,.07); cursor: pointer; }
.ed-steprow.ed-steplast { border-bottom: 0; }
.ed-steprow.off { opacity: .3; cursor: default; }
.ed-steparrow { flex: none; font-weight: 300; font-size: 13px; color: #A9A49A; }
.ed-steplbl { flex: none; font-weight: 400; font-size: 11px; color: #A9A49A; }
.ed-stepname { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; color: var(--ink);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── צילום level ────────────────────────────────────────────────────────── */
.ed-mv-shot { width: 100%; max-width: 230px; aspect-ratio: 9/16; border-radius: 20px;
              overflow: hidden; background: var(--paper); margin: 0 auto; }
.ed-mv-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-mv-name { text-align: center; font-weight: 600; font-size: 13px; color: var(--ink); margin-top: 14px; }
.ed-mv-meta { text-align: center; font-weight: 300; font-size: 11.5px; color: var(--grey); margin-top: 5px; }
.ed-mv-swap { margin-top: 20px; width: 100%; background: var(--butter); border: 0; border-radius: 999px;
              padding: 14px 0; font-family: inherit; font-weight: 700; font-size: 13px;
              color: var(--ink); cursor: pointer; }
.ed-mv-back, .ed-mv-cancel { margin-top: 12px; text-align: center; padding: 12px 0;
                             font-weight: 400; font-size: 12.5px; color: var(--grey); cursor: pointer; }
.ed-mv-cancel { margin-top: 22px; border: 1px solid rgba(26,25,23,.16); border-radius: 999px; color: #3A3936; }
.ed-mv-lead { font-weight: 300; font-size: 13px; line-height: 1.8; color: var(--grey);
              max-width: 32ch; margin: 0; }
.ed-mv-search { width: 100%; box-sizing: border-box; margin-top: 12px; border: 0;
                border-bottom: 1px solid var(--line); background: none; padding: 8px 0;
                font-family: inherit; font-size: 14px; color: var(--ink); outline: none; }
.ed-mv-groups { display: flex; gap: 8px; overflow-x: auto; margin-top: 14px; padding-bottom: 2px; background: var(--bone); }
.ed-mv-groups .chip { flex: none; }
.ed-mv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 18px; }
.ed-mv-cell { cursor: pointer; }
.ed-mv-cell .shot { width: 100%; aspect-ratio: 9/14; border-radius: 14px; overflow: hidden;
                    background: var(--paper); border: 2px solid transparent; position: relative; }
.ed-mv-cell.on .shot { border-color: var(--butter); }
.ed-mv-cell .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-mv-cell .nm { font-weight: 400; font-size: 11.5px; color: var(--ink); margin-top: 7px;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-mv-cell .mt { font-weight: 300; font-size: 10.5px; color: #A9A49A; margin-top: 2px; }
.ed-mv-vid { position: absolute; inset-block-end: 6px; inset-inline-start: 6px; background: rgba(26,25,23,.72);
             color: var(--bone); font-size: 9px; border-radius: 4px; padding: 2px 5px; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.ed-foot { position: relative; z-index: 3; background: var(--bone); padding: 12px 0 calc(68px + 8px + env(safe-area-inset-bottom));
           box-shadow: 0 -1px 0 rgba(26,25,23,.07); }
.ed-week-overlay .ed-foot { position: absolute; inset-inline: 0; bottom: 68px; z-index: 30;
           padding: 0 0 10px; background: transparent; box-shadow: none; pointer-events: none; }
.ed-week-overlay .ed-foot > * { pointer-events: auto; }
/* The persistent bottom nav is an absolute shell layer. Reserve its full
   height in this footer so the existing chips/input remain above it rather
   than being visually covered on Day and Story screens. */
@media (min-width: 768px) { .ed-foot { padding-bottom: 76px; } }
.ed-chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 22px 8px; }
.ed-chip { flex: none; background: none; border: 1px solid rgba(26,25,23,.16); border-radius: 999px;
           padding: 6px 11px; font-family: inherit; font-weight: 400; font-size: 11.5px;
           color: #3A3936; cursor: pointer; white-space: nowrap; }
.ed-footpad { padding: 0 22px; }
.ed-ask { display: flex; align-items: center; gap: 10px; background: var(--paper);
          border-radius: 999px; padding: 2px 11px 2px 6px; }
.ed-ask-mark { font-family: DMV, sans-serif; font-weight: 700; font-size: 12px;
               letter-spacing: -.03em; color: var(--ink); unicode-bidi: isolate; }
.ed-ask textarea { flex: 1; min-width: 0; max-height: 132px; overflow-y: auto; resize: none; border: none; background: none; outline: none;
                font-family: inherit; font-weight: 300; font-size: 13px; line-height: 1.45; color: var(--ink); padding: 5px 0; white-space: pre-wrap; }
.ed-send { flex: none; width: 28px; height: 28px; border-radius: 999px; border: 0;
           background: rgba(26,25,23,.06); display: flex; align-items: center; justify-content: center;
           font-size: 13px; color: var(--ink); cursor: pointer; }
.ed-send.ready { background: var(--butter); }
.ed-think { display: flex; align-items: center; justify-content: center; height: 44px; }

/* Week-level launcher uses the same FAB visual contract as Home. Its only
   screen-specific difference is the vertical offset needed to clear the
   approval CTA and persistent bottom navigation. */
#appShell #ollaDot, #appShell .ed-dot {
  width: 46px; height: 46px; border-radius: 50%; padding: 0;
  background: var(--paper); border: 1px solid rgba(26,25,23,.12);
  box-shadow: 0 10px 26px rgba(26,25,23,.16), 0 2px 6px rgba(26,25,23,.10);
  display: flex; align-items: center; justify-content: center;
  font-family: DMV, sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: -.03em; color: var(--ink); cursor: pointer; z-index: 87;
  transition: transform var(--settle) var(--ease);
}
.ed-dot { position: absolute; inset-block-end: calc(68px + 76px + 10px); inset-inline-start: auto; right: 12px;
          animation: ollaSettle 420ms cubic-bezier(.22,.61,.36,1) both; }
.ed-dot span { unicode-bidi: isolate; line-height: 1; }
.ed-dot:active { transform: translateY(-1px); }

/* ── preview ────────────────────────────────────────────────────────────── */
.ed-preview { position: absolute; inset: 0; z-index: 6; background: rgba(26,25,23,.55);
              display: flex; align-items: center; justify-content: center; padding: 26px;
              animation: ollaFade 260ms cubic-bezier(.22,.61,.36,1) both; cursor: pointer; }
.ed-preview-card { width: 100%; max-width: 300px; aspect-ratio: 9/16; border-radius: 26px;
                   overflow: hidden; position: relative; background: #3A3936;
                   animation: ollaSheet 380ms cubic-bezier(.22,.61,.36,1) both; }
.ed-preview-card > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-preview-scrim { position: absolute; inset: 0; pointer-events: none;
                    background: linear-gradient(to top, rgba(26,25,23,.82) 42%, rgba(26,25,23,.1)); }
.ed-preview-copy { position: absolute; inset: auto 0 0 0; max-height: 74%; overflow-y: auto;
                   padding: 16px 16px 20px; font-weight: 400; font-size: 13px; line-height: 1.65;
                   color: var(--bone); white-space: pre-line; }
.ed-preview-mark { position: absolute; inset: 13px 13px auto auto; font-family: DMV, sans-serif;
                   font-weight: 700; font-size: 11px; color: rgba(245,243,239,.85); unicode-bidi: isolate; }

/* ── olla · the conversation layer ────────────────────────────────────────
   Sits in the footer, above the composer, in front of the week rather than
   inside it. Her answer used to live in the editorial document, where it read
   as something the week itself was saying and a long reply pushed the real
   content down the page. Anchoring it here means the week never moves.

   When there is nothing to say the element is `hidden` and contributes no
   border, no padding and no height — the composer sits alone, exactly as it
   did before she was asked anything. */
.ed-conv {
  margin: 0 22px 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(26,25,23,.09);
  animation: ollaSettle 300ms cubic-bezier(.22,.61,.36,1) both;
  display: flex; flex-direction: column; min-height: 0;
}
/* Floating Assistant V1: the Week response hugs its content above the
   persistent composer; it is no longer presented as a draggable sheet. */
.ed-week-overlay .ed-conv { background: var(--paper); border: 1px solid rgba(26,25,23,.10);
  border-radius: 18px; box-shadow: 0 8px 28px rgba(26,25,23,.12); padding: 12px 14px 10px; }
.ed-week-overlay .ed-conv-head { display: none; }
.ed-week-overlay .ed-conv-body { max-height: 42vh; overflow-y: auto; }
.ed-conv-head { display: flex; flex-direction: column; align-items: center; gap: 4px;
                margin-bottom: 10px; }
.ed-conv-head-row { width: 100%; position: relative; display: flex; align-items: center; justify-content: flex-start; }
.ed-sheet-collapse { border: 0; background: none; color: rgba(26,25,23,.45); font-size: 18px; line-height: 1;
                    padding: 0 5px; cursor: pointer; }
.ed-conv-label { font-family: DMV, sans-serif; font-weight: 700; font-size: 12px; color: var(--ink); }
/* grows upward with the conversation, then scrolls instead of growing — the
   week keeps whatever room is left rather than being pushed off the screen */
.ed-conv-body { max-height: min(300px, 40vh); overflow-y: auto; flex: 1 1 auto; min-height: 0; }

/* the manager's own words: she already knows what she typed */
.ed-turn.me { font-weight: 300; font-size: 11.5px; line-height: 1.7;
              color: #A9A49A; margin: 0 0 8px; }
/* anything olla said before her latest */
.ed-turn.ol { font-weight: 300; font-size: 12.5px; line-height: 1.8;
              color: var(--grey); margin: 0 0 10px; }

/* her latest — the one thing on this layer meant to be read */
.ed-answer { margin: 0 0 10px; }
.ed-answer-mark { display: block; font-family: DMV, sans-serif; font-weight: 700;
                  font-size: 10.5px; letter-spacing: -.03em; color: #A9A49A;
                  unicode-bidi: isolate; margin-bottom: 5px; }
.ed-answer-text { font-weight: 300; font-size: 14px; line-height: 1.9;
                  color: var(--ink); margin: 0; white-space: pre-line; }

/* the proposal card belongs to the conversation, not to the story document */
.ed-conv .ed-prop { margin-top: 0; }
.ed-conv .ed-think { height: 34px; }

/* ── touch targets ────────────────────────────────────────────────────────
   Measured on a real iPhone viewport, the crumb rail was 18px tall and the
   chips and send button 32–35px. The crumb rail is the ONLY way back out of a
   Story, so an 18px target is the difference between the app feeling precise
   and feeling broken.

   These add reach, not weight: the visible text, borders and rhythm are
   untouched — the extra area is transparent padding, and negative margins keep
   the rows sitting exactly where they did. Nothing here is a redesign. */
.ed-crumb b { padding-block: 11px 13px; margin-block: -11px -13px; }
.ed-rail    { padding-block: 2px; }

.ed-chip    { min-height: 44px; padding-block: 0; display: inline-flex; align-items: center; }
.ed-send    { width: 40px; height: 40px; }
.ed-mrow    { padding-block: 14px; }
.ed-varsclose, .ed-mv-back, .ed-mv-cancel { min-height: 44px; display: flex;
              align-items: center; justify-content: center; }
.ed-apply, .ed-quiet { display: inline-flex; align-items: center; min-height: 40px; }
/* the library's own filter chips, same reasoning */
.d-chiprow .chip, #libGroups .chip, #libStates .chip, #edMvGroups .chip {
  min-height: 40px; display: inline-flex; align-items: center;
}

/* ── long client names ────────────────────────────────────────────────────
   "סטודיו צילום · בדיקת Drive" broke across two lines with "Drive" stranded
   alone on the second. balance distributes the words instead of filling the
   first line greedily; the type scale is unchanged. */
.d-h1-sm, .ed-title { text-wrap: balance; }
/* the Week header's exit label sits beside the wordmark and must not push it */
.ed-exit-name { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ TODAY · execution above, planning below ══════════════════════════════
   "Olla Today Execution v2". The two sections are not two lists with
   different captions: the first is the morning's work and carries the
   largest type on the screen, the second is real but is not today's job, so
   it is smaller, quieter, and separated by white space rather than a rule.

   Every horizontal inset comes from .d-scroll's own 26px — nothing in here
   re-pads sideways, or the content would sit at 52px. */

.t-greet { padding-top: 26px; }
.t-date  { margin: 12px 0 0; font-weight: 300; font-size: 12px; color: var(--grey); }
.t-tail  { height: 40px; }

.t-sec { padding-top: 34px; }
.t-caprow { display: flex; align-items: baseline; gap: 9px; }
.t-cap { font-size: 10.5px; font-weight: 400; letter-spacing: .16em; color: var(--grey); }
.t-cap-dim { color: #82817A; }
.t-count { font-family: DMV, sans-serif; font-weight: 500; font-size: 10.5px;
           letter-spacing: .1em; color: #82817A; unicode-bidi: isolate;
           font-variant-numeric: tabular-nums; }
.t-list { margin-top: 12px; }

/* one client waiting to go out. The pastel is a 2px rail — client identity,
   never status; no card, no fill, no colour semantics. */
.t-row { display: flex; gap: 15px; width: 100%; padding: 13px 0;
         background: none; border: 0; border-top: 1px solid rgba(26,25,23,.09);
         border-radius: 0; text-align: start; cursor: pointer; }
.t-row.first { border-top: 0; }
.t-row:active { opacity: .62; }
.t-tint { width: 2px; border-radius: 1px; flex: none; }
.t-main { flex: 1; min-width: 0; display: block; }
.t-name { display: block; font-weight: 300; font-size: 22px; line-height: 1.25;
          color: var(--ink); overflow-wrap: anywhere; }
.t-meta { display: block; margin-top: 5px; font-weight: 300; font-size: 12.5px;
          line-height: 1.6; color: var(--grey); }
.t-cta  { display: flex; align-items: center; gap: 7px; margin-top: 9px;
          font-weight: 600; font-size: 13.5px; color: var(--ink); }
.t-cta i { font-style: normal; font-weight: 400; font-size: 13px; }

/* the queue discloses five at a time, inline — no sheet, no pagination */
.t-more { display: block; width: 100%; padding: 13px 0 2px;
          padding-inline-start: 17px; background: none;
          border: 0; border-top: 1px solid rgba(26,25,23,.09); border-radius: 0;
          text-align: start; font-weight: 300; font-size: 13px;
          color: var(--grey); cursor: pointer; min-height: 44px; }

.t-quiet { font-weight: 300; font-size: 13px; line-height: 1.8;
           color: var(--grey); margin: 12px 0 0; }

/* finished today — out of the queue, still on the page */
.t-donewrap:not(:empty) { padding-top: 20px; }
.t-done { font-weight: 300; font-size: 12.5px; line-height: 1.8;
          color: var(--grey); margin: 0; }

/* דורש תשומת לב */
.t-attnlist { margin-top: 8px; }
.t-attn { padding: 12px 0; border-top: 1px solid rgba(26,25,23,.09); }
.t-attn-name  { margin: 0; font-weight: 400; font-size: 15px; color: var(--ink);
                overflow-wrap: anywhere; }
.t-attn-issue { margin: 3px 0 0; font-weight: 300; font-size: 12.5px;
                line-height: 1.6; color: var(--grey); }
.t-attn-act { display: inline-block; margin-top: 7px; padding: 0 0 2px;
              background: none; border: 0; border-radius: 0;
              border-bottom: 1px solid rgba(26,25,23,.16);
              font: inherit; font-weight: 300; font-size: 12.5px;
              color: var(--grey); cursor: pointer; min-height: 32px; }

/* ══ WEEK · the cursor ════════════════════════════════════════════════════ */

.wk-nav { display: flex; align-items: center; gap: 6px; padding: 14px 22px 4px; }
.wk-arrow { flex: none; width: 44px; height: 44px; display: flex;
            align-items: center; justify-content: center;
            background: none; border: 0; border-radius: 999px;
            font-size: 15px; color: var(--grey); cursor: pointer; }
.wk-arrow:active { background: rgba(26,25,23,.05); }
.wk-mid { flex: 1; min-height: 44px; display: flex; flex-direction: column;
          align-items: center; justify-content: center; gap: 2px;
          background: none; border: 0; cursor: pointer; }
.wk-mid:disabled { cursor: default; }
.wk-range { font-size: 13px; font-weight: 500; color: var(--ink);
            font-variant-numeric: tabular-nums; }
.wk-tag { font-size: 10.5px; font-weight: 400; letter-spacing: .07em; color: var(--grey); }
.wk-tag.now { color: #3A3936; }

.wk-empty { padding: 30px 22px 10px; }
.wk-empty-range { margin: 0 0 10px; font-size: 12px; font-weight: 400;
                  letter-spacing: .06em; color: var(--grey);
                  font-variant-numeric: tabular-nums; }
.wk-retry { margin-top: 18px; min-height: 44px; padding: 0 18px;
            background: none; border: 1px solid rgba(26,25,23,.22);
            border-radius: 999px; font: inherit; font-size: 13px;
            color: var(--ink); cursor: pointer; }
.wk-empty-line { font-size: 15px; font-weight: 300; color: var(--ink); }
.wk-empty-sub { margin-top: 9px; font-size: 12.5px; font-weight: 300;
                line-height: 1.8; color: var(--grey); max-width: 32ch; }

/* the story that already went out, and the way back */
.ed-gone { margin: 0 0 10px; padding-inline-start: 12px;
           border-inline-start: 2px solid var(--butter);
           font-size: 12px; font-weight: 400; line-height: 1.7; color: #3A3936; }
.ed-back { flex: 1; text-align: center; background: none;
           border: 1px solid rgba(26,25,23,.22); border-radius: 999px;
           min-height: 44px; padding: 0 14px; font: inherit; font-size: 12.5px;
           font-weight: 400; color: var(--grey); cursor: pointer; }
.ed-back.warn { border-color: var(--butter); color: #3A3936; }

/* ══ TODAY'S STORIES · execution ══════════════════════════════════════════
   Each story shown the way it will be seen — a tall frame at reading size
   with its caption set beneath in full. Read-only by construction: the only
   controls are copy, download, and the one door back into planning. */

.s-head { flex: none; padding: 52px 26px 0; display: flex;
          align-items: center; justify-content: space-between; gap: 12px; }
.s-back { display: flex; align-items: center; gap: 11px; padding: 6px 0;
          background: none; border: 0; border-radius: 0; cursor: pointer;
          min-height: 44px; }
.s-back-arrow { font-weight: 400; font-size: 16px; color: var(--ink); }
.s-back-name  { font-weight: 300; font-size: 11.5px; color: var(--grey); }

.s-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 26px 90px; }
.s-scroll::-webkit-scrollbar { display: none; }
.s-scroll { scrollbar-width: none; }
.s-tail { height: 70px; }

.s-ctx   { padding-top: 26px; }
.s-title { margin: 0; font-weight: 200; font-size: 30px; line-height: 1.25;
           color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.s-sub   { margin: 10px 0 0; font-weight: 300; font-size: 12.5px; color: var(--grey); }

.s-story { padding-top: 46px; }
.s-story.out { opacity: .5; }
.s-num { font-family: DMV, sans-serif; font-weight: 500; font-size: 11px;
         letter-spacing: .16em; color: var(--grey);
         unicode-bidi: isolate; text-align: right; }
.s-shotwrap { margin-top: 14px; display: flex; justify-content: center; }
.s-shot { position: relative; width: 236px; max-width: 100%; aspect-ratio: 236/420;
          border-radius: 16px; overflow: hidden; }
.s-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-shot-cap { position: absolute; inset: auto 0 0 0; padding: 12px 14px;
              background: linear-gradient(to top, rgba(26,25,23,.45), rgba(26,25,23,0)); }
.s-shot-cap span { font-weight: 300; font-size: 10px; color: rgba(245,243,239,.9); }
.s-shot-out { position: absolute; inset-inline-start: 10px; top: 10px;
              background: var(--butter); color: var(--ink); font-size: 9.5px;
              font-weight: 400; padding: 3px 7px; border-radius: 2px; }

.s-copy { margin-top: 20px; font-weight: 300; font-size: 17px; line-height: 1.65;
          color: var(--ink); white-space: pre-line; text-wrap: pretty;
          overflow-wrap: anywhere; }
.s-copy-none { color: var(--grey); font-style: italic; }

.s-acts { display: flex; align-items: center; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.s-acts-gap { flex: 1; }
.s-act { padding: 0 0 2px; background: none; border: 0; border-radius: 0;
         border-bottom: 1px solid rgba(26,25,23,.16); font: inherit;
         font-weight: 300; font-size: 12.5px; color: var(--grey);
         cursor: pointer; min-height: 32px; }
.s-act.did { color: var(--ink); }
.s-edit { padding: 0; background: none; border: 0; border-radius: 0; font: inherit;
          font-weight: 300; font-size: 12px; color: var(--grey);
          cursor: pointer; min-height: 32px; }

/* מוכנים להכנה · the handoff chapter */
.s-prep { padding-top: 56px; }
.s-prep-in { border-top: 1px solid rgba(26,25,23,.11); padding-top: 30px; }
.s-prep-h { margin: 0; font-weight: 200; font-size: 26px; line-height: 1.3; color: var(--ink); }
.s-prep-sub { margin: 10px 0 0; font-weight: 300; font-size: 13px;
              line-height: 1.8; color: var(--grey); max-width: 31ch; }
.s-prep-acts { margin-top: 22px; display: flex; flex-direction: column;
               align-items: flex-start; gap: 18px; }
.s-prep-act { padding: 0; background: none; border: 0; border-radius: 0; font: inherit;
              font-weight: 300; font-size: 17px; color: var(--ink);
              cursor: pointer; min-height: 40px; text-align: start; }
.s-prep-act.did { color: var(--grey); }
.s-prep-note { margin: 22px 0 0; font-weight: 300; font-size: 11.5px;
               line-height: 1.8; color: #82817A; max-width: 33ch; }

/* ✓ עלה · inline at the end of the day, not pinned. It fills with butter
   only once the day has been prepared, so the primary colour marks the step
   that is genuinely next rather than shouting from the moment she arrives. */
.s-pub { padding-top: 54px; }
.s-pub-note { margin: 0; font-weight: 300; font-size: 13px; line-height: 1.8; color: var(--grey); }
.s-pub-btn { width: 100%; margin-top: 14px; padding: 17px 0;
             border: 1px solid rgba(26,25,23,.22); background: none;
             color: var(--ink); border-radius: 999px; font: inherit;
             font-weight: 700; font-size: 15px; cursor: pointer;
             transition: background var(--settle) var(--ease),
                         border-color var(--settle) var(--ease); }
.s-pub-btn.ready { background: var(--butter); border-color: var(--butter); }
.s-pub-btn:disabled { opacity: .5; cursor: default; }
.s-pub-busy { margin-top: 14px; }

.s-done { padding-top: 54px; }
.s-done-h { margin: 0; font-weight: 300; font-size: 17px; color: var(--ink); }
.s-done-row { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.s-done-when { font-weight: 300; font-size: 12.5px; color: var(--grey); }
.s-done-undo { padding: 0 0 2px; background: none; border: 0; border-radius: 0;
               border-bottom: 1px solid rgba(26,25,23,.18); font: inherit;
               font-weight: 300; font-size: 12.5px; color: var(--grey);
               cursor: pointer; min-height: 32px; }

/* a video cannot be part of the one-tap save — its bytes are unreachable from
   the browser — so the chapter says so in place rather than letting the button
   imply otherwise */
.s-prep-vid { margin: -6px 0 0; font-weight: 300; font-size: 12px;
              line-height: 1.7; color: #82817A; max-width: 33ch; }
.s-prep-act:disabled { cursor: default; }
.s-prep-hint { margin: -8px 0 0; font-weight: 300; font-size: 11.5px;
               line-height: 1.7; color: #82817A; max-width: 33ch; }

/* ── a load that failed, on any screen ─────────────────────────────────────
   One shape for all four, matching the Week's own empty state so a failure
   reads as part of the app rather than as a stack trace in Hebrew. */
.load-fail { padding: 30px 22px 10px; }
.load-fail-line { margin: 0; font-size: 15px; font-weight: 300; color: var(--ink); }
.load-fail-sub  { margin: 9px 0 0; font-size: 12.5px; font-weight: 300;
                  line-height: 1.7; color: var(--grey); max-width: 32ch; }
.load-fail-retry { margin-top: 18px; min-height: 44px; padding: 0 18px;
                   background: none; border: 1px solid rgba(26,25,23,.22);
                   border-radius: 999px; font: inherit; font-size: 13px;
                   color: var(--ink); cursor: pointer; }

/* ── sign-in tap targets ───────────────────────────────────────────────────
   The email toggle was 16px and the two back links 29 and 17 — all three sit
   on the only paths a locked-out manager has. Padding is added and pulled
   back out with a negative margin, so the touch area reaches 44px while the
   type stays exactly where the design put it. */
/* the toggle carries an inline `margin:0 auto`, which beats a negative margin
   here — padding alone would have grown the row by 28px and moved everything
   around it. A pseudo-element extends the touch area over the surrounding
   space instead: 44px to the finger, unchanged to the eye. */
#toggleEmailAuth { position: relative; }
#toggleEmailAuth::after { content: ''; position: absolute; inset: -15px -20px; }
/* both back links carry a border-bottom that sits right under the word.
   Growing the box moved that rule 15px away from the text and widened it —
   a visible change to a screen nobody asked to redesign. The hit area is
   extended over the surrounding space instead, so the underline stays
   exactly where it was drawn. */
#signin .back-b, #pending .back { position: relative; }
#signin .back-b::after, #pending .back::after {
  content: ''; position: absolute; inset: -14px -16px;
}

/* the forgot-password entry point, same treatment as the email toggle beside
   it: a pseudo-element carries the 44px touch area so the link stays a link */
#forgotLink { position: relative; margin-top: 4px; }
#forgotLink::after { content: ''; position: absolute; inset: -15px -20px; }
#fpToSignin { position: relative; }
#fpToSignin::after { content: ''; position: absolute; inset: -15px -20px; }