/* v22: shared LangNation identity. Palette verified against langnation.com
   and D:/Project_All/LangNation_Web/public/css/site.css (cream ground). */
:root { --brand-gold:#D4AF37; --brand-gold-ink:#796520; --brand-navy:#0B2D52; }
[data-theme="dark"] { --brand-gold-ink:#D4AF37; }
.dc-logo-img { width:56px; height:56px; object-fit:contain; border-radius:50%; flex-shrink:0; }
.dc-brand { gap:12px; }
.dc-brand:has(.dc-logo-img)::after,
a:has(> .dc-logo-img)::after {
  content:"LangNation\A Dictionary"; white-space:pre;
  font-family:'Fraunces',Georgia,serif; font-size:20px; line-height:1.2;
  font-weight:600; letter-spacing:-0.02em; color:var(--ink);
}
a:has(> .dc-logo-img) { display:inline-flex; align-items:center; gap:12px; }
.dc-theme { border-radius:8px; }
.dc-title em { color:var(--brand-gold-ink); }
.dc-eyebrow { color:var(--brand-gold-ink); }
.dc-sticky { border-bottom-color:var(--line); }
.dc-foot { border-top:1px solid var(--line); padding-top:20px; }
.dc-foot-cta { color:var(--brand-gold-ink); }
@media(max-width:640px) {
 .dc-logo-img { width:42px; height:42px; }
 .dc-brand { gap:8px; }
 .dc-brand:has(.dc-logo-img)::after,
 a:has(> .dc-logo-img)::after { font-size:15px; }
}
@media(max-width:380px) {
 .dc-brand:has(.dc-logo-img)::after,
 a:has(> .dc-logo-img)::after { font-size:13px; }
}@media(max-width:380px) {
 .dc-top { flex-wrap:wrap; gap:12px; }
 .dc-header-actions { margin-left:auto; }
}
/* School promotion: school artwork stays distinct from the dictionary seal. */
.school-logo { display:inline-flex; align-items:center; flex-shrink:0; }
.school-logo img { display:block; width:180px; max-width:100%; height:auto; }
.school-logo .school-logo-dark { display:none; }
[data-theme="dark"] .school-logo .school-logo-light { display:none; }
[data-theme="dark"] .school-logo .school-logo-dark { display:block; }
.study-menu-brand { height:auto; margin:0; }
.study-menu-brand img { width:96px; }
.study-menu-link .study-menu-label { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:0; font-weight:600; }
.school-promo { display:flex; align-items:center; gap:24px; margin-top:36px; padding:24px; border:1px solid var(--line); position:relative; border-radius:14px; background:var(--card); text-align:left; }
.school-promo-copy { flex:1; min-width:0; }
.school-promo-eyebrow { color:var(--brand-gold-ink); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin:0 0 9px; }
.school-promo h2 { font-family:'Fraunces',Georgia,serif; color:var(--ink); font-size:23px; line-height:1.2; margin:0 0 10px; }
.school-promo p:not(.school-promo-eyebrow) { font-size:13px; color:var(--muted); line-height:1.65; margin:0; }
.school-promo-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:18px; }
.school-promo-actions a { font-size:12px; font-weight:600; text-decoration:none; }
.school-promo-primary { background:var(--rust); color:#fff; padding:11px 14px; border-radius:8px; }
[data-theme="dark"] .school-promo-primary { color:#06101f; }
.school-promo-secondary { color:var(--ink); text-underline-offset:4px; }
.school-promo-actions a:hover { text-decoration:underline; }
.school-promo-actions a:focus-visible { outline:2px solid var(--brand-gold-ink); outline-offset:4px; }
@media(max-width:640px) {
 .school-promo { flex-direction:column; align-items:flex-start; padding:20px; gap:18px; }
 .school-promo > .school-logo { order:-1; }
 .school-promo > .school-logo img { width:156px; }
 .school-promo h2 { font-size:21px; }
}
@media print { .school-promo { display:none; } }

/* German flag accent follows the rounded top edge of the school card. */
.school-promo::before { content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:14px; border-radius:14px 14px 0 0; pointer-events:none; background:linear-gradient(to right,#000 0%,#000 33.333%,#EF1B0C 33.333%,#EF1B0C 66.667%,#FFCE00 66.667%,#FFCE00 100%) top / 100% 3px no-repeat; }

/* PWA update notice stays within phone safe areas and never reloads a study session by itself. */
#ln-update { position:fixed; z-index:10000; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); width:min(440px,calc(100% - 32px)); box-sizing:border-box; display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:14px; border:1px solid #CFC0A2; border-radius:14px; background:#FFFCF5; color:#0B2D52; box-shadow:0 6px 26px #0003; font:14px system-ui,sans-serif; }
#ln-update span { flex:1 1 150px; }
#ln-update button { min-height:44px; padding:8px 12px; border:1px solid #0B2D52; border-radius:8px; background:#0B2D52; color:white; cursor:pointer; }
#ln-update button:last-child { background:transparent; color:#0B2D52; }
.dc-fb-error { flex-basis:100%; color:var(--ink); font-size:13px; margin:6px 0; }
/* Audit: real long German words must wrap instead of being hidden on phones. */
.dc-meta { flex-wrap:wrap; }
.dc-meta > b { min-width:0; overflow-wrap:anywhere; }
.dc-tools { flex-shrink:0; margin-left:auto; }
.dc-hero-word, .dc-hero-meaning, .dc-word, .dc-meaning-german, .dc-meaning-english,
.dc-family-link, .dc-family-forms, .dc-syn, .dc-qprompt b, .dc-flashcard b { min-width:0; max-width:100%; overflow-wrap:anywhere; }
.dc-term { min-width:0; }
@media(max-width:600px) {
 .dc-meta > b { flex:1 1 130px; }
 .dc-meta .ln { display:none; }
 .dc-hero-actions { position:static; width:max-content; margin:0 0 12px auto; grid-template-columns:44px 44px 30px; grid-template-rows:44px; }
 .dc-hero-actions .dc-speak-action, .dc-hero-actions .dc-fav-action { width:44px; min-width:44px; height:44px; }
 .dc-hero-word { padding-right:0; font-size:clamp(25px,7vw,34px); }
 .dc-fb { flex-wrap:wrap; }
 .dc-tool, .dc-fb-btn, .dc-fb-link { min-height:44px; }
 .dc-family-link, .dc-syn { white-space:normal; }
 .ln-input, .ln-overlay input, .ln-overlay textarea, #amt-text, .dc-fb-text { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) {
 .dc-entry, .dc-meaning-line { animation:none; opacity:1; transform:none; }
 .dc-root, .dc-theme { transition:none; }
}

/* Reserve scrollable space so the update notice cannot hide the final controls. */
body.ln-update-visible { padding-bottom:calc(160px + env(safe-area-inset-bottom,0px)); }
@media print { #ln-update { display:none; } body.ln-update-visible { padding-bottom:0; } }

/* Restore the original horizontal dictionary wordmark without circular clipping. */
.dc-logo-img { width:210px; height:auto; max-width:100%; border-radius:0; object-fit:contain; }
.dc-brand:has(.dc-logo-img)::after, a:has(> .dc-logo-img)::after { content:none; }
@media(max-width:640px) { .dc-logo-img { width:165px; height:auto; } }
@media(max-width:380px) { .dc-logo-img { width:150px; } }
/* Live brand: cropped crest with sharp, selectable lettering. */
ln-brand { display:inline-flex; align-items:center; gap:11px; max-width:100%; color:var(--ink,#0B2D52); text-align:left; vertical-align:middle; }
ln-brand .ln-brand-crest { display:block; flex:0 0 auto; }
ln-brand .ln-crest { display:block; width:46px; height:52px; object-fit:contain; border-radius:0; }
ln-brand .ln-crest-dark { display:none; }
[data-theme="dark"] ln-brand .ln-crest-light { display:none; }
[data-theme="dark"] ln-brand .ln-crest-dark { display:block; }
ln-brand .ln-brand-copy { display:flex; flex-direction:column; min-width:0; font-family:"Fraunces",Georgia,"Times New Roman",serif; line-height:1.1; }
ln-brand .ln-brand-name { font-size:1.72rem; font-weight:600; letter-spacing:-.33px; color:#0F1F47; }
ln-brand .ln-brand-product { font-size:16px; font-weight:500; letter-spacing:-.012em; margin-top:1px; color:#796520; }
.dc-home { text-decoration:none; max-width:100%; }
.dc-top { flex-wrap:wrap; gap:14px; }
.dc-header-actions { margin-left:auto; }
ln-brand.school-logo .ln-crest { width:46px; height:52px; }
ln-brand.school-logo .ln-brand-name { font-size:1.72rem; white-space:nowrap; }
ln-brand.school-logo .ln-brand-product { font-size:.68rem; letter-spacing:.22px; white-space:nowrap; }
ln-brand .ln-brand-registered { font-size:.35em; vertical-align:super; margin-left:2px; }
 [data-theme="dark"] ln-brand.school-logo .ln-brand-product { color:#D4AF37; }
ln-brand.school-logo .ln-brand-slogan { display:none; }
ln-brand.study-menu-brand .ln-crest { width:30px; height:34px; }
ln-brand.study-menu-brand .ln-brand-copy { display:none; }
ln-brand.study-menu-brand { gap:0; }
@media(max-width:640px) {
 ln-brand { gap:9px; }
 ln-brand .ln-crest { width:38px; height:43px; }
 ln-brand .ln-brand-name { font-size:22px; }
 ln-brand .ln-brand-product { font-size:14px; }
}
@media(max-width:360px) {
 ln-brand .ln-crest { width:37px; height:42px; }
 ln-brand .ln-brand-name { font-size:21px; }
 ln-brand .ln-brand-product { font-size:14px; }
}

/* School header reference: retain readable colours on dark backgrounds. */
[data-theme="dark"] ln-brand .ln-brand-name { color:#E0E8F8; }