/* Everyday status comes first. The same controls remain available on a rail;
   the month grid takes space only when its native disclosure is open. */
.systems-zone:not([data-area-state="rail"])>.system-scroll-region{gap:9px}
.systems-zone:not([data-area-state="rail"])>.system-scroll-region>*{order:0}
.systems-zone:not([data-area-state="rail"])>.system-scroll-region>.rail-group{display:none!important}
.systems-zone:not([data-area-state="rail"]) .time-block{
  min-height:46px;
  align-items:center;
  gap:12px;
  padding:2px 3px 8px;
  margin:0;
}
.systems-zone:not([data-area-state="rail"]) .time-block>.live-time{
  font-size:34px;
  line-height:1;
  font-weight:350;
  letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;
}
.systems-zone:not([data-area-state="rail"]) .time-block b{font-size:12px}
.systems-zone:not([data-area-state="rail"]) .time-block small{font-size:11px;margin-top:3px}
.systems-zone:not([data-area-state="rail"])>.system-scroll-region>.quick-settings{
  flex:0 0 auto;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
  margin:0;
}
.systems-zone:not([data-area-state="rail"]) .quick-toggle{
  min-width:0;
  height:46px;
  min-height:46px;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  padding:5px 1px 8px;
}
.systems-zone:not([data-area-state="rail"]) .quick-toggle>span:not(.theme-dot){font-size:10px;line-height:1.1}
.systems-zone:not([data-area-state="rail"]) .system-launchers{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px;
  margin:0;
}
.systems-zone:not([data-area-state="rail"]) .system-launcher{min-height:30px;height:30px;gap:6px;padding:4px 8px}
.systems-zone:not([data-area-state="rail"]) .system-launcher>span{font-size:11px}
.systems-zone:not([data-area-state="rail"]) .layout-mode-status{padding:4px 2px;min-height:30px;gap:5px;font-size:10px}
.systems-zone[data-area-state="expanded"]:is([data-dock-edge="left"],[data-dock-edge="right"]) .system-launchers{grid-template-columns:minmax(0,1fr) auto}
.systems-zone:not([data-area-state="rail"]) .layout-mode-status{grid-column:auto}
.systems-zone:not([data-area-state="rail"])>.system-scroll-region>.static-widget-stack{
  margin:0;
  padding:0;
  border:0;
  gap:0;
  align-content:start;
}
.systems-zone:not([data-area-state="rail"]) .system-widget{padding:10px}
.systems-zone:not([data-area-state="rail"]) .calendar-widget:not([hidden]){display:block}
.systems-zone .system-widget[hidden]{display:none!important}
.systems-zone:not([data-area-state="rail"]) .widget-heading{height:auto;min-height:25px;align-items:center;gap:8px;margin-bottom:4px}
.systems-zone:not([data-area-state="rail"]) .widget-heading h2{font-size:12px}
.systems-zone:not([data-area-state="rail"]) .calendar-widget .next-event{
  display:flex;
  align-items:center;
  width:100%;
  min-width:0;
  margin:0;
  padding:7px 8px;
  gap:9px;
  text-align:left;
  color:var(--text);
  border:0;
  cursor:pointer;
}
.systems-zone .next-event>span{flex:1;min-width:0}
.systems-zone .next-event>svg{width:14px;height:14px;flex:0 0 14px;color:var(--muted)}
.systems-zone:not([data-area-state="rail"]) .next-event small{font-size:11px;line-height:1.4}
.systems-zone .system-month{margin-top:6px;border-top:1px solid var(--line)}
.systems-zone .system-month>summary{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:30px;
  padding:5px 2px;
  list-style:none;
  cursor:pointer;
  font-size:11px;
  color:var(--muted);
}
.systems-zone .system-month>summary::-webkit-details-marker{display:none}
.systems-zone .system-month>summary>span:first-child{flex:1;color:var(--text)}
.systems-zone .system-month>summary>svg{width:13px;height:13px;transform:rotate(90deg);transition:transform 120ms ease}
.systems-zone .system-month[open]>summary>svg{transform:rotate(-90deg)}
.systems-zone .system-month>summary:hover{color:var(--text);background:var(--ui-quiet-hover)}
.systems-zone .system-month>summary:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.systems-zone:not([data-area-state="rail"]) .notification{padding-block:8px}
.systems-zone:not([data-area-state="rail"]) .notification b{font-size:12px}
.systems-zone:not([data-area-state="rail"]) .notification small{font-size:11px}
.systems-zone:not([data-area-state="rail"]) .system-device-stack{padding-top:2px}

/* The expanded panel follows document order; rails keep three clear groups. */
.systems-zone[data-area-state="rail"]>.system-scroll-region>.static-widget-stack{display:none!important}
.systems-zone[data-area-state="rail"]>.system-scroll-region>.quick-settings{margin:0}

/* Horizontal docks use the existing scrollable row, with the same reading
   order and independently scrollable full-month/notification widgets. */
.systems-zone[data-area-state="expanded"]:is([data-dock-edge="top"],[data-dock-edge="bottom"])>.system-scroll-region>*{order:0}
.systems-zone[data-area-state="expanded"]:is([data-dock-edge="top"],[data-dock-edge="bottom"]) .time-block{flex-basis:136px}
.systems-zone[data-area-state="expanded"]:is([data-dock-edge="top"],[data-dock-edge="bottom"])>.system-scroll-region>.quick-settings{
  flex:0 0 130px;
  width:130px;
  min-width:130px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:center;
}
.systems-zone[data-area-state="expanded"]:is([data-dock-edge="top"],[data-dock-edge="bottom"]) .system-launchers{display:flex;flex-basis:126px;flex-direction:column}
.systems-zone[data-area-state="expanded"]:is([data-dock-edge="top"],[data-dock-edge="bottom"]) .system-launcher{height:auto;min-height:34px}
.systems-zone[data-area-state="expanded"]:is([data-dock-edge="top"],[data-dock-edge="bottom"]) .static-widget-stack{align-items:stretch}
@media(prefers-reduced-motion:reduce){.systems-zone .system-month>summary>svg{transition:none}}