/* ==========================================================================
   orbis — the world economic calendar on a globe
   Dark, instrument-panel aesthetic: the globe is the subject, the UI is glass
   laid over it. Nothing animates unless a number changed.
   ========================================================================== */

:root {
  --bg:            #05070c;
  --bg-deep:       #030408;

  --panel:         rgba(10, 14, 23, 0.74);
  --panel-solid:   #0a0e17;
  --line:          rgba(125, 155, 195, 0.15);
  --line-strong:   rgba(125, 155, 195, 0.28);

  --ink:           #dbe3f0;
  --ink-strong:    #f4f7fc;
  --ink-dim:       #7f8ea6;
  /* Measured against rendered pixels rather than declared colours: the panels
     are translucent over a lit globe, so #727f97 held 5:1 on the page
     background but only 4.5:1 on the glass, and less where the globe is
     bright. #7a88a0 clears the AA floor in both places and still reads as a
     step down from --ink-dim. */
  --ink-faint:     #7a88a0;

  --accent:        #4da3ff;
  --accent-soft:   rgba(77, 163, 255, 0.14);

  /* Impact scale — also mirrored in js/globe.js for the 3D markers. */
  --impact-3:      #ff4d6d;
  --impact-2:      #ffb347;
  --impact-1:      #6c8cb5;
  --impact-0:      #8b7bd8;

  --up:            #3ddc97;
  --down:          #ff6b81;

  --radius:        12px;
  --radius-sm:     8px;

  --rail-left:     300px;
  --rail-right:    372px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Stage
   -------------------------------------------------------------------------- */

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
#stage.is-dragging { cursor: grabbing; }
#stage.is-over-marker { cursor: pointer; }

/* Vignette keeps the panel edges legible over bright parts of the globe. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 38%, rgba(3, 4, 8, 0.72) 100%);
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Boot screen
   -------------------------------------------------------------------------- */

.boot {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  background: var(--bg-deep);
  transition: opacity 520ms ease;
}
.boot.is-done { opacity: 0; pointer-events: none; }

.boot-mark {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  border-top-color: var(--accent);
  animation: spin 1.1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.boot-text {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.boot-error {
  margin: 0;
  max-width: 46ch;
  text-align: center;
  color: var(--impact-3);
  font-size: 13px;
  line-height: 1.6;
  /* The message carries newlines and indented commands: keep both. */
  white-space: pre-line;
}

/* --------------------------------------------------------------------------
   Shell grid — the middle column stays empty so the globe keeps the pointer
   -------------------------------------------------------------------------- */

.shell {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: var(--rail-left) 1fr var(--rail-right);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "top   top   top"
    "left  void  right"
    "time  time  time";
  gap: 14px;
  padding: 14px;
  pointer-events: none;
}
.shell > * { pointer-events: auto; }

/* --- Skip link ------------------------------------------------------------ */

/* Off-screen until focused, which is the whole point: it is there for the
   keyboard and invisible to everyone else. */
.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 60;
  padding: 9px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--panel-solid);
  color: var(--ink-strong);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}
/* :focus as well as :focus-visible -- a skip link is only ever reached by
   keyboard, and some engines withhold focus-visible on a programmatic focus,
   which would leave it off-screen exactly when it is needed. */
.skip-link:focus,
.skip-link:focus-visible { transform: none; }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.topbar {
  grid-area: top;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Without this the row refuses to shrink below its content and the whole bar
     runs off a phone screen, taking the controls at its right edge with it. */
  min-width: 0;
  flex-wrap: wrap;
}
.topbar > * { min-width: 0; }

.brand { display: flex; align-items: center; gap: 11px; }

.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  position: relative;
  flex: none;
  box-shadow: none;
}
.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  border: 1.2px solid rgba(77, 163, 255, 0.55);
}
.brand-mark::before { clip-path: inset(44% 0 44% 0); }
.brand-mark::after  { border-radius: 50%; transform: scaleX(0.42); }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
/* An h1 by markup, the same wordmark by sight: the heading exists for the
   document outline, not to add a heading-sized block to the topbar. */
.brand-name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--ink-strong);
}
.brand-tag {
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.topbar-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.clock {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  backdrop-filter: blur(14px);
}

/* Says which part of the world the clock belongs to, and by how far it differs
   from the reader's own -- the times in the event list are UTC, and a reader in
   Sao Paulo reading 21:00 needs to know that is 18:00 for them. */
.clock-offset {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
  padding-left: 8px;
  border-left: 1px solid var(--line);
}
.clock-tag {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}
.clock-value {
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.lang {
  display: flex;
  align-items: stretch;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--panel);
  backdrop-filter: blur(14px);
}
.lang button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  transition: color 160ms ease, background 160ms ease;
}
.lang button:hover { color: var(--ink); }
.lang button.is-active { color: var(--bg); background: var(--accent); }

