/* ============================================================
   UHANDA Paper — jaettu design-järjestelmä
   ------------------------------------------------------------
   Editorial paper-on-paper. Sivun pohja on tummempi kuin kortit,
   kortit lentää irti kuin liimattu paperi. Ambient time-of-day
   (assets/uhanda-ambient.js) säätelee paletti CSS-muuttujien kautta.
   ------------------------------------------------------------
   Fontit ovat self-hostattuja /assets/fonts/google/ -kansiossa
   (woff2). @font-face -määrittelyt löytyvät assets/fonts.css:stä,
   joka generoidaan skriptillä scripts/download-fonts.js.

   Pakolliset import:t HTML:n head:iin:
     <link rel="preload" as="font" type="font/woff2" crossorigin
           href="/assets/fonts/google/inter-400n-latin.woff2">
     <link rel="preload" as="font" type="font/woff2" crossorigin
           href="/assets/fonts/google/cormorant-garamond-400n-latin.woff2">
     <link rel="stylesheet" href="/assets/fonts.css">
     <link rel="stylesheet" href="/assets/uhanda-paper.css">
     <script src="/assets/uhanda-ambient.js" defer></script>
   ============================================================ */

:root {
  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Ink-asteet (ambient.js ylikirjoittaa) */
  --ink:        #1c1d18;
  --ink-soft:   #38382f;
  --ink-mute:   #6b6b5f;
  --ink-faint:  #9a9a8d;

  --sage:       oklch(58% 0.06 148);
  --sage-deep:  oklch(42% 0.07 150);
  --sage-pale:  oklch(86% 0.04 145);
  --sage-glow:  oklch(58% 0.08 148);

  /* Sivun pohja on tummempi kuin kortti — kortit lentää irti */
  --ambient-page-a:    #d8d2c2;
  --ambient-page-b:    #c7c4b6;
  --ambient-card-a:    #f3eee2;
  --ambient-card-b:    #ebe6d6;
  --ambient-warm:      #e6b884;
  --ambient-cool:      #9eb0ad;
  --ambient-glow:      oklch(58% 0.08 148 / 0.10);
  --ambient-shadow:    20 18 12;
  --ambient-shadow-a:  0.18;
  --ambient-vig-x:     22%;
  --ambient-vig-y:     -2%;
  --ambient-edge:      #2a261a25;
  --ambient-rule:      oklch(58% 0.06 148);
  --ambient-name:      "päivä";
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--ambient-page-a);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 1500ms ease-out, color 1500ms ease-out;
}

/* ── Paperi-pohja ─────────────────────────────────────────── */
.paper-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    /* High cirrus highlight */
    radial-gradient(140% 40% at 50% -25%,
      color-mix(in oklab, white 35%, transparent) 0%,
      transparent 50%),
    /* Warm sun core */
    radial-gradient(45% 38% at var(--ambient-vig-x) var(--ambient-vig-y),
      color-mix(in oklab, var(--ambient-warm) 90%, transparent) 0%,
      color-mix(in oklab, var(--ambient-warm) 30%, transparent) 35%,
      transparent 65%),
    /* Soft sun bloom */
    radial-gradient(90% 65% at var(--ambient-vig-x) var(--ambient-vig-y),
      color-mix(in oklab, var(--ambient-warm) 35%, transparent) 0%,
      transparent 60%),
    /* Cool sky wash (vastapuoli) */
    radial-gradient(110% 90% at calc(100% - var(--ambient-vig-x)) 115%,
      color-mix(in oklab, var(--ambient-cool) 70%, transparent) 0%,
      transparent 60%),
    /* Horisontti-band */
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in oklab, var(--ambient-warm) 12%, transparent) 55%,
      transparent 80%),
    /* Page base sky gradient */
    linear-gradient(170deg, var(--ambient-page-a) 0%, var(--ambient-page-b) 100%);
  transition: background 2s ease-out;
}
.paper-bg .grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 0.65 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: 0.32;
  mix-blend-mode: multiply;
}
.paper-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0,0,0,0.06) 100%);
  pointer-events: none;
}

