/* CeritaKita — a quiet workspace for lively stories. */
:root {
  font-family: 'DM Sans', sans-serif;
  color: #252923;
  background: #f6f5f0;
  font-synthesis: none;
  --paper: #f6f5f0;
  --surface: #fffefa;
  --ink: #252923;
  --muted: #75796f;
  --line: #e4e6dc;
  --green: #566846;
  --green-dark: #405135;
  --green-pale: #e9eedf;
  --yellow: #f4d879;
  --coral: #f5b7a6;
  --lilac: #cabce3;
  --sage: #bed5ad;
  --blue: #b9d3e5;
  --orange: #edc094;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; min-width: 320px; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button, input, textarea, select { color: inherit; }
button { border: 0; }
button:disabled { cursor: not-allowed; opacity: .45; }
a { color: inherit; text-decoration: none; }
svg { display: block; flex-shrink: 0; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: 'Bricolage Grotesque', sans-serif; }
button, a, input, textarea, select, [tabindex] { outline-offset: 4px; }
:focus-visible { outline: 3px solid #687f4a; }
::selection { background: #d8e6bb; color: #252923; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* The shell keeps tools nearby and gives the cards the stage. */
.app-shell { display: grid; grid-template-columns: 224px minmax(0,1fr); min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100dvh; padding: 34px 20px 22px; display: flex; flex-direction: column; background: #f0f1e9; border-right: 1px solid #e0e3d6; z-index: 20; }
.brand { display: flex; align-items: center; gap: 11px; width: fit-content; margin: 0 6px 58px; }
.brand-symbol { position: relative; display: grid; place-items: center; width: 38px; height: 40px; color: #f4f4e9; background: var(--green); border-radius: 10px; transform: rotate(-7deg); }
.brand-symbol::before { content: ''; position: absolute; width: 100%; height: 100%; border: 1px solid #67774f; border-radius: 10px; transform: rotate(13deg); z-index: -1; }
.brand-symbol svg { width: 23px; height: 23px; transform: rotate(7deg); }
.brand-text { display: flex; flex-direction: column; gap: 2px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 750; letter-spacing: -.9px; line-height: 1.06; }
.brand-text small { font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 2.4px; color: #7c826f; margin-left: 2px; }
.side-label { margin: 0 13px 13px; color: #898e7e; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; }
.nav-list { display: grid; gap: 7px; }
.nav-item { position: relative; width: 100%; display: flex; align-items: center; gap: 11px; min-height: 46px; padding: 12px 13px; border-radius: 9px; color: #6c7263; background: transparent; text-align: left; font-size: 12px; font-weight: 550; transition: color .18s, background .18s; }
.nav-item svg { width: 19px; height: 19px; stroke-width: 1.7; }
.nav-item:hover { background: #e8ebdf; color: #394d2e; }
.nav-item.active { background: #e0e7d2; color: #435732; font-weight: 700; }
.nav-item.active::before { content: ''; position: absolute; left: -20px; width: 3px; height: 24px; background: #68814d; border-radius: 0 4px 4px 0; }
.nav-item .badge { margin-left: auto; min-width: 23px; padding: 3px 6px; border-radius: 5px; background: #d1ddbe; font-size: 10px; line-height: 1.3; text-align: center; }
.sidebar-bottom { margin-top: auto; padding-top: 36px; }
.guide-card { position: relative; overflow: hidden; padding: 20px 16px 17px; border: 1px solid #dce2cd; border-radius: 12px; background: #e9eddf; }
.guide-card > svg { width: 24px; height: 24px; margin-bottom: 13px; color: #6d8055; }
.guide-card h3 { font-size: 16px; font-weight: 650; line-height: 1.3; margin-bottom: 7px; }
.guide-card p { color: #737c65; font-size: 11px; line-height: 1.75; margin-bottom: 13px; }
.guide-card .btn, .guide-card .text-link { font-size: 11px; }
.guide-card .text-link { color: #566846; font-weight: 750; }
.sidebar-note { margin: 19px 8px 0; color: #959b89; font-size: 10px; line-height: 1.7; }
.sidebar-note strong { color: #738064; font-weight: 500; }
.main-wrap { min-width: 0; }
.topbar { height: 82px; padding: 0 46px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.breadcrumb { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; color: #858a7d; }
.breadcrumb svg { width: 14px; height: 14px; }
.breadcrumb strong { color: #595f51; font-weight: 500; }
.breadcrumb span[aria-hidden] { color: #bec3b3; }
.top-actions { display: flex; align-items: center; gap: 16px; }
.locale { display: flex; align-items: center; gap: 7px; color: #747c68; font-size: 10px; font-weight: 600; white-space: nowrap; }
.locale svg { width: 14px; height: 14px; }
#main { max-width: 1440px; margin: 0 auto; padding: 0 46px 40px; animation: enter-page .35s var(--ease) both; }
@keyframes enter-page { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Shared controls. */
.btn { min-height: 44px; padding: 12px 19px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; line-height: 1.35; font-weight: 650; text-align: center; white-space: nowrap; transition: background .18s, transform .18s var(--ease), box-shadow .18s, border-color .18s; }
.btn svg { width: 17px; height: 17px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--green); color: #fffef6; box-shadow: 0 2px 1px #223c2510; }
.btn.primary:hover { background: var(--green-dark); box-shadow: 0 5px 10px #33402516; }
.btn.secondary { border-color: #dfe2d7; background: #fffefb; color: #5e6753; }
.btn.secondary:hover { border-color: #bfcbb0; background: #f3f6ed; }
.btn.ghost { background: transparent; color: #6d7660; }
.btn.ghost:hover { background: #e9eee0; }
.btn.small { min-height: 40px; padding: 10px 14px; font-size: 11px; }
.icon-btn { flex-shrink: 0; min-width: 44px; width: 44px; height: 44px; display: inline-grid; place-items: center; background: transparent; border: 1px solid transparent; border-radius: 9px; color: #6b745e; transition: background .18s, color .18s; }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: #e7ebde; color: #344b28; }
.text-link { display: inline-flex; gap: 7px; align-items: center; min-height: 38px; padding: 0; color: #687a50; background: transparent; font-size: 11px; font-weight: 650; }
.text-link svg { width: 15px; height: 15px; }
.text-link:hover { color: #384b2a; }

/* A physical, fanned deck introduces the storytelling workspace. */
.hero { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; min-height: 410px; margin-bottom: 35px; padding: 26px 0 33px; border-bottom: 1px solid var(--line); }
.hero-copy { position: relative; z-index: 2; max-width: 520px; padding: 0 0 12px; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #7d886b; font-size: 10px; line-height: 1.4; font-weight: 700; text-transform: uppercase; letter-spacing: 1.7px; }
.status-dot { display: inline-block; width: 5px; height: 5px; background: #91a36a; border-radius: 50%; box-shadow: 0 0 0 3px #a6b78419; }
.hero h1 { font-size: clamp(42px, 4.4vw, 65px); letter-spacing: -2.6px; line-height: 1.035; font-weight: 650; margin: 20px 0 20px; }
.hero h1 em { display: inline-block; color: #718454; font-style: normal; position: relative; }
.hero h1 em::after { content: ''; position: absolute; left: 1px; right: 0; bottom: -6px; height: 6px; border-top: 2px solid #c1cdac; border-radius: 50%; transform: rotate(-1.8deg); }
.hero-copy > p { max-width: 345px; color: #858a7c; font-size: 13px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-meta { display: flex; align-items: center; gap: 12px; margin-top: 20px; color: #8c917f; font-size: 10px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 5px; }
.hero-meta svg { width: 12px; height: 12px; }
.hero-meta strong { color: #68745b; font-weight: 600; }
.hero-meta > i { width: 3px; height: 3px; border-radius: 50%; background: #c5ccba; }
.hero-visual { position: relative; align-self: stretch; min-width: 0; display: flex; align-items: center; justify-content: center; }
.hero-visual::before { content: ''; position: absolute; inset: 30px -5px 5px; background-image: radial-gradient(#b6c0a3 1px, transparent 1px); background-size: 17px 17px; opacity: .22; mask-image: radial-gradient(ellipse, #000 20%, transparent 70%); pointer-events: none; }
.hero-deck { position: relative; width: 335px; height: 328px; margin: 8px 0 30px; perspective: 1000px; }
.hero-card { position: absolute; width: 208px; height: 286px; left: 66px; top: 15px; overflow: hidden; padding: 20px; border: 1px solid #242c2421; border-radius: 13px; background: var(--card-color, var(--yellow)); box-shadow: 0 3px 0 #faf6e880, 0 4px 0 #3f4b3630, 0 13px 26px #3f482323; transform-origin: 50% 80%; transition: transform .45s var(--ease); }
.hero-card-back { background: var(--lilac); transform: rotate(-17deg) translate(-44px, 12px); }
.hero-card-middle { background: var(--sage); transform: rotate(16deg) translate(44px, 8px); }
.hero-card-front { background: var(--yellow); transform: rotate(-4deg); z-index: 2; }
.hero-deck:hover .hero-card-back { transform: rotate(-21deg) translate(-51px, 10px); }
.hero-deck:hover .hero-card-middle { transform: rotate(20deg) translate(51px, 6px); }
.hero-deck:hover .hero-card-front { transform: rotate(-1deg) translateY(-5px); }
.hero-card .card-kicker { color: #3f4935b3; text-transform: uppercase; font-size: 8px; font-weight: 700; letter-spacing: 1.3px; }
.hero-card .card-number { position: absolute; right: 17px; top: 19px; font-size: 8px; color: #535d42b3; }
.hero-card h2 { font-size: 29px; letter-spacing: -1px; line-height: 1.03; margin-top: 19px; max-width: 150px; font-weight: 650; }
.hero-card .card-art { height: 120px; margin: 9px -5px 0; }
.hero-card .card-bottom { position: absolute; left: 20px; right: 20px; bottom: 16px; font-size: 8px; border-top: 1px solid #3d4a3024; padding-top: 11px; color: #5d633db3; }
.deck-caption { position: absolute; bottom: 3px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; align-items: center; color: #8f947f; font-size: 10px; transform: rotate(-2deg); }
.deck-caption svg { width: 29px; height: 24px; }

/* Browse the deck. */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; }
.section-heading { display: flex; gap: 10px; align-items: center; }
.section-heading h2, .section-head > h2 { font-size: 25px; letter-spacing: -.65px; font-weight: 600; }
.section-heading > p { font-size: 12px; color: var(--muted); }
.count-pill { min-width: 25px; padding: 4px 7px; border-radius: 5px; color: #8b937b; background: #eaece3; text-align: center; font-size: 10px; line-height: 1.3; }
.library-tools { display: flex; align-items: center; gap: 11px; margin-bottom: 19px; }
.searchbox { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 45px; padding: 0 14px; border: 1px solid #e2e5d9; border-radius: 8px; background: #fffefb; transition: border-color .18s, box-shadow .18s; }
.searchbox:focus-within { border-color: #829366; box-shadow: 0 0 0 3px #83946014; }
.searchbox > svg { width: 16px; height: 16px; color: #9a9f91; }
.searchbox input { width: 100%; min-width: 0; height: 43px; padding: 0; border: 0; outline: 0; background: transparent; font-size: 11px; color: #4b5540; }
.searchbox input::placeholder { color: #a0a693; }
.searchbox input::-webkit-search-cancel-button { cursor: pointer; }
.searchbox kbd { display: grid; place-items: center; min-width: 19px; height: 20px; background: #f3f4ee; color: #acb29e; border: 1px solid #e7e9df; border-radius: 4px; font-size: 10px; }
.view-toggle { display: flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid #e2e5d9; border-radius: 8px; background: #fffefb; }
.view-toggle .icon-btn { min-width: 38px; width: 38px; height: 37px; border-radius: 5px; color: #a2a995; }
.view-toggle .icon-btn svg { width: 16px; height: 16px; }
.view-toggle .active, .view-toggle [aria-pressed=true] { background: #eaf0df; color: #6c7f53; }
.filter-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; }
.filter-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 35px; padding: 8px 11px; border: 1px solid #e0e3d7; border-radius: 6px; background: transparent; color: #929986; font-size: 10px; line-height: 1.25; font-weight: 500; transition: background .18s, color .18s, border-color .18s; }
.filter-chip:hover { background: #ecf0e2; color: #65714f; border-color: #cfd7c3; }
.filter-chip.active { background: var(--green); color: #f6f8f0; border-color: var(--green); }
.filter-chip .color-dot { width: 6px; height: 6px; border-radius: 2px; }
.color-dot { display: inline-block; width: 8px; height: 8px; flex-shrink: 0; background: var(--card-color, var(--sage)); border-radius: 50%; }
.card-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px 18px; padding-bottom: 7px; }
.tactic-card { position: relative; min-width: 0; border-radius: 12px; background: var(--card-color, var(--yellow)); border: 1px solid #4e543316; box-shadow: 0 3px 0 #fffdf4, 0 4px 0 #c1c5b380, 0 5px 0 #fffdf4, 0 6px 0 #c1c5b340, 0 9px 11px #48522506; transition: transform .23s var(--ease), box-shadow .23s var(--ease); }
.tactic-card:hover { transform: translateY(-6px) rotate(-.3deg); box-shadow: 0 3px 0 #fffdf4, 0 4px 0 #c1c5b380, 0 5px 0 #fffdf4, 0 6px 0 #c1c5b340, 0 14px 21px #48522517; }
.tactic-card:nth-child(even):hover { transform: translateY(-6px) rotate(.3deg); }
.card-open { width: 100%; min-height: 332px; height: 100%; padding: 19px 19px 14px; display: flex; flex-direction: column; align-items: stretch; text-align: left; background: transparent; border-radius: inherit; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 7px; padding-right: 24px; min-height: 14px; }
.card-category { display: flex; align-items: center; gap: 4px; font-size: 8px; line-height: 1.3; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px; color: #35402cb3; }
.card-category svg { width: 11px; height: 11px; }
.card-no { color: #566345ad; font-size: 8px; white-space: nowrap; }
.card-open h3 { font-size: clamp(20px,1.6vw,25px); line-height: 1.06; font-weight: 650; letter-spacing: -.75px; margin-top: 20px; min-height: 52px; max-width: 190px; }
.card-art { display: flex; align-items: center; justify-content: center; width: 100%; color: var(--ink); }
.card-art svg { width: 100%; height: 100%; max-height: inherit; overflow: visible; }
.card-open > .card-art { height: 132px; margin: 7px 0 6px; }
.card-open > p { color: #36472cd4; font-size: 10px; line-height: 1.65; min-height: 33px; margin-top: auto; margin-bottom: 14px; }
.card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 7px; border-top: 1px solid #34472b26; padding-top: 11px; color: #4d5e42b3; font-size: 8px; font-weight: 550; }
.card-bottom > span { display: flex; align-items: center; gap: 4px; }
.card-bottom svg { width: 11px; height: 11px; }
.card-bottom > svg { transition: transform .2s; }
.tactic-card:hover .card-bottom > svg { transform: translateX(3px); }
.bookmark { position: absolute; z-index: 3; top: 5px; right: 3px; width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border-radius: 8px; color: #42523680; transition: color .18s, background .18s; }
.bookmark svg { width: 14px; height: 14px; }
.bookmark:hover { color: #283d21; background: #fffff52e; }
.bookmark.is-saved { color: #344927; }
.bookmark.is-saved svg { fill: currentColor; }
.card-grid.list-view { grid-template-columns: 1fr; gap: 12px; }
.list-view .tactic-card { box-shadow: 0 2px 0 #fffdf4, 0 3px 0 #c1c5b350; }
.list-view .tactic-card:hover { transform: translateX(3px); }
.list-view .card-open { display: grid; grid-template-columns: 114px minmax(145px,.9fr) minmax(170px,1.4fr) 100px; grid-template-rows: auto auto; gap: 0 20px; align-items: center; min-height: 100px; padding: 16px 58px 16px 20px; }
.list-view .card-top { grid-column: 2; grid-row: 1; padding-right: 0; justify-content: flex-start; gap: 9px; align-self: end; }
.list-view .card-open h3 { grid-column: 2; grid-row: 2; min-height: 0; margin-top: 6px; font-size: 21px; align-self: start; max-width: none; }
.list-view .card-open > .card-art { grid-column: 1; grid-row: 1 / 3; width: 114px; height: 68px; margin: 0; }
.list-view .card-open > p { grid-column: 3; grid-row: 1 / 3; min-height: 0; margin: 0; max-width: 340px; font-size: 11px; }
.list-view .card-bottom { grid-column: 4; grid-row: 1 / 3; padding: 0; border: 0; flex-wrap: wrap; gap: 8px; }
.list-view .bookmark { top: calc(50% - 22px); right: 7px; }
.empty-state { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; min-height: 300px; padding: 44px 20px; text-align: center; border: 1px dashed #cfd8c0; border-radius: 14px; background: #eef1e7; }
.empty-state > svg { width: 37px; height: 37px; color: #93a27b; margin-bottom: 2px; }
.empty-state h2, .empty-state h3 { font-size: 25px; letter-spacing: -.5px; font-weight: 550; }
.empty-state p { max-width: 380px; font-size: 13px; line-height: 1.8; color: #899279; }
.empty-state .btn { margin-top: 8px; }

/* Recipes and the user's own story canvas. */
.page-intro { padding: 32px 0 32px; }
.page-intro .eyebrow { margin-bottom: 17px; }
.page-intro h1 { font-size: clamp(34px,4vw,49px); font-weight: 600; line-height: 1.12; letter-spacing: -1.8px; margin-bottom: 13px; }
.page-intro > p { font-size: 13px; line-height: 1.9; color: #89917c; max-width: 560px; }
.page-intro > .btn { margin-top: 22px; }
.recipe-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.recipe-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 280px; padding: 27px; border: 1px solid #e0e4d5; border-radius: 14px; background: #fffef8; transition: border-color .2s, transform .2s, box-shadow .2s; }
.recipe-card:hover { transform: translateY(-3px); border-color: #c5cfb4; box-shadow: 0 10px 25px #45582708; }
.recipe-number { display: inline-block; font-size: 10px; color: #98a189; letter-spacing: 1.5px; margin-bottom: 16px; font-weight: 600; }
.recipe-card h2, .recipe-card h3 { max-width: 70%; font-size: 27px; font-weight: 550; letter-spacing: -.7px; margin-bottom: 12px; line-height: 1.15; }
.recipe-card p { color: #859073; font-size: 12px; line-height: 1.8; max-width: 83%; }
.recipe-stack { display: flex; align-items: center; padding: 28px 7px 20px; }
.recipe-stack > * { position: relative; display: flex; align-items: center; gap: 5px; min-height: 44px; border-radius: 7px; padding: 10px 12px; margin-left: -7px; border: 1px solid #465b2626; background: var(--card-color, #dfe9ce); box-shadow: 0 2px 0 #ffffffc4, 0 3px 0 #4b613328; transform: rotate(-4deg); font-size: 10px; font-weight: 600; }
.recipe-stack > :nth-child(2) { transform: rotate(2deg); }
.recipe-stack > :nth-child(3) { transform: rotate(-1deg); }
.recipe-stack svg { width: 15px; height: 15px; }
.recipe-info { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 20px; border-top: 1px solid #e6eadc; font-size: 11px; color: #94a180; }
.recipe-info > span { display: flex; gap: 6px; align-items: center; }
.recipe-info svg { width: 13px; height: 13px; }
.workspace-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 25px; align-items: start; }
.story-sidebar { border: 1px solid #dfe4d5; background: #eeeee6; border-radius: 12px; padding: 13px; }
.story-sidebar > .btn { width: 100%; }
.story-sidebar > h2 { font-size: 12px; margin: 12px 4px; font-family: 'DM Sans',sans-serif; }
.story-list { display: grid; gap: 7px; margin-top: 15px; }
.story-item { width: 100%; min-width: 0; background: transparent; text-align: left; padding: 15px 12px; border: 1px solid transparent; border-radius: 8px; }
.story-item strong, .story-item > span { display: block; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; line-height: 1.45; }
.story-item small { display: block; color: #9ba48b; font-size: 10px; margin-top: 6px; }
.story-item.active { background: #fffef8; border-color: #dee5d0; box-shadow: 0 2px 3px #42592d04; }
.story-item:hover { background: #f7f8ee; }
.editor { min-width: 0; padding: 27px; border-radius: 14px; border: 1px solid #dfe4d5; background: #fffef8; }
.editor-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 25px; }
.editor-top h2 { font-size: 24px; font-weight: 550; letter-spacing: -.6px; }
.editor-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.editor-top .editor-actions { margin: 0; }
.field { margin-bottom: 22px; }
.field label { display: block; margin-bottom: 9px; font-size: 11px; font-weight: 650; color: #778266; }
.field input, .field textarea, .field select, textarea.card-note { display: block; width: 100%; padding: 13px 15px; border: 1px solid #dce3d0; border-radius: 7px; background: #f9faf3; font-size: 12px; line-height: 1.7; transition: border-color .18s, box-shadow .18s; }
.field input { min-height: 46px; }
.field textarea, textarea.card-note { min-height: 110px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder, textarea.card-note::placeholder { color: #a2ab93; }
.field input:focus, .field textarea:focus, .field select:focus, textarea.card-note:focus { outline: none; border-color: #95a678; box-shadow: 0 0 0 3px #8caa5810; }
.selected-cards { display: grid; gap: 14px; margin-top: 20px; }
.selected-card { position: relative; padding: 19px 18px 18px 51px; border: 1px solid #dfe4d5; border-radius: 9px; background: #f9faf3; border-left: 4px solid var(--card-color, #b5c694); }
.selected-card h3 { font-size: 17px; font-weight: 600; letter-spacing: -.3px; padding-right: 70px; margin-bottom: 8px; }
.selected-card > p { font-size: 11px; line-height: 1.8; color: #899576; padding-right: 40px; }
.step-number { position: absolute; left: 13px; top: 18px; width: 24px; height: 24px; display: grid; place-items: center; font-size: 10px; font-weight: 650; background: var(--card-color, #dfe8cd); color: #4e6140; border-radius: 50%; }
.card-note { margin-top: 14px; }
textarea.card-note { min-height: 92px; background: #fffef9; font-size: 11px; }
.move-actions { position: absolute; top: 8px; right: 8px; display: flex; }
.move-actions .icon-btn { min-width: 30px; width: 30px; height: 38px; }
.move-actions .icon-btn svg { width: 14px; height: 14px; }
.storage-note { display: flex; gap: 6px; align-items: center; font-size: 10px; color: #9aa48a; line-height: 1.7; margin-top: 17px; }
.storage-note svg { width: 12px; height: 12px; }
.progress-track { height: 5px; width: 100%; background: #e9edde; border-radius: 10px; overflow: hidden; margin: 12px 0; }
.progress-fill { height: 100%; border-radius: inherit; background: #a7bd7c; transition: width .35s var(--ease); }

/* The opened card remains a card; instructions sit beside it. */
dialog.modal { color: var(--ink); border: 0; padding: 0; width: min(990px,calc(100vw - 56px)); max-width: none; max-height: calc(100dvh - 60px); border-radius: 18px; overflow-x: hidden; background: var(--paper); box-shadow: 0 25px 110px #17200f38; }
dialog.modal[open] { animation: enter-modal .28s var(--ease) both; }
dialog.modal::backdrop { background: #242c256b; backdrop-filter: blur(5px); }
@keyframes enter-modal { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-shell { min-width: 0; }
.modal-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 24px; border-bottom: 1px solid #e0e5d7; }
.modal-top > span, .modal-top > p { color: #879578; font-size: 11px; }
.modal-top h2 { font-size: 20px; font-weight: 550; }
.modal-top .icon-btn { margin-right: -8px; }
.modal-body { padding: 32px; }
.detail-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); align-items: start; gap: 35px; }
.detail-cover { min-height: 389px; display: flex; flex-direction: column; padding: 25px; background: var(--card-color,var(--yellow)); border: 1px solid #3c4b251f; border-radius: 13px; box-shadow: 0 4px 0 #fffef7, 0 5px 0 #c5c9b6, 0 8px 0 #fffef7, 0 9px 0 #c5c9b64d, 0 18px 26px #46562a0a; }
.detail-cover .card-top { padding-right: 0; }
.detail-cover h2 { font-size: 36px; letter-spacing: -1.3px; line-height: 1.02; font-weight: 600; margin-top: 28px; }
.detail-cover .card-art { height: 185px; margin: 9px 0 3px; }
.detail-cover > p { color: #4c5e39cf; font-size: 12px; line-height: 1.7; margin: 10px 0 20px; }
.detail-cover .card-bottom { margin-top: auto; }
.detail-copy { min-width: 0; }
.detail-copy > .eyebrow { font-size: 9px; margin-bottom: 12px; }
.detail-copy > h2 { font-size: 33px; letter-spacing: -1px; line-height: 1.12; font-weight: 600; margin-bottom: 12px; }
.detail-copy > p { font-size: 12px; color: #879374; line-height: 1.8; }
.detail-tabs { display: flex; align-items: stretch; gap: 18px; border-bottom: 1px solid #dfe5d4; margin: 21px 0; }
.tab { position: relative; min-height: 44px; padding: 10px 0; font-size: 11px; font-weight: 600; background: transparent; color: #97a284; }
.tab.active { color: #587044; }
.tab.active::after { content: ''; position: absolute; bottom: -1px; height: 2px; background: #79965a; left: 0; right: 0; border-radius: 2px; }
.detail-section h3 { font-size: 18px; letter-spacing: -.3px; font-weight: 550; margin: 21px 0 11px; }
.detail-section > p { font-size: 12px; line-height: 1.9; color: #73815f; }
.steps { margin: 15px 0 0; padding: 0; list-style: none; counter-reset: story-step; display: grid; gap: 18px; }
.steps li { position: relative; padding-left: 0; font-size: 12px; line-height: 1.75; color: #707e5e; }
.steps li::before { content: none; }
.steps strong { display: block; color: #536345; font-size: 12px; margin-bottom: 3px; }
.example { padding: 19px 21px; background: #eaf0df; border-left: 3px solid #a6bd83; border-radius: 0 8px 8px 0; color: #647b4c; font-size: 12px; line-height: 1.9; margin-top: 18px; }
.example > strong, .example > h4 { display: block; font-family: 'DM Sans',sans-serif; color: #67814f; font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; margin-bottom: 7px; }
.prompt-box { padding: 19px 20px; border: 1px dashed #b9c8a1; background: #f2f5e9; border-radius: 9px; margin-top: 20px; font-size: 12px; line-height: 1.8; color: #6c8054; }
.prompt-box h4 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.prompt-box .btn { margin-top: 12px; }
.related-cards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.related-cards button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 9px 11px; border: 1px solid #dae3cc; border-radius: 6px; background: #f2f5e9; font-size: 10px; color: #7a8e62; }
.related-cards button:hover { background: #e5ecd9; }
.modal-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 19px 32px; border-top: 1px solid #dfe5d5; background: #f0f2e8; }
.modal-footer > div { display: flex; gap: 9px; align-items: center; }
.modal-footer > p { color: #91a17b; font-size: 10px; }
.flip-stage { perspective: 1200px; }
.flip-inner { position: relative; display: grid; transition: transform .65s var(--ease); transform-style: preserve-3d; }
.flip-stage.flipped .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-back { transform: rotateY(180deg); background: var(--card-color,#bed5ad); border-radius: 13px; padding: 26px; border: 1px solid #3c4b251f; display: flex; flex-direction: column; min-height: 389px; }
.flip-back h3 { font-size: 30px; line-height: 1.13; letter-spacing: -.7px; font-weight: 550; margin: 25px 0 18px; }
.flip-back p { font-size: 12px; line-height: 1.9; color: #52693bd9; }
.flip-back .card-bottom { margin-top: auto; }
.flip-stage + .btn, .flip-stage + .text-link { display: flex; margin: 17px auto 0; }

/* A short guided path into a useful card. */
.guide-progress { display: flex; align-items: center; gap: 6px; margin: 0 0 23px; color: #97a782; font-size: 10px; }
.guide-progress > span { width: 24px; height: 3px; border-radius: 2px; background: #dce4cd; }
.guide-progress > span.active { background: #8ea76b; }
.guide-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 24px 0 12px; }
.guide-option { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 17px 18px; border: 1px solid #dce4cd; border-radius: 10px; text-align: left; background: #fffef8; transition: border-color .2s, background .2s, transform .2s; }
.guide-option > svg { width: 22px; height: 22px; color: #96ae74; }
.guide-option:hover { background: #eef3e3; border-color: #9cb37d; transform: translateY(-2px); }
.guide-option strong { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.guide-option small { display: block; color: #95a481; font-size: 10px; line-height: 1.6; }
.guide-result { padding: 5px 0; }
.guide-result h2 { font-size: 31px; letter-spacing: -.9px; font-weight: 550; margin: 15px 0 13px; }
.guide-result > p { max-width: 540px; font-size: 12px; color: #81926c; line-height: 1.9; }
.guide-result .card-grid { margin: 24px 0; grid-template-columns: repeat(3,minmax(0,1fr)); }
.guide-result .card-open { min-height: 310px; }
.guide-result .card-open h3 { font-size: 23px; }
.guide-result .card-open > .card-art { height: 116px; }
.guide-result > .btn { margin-top: 7px; }
.toast { position: fixed; z-index: 100; left: calc(50% + 112px); bottom: 27px; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 40px); padding: 14px 22px; border: 1px solid #5f7650; border-radius: 10px; background: #425537; color: #f9fbed; box-shadow: 0 10px 35px #30471f29; font-size: 12px; opacity: 0; visibility: hidden; transform: translate(-50%,12px); transition: opacity .2s, transform .2s, visibility .2s; pointer-events: none; }
.toast svg { width: 17px; height: 17px; }
.toast.visible { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 25px 0 5px; margin-top: 38px; border-top: 1px solid #e3e7da; font-size: 9px; color: #9ca58e; line-height: 1.7; }
.footer > span { display: inline-flex; gap: 5px; align-items: center; }
.footer svg { width: 12px; height: 12px; }
.footer a { color: #81966b; text-decoration: underline; text-decoration-color: #c1cfaf; text-underline-offset: 3px; }

/* Wide workspaces preserve comfortable reading widths. */
@media (min-width: 1600px) {
  .topbar { max-width: 1440px; margin: 0 auto; }
  .hero { min-height: 455px; }
  .hero-copy { max-width: 570px; }
  .hero h1 { font-size: 73px; }
  .hero-deck { transform: scale(1.12); }
  .card-open { min-height: 365px; padding: 23px; }
  .card-open h3 { font-size: 28px; }
  .card-open > .card-art { height: 147px; }
  .bookmark { top: 9px; right: 7px; }
}

@media (max-width: 1280px) {
  .app-shell { grid-template-columns: 208px minmax(0,1fr); }
  .sidebar { padding-inline: 17px; }
  .nav-item.active::before { left: -17px; }
  .brand { margin-left: 3px; }
  .brand-text { font-size: 22px; }
  .topbar { padding-inline: 34px; }
  #main { padding-inline: 34px; }
  .hero { grid-template-columns: 1.05fr 1fr; min-height: 400px; }
  .hero h1 { font-size: 54px; letter-spacing: -2.2px; }
  .hero-deck { transform: scale(.94); }
  .card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px 18px; }
  .card-open h3 { font-size: 25px; }
  .card-open { min-height: 345px; }
  .card-open > .card-art { height: 137px; }
  .toast { left: calc(50% + 104px); }
  .workspace-layout { grid-template-columns: 185px minmax(0,1fr); gap: 18px; }
  .editor { padding: 23px; }
  .editor-top { align-items: flex-start; }
  .editor-top h2 { font-size: 21px; }
  .editor-top .editor-actions { gap: 3px; }
  .editor-top .editor-actions .btn { padding-inline: 10px; }
}

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 190px minmax(0,1fr); }
  .sidebar { padding: 29px 13px 20px; }
  .brand { gap: 9px; margin-bottom: 46px; }
  .brand-symbol { width: 32px; height: 35px; border-radius: 8px; }
  .brand-symbol::before { border-radius: 8px; }
  .brand-text { font-size: 20px; }
  .brand-text small { font-size: 8px; letter-spacing: 1.8px; }
  .nav-item { font-size: 11px; gap: 9px; padding-inline: 11px; }
  .nav-item.active::before { left: -13px; }
  .topbar { padding-inline: 28px; height: 76px; }
  #main { padding-inline: 28px; }
  .hero { min-height: 373px; padding-top: 17px; margin-bottom: 28px; gap: 0; }
  .hero h1 { font-size: 46px; letter-spacing: -1.9px; }
  .hero-copy > p { font-size: 12px; max-width: 295px; }
  .hero-actions { gap: 8px; }
  .hero-actions .btn { font-size: 11px; padding-inline: 13px; }
  .hero-deck { width: 280px; transform: scale(.82); margin-left: -10px; }
  .hero-card { left: 34px; }
  .deck-caption { bottom: 21px; font-size: 9px; }
  .hero-meta { gap: 8px; font-size: 9px; }
  .card-grid { gap: 22px 14px; }
  .card-open { min-height: 312px; padding: 17px 15px 13px; }
  .card-open h3 { font-size: 22px; margin-top: 18px; min-height: 48px; }
  .card-open > .card-art { height: 115px; }
  .card-open > p { font-size: 9px; }
  .card-category { font-size: 7px; letter-spacing: .7px; }
  .bookmark { right: 0; top: 3px; }
  .filter-chip { padding-inline: 9px; font-size: 9px; }
  .list-view .card-open { grid-template-columns: 80px minmax(135px,1fr) minmax(150px,1fr); gap: 0 13px; padding-right: 42px; }
  .list-view .card-open > .card-art { width: 80px; }
  .list-view .card-open > p { font-size: 10px; }
  .list-view .card-bottom { display: none; }
  .recipe-card { padding: 22px; }
  .recipe-card h2, .recipe-card h3 { max-width: none; font-size: 25px; }
  .recipe-card p { max-width: none; }
  .recipe-stack { padding-inline: 5px; }
  .recipe-stack > * { padding: 9px 8px; font-size: 9px; }
  .workspace-layout { grid-template-columns: 1fr; }
  .story-sidebar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; }
  .story-sidebar > .btn { width: auto; }
  .story-sidebar > h2 { display: none; }
  .story-list { display: flex; flex: 1; overflow-x: auto; gap: 5px; margin: 0; }
  .story-item { width: 150px; flex-shrink: 0; padding: 9px 12px; }
  .story-item strong, .story-item > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .story-item small { margin-top: 3px; }
  .toast { left: calc(50% + 95px); }
}

@media (max-width: 800px) {
  .app-shell { display: block; }
  .sidebar { position: relative; width: 100%; height: auto; padding: 20px 25px 0; display: grid; grid-template-columns: 1fr auto; border-right: 0; border-bottom: 1px solid #dfe3d4; }
  .brand { grid-column: 1; grid-row: 1; margin: 0 0 20px; }
  .brand-text { font-size: 23px; }
  .brand-symbol { width: 35px; height: 37px; }
  .brand-text small { font-size: 8px; letter-spacing: 2px; }
  .side-label, .sidebar-bottom { display: none; }
  .nav-list { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 15px; overflow-x: auto; scrollbar-width: none; }
  .nav-list::-webkit-scrollbar { display: none; }
  .nav-item { width: auto; flex-shrink: 0; min-height: 47px; padding: 10px 4px 15px; border-radius: 0; font-size: 11px; gap: 7px; }
  .nav-item svg { width: 16px; height: 16px; }
  .nav-item:hover { background: transparent; }
  .nav-item.active { background: transparent; }
  .nav-item.active::before { left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 3px 3px 0 0; }
  .nav-item .badge { min-width: 18px; padding: 2px 4px; font-size: 9px; }
  .topbar { height: 61px; padding-inline: 25px; }
  .top-actions { gap: 10px; }
  #main { padding: 0 25px 26px; }
  .hero { min-height: 350px; padding: 10px 0 29px; }
  .hero h1 { font-size: clamp(42px,6.2vw,51px); }
  .hero-copy > p { max-width: 310px; }
  .hero-deck { transform: scale(.85); }
  .deck-caption { bottom: 17px; }
  .card-grid { gap: 22px 17px; }
  .card-open { padding: 18px 17px 14px; min-height: 325px; }
  .card-open h3 { font-size: 24px; }
  .card-open > .card-art { height: 126px; }
  .card-open > p { font-size: 10px; }
  .footer { margin-top: 32px; }
  .toast { left: 50%; bottom: 22px; }
  dialog.modal { width: calc(100vw - 34px); max-height: calc(100dvh - 38px); }
  .modal-body { padding: 26px; }
  .detail-layout { grid-template-columns: 225px minmax(0,1fr); gap: 24px; }
  .detail-cover { padding: 21px; min-height: 350px; }
  .detail-cover h2 { font-size: 31px; }
  .detail-cover .card-art { height: 152px; }
  .detail-copy > h2 { font-size: 29px; }
  .detail-tabs { gap: 14px; }
  .tab { font-size: 10px; }
  .modal-footer { padding: 17px 26px; }
}

@media (max-width: 620px) {
  .sidebar { padding-inline: 20px; }
  .topbar { padding-inline: 20px; }
  .topbar .locale { display: none; }
  .topbar .btn.small { min-height: 38px; font-size: 10px; padding: 9px 11px; }
  #main { padding-inline: 20px; }
  .hero { grid-template-columns: 1fr; margin-bottom: 26px; padding-top: 18px; min-height: 0; }
  .hero-copy { padding-bottom: 0; max-width: 430px; }
  .hero .eyebrow { font-size: 9px; letter-spacing: 1.4px; }
  .hero h1 { font-size: 53px; line-height: 1.01; letter-spacing: -2px; margin-top: 18px; margin-bottom: 22px; max-width: 400px; }
  .hero-copy > p { max-width: 340px; font-size: 12px; }
  .hero-actions { margin-top: 22px; gap: 9px; }
  .hero-actions .btn { font-size: 12px; padding-inline: 16px; }
  .hero-meta { margin-top: 17px; font-size: 9px; }
  .hero-visual { min-height: 300px; margin-top: 2px; }
  .hero-visual::before { inset: 15px 0 4px; }
  .hero-deck { width: 315px; height: 305px; transform: scale(.83); margin: 0 0 11px; }
  .hero-card { left: 54px; top: 10px; }
  .deck-caption { bottom: -3px; font-size: 9px; }
  .section-head { margin-bottom: 17px; gap: 9px; }
  .section-heading h2, .section-head > h2 { font-size: 24px; }
  .section-head .text-link { font-size: 10px; }
  .section-heading { gap: 7px; }
  .count-pill { padding: 3px 6px; min-width: 23px; font-size: 9px; }
  .library-tools { gap: 8px; margin-bottom: 15px; }
  .searchbox { padding-inline: 11px; gap: 8px; }
  .searchbox input { font-size: 10px; }
  .searchbox kbd { display: none; }
  .filter-row { flex-wrap: nowrap; margin-inline: -20px; padding: 0 20px 5px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-chip { flex-shrink: 0; min-height: 37px; font-size: 10px; padding-inline: 11px; }
  .card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 21px 14px; }
  .card-open { min-height: 300px; padding: 17px 15px 13px; }
  .card-open h3 { font-size: 23px; min-height: 48px; margin-top: 20px; }
  .card-category { font-size: 7px; }
  .card-no { font-size: 7px; }
  .card-open > .card-art { height: 111px; }
  .card-open > p { font-size: 9px; margin-bottom: 12px; }
  .card-bottom { font-size: 7px; gap: 5px; padding-top: 10px; }
  .card-bottom svg { width: 10px; height: 10px; }
  .card-top { padding-right: 17px; }
  .bookmark { top: 2px; right: -3px; }
  .bookmark svg { width: 12px; height: 12px; }
  .list-view .card-open { grid-template-columns: 70px minmax(0,1fr); gap: 0 14px; padding: 13px 39px 13px 12px; min-height: 112px; }
  .list-view .card-top { grid-row: 1; align-self: center; }
  .list-view .card-open > .card-art { grid-row: 1 / 4; width: 70px; height: 70px; }
  .list-view .card-open h3 { grid-row: 2; font-size: 21px; margin-top: 4px; }
  .list-view .card-open > p { grid-row: 3; grid-column: 2; font-size: 9px; line-height: 1.5; margin-top: 5px; }
  .list-view .bookmark { right: -3px; }
  .empty-state { min-height: 270px; padding-inline: 25px; }
  .empty-state h2, .empty-state h3 { font-size: 22px; }
  .empty-state p { font-size: 11px; }
  .page-intro { padding-top: 25px; padding-bottom: 26px; }
  .page-intro h1 { font-size: 37px; }
  .page-intro > p { font-size: 12px; }
  .recipe-grid { grid-template-columns: 1fr; gap: 16px; }
  .recipe-card { min-height: 265px; padding: 23px; }
  .recipe-card p { max-width: 95%; }
  .recipe-stack > * { font-size: 10px; padding: 10px 12px; }
  .editor { padding: 20px 17px; }
  .editor-top { flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
  .editor-top h2 { font-size: 24px; }
  .editor-top .editor-actions { width: 100%; flex-wrap: nowrap; gap: 6px; }
  .editor-top .editor-actions .btn { flex: 1; }
  .story-sidebar { gap: 9px; }
  .story-sidebar > .btn { width: 100%; }
  .story-list { width: 100%; flex-basis: 100%; padding-bottom: 2px; }
  .selected-card { padding: 18px 13px 15px 42px; }
  .step-number { left: 10px; width: 21px; height: 21px; font-size: 9px; }
  .selected-card h3 { font-size: 16px; padding-right: 0; margin-top: 22px; }
  .selected-card > p { padding-right: 0; font-size: 10px; }
  .move-actions { right: 4px; top: 3px; }
  .storage-note { font-size: 9px; align-items: flex-start; }
  .storage-note svg { margin-top: 3px; }
  .footer { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 22px; }
  dialog.modal { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 13px; }
  .modal-top { padding: 10px 20px; }
  .modal-top > span, .modal-top > p { font-size: 10px; }
  .modal-body { padding: 23px 20px; }
  .detail-layout { grid-template-columns: 1fr; gap: 33px; }
  .detail-layout > :first-child { max-width: 263px; width: 100%; margin-inline: auto; }
  .detail-cover { min-height: 359px; padding: 24px; }
  .detail-cover h2 { font-size: 33px; }
  .detail-cover .card-art { height: 157px; }
  .detail-cover > p { font-size: 11px; }
  .detail-copy > h2 { font-size: 31px; }
  .detail-copy > p, .detail-section > p, .steps li { font-size: 12px; }
  .detail-tabs { gap: 22px; }
  .tab { font-size: 11px; }
  .modal-footer { padding: 17px 20px; gap: 9px; }
  .modal-footer > div { flex-wrap: wrap; width: 100%; }
  .modal-footer .btn { flex: 1; font-size: 11px; padding-inline: 12px; }
  .guide-options { grid-template-columns: 1fr; gap: 10px; }
  .guide-option { min-height: 75px; }
  .guide-result h2 { font-size: 28px; }
  .guide-result .card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 12px; }
  .guide-result .card-open { min-height: 295px; padding: 15px 12px; }
  .guide-result .card-open h3 { font-size: 22px; }
  .guide-result .card-open > .card-art { height: 101px; }
  .toast { bottom: 15px; padding: 12px 16px; font-size: 11px; }
}

@media (max-width: 390px) {
  .sidebar { padding-inline: 16px; }
  .nav-list { gap: 11px; }
  .nav-item { font-size: 10px; gap: 5px; }
  .nav-item svg { width: 14px; height: 14px; }
  .nav-item .badge { display: none; }
  .topbar, #main { padding-inline: 16px; }
  .breadcrumb { font-size: 10px; gap: 6px; }
  .hero h1 { font-size: 47px; }
  .hero-actions .btn { font-size: 11px; padding-inline: 13px; }
  .hero-visual { min-height: 288px; }
  .hero-deck { transform: scale(.78); }
  .card-grid { gap: 20px 12px; }
  .card-open { padding: 15px 12px 12px; min-height: 282px; }
  .card-open h3 { font-size: 21px; margin-top: 18px; min-height: 44px; }
  .card-open > .card-art { height: 100px; }
  .card-open > p { font-size: 8.5px; }
  .card-category { font-size: 6px; letter-spacing: .65px; }
  .card-no { font-size: 6px; }
  .card-bottom { font-size: 6.5px; }
  .filter-row { margin-inline: -16px; padding-inline: 16px; }
  .recipe-stack > * { padding-inline: 9px; font-size: 9px; }
  .view-toggle .icon-btn { min-width: 34px; width: 34px; }
}

/* Compact labels still have comfortable keyboard and touch targets. */
.btn.small, .filter-chip, .text-link, .related-cards button,
.topbar .btn.small, .move-actions .icon-btn { min-height: 44px; }
.view-toggle .icon-btn { min-width: 44px; width: 44px; height: 44px; }
.move-actions .icon-btn { min-width: 44px; width: 44px; height: 44px; }
.library-tools .searchbox { min-height: 52px; }
.library-tools .searchbox input { height: 50px; }

@media (hover: none) {
  .tactic-card:hover, .tactic-card:nth-child(even):hover, .btn:hover, .recipe-card:hover, .guide-option:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hero-deck:hover .hero-card-back { transform: rotate(-17deg) translate(-44px,12px); }
  .hero-deck:hover .hero-card-middle { transform: rotate(16deg) translate(44px,8px); }
  .hero-deck:hover .hero-card-front { transform: rotate(-4deg); }
}

@media print {
  .sidebar, .topbar, .hero, .library-tools, .filter-row, .bookmark, .editor-actions, .move-actions, .footer, .toast { display: none !important; }
  body { background: #fff; color: #000; }
  .app-shell, .workspace-layout { display: block; }
  #main { padding: 0; }
  .story-sidebar { display: none; }
  .editor { border: 0; padding: 0; }
  .selected-card { break-inside: avoid; background: #fff; }
  .card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .tactic-card { break-inside: avoid; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}