/* Desk design tokens. Apply + replace via html[data-theme]. Light only. */
:root,
[data-theme="classic"] {
  color-scheme: light;
  --fg: #2c2a26;
  --muted: #746f66;
  --dim: #aea89e;
  --star: #e3b341;
  --line: #e6e1d6;
  --bg: #faf9f6;
  --card: #ffffff;
  --accent: #e8e2d6;
  --on-accent: #2c2a26;
  --accent-line: #cfc6b8;
  --soft: #f4f1ea;
  --radius: 999px;
  --radius-box: 12px;
  --danger: #b85c50;
  --danger-line: #e0c4bf;
  --danger-soft: #fdecea;
  --err: #c0392b;
  --ink-soft: #4a433c;
  --skel-mid: #ebe6dc;
  --font: system-ui, -apple-system, sans-serif;
  --font-display: system-ui, -apple-system, sans-serif;
  --theme-color: #faf9f6;
  /* Suite form-control height. FAB stays 36–40px (chat.css). */
  --ctrl-h: 1.75rem;
  --ctrl-h-sm: 1.5rem;
}

/* FT-inspired paper + claret. Soft radii stay cute (동글동글). */
[data-theme="editorial"] {
  color-scheme: light;
  --fg: #1a1412;
  --muted: #5a4a42;
  --dim: #9a8578;
  --star: #d4a017;
  --line: #e8d2c0;
  --bg: #fff1e5;
  --card: #fffaf4;
  --accent: #990f3d;
  --on-accent: #fff8f1;
  --accent-line: #7a0c31;
  --soft: #f6e6d6;
  --radius: 999px;
  --radius-box: 14px;
  --danger: #9a2f2a;
  --danger-line: #e4b8b0;
  --danger-soft: #f8e4df;
  --err: #8f1d28;
  --ink-soft: #3a2e28;
  --skel-mid: #edd9c8;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --theme-color: #fff1e5;
}

html {
  background: var(--bg);
  color-scheme: light;
  font-family: var(--font);
}

/* Serif for masthead / sheet H1 only. Dense list titles stay sans. */
[data-theme="editorial"] h1,
[data-theme="editorial"] .hub-title,
[data-theme="editorial"] .sheet-head h2 {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

[data-theme="editorial"] h1 {
  font-weight: 700;
}

/* UD LAT tokens — 2026-09-16 spec (ud-desk-theme-latimes).
   Draft ship for How. UD refines values in this block; do not fork Classic/Editorial.
   data-theme="latimes" · newsprint white + ink #111 · 2–4px radii · serif display. */
[data-theme="latimes"] {
  color-scheme: light;
  --fg: #111111;
  --ink: #111111;
  --muted: #5c5c5c;
  --dim: #8a8a8a;
  --star: #c4a000; /* UD: not in spec; print gold so ★ stays visible on white */
  --line: #d0d0d0;
  --bg: #ffffff;
  --paper: #ffffff;
  --card: #ffffff;
  --accent: #111111;
  --on-accent: #ffffff;
  --accent-line: #111111;
  --soft: #f4f4f4;
  --radius: 2px;
  --radius-box: 4px;
  --danger: #8b1a1a;
  --danger-line: #d4b4b4;
  --danger-soft: #f7efef;
  --err: #8b1a1a;
  --ink-soft: #3d3d3d;
  --skel-mid: #e8e8e8;
  --link: #111111;
  --font: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Libre Bodoni", "Bodoni MT", Didot, "Times New Roman", serif;
  --font-serif: "Libre Bodoni", "Bodoni MT", Didot, "Times New Roman", serif;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  --theme-color: #ffffff;
}

[data-theme="latimes"] h1,
[data-theme="latimes"] .hub-title,
[data-theme="latimes"] .title,
[data-theme="latimes"] .ref-tile-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

[data-theme="latimes"] h1 {
  font-weight: 700;
}

[data-theme="latimes"] .theme-menu,
[data-theme="latimes"] .lang-menu {
  box-shadow: var(--shadow);
}

[data-theme="latimes"] button[type="submit"],
[data-theme="latimes"] #new-btn {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent-line);
}

[data-theme="latimes"] button[type="submit"]:hover,
[data-theme="latimes"] #new-btn:hover {
  background: var(--fg);
  color: var(--on-accent);
}