/* A flag only earns its colour on the language you are actually reading — the
   other two stay grey so the topbar has exactly one thing to look at. */
.lang-flag {
  width: 17px;
  height: 12px;
  flex: none;
  border-radius: 2px;
  outline: 1px solid rgb(255 255 255 / 0.2);
  outline-offset: -1px;
  transition: outline-color 200ms ease;
}
.lang button.is-active .lang-flag { outline-color: rgb(255 255 255 / 0.45); }

/* --- Filters toggle ------------------------------------------------------- */

/* Only exists where the left rail is hidden; on wide screens the filters are
   already on screen and a button to reveal them would be noise. */
.filters-toggle { display: none; }

@media (max-width: 1040px) {
  /* Three rules, sized and bordered exactly like the clock and the language
     group beside it so the row reads as one set of controls. */
  .filters-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 34px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    backdrop-filter: blur(14px);
    color: var(--ink-dim);
    transition: color 140ms ease, border-color 140ms ease;
  }
  .filters-toggle svg { width: 16px; height: 16px; }
  .filters-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
  .filters-toggle[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }

  /* A dot, not a pill: the count belongs in the panel, the topbar only needs
     to say that something is on. */
  .filters-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 7px;
    height: 7px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--bg);
    background: var(--accent);
    font-size: 0;
    color: transparent;
  }

  /* The rail becomes a sheet over the globe rather than stealing its space. */
  .rail-left {
    display: flex;
    position: fixed;
    z-index: 30;
    top: 62px;
    left: 14px;
    width: min(320px, calc(100vw - 28px));
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    transform: translateX(calc(-100% - 20px));
    visibility: hidden;
    transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 220ms;
  }
  .rail-left.is-open { transform: none; visibility: visible; }
}

@media (max-width: 1040px) and (prefers-reduced-motion: reduce) {
  .rail-left { transition: none; }
}

/* --------------------------------------------------------------------------
   Cards / rails
   -------------------------------------------------------------------------- */

.rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
/* Scrolls when the cards outgrow the viewport, which they do below about
   1000px tall. The gutter is permanent so the cards never shift sideways when
   the scrollbar appears, and the bottom padding keeps the last card clear of
   the timeline rather than ending flush against it. */
.rail-left {
  grid-area: left;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 4px;
  padding-bottom: 2px;
}
.rail-right { grid-area: right; }

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(18px) saturate(1.3);
  padding: 13px 14px;
  flex: none;
  position: relative;
}
/* Hairline highlight along the top edge — reads as glass, costs nothing. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, rgba(180, 210, 255, 0.22), transparent);
}

.card-title {
  margin: 0 0 11px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Fourteen category chips in a 150px box showed six and gave no sign the rest
   existed. More room, plus a fade at the bottom edge that only appears while
   something is still below the fold. */
/* The one card that gives way. Every other card in the rail is sized by its
   content; this one takes whatever height is left so that Sources -- and the
   credits under it -- stay on screen at 768px as well as 1080px. A fixed cap
   was always wrong at one end or the other. */
/* Takes the height left over when the rail has room to give, and keeps its own
   scroll when it does not. Squeezing the cards to fit a short screen made all
   five cramped instead of letting the one column scroll, which is what a side
   panel is supposed to do. */
/* Cut between chip rows, not through one. Measured on the live panel: rows end
   at 65, 96, 127 and 158px from the top of the card. Dropping the credits line
   from Sources freed the room for a fourth row while Sources still lands on
   screen at 1080px. An arbitrary height slices a row in half and the card
   reads as broken rather than scrollable. */
.card-scroll {
  max-height: 158px;
  padding-bottom: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* The padding moves onto the chip container so it scrolls with the content
   instead of reserving a strip at the bottom that a half-row peeks into. */
.card-scroll .chips { padding-bottom: 13px; }

/* --- Next high-impact ----------------------------------------------------- */

.next-body { display: flex; flex-direction: column; gap: 11px; }

.next-when { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

.next-countdown {
  font-family: var(--mono);
  font-size: 27px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  transition: color 400ms ease;
}
.next-countdown.is-imminent { color: var(--impact-3); }
.next-countdown.is-live { color: var(--up); }

.next-date {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  white-space: nowrap;
}

.next-event {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 160ms ease, background 160ms ease;
}
.next-event:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.06); }