/* ── Shell ────────────────────────────────────────────────── */
.up-page {
  position: relative; z-index: 1;
  min-height: 100vh;
  padding: 26px 36px 18px;
  display: flex; flex-direction: column;
  gap: 22px;
}

/* ── Top chrome ───────────────────────────────────────────── */
.up-topbar {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft);
}
.up-topbar .crumb { display: flex; align-items: center; gap: 14px; }
.up-topbar .crumb svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.up-topbar .crumb-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--ink-soft);
  transition: color 200ms ease, transform 200ms ease;
}
.up-topbar .crumb-back:hover { color: var(--ink); transform: translateX(-1px); }
.up-topbar .crumb-back:disabled { opacity: 0.35; cursor: default; }

/* ADMIN-pikalinkki crumb:n vieressä (näkyvyys JS:llä admin-rooliin) */
.up-topbar .crumb-admin {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  padding: 4px 8px; margin: -4px 0 -4px -6px;
  border-radius: 3px;
  transition: background 200ms ease, color 200ms ease;
}
.up-topbar .crumb-admin::before {
  content: "·";
  margin-right: 14px;
  color: var(--ink-faint);
}
.up-topbar .crumb-admin:hover {
  color: var(--ink);
  background: color-mix(in oklab, var(--ink) 5%, transparent);
}
.up-topbar .meta { display: flex; align-items: center; gap: 28px; }

.up-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sage) 28%, transparent);
  display: inline-block; margin-right: 8px; vertical-align: middle;
}
.up-menu-btn {
  width: 28px; height: 22px; display: flex; flex-direction: column;
  justify-content: space-between; cursor: pointer; background: none;
  border: none; padding: 0;
}
.up-menu-btn span { display: block; height: 1px; background: var(--ink-soft); width: 100%; }
.up-menu-btn span:nth-child(2) { width: 70%; align-self: flex-end; }

/* Daylight dial — pieni kaari + aurinko, klikattava ambient-mode-valitsin */
.up-dial-wrap { position: relative; display: inline-block; }
.up-dial {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
  background: none; border: none;
  padding: 4px 8px; margin: -4px -8px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease;
}
.up-dial:hover { background: color-mix(in oklab, var(--ink) 5%, transparent); }
.up-dial[aria-expanded="true"] {
  background: color-mix(in oklab, var(--ink) 7%, transparent);
}
.up-dial svg { width: 18px; height: 18px; overflow: visible; }
.up-dial .arc { fill: none; stroke: color-mix(in oklab, var(--ink) 18%, transparent); stroke-width: 1; }
.up-dial .ground { stroke: color-mix(in oklab, var(--ink) 22%, transparent); stroke-width: 1; }
.up-dial .sun { fill: var(--ambient-warm); }
.up-dial .ambient-name { color: var(--ink); }

/* Pudotusvalikko — paper-tyylinen kortti */
.up-dial-menu {
  position: absolute;
  top: calc(100% + 10px); right: 0;
  min-width: 200px;
  z-index: 60;
  padding: 6px;
  border-radius: 5px;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--ambient-card-a) 92%, transparent) 0%,
      color-mix(in oklab, var(--ambient-card-b) 92%, transparent) 100%);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  box-shadow:
    0 0 0 0.5px var(--ambient-edge),
    0 1px 0 0 color-mix(in oklab, white 60%, transparent) inset,
    0 8px 18px -6px rgb(var(--ambient-shadow) / calc(var(--ambient-shadow-a) * 1.2)),
    0 24px 40px -16px rgb(var(--ambient-shadow) / var(--ambient-shadow-a));
  display: none;
}
.up-dial-menu.open { display: block; }
.up-dial-option {
  display: block; width: 100%;
  padding: 9px 14px;
  background: none; border: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  text-align: left;
  border-radius: 3px;
  border-left: 1px solid transparent;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
  line-height: 1.2;
}
.up-dial-option:hover {
  background: color-mix(in oklab, var(--ink) 6%, transparent);
  color: var(--ink);
}
.up-dial-option.active {
  color: var(--ink);
  border-left-color: color-mix(in oklab, var(--ambient-rule) 80%, transparent);
}

