/* Compact shared form controls. Content cards and answer choices keep their own sizing. */
body :is(.btn,.segment,.icon-button) {
 box-sizing:border-box; min-height:36px; padding:7px 12px; border-radius:5px;
 font-size:14px; line-height:20px; font-weight:600; box-shadow:none;
 transition:background-color .15s,border-color .15s,color .15s;
}
body .btn:hover { transform:none; box-shadow:none; }
body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea) {
 box-sizing:border-box; min-width:0; min-height:36px; padding:7px 10px;
 border:1px solid var(--line); border-radius:5px; background-color:var(--surface);
 color:var(--ink); font:inherit; font-size:14px; line-height:20px; box-shadow:none;
}
body select {
 appearance:none; padding-right:32px !important;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4 3 3 3-3' fill='none' stroke='%23788886' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
 background-repeat:no-repeat; background-position:right 11px center; cursor:pointer;
}
body textarea { resize:vertical; min-height:88px; }
body :is(input,select,textarea,button,a):focus-visible { outline:2px solid var(--green); outline-offset:3px; }
body :is(input[type=checkbox],input[type=radio],input[type=range]) { accent-color:var(--green); }
body :is(button,input,select,textarea):disabled { cursor:not-allowed; opacity:.5; }
body .segmented { padding:0; gap:0; border:1px solid var(--line); border-radius:5px; background:var(--surface); overflow:hidden; }
body .segmented .segment { border:0; border-radius:0; margin:0; box-shadow:none; font-weight:600; }
body .segmented .segment + .segment { border-left:1px solid var(--line); }
body .segmented .segment.selected { background:var(--surface-soft); color:var(--green); box-shadow:inset 0 -2px var(--green); }
main[data-view] .study-context-bar { padding:10px; gap:8px; border-radius:8px; margin-bottom:18px; }
main[data-view] .study-context-bar :is(.btn,.segment,input,select) { height:36px; min-height:36px; padding:7px 10px; font-size:14px; line-height:20px; font-weight:600; border-radius:5px; }
main[data-view] .study-context-bar input { font-weight:400; }
main[data-view] .study-context-bar .segmented { padding:0; }
main[data-view] .study-context-bar .segment { border:0; border-radius:0; min-width:65px; }
main[data-view] .study-context-bar .segment + .segment { border-left:1px solid var(--line); }
main[data-view="vocab"] .study-context-bar { display:flex; flex-wrap:wrap; }
main[data-view="vocab"] .study-context-bar .vocab-search { flex:0 1 190px; }
main[data-view="vocab"] .study-context-bar > label { flex:0 1 170px; }
main[data-view="vocab"] .study-context-bar select { width:100%; }
main[data-view="vocab"] .study-context-bar .segmented { margin-left:auto; }
main[data-view] .study-context-bar .deck-navigation { min-height:36px; }
@media(max-width:680px) {
 main[data-view="vocab"] .study-context-bar > label { flex:1 1 130px; }
 main[data-view="vocab"] .study-context-bar .vocab-search { flex:1 1 100%; }
 main[data-view="vocab"] .study-context-bar .segmented { width:auto; margin-left:0; }
 body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea) { font-size:16px; }
 body :is(.btn,.segment) { min-height:40px; }
}
/* Shared sizing wins over older page-specific button rules. */
body #main .btn,body .topbar .btn {
 min-height:36px; padding:7px 12px; border-radius:5px;
 font-size:14px; line-height:20px; box-shadow:none;
}
body #main select {
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4 3 3 3-3' fill='none' stroke='%23788886' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
 background-repeat:no-repeat; background-position:right 11px center;
}
@supports (appearance:base-select) {
 body #main select,body #main select::picker(select) { appearance:base-select; }
 body #main select { background-image:none; padding-right:10px !important; }
 body #main select::picker-icon { color:var(--muted); font-size:12px; }
 body #main select::picker(select) {
  color:var(--ink); background:var(--surface); border:1px solid var(--line);
  border-radius:6px; padding:4px; box-shadow:0 6px 18px #0002;
 }
 body #main select option { padding:8px 10px; border-radius:3px; font-size:14px; }
 body #main select option:checked { background:var(--surface-soft); color:var(--green); }
 body #main select option:hover,body #main select option:focus { background:var(--surface-soft); }
}
@media(max-width:680px) {
 body #main .btn,main[data-view] .study-context-bar :is(.segment,input,select) { min-height:40px; height:auto; }
 main[data-view] .study-context-bar :is(input,select) { font-size:16px; }
}
/* Flat tabs: selection is an underline, never a bordered pill. */
body #main :is(.segmented,.lab-tabs) {
 border:0; border-radius:0; background:transparent; padding:0;
 gap:4px; overflow:visible; box-shadow:none;
}
body #main :is(.segmented,.lab-tabs) .segment {
 border:0; border-radius:0; background:transparent; margin:0;
 box-shadow:none; color:var(--muted); font-weight:600;
}
body #main :is(.segmented,.lab-tabs) .segment.selected {
 border:0; border-radius:0; background:transparent; color:var(--green);
 box-shadow:inset 0 -2px 0 var(--green);
}
body #main :is(.segmented,.lab-tabs) .segment:hover:not(:disabled) {
 background:var(--surface-soft); color:var(--ink);
}
/* Concept navigation leads; deck tools align opposite it. */
main[data-view="cards"] .study-context-bar { display:flex; justify-content:space-between; flex-wrap:wrap; }
main[data-view="cards"] .study-context-bar .deck-navigation { margin:0; width:auto; flex:0 0 auto; }
main[data-view="cards"] .concept-toolbar-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-left:auto; min-width:0; }
main[data-view="cards"] .concept-toolbar-actions select { width:auto; max-width:180px; }
@media(max-width:680px) {
 main[data-view="cards"] .study-context-bar .deck-navigation { width:100%; }
 main[data-view="cards"] .concept-toolbar-actions { width:100%; }
 main[data-view="cards"] .concept-toolbar-actions select { flex:1; min-width:0; max-width:none; }
}
/* Open activities stay available while moving between study tools. */
#workspace-tabs { display:flex; gap:8px; overflow-x:auto; padding:0 42px; background:var(--surface); border-bottom:1px solid var(--line); scrollbar-width:thin; }
.workspace-tab { display:flex; align-items:center; gap:7px; flex-shrink:0; padding:12px 10px; color:var(--muted); font-size:13px; font-weight:600; text-decoration:none; border:0; border-radius:0; }
.workspace-tab.active { color:var(--green); box-shadow:inset 0 -2px var(--green); }
.workspace-tab:hover { background:var(--surface-soft); }
.activity-dot { width:6px; height:6px; border-radius:50%; background:var(--green); }
@media(max-width:680px) { #workspace-tabs { padding-inline:18px; } }
#workspace-tabs { position:sticky; top:var(--topbar-height,100px); z-index:8; }
#workspace-tabs { gap:0; }
#workspace-tabs .workspace-tab { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; min-width:156px; padding:12px 16px 15px; box-shadow:none; }
#workspace-tabs .workspace-tab.active { background:var(--surface-soft); }
.workspace-tab-title { font-size:13px; line-height:18px; }
.workspace-tab-status { color:var(--muted); font-size:11px; line-height:16px; font-weight:400; white-space:nowrap; }
.workspace-tab-meter { height:3px; position:absolute; bottom:0; left:16px; right:16px; background:var(--line); }
.workspace-tab-meter > span { display:block; height:100%; background:var(--green); }
#workspace-tabs .workspace-tab.active .workspace-tab-title { color:var(--green); }
/* Visual vocabulary progress matches the concept-card companion panel. */
.vocab-progress-panel .ring-wrap { gap:16px; margin:22px 0; }
.vocab-progress-panel .ring-label { min-width:0; }
.word-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.word-stat { display:grid; grid-template-columns:20px 1fr; align-items:center; gap:5px 8px; padding:14px 12px; background:var(--surface-soft); }
.word-stat .icon { width:18px; height:18px; color:var(--green); }
.word-stat strong { font-size:24px; line-height:1.2; font-variant-numeric:tabular-nums; }
.word-stat > span { grid-column:1/-1; font-size:12px; color:var(--muted); }
.word-stat.review .icon { color:var(--orange); }
.word-remaining { display:flex; justify-content:space-between; margin:16px 0 22px; font-size:13px; color:var(--muted); }
.word-remaining strong { color:var(--ink); }
.vocab-tips-title { padding-top:20px; border-top:1px solid var(--line); font-size:15px; }
.vocab-progress-panel .learning-steps { margin-bottom:0; }
/* A lighter page header leaves more room for the activity. */
body main[data-view] { padding-top:24px; }
body main[data-view] .page-heading { gap:14px; margin-bottom:18px; }
body main[data-view] .page-heading h1 { font-size:1.75rem; line-height:1.2; letter-spacing:-.65px; }
body main[data-view] .page-heading .eyebrow { font-size:.6875rem; margin-bottom:5px; }
body main[data-view] .page-heading .sub { font-size:.9375rem; line-height:1.5; margin-top:6px; }
@media(max-width:680px) {
 body main[data-view] { padding-top:18px; }
 body main[data-view] .page-heading { gap:10px; margin-bottom:16px; }
 body main[data-view] .page-heading h1 { font-size:1.5rem; }
 body main[data-view] .page-heading .sub { font-size:.875rem; }
}
.workspace-tab-item { position:relative; flex:0 0 auto; }
#workspace-tabs .workspace-tab-item .workspace-tab { padding-top:28px; }
.workspace-tab-tools { position:absolute; top:2px; right:8px; display:flex; gap:2px; }
.workspace-tab-tools button { border:0; border-radius:0; background:transparent; color:var(--muted); width:24px; height:24px; padding:0; font-size:17px; line-height:24px; }
.workspace-tab-tools button:hover:not(:disabled),.workspace-tab-tools button[aria-pressed="true"] { color:var(--green); background:var(--surface-soft); }
.workspace-tab-tools button:disabled { opacity:.25; }
#workspace-tabs:empty { display:none; }
/* Quiet tab chrome: actions share the title line, never a separate row. */
#workspace-tabs .workspace-tab-item .workspace-tab { min-width:170px; max-width:220px; padding:11px 60px 12px 14px; gap:3px; }
#workspace-tabs .workspace-tab-title { font-size:13px; white-space:nowrap; }
#workspace-tabs .workspace-tab-status { max-width:180px; overflow:hidden; text-overflow:ellipsis; font-size:11px; }
#workspace-tabs .workspace-tab-tools { top:8px; right:5px; opacity:0; transition:opacity .12s; }
#workspace-tabs .workspace-tab-item:hover .workspace-tab-tools,#workspace-tabs .workspace-tab-item:focus-within .workspace-tab-tools { opacity:1; }
#workspace-tabs .workspace-tab-meter { left:14px; right:14px; height:2px; }
.tab-pin-mark { color:var(--green); margin-right:6px; }
.workspace-tab-menu { position:fixed; inset:auto; margin:0; width:160px; padding:5px; border:1px solid var(--line); border-radius:4px; background:var(--surface); color:var(--ink); box-shadow:0 6px 20px #0002; }
.workspace-tab-menu button { display:block; width:100%; text-align:left; padding:9px 10px; border:0; border-radius:0; background:transparent; color:inherit; font-size:13px; }
.workspace-tab-menu button:hover:not(:disabled) { background:var(--surface-soft); }
@media(hover:none) { #workspace-tabs .workspace-tab-tools { opacity:1; } }
/* Unified application header and user menu. */
.topbar .topbar-start { display:flex; align-items:center; gap:14px; }
.topbar .brand { color:var(--ink); font-size:18px; gap:9px; }
.topbar .brand-mark { width:34px; height:36px; font-size:22px; border-radius:5px; }
.topbar .brand small { font-size:9px; color:var(--muted); margin-top:2px; }
.topbar #sidebar-toggle { width:32px; min-width:32px; height:34px; padding:6px; border:0; background:transparent; color:var(--ink); }
.topbar #sidebar-toggle .sidebar-toggle-label { display:none; }
#workspace-tabs #study-back { position:sticky; left:0; align-self:center; flex-shrink:0; z-index:2; margin-right:8px; background:var(--surface); border:0; box-shadow:none; padding:8px; }
#user-menu-trigger { display:flex; align-items:center; gap:9px; border:0; padding:6px 8px; background:transparent; color:var(--ink); font-size:13px; }
#user-avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--green); color:var(--surface); font-weight:700; }
#user-menu-name { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#user-menu { position:fixed; inset:auto; margin:0; width:280px; max-width:calc(100vw - 16px); padding:8px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); box-shadow:0 8px 28px #0003; }
.user-menu-heading { display:flex; flex-direction:column; gap:5px; padding:12px; border-bottom:1px solid var(--line); }
#user-menu-identity { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
#user-menu .local-badge { padding:12px; font-size:11px; }
#user-menu :is(a,button) { display:flex; width:100%; justify-content:flex-start; padding:10px 12px; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--ink); text-decoration:none; font-size:13px; }
#user-menu :is(a,button):hover { background:var(--surface-soft); }
@media(max-width:680px) {
 .topbar .topbar-start { width:auto; }
 .topbar .topbar-account { margin-left:auto; }
 #user-menu-name { display:none; }
 .sidebar { padding-top:0; }
}
#user-menu-trigger .user-menu-chevron { flex-shrink:0; color:var(--muted); transition:transform .15s ease; }
#user-menu-trigger[aria-expanded="true"] .user-menu-chevron { transform:rotate(180deg); }
@media(prefers-reduced-motion:reduce) { #user-menu-trigger .user-menu-chevron { transition:none; } }
/* Sidebar labels keep their natural shape when the navigation is toggled. */
@media(min-width:681px) {
 .app-shell > .sidebar { transition:none; overflow-x:hidden; }
 .app-shell > .workspace { transition:none; }
 .sidebar .side-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .sidebar .nav-link { min-width:0; white-space:nowrap; }
 .sidebar .nav-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .sidebar .nav-link .icon { flex-shrink:0; }
}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.plan-grid ul{padding-left:20px;line-height:2}.plan-grid h2{font-size:32px}.plan-grid h2 small{font-size:14px;font-weight:400}.plan-full{border-top:3px solid var(--green)}.free-plan-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-soft);padding:12px 16px;margin-bottom:18px;font-size:13px}.free-plan-banner a{white-space:nowrap;color:var(--green)}.nav-plan-tag{font-size:10px;margin-left:auto;color:inherit;opacity:.7}@media(max-width:680px){.plan-grid{grid-template-columns:1fr}.free-plan-banner{align-items:flex-start;flex-direction:column}}