.next-flag { font-size: 19px; line-height: 1; flex: none; }
.next-labels { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.next-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.next-country {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- Filters -------------------------------------------------------------- */

.filter-rows { display: flex; flex-direction: column; gap: 2px; }

.filter-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 6px;
  border-radius: var(--radius-sm);
  text-align: left;
  transition: background 140ms ease, opacity 140ms ease;
}
.filter-row:hover { background: rgba(255, 255, 255, 0.035); }

/* A disabled filter reads as disabled through its own controls -- a hollow dot
   and struck-through count -- rather than by fading the row. Dimming hurts the
   people who most need to read it, and at 0.33 the label fell below any usable
   contrast. */
.filter-row.is-off .filter-dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.filter-row.is-off .filter-label { color: var(--ink-faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.filter-row.is-off .filter-count { color: var(--ink-faint); }

.filter-dot { width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.filter-label { font-size: 12.5px; color: var(--ink); }
.filter-count {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  padding: 4px 9px;
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-dim);
  background: transparent;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }

/* Selected has to look selected across a wall of fourteen. A 14% accent wash
   did not survive the glass panel behind it; this reads at a glance. */
.chip.is-on {
  border-color: var(--accent);
  background: rgba(77, 163, 255, 0.22);
  color: var(--ink-strong);
}
.chip.is-on .chip-count { color: var(--accent); }

.chip-count { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); margin-left: 4px; }

/* --- Sources / meta ------------------------------------------------------- */

.source-list { list-style: none; margin: 0 0 9px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.source-list li { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-dim); }
.source-list a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid transparent; }
.source-list a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.source-dot { width: 5px; height: 5px; border-radius: 50%; flex: none; background: var(--up); }
.source-dot.is-down { background: var(--impact-3); }
.source-count { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }

.meta-line { margin: 0; font-size: 10px; color: var(--ink-faint); letter-spacing: 0.03em; }


/* --------------------------------------------------------------------------
   Right panel — event list
   -------------------------------------------------------------------------- */

.rail-right {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(18px) saturate(1.3);
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px 11px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.panel-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-strong);
  letter-spacing: 0.01em;
}
.panel-sub {
  margin: 2px 0 0;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.panel-reset {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  flex: none;
}
.panel-reset:hover { color: var(--ink); border-color: var(--line-strong); }

.panel-body { overflow-y: auto; flex: 1; min-height: 0; }
.panel-body:focus { outline: none; }

.hour-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 7px 14px 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
  background: rgba(10, 14, 23, 0.95);
  backdrop-filter: blur(10px);
}

.event {
  display: grid;
  grid-template-columns: 3px 48px 1fr auto;
  align-items: start;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(125, 155, 195, 0.07);
  transition: background 140ms ease;
}
.event:hover { background: rgba(255, 255, 255, 0.035); }
.event.is-open { background: rgba(77, 163, 255, 0.07); }
/* An event whose time has passed is still information: it keeps full contrast
   and is marked by a quieter bar instead of being faded out. */
.event.is-past .event-bar { opacity: 0.5; }
.event.is-past .event-time { color: var(--ink-faint); }

.event-bar { align-self: stretch; border-radius: 2px; background: currentColor; min-height: 22px; }

.event-time {
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
  padding-top: 1px;
}
.event-time.is-allday { font-size: 9.5px; letter-spacing: 0.06em; }

.event-main { min-width: 0; }
.event-title {
  font-size: 12.5px;
  color: var(--ink-strong);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.event-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}
.event-flag { font-size: 13px; line-height: 1; }
.event-verified { color: var(--up); font-size: 9px; letter-spacing: 0.06em; }

.event-metric {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink-dim);
  white-space: nowrap;
  padding-top: 1px;
}
.event-metric .is-up { color: var(--up); }
.event-metric .is-down { color: var(--down); }

/* --- Expanded detail ------------------------------------------------------ */

.event-detail {
  padding: 2px 14px 14px 75px;
  border-bottom: 1px solid rgba(125, 155, 195, 0.07);
  background: rgba(77, 163, 255, 0.04);
}

.readings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 10px;
}
.reading { padding: 8px 9px; background: var(--panel-solid); }
.reading-label {
  display: block;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 3px;
}
.reading-value {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
}
.reading.is-actual .reading-value { font-size: 15px; }
.reading-value.is-up { color: var(--up); }
.reading-value.is-down { color: var(--down); }
.reading-value.is-empty { color: var(--ink-faint); }