/* ── Pää-grid (overridataan per-sivu tarpeen mukaan) ──────── */
.up-main {
  flex: 1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 22px;
  min-height: 0;
}

/* ── Card — paper-on-paper depth ──────────────────────────── */
.up-card {
  position: relative;
  border-radius: 5px;
  padding: 30px 34px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--ambient-card-a) 80%, transparent) 0%,
      color-mix(in oklab, var(--ambient-card-b) 80%, transparent) 100%);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  transition:
    transform 380ms cubic-bezier(.2,.7,.2,1),
    box-shadow 380ms cubic-bezier(.2,.7,.2,1);
  box-shadow:
    /* Hairline edge */
    0 0 0 0.5px var(--ambient-edge),
    /* Inner light from top — paper edge highlight */
    0 1px 0 0 color-mix(in oklab, white 60%, transparent) inset,
    /* Tight contact shadow */
    0 0.5px 1.5px rgb(var(--ambient-shadow) / calc(var(--ambient-shadow-a) * 0.7)),
    /* Soft ambient drop */
    0 14px 32px -12px rgb(var(--ambient-shadow) / var(--ambient-shadow-a)),
    0 30px 60px -28px rgb(var(--ambient-shadow) / calc(var(--ambient-shadow-a) * 0.9));
}

/* Warm sun-sheen kortin yläreunassa */
.up-card::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(
    90% 70% at var(--ambient-vig-x) -10%,
    color-mix(in oklab, var(--ambient-warm) 55%, transparent) 0%,
    transparent 50%
  );
  opacity: 0.55;
  transition: background 2s ease-out;
}
/* Sage inner glow alareunassa */
.up-card::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(
    80% 50% at 60% 110%,
    var(--ambient-glow) 0%,
    transparent 65%
  );
  transition: background 2s ease-out;
}
.up-card > * { position: relative; z-index: 1; opacity: 1 !important; }

/* Domain-kortti: vertikaali sage-rule + index-mark */
.up-card.domain { padding-left: 38px; }
.up-card.domain .rule {
  position: absolute;
  left: 14px; top: 30px; bottom: 30px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in oklab, var(--ambient-rule) 70%, transparent) 18%,
    color-mix(in oklab, var(--ambient-rule) 70%, transparent) 82%,
    transparent 100%);
  z-index: 1;
}
.up-card.domain .index-mark {
  position: absolute;
  left: 4px; top: 30px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: color-mix(in oklab, var(--ambient-rule) 70%, transparent);
  transform: rotate(-90deg) translateX(-100%);
  transform-origin: left top;
  white-space: nowrap;
}

.up-card.clickable { cursor: pointer; }
.up-card.clickable:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 0.5px var(--ambient-edge),
    0 1px 0 0 color-mix(in oklab, white 65%, transparent) inset,
    0 1px 2px rgb(var(--ambient-shadow) / calc(var(--ambient-shadow-a) * 0.7)),
    0 22px 44px -10px rgb(var(--ambient-shadow) / calc(var(--ambient-shadow-a) * 1.4)),
    0 40px 80px -28px rgb(var(--ambient-shadow) / var(--ambient-shadow-a));
}

/* ── Editorial atomit ─────────────────────────────────────── */
.up-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex; align-items: center; gap: 10px;
}
.up-eyebrow .bar {
  display: inline-block; width: 1px; height: 11px;
  background: var(--ambient-rule);
}
.up-eyebrow.right { justify-content: flex-end; }

.up-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 28px;
}

