/* StudyTickApp visual refresh • 2026-10-29
   A presentation-only pass. All colors inherit the active user palette.
   Timer, note, account, navigation, calendar and collaboration logic remain untouched. */
:root{
  --st-vr-radius:22px;
  --st-vr-radius-lg:28px;
  --st-vr-edge:color-mix(in srgb,var(--sc-border) 78%,var(--sc-accent-strong) 22%);
  --st-vr-tint:color-mix(in srgb,var(--sc-accent-soft) 54%,var(--sc-surface) 46%);
  --st-vr-shadow:0 12px 36px rgba(8,20,24,.07),0 2px 7px rgba(8,20,24,.035);
  --st-vr-shadow-hover:0 18px 42px rgba(8,20,24,.11),0 3px 9px rgba(8,20,24,.04);
}
html[data-theme="dark"]{
  --st-vr-shadow:0 16px 42px rgba(0,0,0,.18),0 2px 7px rgba(0,0,0,.09);
  --st-vr-shadow-hover:0 20px 46px rgba(0,0,0,.25),0 3px 12px rgba(0,0,0,.12);
}
@media(prefers-reduced-motion:no-preference){
  html[data-theme] body :is(.today-exam,.today-progress-card,.today-timeline-card,
    .group-setup .group-card,.group-clock-card,.group-side .group-card,
    .group-collab-card,.ticknotes-controls,.tick-calendar,.tools .card){
    transition:box-shadow .22s ease,border-color .22s ease,background-color .22s ease;
  }
}

/* Dashboard: one clear hero and quieter supporting surfaces. */
html[data-theme] body.today-dashboard-preview:not(.focus-view):not(.low-stimulation):not(.low-stimulation-mode){
  background-color:var(--sc-bg);
  background-image:
    radial-gradient(ellipse 700px 420px at 8% -130px,color-mix(in srgb,var(--sc-accent-strong) 10%,transparent),transparent 74%),
    radial-gradient(ellipse 650px 420px at 96% 20%,color-mix(in srgb,var(--sc-accent-soft) 32%,transparent),transparent 76%);
  background-repeat:no-repeat;
}
html[data-theme] body.today-dashboard-preview:not(.focus-view) main#main{
  padding-inline:clamp(14px,2.8vw,36px);
}
html[data-theme] body.today-dashboard-preview:not(.focus-view) .today-signature{
  row-gap:clamp(18px,2.3vw,28px);
}
html[data-theme] body.today-dashboard-preview:not(.focus-view):not(.low-stimulation) .today-signature-head{
  min-width:0;
  padding:clamp(20px,3vw,38px);
  border:1px solid var(--st-vr-edge);
  border-radius:var(--st-vr-radius-lg);
  background:linear-gradient(112deg,var(--sc-surface) 5%,var(--st-vr-tint) 100%);
  box-shadow:var(--st-vr-shadow);
}
html[data-theme] body.today-dashboard-preview:not(.focus-view) .today-intro{
  padding:4px 0;
  min-width:0;
}
html[data-theme] body.today-dashboard-preview:not(.focus-view) .today-kicker{
  display:inline-flex;
  align-self:flex-start;
  align-items:center;
  padding:6px 11px;
  border-radius:999px;
  background:var(--sc-accent-soft);
  color:var(--sc-accent-strong);
  font-size:11px;
  letter-spacing:.12em;
  font-weight:750;
}
html[data-theme] body.today-dashboard-preview:not(.focus-view) .today-greeting{
  color:var(--sc-text)!important;
  font-size:clamp(32px,4.5vw,58px);
  letter-spacing:-.025em;
  line-height:1.13;
  max-width:17ch;
}
html[data-theme] body.today-dashboard-preview:not(.focus-view) .today-date{
  color:var(--sc-muted);
  font-size:clamp(14px,1.4vw,17px);
  line-height:1.6;
}
html[data-theme] body.today-dashboard-preview:not(.focus-view) .today-exam,
html[data-theme] body.today-dashboard-preview:not(.focus-view) .exam-countdown-card{
  border-radius:20px;
  border-color:var(--sc-border)!important;
  background:var(--sc-surface)!important;
  box-shadow:0 5px 18px rgba(10,20,25,.06);
}
html[data-theme] body.today-dashboard-preview:not(.focus-view) .today-exam h3{
  color:var(--sc-muted)!important;
}
html[data-theme] body.today-dashboard-preview:not(.focus-view) .today-exam :is(.exam-countdown-main,#homeExamResult){
  color:var(--sc-text);
}
html[data-theme] body.today-dashboard-preview:not(.focus-view) .today-exam .exam-countdown-date{
  color:var(--sc-muted);
}
html[data-theme] body.today-dashboard-preview:not(.focus-view) .focus{
  border-radius:var(--st-vr-radius-lg);
  border:1px solid var(--sc-focus-border);
  box-shadow:var(--st-vr-shadow);
}
html[data-theme] body.today-dashboard-preview:not(.focus-view) .focus .timer{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.045em;
}
html[data-theme] body.today-dashboard-preview:not(.focus-view) :is(
  .today-progress-card,.today-timeline-card,.today-manage-heading,.today-quick-actions,
  .schedule,.resources.studytick-help
){
  border-radius:var(--st-vr-radius)!important;
  border-color:var(--sc-border);
  box-shadow:var(--st-vr-shadow);
}
html[data-theme] body.today-dashboard-preview:not(.focus-view) :is(
  .today-progress-card,.today-timeline-card
){padding:clamp(18px,2.3vw,28px)}
html[data-theme] body.today-dashboard-preview:not(.focus-view) .today-section-label{
  letter-spacing:.09em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:750;
}
html[data-theme] body.today-dashboard-preview:not(.focus-view) .today-timeline-task{
  font-weight:700;
  line-height:1.4;
}
html[data-theme] body.today-dashboard-preview:not(.focus-view) .today-quick-actions{
  background:var(--sc-surface)!important;
}
html[data-theme] body.today-dashboard-preview:not(.focus-view) .studytick-help-grid{
  gap:clamp(12px,1.8vw,22px);
}
html[data-theme] body.today-dashboard-preview:not(.focus-view) .studytick-help-group{
  min-width:0;
}
@media(hover:hover) and (pointer:fine){
  html[data-theme] body.today-dashboard-preview:not(.focus-view)
  :is(.today-exam,.today-progress-card,.today-timeline-card):hover{
    box-shadow:var(--st-vr-shadow-hover);
    border-color:var(--st-vr-edge)!important;
  }
}