.surprise {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--ink-dim);
  margin-bottom: 9px;
}
.surprise-pill {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.detail-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 10.5px; color: var(--ink-faint); }
.detail-meta a { color: var(--accent); text-decoration: none; }
.detail-meta a:hover { text-decoration: underline; }

.panel-empty {
  padding: 34px 20px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */

.timeline {
  grid-area: time;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(18px) saturate(1.3);
}

.tl-step {
  width: 30px;
  flex: none;
  font-size: 17px;
  color: var(--ink-faint);
  border-radius: var(--radius-sm);
  transition: color 140ms ease, background 140ms ease;
}
.tl-step:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }

.tl-today {
  flex: none;
  padding: 0 13px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: all 140ms ease;
}
.tl-today:hover { color: var(--ink-strong); border-color: var(--accent); }

.tl-track {
  display: flex;
  gap: 3px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tl-track::-webkit-scrollbar { display: none; }

.tl-day {
  flex: 1 1 0;
  min-width: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px 5px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background 140ms ease, border-color 140ms ease;
}
.tl-day:hover { background: rgba(255, 255, 255, 0.045); }
.tl-day.is-selected { border-color: var(--accent); background: var(--accent-soft); }
/* Past days stay fully legible. "Already happened" is carried by the today
   marker and the selection border, not by making the label hard to read. */
.tl-day.is-past .tl-num { color: var(--ink-dim); }

.tl-dow {
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tl-num {
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1;
}
.tl-day.is-today .tl-num { color: var(--accent); font-weight: 700; }
.tl-day.is-weekend .tl-dow { color: rgba(125, 155, 195, 0.35); }

/* Stacked micro-bar: the day's event load, by impact. */
.tl-bar { display: flex; flex-direction: column-reverse; width: 100%; height: 21px; gap: 1px; justify-content: flex-start; }
.tl-seg { width: 100%; border-radius: 1px; min-height: 2px; }

.tl-month {
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  height: 10px;
}

/* --------------------------------------------------------------------------
   Tooltip + hint
   -------------------------------------------------------------------------- */

.tooltip {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(6, 9, 16, 0.93);
  backdrop-filter: blur(10px);
  box-shadow: none;
  transform: translate(-50%, calc(-100% - 14px));
  max-width: 260px;
}
.tooltip-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-strong);
}
.tooltip-rows { margin-top: 5px; display: flex; flex-direction: column; gap: 2px; }
.tooltip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--ink-dim);
}
.tooltip-row i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.tooltip-more { margin-top: 4px; font-size: 9.5px; color: var(--ink-faint); letter-spacing: 0.05em; }

.hint {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 9;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  pointer-events: none;
  transition: opacity 600ms ease;
}
.hint.is-hidden { opacity: 0; }

/* --------------------------------------------------------------------------
   Scrollbars
   -------------------------------------------------------------------------- */

/* The rails scroll, and at 24% the thumb was invisible enough that the panel
   looked clipped rather than scrollable. Visible enough to find, quiet enough
   to ignore. */
.rail-left, .panel-body, .card-scroll { scrollbar-width: thin; scrollbar-color: rgba(125, 155, 195, 0.5) transparent; }
.rail-left::-webkit-scrollbar,
.panel-body::-webkit-scrollbar,
.card-scroll::-webkit-scrollbar { width: 7px; }
.rail-left::-webkit-scrollbar-thumb,
.panel-body::-webkit-scrollbar-thumb,
.card-scroll::-webkit-scrollbar-thumb { background: rgba(125, 155, 195, 0.45); border-radius: 4px; }
.rail-left::-webkit-scrollbar-track,
.panel-body::-webkit-scrollbar-track,
.card-scroll::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
  :root { --rail-left: 262px; --rail-right: 330px; }
}

@media (max-width: 1040px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "top" "right" "time";
  }
  /* The rail is not removed any more -- it becomes the sheet declared above,
     opened from the topbar button. Hiding it outright took every filter, the
     language switcher's neighbours and the next-event card with it. */
  .rail-right { max-height: 42vh; align-self: end; min-width: 0; }
  .hint { display: none; }

  /* The sheet is out of flow, so nothing should reserve a column for it. */
  .shell { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .brand-tag { display: none; }
  .clock { display: none; }
  .lang button { gap: 5px; padding: 6px 8px; }

  .timeline { gap: 5px; padding: 6px; }
  .tl-today { padding: 0 9px; }
  .tl-day { min-width: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-mark { animation: none; }
  * { transition-duration: 1ms !important; }
}