/* 学新词 and 复习 layout: the word left-aligned with no card, a slim top bar (n/N + tools), plain meaning cards and
   text buttons with a short coloured line under them. Only layout and type change here — colours, the wood skin and
   its decorations stay as they are. Loaded after reference.css so these rules win at the same specificity. */

/* —— 学新词 —— */
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-top { min-height:0; padding:max(12px, env(safe-area-inset-top)) 10px 0; align-items:center; gap:2px; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-top > [data-act="close"] { position:static; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-top .sunny-learn-title { display:none !important; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-top .count { position:static; margin:0 auto 0 2px; font:650 15px var(--font); color:var(--ink-2); }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-tools { position:static; display:flex; align-items:center; gap:0; padding:0; border:0; background:none; box-shadow:none; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-tools .icon-btn { width:38px; height:38px; color:var(--ink-2); }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-tools .icon-btn:disabled { opacity:.35; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-tools .text-btn { width:auto; padding:0 10px; font-size:16px; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-bar { display:none; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-body { display:flex; flex-direction:column; padding:26px 22px 16px; }

/* the word: big, left-aligned, no card */
html[data-theme="sunny"] body[data-skin="wood"] #view .sunny-term-card { margin:0; padding:0; min-height:0; border:0; border-radius:0; background:none; box-shadow:none; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-term { justify-content:flex-start; margin:0; font:800 clamp(36px, 11vw, 48px)/1.12 var(--font); letter-spacing:-.5px; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-phon { justify-content:flex-start; margin-top:8px; font:15px var(--serif); color:var(--muted); }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-phon button { height:24px; padding:0 4px; font-size:0; border:0; background:none; color:var(--sky); }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-phon button svg.i { width:20px; height:20px; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-tip, html[data-theme="sunny"] body[data-skin="wood"] #view .ln-tip:not(.last) { display:block; margin:12px 0 0; font-size:12.5px; color:var(--muted); }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-tip.last { color:var(--accent); }

/* four meanings: part of speech small on top, the meaning below; no letters, no radio circles; in the lower half */
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-options { margin-top:clamp(28px, 9vh, 84px); padding-top:0; gap:12px; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-options::before { content:none; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-option { min-height:64px; padding:10px 16px; gap:3px; border-radius:16px; align-content:center; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-option::before, html[data-theme="sunny"] body[data-skin="wood"] #view .ln-option::after { content:none; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-option small { display:block; font-size:12px; line-height:1.2; color:var(--muted); }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-option span { font-size:16px; line-height:1.45; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-option b { font:700 16px var(--font); }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-option:is(.right, .wrong) small { color:inherit; opacity:.75; }

/* the answer: meanings under the word, then the example and collocation cards */
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-senses { display:grid; gap:4px; margin:14px 0 4px; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-sense { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:0; font-size:16px; line-height:1.5; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-sense .pos { margin:0; min-width:28px; font:italic 14px var(--serif); color:var(--muted); }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-sense .main { font-weight:700; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-card { margin-top:12px; padding:14px 16px; border-radius:16px; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-card h5 { margin:12px 0 0; font-size:11.5px; order:2; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-card:has(.ln-coll) { display:flex; flex-direction:column; }

/* text buttons at the bottom, each with a short coloured line */
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-actions { position:relative; left:auto; bottom:auto; width:100%; max-width:620px; margin:0 auto; padding:4px 16px max(18px, env(safe-area-inset-bottom)); gap:6px; flex:none; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-actions button { position:relative; height:54px; border:0; border-radius:14px; background:none; box-shadow:none; color:var(--ink); font:700 17px var(--font); }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-actions button::after { content:""; position:absolute; left:50%; bottom:8px; width:18px; height:3px; margin-left:-9px; border-radius:3px; background:var(--tone, var(--accent)); }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-actions :is(.yes, .primary) { --tone:var(--good); }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-actions :is(.no, [data-act="show"]) { --tone:var(--again); }

/* —— 复习 —— */
html[data-theme="sunny"] body[data-skin="wood"] #view .study-bar { display:none; }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-top .count { font:650 15px var(--font); color:var(--ink-2); }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-body { padding:26px 22px 12px; }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-term { margin:0; font:800 clamp(36px, 11vw, 48px)/1.12 var(--font); letter-spacing:-.5px; }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-phon { margin-top:8px; font:15px var(--serif); }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-phon button { height:24px; padding:0 4px; font-size:0; border:0; background:none; }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-phon button svg.i { width:20px; height:20px; }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-actions { gap:6px; }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-actions button,
html[data-theme="sunny"] body[data-skin="wood"] #view .study-actions .next,
html[data-theme="sunny"] body[data-skin="wood"] #view .study-actions .next.again { height:54px; border:0; border-radius:14px; background:none; box-shadow:none; color:var(--ink); font:700 17px var(--font); }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-actions button::after { display:block; }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-actions .next { --tone:var(--good); }

html[data-theme="sunny"] body[data-skin="wood"] #view .study-top, html[data-theme="sunny"] body[data-skin="wood"] #view .study-body,
html[data-theme="sunny"] body[data-skin="wood"] #view .study-hint, html[data-theme="sunny"] body[data-skin="wood"] #view .study-actions { position:relative; z-index:2; }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-hint { padding:0 22px 8px; text-align:center; }
/* the review answer: meanings under the word in the same type as 学新词's answer */
html[data-theme="sunny"] body[data-skin="wood"] #view .study-answer { margin-top:14px; }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-meanings { gap:4px; font:700 16px/1.5 var(--font); }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-meanings .pos { min-width:28px; font:italic 400 14px var(--serif); color:var(--muted); }

/* —— 雾化: the pages keep their own warm background; a soft white mist drifts over it, the room
   decorations are softened, and the cards are frosted glass —— */
html[data-theme="sunny"] body[data-skin="wood"] #view :is(.ln, .study) { overflow:hidden; }
html[data-theme="sunny"] body[data-skin="wood"] #view .scene-fog { display:block; position:absolute; inset:-80px; z-index:0; pointer-events:none;
  background:
    radial-gradient(44% 30% at 20% 22%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(40% 28% at 80% 46%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(48% 30% at 32% 76%, rgba(255,253,249,.6), transparent 72%);
  filter:blur(28px); animation:scene-fog-drift 26s ease-in-out infinite alternate; }
@keyframes scene-fog-drift { from { transform:translate3d(-14px, -8px, 0) scale(1.02); } to { transform:translate3d(14px, 10px, 0) scale(1.07); } }
@media (prefers-reduced-motion:reduce) { html[data-theme="sunny"] body[data-skin="wood"] #view .scene-fog { animation:none; } }
/* no room decorations (lamp, vase, stool) on these two pages: just the warm background and the mist */
html[data-theme="sunny"] body[data-skin="wood"] #view :is(.ln, .study)::before, html[data-theme="sunny"] body[data-skin="wood"] #view :is(.ln, .study)::after,
html[data-theme="sunny"] body[data-skin="wood"] #view:is([data-screen="learn"], [data-screen="study"])::before,
html[data-theme="sunny"] body[data-skin="wood"] #view:is([data-screen="learn"], [data-screen="study"])::after { content:none; display:none; }
/* frosted cards: see-through, blurring what is behind them */
html[data-theme="sunny"] body[data-skin="wood"] #view :is(.ln-option, .ln-card, .study-card) { background:rgba(255,252,246,.55); border-color:rgba(255,255,255,.7);
  box-shadow:0 4px 14px rgba(120,85,50,.08); -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15); }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-card:has(.study-coll) { background:rgba(240,247,234,.6); }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-option.right { background:rgba(226,240,218,.82); border-color:var(--sage); }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-option.wrong { background:rgba(253,226,224,.85); border-color:#E06B6B; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-option.dim { opacity:.5; }

/* —— the answer (复习 after rating, 学新词's card): meanings as lines under the word, the example card with its sound
   button in the bottom corner, the collocations as plain lines with their label as a tab at the bottom —— */
html[data-theme="sunny"] body[data-skin="wood"] #view .study-check { width:16px; height:16px; align-self:flex-start; margin-top:6px; }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-check svg.i { width:10px; height:10px; }
html[data-theme="sunny"] body[data-skin="wood"] #view :is(.study-meanings > div, .ln-sense) { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; font:400 16px/1.6 var(--font); }
html[data-theme="sunny"] body[data-skin="wood"] #view :is(.study-meanings, .ln-sense) .pos { min-width:0; margin:0; font:400 14.5px var(--font); font-style:normal; color:var(--ink-2); }
html[data-theme="sunny"] body[data-skin="wood"] #view :is(.study-meanings, .ln-sense) .main { font-weight:700; }
html[data-theme="sunny"] body[data-skin="wood"] #view :is(.study-meanings, .ln-sense) .alt { text-decoration:underline dotted color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset:5px; }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-answer { gap:12px; }
/* example card: no heading, sound button bottom-right */
html[data-theme="sunny"] body[data-skin="wood"] #view .study-examples { position:relative; padding:14px 16px 38px; }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-example-heading { margin:0; }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-example-heading h5 { display:none; }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-example-heading .icon-btn { position:absolute; right:8px; bottom:6px; width:30px; height:30px; color:var(--ink-2); }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-example-heading .icon-btn svg.i { width:18px; height:18px; }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-examples .study-example p[lang="en"], html[data-theme="sunny"] body[data-skin="wood"] #view .ln-ex p { font:400 16px/1.6 var(--font); }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-examples .study-example p.zh, html[data-theme="sunny"] body[data-skin="wood"] #view .ln-ex .zh { font:400 14px/1.6 var(--font); color:var(--ink-2); }
/* collocation card: plain lines, label as a tab at the bottom; it takes the room left above the buttons */
html[data-theme="sunny"] body[data-skin="wood"] #view .study-body { display:flex; flex-direction:column; }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-answer { flex:1; display:flex; flex-direction:column; }
html[data-theme="sunny"] body[data-skin="wood"] #view :is(.study-colls, .ln-card:has(.ln-coll)) { flex:1; display:flex; flex-direction:column; min-height:150px; background:rgba(255,252,246,.55); border-color:rgba(255,255,255,.7); }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-body:has(.ln-senses) .ln-card:has(.ln-coll) { margin-bottom:4px; }
html[data-theme="sunny"] body[data-skin="wood"] #view :is(.study-coll, .ln-coll) { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
html[data-theme="sunny"] body[data-skin="wood"] #view :is(.study-coll, .ln-coll) li { font:400 15.5px/1.5 var(--font); }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-coll li::before { content:none; }
html[data-theme="sunny"] body[data-skin="wood"] #view .study-tabs { margin-top:auto; padding-top:14px; }
html[data-theme="sunny"] body[data-skin="wood"] #view :is(.study-tabs h5, .ln-card:has(.ln-coll) h5) { display:inline-block; order:2; margin:auto 0 0; padding:4px 10px; border-radius:8px;
  background:rgba(120,90,60,.1); color:var(--ink-2); font:600 12px var(--font); letter-spacing:0; align-self:flex-start; }
html[data-theme="sunny"] body[data-skin="wood"] #view .ln-card:has(.ln-coll) .ln-coll { margin-bottom:14px; }

/* Long answers scroll inside the body instead of squeezing the word heading to zero height. */
html[data-theme="sunny"] body[data-skin="wood"] #view :is(.study-body, .ln-body) > * { flex-shrink:0; }
/* The night theme uses inline meanings, so keep a separator between the split meanings. */
html:not([data-theme="sunny"]) #view :is(.study-meanings, .ln-sense) .alt::before { content:"；"; }

/* —— 首页: the frosted boxes over the photo use the warm cream of the rest of the app instead of dark smoked glass —— */
html[data-theme="sunny"] #view .home .home-glass, html[data-theme="sunny"] #view .home .home-card {
  border: 1px solid rgba(255,244,228,.75); background: rgba(255,238,215,.6); color: var(--ink, #3b2a1e); text-shadow: none;
  box-shadow: 0 8px 24px rgba(70,45,20,.16); -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25); }
html[data-theme="sunny"] #view .home .home-glass svg.i { color: var(--ink-2, #6b5444); }
html[data-theme="sunny"] #view .home .home-day span, html[data-theme="sunny"] #view .home .home-record small { color: var(--ink-2, #6b5444); opacity: 1; }
html[data-theme="sunny"] #view .home .home-card .num, html[data-theme="sunny"] #view .home .home-card span, html[data-theme="sunny"] #view .home .home-tasks b { color: #b8722f; }
html[data-theme="sunny"] #view .home .home-card span.done { color: #5f8a4f; }
/* the tab bar on the photo: the same cream frost */
html[data-theme="sunny"] .tabbar.on-scene { border-top: 1px solid rgba(255,244,228,.65); background: rgba(255,238,215,.7); color: var(--ink-2, #6b5444);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
/* the active tab on the photo: the caramel accent (white was lost on the cream frost) */
html[data-theme="sunny"] .tabbar.on-scene a[aria-current="page"] { color: #b8722f; opacity: 1; }

/* —— 单词本 / 写作 / 我的: the same tab bar as 首页 — full width and flat, the warm cream frost, no pill behind the
   current tab, which is marked by the caramel colour only —— */
@media (max-width: 899px) {
  html[data-theme="sunny"] body[data-skin="wood"] { --tabbar-h: 62px; }
  html[data-theme="sunny"] body[data-skin="wood"] .tabbar { width: auto; left: 0; right: 0; transform: none; border: 0; border-radius: 0;
    border-top: 1px solid rgba(255,244,228,.65); background: rgba(255,238,215,.7); box-shadow: none; padding: 0 0 env(safe-area-inset-bottom);
    -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
  html[data-theme="sunny"] body[data-skin="wood"] .tabbar a { height: 52px; margin: 0; border-radius: 0; background: none; font-size: 11px; color: var(--ink-2, #6b5444); opacity: .6; }
  html[data-theme="sunny"] body[data-skin="wood"] .tabbar a[aria-current="page"] { height: 52px; margin: 0; border-radius: 0; background: none; color: #b8722f; opacity: 1; }
  html[data-theme="sunny"] body[data-skin="wood"] .tabbar svg.i { width: 23px; height: 23px; stroke-width: 2; }
}