/* Shared Lantern components. Page-specific layouts remain in their own stylesheets. */
:root,:root[data-density]{--radius:6px;--control-radius:4px;--page-width:1400px;--page-gutter:clamp(16px,3vw,40px);--control-height:calc(2.65rem * var(--scale,1));--motion:140ms;--motion-ease:cubic-bezier(.2,.7,.2,1)}
:root[data-size="small"]{--scale:.92}:root[data-size="normal"]{--scale:1}:root[data-size="large"]{--scale:1.12}:root[data-size="xlarge"]{--scale:1.28}
:root[data-density="compact"]{--gap:12px;--pad:16px;--control-height:calc(2.4rem * var(--scale,1))}
:root[data-density="comfortable"]{--gap:18px;--pad:22px}
:root[data-density="field"]{--gap:24px;--pad:26px;--control-height:calc(2.85rem * var(--scale,1))}
html{scroll-behavior:auto;scrollbar-gutter:stable}
body{background:var(--bg);color:var(--text);font-family:var(--font,Arial,sans-serif);font-size:calc(1rem * var(--scale,1));line-height:1.55;-webkit-font-smoothing:antialiased}
body [hidden],body .hidden{display:none!important}
button,input,select,textarea{font-family:inherit}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button,a,select,input,textarea{transition:background-color var(--motion) var(--motion-ease),border-color var(--motion) var(--motion-ease),color var(--motion) var(--motion-ease)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--focus,var(--accent))!important;outline-offset:3px;box-shadow:none!important}
a{color:var(--link);text-underline-offset:.18em}
h1,h2,h3,h4{color:inherit;text-wrap:balance;overflow-wrap:break-word}
p{overflow-wrap:break-word}
img,video,canvas,svg{max-width:100%}
:is(.panel,.card,.source-card,.library-item,.home-app,.settings-drawer,.drawer-section,.work-hero,.work-content,.work-contents){background:var(--card);color:var(--card-text,var(--text));border-color:var(--border);border-radius:var(--radius);box-shadow:none;text-shadow:none;--muted:var(--card-muted);--link:var(--card-link)}
:where(.card,.panel,.library-item,.source-card) p,:where(.card,.panel) .muted{color:var(--card-muted,var(--muted))}
:where(.muted,.note,.subtitle,.source-desc){color:var(--muted)}
:where(.panel,.card,.source-card){min-width:0}
:where(.card,.source-card):hover{box-shadow:none;transform:none}
.primary-card::after{display:none}
.container:not(.maps-container){width:100%;max-width:var(--page-width)!important;margin-inline:auto;padding:clamp(20px,3vw,40px) var(--page-gutter)!important}
.container:not(.maps-container)>.grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.container :where(.grid,.card-actions,.section-head,.reader-actions)>*{min-width:0}
main h1,.getter-page h1{font-size:calc(clamp(1.7rem,2.5vw,2.5rem) * var(--scale,1))!important;line-height:1.15;letter-spacing:-.025em;font-weight:550}
main h2{line-height:1.25;letter-spacing:-.015em}
.section-head{align-items:center;gap:16px;flex-wrap:wrap}
.section-head :where(h2,h3){margin:0}
.footer{max-width:var(--page-width);padding-inline:var(--page-gutter);color:var(--muted)}
/* The top bar uses one row until the search field needs its own row. */
.topbar{background:var(--bg);border-bottom:1px solid var(--border);box-shadow:none;backdrop-filter:none}
.topbar .nav-inner{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;flex-wrap:wrap;gap:12px;max-width:none;padding:10px var(--page-gutter)!important}
.topbar .right-tools{display:contents!important}
.topbar .nav-drawer-toggle{order:0;flex:0 0 auto}
.topbar .brand{order:1;flex:0 0 auto;min-width:0;white-space:nowrap;font-size:calc(1rem * var(--scale,1));text-shadow:none}
.topbar .top-search{order:2;flex:1 1 16rem;min-width:0;max-width:none;width:auto;margin:0;display:flex}
.topbar .top-search input{width:100%;min-width:0;margin:0;min-height:var(--control-height);padding:10px 13px;border:1px solid var(--border);border-radius:var(--control-radius);background:var(--input);color:var(--input-text,var(--text));box-shadow:none;font-size:calc(.92rem * var(--scale,1))}
.topbar .settings-control{order:3;flex:0 0 auto;margin-left:auto}
.getter-page .shell{box-sizing:border-box;width:100%;max-width:var(--page-width);padding:clamp(20px,3vw,40px) var(--page-gutter);margin-inline:auto}
:is(.panel,.card,.btn,.icon-btn,.tab,.filter,.theme-picker-button,.input,select,textarea,.top-search input){background-image:none!important;box-shadow:none!important;text-shadow:none!important}
/* Controls share geometry. Component-specific grids decide their widths. */
:is(.btn,.icon-btn,.tab,.filter,.theme-picker-button,.library-topic,.mode,.refresh,.status-refresh,.crumb,.place,.start,.browser-sort){border-radius:var(--control-radius)!important;box-shadow:none;text-shadow:none;transform:none}
:is(.btn,.tab,.filter,.theme-picker-button,.library-topic){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control-height);max-width:100%;padding:10px 14px;line-height:1.3;white-space:normal;overflow-wrap:break-word;font-size:calc(.9rem * var(--scale,1));font-weight:550;text-decoration:none}
:is(.btn:not(.secondary),button.primary){background:var(--accent)!important;color:var(--accent-text)!important;border:1px solid var(--accent)}
:is(.btn.secondary,.icon-btn,.tab:not(.active),.filter:not(.active),.theme-picker-button){background:var(--button)!important;color:var(--button-text,var(--text))!important;border:1px solid var(--border)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--control-height);height:var(--control-height);min-width:var(--control-height);min-height:var(--control-height);padding:9px;line-height:1}
.icon-btn svg{width:24px;height:24px;flex:0 0 24px}
:is(.btn,.icon-btn,.tab,.filter,.theme-picker-button):hover{border-color:var(--focus,var(--accent));box-shadow:none;transform:none}
:is(.tab.active,.filter.active,.library-topic[aria-pressed="true"],.getter-page .mode.active,.getter-page .place.current){background:var(--accent)!important;color:var(--accent-text)!important;border-color:var(--accent)!important;box-shadow:none}
:is(.tab.active,.filter.active,.library-topic[aria-pressed="true"])>*{color:inherit!important}
:is(.btn.danger,button.danger){background:var(--danger-bg)!important;color:var(--danger-fg)!important;border-color:var(--danger-border,var(--danger))}
button:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
:is(.input,select,textarea,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])){max-width:100%;min-width:0;min-height:var(--control-height);border:1px solid var(--border);border-radius:var(--control-radius)!important;background:var(--input);color:var(--input-text,var(--text));box-shadow:none;padding:10px 12px;line-height:1.35;font-size:calc(.95rem * var(--scale,1))}
input::placeholder,textarea::placeholder{color:var(--input-muted,var(--muted));opacity:1}
input[type="checkbox"],input[type="radio"],input[type="range"]{accent-color:var(--accent)}
input[type="checkbox"],input[type="radio"]{width:18px;height:18px;flex:0 0 18px}
label{min-width:0}
select{cursor:pointer;white-space:nowrap;text-overflow:ellipsis}
textarea{resize:vertical}
:is(.card-actions,.reader-actions,.toolbar){align-items:center;gap:10px}
.card-actions>.btn{flex:0 1 auto;width:auto}
:is(.chip,.badge,.count){border:1px solid var(--border);border-radius:var(--control-radius);background:var(--card2);color:var(--card-text,var(--text));box-shadow:none;font-size:calc(.76rem * var(--scale,1));line-height:1.35;padding:3px 7px;white-space:normal}
:is(.badge.ready,.badge.usable,.badge.success){background:var(--success-bg);color:var(--success-fg);border-color:var(--success-border,var(--success))}
:is(.badge.partial,.badge.stub,.badge.warning){background:var(--warning-bg);color:var(--warning-fg);border-color:var(--warning-border,var(--warning))}
:is(.badge.danger,.badge.missing,.badge.error){background:var(--danger-bg);color:var(--danger-fg);border-color:var(--danger-border,var(--danger))}
.empty{border:1px dashed var(--border);border-radius:var(--radius);color:var(--muted);padding:var(--pad);background:transparent}
/* Navigation and appearance share the same quiet surfaces as the main pages. */
.settings-drawer{background:var(--card);color:var(--card-text,var(--text));border-color:var(--border);box-shadow:0 12px 32px #0002;--muted:var(--card-muted);--link:var(--card-link)}
/* Navigation is one continuous section list; only the current page gets a band. */
html body > .main-nav.nav-drawer-panel {
  background: var(--card);
  color: var(--card-text);
  border-right: 1px solid var(--border);
  border-radius: 0 !important;
  box-shadow: 18px 0 46px #0005;
  padding: 0 !important;
  gap: 0 !important;
  --nav-divider: color-mix(in srgb, var(--border) 38%, var(--card));
}
html body > .main-nav.nav-drawer-panel .nav-order-row {
  margin: 0;
  border-bottom: 1px solid var(--nav-divider);
}
html body > .main-nav.nav-drawer-panel .nav-link {
  background: transparent;
  color: var(--card-text);
  border: 0;
  border-radius: 0 !important;
  box-shadow: none;
  min-height: 52px !important;
  padding: 14px 18px !important;
}
html[data-theme] body > .main-nav.nav-drawer-panel .nav-link { border: 0 !important; border-radius: 0 !important; }
html body > .main-nav.nav-drawer-panel .nav-link:hover {
  background: var(--card2);
  color: var(--card-text);
  box-shadow: inset 3px 0 var(--card-focus);
  transform: none;
}
html body > .main-nav.nav-drawer-panel .nav-link.active {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: none;
}
html body > .main-nav.nav-drawer-panel .nav-link .nav-item-icon { color: inherit; }
html body > .main-nav.nav-drawer-panel .nav-link:focus-visible { outline-offset: -3px; }
/* The footer stays in flow so it cannot cover rows on a short screen. */
html body > .main-nav.nav-drawer-panel .nav-order-toolbar {
  margin: auto 0 0;
  padding: 8px 12px;
  border: 0;
  background: var(--card);
  color: var(--card-text);
  justify-content: flex-end;
  gap: 6px;
}
html body > .main-nav.nav-drawer-panel .nav-order-button {
  background: transparent;
  color: var(--card-text);
  border: 1px solid transparent;
  border-radius: 2px !important;
  box-shadow: none;
  text-shadow: none;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
}
html body > .main-nav.nav-drawer-panel .nav-order-button:hover {
  background: var(--card2);
  border-color: var(--card-focus);
}
html body > .main-nav.nav-drawer-panel .nav-order-button svg { width: 20px; height: 20px; }
html body > .main-nav.nav-drawer-panel:not([data-reordering="true"]) [data-nav-order-edit] { padding: 11px; }
html body > .main-nav.nav-drawer-panel[data-reordering="true"] .nav-order-toolbar { border-top: 1px solid var(--nav-divider); }
html body > .main-nav.nav-drawer-panel[data-reordering="true"] .nav-order-row { gap: 0; }
html body > .main-nav.nav-drawer-panel[data-reordering="true"] .nav-order-row .nav-link { padding-inline: 18px !important; }
html body > .main-nav.nav-drawer-panel .nav-order-status { color: var(--card-muted); text-align: right; }
/* iDroid keeps its flat LCD surface and inset selected underline. */
html:is([data-theme="green-idroid"], [data-theme="lcd-idroid"], [data-theme="idroid"]) body > .main-nav.nav-drawer-panel { box-shadow: none; }
html:is([data-theme="green-idroid"], [data-theme="lcd-idroid"], [data-theme="idroid"]) body > .main-nav.nav-drawer-panel .nav-link:hover,
html:is([data-theme="green-idroid"], [data-theme="lcd-idroid"], [data-theme="idroid"]) body > .main-nav.nav-drawer-panel .nav-link.active {
  background: var(--bg);
  color: var(--text);
  box-shadow: none;
}
html:is([data-theme="green-idroid"], [data-theme="lcd-idroid"], [data-theme="idroid"]) body > .main-nav.nav-drawer-panel .nav-link.active { box-shadow: inset 0 -2px var(--focus); }

.settings-drawer{width:min(580px,100vw);max-width:100%;padding:clamp(16px,3vw,24px)}
.settings-drawer [hidden]{display:none!important}
.drawer-section{background:transparent;border:0;border-top:1px solid var(--border);border-radius:0;box-shadow:none;padding:18px 0;margin:0}
.drawer-section.flat{border:0;padding:12px 0}
.drawer-head{align-items:flex-start;gap:16px}.drawer-head h2{margin:0}.drawer-head .muted{margin:6px 0 0}
.drawer-preferences{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.drawer-preferences h3{grid-column:1/-1}.drawer-preferences label{display:grid;gap:6px}.drawer-preferences select{width:100%}
.theme-preview-grid,.theme-tile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.theme-option{position:relative;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:0;align-items:stretch;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:transparent}
.theme-option .theme-preview-tile{display:flex!important;flex-direction:column;min-width:0;width:100%;padding:8px;border:0;border-radius:0!important;background:transparent;color:var(--card-text);box-shadow:none;cursor:pointer;text-align:left;white-space:normal;transform:none}
.theme-preview-window{display:grid!important;gap:5px;min-width:0;width:100%;padding:10px;border:1px solid var(--pv-border);border-radius:3px;background:var(--pv-card);color:var(--pv-text);box-shadow:none}
.theme-preview-sample-title{font-size:13px;font-weight:650;color:var(--pv-text)}
.theme-preview-sample-copy{font-size:11px;color:var(--pv-muted);line-height:1.4}
.theme-preview-sample-actions{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.theme-preview-action{background:var(--pv-accent);color:var(--pv-accent-text);padding:3px 6px;border-radius:2px;font-size:11px}
.theme-preview-status{background:var(--pv-success-bg);color:var(--pv-success);padding:3px 6px;border-radius:2px;font-size:11px}
.theme-card-label{font-size:calc(.8rem * var(--scale,1));color:var(--card-text);margin-top:7px;overflow-wrap:anywhere;line-height:1.35}
.theme-option .theme-fav{position:static!important;display:flex;align-items:flex-start;justify-content:center;padding:11px 4px;width:38px;min-width:0;height:auto;border:0;border-left:1px solid var(--border);border-radius:0;background:transparent;color:var(--card-muted);box-shadow:none}
.theme-option .theme-fav[aria-pressed="true"]{color:var(--link)}
.theme-option:has([aria-pressed="true"][data-theme-choice]){outline:2px solid var(--focus);outline-offset:1px}
.theme-select.native-theme-select{position:absolute!important;width:1px!important;max-width:1px!important;min-width:0!important;min-height:0!important;height:1px!important;padding:0!important;clip-path:inset(50%)}
/* Readable, consistent page headings and actions. */
[data-view="saved"]>section.panel:first-child,[data-view="search"]>section.panel:first-child,.appearance-page>.appearance-heading{background:transparent;border:0;padding:0;box-shadow:none;border-radius:0;--link:inherit;--muted:inherit}
[data-view="saved"]>section.panel:first-child h1,[data-view="search"]>section.panel:first-child h1{margin:8px 0 12px}
[data-view="saved"] .saved-search{max-width:44rem;display:grid;gap:6px}
[data-view="saved"] .saved-search input{width:100%}
[data-view="saved"] .saved-browse{margin:16px 0}
[data-view="saved"] .saved-actions{margin:16px 0 24px!important;max-width:none;justify-content:flex-start}
[data-view="saved"] .saved-actions>.btn{flex:0 1 auto!important}
.reader-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:var(--pad)}
.reader-head>div:first-child{flex:1 1 28rem;min-width:0}.reader-head h1{margin:8px 0 12px}.reader-actions{display:flex;flex:0 1 auto;flex-wrap:wrap;align-items:center;justify-content:flex-start}
.reader-layout{gap:24px}.markdown-reader{line-height:1.75}.markdown-reader :where(p,li){max-width:76ch}.reader-toc a{line-height:1.45}
:is(main summary,.reader-toc a){border-radius:var(--control-radius)!important}
.work-hero,.work-content,.work-contents{border-radius:var(--radius);box-shadow:none}
.work-container .work-actions{flex-wrap:wrap;gap:10px}
.library-item,.home-app{border-radius:var(--radius);box-shadow:none}
.library-item-meta,.library-item-source,.library-topic-description{color:var(--card-muted,var(--muted))}
/* Dedicated appearance page: full-width controls, with secondary options below. */
.appearance-heading{margin-bottom:28px}.appearance-heading h1{margin:8px 0 12px}
.appearance-main{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px}
.appearance-main>.card{padding:clamp(16px,2vw,28px);margin:0!important;align-self:start}
.appearance-main h2{margin:0 0 12px;font-size:calc(1.2rem * var(--scale,1))}
.appearance-main label,.appearance-layout-prefs label{display:grid;gap:6px}.appearance-main label select{width:100%}
.appearance-layout-prefs{display:grid;gap:16px;margin-top:20px}
.appearance-preview{margin-top:24px;padding:20px;background:var(--surface);color:var(--surface-text,var(--text));border:1px solid var(--border);border-radius:var(--radius)}
.appearance-preview h3{margin:0 0 8px}.appearance-preview p{color:var(--surface-muted,var(--muted))}.appearance-preview-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0}
.appearance-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.appearance-secondary .card{padding:22px}.appearance-secondary h2{font-size:1.15rem;margin:0 0 10px}
.custom-theme-builder{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.palette-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;margin:18px 0}
.palette-form label{display:grid;gap:6px;font-size:calc(.85rem * var(--scale,1))}
.palette-form input[type="color"]{width:100%;height:40px;border:1px solid var(--border);padding:3px;border-radius:var(--control-radius);background:var(--input)}
/* Wikipedia fills the space remaining below its actual header at every text size. */
:is(.okf-desktop-ui,.okf-mobile-ui) .wiki-app{height:100dvh!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
.wiki-app>.topbar{flex:0 0 auto}
:is(.okf-desktop-ui,.okf-mobile-ui) .wiki-app>.wiki-shell-v2{height:auto!important;min-height:0!important;flex:1 1 0!important}
/* Embedded tools retain their canvases; only their surrounding UI is themed. */
.wiki-tab-item{background:var(--card);color:var(--card-text);border-radius:var(--control-radius)}
.wiki-tab-item:has(.wiki-tab.active){background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.wiki-tab-item :is(.wiki-tab,.wiki-tab-close){color:inherit;background:transparent;border-radius:var(--control-radius)!important}
.wiki-tab-item .wiki-tab-close:hover{background:var(--danger-bg);color:var(--danger-fg)}
.topbar .icon-btn{border-radius:var(--control-radius)!important;box-shadow:none!important}
.wiki-page-loader{background:var(--bg)!important;color:var(--text)!important}
.wiki-shell :where(.wiki-tabs,.wiki-reader-toolbar,.wiki-overlay-drawer){background:var(--card);color:var(--card-text);border-color:var(--border);box-shadow:none}
.maps-container :where(input,select,.btn,.icon-btn){border-radius:var(--control-radius)!important}
.trading-container{--muted:var(--card-muted)}
.trading-container :where(.panel,.card,.balance-facts,.portfolio-summary,.position-card){border-radius:var(--radius)}
.trading-container .is-paused [data-hero-state],.trading-container .is-paused [data-control-state],.trading-container.is-paused [data-hero-state],.trading-container.is-paused [data-control-state]{background:var(--warning-bg)!important;color:var(--warning-fg)!important;border-color:var(--warning-border,var(--warning))}
.trading-container .state-bad,.trading-container .negative{color:var(--danger)}
@media(hover:hover){a:not(.btn):not(.nav-link):hover{text-decoration-thickness:2px}}
@media(max-width:900px){.appearance-main{grid-template-columns:1fr}.reader-head>div:first-child{flex-basis:100%}.reader-actions{width:100%}.section-head{align-items:flex-start}}
@media(max-width:600px){
 :root{--page-gutter:16px}.topbar .nav-inner{gap:8px;padding-block:8px!important}.topbar .top-search{order:4;flex-basis:100%}.topbar .settings-control{margin-left:auto}.topbar .brand{font-size:calc(.95rem * var(--scale,1))}
 .container:not(.maps-container){padding-block:22px!important}.appearance-secondary{grid-template-columns:1fr}.appearance-main{gap:16px}.reader-head{gap:16px}.reader-actions{gap:8px}.reader-actions .btn{flex:1 1 135px}
 .theme-preview-grid,.theme-tile-grid{grid-template-columns:1fr}.drawer-preferences{grid-template-columns:1fr}.settings-drawer{padding:16px}.card-actions{gap:8px}
}
@media(prefers-reduced-motion:reduce){:root{--motion:0ms}*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* The compact Wikipedia rail keeps its accent marker and readable labels. */
#wikiWorkspace .wiki-rail-button:is(:hover,[aria-pressed="true"])>span{color:var(--card-text)!important}
#wikiWorkspace .wiki-reading-tools .btn.active{background:var(--accent)!important;color:var(--accent-text)!important;box-shadow:none!important}
