/* =========================================================================
   the Paper-cut polish, shared components only. Loaded by design_head() after nav.css (and layout.css) under a design
   direction AND on Classic glow (the live look, html[data-djjs-nav]): the unified navigation was already shared, this is the half of
   the structure that made the body agree with the bar. One sheet, no per-desk hacks: every selector below names a shared component
   (page header, ledes, cards, tabs and segments, toolbars, data tables, dialogs, the emblem plate) and uses the app's tokens
   (--c-* / site tokens), so Temple Dark (default) and Temple Dawn both read. Page layouts are untouched.
   Sections: 0 tokens · 1 banner · 2 edges · 3 page header · 4 type · 5 cards · 6 tabs and segments · 7 toolbars · 8 tables ·
   9 dialogs · 10 the emblem plate. The 13px text floor is applied at the source (the component sheets use var(--fs-xs)).
   ========================================================================= */

/* ------------------------------------------------------------------------------------------------ 0. tokens -- */
/* zero specificity: a direction's own sheet (and layout.css, which sets the same slots for directions) overrides any of these */
:where(html:is([data-direction], [data-djjs-nav])) {
  --r-s: 8px; --r-m: 12px; --r-l: 20px;
  --elev: 0 1px 2px rgba(0, 0, 0, .14), 0 8px 24px rgba(0, 0, 0, .12);
  --hair: 1px solid rgba(217, 119, 6, .2);
  --t-xs: 13px; --t-s: 16.5px; --t-m: 20px; --t-l: 26px; --t-xl: 36px;
  --row-h: 44px; --ctl-h: 44px;
  --pg-edge: max(var(--gutter, 16px), var(--safe-x, 0px));
  --pg-wrap: var(--wrap, 1280px);
}
@media (hover: hover) and (pointer: fine) { :where(html:is([data-direction], [data-djjs-nav])) { --row-h: 36px; --ctl-h: 36px; } }

/* ------------------------------------------------------------------------------------------------ 1. banner -- */
/* the navigation's festival chip stands in for the festival banner on every surface (the Festivals desk's own demo card keeps it) */
html:is([data-direction], [data-djjs-nav]) .ft-banner:not([data-fd-preview]) { display: none !important; }

/* ------------------------------------------------------------------------------------------------ 2. one content edge -- */
/* brand, content and the avatar share two vertical lines: the bar sits on the same column as the page (--wrap, --gutter) */
html:is([data-direction], [data-djjs-nav]) .dn__bar { width: min(100% - 2 * var(--pg-edge), var(--pg-wrap)); max-width: none; padding: 0; margin-inline: auto; }
html:is([data-direction], [data-djjs-nav]) body.app-body .appbar { padding-inline: max(var(--pg-edge), calc((100% - var(--pg-wrap)) / 2)); }

/* ------------------------------------------------------------------------------------------------ 3. one page header -- */
/* desks, apps and detail pages: no role eyebrow (the role lives in the navigation's account menu), h1 36px, one Mukta lede.
   The eyebrow's Replay tour / What's New buttons stay, as a quiet row. */
html:is([data-direction], [data-djjs-nav]) .desk__head { display: grid; gap: 4px; margin-bottom: 8px; }
html:is([data-direction], [data-djjs-nav]) .desk__head h1,
html:is([data-direction], [data-djjs-nav]) .pd__head h1 { margin: 0; font-size: var(--t-xl); font-weight: 500; line-height: 1.12; }
html:is([data-direction], [data-djjs-nav]) .desk__lead { max-width: 46rem; margin: 0; font-size: var(--t-s); line-height: 1.5; color: var(--c-muted, var(--muted)); }
html:is([data-direction], [data-djjs-nav]) .desk__who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:is([data-direction], [data-djjs-nav]) .desk__eyebrow--who { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 0; }
html:is([data-direction], [data-djjs-nav]) .desk__eyebrow--who:not(:has(button)) { display: none; }
html:is([data-direction], [data-djjs-nav]) .desk__eyebrow::before { display: none; }   /* the festival ornament: the chip carries the season */
html:is([data-direction], [data-djjs-nav]) .pd__head { display: grid; gap: 4px; margin-bottom: 8px; }
html:is([data-direction], [data-djjs-nav]) .pd__eyebrow { margin: 0; font-size: var(--t-xs); letter-spacing: .02em; text-transform: none; }

/* ------------------------------------------------------------------------------------------------ 4. type -- */
/* ledes are body text: Mukta, not the display face (Cormorant is for headings); labels in caps are at most 3 words, so every
   eyebrow, table head and field label is sentence case with a little tracking */
html:is([data-direction], [data-djjs-nav]) :is(.lead, .desk__lead, .g-lead) { font-family: var(--font-body, Mukta, system-ui, sans-serif); font-weight: 400; }
html:is([data-direction], [data-djjs-nav]) .g-lead { font-size: clamp(1.1rem, 1.02rem + .5vw, 1.25rem); line-height: 1.5; }
html:is([data-direction], [data-djjs-nav]) .lead { font-size: var(--t-m); }
html:is([data-direction], [data-djjs-nav]) :is(.desk__eyebrow, .g-eyebrow, .acct-kpi__label, .pd__facts dt, .djjs-ah__k, .djjs-pc-live) { text-transform: none; letter-spacing: .02em; }
html:is([data-direction], [data-djjs-nav]) .g-eyebrow { font-size: var(--t-xs); }

