/* Aarekh - shared stylesheet.
   Palette: warm "paper" neutrals, one deep-teal accent, amber for goals/today.
   Every pair is measured - run contrast_check.py after changing a colour. */

:root {
  --md-primary:                 #0F6B5F;
  --md-on-primary:              #FFFFFF;
  --md-primary-container:       #D7EDE8;
  --md-on-primary-container:    #0A3D36;
  --md-secondary:               #57534E;
  --md-on-secondary:            #FFFFFF;
  --md-secondary-container:     #E9EFEC;
  --md-on-secondary-container:  #0A3D36;
  --md-tertiary:                #A85A0C;
  --md-on-tertiary:             #FFFFFF;
  --md-tertiary-container:      #F8E9D4;
  --md-on-tertiary-container:   #4A2805;
  --md-error:                   #B42318;
  --md-on-error:                #FFFFFF;
  --md-error-container:         #FDE7E4;
  --md-on-error-container:      #7A271A;
  --md-surface:                 #F3F1ED;
  --md-on-surface:              #1C1917;
  --md-on-surface-variant:      #57534E;
  --md-outline:                 #8F8881;
  --md-outline-variant:         #E4E0D9;
  --md-surface-low:             #FDFCFA;
  --md-surface-container:       #FDFCFA;
  --md-surface-high:            #F0EDE8;
  --md-surface-highest:         #E4E0D9;
  --md-inverse-surface:         #292524;
  --md-inverse-on-surface:      #F3F1ED;
  --md-scrim:                   rgba(28, 25, 23, 0.42);
  --md-shadow-1: 0 1px 2px rgba(28,25,23,.06);
  --md-shadow-2: 0 8px 24px rgba(28,25,23,.10), 0 1px 3px rgba(28,25,23,.08);
  --heat-empty:                 #D9D4CB;
  --glow:                       #0E9C89;  /* bright variant of the accent: today's goal progress (3.3:1 on cards) */
  --goal:                       var(--glow);
  --star:                       #F4B400;  /* importance stars */
}
:root[data-theme="dark"] {
  --md-primary:                 #5CC2B1;
  --md-on-primary:              #062B26;
  --md-primary-container:       #173F39;
  --md-on-primary-container:    #BDEDE4;
  --md-secondary:               #ABA59D;
  --md-on-secondary:            #1A1917;
  --md-secondary-container:     #2A3532;
  --md-on-secondary-container:  #BDEDE4;
  --md-tertiary:                #E9AE5B;
  --md-on-tertiary:             #3A2105;
  --md-tertiary-container:      #4A3418;
  --md-on-tertiary-container:   #F8E9D4;
  --md-error:                   #F97066;
  --md-on-error:                #55160C;
  --md-error-container:         #5C1F17;
  --md-on-error-container:      #FDE7E4;
  --md-surface:                 #242320;
  --md-on-surface:              #EDEAE5;
  --md-on-surface-variant:      #B3ADA5;
  --md-outline:                 #857F77;
  --md-outline-variant:         #423F3B;
  --md-surface-low:             #2D2B28;
  --md-surface-container:       #2D2B28;
  --md-surface-high:            #363431;
  --md-surface-highest:         #423F3B;
  --md-inverse-surface:         #EDEAE5;
  --md-inverse-on-surface:      #2D2B28;
  --md-scrim:                   rgba(0,0,0,.6);
  --md-shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --md-shadow-2: 0 8px 24px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
  --heat-empty:                 #4C4843;
  --glow:                       #4FF0D2;
  --goal:                       var(--glow);
  --star:                       #FFCC33;
}
:root {
  --shape-xs:3px; --shape-sm:5px; --shape-md:6px;
  --shape-lg:8px; --shape-xl:10px; --shape-full:6px;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --ease-emphasized: cubic-bezier(.2,0,0,1);
  --dur-short:150ms; --dur-medium:300ms;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* numbers: Inter with tabular figures - fixed width like a mono font, but a plain 0 */
  --mono:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --content-w:1240px;
}

/* ── base ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { width:100%; }
html,body { background:var(--md-surface); }
body {
  width:100%; min-height:100vh;
  font-family:var(--font); font-size:14px; line-height:1.5;
  color:var(--md-on-surface);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11","ss01";
}
button,input,textarea,select { font-family:inherit; font-size:inherit; color:inherit; }
button { cursor:pointer; background:none; border:none; }
a { color:var(--md-primary); }
:focus-visible { outline:2px solid var(--md-primary); outline-offset:2px; border-radius:var(--shape-xs); }
[hidden] { display:none !important; }
.t-label { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--md-on-surface-variant); }
.muted { color:var(--md-on-surface-variant); }
.mono { font-family:var(--mono);font-variant-numeric:tabular-nums; }
kbd { font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:10.5px; padding:1px 5px; border-radius:var(--shape-xs); background:var(--md-surface-high); border:1px solid var(--md-outline-variant); color:var(--md-on-surface); }

/* ── app header (rendered by shell.js on every signed-in page) ── */
.appbar {
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--md-surface-container) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--md-outline-variant);
}
.appbar-inner {
  max-width:var(--content-w); margin:0 auto; height:56px; padding:0 24px;
  display:flex; align-items:center; gap:28px;
}
.brand {
  display:inline-flex; align-items:center; gap:9px; flex-shrink:0;
  font-size:15.5px; font-weight:650; letter-spacing:-.01em;
  color:var(--md-on-surface); text-decoration:none;
}
.brand-mark {
  /* the TMRM mark, tinted with the theme accent through a mask */
  width:16px; height:26px; flex-shrink:0; background:var(--md-primary);
  -webkit-mask:url(/logo.svg) center/contain no-repeat; mask:url(/logo.svg) center/contain no-repeat;
}
.topnav { display:flex; align-items:stretch; gap:4px; height:100%; }
.topnav a {
  display:flex; align-items:center; padding:0 10px;
  font-size:13.5px; font-weight:500; color:var(--md-on-surface-variant); text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--dur-short) var(--ease-standard),border-color var(--dur-short) var(--ease-standard);
}
.topnav a:hover { color:var(--md-on-surface); }
.topnav a[aria-current="page"] { color:var(--md-on-surface); border-bottom-color:var(--md-primary); }
.appbar-actions { margin-left:auto; display:flex; align-items:center; gap:4px; }
.appbar-extras { display:contents; }

