/* One shared Windows tray section; only the era text is underlined. */
:root[data-os] .clock-era{display:inline-flex;align-items:center;align-self:stretch;flex:0 0 auto;gap:0;padding:0 3px;white-space:nowrap;font:11px Tahoma,Arial,sans-serif;font-variant-numeric:tabular-nums;color:#111}
:root[data-os] .clock-era :is(.clock-tray,.platform-clock,.environment-year,#environment-button){display:inline-flex;align-items:center;justify-content:center;align-self:stretch;margin:0;padding:0 5px;min-width:0;min-height:28px;border:0;border-radius:0;box-shadow:none;background:transparent;color:inherit;font:inherit;font-variant-numeric:inherit;line-height:1;gap:0;white-space:nowrap;text-decoration:none}
:root[data-os] .clock-era time{font:inherit;font-variant-numeric:inherit;text-decoration:none}
:root[data-os] .clock-era [data-os-year]{text-decoration:underline dotted;text-underline-offset:3px}
:root[data-os] .clock-era button:hover{outline:none;background:#0000000d}
:root[data-os] .clock-era button:focus-visible{outline:1px dotted currentColor;outline-offset:-3px}
:root[data-os] .taskbar .clock-era button:is([aria-pressed=true],[aria-expanded=true]){box-shadow:none;outline:none;background:#00000012}
:root[data-family=windows] .taskbar>.clock-era{background:var(--chrome);border:1px solid;border-color:#808080 #fff #fff #808080;box-shadow:none}
:root[data-os=xp] .taskbar>.clock-era{color:#fff;background:linear-gradient(#36c1f0,#169bed 18%,#168ddd);border:0;border-left:1px solid #104bb1;box-shadow:inset 1px 0 #5ec4f3;padding-left:7px;padding-right:4px}
:root[data-os=xp] .clock-era button:hover,:root[data-os=xp] .taskbar .clock-era button:is([aria-pressed=true],[aria-expanded=true]){background:#ffffff16}
:root[data-family=mac] .taskbar>.clock-era{margin-left:auto}
:root[data-family=mac] .clock-era{font-size:11px;padding:0}
:root[data-family=mac] .clock-era :is(.clock-tray,#environment-button){min-height:26px}
:root[data-os=ubuntu] .taskbar>.clock-era{display:none}
:root[data-os=ubuntu] .platform-topbar>.clock-era{margin-left:auto;color:inherit;font-family:inherit;padding:0}
:root[data-os=ubuntu] .platform-topbar .clock-era button{min-height:26px}
@media(max-width:820px){:root[data-os] .taskbar .clock-era{font-size:11px;padding:0 2px}:root[data-os] .taskbar .clock-era :is(.clock-tray,#environment-button){min-height:36px;padding:0 4px}:root[data-family=mac] .taskbar .clock-era :is(.clock-tray,#environment-button){min-height:26px;padding:0 4px}}
@media(max-width:450px){:root[data-family=mac] .taskbar .clock-era,:root[data-os=ubuntu] .platform-topbar .clock-era{font-size:10px}:root[data-os=ubuntu] .platform-topbar .clock-era button{padding:0 4px}}
/* Tray calendar pop-up: anchored beside the clock by accessories.js, never a taskbar window.
   Each desktop restyles it through the --cf-* tokens below so it reads as that OS's own clock pop-up. */
.clock-flyout{--cf-bg:var(--chrome,#c0c0c0);--cf-fg:#000;--cf-font:var(--os-font,Tahoma,Arial,sans-serif);--cf-border:2px solid;--cf-border-color:#fff #404040 #404040 #fff;--cf-radius:0;--cf-shadow:inset -1px -1px #808080,2px 2px #0006;--cf-pad:8px;
 --cf-time-size:20px;--cf-time-weight:700;--cf-time-fg:inherit;--cf-time-bg:transparent;--cf-time-margin:0 0 8px;--cf-date-fg:#333;--cf-sep:1px solid #808080;--cf-sep-shadow:0 1px #fff;
 --cf-grid-bg:#fff;--cf-grid-border:2px inset #ddd;--cf-grid-radius:0;--cf-head-bg:#eee;--cf-head-fg:#444;--cf-day-fg:#000;--cf-hover:#0000000f;--cf-day-radius:0;--cf-sel-bg:var(--navy,#000080);--cf-sel-fg:#fff;--cf-sel-border:transparent;--cf-today:var(--navy,#000080);
 --cf-nav-bg:var(--cf-bg);--cf-nav-fg:inherit;--cf-nav-border:2px outset #eee;--cf-nav-radius:0;--cf-month-fg:inherit;
 position:fixed;z-index:215;width:250px;max-width:calc(100vw - 8px);padding:var(--cf-pad);background:var(--cf-bg);color:var(--cf-fg);font:12px var(--cf-font);border:var(--cf-border);border-color:var(--cf-border-color);border-radius:var(--cf-radius);box-shadow:var(--cf-shadow)}
.clock-flyout-time{display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 0 8px;margin:var(--cf-time-margin);border-bottom:var(--cf-sep);box-shadow:var(--cf-sep-shadow);background:var(--cf-time-bg);color:var(--cf-time-fg)}
.clock-flyout .live-time{font:var(--cf-time-weight) var(--cf-time-size) var(--cf-font);font-variant-numeric:tabular-nums}
.clock-flyout .live-date{font-size:11px;color:var(--cf-date-fg);text-align:center}
.clock-flyout .calendar-nav button{background:var(--cf-nav-bg);color:var(--cf-nav-fg);border:var(--cf-nav-border);border-radius:var(--cf-nav-radius);font-family:var(--cf-font)}
.clock-flyout .calendar-month{color:var(--cf-month-fg);font-family:var(--cf-font)}
.clock-flyout .calendar-grid{min-height:0;margin-bottom:8px;background:var(--cf-grid-bg);border:var(--cf-grid-border);border-radius:var(--cf-grid-radius)}
.clock-flyout .calendar-grid>*{min-height:24px;font-size:11px;font-family:var(--cf-font)}
.clock-flyout .calendar-grid .weekday{background:var(--cf-head-bg);color:var(--cf-head-fg)}
.clock-flyout .calendar-grid button{background:transparent;color:var(--cf-day-fg);border-radius:var(--cf-day-radius)}
.clock-flyout .calendar-grid button:hover{background:var(--cf-hover)}
.clock-flyout .calendar-grid .today{border-color:var(--cf-today)}
.clock-flyout .calendar-grid button[aria-selected=true]{background:var(--cf-sel-bg);color:var(--cf-sel-fg);border-color:var(--cf-sel-border)}
.clock-flyout .calendar-grid .today[aria-selected=true]{border-color:var(--cf-today)}
.clock-flyout-actions{display:flex;justify-content:space-between;gap:6px}
.clock-flyout-actions .bevel-button{min-height:26px;padding:3px 8px;font-size:11px;font-family:var(--cf-font)}
/* Windows XP: Luna blue title band, cream body, XP list selection. */
:root[data-os=xp] .clock-flyout{--cf-font:Tahoma,Arial,sans-serif;--cf-bg:#ece9d8;--cf-border:1px solid;--cf-border-color:#0054e3;--cf-radius:6px 6px 0 0;--cf-shadow:2px 2px 6px #0005;--cf-pad:0 8px 8px;--cf-time-bg:linear-gradient(#7ca9ff 0,#0865f3 10%,#0054e3 45%,#0051d6 80%,#1e69ea);--cf-time-fg:#fff;--cf-time-margin:0 -8px 8px;--cf-date-fg:#dfe9ff;--cf-sep:0;--cf-sep-shadow:inset 0 1px #ffffff55;--cf-grid-border:1px solid #7f9db9;--cf-head-bg:#d6dff7;--cf-head-fg:#215dc6;--cf-hover:#c1d2ee;--cf-sel-bg:#316ac5;--cf-today:#e3a21a;--cf-nav-bg:linear-gradient(#fff,#ecebe6);--cf-nav-border:1px solid #003c74;--cf-nav-radius:3px;--cf-nav-fg:#151515;--cf-month-fg:#215dc6}
:root[data-os=xp] .clock-flyout-time{padding:6px 0 7px;border-radius:5px 5px 0 0;text-shadow:1px 1px #0a246a}
/* Windows Vista: Aero glass frame around a white pane. */
:root[data-os=vista] .clock-flyout{--cf-bg:linear-gradient(#fdfeff,#e6eef6);--cf-fg:#1e395b;--cf-border:1px solid;--cf-border-color:#3c637b;--cf-radius:6px;--cf-shadow:inset 0 0 0 1px #ffffffb0,0 4px 18px #0006;--cf-time-weight:300;--cf-time-size:24px;--cf-time-fg:#1e395b;--cf-date-fg:#3a6ea5;--cf-sep:1px solid #c5d6e6;--cf-sep-shadow:none;--cf-grid-border:1px solid #b6c8d8;--cf-grid-radius:3px;--cf-head-bg:#edf4fa;--cf-head-fg:#1e395b;--cf-day-fg:#1e395b;--cf-hover:#e5f3fb;--cf-day-radius:2px;--cf-sel-bg:linear-gradient(#dcebfc,#c1dbfc);--cf-sel-fg:#1e395b;--cf-sel-border:#7da2ce;--cf-today:#3399ff;--cf-nav-bg:transparent;--cf-nav-fg:#1e395b;--cf-nav-border:1px solid transparent;--cf-nav-radius:3px;--cf-month-fg:#1e395b}
:root[data-os=vista] .clock-flyout .calendar-nav button:hover{background:#e5f3fb;border-color:#7da2ce}
:root[data-os=vista] .clock-flyout .clock-flyout-actions .bevel-button{background:linear-gradient(#f2f2f2,#ebebeb 45%,#dddddd 46%,#cfcfcf);border:1px solid #707070;border-radius:3px;box-shadow:inset 0 0 0 1px #fffc;color:#000}
/* Windows 10: dark acrylic flyout with the accent-blue "today". */
:root[data-os="10"] .clock-flyout{--cf-bg:#1f1f1ff5;--cf-fg:#fff;--cf-border:1px solid;--cf-border-color:#4d4d4d;--cf-shadow:0 5px 24px #0008;--cf-pad:12px;--cf-time-weight:300;--cf-time-size:30px;--cf-date-fg:#9ecfff;--cf-sep:1px solid #3a3a3a;--cf-sep-shadow:none;--cf-grid-bg:transparent;--cf-grid-border:0;--cf-head-bg:transparent;--cf-head-fg:#fff;--cf-day-fg:#fff;--cf-hover:#ffffff1f;--cf-sel-bg:transparent;--cf-sel-fg:#fff;--cf-sel-border:#0078d7;--cf-today:#0078d7;--cf-nav-bg:transparent;--cf-nav-fg:#fff;--cf-nav-border:1px solid transparent;--cf-month-fg:#fff;backdrop-filter:blur(16px)}
:root[data-os="10"] .clock-flyout .calendar-grid .today{background:#0078d7;color:#fff}
:root[data-os="10"] .clock-flyout .calendar-grid button{border-width:2px}
:root[data-os="10"] .clock-flyout .calendar-nav button:hover{background:#ffffff1f}
:root[data-os="10"] .clock-flyout .clock-flyout-actions .bevel-button{background:#ffffff1a;color:#fff;border:2px solid transparent;border-radius:0;box-shadow:none}
:root[data-os="10"] .clock-flyout .clock-flyout-actions .bevel-button:hover{border-color:#ffffff55}
/* Windows 11: rounded Mica panel, round accent "today". */
:root[data-os="11"] .clock-flyout{--cf-bg:#f3f6faf5;--cf-fg:#1b2533;--cf-border:1px solid;--cf-border-color:#cdd7e3;--cf-radius:8px;--cf-shadow:0 8px 28px #0003;--cf-pad:12px;--cf-time-weight:600;--cf-time-size:22px;--cf-date-fg:#606878;--cf-sep:1px solid #dfe5ed;--cf-sep-shadow:none;--cf-grid-bg:transparent;--cf-grid-border:0;--cf-head-bg:transparent;--cf-head-fg:#606878;--cf-day-fg:#1b2533;--cf-hover:#0000000d;--cf-day-radius:50%;--cf-sel-bg:#0067c01a;--cf-sel-fg:#1b2533;--cf-sel-border:transparent;--cf-today:#0067c0;--cf-nav-bg:transparent;--cf-nav-fg:#1b2533;--cf-nav-border:1px solid transparent;--cf-nav-radius:4px;--cf-month-fg:#1b2533;backdrop-filter:blur(24px)}
:root[data-os="11"] .clock-flyout .calendar-grid button{aspect-ratio:1;justify-self:center;width:28px;min-height:0;padding:0}
:root[data-os="11"] .clock-flyout .calendar-grid .today{background:#0067c0;color:#fff}
:root[data-os="11"] .clock-flyout .calendar-nav button:hover{background:#0000000d}
:root[data-os="11"] .clock-flyout .clock-flyout-actions .bevel-button{background:#fff;color:#1b2533;border:1px solid #d3dbe5;border-bottom-color:#b9c4d1;border-radius:4px;box-shadow:none}
/* System 7: one-bit black on white, rounded push buttons. */
:root[data-os=system7] .clock-flyout{--cf-font:Geneva,'Courier New',monospace;--cf-bg:#fff;--cf-border:1px solid;--cf-border-color:#000;--cf-shadow:1px 1px #000;--cf-date-fg:#000;--cf-sep:1px solid #000;--cf-sep-shadow:none;--cf-grid-border:1px solid #000;--cf-head-bg:#fff;--cf-head-fg:#000;--cf-hover:#ddd;--cf-sel-bg:#000;--cf-sel-fg:#fff;--cf-today:#000;--cf-nav-bg:#fff;--cf-nav-fg:#000;--cf-nav-border:1px solid #000;--cf-nav-radius:6px}
:root[data-os=system7] .clock-flyout .calendar-grid .weekday{border-bottom:1px solid #000}
:root[data-os=system7] .clock-flyout .calendar-grid .today{border-style:dotted}
:root[data-os=system7] .clock-flyout .clock-flyout-actions .bevel-button{background:#fff;color:#000;border:1px solid #000;border-radius:6px;box-shadow:none}
/* Mac OS 9: Platinum grey with lavender highlight. */
:root[data-os=mac9] .clock-flyout{--cf-font:Geneva,Arial,sans-serif;--cf-bg:#ddd;--cf-border:1px solid;--cf-border-color:#333;--cf-shadow:inset 1px 1px #fff,inset -1px -1px #999,1px 1px #111,2px 2px #6668;--cf-date-fg:#333;--cf-sep:1px solid #999;--cf-sep-shadow:0 1px #fff;--cf-grid-border:1px solid #666;--cf-head-bg:#eee;--cf-head-fg:#333;--cf-hover:#e6e6ff;--cf-sel-bg:#ccf;--cf-sel-fg:#000;--cf-today:#333;--cf-nav-bg:linear-gradient(#fff,#ccc);--cf-nav-fg:#111;--cf-nav-border:1px solid #333;--cf-nav-radius:4px}
:root[data-os=mac9] .clock-flyout .clock-flyout-actions .bevel-button{background:linear-gradient(#fff,#ccc);color:#111;border:1px solid #333;border-radius:4px;box-shadow:inset -1px -1px #999}
/* Ubuntu 10.04: Ambiance dark panel calendar with orange highlight. */
:root[data-os=ubuntu] .clock-flyout{--cf-font:'DejaVu Sans',Arial,sans-serif;--cf-bg:linear-gradient(#45443f,#3c3b37);--cf-fg:#dfdbd2;--cf-border:1px solid;--cf-border-color:#2b2a26;--cf-radius:0 0 4px 4px;--cf-shadow:0 3px 10px #0007;--cf-date-fg:#aea79f;--cf-sep:1px solid #2b2a26;--cf-sep-shadow:0 1px #ffffff14;--cf-grid-bg:#3c3b37;--cf-grid-border:1px solid #2b2a26;--cf-grid-radius:3px;--cf-head-bg:transparent;--cf-head-fg:#aea79f;--cf-day-fg:#dfdbd2;--cf-hover:#ffffff17;--cf-day-radius:3px;--cf-sel-bg:linear-gradient(#f39966,#f07746);--cf-sel-fg:#fff;--cf-today:#f07746;--cf-nav-bg:transparent;--cf-nav-fg:#dfdbd2;--cf-nav-border:1px solid transparent;--cf-nav-radius:3px;--cf-month-fg:#fff}
:root[data-os=ubuntu] .clock-flyout .calendar-nav button:hover{background:#ffffff17;border-color:#2b2a26}
:root[data-os=ubuntu] .clock-flyout .clock-flyout-actions .bevel-button{background:linear-gradient(#5a5953,#45443f);color:#eee;border:1px solid #2b2a26;border-radius:3px;box-shadow:inset 0 1px #ffffff1f}
/* KDE 3.5: Plastik grey with KDE blue selection. */
:root[data-os=kde] .clock-flyout{--cf-font:'DejaVu Sans',Arial,sans-serif;--cf-bg:#efefef;--cf-border:1px solid;--cf-border-color:#8a9dbb;--cf-radius:3px;--cf-shadow:inset 0 1px #fff,2px 2px 5px #0003;--cf-date-fg:#444;--cf-sep:1px solid #c7cdd6;--cf-sep-shadow:0 1px #fff;--cf-grid-border:1px solid #879ab7;--cf-grid-radius:2px;--cf-head-bg:#e5edf5;--cf-head-fg:#355780;--cf-hover:#dde7f5;--cf-sel-bg:#3c70b5;--cf-sel-fg:#fff;--cf-today:#c4302b;--cf-nav-bg:linear-gradient(#fff,#e0e5ed);--cf-nav-fg:#16324f;--cf-nav-border:1px solid #879ab7;--cf-nav-radius:3px;--cf-month-fg:#16324f}
/* While the calendar is open, the year lights up so its "Change…" row has something to point at. */
:root[data-os] .clock-era:has([data-clock-flyout][aria-expanded=true]) :is(.environment-year,#environment-button){background:#0000000d;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 40%,transparent)}
:root[data-os=xp] .clock-era:has([data-clock-flyout][aria-expanded=true]) :is(.environment-year,#environment-button){background:#ffffff26}
.clock-flyout{max-height:calc(100dvh - 40px);overflow-y:auto}
/* Year picker at the top of the pop-up: one button per desktop, the current one pressed. */
.clock-flyout{--cf-chip-bg:var(--cf-nav-bg);--cf-chip-fg:var(--cf-nav-fg);--cf-chip-border:var(--cf-nav-border);--cf-chip-on-bg:var(--cf-sel-bg);--cf-chip-on-fg:var(--cf-sel-fg)}
.clock-flyout-era{margin:0 0 8px;padding:6px 7px 7px;background:var(--cf-grid-bg);border:var(--cf-grid-border);border-radius:var(--cf-grid-radius)}
.clock-flyout-era-title{margin:0 0 2px;font:700 11px var(--cf-font);color:var(--cf-month-fg)}
.clock-flyout-era-name{min-height:14px;margin:0 0 6px;font:11px var(--cf-font);color:var(--cf-month-fg)}
/* Years grouped by family: a small heading, then four full years per row. */
.clock-flyout-family{display:block;margin:4px 0 2px;font:700 10.5px var(--cf-font);color:var(--cf-month-fg)}
.clock-flyout-family:first-child{margin-top:0}
.clock-flyout-years>div{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
:root[data-os] .clock-flyout .clock-flyout-years .bevel-button{min-width:0;min-height:22px;padding:1px 0;font:11px var(--cf-font);font-variant-numeric:tabular-nums;background:var(--cf-chip-bg);color:var(--cf-chip-fg);border:var(--cf-chip-border);border-radius:var(--cf-nav-radius);box-shadow:none}
:root[data-os] .clock-flyout .clock-flyout-years .bevel-button:hover{filter:brightness(.94)}
:root[data-os] .clock-flyout .clock-flyout-years .bevel-button[aria-pressed=true]{background:var(--cf-chip-on-bg);color:var(--cf-chip-on-fg);font-weight:700}
:root[data-os=vista] .clock-flyout{--cf-chip-bg:linear-gradient(#fff,#e9eff6);--cf-chip-border:1px solid #b6c8d8}
:root[data-os="10"] .clock-flyout{--cf-chip-bg:#ffffff1a;--cf-chip-on-bg:#0078d7;--cf-chip-on-fg:#fff}
:root[data-os="10"] .clock-flyout .clock-flyout-years .bevel-button:hover{filter:none;background:#ffffff33}
:root[data-os="11"] .clock-flyout{--cf-chip-bg:#fff;--cf-chip-border:1px solid #d3dbe5;--cf-chip-on-bg:#0067c0;--cf-chip-on-fg:#fff}
:root[data-os=ubuntu] .clock-flyout{--cf-chip-bg:#ffffff12;--cf-chip-border:1px solid #2b2a26}
/* One-time tip balloon above (or below) the year, restyled per desktop through the --et-* tokens. */
.era-tip{--et-bg:#ffffe1;--et-fg:#000;--et-border:1px solid #000;--et-radius:8px;--et-font:Tahoma,Arial,sans-serif;--et-shadow:2px 2px 4px #0005;
 position:fixed;z-index:214;width:236px;max-width:calc(100vw - 8px);box-sizing:border-box;padding:8px 24px 9px 10px;background:var(--et-bg);color:var(--et-fg);border:var(--et-border);border-radius:var(--et-radius);box-shadow:var(--et-shadow);font:11px/1.35 var(--et-font);cursor:pointer;animation:era-tip-in .25s ease-out}
.era-tip::after{content:'';position:absolute;bottom:-6px;right:calc(var(--era-tip-arrow,20px) - 5px);width:9px;height:9px;background:var(--et-bg);border:var(--et-border);border-width:0 1px 1px 0;transform:rotate(45deg)}
.era-tip.is-below::after{bottom:auto;top:-6px;border-width:1px 0 0 1px}
.era-tip-title{display:block;margin-bottom:3px;font-weight:700}
.era-tip-title::before{content:'ⓘ ';font-weight:400}
.era-tip p{margin:0}
.era-tip-close{position:absolute;top:3px;right:3px;width:18px;height:18px;padding:0;border:0;border-radius:3px;background:transparent;color:inherit;font:700 13px/1 var(--et-font);cursor:pointer}
.era-tip-close:hover{background:#0000001a}
.era-tip-close:focus-visible{outline:1px dotted currentColor}
@keyframes era-tip-in{from{opacity:0;transform:translateY(4px)}}
.era-tip.is-below{animation-name:era-tip-in-below}
@keyframes era-tip-in-below{from{opacity:0;transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.era-tip{animation:none}}
:root[data-os=vista] .era-tip{--et-bg:#fdfeff;--et-fg:#1e395b;--et-border:1px solid #3c637b;--et-radius:6px;--et-font:'Segoe UI',Tahoma,Arial,sans-serif;--et-shadow:0 4px 14px #0005}
:root[data-os="10"] .era-tip{--et-bg:#1f1f1f;--et-fg:#fff;--et-border:1px solid #4d4d4d;--et-radius:0;--et-font:'Segoe UI',Arial,sans-serif;--et-shadow:0 5px 18px #0008}
:root[data-os="10"] .era-tip-close:hover{background:#ffffff26}
:root[data-os="11"] .era-tip{--et-bg:#f3f6fa;--et-fg:#1b2533;--et-border:1px solid #cdd7e3;--et-radius:8px;--et-font:'Segoe UI Variable','Segoe UI',Arial,sans-serif;--et-shadow:0 8px 24px #0003}
:root[data-family=mac] .era-tip{--et-bg:#fff;--et-radius:12px;--et-font:Geneva,Arial,sans-serif;--et-shadow:1px 1px #000}
:root[data-os=ubuntu] .era-tip{--et-bg:#2b2a26;--et-fg:#f2f1f0;--et-border:1px solid #1c1b18;--et-radius:6px;--et-font:Ubuntu,'DejaVu Sans',Arial,sans-serif;--et-shadow:0 3px 10px #0007}
:root[data-os=ubuntu] .era-tip-close:hover{background:#ffffff26}
:root[data-os=kde] .era-tip{--et-bg:#efefef;--et-fg:#16324f;--et-border:1px solid #8a9dbb;--et-radius:4px;--et-font:'DejaVu Sans',Arial,sans-serif;--et-shadow:2px 2px 5px #0003}
@media print{.clock-era,.clock-flyout,.era-tip{display:none!important}}