/* Departure-board system, shared by every surface. Loaded after base.css. */
@font-face { font-family: "Bricolage"; src: url("fonts/bricolage-wdth.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
:root {
  --display: "Bricolage", "Figtree", system-ui, sans-serif;
}
/* Continuous (squircle) corners wherever the browser supports them. */
@supports (corner-shape: squircle) { .primary, .field, .ghost, .dep, .rwbar, .toast-item, .cmdk-box, .pill, .card { corner-shape: squircle; } }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; letter-spacing: -0.02em; }
p, li { text-wrap: pretty; }
.num, output, time, .flap, input[type="time"], td, dd { font-variant-numeric: tabular-nums; }
/* Hit slop: small targets get an invisible 8px halo so near-misses still land. */
.hit, .icon, .remove, .chip, .toast-item button { position: relative; }
.hit::after, .icon::after, .remove::after, .chip::after, .toast-item button::after { content: ""; position: absolute; inset: -8px; }
.card { background: var(--mint); border-radius: 18px; padding: 18px 20px; }
.primary, .field, .ghost { border-radius: 14px; }

/* Top bar: a slim departure-board strip. */
.rwbar { display: flex; align-items: center; gap: 14px; margin: 12px auto 0; width: calc(100% - 24px); max-width: 1040px; padding: 8px 10px 8px 16px; background: var(--board); color: var(--board-fg); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--board-edge), inset 0 1px 0 var(--board-shine); }
.rwbar .brand { display: inline-flex; align-items: center; gap: 8px; font: 800 17px/1 var(--display); font-stretch: 85%; letter-spacing: -0.01em; }
.rwbar .mark { fill: var(--board-2); stroke: var(--go); }
.rwbar .rwclock { margin-left: auto; font: 600 13px/1 var(--display); letter-spacing: 0.08em; color: var(--amber); }
.rwbar nav { display: flex; gap: 2px; }
.rwbar nav a, .rwbar nav button { position: relative; padding: 8px 12px; border-radius: 10px; color: var(--board-dim); font: 600 13px/1 var(--display); text-decoration: none; letter-spacing: 0.02em; transition: background-color .2s, color .2s; }
.rwbar nav a:hover, .rwbar nav button:hover, .rwbar nav [aria-current="page"] { background: var(--board-2); color: var(--board-fg); }
.rwbar nav [aria-current="page"]::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--go); vertical-align: 1px; }
.rwbar kbd { padding: 2px 6px; border: 1px solid var(--board-2); border-radius: 6px; font: 600 11px var(--display); color: var(--board-dim); }
@media (max-width: 600px) { .rwbar .rwclock, .rwbar kbd { display: none; } .rwbar { gap: 6px; } }

/* Board surface: dark panel with split-flap cells. */
.dep { --line: var(--board-seam); background: var(--board); color: var(--board-fg); border-radius: 20px; box-shadow: inset 0 0 0 1px var(--board-edge), inset 0 1px 0 var(--board-shine); }
.dep .flap { background-color: var(--board-2); color: var(--board-fg); box-shadow: 0 1px 0 var(--board-seam); font-family: var(--display); }
.dep .flaps { perspective: 260px; }

/* Skeleton loaders */
.skel { display: block; border-radius: 6px; background: linear-gradient(100deg, var(--mint) 30%, var(--mint-2) 50%, var(--mint) 70%) 0 0 / 220% 100%; animation: shimmer 1.3s linear infinite; }
.dep .skel { background-image: linear-gradient(100deg, var(--board-2) 30%, color-mix(in srgb, var(--board-2) 80%, var(--go)) 50%, var(--board-2) 70%); }
@keyframes shimmer { to { background-position: -120% 0; } }

/* Toasts with undo */
#toasts { position: fixed; z-index: 90; left: 50%; bottom: 18px; display: grid; gap: 8px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px); }
.toast-item { display: flex; align-items: center; gap: 14px; padding: 11px 12px 11px 16px; border-radius: 14px; background: var(--board); color: var(--board-fg); font-size: 14px; box-shadow: inset 0 0 0 1px var(--board-edge), 0 12px 30px -10px rgba(0, 0, 0, .5); animation: rise .35s var(--ease-out); }
.toast-item.out { opacity: 0; transform: translateY(8px); transition: .25s; }
.toast-item button { padding: 6px 10px; border-radius: 9px; color: var(--amber); font-weight: 700; }
.toast-item button:hover { background: var(--board-2); }


/* Theme submenu in the top bar; JS keeps the flyout open while the pointer heads toward it (safe triangle). */
.menu { position: relative; }
.menu .fly { position: absolute; top: 100%; right: 0; display: none; min-width: 130px; margin-top: 6px; padding: 6px; border-radius: 12px; background: var(--board); box-shadow: inset 0 0 0 1px var(--board-edge), 0 14px 36px -12px rgba(0,0,0,.6); z-index: 20; }
.menu.open .fly { display: grid; }
.menu .fly button { text-align: left; }
.menu .fly button[aria-checked="true"] { color: var(--board-fg); background: var(--board-2); }

/* Departure-board rows, reused by welcome, popup and settings previews */
.deprow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--board-rule); }
.deprow .st { font: 700 11px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--board-dim); }
.deprow .st.direct { color: var(--go); }
.deprow .st.chg { color: var(--amber); }

img.mark { border-radius: 6px; width: 24px; height: 24px; }

/* Logo: always the Bricolage wordmark, same as the welcome page. */
.wm { font-family: "Bricolage", "Figtree", system-ui, sans-serif; font-stretch: 88%; font-weight: 800; letter-spacing: -0.03em; }
.wm b, .wm i { font-weight: 800; }