/* running-timer pill: visible on every page except while the timer itself is on screen */
.timer-pill {
  display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px; margin-right:6px;
  border-radius:2px; background:var(--md-primary-container); color:var(--md-on-primary-container);
  font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:500; text-decoration:none; white-space:nowrap;
  max-width:260px; overflow:hidden; text-overflow:ellipsis;
}
.timer-pill .tp-dot { width:7px; height:7px; border-radius:50%; background:var(--md-primary); flex-shrink:0; animation:tp-pulse 1.6s ease-in-out infinite; }
.timer-pill.paused .tp-dot { animation:none; background:var(--md-outline); }
.timer-pill.break { background:var(--md-tertiary-container); color:var(--md-on-tertiary-container); }
.timer-pill.break .tp-dot { background:var(--md-tertiary); }
@keyframes tp-pulse { 50% { opacity:.35; } }

.icon-btn {
  width:34px; height:34px; display:grid; place-items:center; flex-shrink:0;
  border-radius:var(--shape-md); color:var(--md-on-surface-variant);
  transition:background var(--dur-short) var(--ease-standard),color var(--dur-short) var(--ease-standard);
}
.icon-btn:hover { background:var(--md-surface-high); color:var(--md-on-surface); }
.icon-btn svg { width:19px; height:19px; fill:currentColor; }
.icon-btn.sm { width:28px; height:28px; }
.icon-btn.sm svg { width:16px; height:16px; }
.avatar-btn { display:grid; place-items:center; width:34px; height:34px; border-radius:var(--shape-md); margin-left:4px; }
.avatar-btn:hover { background:var(--md-surface-high); }
.avatar {
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--md-primary-container); color:var(--md-on-primary-container);
  font-size:12px; font-weight:600; text-transform:uppercase;
}
.avatar-btn .menu-icon { display:none; width:20px; height:20px; fill:var(--md-on-surface-variant); }

/* account / mobile menu */
.hamburger-wrap { position:relative; }
.hamburger-menu {
  position:absolute; top:calc(100% + 8px); right:0; z-index:35;
  min-width:220px; padding:6px;
  background:var(--md-surface-container); border:1px solid var(--md-outline-variant);
  border-radius:var(--shape-lg); box-shadow:var(--md-shadow-2);
  display:none; flex-direction:column;
}
.hamburger-menu.open { display:flex; }
.ham-section { padding:8px 10px 4px; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--md-on-surface-variant); }
.ham-divider { height:1px; background:var(--md-outline-variant); margin:6px 0; }
.ham-link {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:7px 10px; border-radius:var(--shape-sm);
  font-size:13.5px; color:var(--md-on-surface); text-decoration:none; text-align:left; cursor:pointer;
}
.ham-link:hover { background:var(--md-surface-high); }
.ham-email { color:var(--md-on-surface-variant); cursor:default; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; }
.ham-email:hover { background:none; }
.ham-nav { display:none; flex-direction:column; }
.ham-nav a[aria-current="page"] { color:var(--md-primary); font-weight:600; }

/* ── page containers ── */
.app, .view { max-width:var(--content-w); margin:0 auto; padding:28px 24px 48px; display:flex; flex-direction:column; gap:16px; }
.lit-app { max-width:var(--content-w) !important; padding:28px 24px 48px !important; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.page-title { font-size:22px; font-weight:650; letter-spacing:-.015em; line-height:1.25; }
.page-sub { font-size:13.5px; color:var(--md-on-surface-variant); margin-top:3px; }
.page-actions { display:flex; gap:8px; align-items:center; }

/* ── buttons ── */
.fab, .btn-primary {
  height:36px; min-width:72px; padding:0 14px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border-radius:var(--shape-md); background:var(--md-primary); color:var(--md-on-primary);
  font-size:13.5px; font-weight:550; text-decoration:none; box-shadow:var(--md-shadow-1);
  transition:filter var(--dur-short) var(--ease-standard),transform var(--dur-short) var(--ease-standard);
}
.fab:hover, .btn-primary:hover { filter:brightness(1.08); }
.fab:active, .btn-primary:active, .tonal:active, .btn-secondary:active { transform:scale(.98); }
.fab svg, .btn-primary svg, .tonal svg, .btn-secondary svg { width:17px; height:17px; fill:currentColor; }
.fab:disabled { opacity:.6; cursor:default; }
.tonal, .btn-secondary {
  height:36px; padding:0 14px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border-radius:var(--shape-md); border:1px solid var(--md-outline-variant);
  background:var(--md-surface-container); color:var(--md-on-surface);
  font-size:13.5px; font-weight:550; text-decoration:none; white-space:nowrap;
  transition:background var(--dur-short) var(--ease-standard);
}
.tonal:hover, .btn-secondary:hover { background:var(--md-surface-high); }
.btn-danger { color:var(--md-error); }
.btn-lg { height:44px; padding:0 22px; font-size:14.5px; }
.link-btn { color:var(--md-primary); font-size:13px; font-weight:550; text-decoration:none; }
.link-btn:hover { text-decoration:underline; }

/* ── form fields ── */
.field {
  width:100%; height:36px; padding:0 11px;
  border-radius:var(--shape-md); border:1px solid var(--md-outline-variant);
  background:var(--md-surface-container); color:var(--md-on-surface);
  transition:border-color var(--dur-short) var(--ease-standard),box-shadow var(--dur-short) var(--ease-standard);
}
.field::placeholder { color:var(--md-on-surface-variant); opacity:.75; }
.field:hover { border-color:var(--md-outline); }
.field:focus { outline:none; border-color:var(--md-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--md-primary) 18%, transparent); }
textarea.field { height:auto; padding:9px 11px; resize:vertical; line-height:1.55; }

