/* Dual-layout navigation. Uses existing StudyTick theme tokens; leaves all feature logic intact. */
body#studyTickApp{--st-nav-sidebar-width:258px;--st-nav-sidebar-gap:18px}
body#studyTickApp.st-nav-compact{--st-nav-sidebar-width:76px}
body#studyTickApp[data-st-nav-layout="vertical"]:not(.focus-view){
 padding-inline-start:calc(var(--st-nav-sidebar-width) + var(--st-nav-sidebar-gap));
 transition:padding-inline-start .2s ease;
}
html[data-theme] body#studyTickApp #stNavSidebar{
 box-sizing:border-box;position:fixed;z-index:105;inset-block:16px;inset-inline-start:12px;
 width:var(--st-nav-sidebar-width);max-height:calc(100dvh - 32px);
 padding:12px;display:flex;flex-direction:column;gap:16px;
 background:var(--sc-surface,#fffdf8);color:var(--sc-text,#1f2b33);
 border:1px solid var(--sc-border,#d8d4ca);border-radius:19px;
 box-shadow:0 8px 28px rgba(25,42,36,.095);overflow-y:auto;overscroll-behavior:contain;
 transition:width .2s ease,box-shadow .2s ease;
}
html[data-theme] body#studyTickApp #stNavSidebar[hidden],body.focus-view #stNavSidebar{display:none!important}
#stNavSidebar .st-nav-sidebar-head{display:flex;align-items:center;gap:7px;min-height:46px}
#stNavSidebar .st-nav-brand-slot{min-width:0;flex:1;overflow:hidden}
html[data-theme] body#studyTickApp #stNavSidebar .brand{margin:0!important;white-space:nowrap;max-width:100%;font-weight:inherit}
html[data-theme] body#studyTickApp #stNavSidebar .st-nav-collapse{
 display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;
 padding:8px;border:1px solid var(--sc-border,#d8d4ca);
 color:var(--sc-text,#1f2b33);background:var(--sc-surface-raised,#fff);
 border-radius:11px;cursor:pointer;
}
#stNavSidebar .st-nav-collapse svg{width:20px;height:20px}
#stNavSidebar .st-nav-sidebar-links,#stNavSidebar .st-primary{display:flex!important;flex-direction:column;align-items:stretch!important;gap:7px!important;width:100%;min-width:0}
#stNavSidebar .st-nav-menu-slot{width:100%;padding-top:10px;margin-top:5px;border-top:1px solid var(--sc-border,#d8d4ca)}
html[data-theme] body#studyTickApp #stNavSidebar :is(.st-nav-action,#studyTickMenu){
 box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;
 gap:12px!important;width:100%!important;max-width:none!important;min-width:0!important;min-height:47px!important;
 height:auto!important;margin:0!important;padding:12px 13px!important;text-align:start!important;
 font:600 13.5px/1.35 var(--st-body,Inter,"Segoe UI",Arial,sans-serif)!important;white-space:normal!important;
 background:transparent!important;color:var(--sc-text,#1f2b33)!important;
 border:1px solid transparent!important;border-radius:12px!important;
 box-shadow:none!important;text-decoration:none!important;cursor:pointer;
 transition:background-color .16s ease,border-color .16s ease!important;
}
html[data-theme] body#studyTickApp #stNavSidebar :is(.st-nav-action,#studyTickMenu):is(:hover,:focus-visible),
html[data-theme] body#studyTickApp #stNavSidebar .st-nav-action.st-nav-active{
 color:var(--st-nav-text,var(--sc-link,#145f49))!important;
 background:var(--st-nav-fill,var(--sc-accent-soft,#e3f3ec))!important;
 border-color:var(--st-nav-border,var(--sc-border,#d8d4ca))!important;
}
html[data-theme] body#studyTickApp #stNavSidebar .st-nav-action.st-nav-active{box-shadow:inset 3px 0 0 var(--st-nav-active-border,#168562)!important}
#stNavSidebar :is(.st-nav-action,#studyTickMenu)>:is(svg,.st-nav-glyph){display:block;flex:0 0 21px;width:21px;height:21px;max-height:21px}
#stNavSidebar #lowStimulationToggle .low-stim-dot{display:none}
html[data-theme] body#studyTickApp #stNavSidebar #studyTickMenu::after{content:attr(aria-label);font-size:13.5px}
html[data-theme] body#studyTickApp #stNavSidebar .st-nav-shortcut{
 display:flex;align-items:center;justify-content:center;gap:9px;min-height:40px;margin-top:auto;
 width:100%;background:transparent;border:1px solid var(--sc-border,#d8d4ca);
 border-radius:12px;color:var(--sc-muted,#5f6b68);font:inherit;font-size:12px;cursor:pointer;
}
#stNavSidebar .st-nav-shortcut svg{width:17px;height:17px}
html[data-theme] body#studyTickApp.st-nav-compact #stNavSidebar{padding:10px}
#studyTickApp.st-nav-compact #stNavSidebar .st-nav-brand-slot{display:none}
#studyTickApp.st-nav-compact #stNavSidebar .st-nav-sidebar-head{justify-content:center}
#studyTickApp.st-nav-compact #stNavSidebar .st-nav-collapse{transform:rotate(180deg)}
html[data-theme] body#studyTickApp.st-nav-compact #stNavSidebar :is(.st-nav-action,#studyTickMenu){
 justify-content:center!important;gap:0!important;padding:13px 10px!important;font-size:0!important;
}
#studyTickApp.st-nav-compact #stNavSidebar #studyTickMenu::after{display:none}
#studyTickApp.st-nav-compact #stNavSidebar .st-nav-action .st-nav-label,#studyTickApp.st-nav-compact #stNavSidebar .st-nav-action#lowStimulationToggle>span:not(.st-nav-glyph){display:none!important}
#studyTickApp.st-nav-compact #stNavSidebar .st-nav-shortcut span{display:none}
html[data-theme] body#studyTickApp.st-nav-compact #stNavSidebar .st-nav-shortcut{min-height:44px}
#studyTickApp.st-nav-compact #stNavSidebar .st-nav-shortcut svg{width:20px;height:20px}
body#studyTickApp #stNavDashboard .st-nav-glyph{flex:none;width:19px;height:19px}
html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] .st-toolbar #stNavDashboard{
 display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:9px 14px;
 border:1px solid var(--st-nav-border,#93bda8);border-radius:11px;
 background:var(--st-nav-fill,#e9f5ee);color:var(--st-nav-text,#235941);
 font:600 14px var(--st-body,Inter,"Segoe UI",Arial,sans-serif);
}
html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] .st-toolbar #stNavDashboard:hover,
html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] .st-toolbar #stNavDashboard.st-nav-active{background:var(--st-nav-active,#cee7d7)}
body#studyTickApp[data-st-nav-layout="horizontal"] #studyTickMenu .st-nav-menu-text{display:none}
/* Main dashboard only: original navigation styling, but constrain decorative SVGs.
   Without these dimensions, SVG intrinsic size expands the Reflect / Brain Dump /
   Low Stimulation buttons and squeezes every neighboring control. */
html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] #studyTickHeader .st-primary > :is(#stNavDashboard,.group-timer-nav,#stTimetableNav,#stReflectNav,#stTickNotesNav,#focusView,#brainDumpReview,#lowStimulationToggle) .st-nav-glyph{
  display:block!important;
  box-sizing:border-box!important;
  inline-size:19px!important;
  block-size:19px!important;
  min-inline-size:19px!important;
  max-inline-size:19px!important;
  max-block-size:19px!important;
  flex:0 0 19px!important;
  vertical-align:middle;
}
/* Only the legacy visual dot is hidden. The actual Low Stimulation button,
   saved on/off state, and its event handler remain in the DOM. */
html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] #studyTickHeader .st-primary #lowStimulationToggle > .low-stim-dot{
  display:none!important;
}
@media(min-width:861px){
  /* Toolbar keeps its original theme and utility controls, while long
     navigation rows scroll inside their own strip at narrow desktop widths. */
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] #studyTickHeader.st-refined .st-toolbar .st-primary{
    display:flex!important;
    align-items:center;
    flex:1 1 auto!important;
    min-width:0;
    flex-wrap:nowrap!important;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
    overscroll-behavior-x:contain;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] #studyTickHeader.st-refined .st-toolbar .st-primary > :is(#stNavDashboard,.group-timer-nav,#stTimetableNav,#stReflectNav,#stTickNotesNav,#focusView,#brainDumpReview,#lowStimulationToggle){
    flex:0 0 auto!important;
    min-width:0;
    white-space:nowrap!important;
    max-height:46px!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] #studyTickHeader.st-refined .st-toolbar .st-utility{
    flex:0 0 auto;
  }
}
/* Shared layout shortcut: original sidebar control moves to the header in
   horizontal mode. No duplicate icon/button or altered menu handler. */
