/* ──────────────────────────────────────────────────────────────────────────────
   pdos shell — the one stylesheet both kinds of page load (redesigned 2026-09-28).

   Loaded by app/layout.tsx for every Next page, and injected into the Morning
   Business page by app/(app)/morning/route.ts. It holds:
     1. the design tokens (--pd-*), the palette of pringdesign.com
     2. the fonts: Wulkan Headline (display) and Gilroy (everything else)
     3. the shell: left menu on desktop, top bar + drawer + pull to refresh below 1024px

   It has no build step and no Tailwind, and must work on a page without Tailwind's
   reset (the Morning page), so every shell rule sets what it needs.
   Licenses: Wulkan Headline is TDF order 004098, which covers subdomains of
   pringdesign.com; Gilroy is a MyFonts web kit. Serve them from pdos only.
   ────────────────────────────────────────────────────────────────────────────── */

:root {
  --pd-bg: #06060b;
  --pd-bg-2: #0a0a11;
  --pd-card: #12121c;
  --pd-card-2: #181826;
  --pd-well: #0d0d15;
  --pd-line: rgba(255, 255, 255, 0.07);
  --pd-line-2: rgba(255, 255, 255, 0.12);
  --pd-line-3: rgba(255, 255, 255, 0.2);

  --pd-text: #f5f5f7;
  --pd-text-2: #a2a2af;
  --pd-text-3: #8a8a97;
  --pd-text-4: #7b7b88;

  /* Three colors, and only three (Nick, 9/28/26 evening: "stick to citron as primary and blue as distant secondary…
     merge the red and orange into one color, and use sparingly only for warnings and errors").
     Citron leads: the accent, good news, what's on you, today. Blue is only somewhere to go: text links and
     "Open …" arrows. Alert is only warnings and errors. Everything else is neutral.
     Measured on --pd-bg: citron 16.1:1; link 8.5:1 (APCA Lc 55); alert 8.3:1 (Lc 55), 6.4:1 on its own wash. */
  --pd-accent: #d5f26d;
  --pd-accent-2: #e1f88b;
  --pd-accent-ink: #1a2017;
  --pd-accent-wash: rgba(213, 242, 109, 0.09);
  --pd-accent-line: rgba(213, 242, 109, 0.32);
  --pd-link: #65abfe;
  --pd-link-2: #92c1fc;
  --pd-alert: #f9875e; /* oklch(0.74 0.15 40): between the old rose (15°) and marigold (68°) */
  --pd-alert-ink: #210d05;
  --pd-alert-wash: rgba(249, 135, 94, 0.12);
  --pd-alert-line: rgba(249, 135, 94, 0.36);
  /* Retired names, kept as aliases so older markup and the morning page keep working: green "good" is citron now,
     rose "bad" is the alert, and marigold "now" (you, now: your name, what's on you, today) is citron. */
  --pd-good: var(--pd-accent);
  --pd-good-wash: var(--pd-accent-wash);
  --pd-bad: var(--pd-alert);
  --pd-bad-wash: var(--pd-alert-wash);
  --pd-now: var(--pd-accent);
  --pd-now-ink: var(--pd-accent-ink);
  --pd-now-wash: var(--pd-accent-wash);
  --pd-now-line: var(--pd-accent-line);

  --pd-glass: rgba(9, 9, 15, 0.74);
  --pd-font: "Gilroy", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --pd-display: "Wulkan Headline", Georgia, "Times New Roman", serif;
  /* Headings under ~24px are Gilroy SemiBold, never Wulkan (Nick, 10/16/26: Wulkan for large headers only).
     --pd-h3 is a block or group heading; --pd-h3-lg is a card's own name (a company, a proposal). */
  --pd-h3: 600 19px/1.3 var(--pd-font);
  --pd-h3-lg: 600 21px/1.25 var(--pd-font);
  --pd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pd-drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);

  /* One content column for every page, the Morning page included (9/28/26 review: they sat 40px apart). */
  --pd-page-w: 1180px;
  /* Longest comfortable line for reading text: Gilroy's 0 is wide, so 52ch is about 71 characters. */
  --pd-measure: 52ch;
  --pd-gut: 48px;
  --pd-bar-h: 56px;
  --pd-nav-w: 248px;
  /* How far below the top of the window page content starts. Sticky things use it. */
  --pd-top: 0px;
  /* Room kept clear for iPadOS window buttons (see html.sh-ipad-app below). */
  --pd-ctl-left: 0px;
  --pd-ctl-clear-y: 0px;
}