/* ── cards ── */
.card {
  background:var(--md-surface-container);
  border:1px solid var(--md-outline-variant);
  border-radius:var(--shape-xl);
  padding:18px;
  box-shadow:var(--md-shadow-1);
  min-width:0;
}
.card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; min-height:28px; }
.card-title { font-size:14px; font-weight:600; letter-spacing:-.005em; }
.card-meta { font-size:12.5px; color:var(--md-on-surface-variant); }
.card-tools { display:flex; align-items:center; gap:2px; }
.empty { padding:10px 0; color:var(--md-on-surface-variant); font-size:13px; }
.empty button { color:var(--md-primary); font-weight:550; }
.empty button:hover { text-decoration:underline; }

.offline-note { display:none; padding:9px 14px; border-radius:var(--shape-md); background:var(--md-error-container); color:var(--md-on-error-container); font-size:12.5px; }
.offline-note.show { display:block; }
/* unverified email: a floating capsule, bottom right, on every page (auth.js) */
.verify-fab { position:fixed; right:24px; bottom:24px; z-index:50; display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 20px 0 16px;
  border-radius:24px; background:var(--md-primary-container); color:var(--md-on-primary-container); font-size:14px; font-weight:600; box-shadow:var(--md-shadow-2); }
.verify-fab:hover { filter:brightness(.97); box-shadow:0 4px 14px rgba(0,0,0,.18); }
.verify-fab svg { width:20px; height:20px; fill:currentColor; }
@media (max-width:600px) { .verify-fab { right:16px; bottom:16px; } }
/* signed-out visitors (guest.js): what an account adds, with the sign-up button */
.guest-notice { flex-wrap:wrap; gap:10px 12px; padding:12px 14px; }
.guest-notice > span:not(.guest-actions) { flex:1 1 320px; line-height:1.5; }
.guest-actions { display:flex; align-items:center; gap:16px; margin-left:auto; white-space:nowrap; }
.guest-notice .btn-primary { text-decoration:none; }
/* wrapped under the text on narrow screens: line the actions up with it, not the icon */
@media (max-width:600px){ .guest-actions { margin-left:24px; } }

.progress-track { height:6px; width:100%; background:var(--md-surface-highest); border-radius:var(--shape-full); overflow:hidden; }
.progress-fill { height:100%; width:0; background:var(--md-primary); border-radius:var(--shape-full); transition:width 900ms var(--ease-standard); }
.progress-fill.goal { background:var(--md-tertiary); }

/* ═════════════ TODAY ═════════════ */
.view { display:none; }
body[data-view="today"] .view-today,
body[data-view="journey"] .view-journey,
body[data-view="settings"] .view-settings { display:flex; }

/* this-week bars (Journey stat tile) */
.hs-bar { width:7px; border-radius:2px; background:color-mix(in srgb, var(--md-primary) 55%, var(--heat-empty)); }
.hs-bar.met { background:var(--md-primary); }
.hs-bar.zero { height:2px !important; background:var(--md-outline-variant); }

.today-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr); gap:16px; align-items:stretch; }
.today-col { display:flex; flex-direction:column; gap:16px; min-width:0; }
.today-grid.no-side { grid-template-columns:1fr; }

/* focus card */
.focus-card { padding:22px 24px 0; display:flex; flex-direction:column; }
.focus-card .focus-layout { padding-bottom:20px; }
.day-bar { margin:0 -24px; border-top:1px solid var(--md-outline-variant); }
.day-bar-text { padding:10px 24px 9px; font-size:13px; color:var(--md-on-surface-variant); }
.day-bar-text strong { font-family:var(--mono);font-variant-numeric:tabular-nums; font-weight:500; color:var(--md-on-surface); }
.day-bar-label { font-weight:600; color:var(--md-on-surface); margin-right:4px; }
.day-bar-pct { color:var(--md-primary); font-weight:550; }
/* thin glowing line flush with the card's (square) bottom edge */
.focus-card { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.day-bar-track { height:3px; background:var(--md-surface-highest); }
.day-bar-fill { height:100%; width:0; background:var(--glow); box-shadow:0 0 4px color-mix(in srgb, var(--glow) 35%, transparent); transition:width 900ms var(--ease-standard); }
.focus-layout { display:flex; align-items:center; gap:32px; }
.ring-wrap { position:relative; width:220px; height:220px; flex-shrink:0; }
.ring-wrap svg { width:100%; height:100%; transform:rotate(-90deg); }
.ring-track { fill:none; stroke:var(--md-surface-highest); stroke-width:9; }
.ring-progress { fill:none; stroke:var(--md-primary); stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset 240ms linear,stroke var(--dur-short) var(--ease-standard); }
.ring-progress.break { stroke:var(--md-tertiary); }
.ring-progress.snap { transition:none; }
.ring-inner { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:0 40px; text-align:center; }
.timer-state { font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--md-primary); }
.timer-digits { font-family:var(--font); font-size:46px; font-weight:300; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.15; }
.timer-task { font-size:12.5px; color:var(--md-on-surface-variant); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.timer-task:empty::before { content:"no task"; opacity:.55; }

.focus-controls { flex:1; min-width:0; display:flex; flex-direction:column; gap:16px; }
.control-group { display:flex; flex-direction:column; gap:7px; }
.task-picker { position:relative; }
.task-picker .field { height:40px; font-size:14px; padding-right:34px; }
.task-picker-clear { position:absolute; right:6px; top:50%; transform:translateY(-50%); }
.preset-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.segmented { display:inline-flex; padding:3px; gap:2px; border-radius:var(--shape-md); background:var(--md-surface-high); border:1px solid var(--md-outline-variant); }
.preset {
  height:28px; min-width:40px; padding:0 10px; border-radius:var(--shape-sm);
  font-size:13px; font-weight:500; color:var(--md-on-surface-variant);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur-short) var(--ease-standard),color var(--dur-short) var(--ease-standard);
}
.preset:hover { color:var(--md-on-surface); }
.preset[aria-pressed="true"] { background:var(--md-surface-container); color:var(--md-on-surface); box-shadow:var(--md-shadow-1); }
.custom-btn svg { width:14px; height:14px; fill:currentColor; }
.toggle { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--md-on-surface-variant); cursor:pointer; user-select:none; }
.toggle .switch { width:30px; height:18px; border-radius:9px; background:var(--md-surface-highest); position:relative; transition:background var(--dur-short) var(--ease-standard); flex-shrink:0; }
.toggle .switch::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform var(--dur-short) var(--ease-standard); }
.toggle[aria-pressed="true"] { color:var(--md-on-surface); }
.toggle[aria-pressed="true"] .switch { background:var(--md-primary); }
.toggle[aria-pressed="true"] .switch::after { transform:translateX(12px); }
.transport { display:flex; gap:8px; align-items:center; }
.transport .fab { height:42px; min-width:120px; font-size:14.5px; }
.transport .tonal { height:42px; }
.focus-btn { margin-left:auto; }