html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] #studyTickHeader.st-refined .st-toolbar .st-utility #stNavLayoutShortcut{
  box-sizing:border-box;
  display:inline-flex!important;
  justify-content:center;
  align-items:center;
  flex:0 0 46px!important;
  width:46px!important;
  min-width:46px!important;
  max-width:46px!important;
  height:46px!important;
  min-height:46px!important;
  padding:10px!important;
  border:1px solid var(--st-nav-border);
  border-radius:11px;
  background:var(--st-nav-fill);
  color:var(--st-nav-text);
  cursor:pointer;
}
body#studyTickApp[data-st-nav-layout="horizontal"] #studyTickHeader .st-utility #stNavLayoutShortcut svg{
  width:20px;height:20px;flex:0 0 20px;
}
body#studyTickApp[data-st-nav-layout="horizontal"] #studyTickHeader .st-utility #stNavLayoutShortcut > span{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;
}
@media(min-width:1200px){
  /* Full-sized screens show the original Menu trigger's text like Group Timer. */
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] #studyTickHeader.st-refined .st-toolbar #studyTickMenu{
    box-sizing:border-box!important;
    flex:0 0 auto!important;
    min-width:84px!important;
    max-width:none!important;
    width:auto!important;
    padding:9px 13px!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] #studyTickHeader.st-refined .st-toolbar #studyTickMenu::after{
    content:attr(aria-label);
    display:inline;
    font-size:14px;
    font-weight:600;
  }
}
@media(max-width:860px){
  /* Compact mobile toolbar retains settings access via the existing Menu. */
  html[data-theme] body#studyTickApp #studyTickHeader.st-refined #stNavLayoutShortcut{display:none!important}
}
.st-navigation-setting{flex-wrap:wrap;gap:12px}
.st-navigation-setting>div:first-child{flex:1 1 100%}
.st-nav-settings-actions{display:flex;gap:7px;flex:1 1 230px}
.st-nav-settings-actions>button,#stNavCompactSetting{min-height:43px;padding:9px 13px;border:1px solid var(--sc-border,#d8d4ca);border-radius:10px;background:var(--sc-surface-raised,#fff);color:var(--sc-text,#1f2b33);font:inherit;font-size:14px;cursor:pointer}
.st-nav-settings-actions>button[aria-pressed="true"],#stNavCompactSetting[aria-pressed="true"]{border-color:var(--st-nav-active-border,#168562);background:var(--st-nav-fill,#e9f5ee);color:var(--st-nav-text,#235941)}
body#studyTickApp :is(#stNavSidebar button,#stNavSidebar a,.st-navigation-setting button):focus-visible{outline:2px solid var(--sc-accent-strong,#168562)!important;outline-offset:3px!important}
body#studyTickApp.focus-view[data-st-nav-layout="vertical"]{padding-inline-start:0!important}
@media(max-width:860px){
 body#studyTickApp[data-st-nav-layout]{padding-inline-start:0!important;transition:none}
 html[data-theme] body#studyTickApp #stNavSidebar{display:none!important}
 html[data-theme] body#studyTickApp header#studyTickHeader.st-refined nav.st-toolbar{
  display:flex!important;flex-flow:row wrap!important;align-items:center!important;gap:9px!important;
 }
 body#studyTickApp header#studyTickHeader.st-refined nav.st-toolbar .st-primary{
  display:flex!important;flex:1 1 100%!important;order:2;flex-flow:row nowrap!important;gap:8px!important;
  overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;
  scrollbar-width:thin;padding-block:3px;
 }
 body#studyTickApp header#studyTickHeader.st-refined nav.st-toolbar .st-primary>*{
  flex:0 0 auto!important;width:auto!important;grid-column:auto!important;grid-row:auto!important;scroll-snap-align:start;
 }
 body#studyTickApp header#studyTickHeader.st-refined nav.st-toolbar .st-utility{
  display:flex!important;order:1;flex:1 1 auto;align-items:center;justify-content:flex-end;border:0;padding:0;
 }
 body#studyTickApp header#studyTickHeader.st-refined nav.st-toolbar .st-clock{
  order:0;flex:0 1 auto;margin:0!important;padding:0!important;border:0!important;text-align:start;
 }
 html[data-theme] body#studyTickApp header#studyTickHeader.st-refined nav.st-toolbar #studyTickMenu{
  grid-column:auto!important;grid-row:auto!important;flex:0 0 46px!important;
 }
 html[data-theme] body#studyTickApp header#studyTickHeader.st-refined nav.st-toolbar #stNavDashboard{height:46px!important}
}
@media(prefers-reduced-motion:reduce){
 body#studyTickApp[data-st-nav-layout],html[data-theme] body#studyTickApp #stNavSidebar,
 html[data-theme] body#studyTickApp #stNavSidebar :is(button,a){transition:none!important;scroll-behavior:auto!important}
}