.theme-slot,
.lang-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Suite text menu. Active = ink color only — not underline, not chip. */
.navs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.15rem;
  align-items: baseline;
}
.navs .nav-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.05rem;
  align-items: baseline;
}
.navs .nav-pill,
.navs .nav-text,
.login-chrome .nav-pill,
.login-chrome .nav-text {
  display: inline;
  min-height: 0;
  padding: 0.05rem 0;
  font: inherit;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-decoration: none;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.navs .nav-pill:hover,
.navs .nav-text:hover,
.login-chrome .nav-pill:hover,
.login-chrome .nav-text:hover {
  background: transparent;
  color: var(--fg);
  text-decoration: none;
}
.navs .nav-pill[aria-current="page"],
.navs .nav-pill[aria-pressed="true"],
.navs .nav-text[aria-current="page"],
.navs .nav-text[aria-pressed="true"] {
  background: transparent;
  color: var(--fg);
  border: none;
  font-weight: 650;
  text-decoration: none;
}
.navs .nav-quiet {
  padding-left: 0.95rem;
  border-left: 1px solid var(--line);
}
.navs .nav-quiet .nav-pill,
.navs .nav-quiet .nav-text {
  color: var(--muted);
}
.navs .nav-ext {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
}
.navs .nav-ext-mark {
  font-size: 0.72em;
  color: var(--muted);
  pointer-events: none;
}

.chrome-dim {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(26, 20, 18, 0.18);
}
/* Full viewport — beat suite reading-column `body > :not(.sticky-bar)` rules. */
body > .chrome-dim {
  max-width: none !important;
  width: auto;
  margin-inline: 0 !important;
}
.chrome-dim[hidden] { display: none !important; }
.navs .who-slot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.85rem;
  padding-left: 0.95rem;
  border-left: 1px solid var(--line);
}
.navs .who-label {
  color: var(--muted);
  font-size: 0.8rem;
}

/* Roy lock over UD mock: LAT active nav = ink color only — no underline. */
[data-theme="latimes"] .navs .nav-pill:hover,
[data-theme="latimes"] .navs .nav-text:hover,
[data-theme="latimes"] .login-chrome .nav-pill:hover,
[data-theme="latimes"] .login-chrome .nav-text:hover,
[data-theme="latimes"] .navs .nav-pill[aria-current="page"],
[data-theme="latimes"] .navs .nav-pill[aria-pressed="true"],
[data-theme="latimes"] .navs .nav-text[aria-current="page"],
[data-theme="latimes"] .navs .nav-text[aria-pressed="true"] {
  text-decoration: none;
  text-underline-offset: unset;
}

.theme-toggle.nav-pill,
.lang-toggle.nav-pill {
  cursor: pointer;
}

.theme-menu,
.lang-menu {
  position: absolute;
  top: calc(100% + 0.28rem);
  right: 0;
  z-index: 47;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 8.25rem;
  padding: 0.35rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-box);
  box-shadow: 0 10px 24px rgba(26, 20, 18, 0.1);
}

.theme-menu[hidden],
.lang-menu[hidden] { display: none !important; }

.theme-menu button,
.lang-menu button {
  font: inherit;
  font-size: 0.8rem;
  min-height: 1.85rem;
  padding: 0.15rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}

.theme-menu button:hover,
.lang-menu button:hover { background: var(--soft); }

.theme-menu button[aria-pressed="true"],
.lang-menu button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent-line);
  font-weight: 650;
}

/* GFM tables: styled on the wrap md.js emits, so any host works
   (modal, detail panel, Inbox notes, Logs/Office). */
.md-table-wrap {
  margin: 0.55rem 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-box);
  background: var(--card);
}

.md-table-wrap:first-child {
  margin-top: 0;
}

.md-table-wrap:last-child {
  margin-bottom: 0;
}

.md-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.4;
}