/* tasks */
.task-add { display:flex; gap:8px; margin-bottom:6px; }
.todo-list { list-style:none; display:flex; flex-direction:column; }
.todo {
  display:flex; align-items:center; gap:10px; padding:8px 8px; margin:0 -8px;
  border-radius:var(--shape-md); transition:background var(--dur-short) var(--ease-standard);
}
.todo + .todo { border-top:1px solid var(--md-outline-variant); }
.todo:hover { background:var(--md-surface-high); }
.todo.active-task { background:var(--md-primary-container); }
.todo.active-task + .todo, .todo:hover + .todo { border-top-color:transparent; }
.check { width:18px; height:18px; flex:0 0 18px; border:1.5px solid var(--md-outline); border-radius:var(--shape-xs); display:grid; place-items:center; transition:background var(--dur-short) var(--ease-standard); }
.check:hover { border-color:var(--md-primary); }
.check svg { width:12px; height:12px; fill:var(--md-on-primary); opacity:0; }
.todo.done .check { background:var(--md-primary); border-color:var(--md-primary); }
.todo.done .check svg { opacity:1; }
.todo-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.todo-text { font-size:13.5px; overflow-wrap:anywhere; }
.todo.done .todo-text { text-decoration:line-through; color:var(--md-on-surface-variant); }
.todo-bar { height:3px; border-radius:2px; background:var(--md-surface-highest); overflow:hidden; max-width:220px; }
.todo-bar-fill { height:100%; background:var(--md-primary); border-radius:2px; transition:width var(--dur-medium) var(--ease-standard); }
.todo.done .todo-bar-fill { background:var(--md-outline); }
.todo-min { font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--md-on-surface-variant); flex-shrink:0; min-width:36px; text-align:right; }
.todo-focus {
  height:26px; padding:0 9px; border-radius:var(--shape-sm); flex-shrink:0;
  font-size:12px; font-weight:550; color:var(--md-primary);
  display:inline-flex; align-items:center; gap:4px; opacity:0;
}
.todo-focus svg { width:13px; height:13px; fill:currentColor; }
.todo-focus:hover { background:var(--md-primary-container); }
.todo:hover .todo-focus, .todo-focus:focus-visible { opacity:1; }
.todo.active-task .todo-focus { opacity:1; color:var(--md-on-primary-container); }
.todo.done .todo-focus { display:none; }
.todo-del { width:24px; height:24px; border-radius:var(--shape-sm); color:var(--md-on-surface-variant); font-size:17px; line-height:1; opacity:0; flex-shrink:0; }
.todo-del:hover { background:var(--md-surface-highest); color:var(--md-error); }
.todo:hover .todo-del, .todo-del:focus-visible { opacity:1; }

/* sessions + schedule tables */
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table td { padding:7px 6px; vertical-align:top; border-top:1px solid var(--md-outline-variant); }
.data-table tr:first-child td { border-top:none; }
.data-table .c-time { width:1%; white-space:nowrap; font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:12px; color:var(--md-on-surface-variant); padding-left:0; }
.data-table .c-main { overflow-wrap:anywhere; }
.data-table .c-num { width:1%; white-space:nowrap; text-align:right; font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:12px; color:var(--md-on-surface-variant); padding-right:0; }
.sched-table tr { cursor:pointer; }
.sched-table tr:hover td { background:var(--md-surface-high); }
/* past events: secondary text colour (7:1+), not transparency - 50% opacity dropped them to ~2.5:1 */
.sched-table .c-main { color:var(--md-on-surface); }
.st-past .c-main { color:var(--md-on-surface-variant); }
.st-now .c-time, .st-now .c-main { color:var(--md-primary); font-weight:600; }
.st-now .c-main::after { content:"Now"; margin-left:8px; font-size:10.5px; font-weight:600; padding:1px 6px; border-radius:var(--shape-xs); background:var(--md-primary-container); color:var(--md-on-primary-container); vertical-align:1px; }
.st-free .c-main { color:var(--md-on-surface-variant); font-style:italic; }
.st-allday .c-time { font-family:var(--font); }