/* Exact compact dark header treatment used in the supplied visual reference.
   Scoped to the desktop horizontal navigation, preserving StudyTick themes,
   original sidebar palette, timers, and account controls. */
@media(min-width:861px){
  html[data-theme="dark"] body#studyTickApp[data-st-nav-layout="horizontal"] header#studyTickHeader.st-refined nav.st-toolbar
  .st-primary > :is(#stNavDashboard,.group-timer-nav,#stTimetableNav,#stReflectNav,#stTickNotesNav,#focusView,#brainDumpReview,#lowStimulationToggle),
  html[data-theme="dark"] body#studyTickApp[data-st-nav-layout="horizontal"] header#studyTickHeader.st-refined nav.st-toolbar
  #studyTickMenu{
    border:1px solid #465056!important;
    background:#202629!important;
    color:#f3f7f5!important;
    border-radius:13px!important;
    box-shadow:none!important;
  }
  html[data-theme="dark"] body#studyTickApp[data-st-nav-layout="horizontal"] header#studyTickHeader.st-refined nav.st-toolbar
  .st-primary > :is(#stNavDashboard,.group-timer-nav,#stTimetableNav,#stReflectNav,#stTickNotesNav,#focusView,#brainDumpReview,#lowStimulationToggle):is(:hover,:focus-visible),
  html[data-theme="dark"] body#studyTickApp[data-st-nav-layout="horizontal"] header#studyTickHeader.st-refined nav.st-toolbar
  #studyTickMenu:is(:hover,:focus-visible){
    background:#293638!important;
    border-color:#658579!important;
  }
  html[data-theme="dark"] body#studyTickApp[data-st-nav-layout="horizontal"] header#studyTickHeader.st-refined nav.st-toolbar
  #stNavLayoutShortcut{
    border:1px solid #638f7e!important;
    background:#254037!important;
    color:#c8eadd!important;
    border-radius:13px!important;
  }
}
/* Keep the switching control in the visible right-edge navigation group, and
   avoid the old narrow utility styles clipping or suppressing it. */