.md-table-wrap th,
.md-table-wrap td {
  padding: 0.42rem 0.7rem;
  vertical-align: top;
  text-align: left;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.md-table-wrap th:last-child,
.md-table-wrap td:last-child {
  border-right: none;
}

.md-table-wrap tbody tr:last-child td {
  border-bottom: none;
}

.md-table-wrap th {
  background: var(--soft);
  color: var(--fg);
  font-weight: 650;
}

.md-table-wrap td {
  background: var(--card);
  color: var(--ink-soft);
}

.md-table-wrap tbody tr:nth-child(even) td {
  background: var(--soft);
}

/* Org settings. Admins only — hidden until /api/me says is_org_admin. */
.navs a.org-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  color: var(--fg);
}
.navs a.org-settings[hidden] {
  display: none !important;
}
.navs a.org-settings[aria-current="page"] {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* Phone header (max-width: 48rem only).
   One row: iudot · optically centered page title · ☰.
   Title is absolute-centered on the bar so unequal side chrome
   cannot pull it toward the brand. Sheet hangs under that row.
   Wider than 48rem: these nodes stay display:none; text nav is untouched. */
.phone-page-title,
.phone-menu-btn,
.phone-nav-kicker,
.phone-nav-dim {
  display: none;
}

@media (max-width: 48rem) {
  body .sticky-bar > .title-row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    gap: 0;
    min-height: 44px;
    margin-bottom: 0;
    white-space: nowrap;
    z-index: 2;
  }
  body .sticky-bar > .title-row > h1 {
    flex: 0 0 auto;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    z-index: 2;
  }
  body .sticky-bar > .title-row > .phone-page-title {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    max-width: calc(100% - 7.5rem);
    margin: 0;
    padding: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    color: var(--fg);
  }
  body .sticky-bar > .title-row > .phone-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: auto;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-box);
    background: var(--card);
    color: var(--fg);
    font-family: var(--font);
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
    z-index: 2;
  }
  body .sticky-bar > .title-row > .phone-menu-btn:hover,
  body .sticky-bar > .title-row.phone-nav-open > .phone-menu-btn {
    background: var(--soft);
    color: var(--fg);
  }
  body .sticky-bar > .title-row > .phone-menu-btn:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 2px;
  }
  body .sticky-bar > .phone-nav-dim:not([hidden]) {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 1;
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    /* Opaque paper. A transparent veil let the page underneath
       (Dashboard hub "Record", no ↗) read as the ACCOUNT row. */
    background: var(--bg);
  }
  body .sticky-bar > .title-row .navs {
    display: none;
  }
  body .sticky-bar > .title-row.phone-nav-open .navs {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 3;
    margin: 0;
    padding: 0 0 0.35rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: 0 12px 28px rgba(26, 20, 18, 0.08);
    /* Full viewport under the header. 70dvh / 32rem ended the visible
       sheet on the ACCOUNT kicker, so name / language / theme / log out
       sat in the unscrolled overflow. */
    max-height: calc(100dvh - 3.5rem);
    overflow: auto;
    white-space: normal;
  }
  body .sticky-bar > .title-row .navs .nav-group,
  body .sticky-bar > .title-row .navs .who-slot {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-left: 0;
  }
  body .sticky-bar > .title-row .navs .nav-quiet,
  body .sticky-bar > .title-row .navs .who-slot {
    border-top: 1px solid var(--line);
  }
  body .sticky-bar > .title-row .phone-nav-kicker {
    display: block;
    padding: 0.7rem 1rem 0.15rem;
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.3;
  }
  body .sticky-bar > .title-row .navs .nav-pill,
  body .sticky-bar > .title-row .navs .nav-text {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0.45rem 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--fg);
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
  }
  body .sticky-bar > .title-row .navs .nav-pill:hover,
  body .sticky-bar > .title-row .navs .nav-text:hover {
    background: transparent;
    color: var(--fg);
    text-decoration: none;
  }
  body .sticky-bar > .title-row .navs .nav-pill[aria-current="page"],
  body .sticky-bar > .title-row .navs .nav-pill[aria-pressed="true"],
  body .sticky-bar > .title-row .navs .nav-text[aria-current="page"],
  body .sticky-bar > .title-row .navs .nav-text[aria-pressed="true"] {
    background: var(--soft);
    color: var(--fg);
    border: 0;
    font-weight: 700;
    text-decoration: none;
  }
  body .sticky-bar > .title-row .navs .nav-quiet .nav-pill,
  body .sticky-bar > .title-row .navs .nav-quiet .nav-text {
    color: var(--fg);
  }
  body .sticky-bar > .title-row .navs .nav-ext {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  body .sticky-bar > .title-row .navs .nav-ext-mark {
    font-size: 0.95rem;
    color: var(--muted);
  }
  body .sticky-bar > .title-row .navs .who-label {
    display: block;
    padding: 0.55rem 1rem 0.1rem;
    font-size: 1.02rem;
    color: var(--fg);
  }
  body .sticky-bar > .title-row .navs .who-label:empty {
    display: none;
  }
  body .sticky-bar > .title-row .navs .lang-slot,
  body .sticky-bar > .title-row .navs .theme-slot {
    display: block;
    position: relative;
  }
  body .sticky-bar > .title-row .navs a.org-settings {
    width: auto;
    height: auto;
    min-height: 44px;
    justify-content: flex-start;
    padding: 0.45rem 1rem;
    border: 0;
    border-radius: 0;
    font-size: 1.05rem;
  }
  body .sticky-bar > .title-row .navs a.org-settings[aria-current="page"] {
    background: var(--soft);
    color: var(--fg);
    border-color: transparent;
    font-weight: 700;
  }
}

[data-theme="editorial"] .phone-page-title,
[data-theme="latimes"] .phone-page-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* Dismiss chrome. Visible mark is ×; the accessible name stays Close. */
button.desk-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
}
button.desk-x:hover,
button.desk-x:active {
  background: transparent;
  border-color: transparent;
  color: var(--fg);
}
@media (max-width: 48rem) {
  button.desk-x {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    font-size: 1.5rem;
  }
}