/* Shared study spaces: visually group the room setup, clock and collaboration. */
html[data-theme] body.group-timer-page{
  background-color:var(--sc-bg);
  background-image:radial-gradient(ellipse 800px 440px at 50% -220px,
    color-mix(in srgb,var(--sc-accent-strong) 11%,transparent),transparent 80%);
  background-repeat:no-repeat;
}
html[data-theme] body.group-timer-page .group-wrap{
  max-width:1240px;
  padding-block:clamp(20px,3.5vw,44px) 80px;
  padding-inline:clamp(14px,2.8vw,34px);
}
html[data-theme] body.group-timer-page .group-intro{
  max-width:760px;
}
html[data-theme] body.group-timer-page .group-intro h1{
  color:var(--sc-text);
  font-size:clamp(34px,4.6vw,56px);
  letter-spacing:-.025em;
  line-height:1.14;
}
html[data-theme] body.group-timer-page .group-kicker{
  display:inline-block;
  color:var(--sc-accent-strong);
  letter-spacing:.13em;
}
html[data-theme] body.group-timer-page .group-intro>p:last-child{
  color:var(--sc-muted);
  max-width:66ch;
}
html[data-theme] body.group-timer-page :is(
  .group-setup .group-card,.group-clock-card,.group-side .group-card,
  .group-collab-card,.group-session-summary
){
  border:1px solid var(--sc-border)!important;
  border-radius:var(--st-vr-radius)!important;
  background-color:var(--sc-surface)!important;
  box-shadow:var(--st-vr-shadow);
}
html[data-theme] body.group-timer-page .group-clock-card{
  background-image:linear-gradient(150deg,
    color-mix(in srgb,var(--sc-accent-soft) 35%,var(--sc-surface)),
    var(--sc-surface) 65%)!important;
}
html[data-theme] body.group-timer-page :is(
  .group-setup .group-card,.group-side .group-card,.group-collab-card
){padding:clamp(18px,2.3vw,28px)}
html[data-theme] body.group-timer-page :is(.group-card h2,.group-room-heading h2){
  color:var(--sc-text);
}
html[data-theme] body.group-timer-page :is(.group-muted,.group-small){
  color:var(--sc-muted);
}
@media(hover:hover) and (pointer:fine){
  html[data-theme] body.group-timer-page :is(
    .group-setup .group-card,.group-side .group-card,.group-collab-card
  ):hover{
    box-shadow:var(--st-vr-shadow-hover);
    border-color:var(--st-vr-edge)!important;
  }
}

