/*
Delightful OS shared CSS foundation.

This file defines shared visual primitives for:
- thisisdelightful.com
- delights.thisisdelightful.com

Canonical source: Site Design repo.
Mirror changes into Link Saver when edited.

This is not a layout file. Page-specific layout rules stay in each app’s local stylesheet.
*/

/* ============================================================================
   1. DESIGN TOKENS
   ----------------------------------------------------------------------------
   The Delightful OS palette + type roles. Defined on :root so any consumer can
   read them. In the Site Design repo these same values are also routed through
   --brand-* variables (e.g. --xt-yellow: var(--brand-command)); the resolved
   hex values match exactly, so this file states the resolved colours directly.

   Font roles use system fallback stacks only — the custom Delightful @font-face
   files are NOT shared across repos. The Site Design app layers its real
   webfonts on top via its own --font-* tokens; Link Saver uses these stacks as
   the final typeface. Either way the role contract (mono chrome / readable
   prose / editorial serif) is identical.
   ========================================================================== */
:root {
  /* Core palette */
  --xt-bg: #0000aa;            /* DOS blue — ground */
  --xt-bg-deep: #00008a;       /* deeper panel ground / hover */
  --xt-white: #ffffff;
  --xt-gray: #aaaaaa;          /* labels / secondary chrome */
  --xt-dim: #6c6cd0;           /* tertiary / inactive */
  --xt-side-value: #c8c8c8;    /* inspector / metadata values */
  --xt-cyan: #76e5fc;          /* frosted-blue — links / file names */
  --xt-yellow: #ccff33;        /* chartreuse — folders / active / headings */
  --xt-sel-bg: #ccff33;        /* selection / inverse fill */
  --xt-sel-fg: #0000aa;        /* selection / inverse text */
  --xt-rule: #4bc0d9;          /* sky-surge — fine dividers */
  --xt-rule-strong: #6457a6;   /* dusty-grape — outer frame / strong rules */

  /* Type roles (system fallback stacks; see header note above) */
  --xt-font-label: Menlo, Consolas, "Cascadia Mono", "Courier New", monospace;
  --xt-font-content: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --xt-font-reader: "Iowan Old Style", "Charter", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, Cambria, "Times New Roman", Times, serif;
}

/* ============================================================================
   2. TYPOGRAPHY ROLE RECIPES
   ----------------------------------------------------------------------------
   .xtree-label  — severe DOS / file-manager chrome (tree, file names, command
                   keys, column strips, section headers).
   .xtree-chrome — mild interface chrome (zones mixing labels + values).
   .xt-editorial — editorial serif (landing/shelf titles, descriptions, quotes).
   ========================================================================== */