@media(min-width:861px){
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] header#studyTickHeader.st-refined .st-toolbar{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:9px!important;
    min-width:0!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] header#studyTickHeader.st-refined .st-toolbar .st-utility{
    display:flex!important;align-items:center!important;flex-wrap:nowrap!important;
    gap:9px!important;margin-inline-start:auto!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] header#studyTickHeader.st-refined .st-toolbar .st-primary{
    flex:1 1 auto!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] header#studyTickHeader.st-refined .st-toolbar .st-primary > :is(#stNavDashboard,.group-timer-nav,#stTimetableNav,#stReflectNav,#stTickNotesNav,#focusView,#brainDumpReview,#lowStimulationToggle){
    min-height:50px!important;
    height:50px!important;
    max-height:50px!important;
    padding:10px 14px!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] header#studyTickHeader.st-refined .st-toolbar
  :is(#studyTickMenu,#stNavLayoutShortcut){
    min-height:50px!important;height:50px!important;max-height:50px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body#studyTickApp[data-st-nav-layout="horizontal"] #studyTickHeader .st-primary{scroll-behavior:auto!important}
}

/* Compact rail: icon-only controls, never narrow text columns. */
html[data-theme] body#studyTickApp.st-nav-compact #stNavSidebar :is(.st-nav-action,#studyTickMenu){
  height:48px!important;min-height:48px!important;max-height:48px!important;
  overflow:hidden!important;white-space:nowrap!important;
  padding:0!important;justify-content:center!important;line-height:1!important;
}
html[data-theme] body#studyTickApp.st-nav-compact #stNavSidebar .st-nav-action .st-nav-label,
html[data-theme] body#studyTickApp.st-nav-compact #stNavSidebar #studyTickMenu::after{
  display:none!important;content:none!important;
}
html[data-theme] body#studyTickApp.st-nav-compact #stNavSidebar :is(.st-nav-action,#studyTickMenu) > svg,
html[data-theme] body#studyTickApp.st-nav-compact #stNavSidebar :is(.st-nav-action,#studyTickMenu) > .st-nav-glyph{
  display:block!important;flex:0 0 22px!important;width:22px!important;height:22px!important;
  min-width:22px!important;max-width:22px!important;max-height:22px!important;
  margin:0!important;color:var(--sc-text,#1f2b33)!important;
}
html[data-theme] body#studyTickApp.st-nav-compact #stNavSidebar :is(.st-nav-action,#studyTickMenu):is(:hover,:focus-visible) > svg,
html[data-theme] body#studyTickApp.st-nav-compact #stNavSidebar .st-nav-action.st-nav-active > svg{
  color:var(--st-nav-text,var(--sc-link,#145f49))!important;
}


/* Unified study navigation — shared mint palette from the original layout switch.
   This applies only to navigation actions; study, timers, account settings, and
   Focus View controls retain their own appearance and functionality. */
/* Use active palette surfaces instead of fixed green swatches, including
   for custom accents, both dark/light themes and compact sidebar layouts. */
html[data-theme] body#studyTickApp{
  --st-unified-nav-bg:var(--sc-surface-soft);
  --st-unified-nav-border:var(--sc-border);
  --st-unified-nav-text:var(--sc-text);
  --st-unified-nav-hover:color-mix(in srgb,var(--sc-accent-soft) 42%,var(--sc-surface-soft) 58%);
  --st-unified-nav-selected:color-mix(in srgb,var(--sc-accent-strong) 18%,var(--sc-surface-soft) 82%);
  --st-unified-nav-selected-border:var(--sc-accent-strong);
  --st-unified-nav-selected-text:var(--sc-text);
}
html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] header#studyTickHeader.st-refined nav.st-toolbar
.st-primary > :is(#stNavDashboard,.group-timer-nav,#stTimetableNav,#stReflectNav,#stTickNotesNav,#focusView,#brainDumpReview,#lowStimulationToggle),
html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] header#studyTickHeader.st-refined nav.st-toolbar #studyTickMenu,
html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] header#studyTickHeader.st-refined nav.st-toolbar #stNavLayoutShortcut,
html[data-theme] body#studyTickApp[data-st-nav-layout="vertical"] #stNavSidebar
:is(.st-nav-action,#studyTickMenu,#stNavLayoutShortcut,#stNavCollapse){
  background:var(--st-unified-nav-bg)!important;
  border:1px solid var(--st-unified-nav-border)!important;
  color:var(--st-unified-nav-text)!important;
  border-radius:13px!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] header#studyTickHeader.st-refined nav.st-toolbar