/* Refresh-nappi Info-taulun otsikossa — pakottaa Monday-haun ohi cachen.
   Inline-tyyli: ei taustaa, ei ympyrää, perii eyebrow-tekstin värin.
   Hover tummentaa hieman — ei muuta korostusta. */
.up-info-refresh {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; padding: 0; margin: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.85;
  transition: color 200ms ease, opacity 200ms ease;
}
.up-info-refresh:hover { color: var(--ink); opacity: 1; }
.up-info-refresh:active { opacity: 0.7; }
.up-info-refresh:focus-visible { outline: none; color: var(--ink); }
.up-info-refresh svg { display: block; }
.up-info-refresh.spinning { color: var(--ink); opacity: 1; pointer-events: none; }
.up-info-refresh.spinning svg { animation: up-info-refresh-spin 900ms linear infinite; }
@keyframes up-info-refresh-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.up-display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 84px;
  line-height: 0.9;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
}
.up-display.sm { font-size: 64px; }

.up-deck {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 38ch;
  margin: 18px 0 0;
  font-weight: 400;
}

.up-tag-row {
  display: flex; flex-wrap: wrap; gap: 22px;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
}
/* Klikattavat tagit (joilla on destinaatio) */
.up-tag-row a {
  color: var(--ink-mute);
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transform-origin: left center;
  transition: color 280ms ease, transform 320ms cubic-bezier(.2,.7,.2,1);
}
.up-tag-row a:hover {
  color: var(--ink);
  transform: scale(1.08);
}
.up-tag-row a:active { transform: scale(1.05); }
/* Tulossa-tagit (span ilman linkkiä) — haalea, ei interaktiota */
.up-tag-row span { color: var(--ink-faint); }

.up-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 32px; padding-top: 18px;
  border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft);
}
.up-card-foot .open {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); text-decoration: none;
}
.up-card-foot .open .arrow { transition: transform 280ms cubic-bezier(.2,.7,.2,1); }
.up-card.clickable:hover .up-card-foot .open .arrow { transform: translateX(4px); }

/* ── Right column generic (1, 2 tai 3 korttia) ────────────── */
.up-right-col {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 22px;
  min-height: 0;
}

/* ── Info-card ────────────────────────────────────────────── */
.up-info-card { display: flex; flex-direction: column; min-height: 0; }
.up-info-card .info-head { display: flex; justify-content: space-between; align-items: center; }
.up-info-title-block {
  margin-top: 28px; margin-bottom: 28px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 28px;
}

.up-live-bar {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-mute);
  padding-bottom: 6px;
}
.up-live-bar .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--sage) 50%, transparent);
  animation: up-pulse 2.4s ease-out infinite;
}
@keyframes up-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--sage) 50%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in oklab, var(--sage) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--sage) 0%, transparent); }
}

.up-info-stream {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
  margin-right: -8px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--ink) 20%, transparent) transparent;
}
.up-info-stream::-webkit-scrollbar { width: 6px; }
.up-info-stream::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--ink) 16%, transparent); border-radius: 3px;
}

.up-info-block {
  padding: 20px 0;
  border-top: 1px solid color-mix(in oklab, var(--ink) 9%, transparent);
}
.up-info-block:first-child { border-top: none; padding-top: 0; }

.up-info-block-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.up-info-block-label {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.up-info-block-label::before {
  content: ""; display: inline-block;
  width: 4px; height: 4px; border-radius: 50%;
  background: color-mix(in oklab, var(--ambient-rule) 80%, transparent);
}
.up-info-block-meta {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint);
  flex-shrink: 0;
}