/* TickNotes: improve the workspace chrome without touching editable paper. */
html[data-theme] body.ticknotes-page{
  background-color:var(--sc-bg);
  background-image:radial-gradient(ellipse 760px 400px at 60% -170px,
    color-mix(in srgb,var(--sc-accent-strong) 9%,transparent),transparent 78%);
  background-repeat:no-repeat;
}
html[data-theme] body.ticknotes-page .ticknotes-main{
  padding-block-start:clamp(20px,3vw,38px);
}
html[data-theme] body.ticknotes-page .ticknotes-overview{
  padding:clamp(19px,2.7vw,32px);
  margin-bottom:18px;
  border:1px solid var(--sc-border);
  border-radius:var(--st-vr-radius-lg);
  background:linear-gradient(115deg,var(--sc-surface) 15%,var(--st-vr-tint));
  box-shadow:var(--st-vr-shadow);
}
html[data-theme] body.ticknotes-page .ticknotes-overview h1{
  color:var(--sc-text);
  letter-spacing:-.025em;
  line-height:1.16;
}
html[data-theme] body.ticknotes-page .tick-kicker{
  color:var(--sc-accent-strong);
}
html[data-theme] body.ticknotes-page .tick-subtitle{
  color:var(--sc-muted);
  max-width:65ch;
  line-height:1.55;
}
html[data-theme] body.ticknotes-page :is(
  .ticknotes-controls,.tick-calendar,.tick-import-banner,.tick-conflict
){
  border-color:var(--sc-border);
  border-radius:18px;
  box-shadow:var(--st-vr-shadow);
}
html[data-theme] body.ticknotes-page .ticknotes-controls{
  padding:clamp(12px,1.8vw,19px);
  gap:12px;
}
html[data-theme] body.ticknotes-page .tick-layout-chooser{
  border-radius:16px;
}
html[data-theme] body.ticknotes-page .tick-account-state{
  color:var(--sc-muted);
}

