/* StatusLi simple view (variant). Loaded only by simple.html. Adds, never replaces. */
body.sl-simple .section-nav,
body.sl-simple .flow-head,
body.sl-simple .r4-opts,
body.sl-simple .controls > div:has(> fieldset .choices) { display: none !important; }
/* gallery: only the 7 new looks */
/* batch2: slot cap removed - all parts must display (was nth-of-type(n+30) display:none) */
/* advanced content hidden until opened */
body.sl-simple:not(.sl-adv) .gallery,
body.sl-simple:not(.sl-adv) .panel.preview,
body.sl-simple:not(.sl-adv) .r4-fmt-adv { display: none !important; }
body.sl-simple .all-content-picker:not(:has(.type-bar-close)) { display: none !important; }
.sl-look { margin: 8px 16px 4px; text-align: center; }
.sl-look h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #584840; }
.sl-sw { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.sl-sw button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #d9cfc6; padding: 0; position: relative; cursor: pointer; }
.sl-sw button::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--ink); }
.sl-sw button[aria-pressed="true"] { border: 3px solid #584840; box-shadow: 0 0 0 2px #fff9f2 inset; }
.sl-sw span { display: block; font-size: 16px; color: #584840; margin-top: 4px; }
.sl-sw div { display: flex; flex-direction: column; align-items: center; }
.sl-adv-btn { display: block; margin: 12px auto 8px; min-height: 48px; padding: 0 24px; font-size: 16px; font-weight: 700; color: #584840; background: #fff9f2; border: 2px solid #584840; border-radius: 24px; cursor: pointer; }
.sl-back { display: block; text-align: center; font-size: 16px; padding: 12px; color: #584840; }

.sl-bg { display: none; margin: 12px 0; }
body.sl-simple.sl-adv .sl-bg { display: block; }
.sl-bg h3 { margin: 0 0 8px; font-size: 16px; }
.sl-bg-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-bg-row button { min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1.5px solid #584840; background: #FFF9F2; color: #584840; font: inherit; font-size: 16px; }
.sl-bg-row button[aria-pressed="true"] { background: #584840; color: #FFF9F2; }
.sl-bg-old { margin-top: 8px; background: none; border: 0; color: #8F2032; font: inherit; font-size: 16px; text-decoration: underline; min-height: 44px; }

.sl-bg.sl-off { display: none !important; }
.loading{position:fixed;left:50%;transform:translateX(-50%);bottom:92px;z-index:20;background:#FFF9F2;border-radius:14px;box-shadow:0 2px 10px #0002;padding:10px 16px;max-width:calc(100vw - 24px)}
.r4-car{min-height:330px}

body.sl-nosw .sl-sw, body.sl-nosw .sl-look > h3 { display: none; }

/* ---- v18: one sheet with flat tabs; the preview stays visible above it ---- */
body.sl-simple { padding-bottom: 150px; }
.sl-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 4px; }
.sl-pill { min-height: 46px; padding: 0 16px; font: inherit; font-size: 16px; font-weight: 700; color: #584840; background: #fff9f2; border: 1.5px solid #584840; border-radius: 23px; cursor: pointer; }
.sl-pill:active { background: #f6ddd3; }
.r4-bar.sl-out { gap: 8px 12px; }
.r4-bar.sl-out .sl-size { flex: 1 0 100%; min-height: 44px; gap: 4px; border-bottom: 1px solid #f0e4da; padding-bottom: 4px; }
.r4-bar.sl-out .sl-size button { min-height: 44px; flex: 1; }
.r4-home .r4-name { padding: 0 16px; }
.sl-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 150px; z-index: 80; background: #584840; color: #fff9f2; padding: 10px 18px; border-radius: 22px; font-size: 16px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.sl-toast.on { opacity: 1; }
html.sl-lock, html.sl-lock body { overflow: hidden; }
.sl-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: 340px; z-index: 70; background: #fff9f2; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 36px rgba(88,72,64,.28); animation: sl-up .22s ease-out; }
@keyframes sl-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sl-sheet { animation: none; } }
.sl-sheet[hidden] { display: none; }
.sl-sheet-hd { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px; min-height: 52px; color: #584840; }
.sl-sheet-hd strong { font-size: 18px; }
.sl-sheet-x { min-height: 44px; padding: 0 22px; font: inherit; font-size: 16px; font-weight: 700; color: #fff9f2; background: #584840; border: 0; border-radius: 22px; }
.sl-sheet-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 8px; border-bottom: 1px solid #f0b0a0; scrollbar-width: none; }
.sl-sheet-tabs button { flex: none; min-height: 44px; padding: 0 14px; font: inherit; font-size: 16px; color: #584840; background: #f6ddd3; border: 0; border-radius: 22px; }
.sl-sheet-tabs button[aria-selected="true"] { background: #584840; color: #fff9f2; font-weight: 700; }
.sl-sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); }
.sl-sec[hidden] { display: none; }
.sl-sheet .advanced-edit { border: 0; padding: 0; }
.sl-sheet .advanced-edit > summary { display: none; }
.sl-sheet[data-tab="font"] .advanced-edit > :not(.precision-panel):not(summary) { display: none; }
.sl-sheet[data-tab="edit"] .advanced-edit > .precision-panel { display: none; }
.sl-sheet .advanced-edit details > summary { pointer-events: none; list-style: none; font-weight: 700; color: #584840; }
.sl-sheet .advanced-edit details > summary::-webkit-details-marker { display: none; }
.sl-sheet .advanced-edit details > summary::marker { content: ""; }
.sl-sec > .sl-bg > h3 { display: none; }
.sl-sheet .sl-bg { display: block; }
.sl-file-in { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.sl-file-btn { min-height: 46px; padding: 0 18px; font: inherit; font-size: 16px; font-weight: 700; color: #584840; background: #fff9f2; border: 1.5px solid #584840; border-radius: 23px; }
.sl-file-st { margin-inline-start: 10px; font-size: 16px; color: #584840; }
.pin-editor textarea { unicode-bidi: plaintext; }
.r4-strip { padding-inline-end: 24px; }
.sl-modes h3 { margin: 0 0 8px; font-size: 16px; color: #584840; }
.sl-modes-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sl-mode { min-height: 46px; padding: 0 16px; font: inherit; font-size: 16px; color: #584840; background: #fff9f2; border: 1.5px solid #584840; border-radius: 23px; }
.sl-mode[aria-pressed="true"] { background: #584840; color: #fff9f2; font-weight: 700; }
.sl-sheet { top: clamp(300px, 46vh, 340px); }
html:has(.all-content-picker .type-bar-close) body::before { content: ""; position: fixed; inset: 0; background: rgba(88,72,64,.38); z-index: 59; }
.r4-bar.sl-out { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); gap: 6px 12px; }
.r4-bar.sl-out .sl-size { border-bottom: 0; padding-bottom: 0; }
.sl-brand-title[hidden] { display: none; }
.sl-settings h3 { margin: 0 0 4px; font-size: 18px; color: #584840; }
.sl-set-hint { margin: 0 0 12px; font-size: 16px; color: #584840; }
.sl-set-f { display: block; margin-bottom: 14px; }
.sl-set-f span { display: block; font-size: 16px; font-weight: 700; color: #584840; margin-bottom: 6px; }
.sl-set-f input { width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px; font: inherit; font-size: 16px; color: #584840; background: #fff; border: 1.5px solid #584840; border-radius: 12px; }
/* type picker: "כל הסוגים" is a labelled full-width row under the strip */
.r4-types { flex-wrap: wrap; }
.r4-types .r4-strip { order: 1; flex: 1 0 100%; padding-bottom: 2px; }
.r4-types .r4-all { order: 2; flex: 1 0 calc(100% - 32px); justify-content: center; margin: 4px 16px 8px; min-height: 48px; }
.r4-types .r4-all::after { content: "· כל סוגי התוכן"; font-weight: 400; }
/* header: greeting is a quiet subtext in the page's own type, never a second headline */
.sl-tag { display: none; }
.sl-hello { margin: 0; padding: 2px 16px 8px; font-size: 16px; font-weight: 600; line-height: 1.4; color: #584840; text-align: start; }
body[data-sl-head="entry"] .sl-hello { display: none; }
body[data-sl-head="large"] .sl-hello { font-size: 22px; font-weight: 800; padding: 4px 16px 10px; }
.sl-brand-title { margin: 0; padding: 0 16px 8px; font-size: 16px; font-weight: 700; color: #584840; text-align: start; }
.sl-toast.sl-top { bottom: auto; top: 76px; background: #fff9f2; color: #584840; border: 1px solid #f0b0a0; }
.sl-pill-main { background: #584840; color: #fff9f2; }
.sl-set-head { border: 0; padding: 0; margin: 0 0 12px; }
.sl-set-head legend { font-size: 16px; font-weight: 700; color: #584840; padding: 0; margin-bottom: 6px; }
.sl-radio { display: flex; align-items: center; gap: 10px; min-height: 46px; font-size: 16px; color: #584840; }
.sl-radio input { width: 22px; height: 22px; accent-color: #584840; }
.sl-big { position: fixed; inset: 0; z-index: 90; background: #fff9f2; display: flex; flex-direction: column; }
.sl-big[hidden] { display: none; }
.sl-big-hd { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; min-height: 56px; color: #584840; }
.sl-big-hd strong { font-size: 18px; }
.sl-big-x { min-height: 44px; padding: 0 22px; font: inherit; font-size: 16px; font-weight: 700; color: #fff9f2; background: #584840; border: 0; border-radius: 22px; }
.sl-big-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.sl-big-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 6px 24px rgba(88,72,64,.22); }
.sl-big-ch { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 10px 16px 0; justify-content: center; }
.sl-big-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 12px; background: #f6ddd3; border-radius: 16px; font-size: 16px; color: #584840; }
.sl-big-chip small { font-size: 16px; opacity: .8; }
.sl-big-ac { display: flex; gap: 12px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
.sl-big-a { flex: 1; min-height: 52px; font: inherit; font-size: 16px; font-weight: 700; border-radius: 12px; border: 1.5px solid #584840; background: #fff9f2; color: #584840; }
.sl-big-a.r4-wa { background: #584840; color: #fff9f2; }
/* reserve the carousel height before the cards render (no layout shift) */
.r4-car { min-height: 330px; }
.r4-car:has(.r4-card.fmt-square), .r4-car:has(.r4-card.fmt-portrait) { min-height: 0; }
/* hold the app hidden until the zones are mounted (no layout shift) */
html:not(.sl-ready) #root { visibility: hidden; }

/* settings phase 1 */
.sl-set-g { margin: 0 0 22px; padding: 0 0 18px; border-bottom: 1px solid #E8DDD2; }
.sl-set-g:last-of-type { border-bottom: 0; }
.sl-set-sub { display: block; margin: 6px 0 10px; font-size: 16px; line-height: 1.5; color: #584840; }
.sl-set-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.sl-set-btn { min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1.5px solid #584840; background: #FFF9F2; color: #584840; font: inherit; font-size: 16px; font-weight: 700; }
.sl-set-ghost { border-color: #C9B8A8; font-weight: 600; }
.sl-set-danger { border-color: #8F2032; color: #8F2032; margin-top: 10px; }
.sl-logo-prev img { max-width: 140px; max-height: 80px; object-fit: contain; display: block; margin: 6px 0; }
.sl-set-cols { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0; }
.sl-col-i { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 16px; color: #584840; }
.sl-col-sw { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #584840; padding: 0; }
.sl-set-manual input { width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px; font-size: 16px; margin-top: 8px; border: 1.5px solid #584840; border-radius: 12px; background: #FFF9F2; color: #584840; }
/* impeccable: heading rhythm (more space above than below) and no body text flush with the viewport edge */
.panel.controls > h2, .browse-menu > h2 { margin-top: 24px !important; margin-bottom: 10px; }
.sl-hello { margin-inline: 12px; padding-inline: 4px; }

/* v23: reviewer fixes (plain) */
.r4-card canvas { background: #F6ECE2; }
.sl-toast.sl-top { top: auto; bottom: 132px; max-width: calc(100vw - 32px); }
.sl-toast { bottom: 132px; }
a.wordmark { display: inline-flex; align-items: center; min-height: 44px; padding-block: 7px; box-sizing: border-box; }
.history-toggle, .history-panel button, .history-grid button, .save-history button, .history-panel select { min-height: 44px; min-width: 44px; }
.sl-sheet button, .sl-sheet select, .sl-sheet summary, .sl-sheet input:not([type=radio]):not([type=checkbox]):not([type=file]) { min-height: 44px; }
.r4-strip { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); }
.pin-editor textarea, .r4-home ~ * textarea, textarea { min-height: 86px; resize: none; overflow-y: auto; }
details.privacy-d > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; border: 1.5px solid #584840; border-radius: 12px; color: #584840; font-weight: 700; cursor: pointer; list-style: none; }
details.privacy-d > summary::-webkit-details-marker { display: none; }
details.privacy-d > summary::after { content: ""; width: 10px; height: 10px; border-inline-end: 2.5px solid #584840; border-bottom: 2.5px solid #584840; transform: rotate(45deg); margin-inline-start: 12px; transition: transform .15s; }
details.privacy-d[open] > summary::after { transform: rotate(-135deg); }
body.sl-simple { padding-bottom: 132px; }
html:has(.all-content-picker .type-bar-close) .r4-bar { display: none; }
.all-content-picker .type-bar-close ~ * , .all-content-picker { padding-bottom: 16px; }
.pg-heart { width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0 !important; background: none !important; font-size: 22px; line-height: 1; color: #8F2032; box-shadow: none !important; }

.sl-hide { display: none !important; }

/* reviewer fix: peek cards keep presence instead of fading to ghosts */
body.sl-simple .structure .r4-card:not(.on) canvas { opacity: .85; filter: saturate(.95); }

/* reviewer fix: desktop is a centered app column, not a stretched phone */
@media (min-width: 900px) {
  body.sl-simple .structure { max-width: 640px; margin-inline: auto; }
  body.sl-simple .r4-bar.sl-out { left: calc(50% - 320px); right: calc(50% - 320px); }
}

/* reviewer fix: the share/status notice is a quiet padded card, not bare text */
body.sl-simple .structure .simple-notice { margin: 12px 16px 0; padding: 12px 16px; border: 1.5px solid #584840; border-radius: 12px; background: #FFF9F2; color: #584840; font-size: 16px; line-height: 1.6; }

/* reviewer fix: informational share/status message gets the calm card, real errors stay red */
body.sl-simple .structure .error.export-notice { position: static; max-height: none; overflow: visible; width: auto; text-align: start; margin: 12px 16px 0; padding: 12px 16px; border: 1.5px solid #584840; border-radius: 12px; background: #FFF9F2; color: #584840; font-size: 16px; line-height: 1.6; }

/* reviewer fix: the share/status toast inside the bottom bar is a quiet padded card, not bare text */
body.sl-simple .structure .r4-bar .r4-toast { border: 1.5px solid #584840 !important; border-radius: 12px; background: #FFF9F2 !important; color: #584840 !important; padding: 12px 16px !important; margin: 0 0 8px !important; box-shadow: none !important; text-align: center; font-size: 16px; line-height: 1.6; }

/* reviewer fix: gallery thumbnails big enough to read, on top of the crisper render */
body.sl-simple .structure .simple-looks button { flex-basis: 118px; }

/* r5: combined panel fixes 2026-10-21 (layout/Apple/beauty findings; CSS only, no words) */
/* duplicate share notice: the bar toast is the single visible + announcing channel in simple view */
body.sl-simple .structure p.notice[role="status"], body.sl-simple p.simple-notice { display: none !important; }
/* hearts: straight column at the list edge */
.all-content-picker .pg-item { width: 100%; }
.all-content-picker .pg-heart { margin-inline-start: auto; }
/* guide steps: consistent start alignment + even rows */
.start-guide .guide-visual li { text-align: start; }
.start-guide .guide-visual li p, .start-guide .guide-visual li figcaption, .start-guide .guide-visual li small { text-align: start !important; }
/* sticky bar: breathing room + soft fade above */
body.sl-simple .r4-bar { padding-top: 12px; }
body.sl-simple .r4-bar { position: fixed; }
body.sl-simple .r4-bar::before { content: ""; position: absolute; inset-inline: 0; top: -26px; height: 26px; pointer-events: none; background: linear-gradient(to top, #FFF9F2 0%, rgba(255,249,242,0) 100%); }
/* tab strip: clearer scroll cue */
.r4-strip { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); }
/* greeting breathing room */
.sl-hello { margin-top: 10px !important; margin-bottom: 4px !important; }
/* quieter help button outline */
.start-guide-entry { border-color: #DCD6EE !important; }
@media (min-width:900px) {
  /* desktop: badge consistency with mobile */
  .local-badge { display: none !important; }
  /* desktop: larger preview; counter above carousel so the sticky bar never clips it */
  body.sl-simple .r4-home { --ch: clamp(300px, calc(100svh - 470px), 460px); display: flex; flex-direction: column; }
  body.sl-simple .r4-home .r4-name { order: -1; margin: 0 0 8px; }
  body.sl-simple .structure textarea { min-height: 64px; }
}

/* r6: combined panel round 2, 2026-10-21 (layout/beauty/Apple/competitive findings; CSS only, no words, 485 frozen as baseline) */
/* guide: each step is one start-aligned block - number circle, title and text line up together */
.start-guide .guide-visual li { display: flex; flex-direction: column; align-items: flex-start; text-align: start; }
.start-guide .guide-visual li > * { margin-inline: 0; }
/* mobile: counter row breathes below the carousel fade */
body.sl-simple .r4-home .r4-name { margin-top: -24px; }
/* mobile: shorter fade so the counter row stays crisp (desktop keeps 26px) */
@media (max-width:899px) { body.sl-simple .r4-bar::before { top: -14px; height: 14px; } }
/* mobile: tab buttons get a touch more separation */
.r4-strip { gap: 10px; }
@media (min-width:900px) {
  /* desktop: cards clear the sticky bar on the initial 1280x800 view (bar top ~679, fade from ~653) */
  body.sl-simple .r4-home { --ch: clamp(260px, calc(100svh - 540px), 460px); }
  /* desktop: no dead field below the privacy block - padding matches the bar, not the mobile value */
  body.sl-simple { padding-bottom: 100px; }
  /* desktop: heart pairs with its pill instead of pinning to the far sheet edge */
  .all-content-picker .pg-item { width: auto; max-width: 640px; margin-inline: auto; justify-content: start; gap: 10px; }
  .all-content-picker .pg-heart { margin-inline-start: 0; }
}
/* r6b: guide steps share one start edge across steps */
.start-guide .guide-visual li { width: 100%; }
/* r6b: desktop cards fully clear the bar fade on 800px-tall screens */
@media (min-width:900px) { body.sl-simple .r4-home { --ch: clamp(230px, calc(100svh - 570px), 460px); } }
/* r6c: desktop simple view - drop the workspace's own 100px tail (body keeps a modest cushion) */
@media (min-width:900px) { body.sl-simple main.workspace { padding-bottom: 0 !important; } body.sl-simple { padding-bottom: 60px; } }
/* mobile: make room for the counter row above the shortened fade (counter fully crisp, cards keep 280px) */
@media (max-width:899px) { body.sl-simple .r4-home { --ch: clamp(250px, calc(100svh - 564px), 430px) !important; } }

/* r7: batch 2026-10-22 (panel round 3; defects 1-4; adds/preserves only, no words) */
/* d2: tour primary action reads as the primary action (floor 44px already passes; hierarchy was weakest on the row) */
.tour-root .guide-primary { min-width: 112px; }
/* d3 mobile: counter row pins above the carousel (desktop r6 pattern) so tall types keep it in view; card height untouched */
@media (max-width:899px) {
  body.sl-simple .r4-home { display: flex; flex-direction: column; }
  body.sl-simple .r4-home .r4-name { order: -1; margin: 0 0 8px; }
}
/* d4 desktop: fade matches mobile height and softens its top edge so resting content is not read as hard-clipped */
@media (min-width:900px) {
  body.sl-simple .r4-bar::before { top: -14px; height: 14px; }
}
body.sl-simple .r4-bar::before { background: linear-gradient(to top, #FFF9F2 0%, rgba(255,249,242,.85) 45%, rgba(255,249,242,0) 100%); }
/* d1: the download-start pill sits under the header (transient) so it never covers the app's completion notice; greeting toast (sl-top) behavior untouched */
.sl-toast.sl-dl { bottom: auto; top: 76px; }

/* patch30: keep chip ring inside its scroll clipping box; no rest-layout change. */
body.sl-simple .r4-strip .r4-chip:focus-visible { outline-offset: -4px; }
html[data-sl-input="direct"] body.sl-simple .r4-car .r4-card:focus-visible { outline: none; }

/* v28 */
.sl-mirrored { display: none !important; }
.sl-fonts, .sl-emph { margin: 0 0 16px; }
.sl-fonts h3, .sl-emph h3 { margin: 0 0 8px; font-size: 16px; color: #584840; }
.sl-font-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sl-font-card { min-height: 64px; padding: 8px 10px; border-radius: 14px; border: 1.5px solid #584840; background: #FFF9F2; color: #584840; font: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; }
.sl-font-card[aria-pressed="true"] { background: #584840; color: #FFF9F2; }
.sl-font-smp { font-size: 20px; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-font-card small { font-size: 16px; opacity: .8; }
.sl-emph-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sl-emph-words { display: flex; flex-direction: column; gap: 8px; }
.sl-emph-part { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sl-emph-part small { font-size: 16px; color: #584840; width: 100%; }
.sl-word { min-height: 44px; padding: 0 12px; border-radius: 22px; border: 1.5px solid #584840; background: #FFF9F2; color: #584840; font: inherit; font-size: 16px; }
.sl-word[aria-pressed="true"] { background: #584840; color: #FFF9F2; }
.sl-bg-decor, .sl-bg-ill { margin-top: 8px; }
.sl-bg-row button[aria-pressed="true"] { background: #584840; color: #FFF9F2; }
.sl-font-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-font-card { min-width: 0; width: 100%; }
.sl-fonts, .sl-emph { max-width: 100%; min-width: 0; }
.sl-set-logo { display: none; }
.sl-sec-looks > .sl-bg > h3 { display: block; }
.sl-sec-looks > .sl-bg { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #F0D8CC; }
.sl-font-card[aria-pressed="true"] small { color: #FFF9F2; opacity: 1; }
.sl-font-card small { color: inherit; }

/* v29: header stays on one row at 360 and below, no text change */
@media (max-width: 380px) {
  header { gap: 2px !important; padding-inline: 8px !important; flex-wrap: nowrap !important; }
  header .start-guide-entry, header .history-toggle { padding-inline: 3px !important; white-space: nowrap; }
}

/* v29: five sheet tabs fit on one row at 390 and 360 (padding only, text unchanged) */
@media (max-width: 440px) {
  .sl-sheet-tabs { gap: 4px !important; }
  .sl-sheet-tabs button { padding-inline: 9px !important; }
}
@media (max-width: 380px) {
  .sl-sheet-tabs button { padding-inline: 6px !important; }
}