/* Tab-filtteri info-block-headerin keskellä (näkyy jos tab-vaihtoehtoja > 1) */
.up-info-block-tabs {
  display: flex; flex-wrap: wrap;
  gap: 18px;
  flex: 1;
  justify-content: center;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.up-info-tab {
  background: none; border: none; padding: 2px 0;
  cursor: pointer;
  color: var(--ink-faint);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  border-bottom: 1px solid transparent;
  transition: color 220ms ease, border-color 220ms ease;
  line-height: 1.2;
}
.up-info-tab:hover { color: var(--ink-mute); }
.up-info-tab.active {
  color: var(--ink);
  border-bottom-color: color-mix(in oklab, var(--ambient-rule) 75%, transparent);
}

.up-info-empty {
  font-family: var(--serif); font-style: italic;
  font-size: 17px; color: var(--ink-mute);
}

/* ── Shift-row ────────────────────────────────────────────── */
.up-shift {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  border-radius: 3px;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--ambient-card-a) 50%, var(--ambient-page-a)) 0%,
      color-mix(in oklab, var(--ambient-card-b) 50%, var(--ambient-page-b)) 100%);
  box-shadow:
    0 0 0 0.5px var(--ambient-edge) inset,
    0 1px 0 0 color-mix(in oklab, white 30%, transparent) inset;
  margin-bottom: 8px;
  transition: background 1500ms ease-out, transform 280ms ease-out;
}
.up-shift:last-child { margin-bottom: 0; }
.up-shift .name { font-size: 14px; font-weight: 500; color: var(--ink); }
.up-shift .role {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 2px;
}
.up-shift .type {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sage-deep); margin-top: 3px;
  font-weight: 500;
}
.up-shift .time {
  font-family: var(--mono); font-size: 12.5px;
  color: var(--ink-soft); letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.up-shift .state-tag {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint); min-width: 64px; text-align: right;
}

.up-shift.ended .name,
.up-shift.ended .time { text-decoration: line-through; color: var(--ink-faint); }
.up-shift.ended { opacity: 0.78; }

.up-shift.now {
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--sage-pale) 80%, white) 0%,
      color-mix(in oklab, var(--sage-pale) 65%, transparent) 100%);
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--ambient-rule) 35%, transparent) inset,
    -2px 0 0 0 var(--ambient-rule);
}
.up-shift.now .state-tag { color: var(--sage-deep); }
.up-shift.now .name { color: var(--ink); }

/* ── Booking-row (ryhmävaraukset) — yksi rivi: name | meta | date ── */
.up-booking {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 18px;
  padding: 9px 16px;
  border-radius: 3px;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--ambient-card-a) 50%, var(--ambient-page-a)) 0%,
      color-mix(in oklab, var(--ambient-card-b) 50%, var(--ambient-page-b)) 100%);
  box-shadow:
    0 0 0 0.5px var(--ambient-edge) inset,
    0 1px 0 0 color-mix(in oklab, white 30%, transparent) inset;
  margin-bottom: 6px;
}
.up-booking:last-child { margin-bottom: 0; }
.up-booking .booking-name {
  font-family: var(--serif); font-size: 16px; font-weight: 500;
  line-height: 1.2; color: var(--ink); letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 8px;
  min-width: 0;
}
.up-booking .booking-name .text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.up-booking .booking-meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute);
  display: flex; flex-wrap: nowrap; gap: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.up-booking .booking-meta .dot { color: var(--ink-faint); }
.up-booking .booking-meta .nights { color: var(--ink-mute); }
.up-booking .booking-date {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-soft); letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  text-align: right; line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Highlight: ei vielä varmistettu (status=Pohja) */
.up-booking.unconfirmed {
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--ambient-warm) 18%, var(--ambient-card-a)) 0%,
      color-mix(in oklab, var(--ambient-warm) 12%, var(--ambient-card-b)) 100%);
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--ambient-warm) 45%, transparent) inset,
    -2px 0 0 0 color-mix(in oklab, var(--ambient-warm) 80%, var(--ink-soft));
}
.up-booking.unconfirmed .booking-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ambient-warm) 80%, var(--ink));
  background: color-mix(in oklab, var(--ambient-warm) 25%, transparent);
  border-radius: 2px;
}