/* ------------------------------------------------------------------------------------------------ 5. cards -- */
/* one radius family, one elevation: a hairline OR a shadow, never the border + three-layer shadow + gold-leaf line + beads stack.
   The shadow stays on floating layers (menus, popovers, dialogs) only. */
html:is([data-direction], [data-djjs-nav]) .desk { --desk-radius: var(--r-l); --desk-radius-sm: var(--r-m); }
html:is([data-direction], [data-djjs-nav]) .desk-card { border: var(--hair); border-radius: var(--r-l); box-shadow: none; }
html:is([data-direction], [data-djjs-nav]) .desk-card::before { content: none; }
html:is([data-direction], [data-djjs-nav]) :is(.desk-notice, .desk-flash, .desk-empty) { border-radius: var(--r-m); }
html:is([data-direction], [data-djjs-nav]) :is(.pd__facts, .shc-panel) { border-radius: var(--r-m); }

/* ------------------------------------------------------------------------------------------------ 6. tabs and segments -- */
/* tabs that change the page body are underline tabs (no radius); filters of five options or fewer are one 999px segmented pill */
html:is([data-direction], [data-djjs-nav]) :is(.desk-hub__tab, .desk-hub--bar .desk-hub__tab, .desk-hub--inline .desk-hub__tab) { border-radius: 0; background: transparent; box-shadow: none; }
html:is([data-direction], [data-djjs-nav]) :is(.desk-hub__tab.is-current, .desk-hub--bar .desk-hub__tab.is-current, .desk-hub--inline .desk-hub__tab.is-current) { background: transparent; box-shadow: inset 0 -2px 0 var(--c-accent, var(--amber, #D97706)); }
html:is([data-direction], [data-djjs-nav]) .acct-tabs { border-bottom: var(--hair); padding-bottom: 0; }
html:is([data-direction], [data-djjs-nav]) .acct-tabs__tab { border-bottom: 0; border-radius: 0; box-shadow: none; }
html:is([data-direction], [data-djjs-nav]) .acct-tabs__tab[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--c-accent, var(--accent, #D97706)); }
html:is([data-direction], [data-djjs-nav]) .pg-seg, html:is([data-direction], [data-djjs-nav]) .ws-seg { border: var(--hair); border-radius: 999px; overflow: hidden; background: var(--c-sunken, transparent); }
html:is([data-direction], [data-djjs-nav]) :is(.pg-seg__a.is-current, .ws-seg button[aria-pressed="true"], .ws-seg button[aria-current="page"]) { background: var(--c-surface, var(--surface, transparent)); color: var(--c-accent, var(--accent)); box-shadow: none; font-weight: 600; }
html:is([data-direction], [data-djjs-nav]) .ws-seg button { border-radius: 999px; }
/* a strip that can overflow shows it: a soft edge on the side that has more (assets/js/directions/unified-nav.js sets data-more) */
html:is([data-direction], [data-djjs-nav]) :is(.acct-tabs, .desk-hub__tabs, .pg-bar__scroll, .ws-strip, .pg-seg--type) { scroll-snap-type: x proximity; }
html:is([data-direction], [data-djjs-nav]) :is(.acct-tabs, .desk-hub__tabs, .pg-bar__scroll, .ws-strip, .pg-seg--type) > * { scroll-snap-align: start; }
html:is([data-direction], [data-djjs-nav]) [data-more~="end"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
html:is([data-direction], [data-djjs-nav]) [data-more~="start"] { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 40px), transparent); }
html:is([data-direction], [data-djjs-nav]) [data-more="start end"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* ------------------------------------------------------------------------------------------------ 7. toolbars -- */
/* one toolbar: wraps instead of clipping its own selects, 8px / 12px gaps, controls 36px on a pointer and 44px on touch, radius --r-s */
html:is([data-direction], [data-djjs-nav]) :is(.pg-strip, .pg-form--toolbar, .pg-strip .pg-form, .acct-bar, .acct-range, .tb) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; overflow: visible; max-width: 100%; }
html:is([data-direction], [data-djjs-nav]) .acct-bar { align-items: flex-end; }
html:is([data-direction], [data-djjs-nav]) :is(.pg-strip, .pg-form--toolbar) > * { flex: none; }
html:is([data-direction], [data-djjs-nav]) :is(.pg-field select, .pg-field input, .acct-bar :is(select, input, .btn), .acct-range :is(select, input, .btn), .tb :is(select, input, .btn)) { min-height: var(--ctl-h); border-radius: var(--r-s); }
html:is([data-direction], [data-djjs-nav]) :is(.acct-bar, .acct-range) :is(select, input) { height: var(--ctl-h); box-sizing: border-box; }
html:is([data-direction], [data-djjs-nav]) .acct-bar__actions { align-items: center; }

/* ------------------------------------------------------------------------------------------------ 8. data tables -- */
/* heads 13px and sentence case, sticky, numeric columns right-aligned in lining tabular Mukta, rows 36px (pointer) / 44px (touch);
   on a phone a stacked row keeps its column names (unified-nav.js copies each column head to its cells as data-label) */
html:is([data-direction], [data-djjs-nav]) :is(.desk-table, .pg-table, .ev-table, .acct-panel table, .mc-table) thead th { font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--c-muted, var(--muted)); }
html:is([data-direction], [data-djjs-nav]) :is(.desk-table, .pg-table, .ev-table, .acct-panel table) tbody :is(th, td) { padding-block: 6px; }
@media (min-width: 640px) { html:is([data-direction], [data-djjs-nav]) :is(.desk-table, .pg-table, .ev-table, .acct-panel table) tbody tr { height: var(--row-h); } }
html:is([data-direction], [data-djjs-nav]) :is(.num, .desk-table__num, .acct-panel .num, .acct-kpi__value) { font-family: var(--font-body, Mukta, system-ui, sans-serif); font-variant-numeric: lining-nums tabular-nums; }
html:is([data-direction], [data-djjs-nav]) :is(.num, .desk-table__num) { text-align: right; }
html:is([data-direction], [data-djjs-nav]) .acct-kpi__value { font-weight: 600; }
html:is([data-direction], [data-djjs-nav]) .desk-table-wrap { overflow: auto; max-height: min(72dvh, 44rem); overscroll-behavior: auto; }
html:is([data-direction], [data-djjs-nav]) .desk-table-wrap > table thead th { position: sticky; top: 0; z-index: 2; background: var(--desk-card, var(--c-surface, var(--surface))); box-shadow: inset 0 -1px 0 var(--desk-line, rgba(217, 119, 6, .2)); }
@media (max-width: 639.98px) {
  html:is([data-direction], [data-djjs-nav]) .desk-table-wrap { max-height: none; }   /* a table that stacks into cards needs no scroller; the others scroll inside their own wrapper */
  html:is([data-direction], [data-djjs-nav]) .desk-table-wrap:has(> :is(.pg-table, .pg-table--up, .ev-table)) { overflow: visible; }
  html:is([data-direction], [data-djjs-nav]) :is(.pg-table, .pg-table--up, .ev-table) td.desk-table__when { white-space: normal; min-width: 0; }
  html:is([data-direction], [data-djjs-nav]) :is(.pg-table, .pg-table--up, .ev-table) td[data-label]:not(.desk-table__when)::before { content: attr(data-label) ": "; color: var(--c-muted, var(--muted)); font-size: var(--t-xs); }
}

/* ------------------------------------------------------------------------------------------------ 9. dialogs -- */
/* one dialog: --r-l, the hairline, the only drop shadow (--elev); a bottom sheet on phones */
html:is([data-direction], [data-djjs-nav]) :is(.modal, .ag-dialog, .dd-dialog, .st-dialog, .pj-modal__box, .ws-modal__box, .dn-find) { border: var(--hair); border-radius: var(--r-l); box-shadow: var(--elev); }
html:is([data-direction], [data-djjs-nav]) :is(.modal, .ag-dialog, .dd-dialog, .st-dialog) { overflow: hidden; }
html:is([data-direction], [data-djjs-nav]) :is(.pj-modal__box, .ws-modal__box) { padding: 24px; }
@media (max-width: 599.98px) {
  html:is([data-direction], [data-djjs-nav]) dialog:is(.modal, .ag-dialog, .dd-dialog, .st-dialog) { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--r-l) var(--r-l) 0 0; }
  html:is([data-direction], [data-djjs-nav]) :is(.pj-modal__box, .ws-modal__box) { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { html:is([data-direction], [data-djjs-nav]) :is(.modal, .ag-dialog, .dd-dialog, .st-dialog)[open] { animation: none; transition: none; } }

/* ------------------------------------------------------------------------------------------------ 10. the emblem plate -- */
/* the authentic crest, whole, on the same soft luminous plate in every bar (guest, portal, desks, apps): a fixed 40px circle */
html:is([data-direction], [data-djjs-nav]) .dn .dn__emblem { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, rgba(245, 158, 11, .22), transparent 70%); line-height: 0; }
html:is([data-direction], [data-djjs-nav]) .dn .dn__emblem::before { content: none; }
html:is([data-direction], [data-djjs-nav]) .dn .dn__emblem img { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; }
/* Full Width Mode (the desks' ⤢ button) widens the page's column, so it widens the bar's too */
html.desk-full:is([data-direction], [data-djjs-nav]) .dn__bar { width: calc(100% - 2 * var(--pg-edge)); }
/* a segmented pill that is wider than its row scrolls inside itself, never the page */
html:is([data-direction], [data-djjs-nav]) .pg-seg--type { max-width: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
html:is([data-direction], [data-djjs-nav]) .pg-seg--type::-webkit-scrollbar { display: none; }
/* the portal bundle's phone tab bar and chips set their labels at 11.5px: the 13px floor */
html:is([data-direction], [data-djjs-nav]) .text-\[11\.5px\] { font-size: var(--t-xs); }