/* iPadOS 26 draws its window buttons over the top-left of a Home Screen web app in Split View, Slide Over
   or a window, and no CSS value reports them. lib/shell-boot.ts marks an iPad Home Screen app before first
   paint. Measured 9/28/26 on Nick's 12.9-inch iPad Pro: the buttons span about 19-64px from the window's
   left edge and end about 64px below its top. Keep the menu button right of them, and the menu's first
   row below them. (They don't show in full screen, where pdos is in its desktop layout anyway.) */
html.sh-ipad-app {
  --pd-ctl-left: 68px;
  --pd-ctl-clear-y: 76px;
}

@font-face { font-family: "Gilroy"; src: url("/fonts/gilroy-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Gilroy"; src: url("/fonts/gilroy-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Gilroy"; src: url("/fonts/gilroy-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Gilroy"; src: url("/fonts/gilroy-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Wulkan Headline"; src: url("/fonts/wulkan-headline-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Wulkan Headline"; src: url("/fonts/wulkan-headline-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

html {
  background: var(--pd-bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--pd-bg);
  color: var(--pd-text);
  font-family: var(--pd-font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* No italics anywhere (Nick, 9/28/26): neither family ships one, and this stops the
     browser from faking a slant when some markup asks for it. */
  font-synthesis: none;
}
em, i, cite, dfn, var, address { font-style: normal; }
::selection { background: rgba(213, 242, 109, 0.28); color: var(--pd-text); }

/* ── Shell ─────────────────────────────────────────────────────────────────── */

.sh { min-height: 100dvh; }
.sh-main { min-width: 0; }

.sh-nav {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--pd-bg-2);
  border-right: 1px solid var(--pd-line);
  padding: max(22px, calc(env(safe-area-inset-top, 0px) + 22px), var(--pd-ctl-clear-y)) 14px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  font-family: var(--pd-font);
  z-index: 60;
}
.sh-nav::-webkit-scrollbar { display: none; }

.sh-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 0 22px;
}
.sh-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: -8px 0;
  border-radius: 10px;
  color: var(--pd-text);
  text-decoration: none;
  min-width: 0;
}
.sh-wordmark { display: block; height: 14px; width: auto; flex: none; }
.sh-brand-tag {
  font: 600 10px/1 var(--pd-font);
  letter-spacing: 0.16em;
  color: var(--pd-accent);
  border: 1px solid var(--pd-accent-line);
  border-radius: 999px;
  padding: 4px 7px 3px 8px;
}

.sh-group + .sh-group { margin-top: 22px; }
.sh-group-label {
  margin: 0 0 8px;
  padding: 0 12px;
  font: 600 10.5px/1 var(--pd-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pd-text-4);
  white-space: nowrap;
}
.sh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sh-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--pd-text-2);
  text-decoration: none;
  font: 500 14.5px/1.2 var(--pd-font);
  letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, color 150ms ease;
}
.sh-link svg { flex: none; color: var(--pd-text-3); transition: color 150ms ease; }
.sh-link:hover { color: var(--pd-text); background: rgba(255, 255, 255, 0.04); }
.sh-link:hover svg { color: var(--pd-text-2); }
.sh-link[aria-current="page"] { color: var(--pd-text); background: rgba(255, 255, 255, 0.065); }
.sh-link[aria-current="page"] svg { color: var(--pd-accent); }
.sh-link:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: -2px; }
/* The three pages Nick opens most sit first, a size up, with no label over them. */
.sh-group.is-primary .sh-link { min-height: 44px; font-size: 15.5px; font-weight: 600; }
.sh-group.is-primary .sh-link svg { width: 19px; height: 19px; }

.sh-nav-foot { margin-top: auto; padding-top: 22px; }

.sh-btn {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--pd-text-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, color 150ms ease, transform 120ms ease;
}
.sh-btn:hover { color: var(--pd-text); background: rgba(255, 255, 255, 0.06); }
.sh-btn:active { transform: scale(0.94); }
.sh-btn:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 0; }
.sh-btn[disabled] { cursor: default; }

.sh-refresh {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--pd-line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--pd-text-2);
  font: 600 13.5px/1 var(--pd-font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.sh-refresh:hover { color: var(--pd-text); border-color: var(--pd-line-3); background: rgba(255, 255, 255, 0.03); }
.sh-refresh:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 2px; }
.sh-refresh[disabled] { cursor: default; }
.sh-refresh svg { color: var(--pd-accent); }

.sh-spin { animation: sh-spin 0.85s linear infinite; }
@keyframes sh-spin { to { transform: rotate(360deg); } }

.sh-bar { display: none; }
.sh-scrim { display: none; }
.sh-close { display: none; }

.sh-ptr {
  position: fixed;
  left: 50%;
  top: calc(var(--pd-top) + 10px);
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--pd-card-2);
  border: 1px solid var(--pd-line-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  color: var(--pd-text-2);
  font: 600 13px/1 var(--pd-font);
  white-space: nowrap;
  transform: translate(-50%, -16px);
  opacity: 0;
  pointer-events: none;
}
.sh-ptr svg { color: var(--pd-accent); }

/* Desktop and wide windows: the menu is a column beside the page. */
@media (min-width: 1024px) {
  .sh { display: grid; grid-template-columns: var(--pd-nav-w) minmax(0, 1fr); }
  .sh-nav { position: sticky; top: 0; height: 100dvh; align-self: start; }
}

/* Phones and narrow windows: a top bar that stays put, and the same menu as a drawer. */
@media (max-width: 1023.98px) {
  :root { --pd-top: calc(var(--pd-bar-h) + env(safe-area-inset-top)); }

  .sh-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 2px;
    height: var(--pd-top);
    padding: env(safe-area-inset-top) max(6px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left), var(--pd-ctl-left));
    background: var(--pd-glass);
    -webkit-backdrop-filter: saturate(150%) blur(18px);
    backdrop-filter: saturate(150%) blur(18px);
    border-bottom: 1px solid var(--pd-line);
    font-family: var(--pd-font);
  }
  .sh-bar-title {
    flex: 1;
    min-width: 0;
    padding-left: 2px;
    font: 600 16.5px/1.2 var(--pd-font);
    color: var(--pd-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sh-main { padding-top: var(--pd-top); }

  .sh-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, 86vw);
    padding: max(calc(env(safe-area-inset-top) + 14px), var(--pd-ctl-clear-y)) 14px calc(env(safe-area-inset-bottom) + 18px) max(14px, env(safe-area-inset-left));
    border-right-color: var(--pd-line-2);
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform 340ms var(--pd-drawer-ease), visibility 0s linear 340ms;
  }
  html[data-nav-open] .sh-nav {
    transform: none;
    visibility: visible;
    box-shadow: 30px 0 80px rgba(0, 0, 0, 0.6);
    transition: transform 340ms var(--pd-drawer-ease), visibility 0s;
  }
  .sh-close { display: inline-grid; margin: -8px -6px -8px 0; }
  .sh-nav-head { padding-bottom: 18px; }
  .sh-link { min-height: 44px; font-size: 15.5px; }
  .sh-group.is-primary .sh-link { min-height: 48px; font-size: 16.5px; }
  .sh-group + .sh-group { margin-top: 18px; }

  .sh-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(2, 2, 5, 0.62);
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease;
    touch-action: none;
  }
  html[data-nav-open] .sh-scrim { opacity: 1; pointer-events: auto; }
  html[data-nav-open], html[data-nav-open] body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-nav, html[data-nav-open] .sh-nav, .sh-scrim, .sh-link, .sh-btn, .sh-refresh { transition: none !important; }
  .sh-spin { animation-duration: 2.4s; }
}