/* ── Weather ──────────────────────────────────────────────── */
.up-weather {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px; align-items: center;
}
.up-weather .temp {
  font-family: var(--serif);
  font-size: 52px; line-height: 1; font-weight: 500;
  color: var(--ink); letter-spacing: -0.01em;
}
.up-weather .meta { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ink-soft); }
.up-weather .meta .city {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute);
}
.up-weather .glyph { width: 48px; height: 48px; color: var(--sage-deep); }

/* ── KPI ──────────────────────────────────────────────────── */
.up-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.up-kpi { display: flex; flex-direction: column; gap: 4px; }
.up-kpi .num {
  font-family: var(--serif); font-size: 36px; font-weight: 500; line-height: 1;
  color: var(--ink); letter-spacing: -0.01em;
  font-variant-numeric: oldstyle-nums;
}
.up-kpi .lbl {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute);
  margin-top: 4px;
}
.up-kpi .delta {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.05em; color: var(--sage-deep);
}
.up-kpi .delta.down { color: oklch(52% 0.13 28); }

/* ── Notice ───────────────────────────────────────────────── */
.up-notice {
  display: grid; grid-template-columns: 12px 1fr; gap: 14px; align-items: flex-start;
}
.up-notice .pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage); margin-top: 8px;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--sage) 22%, transparent);
}
.up-notice .body { font-family: var(--serif); font-size: 19px; line-height: 1.35; color: var(--ink); }
.up-notice .by {
  margin-top: 8px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute);
}

/* ── Footer ───────────────────────────────────────────────── */
.up-footer {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 6px;
}
.up-footer .pageno {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; letter-spacing: 0; text-transform: none;
  color: var(--ink-soft);
}

/* ── Data-surface (poikkeus ambient-paletille) ────────────── */
/* Käytetään data-näkymissä (uhanda-kpi, kirjanpito, admin, RM-pricing)
   joissa taulukoiden ja numeroiden luettavuus pitää säilyä myös ambient-
   yötilassa. Pakottaa cream-pohjan ja tumman ink-tekstin.

   Käyttö: pakkaa data-näkymän sisältö (taulukot, KPI-paneelit, jne.)
   `<div class="up-data-surface">...</div>`-divin sisään. */
.up-data-surface {
  background: linear-gradient(180deg, #f3eee2 0%, #ebe6d6 100%);
  color: #1c1d18;
  border-radius: 5px;
  padding: 24px 28px;
  box-shadow:
    0 0 0 0.5px rgba(40, 36, 26, 0.15),
    0 1px 0 0 rgba(255, 255, 255, 0.6) inset,
    0 14px 32px -12px rgba(20, 18, 12, 0.18),
    0 30px 60px -28px rgba(20, 18, 12, 0.16);
}
.up-data-surface,
.up-data-surface h1,
.up-data-surface h2,
.up-data-surface h3,
.up-data-surface h4,
.up-data-surface h5,
.up-data-surface h6,
.up-data-surface p,
.up-data-surface span,
.up-data-surface td,
.up-data-surface th,
.up-data-surface label,
.up-data-surface li,
.up-data-surface div {
  color: inherit;
}
.up-data-surface a { color: #2a4a78; }   /* sage-syvä info-linkki */
.up-data-surface table {
  background: transparent;
}
.up-data-surface input[type="text"],
.up-data-surface input[type="email"],
.up-data-surface input[type="password"],
.up-data-surface input[type="number"],
.up-data-surface select,
.up-data-surface textarea {
  background: rgba(255, 255, 255, 0.7);
  color: #1c1d18;
  border-color: rgba(40, 36, 26, 0.2);
}

/* ── Reveal animation ─────────────────────────────────────── */
.up-reveal { opacity: 0; transform: translateY(8px); animation: up-reveal 700ms cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes up-reveal { to { opacity: 1; transform: translateY(0); } }
.up-d1 { animation-delay: 80ms; }
.up-d2 { animation-delay: 220ms; }
.up-d3 { animation-delay: 380ms; }
.up-d4 { animation-delay: 520ms; }
.up-d5 { animation-delay: 640ms; }

/* ── Skeleton (info-blockien lataus-tila) ─────────────────── */
.up-skel-line {
  height: 12px; border-radius: 3px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--ink) 8%, transparent) 0%,
    color-mix(in oklab, var(--ink) 14%, transparent) 50%,
    color-mix(in oklab, var(--ink) 8%, transparent) 100%);
  background-size: 200% 100%;
  animation: up-skel 1.4s ease-in-out infinite;
  margin-bottom: 8px;
}
.up-skel-line.short { width: 40%; }
@keyframes up-skel {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ── Hampurivalikko (overlay) ─────────────────────────────── */
.up-menu-overlay {
  position: fixed; inset: 0;
  background: color-mix(in oklab, var(--ambient-page-a) 88%, transparent);
  backdrop-filter: blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
  z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  padding: 60px 36px;
}
.up-menu-overlay.open { display: flex; }
.up-menu-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  text-align: center;
}
.up-menu-list a {
  display: block;
  padding: 12px 20px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-decoration: none;
  font-style: normal;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1), color 200ms ease;
}
/* Editorial hover: italic + translateX, EI väriä — sage-vihreä on rikkova
   isossa serif-otsikossa. Tämä tyyli on lukko myös HQ:lle ja kaikille
   tuleville sivuille (CLAUDE.md). */