/* journey row (bottom of Today) */
.journey-row { padding:16px 20px 18px; }
.jr-head { display:flex; align-items:center; gap:28px; margin-bottom:14px; flex-wrap:wrap; }
.jr-progress { display:flex; align-items:center; gap:12px; min-width:0; }
.jr-progress .card-title { white-space:nowrap; }
.jr-progress .progress-track { width:140px; flex-shrink:0; }
.jr-day { font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--md-on-surface-variant); white-space:nowrap; }
.streak-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:var(--shape-md); background:var(--md-surface-container); border:1px solid var(--md-outline-variant); font-size:13px; font-weight:600; color:var(--md-on-surface-variant); white-space:nowrap; }
.streak-chip strong { font-weight:600; color:inherit; }
.streak-chip .sc-fire { font-size:13px; line-height:1; filter:grayscale(1); opacity:.55; }
/* an active streak gets the warm "on fire" look */
.streak-chip.on { background:var(--md-tertiary-container); border-color:transparent; color:var(--md-on-tertiary-container); }
.streak-chip.on .sc-fire { filter:none; opacity:1; }
.jr-next { display:flex; align-items:baseline; gap:10px; min-width:0; font-size:13px; cursor:pointer; padding:4px 8px; margin:-4px -8px; border-radius:var(--shape-md); }
.jr-next:hover { background:var(--md-surface-high); }
.jr-next-label { font-size:11.5px; font-weight:550; color:var(--md-on-surface-variant); white-space:nowrap; }
.jr-next-title { font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jr-left { font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:12px; font-weight:500; padding:1px 7px; border-radius:var(--shape-xs); background:var(--md-primary-container); color:var(--md-on-primary-container); white-space:nowrap; }
.jr-left.soon { background:var(--md-tertiary-container); color:var(--md-on-tertiary-container); }
.jr-next .muted { font-size:12px; white-space:nowrap; }
.journey-row .link-btn { margin-left:auto; white-space:nowrap; }
/* the row scrolls sideways on narrow screens, which also clips vertically - pad it so today's
   2px outline and the 2px hover lift stay visible */
.jr-days { display:grid; grid-template-columns:repeat(var(--days,31),minmax(22px,1fr)); gap:4px; overflow-x:auto; padding:4px 3px; margin:-4px -3px; }
.jr-col { display:flex; flex-direction:column; align-items:stretch; gap:4px; min-width:0; }
.jr-dow { font-size:10px; text-align:center; color:var(--md-on-surface-variant); }
.jr-col.weekend .jr-dow { opacity:.6; }
.jr-col .day { height:30px; display:grid; place-items:center; font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--md-on-surface-variant); cursor:pointer; }
.jr-col .day:hover { transform:translateY(-2px); }
.jr-col .day.l3, .jr-col .day.l4 { color:var(--md-on-primary); font-weight:550; }
.jr-col .day.today { color:var(--md-on-surface); font-weight:650; }
.jr-col .day.has-milestone { box-shadow:inset 0 0 0 2px var(--md-tertiary); color:var(--md-tertiary); font-weight:650; }
.jr-col .day.has-milestone.today { box-shadow:0 0 0 2px var(--md-tertiary); }

/* notes */
.notes-area { width:100%; min-height:160px; resize:none; border:none; background:transparent; color:var(--md-on-surface); line-height:1.65; font-size:13.5px; }
#notesCard { display:flex; flex-direction:column; flex:1; min-height:0; }
#notesCard .notes-area { flex:1 1 0; overflow-y:auto; }
.today-side #schedCard { flex-shrink:0; }
.notes-area:focus { outline:none; }
.save-state { font-size:11.5px; color:var(--md-on-surface-variant); }

/* heat cells (journey calendar, mini strip, legend) */
.day {
  border-radius:3px; background:var(--heat-empty);
  transition:transform var(--dur-short) var(--ease-standard);
}
.day.l1 { background:color-mix(in srgb, var(--md-primary) 30%, var(--heat-empty)); }
.day.l2 { background:color-mix(in srgb, var(--md-primary) 55%, var(--heat-empty)); }
.day.l3 { background:color-mix(in srgb, var(--md-primary) 78%, var(--heat-empty)); }
.day.l4 { background:var(--md-primary); }
.day.future { background:transparent; box-shadow:inset 0 0 0 1px var(--md-outline-variant); }
.day.out { visibility:hidden; }
.day.pre { opacity:.35; cursor:default; }
.day.today { box-shadow:0 0 0 2px var(--md-tertiary); }
.legend { display:flex; align-items:center; gap:4px; font-size:11.5px; color:var(--md-on-surface-variant); }
.legend .day { width:11px; height:11px; }