.st-primary > :is(#stNavDashboard,.group-timer-nav,#stTimetableNav,#stReflectNav,#stTickNotesNav,#focusView,#brainDumpReview,#lowStimulationToggle):is(:hover,:focus-visible),
html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] header#studyTickHeader.st-refined nav.st-toolbar
:is(#studyTickMenu,#stNavLayoutShortcut):is(:hover,:focus-visible),
html[data-theme] body#studyTickApp[data-st-nav-layout="vertical"] #stNavSidebar
:is(.st-nav-action,#studyTickMenu,#stNavLayoutShortcut,#stNavCollapse):is(:hover,:focus-visible){
  background:var(--st-unified-nav-hover)!important;
  border-color:var(--st-unified-nav-selected-border)!important;
  color:var(--st-unified-nav-text)!important;
}
/* Low Stimulation is always the same readable label. Its stronger mint fill
   alone indicates On; keyboard and screen readers also get aria-pressed. */
html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"] header#studyTickHeader.st-refined nav.st-toolbar
#lowStimulationToggle[aria-pressed="true"],
html[data-theme] body#studyTickApp[data-st-nav-layout="vertical"] #stNavSidebar
#lowStimulationToggle[aria-pressed="true"]{
  background:var(--st-unified-nav-selected)!important;
  border-color:var(--st-unified-nav-selected-border)!important;
  color:var(--st-unified-nav-selected-text)!important;
  box-shadow:inset 0 -2px 0 var(--st-unified-nav-selected-border)!important;
}
html[data-theme] body#studyTickApp[data-st-nav-layout="vertical"] #stNavSidebar
:is(.st-nav-action,#studyTickMenu) > :is(svg,.st-nav-glyph){
  color:inherit!important;
}
/* Timetable text never changes or shows chevrons; focus and active states
   remain the original workspace controls, independent of the visible label. */