.up-menu-list a:hover {
  font-style: italic;
  transform: translateX(6px);
  color: var(--ink);
}
.up-menu-list a.menu-small {
  font-family: var(--sans);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  padding: 8px 20px;
  font-style: normal;
}
.up-menu-list a.menu-small:hover {
  color: var(--ink);
  font-style: italic;
  transform: translateX(4px);
}
.up-menu-list a.disabled {
  color: var(--ink-faint);
  pointer-events: none;
  cursor: default;
}
.up-menu-list .submenu {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 22px;
  margin-top: 4px; margin-bottom: 14px;
}
.up-menu-list .submenu a {
  font-family: var(--mono);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft);
  padding: 4px 8px;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 240ms ease;
}
/* Sub-menu: ohut sage-underline + ink-color (mono italic on outo) */
.up-menu-list .submenu a:hover {
  transform: none;
  color: var(--ink);
  font-style: normal;
  border-bottom-color: color-mix(in oklab, var(--ambient-rule) 70%, transparent);
}
.up-menu-list .submenu a.disabled { color: var(--ink-faint); }

/* ── Hampurilaisvalikon TAUSTA-osio (ambient time-of-day) ──
   5 vaihtoehtoa: Auringon mukaan / Aamu / Päivä / Ilta / Yö.
   Aiemmin topbarissa dial-painikkeena, siirretty menun sisään
   2026-05-02 jotta saatavilla joka sivulla yhtenäisesti. */
.up-menu-list .menu-divider {
  height: 1px;
  width: 60%;
  background: color-mix(in oklab, var(--ink) 12%, transparent);
  margin: 18px auto;
  list-style: none;
}
.up-menu-list .menu-ambient-section {
  list-style: none;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 6px 0 14px;
  padding: 0 20px;
}
.menu-ambient-label {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex; align-items: center; gap: 8px;
}
.menu-ambient-label::before {
  content: ""; width: 18px; height: 1px;
  background: var(--ambient-rule);
}
.menu-ambient-options {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
}
.menu-ambient-option {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--ink) 16%, transparent);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.menu-ambient-option:hover {
  color: var(--ink);
  border-color: color-mix(in oklab, var(--ambient-rule) 50%, transparent);
}
.menu-ambient-option.active {
  color: var(--ink);
  background: color-mix(in oklab, var(--ambient-rule) 14%, transparent);
  border-color: color-mix(in oklab, var(--ambient-rule) 45%, transparent);
}

