:root {
  --dv-navy:        #1a2b6d;
  --dv-accent:      #1a4fd6;
  --dv-bg-cta:      #eef2ff;
  --dv-border-card: #d4dcf0;
  --dv-text-muted:  #6878a8;
  --dv-divider:     #e8ecf4;
  --dv-subtle:      #8896c4;
  --dv-bg-upcoming: #eaf6ee;
  --dv-text-upcoming: #2f6b46;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  color: var(--dv-navy);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

button, input { font-family: inherit; }

/* ── Pairing / loading / reconnecting shell ── */
/* Same navy frame background used elsewhere as the device-bezel colour
   (dashboard.css's .dv-device-frame) — kept here so these calm, no-data
   states read as "still Daily View," not a bare error page. */
.pairing-shell {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1d2545;
  padding: 5vh 5vw;
}
.pairing-card {
  background: #fff;
  border-radius: 28px;
  padding: 56px;
  max-width: 640px;
  width: 100%;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.pairing-logo { height: 40px; margin-bottom: 28px; }
.pairing-card h1 { font-size: 2rem; margin: 0 0 12px; color: var(--dv-navy); }
.pairing-instructions { font-size: 1.15rem; color: var(--dv-text-muted); margin: 0 0 28px; line-height: 1.5; }
#loading-message { font-size: 1.4rem; color: var(--dv-navy); margin: 0; line-height: 1.5; }

.auth-message { min-height: 1.4em; font-size: 1rem; margin-bottom: 16px; }
.auth-message[data-tone="error"] { color: #b3261e; }
.auth-message[data-tone="info"] { color: var(--dv-navy); }

.pairing-code-input {
  width: 100%;
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 18px;
  border: 2px solid var(--dv-border-card);
  border-radius: 14px;
  margin-bottom: 20px;
  color: var(--dv-navy);
}
.pairing-code-input:focus { outline: 3px solid var(--dv-accent); outline-offset: 2px; }

.pairing-submit-btn {
  display: block;
  width: 100%;
  background: var(--dv-accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 16px 32px;
  cursor: pointer;
}
.pairing-submit-btn:disabled { opacity: 0.6; cursor: default; }

/* ── Full-screen viewer ── */
/* Design target 1280×800, usable down to 1024×600 (spec §6.2). No browser
   scrolling anywhere on this page — the whole point is a screen that looks
   the same every time someone glances at it. */
#viewer-view { height: 100vh; position: relative; }
#viewer-mount { height: 100vh; }

.dv-mockup {
  height: 100vh;
  background: #fff;
  color: var(--dv-navy);
  padding: 48px 64px;
  user-select: none;
  overflow: hidden;
}

.dv-mockup--landscape {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas:
    "title      title"
    "top        top"
    "todaylabel next"
    "events     next";
  column-gap: 56px;
  row-gap: 24px;
}

/* The small-scale dashboard preview (dashboard.css) still shows this; at
   full screen the small-card divider is redundant with the layout itself.
   Hidden via CSS only — the DOM from dv-viewer-render.js stays identical
   between the dashboard preview and this real viewer. */
.dv-mockup--landscape .dvm-divider { display: none; }

.dv-mockup--landscape .dvm-today-label {
  grid-area: todaylabel;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--dv-subtle);
  margin: 0;
}

.dv-mockup--landscape .dvm-title {
  grid-area: title;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 0;
  padding-bottom: 4px;
}

.dv-mockup--landscape .dvm-message-banner {
  background: #fff8e6;
  color: #8a6100;
  padding: 18px 24px;
  border-radius: 14px;
  margin: 0;
}
.dvm-message-label { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.08em; color: #8a6100; margin: 0 0 10px; }
.dvm-message-text { font-size: 1.4rem; font-weight: 700; }

.dv-mockup--landscape .dvm-top {
  grid-area: top;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.dvm-day { font-size: 3.2rem; font-weight: 700; letter-spacing: 0.02em; margin: 0; }
.dvm-date { font-size: 1.5rem; font-weight: 600; margin-top: 6px; opacity: 0.8; }
.dvm-time-block { text-align: right; }
.dvm-time { font-size: 3.2rem; font-weight: 700; line-height: 1; }
.dvm-period { font-size: 1.4rem; font-weight: 600; margin-top: 8px; letter-spacing: 0.05em; opacity: 0.8; }
.dvm-tod-icon { display: flex; align-items: center; justify-content: center; }
.dvm-tod-icon img { height: 96px; width: auto; display: block; }

.dv-mockup--landscape .dvm-events {
  grid-area: events;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.dvm-event-empty { font-size: 1.4rem; color: var(--dv-text-muted); }

.dv-mockup--landscape .dvm-event {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--dv-bg-cta);
}
.dv-mockup--landscape .dvm-event:last-child { border-bottom: none; }
/* Colour is never the only signal an event has passed — the icon fades too,
   so this still reads correctly without colour vision. */
.dv-mockup--landscape .dvm-event--past .dvm-event-icon { opacity: 0.45; }
.dv-mockup--landscape .dvm-event--past .dvm-event-name,
.dv-mockup--landscape .dvm-event--past .dvm-event-time { color: var(--dv-text-muted); }
.dv-mockup--landscape .dvm-event-icon {
  width: 48px; height: 48px; border-radius: 50%; background: var(--dv-bg-cta); flex-shrink: 0;
  display: grid; place-items: center; color: var(--dv-navy);
}
.dvm-event-icon svg { width: 55%; height: 55%; display: block; }
.dvm-event-icon--medical { background: #fff0f0; }
.dvm-event-icon--hair    { background: #f3e8ff; }
.dvm-event-icon--meal    { background: #fff4e0; }
.dvm-event-icon--home    { background: #fffae6; }
.dvm-event-icon--people  { background: var(--dv-bg-cta); }
.dv-mockup--landscape .dvm-event-name {
  font-size: 1.7rem;
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.dv-mockup--landscape .dvm-event-time { font-size: 1.5rem; font-weight: 600; }

.dv-mockup--landscape .dvm-next-card {
  grid-area: next;
  background: var(--dv-bg-cta);
  border-radius: 24px;
  padding: 32px;
  align-self: start;
}
.dvm-next-label { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.08em; color: var(--dv-accent); margin: 0 0 10px; }

/* Present only when a message is active (see dv-viewer-render.js) — NEXT and
   the message pane share this flex column so the message pane's height is
   set in proportion to the NEXT card's (3:2) instead of just hugging its
   own text. */
.dv-mockup--landscape .dvm-side-col {
  grid-area: next;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.dv-mockup--landscape .dvm-side-col .dvm-next-card {
  align-self: stretch;
  flex: 3 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.dv-mockup--landscape .dvm-side-col .dvm-message-banner {
  flex: 2 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.dvm-next-item {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 8px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.dvm-next-time { font-size: 1.5rem; font-weight: 600; color: var(--dv-accent); margin: 0; }
.dvm-next-countdown { font-size: 1.2rem; font-weight: 500; color: var(--dv-subtle); margin: 6px 0 0; }

/* Advance reminder for a recurring event (birthday/anniversary) a few days out — a distinct
   soft colour from both NEXT (light blue) and MESSAGE (amber) so "coming up in a few days" is
   never mistaken for "happening today." Present only when dv_get_today_view_model() returns an
   upcomingReminder (see dv-viewer-render.js). Standalone rule (no message/next present) reuses
   the same "next" grid area as .dvm-next-card/.dvm-side-col above; when stacked with either of
   those it instead sizes inside .dvm-side-col like .dvm-message-banner does. */
.dv-mockup--landscape .dvm-upcoming-card {
  grid-area: next;
  background: var(--dv-bg-upcoming);
  border-radius: 24px;
  padding: 24px 32px;
  align-self: start;
}
.dv-mockup--landscape .dvm-side-col .dvm-upcoming-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.dvm-upcoming-label { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.08em; color: var(--dv-text-upcoming); margin: 0 0 8px; }
.dvm-upcoming-item { font-size: 1.5rem; font-weight: 700; color: var(--dv-text-upcoming); margin: 0 0 4px; }
.dvm-upcoming-when { font-size: 1.1rem; font-weight: 500; color: var(--dv-text-upcoming); opacity: 0.85; margin: 0; }

.viewer-offline-pill {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26, 43, 109, 0.9);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 999px;
}

/* Usable down to 1024×600 (spec §6.2) */
@media (max-width: 1100px), (max-height: 650px) {
  .dv-mockup { padding: 32px 36px; }
  .dvm-time { font-size: 2.4rem; }
  .dvm-day { font-size: 2.4rem; }
  .dvm-tod-icon img { height: 64px; }
  .dv-mockup--landscape .dvm-event-name,
  .dvm-next-item { font-size: 1.3rem; }
  .dvm-next-countdown { font-size: 1rem; }
  .dvm-upcoming-item { font-size: 1.2rem; }
}

/* Spec §6.2: optimised for landscape, but usable in portrait too. */
@media (orientation: portrait) {
  .dv-mockup--landscape {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto auto;
    grid-template-areas:
      "title"
      "top"
      "todaylabel"
      "events"
      "next"
      "upcoming"
      "message";
    /* Grid's default align-content:normal resolves to stretch, which
       distributes any leftover vertical space across every auto row
       (widening the gap between the event list and NEXT). Pin rows to
       their natural size and let any leftover space fall below the
       message pane instead. */
    align-content: start;
  }
  /* .dvm-top keeps the base landscape column layout (day/date | icon |
     time, time right-aligned) — day/date on the left, time and the
     day-period label on the right of the icon, rather than wrapping to a
     second row. */

  /* Portrait viewports are typically narrow enough to also match the
     compact-screen query above (max-width: 1100px), which shrinks this
     icon to 64px. Restore the full landscape size here so it's the same
     regardless of orientation. */
  .dvm-tod-icon img { height: 96px; }

  /* In landscape, NEXT and the message pane share .dvm-side-col as a flex
     column so the message inherits its height from NEXT (see
     dv-viewer-render.js). In portrait, events sit between todaylabel and
     NEXT, and the message drops to the very bottom of the screen — so the
     two need independent grid placement. display: contents unwraps the
     flex column and lets its children sit directly in the mockup's own
     grid, positioned via the areas above (.dvm-next-card already carries
     grid-area: next from the base landscape rule above). */
  .dv-mockup--landscape .dvm-side-col { display: contents; }
  .dv-mockup--landscape .dvm-upcoming-card { grid-area: upcoming; }
  .dv-mockup--landscape .dvm-message-banner { grid-area: message; }
}