/* ==========================================================================
   Retro looks: Windows 98 and Windows XP (Luna)

   Same DOM, same layout — skin only. Each look first rewrites the tokens
   in app.css, then adds what tokens cannot say: bevels, gradients, the
   window chrome ui/window.js draws around the board, and the desktop the
   window sits on. Nothing here changes a rule of the board.
   ========================================================================== */

/* --- the window, both looks ------------------------------------------ */

[data-theme="98"] #app,
[data-theme="xp"] #app { height: 100dvh; display: flex; flex-direction: column; }
[data-theme="98"] body,
[data-theme="xp"] body { overflow: hidden; }

.win { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.win__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.win__title { display: flex; align-items: center; flex: none; }
.win__icon { display: flex; align-items: center; justify-content: center; flex: none; }
.win__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win__btns { display: flex; flex: none; }
.win__btn { display: flex; align-items: center; justify-content: center; flex: none; position: relative; }
.win__menu { display: flex; flex: none; }
.win__menu span { cursor: default; }
.win__status { display: flex; flex: none; }
.win__field { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win__field--wide { flex: 1; }

/* Six day chips share the width, as the mocks have them, rather than scrolling. */
@media (max-width: 720px) {
  [data-theme="98"] .m-daychip, [data-theme="xp"] .m-daychip { flex: 1 1 0; width: auto; min-width: 0; padding-left: 0; padding-right: 0; }
  [data-theme="98"] .m-daystrip, [data-theme="xp"] .m-daystrip { overflow: visible; }
}

/* Motion is the modern board's; a window of that age has none. */
[data-theme="98"] *, [data-theme="98"] *::before, [data-theme="98"] *::after,
[data-theme="xp"] *, [data-theme="xp"] *::before, [data-theme="xp"] *::after { transition: none !important; animation: none !important; }
[data-theme="98"] .card:hover, [data-theme="xp"] .card:hover { transform: none; }
[data-theme="98"] .modes__thumb, [data-theme="xp"] .modes__thumb { display: none; }
[data-theme="98"] .demo-tag, [data-theme="xp"] .demo-tag { border-radius: 0; }

/* ==========================================================================
   1a  Windows 98
   ========================================================================== */

:root[data-theme="98"] {
  --bg: #008080; --surface: #c0c0c0; --surface-2: #c0c0c0; --card: #c0c0c0; --field: #fff; --pill: #c0c0c0;
  --line: #808080; --line-soft: #808080; --line-faint: #c0c0c0; --line-strong: #0a0a0a; --dash: #808080;
  --ink: #000; --ink-2: #000; --muted: #404040; --muted-2: #404040; --faint: #808080; --faint-2: #808080;
  --accent: #000080; --accent-ink: #000080; --accent-line: #000080; --accent-soft: #dfdfdf; --today-bg: #fff;
  --ok: #006000; --ok-soft: #dfdfdf; --warn: #800000; --warn-soft: #c0c0c0; --warn-line: #800000; --warn-ink: #800000;
  --on-ink: #fff; --on-accent: #fff; --hover: #dfdfdf; --scrim: rgba(0, 0, 0, .25); --scrim-strong: rgba(0, 0, 0, .45);
  --quest-chip: #c0c0c0; --quest-chip-ink: #000; --sunken: #fff; --none: #808080;
  --deep: repeating-linear-gradient(45deg, #000080 0 3px, #c0c0c0 3px 6px);
  --mtg: repeating-linear-gradient(45deg, #808080 0 3px, #dfdfdf 3px 6px);
  --lunch: #808080; --mtg-solid: #808080; --track: #fff;
  --flame-bg: #c0c0c0; --flame-ink: #000; --flame: #800000; --flame-line: #808080;
  --grid-off: #c0c0c0; --grid-off-ink: #404040;
  --r-pill: 0; --r-card: 0; --r-panel: 0; --r-sheet: 0; --r-btn: 0; --r-field: 0;
  --shadow-card: none; --shadow-raised: none; --shadow-sheet: none; --shadow-drawer: none;
  --font: "MS Sans Serif", Tahoma, "Segoe UI", sans-serif; --mono: "Courier New", monospace;
  /* the two bevels everything is made of */
  --out: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --in: inset 1px 1px #0a0a0a, inset -1px -1px #fff, inset 2px 2px #808080, inset -2px -2px #dfdfdf;
  --groove: inset 1px 1px #808080, inset -1px -1px #fff;
  --ridge: inset 1px 1px #fff, inset -1px -1px #808080;
  color-scheme: light;
}
[data-theme="98"] body { background: #008080; font-family: var(--font); font-size: 11px; -webkit-font-smoothing: auto; }
[data-theme="98"] body.is-loading { background: #008080; }

/* window */
[data-theme="98"] .win { margin: 18px; background: #c0c0c0; padding: 3px; box-shadow: var(--out); }
[data-theme="98"] .win__title { gap: 4px; padding: 2px 2px 2px 3px; background: linear-gradient(90deg, #000082 0, #0a246a 30%, #1c7fd4 100%); }
[data-theme="98"] .win__icon { width: 16px; height: 16px; background: #c0c0c0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff; font: 700 10px Tahoma, sans-serif; color: #000080; }
[data-theme="98"] .win__name { color: #fff; font: 700 12px Tahoma, sans-serif; letter-spacing: .2px; padding-left: 2px; }
[data-theme="98"] .win__btns { gap: 1px; }
[data-theme="98"] .win__btn { width: 16px; height: 14px; background: #c0c0c0; box-shadow: var(--out); }
[data-theme="98"] .win__btn--min i { width: 6px; height: 2px; background: #000; margin: 4px 0 0 -1px; }
[data-theme="98"] .win__btn--max i { width: 9px; height: 8px; border: 1px solid #000; border-top: 2px solid #000; background: #c0c0c0; }
[data-theme="98"] .win__btn--close i { width: 8px; height: 8px; position: relative; }
[data-theme="98"] .win__btn--close i::before, [data-theme="98"] .win__btn--close i::after { content: ""; position: absolute; top: 3px; left: -1px; width: 10px; height: 2px; background: #000; transform: rotate(45deg); }
[data-theme="98"] .win__btn--close i::after { transform: rotate(-45deg); }
[data-theme="98"] .win__menu { gap: 14px; padding: 3px 6px; font: 400 11px Tahoma, sans-serif; }
[data-theme="98"] .win__status { gap: 3px; padding: 0 3px 1px; }
[data-theme="98"] .win__field { padding: 3px 6px; font: 400 11px Tahoma, sans-serif; box-shadow: var(--groove); }
[data-theme="98"] .win__field:nth-child(2) { width: 180px; }
[data-theme="98"] .win__field--date { width: 120px; }

/* header */
[data-theme="98"] .top { padding: 4px 6px 6px; gap: 8px; }
[data-theme="98"] .brand { min-width: 0; gap: 0; }
[data-theme="98"] .brand h1 { font: 700 13px Tahoma, sans-serif; letter-spacing: 0; }
[data-theme="98"] .date { font: 400 11px Tahoma, sans-serif; color: #404040; }
/* the add field is a sunken well that runs to the split Add button; the
   trailing controls are small raised buttons, not the modern pills */
[data-theme="98"] .addbar { min-width: 200px; max-width: none; gap: 0; }
[data-theme="98"] .addbar input, [data-theme="98"] .m-add__field { background: #fff; box-shadow: var(--in); border: 0; border-radius: 0; padding: 4px 5px; font: 400 11px var(--font); color: #000; }
[data-theme="98"] .addbar input::placeholder, [data-theme="98"] .field::placeholder, [data-theme="98"] .m-add__field::placeholder { color: #808080; }
[data-theme="98"] .addbar:focus-within, [data-theme="98"] .m-add:focus-within { outline: none; }
[data-theme="98"] .top__actions { gap: 3px; margin-left: 6px; }
[data-theme="98"] .modes { order: 10; width: 100%; background: none; padding: 0 0 0 0; gap: 2px; align-items: flex-end; margin-bottom: -6px; position: relative; z-index: 2; }
[data-theme="98"] .modes button { background: #c0c0c0; color: #000; padding: 4px 16px; margin-bottom: 2px; font: 400 11px Tahoma, sans-serif; box-shadow: inset 1px 1px #fff, inset -1px 0 #0a0a0a, inset -2px 0 #808080; }
[data-theme="98"] .modes button[aria-pressed="true"] { padding: 5px 16px 7px; margin-bottom: 0; font-weight: 700; color: #000; }
[data-theme="98"] .plan, [data-theme="98"] .today, [data-theme="98"] .quests { margin: 0 6px 6px; padding: 8px; background: #c0c0c0; box-shadow: var(--ridge); gap: 6px; }
[data-theme="98"] .quests { padding: 8px; }

/* every raised control */
[data-theme="98"] .btn, [data-theme="98"] .btn--outline, [data-theme="98"] .btn--primary, [data-theme="98"] .btn--ok,
[data-theme="98"] .pill, [data-theme="98"] .stepper__btn, [data-theme="98"] .weeknav__arrow, [data-theme="98"] .qhero__arrow,
[data-theme="98"] .histbtn, [data-theme="98"] .iconbtn, [data-theme="98"] .day__add, [data-theme="98"] .addbar__go, [data-theme="98"] .addbar__caret,
[data-theme="98"] .m-help, [data-theme="98"] .m-hist, [data-theme="98"] .m-settings, [data-theme="98"] .m-add__go, [data-theme="98"] .m-add__caret,
[data-theme="98"] .settings__tab, [data-theme="98"] .look, [data-theme="98"] .streak, [data-theme="98"] .tag--count, [data-theme="98"] .m-daychip, [data-theme="98"] .m-chip {
  background: #c0c0c0; color: #000; border: 0; border-radius: 0; box-shadow: var(--out); font-family: var(--font); font-size: 11px; font-weight: 400;
}
[data-theme="98"] .btn { padding: 4px 12px; }
[data-theme="98"] .switch { border-radius: 0; background: #fff; box-shadow: var(--in); }
[data-theme="98"] .switch__knob { border-radius: 0; background: #c0c0c0; box-shadow: var(--out); }
[data-theme="98"] .switch[aria-checked="true"] { background: #000080; }
[data-theme="98"] .alltasks__text { font: 400 11px Tahoma, sans-serif; color: #000; }
[data-theme="98"] .rail__acts .foldall { margin-top: 0; }
[data-theme="98"] .foldall { width: 24px; height: 20px; background: #c0c0c0; color: #000; border-radius: 0; box-shadow: var(--out); }
[data-theme="98"] .foldall:active { box-shadow: var(--in); }
[data-theme="98"] .btn--primary, [data-theme="98"] .btn--ok, [data-theme="98"] .btn--ink, [data-theme="98"] .qhero__act .btn, [data-theme="98"] .addbar__go, [data-theme="98"] .m-add__go { font-weight: 700; }
[data-theme="98"] .btn--danger { background: none; box-shadow: none; color: #800000; font-weight: 700; }
[data-theme="98"] .btn--link, [data-theme="98"] .btn--quiet { background: none; box-shadow: none; color: #000080; text-decoration: underline; }
[data-theme="98"] .btn:active, [data-theme="98"] .pill:active, [data-theme="98"] .stepper__btn:active { box-shadow: var(--in); transform: none; }
[data-theme="98"] .btn:disabled, [data-theme="98"] .histbtn:disabled { color: #808080; text-shadow: 1px 1px #fff; opacity: 1; box-shadow: var(--out); }
[data-theme="98"] .addbar__go { padding: 4px 14px; margin-left: 8px; }
[data-theme="98"] .addbar__caret { padding: 4px 6px; }
[data-theme="98"] .addbar__caret .icon--caret { width: 9px; height: 9px; }
[data-theme="98"] .histbtn { width: auto; height: auto; padding: 4px 8px; color: #000; }
[data-theme="98"] .histbtn .icon--hist { width: 12px; height: 12px; }
[data-theme="98"] .pill { padding: 3px 9px; }
[data-theme="98"] .pill[aria-pressed="true"], [data-theme="98"] .settings__tab[aria-current="page"], [data-theme="98"] .look[aria-checked="true"] { background: #000080; color: #fff; box-shadow: var(--in); }
[data-theme="98"] .look__icon { background: transparent; color: inherit; border-radius: 0; }
[data-theme="98"] .stepper__btn { width: 16px; height: 14px; }
[data-theme="98"] .day__add { width: 16px; height: 14px; font: 700 11px Tahoma, sans-serif; }
[data-theme="98"] .day.is-today .day__add { background: #c0c0c0; color: #000; }
[data-theme="98"] .stepper__value { font-size: 11px; }
[data-theme="98"] .weeknav__arrow, [data-theme="98"] .qhero__arrow { width: auto; height: auto; padding: 2px 7px; }
[data-theme="98"] .weeknav__label h2, [data-theme="98"] .qhero__label { font: 700 13px Tahoma, sans-serif; letter-spacing: 0; }
[data-theme="98"] .weeknav__range { font-size: 11px; }
[data-theme="98"] .plan { grid-template-columns: 236px minmax(0, 1fr); }
[data-theme="98"] .days { grid-template-columns: repeat(5, minmax(120px, 1fr)) minmax(110px, .9fr); min-width: 0; }
[data-theme="98"] .weekscroll { padding-bottom: 0; }
[data-theme="98"] .legend span { font-size: 11px; color: #000; }
[data-theme="98"] .legend i { width: 9px; height: 9px; border-radius: 0; box-shadow: inset 1px 1px #0a0a0a; }
[data-theme="98"] .legend i.free { background: #fff; }

/* fields and sunken wells */
[data-theme="98"] .field, [data-theme="98"] select.field, [data-theme="98"] textarea.field { background: #fff; border: 0; box-shadow: var(--in); font-family: var(--font); font-size: 11px; padding: 4px 5px; }
[data-theme="98"] .field:focus { outline: 1px dotted #000; outline-offset: -3px; }

/* rail */
[data-theme="98"] .rail { background: transparent; padding: 0; gap: 6px; }
[data-theme="98"] .rail__top h2, [data-theme="98"] .rail h2 { font: 700 12px Tahoma, sans-serif; }
[data-theme="98"] .rail__top h2 { line-height: 20px; }
[data-theme="98"] .rail__sub { font-size: 11px; color: #404040; }
[data-theme="98"] .section, [data-theme="98"] .section--solid, [data-theme="98"] .keep { background: #fff; border: 0; border-radius: 0; box-shadow: var(--in); padding: 6px; gap: 4px; }
[data-theme="98"] .section__head { font: 700 11px Tahoma, sans-serif; }
[data-theme="98"] .section[aria-expanded="true"] > .section__head, [data-theme="98"] .section__head[aria-expanded="true"] { background: #000080; color: #fff; padding: 3px 5px; margin: -3px -3px 3px; }
[data-theme="98"] .section__head[aria-expanded="true"] .tag--count { background: transparent; box-shadow: none; color: #fff; }
[data-theme="98"] .section__hint, [data-theme="98"] .section__peek, [data-theme="98"] .section__empty { font-size: 11px; }
[data-theme="98"] .keep__head { font: 700 11px Tahoma, sans-serif; }
[data-theme="98"] .keep__name { font-size: 11px; }
[data-theme="98"] .keep__rule { border-color: #c0c0c0; }
[data-theme="98"] .wgrid__cell { height: 18px; border-radius: 0; border: 0; font: 400 11px Tahoma, sans-serif; background: transparent; color: #404040; }
[data-theme="98"] .wgrid__cell.is-done { background: #000080; color: #fff; font-weight: 700; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #4a4ab0; }
[data-theme="98"] .wgrid__cell.is-today { outline: 1px dotted #000080; outline-offset: -1px; background: #c0c0c0; }
[data-theme="98"] .wgrid__cell.is-done.is-today { outline-color: #fff; background: #000080; }
[data-theme="98"] .streak { padding: 2px 7px; gap: 4px; }
[data-theme="98"] .streak--togo, [data-theme="98"] .streak--best { color: #800000; font-weight: 700; }
[data-theme="98"] .streak .icon--flame { color: #800000; }

/* week */
[data-theme="98"] .days { gap: 5px; }
[data-theme="98"] .day { background: #fff; border: 0; border-radius: 0; box-shadow: var(--in); padding: 6px; gap: 5px; }
[data-theme="98"] .day.is-past { opacity: 1; }
[data-theme="98"] .day.is-today { background: #fff; border: 0; padding: 6px; outline: 2px solid #000080; outline-offset: 1px; }
[data-theme="98"] .day.is-today .day__head { background: #000080; color: #fff; padding: 3px 5px; margin: -3px -3px 1px; }
[data-theme="98"] .day.is-today .day__num { color: #c0c0c0; }
[data-theme="98"] .day__name { font: 700 12px Tahoma, sans-serif; }
[data-theme="98"] .day__num { font-size: 12px; color: #808080; }
[data-theme="98"] .tag--today { background: #c0c0c0; color: #000; border-radius: 0; padding: 1px 6px; font: 700 10px Tahoma, sans-serif; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff; }
[data-theme="98"] .stepper--tight { background: #c0c0c0; padding: 2px; gap: 4px; box-shadow: var(--groove); }
[data-theme="98"] .stepper--tight .stepper__btn { box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff; font: 700 10px Tahoma, sans-serif; }
[data-theme="98"] .stepper--tight .stepper__value { flex: 1; text-align: center; font: 400 11px Tahoma, sans-serif; min-width: 0; }
[data-theme="98"] .strip { height: 10px; border-radius: 0; box-shadow: inset 1px 1px #0a0a0a; background: #dfdfdf; }
[data-theme="98"] .strip .seg.free { background: #fff; }
[data-theme="98"] .freeline { font: 700 11px Tahoma, sans-serif; color: #000; }
[data-theme="98"] .freeline .is-none { color: #800000; }
[data-theme="98"] .day__nofree { font-size: 11px; color: #808080; }
[data-theme="98"] .day__body { gap: 5px; }
[data-theme="98"] .day__body:empty, [data-theme="98"] .day__spacer { border: 1px dashed #808080; }
[data-theme="98"] .day__foot { border-top: 1px solid #c0c0c0; padding-top: 6px; font: 400 11px Tahoma, sans-serif; color: #404040; text-align: left; }
[data-theme="98"] .day__foot.is-done { color: #404040; font-weight: 400; text-align: center; }
[data-theme="98"] .day__foot.is-over { background: #c0c0c0; border-radius: 0; box-shadow: var(--groove); color: #800000; font-weight: 700; text-align: left; padding: 6px; }
[data-theme="98"] .day__done { color: #000080; text-decoration: underline; font-size: 11px; }
[data-theme="98"] .drop-slot { border: 1px dashed #000080; background: #dfdfdf; border-radius: 0; }
[data-theme="98"] .is-over { background: #dfdfdf !important; }

/* cards */
[data-theme="98"] .card { background: #c0c0c0; border: 0; border-left: 5px solid var(--area, #808080); border-radius: 0; box-shadow: var(--out); padding: 6px 7px; gap: 5px; }
[data-theme="98"] .card--short { padding: 5px 7px; }
[data-theme="98"] .card--spurt { border-left-style: solid; border-left-width: 5px; }
[data-theme="98"] .card--habit-session, [data-theme="98"] .card--bounced { border-style: none; border-left-style: solid; }
[data-theme="98"] .card--spill { background: repeating-linear-gradient(45deg, #fff 0 4px, #f0e0e0 4px 8px); }
[data-theme="98"] .card--done .card__title { color: #404040; }
[data-theme="98"] .card--selected { outline: 1px dotted #000; outline-offset: -4px; }
[data-theme="98"] .card__title { font: 700 11px Tahoma, sans-serif; line-height: 1.35; }
[data-theme="98"] .meta { font-size: 11px; color: #404040; gap: 2px 8px; }
[data-theme="98"] .tag { border-radius: 0; font: 700 10px Tahoma, sans-serif; padding: 1px 6px; }
[data-theme="98"] .tag--high { background: #800000; color: #fff; }
[data-theme="98"] .card__quest { background: #c0c0c0; color: #000; border-radius: 0; font: 400 10px Tahoma, sans-serif; padding: 1px 6px; box-shadow: inset -1px -1px #808080, inset 1px 1px #fff; }
[data-theme="98"] .card__prio { background: #800000; border-radius: 0; }
[data-theme="98"] .suggest { background: #fff; border: 1px dashed #808080; border-radius: 0; }
[data-theme="98"] .suggest__title { font: 700 11px Tahoma, sans-serif; color: #000080; }

/* just today: the Now card is a card, the gap finder a raised panel of raised buttons */
[data-theme="98"] .now { background: #c0c0c0; border-left-width: 5px; border-radius: 0; box-shadow: var(--out); padding: 12px 14px; min-height: 0; gap: 8px; }
[data-theme="98"] .now__label { font: 700 12px Tahoma, sans-serif; }
[data-theme="98"] .now__title { font: 700 32px Tahoma, sans-serif; letter-spacing: 0; }
[data-theme="98"] .now__meta { font-size: 11px; color: #404040; gap: 10px; }
[data-theme="98"] .now--empty p { font-size: 11px; }
[data-theme="98"] .box { border-radius: 0; font-size: 11px; padding: 6px 8px; }
[data-theme="98"] .box--note, [data-theme="98"] .box--crumb { background: #fff; border: 0; box-shadow: var(--in); }
[data-theme="98"] .box--crumb b { color: #000080; font: 700 11px Tahoma, sans-serif; }
[data-theme="98"] .nudge { background: #c0c0c0; border-radius: 0; box-shadow: var(--groove); font-size: 11px; }
[data-theme="98"] .warnline { font-size: 11px; }
[data-theme="98"] .today__head h2 { font: 700 20px Tahoma, sans-serif; letter-spacing: 0; }
[data-theme="98"] .today__head span, [data-theme="98"] .next .hint { font-size: 11px; color: #404040; }
[data-theme="98"] .next h3 { font: 700 12px Tahoma, sans-serif; }
[data-theme="98"] .gap { background: #c0c0c0; border-radius: 0; box-shadow: var(--out); padding: 8px; gap: 6px; }
[data-theme="98"] .gap h3 { font: 700 12px Tahoma, sans-serif; }
[data-theme="98"] .gap p, [data-theme="98"] .gap__empty { font-size: 11px; color: #404040; }
[data-theme="98"] .gap__btns { gap: 4px; }
[data-theme="98"] .gap__btns button { background: #c0c0c0; color: #000; border: 0; border-radius: 0; box-shadow: var(--out); padding: 5px 4px; font: 700 11px Tahoma, sans-serif; }
[data-theme="98"] .gap__btns button:active, [data-theme="98"] .gap__btns button[aria-pressed="true"] { background: #000080; color: #fff; box-shadow: var(--in); }
[data-theme="98"] .parked { background: #c0c0c0; border-radius: 0; box-shadow: var(--groove); padding: 6px 10px; font-size: 11px; color: #000; }

/* all logged days & streaks */
[data-theme="98"] .histbtn-in, [data-theme="98"] .hist__close, [data-theme="98"] .hist__arrow { background: #c0c0c0; color: #000; border: 0; border-radius: 0; box-shadow: var(--out); font: 400 11px Tahoma, sans-serif; }
[data-theme="98"] .histbtn-in { font-weight: 700; padding: 4px 10px; }
[data-theme="98"] .hist__arrow:disabled { color: #808080; text-shadow: 1px 1px #fff; }
[data-theme="98"] .hist__head, [data-theme="98"] .hist__foot { border-color: #808080; }
[data-theme="98"] .hist__stats { background: #808080; border-color: #808080; }
[data-theme="98"] .hist__stat { background: #c0c0c0; }
[data-theme="98"] .hist__title { font: 700 14px Tahoma, sans-serif; }
[data-theme="98"] .hist__month { font: 700 12px Tahoma, sans-serif; }
[data-theme="98"] .hist__day { background: #fff; color: #404040; border-radius: 0; box-shadow: var(--in); font: 700 11px Tahoma, sans-serif; }
[data-theme="98"] .hist__day.is-done { background: #000080; color: #fff; }
[data-theme="98"] .hist__day.is-today { border: 0; outline: 1px dotted #000080; outline-offset: -3px; background: #dfdfdf; color: #000080; }
[data-theme="98"] .hist__day.is-today.is-done { background: #000080; color: #fff; outline-color: #fff; }
[data-theme="98"] .hist__day.is-future { background: #c0c0c0; box-shadow: none; border: 1px dashed #808080; color: #808080; }
[data-theme="98"] .hist__rail.is-current { background: #000080; }
[data-theme="98"] .hist__rail.is-past { background: #808080; }
[data-theme="98"] .hist__week.is-met { color: #000080; }
[data-theme="98"] .hist__runnote { background: #fff; border: 0; box-shadow: var(--in); border-radius: 0; }
[data-theme="98"] .hist__toast { background: #000080; color: #fff; border-radius: 0; box-shadow: var(--out); }
[data-theme="98"] .hist__toast .btn { box-shadow: var(--out); background: #c0c0c0; color: #000; border: 0; }
[data-theme="98"] .hist__swatch { background: #fff; box-shadow: var(--in); border-radius: 0; }
[data-theme="98"] .hist__swatch.is-done { background: #000080; }
[data-theme="98"] .hist__swatch.is-rail { background: #000080; box-shadow: none; }
[data-theme="98"] .hist__tick { background: #fff; box-shadow: inset 1px 1px #808080; border-radius: 0; }
[data-theme="98"] .hist__tick.is-met { background: repeating-linear-gradient(45deg, #000080 0 2px, #c0c0c0 2px 4px); }
[data-theme="98"] .hist__tick.is-current { background: #000080; }
[data-theme="98"] .hist__tick.is-future { background: none; box-shadow: none; border-color: #808080; }
[data-theme="98"] .hist__year__rule { background: #808080; }

/* quests */
[data-theme="98"] .qhero { background: #c0c0c0; border-radius: 0; box-shadow: var(--out); padding: 12px; gap: 18px; }
[data-theme="98"] .qhero__big { font: 700 40px Tahoma, sans-serif; color: #000; }
[data-theme="98"] .qhero__when, [data-theme="98"] .qhero__hint, [data-theme="98"] .qhero__tally { font-size: 11px; color: #404040; }
[data-theme="98"] .qhero__clock { font: 700 11px Tahoma, sans-serif; color: #000080; }
[data-theme="98"] .qbar, [data-theme="98"] .progress { height: 14px; background: #fff; border-radius: 0; box-shadow: var(--in); padding: 2px; }
[data-theme="98"] .qbar--big { height: 16px; }
[data-theme="98"] .qbar > i, [data-theme="98"] .progress > i { border-radius: 0; background: repeating-linear-gradient(90deg, var(--area, #000080) 0 8px, #fff 8px 10px); }
[data-theme="98"] .qbar--big > i { background: repeating-linear-gradient(90deg, #000080 0 8px, #fff 8px 10px); }
[data-theme="98"] .quest { background: #c0c0c0; border-left: 6px solid var(--area, #808080); border-radius: 0; box-shadow: var(--out); padding: 10px 12px; gap: 12px; }
[data-theme="98"] .quest__title { font: 700 14px Tahoma, sans-serif; }
[data-theme="98"] .quest__number { font: 700 24px Tahoma, sans-serif; }
[data-theme="98"] .quest__sub, [data-theme="98"] .quest__stats { font-size: 11px; color: #404040; }
[data-theme="98"] .quest__open { color: #000080; text-decoration: underline; font-size: 11px; }
[data-theme="98"] .qlist__head h2 { font: 700 14px Tahoma, sans-serif; }
[data-theme="98"] .tag--warn { background: #800000; color: #fff; }
[data-theme="98"] .tag--ok { background: #006000; color: #fff; }
[data-theme="98"] .qadd { border: 1px dashed #808080; background: #dfdfdf; border-radius: 0; }
[data-theme="98"] .qadd__label { color: #000080; font: 700 12px Tahoma, sans-serif; }
[data-theme="98"] .qpanel, [data-theme="98"] .qpanel--raised { background: #c0c0c0; border-radius: 0; box-shadow: var(--out); padding: 8px; gap: 6px; }
[data-theme="98"] .qpanel h3 { font: 700 12px Tahoma, sans-serif; }
[data-theme="98"] .qpanel p, [data-theme="98"] .qlog__when, [data-theme="98"] .qlog__quest { font-size: 11px; }
/* recent logs as a list view: sunken well, raised column heads, first row selected */
[data-theme="98"] .qlogs { position: relative; gap: 0; background: #fff; box-shadow: var(--in); padding: 2px; }
[data-theme="98"] .qlogs::before, [data-theme="98"] .qlogs::after { font: 700 11px Tahoma, sans-serif; padding: 3px 6px; background: #c0c0c0; box-shadow: inset -1px -1px #808080, inset 1px 1px #fff; }
[data-theme="98"] .qlogs::before { content: "Quest"; display: block; }
[data-theme="98"] .qlogs::after { content: "Change"; position: absolute; top: 2px; right: 2px; width: 150px; box-sizing: border-box; border-left: 1px solid #808080; }
[data-theme="98"] .qlog { border-bottom: 0; padding: 4px 6px; align-items: flex-start; }
[data-theme="98"] .qlog__quest, [data-theme="98"] .qlog__delta { font: 400 11px Tahoma, sans-serif; }
[data-theme="98"] .qlog__delta { font-weight: 700; width: 150px; text-align: right; flex: none; }
[data-theme="98"] .qlog__when { color: #808080; }
[data-theme="98"] .qlog:nth-child(odd) { background: #efefef; }
[data-theme="98"] .qlog:first-child { background: #000080; color: #fff; }
[data-theme="98"] .qlog:first-child .qlog__when { color: #c0c0c0; }
[data-theme="98"] .qtags code { background: #c0c0c0; box-shadow: var(--out); border-radius: 0; font: 400 11px "Courier New", monospace; }

/* sheets, drawers, menus */
[data-theme="98"] .sheet, [data-theme="98"] .m-sheet, [data-theme="98"] .m-drawer, [data-theme="98"] .help, [data-theme="98"] .addmenu, [data-theme="98"] .qjump {
  background: #c0c0c0; border: 0; border-radius: 0; box-shadow: var(--out); border-top: 0;
}
[data-theme="98"] .sheet { border-top: 0; }
[data-theme="98"] .sheet__title { font: 700 13px Tahoma, sans-serif; }
[data-theme="98"] .sheet h3 { font: 700 13px Tahoma, sans-serif; }
[data-theme="98"] .srow__label { font-size: 11px; color: #000; }
[data-theme="98"] .actions { border-top: 1px solid #808080; box-shadow: inset 0 1px #fff; }
[data-theme="98"] .toast { background: #c0c0c0; color: #000; border-radius: 0; box-shadow: var(--out); font: 400 11px Tahoma, sans-serif; }
[data-theme="98"] .settings__tab { text-align: center; padding: 4px 10px; }

/* scrollbars: a dithered track, a bevelled thumb, arrow buttons at each end */
[data-theme="98"] * { scrollbar-color: #c0c0c0 #dfdfdf; }
[data-theme="98"] ::-webkit-scrollbar { width: 16px; height: 16px; }
[data-theme="98"] ::-webkit-scrollbar-track {
  background-color: #c0c0c0;
  background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
    linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);
  background-size: 2px 2px; background-position: 0 0, 1px 1px;
}
[data-theme="98"] ::-webkit-scrollbar-thumb { background: #c0c0c0; box-shadow: var(--out); }
[data-theme="98"] ::-webkit-scrollbar-corner { background: #c0c0c0; }
[data-theme="98"] ::-webkit-scrollbar-button { display: block; width: 16px; height: 16px; background: #c0c0c0 no-repeat center; box-shadow: var(--out); }
[data-theme="98"] ::-webkit-scrollbar-button:active { box-shadow: var(--in); }
/* one button at each end, not two */
[data-theme="98"] ::-webkit-scrollbar-button:vertical:start:increment, [data-theme="98"] ::-webkit-scrollbar-button:vertical:end:decrement,
[data-theme="98"] ::-webkit-scrollbar-button:horizontal:start:increment, [data-theme="98"] ::-webkit-scrollbar-button:horizontal:end:decrement { display: none; }
[data-theme="98"] ::-webkit-scrollbar-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4.5 9.5h7L8 6z' fill='%23000'/%3E%3C/svg%3E"); }
[data-theme="98"] ::-webkit-scrollbar-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4.5 6.5h7L8 10z' fill='%23000'/%3E%3C/svg%3E"); }
[data-theme="98"] ::-webkit-scrollbar-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M9.5 4.5v7L6 8z' fill='%23000'/%3E%3C/svg%3E"); }
[data-theme="98"] ::-webkit-scrollbar-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6.5 4.5v7L10 8z' fill='%23000'/%3E%3C/svg%3E"); }

/* the phone in 98 — the mock is drawn at 11px Tahoma, like the desktop */
@media (max-width: 720px) {
  [data-theme="98"] body { overflow: auto; }
  [data-theme="98"] #app { height: auto; display: block; }
  /* The window sits inside the safe area, so the notch and the home
     indicator fall on the desktop, not on the frame. The desktop above
     and below is painted fixed, so content scrolling past the window's
     edge goes under it; the title bar and the brand row stay pinned. */
  [data-theme="98"] .win { margin: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); min-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  [data-theme="98"] .win::before, [data-theme="98"] .win::after { content: ""; position: fixed; left: 0; right: 0; z-index: 14; background: #008080; pointer-events: none; }
  [data-theme="98"] .win::before { top: 0; height: calc(12px + env(safe-area-inset-top)); }
  [data-theme="98"] .win::after { bottom: 0; height: calc(12px + env(safe-area-inset-bottom)); }
  [data-theme="98"] .win__title { padding: 2px; height: 20px; box-sizing: border-box; position: sticky; top: calc(12px + env(safe-area-inset-top)); z-index: 13; }
  [data-theme="98"] .m-app { min-height: 0; background: #c0c0c0; }
  [data-theme="98"] .m-top { background: #c0c0c0; padding: 6px 6px 0; gap: 6px; top: calc(32px + env(safe-area-inset-top)); }
  [data-theme="98"] .m-brand__title { font: 700 14px Tahoma, sans-serif; letter-spacing: 0; }
  [data-theme="98"] .m-brand__sub { font-size: 11px; color: #404040; }
  [data-theme="98"] .m-help, [data-theme="98"] .m-hist, [data-theme="98"] .m-settings { width: 24px; height: 22px; border-radius: 0; color: #000; }
  [data-theme="98"] .m-hist:disabled { color: #808080; opacity: 1; box-shadow: var(--out); }
  [data-theme="98"] .m-help .icon, [data-theme="98"] .m-hist .icon, [data-theme="98"] .m-settings .icon { width: 12px; height: 12px; }
  [data-theme="98"] .m-modes { margin: 0; padding: 0; width: auto; }
  [data-theme="98"] .m-modes button { flex: 1; padding: 4px 0; box-shadow: inset 1px 1px #fff, inset -1px 0 #0a0a0a; }
  [data-theme="98"] .m-modes button[aria-pressed="true"] { padding: 5px 0 7px; }
  [data-theme="98"] .m-main { margin: 0 6px; padding: 8px 8px 168px; background: #c0c0c0; box-shadow: var(--ridge); }
  [data-theme="98"] .m-week { gap: 8px; }
  [data-theme="98"] .m-weekrow { gap: 8px; }
  [data-theme="98"] .m-weekrow__arrow { width: auto; height: auto; padding: 3px 9px; background: #c0c0c0; color: #000; border-radius: 0; box-shadow: var(--out); font: 400 11px Tahoma, sans-serif; }
  [data-theme="98"] .m-weekrow__arrow:active { box-shadow: var(--in); }
  [data-theme="98"] .m-weekrow__label b { font: 700 12px Tahoma, sans-serif; }
  [data-theme="98"] .m-weekrow__label span { font-size: 11px; color: #404040; }
  [data-theme="98"] .m-daystrip { gap: 3px; }
  [data-theme="98"] .m-daychip { padding: 4px 0; gap: 0; }
  [data-theme="98"] .m-daychip__name { font: 400 10px Tahoma, sans-serif; color: #404040; }
  [data-theme="98"] .m-daychip__num { font: 700 12px Tahoma, sans-serif; }
  [data-theme="98"] .m-daychip.is-past:not(.is-on) { opacity: 1; }
  [data-theme="98"] .m-daychip.is-on { background: #000080; color: #fff; box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff; }
  [data-theme="98"] .m-daychip.is-on .m-daychip__name { color: #c0c0c0; }
  [data-theme="98"] .m-daychip.is-on .m-daychip__num { color: #fff; }
  [data-theme="98"] .m-daychip__bar { display: none; }
  [data-theme="98"] .m-daysum { background: #c0c0c0; border-radius: 0; box-shadow: var(--out); padding: 7px; gap: 6px; }
  [data-theme="98"] .m-daysum__line { font: 400 11px Tahoma, sans-serif; color: #404040; gap: 6px; }
  [data-theme="98"] .m-daysum__line b { font: 700 11px Tahoma, sans-serif; color: #000; }
  [data-theme="98"] .m-daysum .strip { height: 12px; box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff; background: #fff; padding: 2px; }
  [data-theme="98"] .m-daysum__meet { font-size: 11px; color: #000; gap: 6px; }
  [data-theme="98"] .m-daysum__meet .btn { width: 18px; height: 16px; padding: 0; font: 700 11px Tahoma, sans-serif; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff; }
  [data-theme="98"] .m-cards { gap: 6px; }
  [data-theme="98"] .m-cards .card { border-left-width: 5px; border-radius: 0; padding: 7px 8px; gap: 6px; box-shadow: var(--out); }
  [data-theme="98"] .m-cards .card--spurt { border-left-width: 5px; }
  [data-theme="98"] .m-cards .card__title { font: 700 12px Tahoma, sans-serif; }
  [data-theme="98"] .m-cards .card--spill { background: repeating-linear-gradient(45deg, #c0c0c0 0 4px, #cbbaba 4px 8px); }
  [data-theme="98"] .m-move { font: 700 11px Tahoma, sans-serif; color: #000080; }
  [data-theme="98"] .m-empty, [data-theme="98"] .m-hint { font-size: 11px; color: #404040; }
  [data-theme="98"] .m-dayfoot { font: 400 11px Tahoma, sans-serif; color: #404040; }
  [data-theme="98"] .m-dayfoot.is-done { color: #404040; font-weight: 400; }
  [data-theme="98"] .m-dayfoot.is-over { border-radius: 0; box-shadow: var(--groove); background: #c0c0c0; color: #800000; font-weight: 700; padding: 6px 8px; }
  [data-theme="98"] .m-suggest { border: 1px dashed #808080; border-radius: 0; background: #fff; padding: 8px; }
  [data-theme="98"] .m-suggest__lead { font-size: 11px; color: #404040; }
  [data-theme="98"] .m-suggest__title { font: 700 12px Tahoma, sans-serif; color: #000080; }
  [data-theme="98"] .m-suggest .btn--soft { padding: 3px 10px; font: 400 11px Tahoma, sans-serif; }
  [data-theme="98"] .m-bottom { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); background: #c0c0c0; border: 0; box-shadow: var(--out); padding: 6px 6px 8px; gap: 6px; }
  /* just today */
  [data-theme="98"] .m-today { gap: 8px; }
  [data-theme="98"] .m-now { background: #c0c0c0; border-left: 5px solid var(--area, #808080); border-radius: 0; box-shadow: var(--out); padding: 8px 9px; gap: 6px; }
  [data-theme="98"] .m-now__label { font: 700 12px Tahoma, sans-serif; }
  [data-theme="98"] .m-now__title { font: 700 20px Tahoma, sans-serif; letter-spacing: 0; }
  [data-theme="98"] .m-now__meta, [data-theme="98"] .m-now--empty p { font-size: 11px; color: #404040; }
  [data-theme="98"] .m-now__acts { gap: 4px; }
  [data-theme="98"] .m-now__acts .btn { padding: 5px 10px; font-size: 11px; }
  [data-theme="98"] .m-next { gap: 6px; }
  [data-theme="98"] .m-next h3 { font: 700 12px Tahoma, sans-serif; }
  [data-theme="98"] .m-next .card { border-left-width: 5px; border-radius: 0; padding: 7px 8px; gap: 6px; box-shadow: var(--out); }
  [data-theme="98"] .m-next .card__title { font: 700 12px Tahoma, sans-serif; }
  [data-theme="98"] .m-gap { background: #c0c0c0; border-radius: 0; box-shadow: var(--out); padding: 8px; gap: 6px; }
  [data-theme="98"] .m-gap__head h3 { font: 700 12px Tahoma, sans-serif; }
  [data-theme="98"] .m-gap__head span, [data-theme="98"] .m-gap__empty { font-size: 11px; color: #404040; }
  [data-theme="98"] .m-gap__btns { gap: 4px; }
  [data-theme="98"] .m-gap__btns button { background: #c0c0c0; color: #000; border: 0; border-radius: 0; box-shadow: var(--out); padding: 5px 0; font: 700 11px Tahoma, sans-serif; }
  [data-theme="98"] .m-gap__btns button:active, [data-theme="98"] .m-gap__btns button[aria-pressed="true"] { background: #000080; color: #fff; box-shadow: var(--in); }
  [data-theme="98"] .m-gap__list { gap: 6px; }
  [data-theme="98"] .m-cand { background: #c0c0c0; border: 0; border-left: 5px solid var(--area, #808080); border-radius: 0; box-shadow: var(--out); padding: 7px 8px; }
  [data-theme="98"] .m-cand--habit { border-style: none; border-left-style: solid; }
  [data-theme="98"] .m-cand__title { font: 700 12px Tahoma, sans-serif; }
  [data-theme="98"] .m-cand__src { font-size: 11px; color: #404040; }
  [data-theme="98"] .m-add { gap: 0; }
  [data-theme="98"] .m-add__go { margin-left: 3px; }
  [data-theme="98"] .m-add__field { border-radius: 0; padding: 5px 6px; font: 400 11px Tahoma, sans-serif; }
  [data-theme="98"] .m-add__field::placeholder { font-size: 11px; }
  [data-theme="98"] .m-add__go { padding: 5px 14px; }
  [data-theme="98"] .m-add__caret { padding: 5px 7px; }
  [data-theme="98"] .m-add__caret .icon--caret { width: 9px; height: 9px; }
  [data-theme="98"] .m-radarbar { background: #c0c0c0; border-radius: 0; box-shadow: var(--out); padding: 6px 8px; gap: 8px; }
  [data-theme="98"] .m-radarbar__label { font: 700 12px Tahoma, sans-serif; }
  [data-theme="98"] .m-radarbar__dot { width: 8px; height: 8px; border-radius: 0; background: #000; }
  [data-theme="98"] .m-radarbar .tag--count { background: #c0c0c0; box-shadow: var(--groove); border-radius: 0; padding: 1px 7px; font: 400 11px Tahoma, sans-serif; }
  [data-theme="98"] .m-radarbar__caret { font-size: 10px; color: #000; }
  /* quests, the radar drawer and the sheets */
  [data-theme="98"] .m-qadd { border: 1px dashed #808080; background: #dfdfdf; border-radius: 0; padding: 7px 0; font: 700 12px Tahoma, sans-serif; color: #000080; }
  [data-theme="98"] .m-grab { width: 40px; height: 6px; border-radius: 0; background: #c0c0c0; box-shadow: var(--out); }
  [data-theme="98"] .m-sheet, [data-theme="98"] .m-drawer { border-radius: 0; margin: 0 6px; }
  [data-theme="98"] .m-eyebrow { font: 700 10px Tahoma, sans-serif; letter-spacing: 0; text-transform: none; color: #404040; }
  [data-theme="98"] .m-sheet__title { font: 700 14px Tahoma, sans-serif; }
  [data-theme="98"] .m-sheet__meta { font-size: 11px; color: #404040; }
  [data-theme="98"] .m-chip { padding: 4px 9px; }
  [data-theme="98"] .m-chips--folded .m-chip { padding: 4px 9px; font-size: 11px; }
  [data-theme="98"] .m-sheet__acts { border-top: 1px solid #808080; box-shadow: inset 0 1px #fff; padding-top: 8px; gap: 5px; }
  [data-theme="98"] .m-sheet__acts .btn { padding: 5px 12px; font-size: 11px; }
  [data-theme="98"] .m-drawer__head h2 { font: 700 14px Tahoma, sans-serif; letter-spacing: 0; }
  [data-theme="98"] .m-drawer__count, [data-theme="98"] .m-drawer__foot { font-size: 11px; color: #404040; }
  [data-theme="98"] .m-fits { background: #c0c0c0; color: #000; border-radius: 0; box-shadow: var(--out); padding: 3px 9px; font: 400 11px Tahoma, sans-serif; }
  [data-theme="98"] .m-fits:active { box-shadow: var(--in); }
  [data-theme="98"] .tag--day { background: #c0c0c0; color: #000; border-radius: 0; box-shadow: inset -1px -1px #808080, inset 1px 1px #fff; }
  [data-theme="98"] .m-rsec__label { font: 700 12px Tahoma, sans-serif; }
  [data-theme="98"] .card--split { border-radius: 0; }
  [data-theme="98"] .m-totoday { background: #c0c0c0; color: #000; border-radius: 0; box-shadow: var(--out); padding: 4px 10px; font: 700 11px Tahoma, sans-serif; }
  [data-theme="98"] .m-totoday:active { box-shadow: var(--in); }
  [data-theme="98"] .m-chip { padding: 4px 9px; }
  [data-theme="98"] .m-chip.is-on { background: #000080; color: #fff; box-shadow: var(--in); }
  [data-theme="98"] .sheet { border-radius: 0; }
}

/* ==========================================================================
   1b  Windows XP (Luna)
   ========================================================================== */

:root[data-theme="xp"] {
  --bg: #5a8ec8; --surface: #f3f1e6; --surface-2: #ece9d8; --card: #fff; --field: #fff; --pill: #f0efe4;
  --line: #c5c2b2; --line-soft: #c5c2b2; --line-faint: #e0ddcd; --line-strong: #8e8f8f; --dash: #c5c2b2;
  --ink: #000; --ink-2: #333; --muted: #555; --muted-2: #555; --faint: #9a9a8f; --faint-2: #aaa69a;
  --accent: #0054e3; --accent-ink: #003399; --accent-line: #9fc0f0; --accent-soft: #e6f0fb; --today-bg: #fff;
  --ok: #178a3c; --ok-soft: #e8f5ec; --warn: #c0392b; --warn-soft: #fbe3dd; --warn-line: #e0a89a; --warn-ink: #8a5a00;
  --on-ink: #fff; --on-accent: #fff; --hover: #f7f6ee; --scrim: rgba(0, 20, 60, .25); --scrim-strong: rgba(0, 20, 60, .45);
  --quest-chip: #dbe7fb; --quest-chip-ink: #003399; --sunken: #f6f5ec; --none: #a9a591;
  --deep: linear-gradient(135deg, #8fb8f0, #3f74d4);
  --mtg: repeating-linear-gradient(45deg, #c9c5ae 0 3px, #efedde 3px 6px);
  --lunch: linear-gradient(#e8e5d4, #c9c5ae); --mtg-solid: #a9a591; --track: #fff;
  --flame-bg: #f0efe4; --flame-ink: #555; --flame: #d14a24; --flame-line: #8e8f8f;
  --grid-off: #f4f3ea; --grid-off-ink: #777;
  --r-pill: 3px; --r-card: 4px; --r-panel: 5px; --r-sheet: 5px; --r-btn: 3px; --r-field: 3px;
  --shadow-card: none; --shadow-raised: none; --shadow-sheet: 0 5px 14px rgba(0, 0, 0, .35); --shadow-drawer: none;
  --font: Tahoma, "Segoe UI", sans-serif; --mono: "Courier New", monospace;
  --xpbtn: linear-gradient(#fefefe, #f0efe4 45%, #dcd9c6);
  --xpsel: linear-gradient(#5a9bf8, #316ac5);
  --xpcap: linear-gradient(#e8f0fb, #cfe0f4);
  color-scheme: light;
}
[data-theme="xp"] body { background: linear-gradient(#5a8ec8, #7cb0e0 55%, #87b96b) fixed; font-family: var(--font); font-size: 11px; -webkit-font-smoothing: auto; }
[data-theme="xp"] body.is-loading { background: #5a8ec8; }

/* window */
[data-theme="xp"] .win { margin: 20px; background: #0054e3; border-radius: 8px 8px 3px 3px; padding: 0 4px 4px; box-shadow: 0 5px 14px rgba(0, 0, 0, .35); }
[data-theme="xp"] .win__title { gap: 6px; height: 30px; padding: 0 4px 0 7px; background: linear-gradient(#0058ee 0, #3d8ef5 8%, #0a5ae8 45%, #0351d7 90%, #0246bf 100%); border-radius: 8px 8px 0 0; }
[data-theme="xp"] .win__icon { width: 17px; height: 17px; background: linear-gradient(#fff, #cfe3ff); border-radius: 3px; font: 700 10px Tahoma, sans-serif; color: #0054e3; }
[data-theme="xp"] .win__name { color: #fff; font: 700 13px Tahoma, sans-serif; text-shadow: 1px 1px 2px rgba(0, 0, 0, .6); }
[data-theme="xp"] .win__btns { gap: 2px; }
[data-theme="xp"] .win__btn { width: 22px; height: 22px; background: linear-gradient(#7fb4fb 0, #2f7ceb 45%, #1257c8 100%); border: 1px solid #f4f8ff; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
[data-theme="xp"] .win__btn--close { background: linear-gradient(#f5a98b 0, #e2603a 45%, #c3300f 100%); }
[data-theme="xp"] .win__btn--min i { width: 9px; height: 3px; background: #fff; margin-top: 6px; }
[data-theme="xp"] .win__btn--max i { width: 10px; height: 9px; border: 1px solid #fff; border-top: 3px solid #fff; }
[data-theme="xp"] .win__btn--close i { width: 11px; height: 11px; position: relative; }
[data-theme="xp"] .win__btn--close i::before, [data-theme="xp"] .win__btn--close i::after { content: ""; position: absolute; top: 4px; left: -1px; width: 13px; height: 3px; background: #fff; transform: rotate(45deg); border-radius: 1px; }
[data-theme="xp"] .win__btn--close i::after { transform: rotate(-45deg); }
[data-theme="xp"] .win__body { background: #ece9d8; border-radius: 0 0 3px 3px; }
[data-theme="xp"] .win__menu { gap: 16px; padding: 4px 8px; font: 400 11px Tahoma, sans-serif; background: linear-gradient(#f6f5ec, #ece9d8); border-bottom: 1px solid #d6d2c2; }
[data-theme="xp"] .win__status { gap: 4px; padding: 0 8px 8px; background: #ece9d8; border-radius: 0 0 3px 3px; }
[data-theme="xp"] .win__field { background: #f6f5ec; border: 1px solid #d6d2c2; border-radius: 3px; padding: 3px 7px; font: 400 11px Tahoma, sans-serif; color: #555; }
[data-theme="xp"] .win__field:nth-child(2) { width: 180px; }
[data-theme="xp"] .win__field--date { width: 120px; }
/* the menu bar sits between title and body, so the body loses its top corners */
[data-theme="xp"] .win__menu + .win__body { border-radius: 0; }

/* header */
[data-theme="xp"] .top { padding: 8px; gap: 10px; }
[data-theme="xp"] .brand { min-width: 0; gap: 0; }
[data-theme="xp"] .brand h1 { font: 700 14px Tahoma, sans-serif; color: #003399; letter-spacing: 0; }
[data-theme="xp"] .date { font: 400 11px Tahoma, sans-serif; color: #555; }
/* the add field is a flat white box that runs to the split Add button */
[data-theme="xp"] .addbar { min-width: 200px; max-width: none; gap: 0; }
[data-theme="xp"] .addbar input, [data-theme="xp"] .m-add__field { background: #fff; border: 1px solid #7f9db9; border-radius: 3px; padding: 5px 7px; font: 400 11px var(--font); color: #000; }
[data-theme="xp"] .addbar input:focus, [data-theme="xp"] .m-add__field:focus { border-color: #0054e3; box-shadow: 0 0 0 1px #9fc0f0; }
[data-theme="xp"] .addbar input::placeholder, [data-theme="xp"] .field::placeholder, [data-theme="xp"] .m-add__field::placeholder { color: #9a9a8f; }
[data-theme="xp"] .addbar:focus-within, [data-theme="xp"] .m-add:focus-within { outline: none; }
[data-theme="xp"] .top__actions { gap: 5px; }
[data-theme="xp"] .modes { order: 10; width: 100%; background: none; padding: 0; gap: 2px; align-items: flex-end; margin-bottom: -9px; position: relative; z-index: 2; }
[data-theme="xp"] .modes button { background: linear-gradient(#f4f3e9, #e4e1cf); border: 1px solid #919b9c; border-bottom: none; border-radius: 4px 4px 0 0; padding: 5px 18px; margin-bottom: 1px; font: 400 11px Tahoma, sans-serif; color: #000; }
[data-theme="xp"] .modes button[aria-pressed="true"] { background: linear-gradient(#fff, #f7f6ee); padding: 6px 18px 8px; margin-bottom: 0; font-weight: 700; color: #003399; }
[data-theme="xp"] .plan, [data-theme="xp"] .today, [data-theme="xp"] .quests { margin: 0 8px 8px; padding: 10px; background: #fff; border: 1px solid #919b9c; border-radius: 0 3px 3px 3px; gap: 8px; }

/* every raised control */
[data-theme="xp"] .btn, [data-theme="xp"] .btn--outline, [data-theme="xp"] .btn--primary, [data-theme="xp"] .btn--ok,
[data-theme="xp"] .pill, [data-theme="xp"] .stepper__btn, [data-theme="xp"] .weeknav__arrow, [data-theme="xp"] .qhero__arrow,
[data-theme="xp"] .histbtn, [data-theme="xp"] .iconbtn, [data-theme="xp"] .day__add, [data-theme="xp"] .addbar__go, [data-theme="xp"] .addbar__caret,
[data-theme="xp"] .m-help, [data-theme="xp"] .m-hist, [data-theme="xp"] .m-settings, [data-theme="xp"] .m-add__go, [data-theme="xp"] .m-add__caret,
[data-theme="xp"] .settings__tab, [data-theme="xp"] .look, [data-theme="xp"] .streak, [data-theme="xp"] .m-daychip, [data-theme="xp"] .m-chip {
  background: var(--xpbtn); color: #000; border: 1px solid #8e8f8f; border-radius: 3px; box-shadow: none; font-family: var(--font); font-size: 11px; font-weight: 400;
}
[data-theme="xp"] .btn { padding: 5px 12px; }
[data-theme="xp"] .switch { border-radius: 3px; background: #fff; border: 1px solid #7f9db9; padding: 1px; }
[data-theme="xp"] .switch__knob { border-radius: 2px; background: var(--xpbtn); border: 1px solid #8e8f8f; box-shadow: none; }
[data-theme="xp"] .switch[aria-checked="true"] { background: var(--xpsel); border-color: #1b63d8; }
[data-theme="xp"] .alltasks__text { font: 400 11px Tahoma, sans-serif; color: #000; }
[data-theme="xp"] .rail__acts .foldall { margin-top: -1px; }
[data-theme="xp"] .foldall { width: 26px; height: 22px; background: var(--xpbtn); color: #000; border: 1px solid #8e8f8f; border-radius: 3px; }
[data-theme="xp"] .btn--primary, [data-theme="xp"] .qhero__act .btn { font-weight: 700; color: #003399; }
[data-theme="xp"] .btn--ink, [data-theme="xp"] .addbar__go, [data-theme="xp"] .m-add__go { font-weight: 700; color: #000; }
[data-theme="xp"] .btn--ok { color: #147a35; }
[data-theme="xp"] .btn--danger { background: none; border: 0; color: #c0392b; font-weight: 700; }
[data-theme="xp"] .btn--link, [data-theme="xp"] .btn--quiet { background: none; border: 0; color: #0054e3; text-decoration: underline; }
[data-theme="xp"] .btn:hover:not(:disabled), [data-theme="xp"] .pill:hover:not([aria-pressed="true"]) { border-color: #e59700; box-shadow: inset 0 0 0 1px #ffd77a; background: var(--xpbtn); }
[data-theme="xp"] .btn:active, [data-theme="xp"] .pill:active { background: linear-gradient(#dcd9c6, #f0efe4); transform: none; }
[data-theme="xp"] .btn:disabled, [data-theme="xp"] .histbtn:disabled { background: #efeee3; border-color: #c5c2b2; color: #aaa69a; opacity: 1; }
[data-theme="xp"] .addbar__go { padding: 5px 16px; margin-left: 10px; border-radius: 3px 0 0 3px; }
[data-theme="xp"] .addbar__caret { padding: 5px 7px; border-left: 0; border-radius: 0 3px 3px 0; }
[data-theme="xp"] .addbar__caret .icon--caret { width: 9px; height: 9px; }
[data-theme="xp"] .histbtn { width: auto; height: auto; padding: 5px 9px; color: #000; }
[data-theme="xp"] .histbtn .icon--hist { width: 12px; height: 12px; }
[data-theme="xp"] .pill { padding: 3px 9px; }
[data-theme="xp"] .pill[aria-pressed="true"], [data-theme="xp"] .look[aria-checked="true"], [data-theme="xp"] .m-chip.is-on { background: var(--xpsel); color: #fff; border-color: #1b63d8; }
[data-theme="xp"] .settings__tab[aria-current="page"] { background: linear-gradient(#fff, #f7f6ee); color: #003399; font-weight: 700; }
[data-theme="xp"] .look__icon { background: transparent; color: inherit; border-radius: 0; }
[data-theme="xp"] .stepper__btn { width: 18px; height: 16px; font: 700 10px Tahoma, sans-serif; }
[data-theme="xp"] .day__add { width: 18px; height: 16px; font: 700 11px Tahoma, sans-serif; }
[data-theme="xp"] .day.is-today .day__add { color: #000; }
[data-theme="xp"] .stepper__value { font-size: 11px; color: #555; }
[data-theme="xp"] .weeknav__arrow, [data-theme="xp"] .qhero__arrow { width: auto; height: auto; padding: 3px 9px; }
[data-theme="xp"] .weeknav__label h2, [data-theme="xp"] .qhero__label { font: 700 14px Tahoma, sans-serif; color: #003399; letter-spacing: 0; }
[data-theme="xp"] .weeknav__range { font-size: 11px; }
[data-theme="xp"] .plan { grid-template-columns: 240px minmax(0, 1fr); }
[data-theme="xp"] .days { grid-template-columns: repeat(5, minmax(120px, 1fr)) minmax(110px, .9fr); min-width: 0; }
[data-theme="xp"] .weekscroll { padding-bottom: 0; }
[data-theme="xp"] .legend span { font-size: 11px; color: #333; }
[data-theme="xp"] .legend i { width: 10px; height: 10px; border-radius: 2px; border: 1px solid #a9a591; }
[data-theme="xp"] .legend i.deep { border-color: #7f9db9; }
[data-theme="xp"] .legend i.free { background: #fff; border-color: #b9b5a1; }

/* fields */
[data-theme="xp"] .field, [data-theme="xp"] select.field, [data-theme="xp"] textarea.field { background: #fff; border: 1px solid #7f9db9; border-radius: 3px; font-family: var(--font); font-size: 11px; padding: 5px 7px; }
[data-theme="xp"] .field:focus { outline: 0; border-color: #0054e3; box-shadow: 0 0 0 1px #9fc0f0; }

/* rail */
[data-theme="xp"] .rail { background: transparent; padding: 0; gap: 8px; }
[data-theme="xp"] .rail h2 { font: 700 13px Tahoma, sans-serif; color: #003399; }
[data-theme="xp"] .rail__top h2 { line-height: 20px; }
[data-theme="xp"] .rail__sub { font-size: 11px; color: #555; }
[data-theme="xp"] .section, [data-theme="xp"] .section--solid, [data-theme="xp"] .keep { background: #fbfbf7; border: 1px solid #b8c6d8; border-radius: 4px; padding: 0 0 6px; gap: 6px; overflow: hidden; }
[data-theme="xp"] .section__head, [data-theme="xp"] .keep__head { background: var(--xpcap); padding: 5px 7px; font: 700 11px Tahoma, sans-serif; color: #003399; border-bottom: 1px solid #b8c6d8; }
[data-theme="xp"] .section__hint, [data-theme="xp"] .section__peek, [data-theme="xp"] .section__empty, [data-theme="xp"] .section__list { padding-left: 8px; padding-right: 8px; font-size: 11px; }
[data-theme="xp"] .section__empty { color: #aaa; }
[data-theme="xp"] .keep > :not(.keep__head) { margin-left: 8px; margin-right: 8px; }
[data-theme="xp"] .tag--count { background: #fff; border: 1px solid #b8c6d8; border-radius: 8px; color: #000; font-weight: 400; font-size: 11px; padding: 0 6px; min-width: 0; }
[data-theme="xp"] .keep__name { font-size: 11px; }
[data-theme="xp"] .wgrid__cell { height: 19px; border: 1px solid #d6d2c2; border-radius: 3px; background: #f4f3ea; color: #777; font: 400 11px Tahoma, sans-serif; }
[data-theme="xp"] .wgrid__cell.is-done { background: linear-gradient(#6ea8f8, #1b5fd0); border-color: #1b63d8; color: #fff; font-weight: 700; }
[data-theme="xp"] .wgrid__cell.is-today { border: 1px dashed #316ac5; background: #d6e5fb; color: #003399; font-weight: 700; }
[data-theme="xp"] .wgrid__cell.is-done.is-today { border: 1px dashed #fff; outline: 1px solid #1b63d8; background: linear-gradient(#6ea8f8, #1b5fd0); color: #fff; }
[data-theme="xp"] .streak { padding: 2px 8px; color: #555; }
[data-theme="xp"] .streak--togo, [data-theme="xp"] .streak--best { color: #d14a24; font-weight: 700; background: var(--xpbtn); }

/* week */
[data-theme="xp"] .days { gap: 6px; }
[data-theme="xp"] .day { background: linear-gradient(#fbfaf5, #f3f1e6); border: 1px solid #c5c2b2; border-radius: 5px; padding: 8px; gap: 6px; }
[data-theme="xp"] .day.is-past { opacity: 1; }
[data-theme="xp"] .day.is-today { background: #fff; border: 2px solid #0054e3; box-shadow: 0 0 0 1px #9fc0f0; padding: 0 8px 8px; }
[data-theme="xp"] .day.is-today .day__head { background: linear-gradient(#0058ee, #0351d7); margin: 0 -8px 2px; padding: 5px 7px; border-radius: 3px 3px 0 0; color: #fff; }
[data-theme="xp"] .day.is-today .day__name { color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, .4); }
[data-theme="xp"] .day.is-today .day__num { color: #c8dcfa; }
[data-theme="xp"] .day__name { font: 700 13px Tahoma, sans-serif; color: #003399; }
[data-theme="xp"] .day__num { font-size: 13px; color: #9a9a8f; }
[data-theme="xp"] .tag--today { background: linear-gradient(#fff, #dce8fb); border: 1px solid #fff; border-radius: 3px; padding: 1px 7px; font: 700 10px Tahoma, sans-serif; color: #003399; }
[data-theme="xp"] .stepper--tight { gap: 5px; }
[data-theme="xp"] .stepper--tight .stepper__value { flex: 1; text-align: center; min-width: 0; }
[data-theme="xp"] .strip { height: 11px; border: 1px solid #a9a591; border-radius: 3px; background: #fff; padding: 1px; }
[data-theme="xp"] .strip .seg { border-radius: 2px; }
[data-theme="xp"] .strip .seg.free { background: #fff; }
[data-theme="xp"] .freeline { font: 700 11px Tahoma, sans-serif; color: #000; }
[data-theme="xp"] .freeline .is-none { color: #c0392b; }
[data-theme="xp"] .day__nofree { font-size: 11px; color: #9a9a8f; }
[data-theme="xp"] .day__body { gap: 6px; }
[data-theme="xp"] .day__spacer { border: 1px dashed #c5c2b2; border-radius: 4px; }
[data-theme="xp"] .day__foot { border-top: 1px solid #e0ddcd; padding-top: 7px; font: 400 11px Tahoma, sans-serif; color: #555; text-align: left; }
[data-theme="xp"] .day__foot.is-done { color: #555; font-weight: 400; text-align: center; }
[data-theme="xp"] .day__foot.is-over { background: linear-gradient(#fff9e0, #fdefb9); border: 1px solid #d9c26a; border-radius: 4px; padding: 7px; color: #8a5a00; font-weight: 700; text-align: left; }
[data-theme="xp"] .day__done { color: #0054e3; text-decoration: underline; font-size: 11px; }
[data-theme="xp"] .drop-slot { border: 1px dashed #9fc0f0; background: #f7fbff; border-radius: 4px; }
[data-theme="xp"] .is-over { background: #e6f0fb !important; }

/* cards */
[data-theme="xp"] .card { background: linear-gradient(#fff, #f7f5ec); border: 1px solid #c5c2b2; border-left: 5px solid var(--area, #a9a591); border-radius: 4px; padding: 7px 8px; gap: 6px; box-shadow: none; }
[data-theme="xp"] .card--short { padding: 6px 8px; }
[data-theme="xp"] .card--spurt { border-left-style: solid; border-left-width: 5px; }
[data-theme="xp"] .card--habit-session, [data-theme="xp"] .card--bounced { border-style: solid; }
[data-theme="xp"] .card--spill { background: linear-gradient(#fff5f3, #fbe3dd); border-color: #e0a89a; }
[data-theme="xp"] .card--done { background: #f3f1e6; border-color: #d6d2c2; }
[data-theme="xp"] .card--done .card__title { color: #8a8778; }
[data-theme="xp"] .card--selected { border-color: #0054e3; box-shadow: 0 0 0 1px #9fc0f0; }
[data-theme="xp"] .card__title { font: 700 12px Tahoma, sans-serif; line-height: 1.35; }
[data-theme="xp"] .meta { font-size: 11px; color: #555; gap: 2px 8px; }
[data-theme="xp"] .tag { border-radius: 3px; font: 700 10px Tahoma, sans-serif; padding: 1px 7px; }
[data-theme="xp"] .tag--high { background: linear-gradient(#e06a4a, #b02a12); border: 1px solid #8f2410; color: #fff; }
[data-theme="xp"] .card__quest { background: linear-gradient(#f2f6fe, #dbe7fb); border: 1px solid #9fc0f0; color: #003399; border-radius: 3px; font: 400 10px Tahoma, sans-serif; padding: 1px 7px; }
[data-theme="xp"] .card__prio { background: #b02a12; }
[data-theme="xp"] .suggest { background: #f7fbff; border: 1px dashed #9fc0f0; border-radius: 4px; }
[data-theme="xp"] .suggest__title { font: 700 11px Tahoma, sans-serif; color: #003399; }

/* just today: the Now card is a card, the gap finder a captioned panel of Luna buttons */
[data-theme="xp"] .now { background: linear-gradient(#fff, #f7f5ec); border: 1px solid #c5c2b2; border-left: 5px solid var(--area, #a9a591); border-radius: 4px; box-shadow: none; padding: 14px 16px; min-height: 0; gap: 8px; }
[data-theme="xp"] .now__label { font: 700 12px Tahoma, sans-serif; color: #003399; }
[data-theme="xp"] .now__title { font: 700 32px Tahoma, sans-serif; letter-spacing: 0; }
[data-theme="xp"] .now__meta { font-size: 11px; color: #555; gap: 10px; }
[data-theme="xp"] .now--empty p { font-size: 11px; }
[data-theme="xp"] .box { border-radius: 4px; font-size: 11px; padding: 7px 9px; }
[data-theme="xp"] .box--note { background: #fff; border: 1px solid #c5c2b2; }
[data-theme="xp"] .box--crumb { background: #f7fbff; border: 1px solid #9fc0f0; }
[data-theme="xp"] .box--crumb b { color: #003399; font: 700 11px Tahoma, sans-serif; }
[data-theme="xp"] .nudge { background: #f7fbff; border: 1px solid #9fc0f0; border-radius: 4px; font-size: 11px; }
[data-theme="xp"] .warnline { font-size: 11px; }
[data-theme="xp"] .today__head h2 { font: 700 20px Tahoma, sans-serif; color: #003399; letter-spacing: 0; }
[data-theme="xp"] .today__head span, [data-theme="xp"] .next .hint { font-size: 11px; color: #555; }
[data-theme="xp"] .next h3 { font: 700 13px Tahoma, sans-serif; color: #003399; }
[data-theme="xp"] .gap { background: #fff; border: 1px solid #b8c6d8; border-radius: 5px; padding: 0 0 8px; gap: 6px; overflow: hidden; }
[data-theme="xp"] .gap h3 { background: var(--xpcap); padding: 6px 9px; font: 700 12px Tahoma, sans-serif; color: #003399; border-bottom: 1px solid #b8c6d8; }
[data-theme="xp"] .gap > :not(h3) { margin-left: 9px; margin-right: 9px; }
[data-theme="xp"] .gap p, [data-theme="xp"] .gap__empty { font-size: 11px; color: #555; }
[data-theme="xp"] .gap__btns { gap: 5px; }
[data-theme="xp"] .gap__btns button { background: var(--xpbtn); color: #000; border: 1px solid #8e8f8f; border-radius: 3px; box-shadow: none; padding: 5px 4px; font: 700 11px Tahoma, sans-serif; }
[data-theme="xp"] .gap__btns button:hover { border-color: #e59700; box-shadow: inset 0 0 0 1px #ffd77a; }
[data-theme="xp"] .gap__btns button[aria-pressed="true"] { background: var(--xpsel); color: #fff; border-color: #1b63d8; box-shadow: none; }
[data-theme="xp"] .parked { background: #f3f1e6; border: 1px solid #c5c2b2; border-radius: 4px; padding: 7px 10px; font-size: 11px; color: #333; }

/* all logged days & streaks */
[data-theme="xp"] .histbtn-in, [data-theme="xp"] .hist__close, [data-theme="xp"] .hist__arrow { background: var(--xpbtn); color: #000; border: 1px solid #8e8f8f; border-radius: 3px; font: 400 11px Tahoma, sans-serif; }
[data-theme="xp"] .histbtn-in { font-weight: 700; color: #003399; padding: 5px 11px; }
[data-theme="xp"] .hist__arrow:disabled { background: #efeee3; border-color: #c5c2b2; color: #aaa69a; }
[data-theme="xp"] .hist__head { background: var(--xpcap); border-color: #b8c6d8; }
[data-theme="xp"] .hist__title { font: 700 14px Tahoma, sans-serif; color: #003399; }
[data-theme="xp"] .hist__month { font: 700 12px Tahoma, sans-serif; color: #003399; }
[data-theme="xp"] .hist__stats { background: #d6d2c2; border-color: #d6d2c2; }
[data-theme="xp"] .hist__stat { background: #fff; }
[data-theme="xp"] .hist__day { background: #fff; border: 1px solid #c5c2b2; border-radius: 3px; color: #777; font: 700 11px Tahoma, sans-serif; }
[data-theme="xp"] .hist__day.is-done { background: var(--xpsel); border-color: #1b63d8; color: #fff; }
[data-theme="xp"] .hist__day.is-today { background: #e6f0fb; border: 1px dashed #316ac5; color: #003399; }
[data-theme="xp"] .hist__day.is-today.is-done { background: var(--xpsel); border: 1px dashed #fff; color: #fff; }
[data-theme="xp"] .hist__day.is-future { background: #fbfbf7; border: 1px dashed #d6d2c2; color: #aaa69a; }
[data-theme="xp"] .hist__rail.is-current { background: #0054e3; }
[data-theme="xp"] .hist__rail.is-past { background: #9fc0f0; }
[data-theme="xp"] .hist__week.is-met { color: #003399; }
[data-theme="xp"] .hist__runnote { background: #f7fbff; border: 1px solid #9fc0f0; border-radius: 4px; }
[data-theme="xp"] .hist__runnote b { color: #003399; }
[data-theme="xp"] .hist__toast { background: #003399; color: #fff; border-radius: 4px; }
[data-theme="xp"] .hist__toast .btn { background: var(--xpbtn); color: #000; border: 1px solid #8e8f8f; }
[data-theme="xp"] .hist__swatch { background: #fff; border: 1px solid #c5c2b2; border-radius: 3px; }
[data-theme="xp"] .hist__swatch.is-done { background: var(--xpsel); border-color: #1b63d8; }
[data-theme="xp"] .hist__swatch.is-rail { background: #0054e3; border: 0; }
[data-theme="xp"] .hist__tick { background: #e0ddcd; }
[data-theme="xp"] .hist__tick.is-met { background: #9fc0f0; }
[data-theme="xp"] .hist__tick.is-current { background: #0054e3; }
[data-theme="xp"] .hist__tick.is-future { background: none; border-color: #d6d2c2; }

/* quests */
[data-theme="xp"] .qhero { background: linear-gradient(#f7fbff, #e6f0fb); border: 1px solid #9fc0f0; border-radius: 6px; padding: 14px; gap: 20px; box-shadow: none; }
[data-theme="xp"] .qhero__big { font: 700 42px Tahoma, sans-serif; color: #003399; }
[data-theme="xp"] .qhero__when, [data-theme="xp"] .qhero__hint, [data-theme="xp"] .qhero__tally { font-size: 11px; color: #555; }
[data-theme="xp"] .qhero__clock { font: 700 11px Tahoma, sans-serif; color: #0054e3; }
[data-theme="xp"] .qbar, [data-theme="xp"] .progress { height: 16px; background: #fff; border: 1px solid #7f9db9; border-radius: 3px; padding: 2px; }
[data-theme="xp"] .qbar--big { height: 18px; }
[data-theme="xp"] .qbar > i, [data-theme="xp"] .progress > i, [data-theme="xp"] .qbar--big > i { border-radius: 2px; background: repeating-linear-gradient(90deg, #3bb04a 0 10px, transparent 10px 13px); }
[data-theme="xp"] .quest:has(.tag--warn) .qbar > i { background: repeating-linear-gradient(90deg, #c9401f 0 10px, transparent 10px 13px); }
[data-theme="xp"] .quest { background: linear-gradient(#fff, #f7f5ec); border: 1px solid #c5c2b2; border-left: 6px solid var(--area, #a9a591); border-radius: 5px; padding: 11px 13px; gap: 14px; box-shadow: none; }
[data-theme="xp"] .quest__title { font: 700 15px Tahoma, sans-serif; }
[data-theme="xp"] .quest__number { font: 700 26px Tahoma, sans-serif; color: #003399; }
[data-theme="xp"] .quest__sub, [data-theme="xp"] .quest__stats { font-size: 11px; color: #555; }
[data-theme="xp"] .quest__open { color: #0054e3; text-decoration: underline; font-size: 11px; }
[data-theme="xp"] .tag--warn { background: linear-gradient(#f1a48d, #c9401f); border: 1px solid #9f3015; color: #fff; }
[data-theme="xp"] .tag--ok { background: linear-gradient(#5ec27a, #178a3c); border: 1px solid #147a35; color: #fff; }
[data-theme="xp"] .qlist__head h2 { font: 700 15px Tahoma, sans-serif; color: #003399; }
[data-theme="xp"] .qadd { border: 1px dashed #9fc0f0; background: #f7fbff; border-radius: 5px; }
[data-theme="xp"] .qadd__label { color: #0054e3; font: 700 12px Tahoma, sans-serif; }
[data-theme="xp"] .qpanel, [data-theme="xp"] .qpanel--raised { background: #fff; border: 1px solid #b8c6d8; border-radius: 5px; padding: 0 0 8px; gap: 6px; overflow: hidden; box-shadow: none; }
[data-theme="xp"] .qpanel h3 { background: var(--xpcap); padding: 6px 9px; font: 700 12px Tahoma, sans-serif; color: #003399; border-bottom: 1px solid #b8c6d8; }
[data-theme="xp"] .qpanel > :not(h3) { margin-left: 9px; margin-right: 9px; }
[data-theme="xp"] .qpanel p, [data-theme="xp"] .qlog__when, [data-theme="xp"] .qlog__quest { font-size: 11px; }
/* recent logs as a list view: white well, column heads, first row selected */
[data-theme="xp"] .qlogs { position: relative; gap: 0; background: #fff; margin: -6px 0 0 !important; }
[data-theme="xp"] .qlogs::before, [data-theme="xp"] .qlogs::after { font: 700 11px Tahoma, sans-serif; padding: 4px 8px; background: linear-gradient(#fdfdfd, #eceae0); border-bottom: 1px solid #d6d2c2; box-sizing: border-box; }
[data-theme="xp"] .qlogs::before { content: "Quest"; display: block; }
[data-theme="xp"] .qlogs::after { content: "Change"; position: absolute; top: 0; right: 0; width: 150px; border-left: 1px solid #d6d2c2; }
[data-theme="xp"] .qlog { border-bottom: 0; padding: 5px 8px; align-items: flex-start; }
[data-theme="xp"] .qlog__quest, [data-theme="xp"] .qlog__delta { font: 400 11px Tahoma, sans-serif; }
[data-theme="xp"] .qlog__delta { font-weight: 700; width: 150px; text-align: right; flex: none; }
[data-theme="xp"] .qlog__when { color: #888; }
[data-theme="xp"] .qlog:nth-child(odd) { background: #f5f9fe; }
[data-theme="xp"] .qlog:first-child { background: var(--xpsel); color: #fff; }
[data-theme="xp"] .qlog:first-child .qlog__when { color: #dce8fb; }
[data-theme="xp"] .qtags code { background: var(--xpbtn); border: 1px solid #8e8f8f; border-radius: 3px; font: 400 11px "Courier New", monospace; }

/* sheets, drawers, menus */
[data-theme="xp"] .sheet, [data-theme="xp"] .m-sheet, [data-theme="xp"] .m-drawer, [data-theme="xp"] .help, [data-theme="xp"] .addmenu, [data-theme="xp"] .qjump {
  background: #ece9d8; border: 1px solid #0054e3; border-radius: 5px; box-shadow: 0 5px 14px rgba(0, 0, 0, .35);
}
[data-theme="xp"] .sheet { border-top: 1px solid #0054e3; }
[data-theme="xp"] .sheet__title, [data-theme="xp"] .sheet h3 { font: 700 13px Tahoma, sans-serif; color: #003399; }
[data-theme="xp"] .srow__label { font-size: 11px; color: #333; }
[data-theme="xp"] .actions { border-top: 1px solid #d6d2c2; }
[data-theme="xp"] .toast { background: linear-gradient(#fff9e0, #fdefb9); color: #333; border: 1px solid #d9c26a; border-radius: 4px; font: 400 11px Tahoma, sans-serif; }
[data-theme="xp"] .settings__tab { text-align: center; padding: 5px 10px; }

/* scrollbars: Luna's pale track, glossy blue thumb with a grip, blue arrow buttons */
[data-theme="xp"] * { scrollbar-color: #b6d0fb #f2f0e8; }
[data-theme="xp"] ::-webkit-scrollbar { width: 17px; height: 17px; }
[data-theme="xp"] ::-webkit-scrollbar-track { background: linear-gradient(90deg, #f0eee5, #f8f7f2 40%, #f8f7f2 60%, #f0eee5); box-shadow: inset 1px 0 #e6e3d7, inset -1px 0 #e6e3d7; }
[data-theme="xp"] ::-webkit-scrollbar-track:horizontal { background: linear-gradient(#f0eee5, #f8f7f2 40%, #f8f7f2 60%, #f0eee5); box-shadow: inset 0 1px #e6e3d7, inset 0 -1px #e6e3d7; }
[data-theme="xp"] ::-webkit-scrollbar-thumb {
  border: 1px solid #7ea3e6; border-radius: 3px; box-shadow: inset 1px 1px #fff;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M1 1.5h6M1 3.5h6M1 5.5h6' stroke='%236a91d6'/%3E%3Cpath d='M1 2.5h6M1 4.5h6M1 6.5h6' stroke='%23fff'/%3E%3C/svg%3E") no-repeat center,
    linear-gradient(90deg, #dbe8fd, #bcd3fb 40%, #a9c6f8 70%, #b8cffa);
}
[data-theme="xp"] ::-webkit-scrollbar-thumb:horizontal {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M1.5 1v6M3.5 1v6M5.5 1v6' stroke='%236a91d6'/%3E%3Cpath d='M2.5 1v6M4.5 1v6M6.5 1v6' stroke='%23fff'/%3E%3C/svg%3E") no-repeat center,
    linear-gradient(#dbe8fd, #bcd3fb 40%, #a9c6f8 70%, #b8cffa);
}
[data-theme="xp"] ::-webkit-scrollbar-thumb:hover { border-color: #5b8ae0; }
[data-theme="xp"] ::-webkit-scrollbar-corner { background: #ece9d8; }
[data-theme="xp"] ::-webkit-scrollbar-button {
  display: block; width: 17px; height: 17px; border: 1px solid #7ea3e6; border-radius: 3px; box-shadow: inset 1px 1px #fff;
  background: no-repeat center, linear-gradient(90deg, #d2e2fd, #b1cdfb 40%, #9dbef8 70%, #adc8fa);
}
[data-theme="xp"] ::-webkit-scrollbar-button:horizontal { background: no-repeat center, linear-gradient(#d2e2fd, #b1cdfb 40%, #9dbef8 70%, #adc8fa); }
[data-theme="xp"] ::-webkit-scrollbar-button:active { background-color: #9dbef8; box-shadow: inset 1px 1px rgba(0, 0, 0, .12); }
[data-theme="xp"] ::-webkit-scrollbar-button:vertical:start:increment, [data-theme="xp"] ::-webkit-scrollbar-button:vertical:end:decrement,
[data-theme="xp"] ::-webkit-scrollbar-button:horizontal:start:increment, [data-theme="xp"] ::-webkit-scrollbar-button:horizontal:end:decrement { display: none; }
[data-theme="xp"] ::-webkit-scrollbar-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4.5 10L8 6.5l3.5 3.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(90deg, #d2e2fd, #b1cdfb 40%, #9dbef8 70%, #adc8fa); }
[data-theme="xp"] ::-webkit-scrollbar-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4.5 6.5L8 10l3.5-3.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(90deg, #d2e2fd, #b1cdfb 40%, #9dbef8 70%, #adc8fa); }
[data-theme="xp"] ::-webkit-scrollbar-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M10 4.5L6.5 8l3.5 3.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(#d2e2fd, #b1cdfb 40%, #9dbef8 70%, #adc8fa); }
[data-theme="xp"] ::-webkit-scrollbar-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6.5 4.5L10 8l-3.5 3.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(#d2e2fd, #b1cdfb 40%, #9dbef8 70%, #adc8fa); }

/* the phone in XP — the mock is drawn at 11px Tahoma, like the desktop */
@media (max-width: 720px) {
  [data-theme="xp"] body { overflow: auto; }
  [data-theme="xp"] #app { height: auto; display: block; }
  /* the window sits inside the safe area; see the 98 block for why */
  [data-theme="xp"] .win { margin: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); min-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 0 3px 3px; }
  [data-theme="xp"] .win::before, [data-theme="xp"] .win::after { content: ""; position: fixed; left: 0; right: 0; z-index: 14; pointer-events: none; }
  [data-theme="xp"] .win::before { top: 0; height: calc(14px + env(safe-area-inset-top)); background: #5a8ec8; }
  [data-theme="xp"] .win::after { bottom: 0; height: calc(14px + env(safe-area-inset-bottom)); background: #87b96b; }
  [data-theme="xp"] .win__title { height: 28px; position: sticky; top: calc(14px + env(safe-area-inset-top)); z-index: 13; }
  [data-theme="xp"] .win__body { padding: 8px; }
  [data-theme="xp"] .m-app { min-height: 0; background: #ece9d8; }
  [data-theme="xp"] .m-top { background: #ece9d8; padding: 0 0 0; gap: 8px; top: calc(42px + env(safe-area-inset-top)); }
  [data-theme="xp"] .m-brand__title { font: 700 15px Tahoma, sans-serif; color: #003399; letter-spacing: 0; }
  [data-theme="xp"] .m-brand__sub { font-size: 11px; color: #555; }
  [data-theme="xp"] .m-help, [data-theme="xp"] .m-hist, [data-theme="xp"] .m-settings { width: 26px; height: 24px; color: #000; }
  [data-theme="xp"] .m-hist:disabled { background: #efeee3; border-color: #c5c2b2; color: #aaa69a; opacity: 1; box-shadow: none; }
  [data-theme="xp"] .m-help .icon, [data-theme="xp"] .m-hist .icon, [data-theme="xp"] .m-settings .icon { width: 13px; height: 13px; }
  [data-theme="xp"] .m-modes { margin: 0; padding: 0; width: auto; }
  [data-theme="xp"] .m-modes button { flex: 1; padding: 5px 0; }
  [data-theme="xp"] .m-modes button[aria-pressed="true"] { padding: 6px 0 8px; }
  [data-theme="xp"] .m-main { margin: 0; padding: 10px 10px 168px; background: #fff; border: 1px solid #919b9c; border-radius: 0 3px 3px 3px; }
  [data-theme="xp"] .m-week { gap: 9px; }
  [data-theme="xp"] .m-weekrow__arrow { width: auto; height: auto; padding: 4px 11px; background: var(--xpbtn); color: #000; border: 1px solid #8e8f8f; border-radius: 3px; box-shadow: none; font: 400 11px Tahoma, sans-serif; }
  [data-theme="xp"] .m-weekrow__arrow:active { background: linear-gradient(#dcd9c6, #f0efe4); }
  [data-theme="xp"] .m-weekrow__label b { font: 700 13px Tahoma, sans-serif; color: #003399; }
  [data-theme="xp"] .m-weekrow__label span { font-size: 11px; color: #555; }
  [data-theme="xp"] .m-daystrip { gap: 4px; }
  [data-theme="xp"] .m-daychip { background: linear-gradient(#fbfaf5, #eceada); border: 1px solid #c5c2b2; border-radius: 4px; padding: 5px 0; gap: 0; }
  [data-theme="xp"] .m-daychip__name { font: 400 10px Tahoma, sans-serif; color: #777; }
  [data-theme="xp"] .m-daychip__num { font: 700 12px Tahoma, sans-serif; color: #000; }
  [data-theme="xp"] .m-daychip.is-past:not(.is-on) { opacity: 1; }
  [data-theme="xp"] .m-daychip.is-on { background: var(--xpsel); border-color: #1b63d8; }
  [data-theme="xp"] .m-daychip.is-on .m-daychip__name { color: #dce8fb; }
  [data-theme="xp"] .m-daychip.is-on .m-daychip__num { color: #fff; }
  [data-theme="xp"] .m-daychip__bar { display: none; }
  [data-theme="xp"] .m-daysum { background: linear-gradient(#f7fbff, #e6f0fb); border: 1px solid #9fc0f0; border-radius: 5px; padding: 9px; gap: 7px; }
  [data-theme="xp"] .m-daysum__line { font: 400 11px Tahoma, sans-serif; color: #555; gap: 6px; }
  [data-theme="xp"] .m-daysum__line b { font: 700 11px Tahoma, sans-serif; color: #000; }
  [data-theme="xp"] .m-daysum .strip { height: 14px; border: 1px solid #7f9db9; border-radius: 3px; background: #fff; padding: 2px; }
  [data-theme="xp"] .m-daysum__meet { font-size: 11px; color: #333; gap: 8px; }
  [data-theme="xp"] .m-daysum__meet .btn { width: 20px; height: 18px; padding: 0; font: 700 11px Tahoma, sans-serif; background: linear-gradient(#fefefe, #dcd9c6); }
  [data-theme="xp"] .m-cards { gap: 7px; }
  [data-theme="xp"] .m-cards .card { border-left-width: 5px; border-radius: 4px; padding: 8px 9px; gap: 7px; box-shadow: none; }
  [data-theme="xp"] .m-cards .card--spurt { border-left-width: 5px; }
  [data-theme="xp"] .m-cards .card__title { font: 700 13px Tahoma, sans-serif; }
  [data-theme="xp"] .m-move { font: 700 11px Tahoma, sans-serif; color: #0054e3; }
  [data-theme="xp"] .m-empty, [data-theme="xp"] .m-hint { font-size: 11px; color: #555; }
  [data-theme="xp"] .m-dayfoot { font: 400 11px Tahoma, sans-serif; color: #555; }
  [data-theme="xp"] .m-dayfoot.is-done { color: #555; font-weight: 400; }
  [data-theme="xp"] .m-dayfoot.is-over { background: linear-gradient(#fff9e0, #fdefb9); border: 1px solid #d9c26a; border-radius: 4px; color: #8a5a00; font-weight: 700; padding: 7px 9px; }
  [data-theme="xp"] .m-suggest { border: 1px dashed #9fc0f0; border-radius: 5px; background: #f7fbff; padding: 9px; }
  [data-theme="xp"] .m-suggest__lead { font-size: 11px; color: #555; }
  [data-theme="xp"] .m-suggest__title { font: 700 13px Tahoma, sans-serif; color: #003399; }
  [data-theme="xp"] .m-suggest .btn--soft { padding: 4px 11px; font: 400 11px Tahoma, sans-serif; }
  [data-theme="xp"] .m-bottom { left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); background: #ece9d8; border: 1px solid #919b9c; border-radius: 3px; box-shadow: none; padding: 8px 8px 10px; gap: 8px; }
  /* just today */
  [data-theme="xp"] .m-today { gap: 9px; }
  [data-theme="xp"] .m-now { background: linear-gradient(#fff, #f7f5ec); border: 1px solid #c5c2b2; border-left: 5px solid var(--area, #a9a591); border-radius: 4px; box-shadow: none; padding: 10px 11px; gap: 7px; }
  [data-theme="xp"] .m-now__label { font: 700 12px Tahoma, sans-serif; color: #003399; }
  [data-theme="xp"] .m-now__title { font: 700 20px Tahoma, sans-serif; letter-spacing: 0; }
  [data-theme="xp"] .m-now__meta, [data-theme="xp"] .m-now--empty p { font-size: 11px; color: #555; }
  [data-theme="xp"] .m-now__acts { gap: 5px; }
  [data-theme="xp"] .m-now__acts .btn { padding: 6px 11px; font-size: 11px; }
  [data-theme="xp"] .m-next { gap: 7px; }
  [data-theme="xp"] .m-next h3 { font: 700 13px Tahoma, sans-serif; color: #003399; }
  [data-theme="xp"] .m-next .card { border-left-width: 5px; border-radius: 4px; padding: 8px 9px; gap: 7px; }
  [data-theme="xp"] .m-next .card__title { font: 700 13px Tahoma, sans-serif; }
  [data-theme="xp"] .m-gap { background: #fff; border: 1px solid #b8c6d8; border-radius: 5px; padding: 0 0 9px; gap: 7px; overflow: hidden; }
  [data-theme="xp"] .m-gap__head { background: var(--xpcap); padding: 6px 9px; border-bottom: 1px solid #b8c6d8; }
  [data-theme="xp"] .m-gap > :not(.m-gap__head) { margin-left: 9px; margin-right: 9px; }
  [data-theme="xp"] .m-gap__head h3 { font: 700 12px Tahoma, sans-serif; color: #003399; }
  [data-theme="xp"] .m-gap__head span, [data-theme="xp"] .m-gap__empty { font-size: 11px; color: #555; }
  [data-theme="xp"] .m-gap__btns { gap: 5px; }
  [data-theme="xp"] .m-gap__btns button { background: var(--xpbtn); color: #000; border: 1px solid #8e8f8f; border-radius: 3px; box-shadow: none; padding: 5px 0; font: 700 11px Tahoma, sans-serif; }
  [data-theme="xp"] .m-gap__btns button[aria-pressed="true"] { background: var(--xpsel); color: #fff; border-color: #1b63d8; }
  [data-theme="xp"] .m-gap__list { gap: 7px; }
  [data-theme="xp"] .m-cand { background: linear-gradient(#fff, #f7f5ec); border: 1px solid #c5c2b2; border-left: 5px solid var(--area, #a9a591); border-radius: 4px; box-shadow: none; padding: 8px 9px; }
  [data-theme="xp"] .m-cand--habit { border-style: solid; }
  [data-theme="xp"] .m-cand__title { font: 700 13px Tahoma, sans-serif; }
  [data-theme="xp"] .m-cand__src { font-size: 11px; color: #555; }
  [data-theme="xp"] .m-add { gap: 0; }
  [data-theme="xp"] .m-add__go { margin-left: 4px; }
  [data-theme="xp"] .m-add__field { padding: 6px 7px; font: 400 11px Tahoma, sans-serif; }
  [data-theme="xp"] .m-add__field::placeholder { font-size: 11px; }
  [data-theme="xp"] .m-add__go { padding: 6px 15px; border-radius: 3px 0 0 3px; }
  [data-theme="xp"] .m-add__caret { padding: 6px 8px; border-left: 0; border-radius: 0 3px 3px 0; }
  [data-theme="xp"] .m-add__caret .icon--caret { width: 9px; height: 9px; }
  [data-theme="xp"] .m-radarbar { background: var(--xpcap); border: 1px solid #b8c6d8; border-radius: 4px; padding: 7px 9px; gap: 8px; }
  [data-theme="xp"] .m-radarbar__label { font: 700 12px Tahoma, sans-serif; color: #003399; }
  [data-theme="xp"] .m-radarbar__dot { width: 8px; height: 8px; border-radius: 0; background: #003399; }
  [data-theme="xp"] .m-radarbar .tag--count { background: #fff; }
  [data-theme="xp"] .m-radarbar__caret { font-size: 10px; color: #003399; }
  /* quests, the radar drawer and the sheets */
  [data-theme="xp"] .m-qadd { border: 1px dashed #9fc0f0; background: #f7fbff; border-radius: 5px; padding: 8px 0; font: 700 12px Tahoma, sans-serif; color: #0054e3; }
  [data-theme="xp"] .m-grab { width: 40px; height: 6px; border-radius: 3px; background: var(--xpbtn); border: 1px solid #8e8f8f; box-sizing: border-box; }
  [data-theme="xp"] .m-sheet, [data-theme="xp"] .m-drawer { border-radius: 5px 5px 0 0; margin: 0 6px; }
  [data-theme="xp"] .m-eyebrow { font: 700 10px Tahoma, sans-serif; letter-spacing: 0; text-transform: none; color: #555; }
  [data-theme="xp"] .m-sheet__title { font: 700 14px Tahoma, sans-serif; color: #003399; }
  [data-theme="xp"] .m-sheet__meta { font-size: 11px; color: #555; }
  [data-theme="xp"] .m-chips--folded .m-chip { padding: 4px 9px; font-size: 11px; }
  [data-theme="xp"] .m-sheet__acts { border-top: 1px solid #d6d2c2; padding-top: 8px; gap: 5px; }
  [data-theme="xp"] .m-sheet__acts .btn { padding: 6px 12px; font-size: 11px; }
  [data-theme="xp"] .m-drawer__head h2 { font: 700 14px Tahoma, sans-serif; color: #003399; letter-spacing: 0; }
  [data-theme="xp"] .m-drawer__count, [data-theme="xp"] .m-drawer__foot { font-size: 11px; color: #555; }
  [data-theme="xp"] .m-fits { background: var(--xpbtn); color: #000; border: 1px solid #8e8f8f; border-radius: 3px; padding: 3px 9px; font: 400 11px Tahoma, sans-serif; }
  [data-theme="xp"] .tag--day { background: linear-gradient(#f2f6fe, #dbe7fb); border: 1px solid #9fc0f0; color: #003399; border-radius: 3px; }
  [data-theme="xp"] .m-rsec__label { font: 700 12px Tahoma, sans-serif; color: #003399; }
  [data-theme="xp"] .card--split { border-radius: 4px; }
  [data-theme="xp"] .m-totoday { background: var(--xpbtn); color: #000; border: 1px solid #8e8f8f; border-radius: 3px; padding: 4px 10px; font: 700 11px Tahoma, sans-serif; }
  [data-theme="xp"] .m-chip { padding: 4px 9px; }
}