html[data-theme] body#studyTickApp #stTimetableNav > .st-nav-glyph{
  display:block!important;
  width:19px!important;height:19px!important;
  min-width:19px!important;max-width:19px!important;
  max-height:19px!important;flex:0 0 19px!important;
}

/* Desktop navigation breathing room: preserve controls, colors and both layout modes. */
@media (min-width:861px) {
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar .st-primary {
    gap:clamp(10px, .75vw, 15px)!important;
    padding-block:5px!important;
    padding-inline:2px 8px!important;
    scrollbar-width:thin;
    /* Keep navigation clustered beside Menu; leave free space next to logo. */
    justify-content:safe flex-end!important;
  }
  /* Main workspaces (Dashboard/Timetable/Group/Reflect) and focus tools are
     separate visual clusters. No wrappers, duplicate buttons or changed handlers. */
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar .st-primary > #focusView {
    margin-inline-start:clamp(5px, .65vw, 12px)!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar .st-primary > :is(
    #stNavDashboard,.group-timer-nav,#stTimetableNav,#stReflectNav,#stTickNotesNav,#focusView,#brainDumpReview
  ) {
    flex-shrink:0!important;
    border-radius:13px!important;
    gap:9px!important;
    white-space:nowrap!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar .st-utility {
    gap:12px!important;
    padding-inline-start:16px!important;
    border-inline-start:1px solid var(--sc-border,#d8d4ca);
  }
}
/* At narrower desktop widths the established horizontal swipe behavior wins;
   the vertical/sidebar and mobile layouts are unchanged. */
@media (min-width:861px) and (max-width:1240px) {
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar .st-primary {
    gap:9px!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar .st-primary > #focusView {
    margin-inline-start:4px!important;
  }
}


/* Header and sidebar keep their original symbols. The same foreground,
   highlight and stroke treatment follows the user's active palette/accent. */
html[data-theme] body#studyTickApp {
  --st-nav-icon-ink:var(--sc-accent-strong);
  --st-nav-icon-specular:transparent;
  --st-nav-icon-halo:color-mix(in srgb,var(--sc-accent-strong) 18%,transparent);
}
html[data-theme] body#studyTickApp header#studyTickHeader.st-refined nav.st-toolbar
:is(#stNavDashboard,.group-timer-nav,#stTimetableNav,#stReflectNav,#stTickNotesNav,#focusView,#brainDumpReview,#lowStimulationToggle,#studyTickMenu,#stNavLayoutShortcut) > :is(svg,.st-nav-glyph,.st-icon),
html[data-theme] body#studyTickApp #stNavSidebar
:is(.st-nav-action,#studyTickMenu,#stNavLayoutShortcut,#stNavCollapse) > :is(svg,.st-nav-glyph,.st-icon) {
  color:var(--st-nav-icon-ink)!important;
  /* Subpixel top highlight + low-radius mint reflection: no neon or flashing. */
  filter:drop-shadow(0 -1px .6px var(--st-nav-icon-specular))
         drop-shadow(0 1px 2px var(--st-nav-icon-halo))!important;
  transition:filter .22s ease,transform .22s ease,color .22s ease;
}
html[data-theme] body#studyTickApp header#studyTickHeader.st-refined nav.st-toolbar
:is(#stNavDashboard,.group-timer-nav,#stTimetableNav,#stReflectNav,#stTickNotesNav,#focusView,#brainDumpReview,#lowStimulationToggle,#studyTickMenu,#stNavLayoutShortcut):is(:hover,:focus-visible) > :is(svg,.st-nav-glyph,.st-icon),
html[data-theme] body#studyTickApp #stNavSidebar
:is(.st-nav-action,#studyTickMenu,#stNavLayoutShortcut,#stNavCollapse):is(:hover,:focus-visible) > :is(svg,.st-nav-glyph,.st-icon) {
  transform:translateY(-1px);
  filter:drop-shadow(0 -1px .7px var(--st-nav-icon-specular))
         drop-shadow(0 1px 4px var(--st-nav-icon-halo))!important;
}
@media(prefers-reduced-motion:reduce) {
  html[data-theme] body#studyTickApp header#studyTickHeader.st-refined nav.st-toolbar
  :is(.st-nav-action,#studyTickMenu,#stNavLayoutShortcut) > svg,
  html[data-theme] body#studyTickApp #stNavSidebar
  :is(.st-nav-action,#studyTickMenu,#stNavLayoutShortcut,#stNavCollapse) > svg {
    transition:none!important;
    transform:none!important;
  }
}

/* Compact, no-horizontal-scroll navigation. Existing buttons, visual palette,
   labels, icons and handlers remain unchanged; breakpoints only adjust geometry. */
@media (min-width:861px){
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar {
    flex-wrap:nowrap!important;
    gap:6px!important;
    padding:8px 9px!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar .st-primary {
    display:flex!important;
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    gap:6px!important;
    padding:0!important;
    justify-content:flex-start!important;
    align-items:center!important;
    overflow:visible!important;
    scrollbar-width:none!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar .st-primary > :is(
    #stNavDashboard,.group-timer-nav,#stTimetableNav,#stReflectNav,#stTickNotesNav,#focusView,#brainDumpReview
  ){
    flex:0 1 auto!important;
    box-sizing:border-box!important;
    width:auto!important;
    min-width:0!important;
    min-height:44px!important;
    height:44px!important;
    max-height:44px!important;
    padding:7px 8px!important;
    gap:6px!important;
    font-size:12.5px!important;
    font-weight:600!important;
    letter-spacing:-.018em!important;
    white-space:nowrap!important;
    margin:0!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar .st-primary > #focusView{
    margin-inline-start:0!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar .st-primary > :is(
    #stNavDashboard,.group-timer-nav,#stTimetableNav,#stReflectNav,#stTickNotesNav,#focusView,#brainDumpReview
  ) > :is(svg,.st-nav-glyph,.st-icon) {
    width:17px!important;
    height:17px!important;
    min-width:17px!important;
    max-width:17px!important;
    max-height:17px!important;
    flex:0 0 17px!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar .st-utility {
    display:flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    gap:6px!important;
    padding-inline-start:7px!important;
    margin-inline-start:auto!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar #studyTickMenu{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:74px!important;
    max-width:none!important;
    min-height:44px!important;
    height:44px!important;
    max-height:44px!important;
    padding:7px 9px!important;
    font-size:12.5px!important;
    gap:6px!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar #studyTickMenu::after{
    font-size:12.5px!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar #stNavLayoutShortcut{
    box-sizing:border-box!important;
    flex:0 0 44px!important;
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    min-height:44px!important;
    height:44px!important;
    max-height:44px!important;
    padding:9px!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar .st-clock{
    flex:0 0 auto!important;
    min-width:0!important;
    margin:0!important;
    padding:0 0 0 5px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }
}
/* Below wide desktop, give the actions a clean second line instead of a
   clipped or horizontally scrollable bar. All seven keep readable labels. */
@media (min-width:861px) and (max-width:1350px){
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar{
    flex-wrap:wrap!important;
    justify-content:space-between!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar .st-utility{
    order:0!important;
    margin-inline-start:0!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar .st-clock{
    order:1!important;
    margin-inline-start:auto!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar .st-primary{
    order:2!important;
    flex:1 1 100%!important;
    width:100%!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:7px!important;
  }
}
/* Phones and tablets: balanced two/three-column button grid rather than swipe
   navigation; row height grows naturally for localized or long labels. */
@media (max-width:860px){
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar .st-primary{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    flex:1 1 100%!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:7px!important;
    padding:0!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
    scrollbar-width:none!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar .st-primary > :is(
    #stNavDashboard,.group-timer-nav,#stTimetableNav,#stReflectNav,#stTickNotesNav,#focusView,#brainDumpReview
  ){
    box-sizing:border-box!important;
    display:inline-flex!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    flex:unset!important;
    min-height:44px!important;
    height:auto!important;
    max-height:none!important;
    padding:8px 7px!important;
    gap:6px!important;
    font-size:13px!important;
    font-weight:600!important;
    line-height:1.2!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-align:center!important;
    margin:0!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar .st-primary > :is(
    #stNavDashboard,.group-timer-nav,#stTimetableNav,#stReflectNav,#stTickNotesNav,#focusView,#brainDumpReview
  ) > :is(svg,.st-nav-glyph,.st-icon){
    width:17px!important;
    height:17px!important;
    min-width:17px!important;
    max-width:17px!important;
    max-height:17px!important;
    flex:0 0 17px!important;
  }
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar #studyTickMenu{
    font-size:13px!important;
  }
}
@media (min-width:601px) and (max-width:860px){
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar .st-primary{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* Brain Dump may be reparented by the mobile dashboard composition.
   Keep its typography consistent even when it is no longer a direct grid child. */
@media (max-width:860px){
  html[data-theme] body#studyTickApp[data-st-nav-layout="horizontal"]
  header#studyTickHeader.st-refined nav.st-toolbar #brainDumpReview{
    font-size:13px!important;
  }
}

/* Color consistency: icon, collapse, Menu and layout switch inherit the same
   theme. Only the current destination has a stronger accent treatment. */
html[data-theme] body#studyTickApp[data-st-nav-layout="vertical"] #stNavSidebar
 .st-nav-action:is(.st-nav-active,[aria-current="page"]){
  background:var(--st-unified-nav-selected)!important;
  border-color:var(--st-unified-nav-selected-border)!important;
  color:var(--st-unified-nav-selected-text)!important;
  box-shadow:inset 3px 0 0 var(--st-unified-nav-selected-border)!important;
}
html[data-theme] body#studyTickApp[data-st-nav-layout="vertical"] #stNavSidebar
 :is(.st-nav-action,#studyTickMenu,#stNavLayoutShortcut,#stNavCollapse) > :is(svg,.st-nav-glyph,.st-icon){
  color:var(--st-unified-nav-text)!important;
}
html[data-theme] body#studyTickApp[data-st-nav-layout="vertical"] #stNavSidebar
 .st-nav-action:is(.st-nav-active,[aria-current="page"]) > :is(svg,.st-nav-glyph,.st-icon){
  color:var(--sc-accent-strong)!important;
}
@media(prefers-reduced-motion:reduce){
 html[data-theme] body#studyTickApp[data-st-nav-layout="vertical"] #stNavSidebar :is(.st-nav-action,#studyTickMenu,#stNavLayoutShortcut,#stNavCollapse) > svg{transform:none!important;transition:none!important}
}