/* Notice suite — shared switcher + Today styles (shell + demo). */

/* ── Section switcher: a gold glass pill glides behind the segments ── */
.suite-switch{position:relative;isolation:isolate;display:flex;background:rgba(255,255,255,.06);border:1px solid rgba(216,184,119,.28);
  border-radius:999px;padding:3px;margin:0 auto;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.suite-switch[hidden]{display:none}
.suite-seg{position:relative;z-index:1;border:none;background:none;color:rgba(245,240,228,.72);font-family:inherit;font-weight:700;font-size:13px;
  padding:6px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px;
  transition:color .28s ease;-webkit-tap-highlight-color:transparent}
.suite-seg svg{width:14px;height:14px}
.suite-seg:not(.active):hover{color:#FBF7EC}
.suite-seg.active{color:#173021}
.suite-seg.locked{opacity:.55}
.suite-seg:focus-visible{outline:2px solid #D8B877;outline-offset:2px}
.ss-glass{position:absolute;top:3px;bottom:3px;left:3px;width:0;z-index:0;border-radius:999px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(240,218,160,.96) 0%,rgba(216,184,119,.94) 52%,rgba(198,162,92,.96) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 1px rgba(110,78,18,.28),0 1px 2px rgba(0,0,0,.25),0 4px 14px rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5)}
.ss-glass.placed{opacity:1}
/* the sheen: a soft highlight across the top half, like light on glass */
.ss-glass::after{content:"";position:absolute;left:8%;right:8%;top:1px;height:48%;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
@media(max-width:480px){.suite-seg{padding:6px 13px}}

/* ── Stage: sections overlap so one can slide in over the other ── */
.suite-stage{flex:1;position:relative;min-height:0;overflow:hidden;background:#f6f1e5}
.suite-stage>.frames,.suite-stage>.today-view{position:absolute;inset:0}

/* ── Today view ── */
.today-view{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#f6f1e5;font-family:'Inter',system-ui,sans-serif}
.today-view[hidden]{display:none}
.today-hero{position:relative;padding:20px 56px 16px 16px;transition:background .6s ease}
.today-sky{position:absolute;right:18px;top:20px;width:26px;height:26px;stroke-width:1.6}
/* morning: a low gold sun rising from the top-right corner */
.today-hero.morning{background:radial-gradient(130% 160% at 100% 0%,rgba(226,184,98,.42) 0%,rgba(226,184,98,.12) 38%,rgba(226,184,98,0) 62%),linear-gradient(180deg,#fbf0d4 0%,#f6f1e5 100%)}
.today-hero.morning .today-sky{color:#b5851f}
/* afternoon: clear, even daylight */
.today-hero.afternoon{background:linear-gradient(180deg,#eef3ec 0%,#f6f1e5 100%)}
.today-hero.afternoon .today-sky{color:#c49a3c}
/* evening: dusk green, carrying on from the top bar */
.today-hero.evening{background:radial-gradient(90% 120% at 100% 0%,rgba(216,184,119,.16) 0%,rgba(216,184,119,0) 55%),linear-gradient(180deg,#1b3a2b 0%,#22513f 100%);margin-bottom:10px}
.today-hero.evening .today-greet{color:#FBF7EC}
.today-hero.evening .today-sky{color:#D8B877}
@media (min-width:900px){.today-hero{border-radius:0 0 16px 16px}}
.today-greet{font-family:'Newsreader',serif;font-size:1.6875rem;font-weight:400;line-height:1.15;color:#123029;letter-spacing:-.01em}
.today-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.today-chip{display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:20px;font-size:0.75rem;font-weight:600}
.today-chip .dot{width:6px;height:6px;border-radius:50%}
.today-chip.high{background:#fbe9e6;color:#a5301f}
.today-chip.due{background:#fdf3dd;color:#8a6414}
.today-chip.care{background:#dcece6;color:#22513f}
.today-sec{display:flex;align-items:center;justify-content:space-between;padding:6px 16px 7px}
.today-sec .lbl{display:flex;align-items:center;gap:6px;font-size:0.6562rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8a6414}
.today-sec .lbl .dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.today-sec .cnt{font-size:0.6875rem;font-weight:600;color:#9a9a9a}
.today-group{background:#fff;border-top:1px solid #e4dccb;border-bottom:1px solid #e4dccb}
.today-row{display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border-left:3px solid var(--rail,#2c6a5d);border-bottom:1px solid #f0ebde;cursor:pointer}
.today-row:last-child{border-bottom:none}
.today-row .body{flex:1;min-width:0}
.today-row .top{display:flex;align-items:baseline;gap:7px}
.today-tag{font-size:0.5938rem;font-weight:700;letter-spacing:.11em;padding:1px 5px;border-radius:3px;flex:none}
.today-tag.team{background:#dcece6;color:#22513f}
.today-tag.care{background:#fbe9e6;color:#a5301f}
.today-row .title{font-size:0.9375rem;font-weight:600;color:#1a1a1a;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.today-row .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:5px;font-size:0.75rem;font-weight:500;color:#6b6b6b}
.today-row .meta .due{font-weight:600}
.today-row .meta .due.overdue{color:#c0392b}
.today-row .meta .due.today{color:#8a6414}
.today-row .chev{flex:none;color:#c9c1ae;margin-top:3px}
.today-empty{padding:40px 24px 44px;text-align:center;color:#8a8474}
.today-empty .em-mark{width:96px;height:96px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#b5851f;
  background:radial-gradient(circle at 50% 50%,#fbf4e2 0%,#f5ead0 58%,rgba(245,234,208,0) 71%)}
.today-empty .em-mark svg{width:46px;height:46px;overflow:visible}
.today-empty .em-title{font-family:'Newsreader',serif;font-size:1.5rem;color:#123029;margin-bottom:6px;letter-spacing:-.01em}
.today-empty .em-sub{font-size:0.875rem;line-height:1.5;max-width:280px;margin:0 auto}
.today-empty.fresh .em-mark{animation:emRise .5s cubic-bezier(.22,1,.36,1) both}
.today-empty.fresh .em-mark circle{stroke-dasharray:101;stroke-dashoffset:101;animation:emDraw .7s .15s ease-out forwards}
.today-empty.fresh .em-mark rect{transform-box:fill-box;transform-origin:center;animation:emChair .34s cubic-bezier(.34,1.56,.64,1) both}
.today-empty.fresh .em-mark rect:nth-of-type(1){animation-delay:.55s}
.today-empty.fresh .em-mark rect:nth-of-type(2){animation-delay:.63s}
.today-empty.fresh .em-mark rect:nth-of-type(3){animation-delay:.71s}
.today-empty.fresh .em-mark rect:nth-of-type(4){animation-delay:.79s}
.today-empty.fresh .em-title,.today-empty.fresh .em-sub{animation:emFade .5s .35s ease-out both}
@keyframes emRise{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes emDraw{to{stroke-dashoffset:0}}
@keyframes emChair{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
@keyframes emFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .today-empty.fresh .em-mark,.today-empty.fresh .em-mark circle,.today-empty.fresh .em-mark rect,.today-empty.fresh .em-title,.today-empty.fresh .em-sub{animation:none;stroke-dashoffset:0}
}
.today-foot{padding:22px 16px 30px;font-family:'Newsreader',serif;font-size:0.875rem;font-style:italic;color:#8a8474}
/* Desktop: center the Today column so rows/groups don't stretch full-width */
@media (min-width:900px){
  .today-view{padding-inline:max(16px,calc((100% - 800px) / 2))}
}

/* ── Account menu (top-bar button → Appearance, Help, Sign out) ── */
/* Part of the app's chrome, so it's the same deep green in light and dark. */
.acct-btn{flex:0 0 auto;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid rgba(216,184,119,.45);background:rgba(216,184,119,.12);
  color:#D8B877;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}
.acct-btn:hover{background:rgba(216,184,119,.2)}
.acct-btn[aria-expanded="true"]{background:#D8B877;color:#173021;border-color:#D8B877}
.acct-btn:focus-visible{outline:2px solid #D8B877;outline-offset:2px}
.acct-ini{font-size:11.5px;font-weight:800;letter-spacing:.03em;line-height:1}
.acct-menu{position:fixed;z-index:70;width:252px;max-width:calc(100vw - 16px);padding:8px;border-radius:14px;
  background:#1d3b2c;color:#FBF7EC;border:1px solid rgba(216,184,119,.28);box-shadow:0 14px 40px rgba(0,0,0,.45);
  font-family:'Inter',system-ui,sans-serif;animation:acctIn .16s cubic-bezier(.22,1,.36,1);transform-origin:top right}
@keyframes acctIn{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
.acct-who{display:flex;align-items:center;gap:10px;padding:6px 6px 10px;border-bottom:1px solid rgba(245,240,228,.1);margin-bottom:8px}
.acct-ini.lg{width:34px;height:34px;border-radius:50%;background:rgba(216,184,119,.16);border:1px solid rgba(216,184,119,.45);color:#D8B877;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;flex:none}
.acct-names{min-width:0}
.acct-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-sub{font-size:12px;color:rgba(245,240,228,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-lbl{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#D8B877;padding:2px 6px 7px}
.acct-seg{display:flex;gap:3px;padding:3px;border-radius:11px;background:rgba(0,0,0,.22);margin:0 2px 10px}
.acct-seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 4px;border:none;border-radius:8px;background:none;
  color:rgba(245,240,228,.72);font:600 12.5px 'Inter',system-ui,sans-serif;cursor:pointer;transition:background .18s,color .18s}
.acct-seg button svg{width:14px;height:14px}
.acct-seg button:hover{color:#FBF7EC}
.acct-seg button.on{background:#D8B877;color:#173021;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.acct-seg-text button{height:32px;padding:0 4px}
.acct-seg-text span{font-family:'Newsreader',Georgia,serif;font-weight:500;line-height:1}
.acct-items{border-top:1px solid rgba(245,240,228,.1);padding-top:6px}
.acct-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 8px;border:none;border-radius:8px;background:none;color:#FBF7EC;
  font:500 14px 'Inter',system-ui,sans-serif;text-decoration:none;cursor:pointer;text-align:left}
.acct-item svg{width:16px;height:16px;color:rgba(245,240,228,.65)}
.acct-item:hover,.acct-item:focus-visible{background:rgba(245,240,228,.08);outline:none}

/* ── Dark mode (html[data-theme="dark"], set by /theme.js) ── */
html[data-theme="dark"] :is(.view-shell,.suite-stage,.acct-menu,.admin-ov){color-scheme:dark}
html[data-theme="dark"] .suite-stage,html[data-theme="dark"] .frames,html[data-theme="dark"] .frames iframe{background:#0e1b16}
html[data-theme="dark"] .today-view{background:#0e1b16}
html[data-theme="dark"] .today-greet{color:#ece5d3}
html[data-theme="dark"] .today-hero.morning{background:radial-gradient(130% 160% at 100% 0%,rgba(216,170,80,.26) 0%,rgba(216,170,80,.07) 40%,rgba(216,170,80,0) 64%),linear-gradient(180deg,#1c2a1f 0%,#0e1b16 100%)}
html[data-theme="dark"] .today-hero.morning .today-sky{color:#e2c68c}
html[data-theme="dark"] .today-hero.afternoon{background:linear-gradient(180deg,#15271f 0%,#0e1b16 100%)}
html[data-theme="dark"] .today-hero.afternoon .today-sky{color:#d8b877}
html[data-theme="dark"] .today-hero.evening{background:radial-gradient(90% 120% at 100% 0%,rgba(216,184,119,.14) 0%,rgba(216,184,119,0) 55%),linear-gradient(180deg,#1b3a2b 0%,#15271f 100%)}
html[data-theme="dark"] .today-chip.high{background:#3b211d;color:#f0a397}
html[data-theme="dark"] .today-chip.due{background:#3a2f17;color:#e2c68c}
html[data-theme="dark"] .today-chip.care{background:#173a33;color:#9dd3c4}
html[data-theme="dark"] .today-sec .lbl{color:#d8b877}
html[data-theme="dark"] .today-sec .cnt{color:#939e96}
html[data-theme="dark"] .today-group{background:#15271f;border-color:#2b4237}
html[data-theme="dark"] .today-row{border-bottom-color:#20362c}
html[data-theme="dark"] .today-row .title{color:#ece5d3}
html[data-theme="dark"] .today-row .meta{color:#a3ada5}
html[data-theme="dark"] .today-row .meta .due.overdue{color:#ec8a7c}
html[data-theme="dark"] .today-row .meta .due.today{color:#e2c68c}
html[data-theme="dark"] .today-row .chev{color:#56685d}
html[data-theme="dark"] .today-tag.team{background:#173a33;color:#9dd3c4}
html[data-theme="dark"] .today-tag.care{background:#3b211d;color:#f0a397}
html[data-theme="dark"] .today-empty{color:#a3ada5}
html[data-theme="dark"] .today-empty .em-title{color:#ece5d3}
html[data-theme="dark"] .today-empty .em-mark{color:#d8b877;background:radial-gradient(circle at 50% 50%,rgba(216,184,119,.2) 0%,rgba(216,184,119,.1) 58%,rgba(216,184,119,0) 71%)}
html[data-theme="dark"] .today-foot{color:#939e96}