/* Public overview: a modern, readable feature-discovery page. */
html[data-theme] body:has(>main#content>.hero){
  background-color:var(--sc-bg);
  background-image:radial-gradient(ellipse 820px 480px at 70% 0,
    color-mix(in srgb,var(--sc-accent-strong) 12%,transparent),transparent 83%);
  background-repeat:no-repeat;
}
html[data-theme] body:has(>main#content>.hero) #content{
  max-width:1160px;
  padding-inline:clamp(16px,3vw,36px);
}
html[data-theme] body:has(>main#content>.hero) #content>header{
  padding:16px 0 24px;
}
html[data-theme] body:has(>main#content>.hero) .hero{
  position:relative;
  overflow:hidden;
  padding:clamp(28px,5vw,62px);
  margin:22px 0 44px;
  border:1px solid var(--st-vr-edge);
  border-radius:32px;
  background:linear-gradient(118deg,var(--sc-surface) 14%,var(--st-vr-tint) 100%);
  box-shadow:var(--st-vr-shadow);
}
html[data-theme] body:has(>main#content>.hero) .hero h1{
  color:var(--sc-text);
  font-size:clamp(39px,5.1vw,68px);
  line-height:1.08;
  letter-spacing:-.035em;
  max-width:17ch;
}
html[data-theme] body:has(>main#content>.hero) .hero .intro{
  color:var(--sc-muted);
  font-size:clamp(16px,1.8vw,19px);
  line-height:1.65;
  max-width:65ch;
}
html[data-theme] body:has(>main#content>.hero) .hero .eyebrow{
  display:inline-flex;
  padding:7px 13px;
  border-radius:999px;
  background:var(--sc-accent-soft);
  color:var(--sc-accent-strong);
  font-size:12px;
  letter-spacing:.045em;
}
html[data-theme] body:has(>main#content>.hero) .hero .actions{
  gap:12px;
  margin-block:27px 18px;
}
html[data-theme] body:has(>main#content>.hero) .hero .button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 21px;
  border-radius:12px;
  border-color:var(--sc-border);
  background:var(--sc-surface);
  color:var(--sc-text);
  font-size:15px;
  box-shadow:0 3px 10px rgba(8,20,24,.06);
}
html[data-theme] body:has(>main#content>.hero) .hero .button.primary{
  border-color:var(--sc-accent)!important;
  background:var(--sc-accent)!important;
  color:var(--st-colors-on-accent,#172841)!important;
}
html[data-theme] body:has(>main#content>.hero) #content>.hero+section>h2{
  font-size:clamp(27px,3vw,37px);
  margin-bottom:23px;
}
html[data-theme] body:has(>main#content>.hero) .tools{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
html[data-theme] body:has(>main#content>.hero) .tools .card,
html[data-theme] body:has(>main#content>.hero) #content>section.card{
  border-color:var(--sc-border);
  border-radius:var(--st-vr-radius);
  background:var(--sc-surface);
  padding:clamp(20px,2.5vw,30px);
  box-shadow:var(--st-vr-shadow);
}
html[data-theme] body:has(>main#content>.hero) .tools .card h3{
  color:var(--sc-text);
  font-size:20px;
  margin-top:0;
}
html[data-theme] body:has(>main#content>.hero) .tools .card p,
html[data-theme] body:has(>main#content>.hero) #content>section.card p{
  color:var(--sc-muted);
  font-size:15px;
  line-height:1.7;
}
html[data-theme] body:has(>main#content>.hero) .tools .card a{
  font-weight:700;
  text-underline-offset:4px;
}
html[data-theme] body:has(>main#content>.hero) #content>section.card{
  margin-block:20px;
}
@media(hover:hover) and (pointer:fine){
  html[data-theme] body:has(>main#content>.hero) .tools .card:hover{
    box-shadow:var(--st-vr-shadow-hover);
    border-color:var(--st-vr-edge);
  }
}
@media(max-width:760px){
  html[data-theme] body.today-dashboard-preview:not(.focus-view):not(.low-stimulation) .today-signature-head{
    padding:20px;
  }
  html[data-theme] body.today-dashboard-preview:not(.focus-view) .today-greeting{font-size:clamp(30px,8vw,44px)}
  html[data-theme] body.group-timer-page .group-wrap{padding-inline:14px}
  html[data-theme] body.ticknotes-page .ticknotes-overview{padding:18px}
  html[data-theme] body:has(>main#content>.hero) .hero{
    padding:clamp(22px,6vw,34px);
    margin:12px 0 32px;
    border-radius:24px;
  }
  html[data-theme] body:has(>main#content>.hero) .tools{grid-template-columns:1fr}
}
@media(max-width:480px){
  html[data-theme] body.today-dashboard-preview:not(.focus-view) main#main{padding-inline:12px}
  html[data-theme] body.today-dashboard-preview:not(.focus-view):not(.low-stimulation) .today-signature-head{padding:16px}
  html[data-theme] body.today-dashboard-preview:not(.focus-view) .today-kicker{font-size:10px}
  html[data-theme] body.group-timer-page :is(.group-setup .group-card,.group-side .group-card,.group-collab-card){padding:16px}
  html[data-theme] body.ticknotes-page .ticknotes-overview{border-radius:20px}
  html[data-theme] body:has(>main#content>.hero) .hero h1{font-size:clamp(34px,10vw,43px)}
}
@media(prefers-reduced-motion:reduce){
  html[data-theme] body :is(.today-exam,.today-progress-card,.today-timeline-card,
    .group-setup .group-card,.group-clock-card,.group-side .group-card,
    .group-collab-card,.ticknotes-controls,.tick-calendar,.tools .card){transition:none}
}