/* ═════════════ JOURNEY ═════════════ */
.stat-row { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.stat-chart { grid-column:span 3; display:flex; flex-direction:column; gap:8px; }
.stat .stat-sub strong { color:var(--md-on-surface); font-weight:600; }
.chart-head { display:flex; align-items:center; gap:8px; }
.chart-tools { margin-left:auto; display:flex; align-items:center; gap:2px; }
.chart-tools .icon-btn:disabled { opacity:.35; cursor:default; }
.seg-sm { padding:2px; margin-right:4px; }
.seg-sm .preset { height:22px; min-width:0; padding:0 8px; font-size:11.5px; }
.chart-nums { flex-shrink:0; min-width:92px; }
.stat-week { display:flex; align-items:stretch; gap:20px; height:100%; }
.wk-bars { flex:1; display:grid; grid-template-columns:repeat(var(--n,7),1fr); gap:6px; align-items:end; }
.wk-bars.month { gap:2px; }
.wk-bars.month .hs-bar { max-width:10px; border-radius:2px 2px 1px 1px; }
.wk-bars.month .wk-dl { font-size:9.5px; min-height:12px; }
.wk-day { display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; }
.wk-slot { flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; min-height:44px; }
.wk-day .hs-bar { width:100%; max-width:16px; border-radius:3px 3px 1px 1px; }
.wk-dl { font-size:10.5px; color:var(--md-on-surface-variant); }
.wk-day.today .wk-dl { color:var(--md-on-surface); font-weight:650; }
.stat { padding:14px 16px; }
.stat-label { font-size:12px; color:var(--md-on-surface-variant); }
.stat-value { font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:21px; font-weight:500; letter-spacing:-.02em; margin-top:2px; }
.stat-sub { font-size:12px; color:var(--md-on-surface-variant); margin-top:2px; }
.stat .progress-track { margin-top:8px; }
.journey-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start; }
.month-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:22px 20px; }
.month h4 { font-size:12.5px; font-weight:600; margin-bottom:6px; }
.month-days { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.month-days .dow { font-size:10px; text-align:center; color:var(--md-on-surface-variant); padding-bottom:2px; }
.month-days .day { aspect-ratio:1; position:relative; cursor:pointer; display:grid; place-items:center; font-size:11px; line-height:1; }
.month-days .day:hover { transform:scale(1.25); z-index:2; }
.month-days .day.has-milestone { background:var(--md-surface-container); box-shadow:inset 0 0 0 1.5px var(--md-tertiary); }
.month-days .day.has-milestone.today { box-shadow:0 0 0 2px var(--md-tertiary); }
.cal-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap; }
.ms-list { list-style:none; display:flex; flex-direction:column; }
.ms-item { display:flex; gap:10px; align-items:flex-start; padding:9px 8px; margin:0 -8px; border-radius:var(--shape-md); cursor:pointer; }
.ms-item:hover { background:var(--md-surface-high); }
.ms-item + .ms-item { border-top:1px solid var(--md-outline-variant); }
.ms-icon { font-size:16px; line-height:1.3; width:22px; text-align:center; flex-shrink:0; }
.ms-body { flex:1; min-width:0; }
.ms-title { font-size:13.5px; font-weight:550; overflow-wrap:anywhere; }
.ms-date { font-size:12px; color:var(--md-on-surface-variant); }
.ms-item.past .ms-title { color:var(--md-on-surface-variant); font-weight:500; }
.ms-group { margin:14px 0 4px; }
.ms-group:first-child { margin-top:0; }

/* ═════════════ SETTINGS ═════════════ */
.view-settings { max-width:820px; }
.settings-section { display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; padding:22px 24px; }
.settings-section h3 { font-size:14px; font-weight:600; }
.settings-section .desc { font-size:12.5px; color:var(--md-on-surface-variant); margin-top:4px; line-height:1.55; }
.form-grid { display:flex; flex-direction:column; gap:14px; }
.form-row { display:flex; flex-direction:column; gap:5px; }
.form-row > label, .form-label { font-size:12.5px; font-weight:550; }
.form-row .hint { font-size:12px; color:var(--md-on-surface-variant); }
.form-inline { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-actions { display:flex; gap:8px; justify-content:flex-end; align-items:center; }
.form-actions .saved-msg { font-size:12.5px; color:var(--md-primary); margin-right:auto; }
.cal-rows { display:flex; flex-direction:column; gap:8px; }
.cal-row { display:grid; grid-template-columns:160px minmax(0,1fr) 34px; gap:8px; align-items:center; }
.check-row { display:flex; align-items:center; gap:9px; font-size:13.5px; cursor:pointer; }
.check-row input { width:16px; height:16px; accent-color:var(--md-primary); }
.seg-theme .preset { min-width:72px; }

/* ═════════════ overlays ═════════════ */
.scrim { position:fixed; inset:0; background:var(--md-scrim); display:none; align-items:flex-start; justify-content:center; padding-top:14vh; z-index:40; }
.scrim.open { display:flex; }
.command { width:min(600px,94vw); background:var(--md-surface-container); border:1px solid var(--md-outline-variant); border-radius:var(--shape-xl); box-shadow:var(--md-shadow-2); overflow:hidden; }
.command input { width:100%; height:52px; padding:0 18px; border:none; border-bottom:1px solid var(--md-outline-variant); background:transparent; font-size:15px; }
.command input:focus { outline:none; }
.command-hint { padding:10px 18px 12px; font-size:12px; color:var(--md-on-surface-variant); line-height:2; }

.modal-scrim { position:fixed; inset:0; background:var(--md-scrim); display:flex; align-items:center; justify-content:center; z-index:45; padding:16px; }
.modal { width:min(440px,100%); background:var(--md-surface-container); border:1px solid var(--md-outline-variant); border-radius:var(--shape-xl); box-shadow:var(--md-shadow-2); overflow:hidden; }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:16px 18px 0; }
.modal-head .t-label { font-size:14px; font-weight:600; letter-spacing:-.005em; text-transform:none; color:var(--md-on-surface); }
.modal-body { display:flex; flex-direction:column; gap:10px; padding:14px 18px; }
.modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid var(--md-outline-variant); background:var(--md-surface-high); }

.ms-icons { display:flex; gap:6px; flex-wrap:wrap; }
.ms-icon-btn { width:34px; height:34px; border-radius:var(--shape-md); border:1.5px solid var(--md-outline-variant); background:var(--md-surface-container); font-size:16px; display:flex; align-items:center; justify-content:center; }
.ms-icon-btn:hover { background:var(--md-surface-high); }
.ms-icon-btn.active { border-color:var(--md-primary); background:var(--md-primary-container); }
.ms-icon-btn.ms-icon-more { font-size:17px; color:var(--md-on-surface-variant); border-style:dashed; }
.ms-icon-more-panel { display:flex; flex-direction:column; gap:8px; }
.ms-icon-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; max-height:130px; overflow-y:auto; }
.ms-icon-grid button { aspect-ratio:1; border-radius:var(--shape-sm); font-size:16px; display:flex; align-items:center; justify-content:center; }
.ms-icon-grid button:hover { background:var(--md-surface-high); }
.ms-scratch { border-top:1px solid var(--md-outline-variant); margin-top:4px; padding-top:12px; display:flex; flex-direction:column; gap:4px; }