.xtree-label {
  font-family: var(--xt-font-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: geometricPrecision;
}
.xtree-chrome {
  font-family: var(--xt-font-content);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.xt-editorial {
  font-family: var(--xt-font-reader);
  letter-spacing: -0.01em;
}

/* ============================================================================
   3. CHROME TEXT PRIMITIVES — path bar, system status, command bar
   ----------------------------------------------------------------------------
   Colour/typography only; the bars that hold these are laid out by each app.
   ========================================================================== */
.xt-path { color: var(--xt-cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xt-status-key { color: var(--xt-gray); }
.xt-status-word { color: var(--xt-yellow); text-transform: uppercase; }

.xt-cmd-label { color: var(--xt-gray); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.xt-cmd-dir { color: var(--xt-cyan); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xt-cmd-list { color: var(--xt-gray); text-transform: uppercase; display: flex; flex-wrap: wrap; gap: 0.1rem 0.9rem; }
.xt-cmd { white-space: nowrap; }
.xt-cmd-key { color: var(--xt-yellow); font-weight: 700; }
.xt-cmd-file { color: var(--xt-yellow); display: flex; align-items: baseline; gap: 0.75rem; min-width: 0; }
.xt-cmd-action { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xt-cmd-copy { color: var(--xt-dim); margin-left: auto; white-space: nowrap; }

/* ============================================================================
   4. TREE / NAVIGATION PRIMITIVES — the canonical XTree recipe
   ----------------------------------------------------------------------------
   This is the source-of-truth tree recipe, mirrored value-for-value from the
   Site Design FileBrowser row (src/components/FileBrowser/chrome.tsx `Row`):

     - font:    inherited from the enclosing `.xtree-label` tree zone
                (mono --xt-font-label, weight 600, 0.02em tracking) at the body
                14px size — neither app sets a tree-specific font-size.
     - row box: `display:flex; align-items:center; width:100%`,
                padding `0 0.75rem` (px-3, py-0), `line-height:1.25` (tight).
     - colour:  set ON THE ROW — folders chartreuse (.xt-tree-folder), files
                frosted-blue (.xt-tree-file); the label inherits it.
     - branch:  `.xt-tree-prefix` connectors (│ ├─ └─) stay --xt-dim ALWAYS,
                including on the selected row (matches the main site).
     - hover:   background → --xt-bg-deep only; the row colour does NOT shift.
     - focus:   a 1px chartreuse ring (the site's focus idiom), no colour shift.
     - active:  the selected row inverts to --xt-sel-bg / --xt-sel-fg and keeps
                that fill through hover.

   Grid placement of the tree pane (rail width, column, overflow) is layout and
   stays local to each app, as does the anchor `text-decoration` reset (it must
   out-specify each app's own `a { text-decoration: underline }` base).
   Consume these classes — do not re-declare row font-size, line-height,
   padding, hover/focus, or the active treatment in a local stylesheet.
   ========================================================================== */
.xt-tree { display: block; }
.xt-tree-row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0;
  padding: 0 0.75rem;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.xt-tree-row:hover { background: var(--xt-bg-deep); }
.xt-tree-row:focus-visible { outline: 1px solid var(--xt-yellow); outline-offset: -1px; }
.xt-tree-prefix { color: var(--xt-dim); white-space: pre; flex-shrink: 0; }
.xt-tree-folder { color: var(--xt-yellow); }
.xt-tree-file { color: var(--xt-cyan); }
.xt-tree-label { color: inherit; }
/* Active/selected row — inverse fill, held through hover. The branch prefix
   stays --xt-dim (its own rule above), matching the main site. */
.xt-tree-row.is-selected,
.xt-tree-row.is-selected:hover { background: var(--xt-sel-bg); color: var(--xt-sel-fg); }
.xt-tree-row.is-selected .xt-tree-label { color: var(--xt-sel-fg); }

/* ============================================================================
   5. INTRO / PANEL TEXT PRIMITIVES — titles, captions, leads
   ========================================================================== */
.xt-title {
  margin: 0 0 0.35rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--xt-yellow);
  line-height: 1.1;
}
.xt-caption { color: var(--xt-gray); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; margin: 0 0 0.5rem; }
.xt-lead { color: var(--xt-white); font-size: 1.0625rem; line-height: 1.55; max-width: 68ch; margin: 0 0 0.5rem; }
.xt-code { font-family: var(--xt-font-label); color: var(--xt-cyan); }
.xt-empty { color: var(--xt-gray); border: 1px solid var(--xt-rule); padding: 1rem; }

/* ============================================================================
   6. REGISTER / TABLE PRIMITIVES
   ----------------------------------------------------------------------------
   Generic register chrome. Column sizing + per-table layout stay local.
   ========================================================================== */
.xt-register-wrap { border: 1px solid var(--xt-rule); overflow-x: auto; }
/* Flush register: top/bottom rules only — the surrounding pane borders close
   the sides, so the register meets them cleanly with no side buffer. */
.xt-register-flush { border-left: 0; border-right: 0; border-top: 0; }
/* table-layout: fixed keeps the register inside its pane; long content wraps. */
.xt-register { width: 100%; border-collapse: collapse; font-size: 0.85rem; table-layout: fixed; }
.xt-th, .xt-cell { overflow-wrap: anywhere; word-break: break-word; }
.xt-th {
  text-align: left;
  color: var(--xt-gray);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.64rem;
  font-weight: 600;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--xt-rule);
  background: var(--xt-bg-deep);
}
.xt-th-num { text-align: right; white-space: nowrap; }
.xt-record { border-bottom: 1px solid var(--xt-rule); }
.xt-record:last-child { border-bottom: 0; }
.xt-record:hover { background: var(--xt-bg-deep); }
.xt-cell { padding: 0.6rem 0.7rem; vertical-align: top; color: var(--xt-white); }
.xt-cell-num { text-align: right; white-space: nowrap; }
.xt-empty-cell { color: var(--xt-gray); }
.xt-file { color: var(--xt-cyan); text-decoration: none; font-family: var(--xt-font-label); font-weight: 600; letter-spacing: 0.02em; }
.xt-file:hover { color: var(--xt-yellow); text-decoration: underline; }
.xt-num { color: var(--xt-side-value); font-variant-numeric: tabular-nums; }
.xt-register-desc { display: block; max-width: 56ch; }
.xt-quote { margin: 0.4rem 0 0; color: var(--xt-side-value); font-size: 0.98rem; line-height: 1.55; max-width: 70ch; }
.xt-issue-link { color: var(--xt-cyan); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xt-issue-link:hover { color: var(--xt-yellow); text-decoration: underline; }
.xt-issue { color: var(--xt-gray); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ============================================================================
   7. TYPE / TAG PILLS
   ----------------------------------------------------------------------------
   The interactive Type-pill filter link (.xt-grouppill-link) inverts on hover
   and must out-specify each app's `a` base, so it lives in local CSS.
   ========================================================================== */
.xt-pills { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.xt-pill, .xt-grouppill {
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--xt-rule);
  padding: 0.08rem 0.4rem;
  white-space: nowrap;
}
.xt-pill { color: var(--xt-cyan); }
.xt-pill-inactive { color: var(--xt-dim); }
.xt-grouppill { color: var(--xt-yellow); }

/* ============================================================================
   8. MODE LINE + NATIVE SELECT + TERMINAL BUTTONS
   ----------------------------------------------------------------------------
   The VIEW filter strip. .xt-select keeps the native arrow; .xt-mode-go is a
   minimal terminal button. The reset-link (.xt-mode-clear) is an anchor and
   stays local for the same specificity reason as the pills.
   ========================================================================== */
.xt-modeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--xt-rule);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.xt-mode-seg { white-space: nowrap; margin: 0; }
.xt-mode-key { color: var(--xt-gray); }
.xt-select-wrap { display: inline-flex; }
.xt-select {
  font-family: var(--xt-font-label);
  font-size: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--xt-yellow);
  background: var(--xt-bg-deep);
  border: 1px solid var(--xt-rule);
  padding: 0.12rem 0.4rem;
  cursor: pointer;
}
.xt-select:focus-visible { outline: 1px solid var(--xt-yellow); outline-offset: 1px; }
.xt-mode-go {
  font-family: var(--xt-font-label);
  font-size: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--xt-cyan);
  background: transparent;
  border: 1px solid var(--xt-rule);
  padding: 0.12rem 0.55rem;
  cursor: pointer;
}
.xt-mode-go:hover,
.xt-mode-go:focus-visible { background: var(--xt-sel-bg); color: var(--xt-sel-fg); border-color: var(--xt-sel-bg); }

/* Empty-filter state — terminal notice shown when a VIEW filter matches no
   records. The VIEW-ALL reset anchor inside it is styled locally. */
.xt-filter-empty {
  padding: 1.25rem 0.7rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.xt-filter-empty-line { margin: 0; color: var(--xt-gray); letter-spacing: 0.1em; }

/* ============================================================================
   9. METADATA ROWS + INSPECTOR SECTION TEXT
   ----------------------------------------------------------------------------
   Key/value metadata grid + inspector section headings. The panels that host
   them (right inspector column / left rail) are placed by each app.
   ========================================================================== */
.xt-meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 0.75rem; margin: 0; font-size: 0.8rem; }
.xt-meta-row { display: contents; }
.xt-meta-key { color: var(--xt-gray); text-transform: uppercase; letter-spacing: 0.06em; }
.xt-meta-val { margin: 0; color: var(--xt-side-value); word-break: break-word; }
/* Stacked path row — spans the full grid width and breaks so a long path never
   wraps mid-word through the leaf name. */
.xt-meta-row-path { display: block; grid-column: 1 / -1; margin-top: 0.15rem; }
.xt-meta-row-path .xt-meta-key { display: block; margin-bottom: 0.15rem; }
.xt-path-val { display: block; color: var(--xt-cyan); }
.xt-path-val span { display: block; overflow-wrap: anywhere; }

.xt-inspector-title { color: var(--xt-yellow); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 0.75rem; }
.xt-inspector-section { margin-bottom: 0.25rem; }
.xt-inspector-head { color: var(--xt-gray); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem; margin-bottom: 0.5rem; }
.xt-inspector-divider { border-top: 1px solid var(--xt-rule-strong); margin: 1rem 0; }

/* ============================================================================
   10. SIGNAL PANEL TEXT
   ----------------------------------------------------------------------------
   The newsletter callout's heading + copy. Its chip is an anchor and is styled
   locally; the panel's placement is local too.
   ========================================================================== */
.xt-signal-title { color: var(--xt-yellow); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 0.5rem; }
.xt-signal-copy { color: var(--xt-gray); font-size: 0.72rem; line-height: 1.5; margin: 0 0 0.75rem; }