.up-menu-close {
  position: fixed; top: 26px; right: 36px;
  width: 32px; height: 32px;
  display: none; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--ink); z-index: 101;
}
.up-menu-overlay.open ~ .up-menu-close { display: flex; }

/* ── No-access fallback ───────────────────────────────────── */
.up-no-access {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  padding: 36px;
  z-index: 50;
  background: var(--ambient-page-a);
}
body.no-access-mode .up-no-access { display: flex; }
body.no-access-mode .up-page { display: none; }
.up-no-access-text {
  font-family: var(--serif);
  font-size: 28px; line-height: 1.3;
  color: var(--ink);
  max-width: 440px;
  text-align: center;
}
.up-no-access-user {
  margin-top: 16px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
  text-align: center;
}

/* ── Mobile ───────────────────────────────────────────────── */
/* Tavoite: kaikki 4 korttia (Info-taulu + 3 domain-korttia) mahtuvat
   yhdelle viewport-näytölle ilman scrollia. Domain-kortit tiivistetään
   yksirivisiksi (Otsikko vasen + → oikea), Info-taulu saa loput tilasta. */
@media (max-width: 880px) {
  .up-page { padding: 14px 18px; gap: 12px; }
  .up-main { grid-template-columns: 1fr; gap: 10px; }
  .up-right-col { grid-auto-rows: auto; gap: 8px; }
  .up-display { font-size: 56px; }
  .up-display.sm { font-size: 44px; }
  .up-card { padding: 22px 22px; }
  .up-topbar { font-size: 10px; }
  .up-topbar .meta { gap: 14px; }
  .up-dial .ambient-name { display: none; }
  .up-info-title-block { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 16px; margin-bottom: 16px; }
  .up-kpis { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .up-kpi .num { font-size: 28px; }
  .up-menu-list a { font-size: 28px; }

  /* Info-taulu mobile: max-height jättää tilaa 3 domain-kortille +
     topbar/footer/paddings. Sisältö scrollaa sisäisesti jos tarpeen. */
  .up-info-card {
    max-height: calc(100vh - 380px);
    min-height: 240px;
  }

  /* Domain-kortit mobile: yksirivisiä — Otsikko vasen, → oikea */
  .up-card.domain {
    padding: 16px 22px 16px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .up-card.domain .up-card-head,
  .up-card.domain .up-deck,
  .up-card.domain .up-tag-row,
  .up-card.domain .index-mark {
    display: none;
  }
  .up-card.domain .up-display,
  .up-card.domain .up-display.sm {
    font-size: 26px;
    line-height: 1;
    margin: 0;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .up-card.domain .up-card-foot {
    margin: 0;
    padding: 0;
    border-top: none;
    flex-shrink: 0;
    font-size: 0;                       /* piilottaa pelkät tekstinodet */
  }
  .up-card.domain .up-card-foot .foot-suffix,
  .up-card.domain .up-card-foot .open .open-text {
    display: none;                      /* "AVAA"-tekstit pois mobile:ssa */
  }
  .up-card.domain .up-card-foot .open .arrow {
    font-size: 18px;
    color: var(--ink);
  }
  /* Vertikaali sage-rule kestää lyhyemmän kortin */
  .up-card.domain .rule {
    top: 14px; bottom: 14px;
  }
}

@media (max-width: 540px) {
  .up-display { font-size: 44px; }
  .up-display.sm { font-size: 36px; }
  .up-shift { grid-template-columns: 1fr auto; }
  .up-shift .state-tag { display: none; }
  /* Booking: stack 2-rivi (name + date saman rivin reunoilla, meta alle) */
  .up-booking {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name date"
      "meta meta";
    row-gap: 4px;
  }
  .up-booking .booking-name { grid-area: name; }
  .up-booking .booking-date { grid-area: date; }
  .up-booking .booking-meta { grid-area: meta; }
}