/* ── Pages that aren't Next pages (the Morning Business page) ──────────────────
   /morning injects this shell into a finished HTML document. It can't wrap the
   page in .sh, so the menu is fixed on desktop and the body makes room for it. */
@media (min-width: 1024px) {
  html.sh-doc body { padding-left: var(--pd-nav-w); }
  /* align-self: stretch, or the column rule's `start` shrinks this fixed box to its content. */
  html.sh-doc .sh-nav { position: fixed; top: 0; bottom: 0; left: 0; width: var(--pd-nav-w); height: auto; align-self: stretch; }
}
@media (max-width: 1023.98px) {
  html.sh-doc body { padding-top: var(--pd-top); }
}

@media (max-width: 1023.98px) { :root { --pd-gut: 18px; } }
@media (max-width: 520px) { :root { --pd-gut: 16px; } }

/* Skip link: the first Tab stop, visible only while focused (9/28/26 review). */
.sh-skip { position: fixed; top: 10px; left: 10px; z-index: 1000; padding: 10px 16px; border-radius: 999px; background: var(--pd-accent); color: var(--pd-accent-ink); font: 600 14px/1 var(--pd-font); text-decoration: none; transform: translateY(-160%); }
.sh-skip:focus-visible { transform: none; outline: 2px solid var(--pd-text); outline-offset: 2px; }
.sh-main:focus { outline: none; }