.history-modal { width:min(660px,100%); max-height:85vh; display:flex; flex-direction:column; }
.history-modal .modal-body { overflow:hidden; display:flex; flex-direction:column; }
.history-list { overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding-right:2px; }
.history-day { border:1px solid var(--md-outline-variant); border-radius:var(--shape-lg); padding:12px 14px; background:var(--md-surface-container); }
.history-day-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:6px; }
.history-day-date { font-weight:600; font-size:13px; }
.history-day-meta { font-size:11.5px; color:var(--md-on-surface-variant); flex-shrink:0; }
.history-body { white-space:pre-wrap; font-size:13px; line-height:1.55; max-height:150px; overflow-y:auto; }
.history-body.empty { color:var(--md-on-surface-variant); font-style:italic; }
.history-comment-label { font-size:11.5px; font-weight:550; color:var(--md-on-surface-variant); margin-top:8px; margin-bottom:4px; }
.history-comment { min-height:44px; font-size:12.5px; }
.history-hint { font-size:12.5px; }
.history-body mark { background:color-mix(in srgb, var(--goal) 22%, transparent); color:inherit; border-radius:2px; padding:0 1px; }
.history-empty { text-align:center; padding:30px 10px; color:var(--md-on-surface-variant); font-size:13px; }

.onboard-progress { height:3px; background:var(--md-surface-highest); margin:12px 18px 0; border-radius:var(--shape-full); overflow:hidden; }
.onboard-progress-fill { height:100%; background:var(--md-primary); transition:width var(--dur-medium) var(--ease-standard); }
.onboard-chip-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.onboard-chip { height:30px; padding:0 12px; border-radius:var(--shape-md); border:1px solid var(--md-outline-variant); font-size:12.5px; color:var(--md-on-surface-variant); }
.onboard-chip:hover { background:var(--md-surface-high); }
.onboard-chip.active { background:var(--md-primary-container); color:var(--md-on-primary-container); border-color:transparent; }
.onboard-hint { font-size:12.5px; color:var(--md-on-surface-variant); margin-top:10px; line-height:1.6; }
.onboard-almost { font-size:12.5px; color:var(--md-primary); font-weight:550; margin-top:14px; }
.onboard-feature-list { list-style:none; display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.onboard-feature-list li { font-size:13.5px; padding-left:16px; position:relative; }
.onboard-feature-list li::before { content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--md-primary); }
.onboard-summary { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.onboard-summary-row { display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:9px 12px; background:var(--md-surface-high); border-radius:var(--shape-md); }
.onboard-summary-row span:first-child { color:var(--md-on-surface-variant); }

.custom-time-row { display:flex; gap:12px; }
.custom-time-field { flex:1; display:flex; flex-direction:column; gap:4px; align-items:center; }
.custom-time-field .field { text-align:center; height:44px; font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:18px; }

/* timer-done overlay stays until dismissed or restarted, so it can't be missed */
.done-scrim { z-index:70; }
.done-modal { text-align:center; width:min(360px,100%); padding:28px 24px 0; display:flex; flex-direction:column; align-items:center; gap:6px; }
.done-icon { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--md-primary-container); color:var(--md-on-primary-container); font-size:22px; margin-bottom:4px; }
.done-title { font-size:18px; font-weight:650; }
.done-body { font-size:13.5px; color:var(--md-on-surface-variant); margin-bottom:16px; }
.done-foot { margin:0 -24px; width:calc(100% + 48px); justify-content:center; }

.snackbar { position:fixed; left:50%; bottom:22px; transform:translate(-50%,90px); background:var(--md-inverse-surface); color:var(--md-inverse-on-surface); padding:11px 16px; border-radius:var(--shape-md); font-size:13px; box-shadow:var(--md-shadow-2); z-index:80; opacity:0; visibility:hidden; pointer-events:none; max-width:90vw; transition:transform var(--dur-medium) var(--ease-emphasized),opacity var(--dur-short) var(--ease-standard),visibility 0s linear var(--dur-medium); }
.snackbar.show { transform:translate(-50%,0); opacity:1; visibility:visible; transition-delay:0s; }

.load-bar { position:fixed; top:0; left:0; width:100%; height:2px; z-index:60; opacity:0; pointer-events:none; overflow:hidden; transition:opacity var(--dur-medium) var(--ease-standard); }
.load-bar.show { opacity:1; }
.load-bar-fill { height:100%; width:0%; background:var(--md-primary); }

/* ═════════════ focus mode: timer only, full screen ═════════════ */
body.focus-mode .appbar,
body.focus-mode .view-today > :not(.today-grid),
body.focus-mode .today-grid > .today-side,
body.focus-mode .today-main > :not(#timerCard) { display:none !important; }
body.focus-mode .view-today { max-width:none; min-height:100vh; justify-content:center; padding:24px; }
body.focus-mode .today-grid { grid-template-columns:1fr; }
body.focus-mode #timerCard { border:none; background:transparent; box-shadow:none; }
body.focus-mode .focus-layout { flex-direction:column; gap:36px; }
body.focus-mode .ring-wrap { width:min(48vh,440px); height:min(48vh,440px); }
body.focus-mode .timer-digits { font-size:clamp(52px,9vh,92px); }
body.focus-mode .timer-task { font-size:15px; }
body.focus-mode .focus-controls { align-items:center; flex:none; }
body.focus-mode .control-group.task-group { display:none; }
body.focus-mode .focus-btn { margin-left:8px; }

/* ═════════════ responsive ═════════════ */
@media (max-width:1100px) {
  .today-grid, .journey-grid { grid-template-columns:1fr; }
  .stat-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .stat-chart { grid-column:1 / -1; }
  .today-side { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
  #notesCard .notes-area { flex:1 1 auto; max-height:320px; }
  .appbar-inner { gap:18px; }
}
@media (max-width:860px) {
  /* nav moves into the menu, which opens as a full-width sheet */
  .topnav { display:none; }
  .ham-nav { display:flex; }
  .avatar-btn .avatar { display:none; }
  .avatar-btn .menu-icon { display:block; }
  .hamburger-menu { position:fixed; top:62px; left:10px; right:10px; max-height:calc(100dvh - 74px); overflow-y:auto; }
  .hamburger-menu .ham-link { padding:12px 14px; font-size:15px; }
  .focus-layout { flex-direction:column; gap:22px; }
  .focus-controls { width:100%; }
  .today-side { grid-template-columns:1fr; }
  .settings-section { grid-template-columns:1fr; gap:14px; }
  .stat-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
  .appbar-inner { padding:0 14px; }
  .app, .view, .lit-app { padding:18px 14px 40px !important; }
  .page-title { font-size:19px; }
  .card { padding:16px; }
  .focus-card { padding:18px 16px 0; }
  .day-bar { margin:0 -16px; }
  .day-bar-text { padding:10px 16px 9px; }
  .timer-pill { max-width:150px; }
  #btnFeedback { display:none; }
  .form-inline, .cal-row { grid-template-columns:1fr; }
  .jr-head { gap:10px 16px; }
  .jr-progress { width:100%; }
  .jr-progress .progress-track { width:auto; flex:1; min-width:60px; }
  .jr-next { flex-wrap:wrap; row-gap:4px; }
  .jr-next-title { white-space:normal; }
  .jr-days { grid-template-columns:repeat(var(--days,31),26px); padding-bottom:4px; }
}
/* touch screens can't hover, so row actions stay visible */
@media (hover:none) { .todo-focus, .todo-del { opacity:1; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* "what's new" popup (shell.js) */
.ann-scrim { z-index:60; }
.ann-modal { width:min(460px,100%); }
.ann-chip { font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:var(--shape-full); background:var(--md-primary-container); color:var(--md-on-primary-container); }
.ann-title { font-size:18px; font-weight:650; letter-spacing:-.01em; }
.ann-body { font-size:13.5px; line-height:1.6; color:var(--md-on-surface-variant); white-space:pre-line; }
.ann-modal .btn-primary { text-decoration:none; }

/* a Home card opened from a link like /#tasksCard (app.js revealHashTarget) */
.flash-target { animation:flash-ring 1.8s var(--ease-standard); }
@keyframes flash-ring {
  0%, 35% { box-shadow:0 0 0 3px var(--md-primary); }
  100% { box-shadow:0 0 0 3px transparent; }
}
@media (prefers-reduced-motion:reduce) { .flash-target { animation:none; outline:2px solid var(--md-primary); } }

/* ── notification bell (shell.js): a dot when something's unread, and a small
   shake every few seconds so it's noticed without a popup ── */
.bell-wrap { position:relative; }
.bell-btn { position:relative; }
.bell-dot { position:absolute; top:6px; right:7px; width:9px; height:9px; border-radius:50%; background:var(--md-error); box-shadow:0 0 0 2px var(--md-surface-container); }
.bell-btn.ringing svg { transform-origin:50% 8%; animation:bell-ring 7s var(--ease-standard) infinite; }
@keyframes bell-ring {
  0%, 12%, 100% { transform:rotate(0); }
  2% { transform:rotate(16deg); } 4% { transform:rotate(-14deg); } 6% { transform:rotate(10deg); }
  8% { transform:rotate(-7deg); } 10% { transform:rotate(3deg); }
}
@media (prefers-reduced-motion:reduce) { .bell-btn.ringing svg { animation:none; } }
.bell-menu {
  position:absolute; top:calc(100% + 8px); right:-44px; z-index:35; width:min(380px, calc(100vw - 20px));
  background:var(--md-surface-container); border:1px solid var(--md-outline-variant);
  border-radius:var(--shape-lg); box-shadow:var(--md-shadow-2);
  display:none; flex-direction:column; max-height:min(520px, calc(100dvh - 80px));
}
.bell-menu.open { display:flex; }
.bell-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px 8px; font-size:14px; font-weight:600; }
.bell-head .link-btn { font-size:12px; }
.bell-list { list-style:none; overflow-y:auto; padding:0 6px 6px; }
.bell-item { display:flex; gap:10px; width:100%; text-align:left; padding:9px 8px; border-radius:var(--shape-md); text-decoration:none; color:inherit; }
.bell-item:hover { background:var(--md-surface-high); }
.bell-item.unread { background:color-mix(in srgb, var(--md-primary) 8%, transparent); }
.bell-item.unread:hover { background:color-mix(in srgb, var(--md-primary) 14%, transparent); }
.bell-icon { width:30px; height:30px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; background:var(--md-secondary-container); color:var(--md-on-secondary-container); }
.bell-icon svg { width:16px; height:16px; fill:currentColor; }
.bell-item[data-kind="announcement"] .bell-icon { background:var(--md-primary-container); color:var(--md-on-primary-container); }
.bell-text { flex:1; min-width:0; }
.bell-title { font-size:13px; font-weight:550; line-height:1.4; overflow-wrap:anywhere; }
.bell-body { font-size:12.5px; color:var(--md-on-surface-variant); line-height:1.45; margin-top:1px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bell-time { font-size:11.5px; color:var(--md-on-surface-variant); margin-top:3px; }
.bell-new { width:7px; height:7px; border-radius:50%; background:var(--md-primary); flex-shrink:0; margin-top:6px; }
.bell-empty { padding:24px 14px; text-align:center; font-size:13px; color:var(--md-on-surface-variant); }
@media (max-width:860px) { .bell-menu { position:fixed; top:62px; left:10px; right:10px; width:auto; } }