/* ============================================================================
   dsh-ddb - the chrome.
   ----------------------------------------------------------------------------
   Every value here is a token from the design system (design-specs/tokens.css,
   reached by a symlink into x2203). Not one raw colour: the contract test
   fails the build if one appears.

   The frames, in order of definition:
     the top bar    the wordmark, the scope, the user, the gear
     the rail       the section tree, with twisties
     the content    the prose - a SERIF face, which is most of the character
     the tab bar    on a phone, the top scopes, and the way back to the rail

   The host layer (ddb-host.css) owns the surfaces; this file owns the shapes.
   ========================================================================== */

@import url("ddb-host.css");

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--zx-bg);
  color: var(--zx-fg);
  font: var(--zx-fs-body) / var(--zx-lh-body) var(--zx-font-sans);
  -webkit-font-smoothing: antialiased;
}

/* --- the app shell ------------------------------------------------------- */

#app {
  display: grid;
  grid-template-columns: var(--zx-sidebar-w) 1fr;
  grid-template-rows: var(--zx-appbar-h) 1fr;
  min-height: 100vh;
}

/* --- THE TOP BAR --------------------------------------------------------- */

.appbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--zx-s3);
  padding: 0 var(--zx-bar-pad) 0 var(--zx-s4);
  height: var(--zx-appbar-h);
  background: var(--zx-panel);
  border-bottom: 1px solid var(--zx-line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark .wm-word { color: var(--zx-wm-word); }
.wordmark .wm-pipe { color: var(--zx-wm-pipe); font-weight: 900; margin: 0 .35em; }
.wordmark .wm-product { color: var(--zx-wm-product); }
.wordmark .wm-sm { font-size: .72em; }

.mark {
  width: 30px;
  height: 30px;
  flex: none;
  object-fit: contain;
}

.scope {
  color: var(--zx-ink-dim);
  font-size: var(--zx-fs-meta);
  border-left: 1px solid var(--zx-line);
  padding-left: var(--zx-s3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appbar .spacer { flex: 1; }

.who {
  display: inline-flex;
  align-items: center;
  gap: var(--zx-s2);
  height: var(--zx-control-h);
  padding: 0 var(--zx-s3);
  border-radius: var(--zx-r-pill);
  border: 1px solid var(--zx-line);
  background: var(--zx-raised);
  color: var(--zx-ink-dim);
  font-size: var(--zx-fs-sm);
}
.who b { color: var(--zx-fg); font-weight: 600; }

/* the gear, and the three colour modes */
.gear {
  position: relative;
}
.gear-panel {
  position: absolute;
  right: 0;
  top: calc(var(--zx-control-h) + var(--zx-s2));
  min-width: 150px;
  padding: var(--zx-s1);
  background: var(--zx-raised);
  border: 1px solid var(--zx-line);
  border-radius: var(--zx-r-md);
  box-shadow: var(--zx-sh-2);
  z-index: 40;
}
.gear-panel[hidden] { display: none; }
.gear-panel button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--zx-s3);
  padding: var(--zx-s2) var(--zx-s3);
  border: 0;
  border-radius: var(--zx-r-sm);
  background: none;
  color: var(--zx-fg);
  font: inherit;
  font-size: var(--zx-fs-sm);
  cursor: pointer;
  text-align: left;
}
.gear-panel button:hover { background: var(--zx-bg-hover); }
.gear-panel button[aria-checked="true"] { color: var(--zx-accent); font-weight: 600; }
.gear-panel .tick { color: var(--zx-accent); }

/* --- THE RAIL ------------------------------------------------------------ */

.rail {
  grid-row: 2;
  position: sticky;
  top: var(--zx-appbar-h);
  height: calc(100vh - var(--zx-appbar-h));
  overflow: auto;
  padding: var(--zx-s3) 0 var(--zx-s10);
  background: var(--zx-panel);
  border-right: 1px solid var(--zx-line);
}

.rail .filter {
  width: calc(100% - var(--zx-s5));
  margin: 0 var(--zx-s3) var(--zx-s3);
  height: var(--zx-control-h);
  padding: 0 var(--zx-s3);
  border-radius: var(--zx-r-sm);
  border: 1px solid var(--zx-line);
  background: var(--zx-raised);
  color: var(--zx-fg);
  font: inherit;
  font-size: var(--zx-fs-sm);
}
.rail .filter:focus-visible { outline: 2px solid var(--zx-accent); outline-offset: 1px; }

.rail nav { display: grid; }

.node .row {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: var(--zx-row-h);
  padding: 0 var(--zx-row-pad-x);
}
.node .row .link {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: var(--zx-s1) var(--zx-s2);
  border-radius: var(--zx-r-sm);
  color: var(--zx-fg-dim);
  text-decoration: none;
  font-size: var(--zx-fs-sm);
}
.node .row .link:hover { background: var(--zx-bg-hover); color: var(--zx-fg); }
.node .row .link.active { background: var(--zx-accent-soft); color: var(--zx-accent); font-weight: 600; }
.node.group > .row > .link { color: var(--zx-fg); font-weight: 600; }
.node.group > .row > .link.active { color: var(--zx-accent); }

.tw {
  flex: 0 0 var(--zx-slot-arrow);
  width: var(--zx-slot-arrow);
  height: var(--zx-row-h-sm);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--zx-r-xs);
  background: none;
  color: var(--zx-ink-soft);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
}
.tw:hover { background: var(--zx-bg-hover); color: var(--zx-fg); }
.tw:focus-visible { outline: 2px solid var(--zx-accent); outline-offset: 1px; }

.kids {
  margin-left: var(--zx-row-indent);
  border-left: 1px solid var(--zx-line);
  padding-left: var(--zx-s1);
  display: grid;
}
.node.group.collapsed > .kids { display: none; }

.rail .foot {
  margin: var(--zx-s4) var(--zx-s4) 0;
  color: var(--zx-ink-soft);
  font-size: var(--zx-fs-meta);
}

/* --- THE CONTENT --------------------------------------------------------- */

#doc {
  grid-row: 2;
  min-width: 0;
  padding: var(--zx-s8) var(--zx-s8) var(--zx-s10);
}

#doc > * { max-width: var(--zx-prose-max); }

h1, h2, h3, h4 {
  font-family: var(--zx-font-sans);
  line-height: var(--zx-lh-tight);
  color: var(--zx-body-heading);
  margin: 1.4em 0 .45em;
}
h1 { font-size: 26px; letter-spacing: -.01em; }
h2 { font-size: 20px; padding-bottom: var(--zx-s1); border-bottom: 1px solid var(--zx-line); }
h3 { font-size: 16px; }
#doc > h1:first-child { margin-top: 0; }

p, li, td, th { font-family: var(--zx-font-serif); font-size: var(--zx-fs-prose); line-height: var(--zx-lh-prose); }
p { margin: .7em 0; }
ul, ol { margin: .7em 0; padding-left: 1.3em; }
li { margin: .3em 0; }

a { color: var(--zx-body-link); text-decoration: none; border-bottom: 1px solid var(--zx-accent-line); }
a:hover { border-bottom-color: var(--zx-body-link); }

strong { color: var(--zx-body-bold); font-weight: 700; }

code {
  font-family: var(--zx-font-mono);
  font-size: .88em;
  color: var(--zx-body-inline-code);
  background: var(--zx-body-inline-code-soft);
  border-radius: var(--zx-r-xs);
  padding: .1em .35em;
}
pre {
  background: var(--zx-code-bg);
  border: 1px solid var(--zx-line);
  border-radius: var(--zx-r-lg);
  padding: var(--zx-s4);
  overflow: auto;
  max-width: 100%;
}
pre code { background: none; padding: 0; color: var(--zx-body-code-block); font-size: var(--zx-fs-sm); }
pre code[data-lang] { color: var(--zx-body-code-block-lang); }

table { border-collapse: collapse; width: 100%; margin: var(--zx-s4) 0; font-size: var(--zx-fs-sm); }
th, td { border: 1px solid var(--zx-line); padding: var(--zx-s2) var(--zx-s3); text-align: left; vertical-align: top; }
th { background: var(--zx-bg-hover); font-family: var(--zx-font-sans); font-weight: 600; }

blockquote {
  border-left: 3px solid var(--zx-accent);
  margin: var(--zx-s4) 0;
  padding: var(--zx-s1) var(--zx-s4);
  color: var(--zx-ink-dim);
  background: var(--zx-accent-soft);
  border-radius: 0 var(--zx-r-md) var(--zx-r-md) 0;
}
hr { border: 0; border-top: 1px solid var(--zx-line); margin: var(--zx-s6) 0; }

.pagefoot {
  margin-top: var(--zx-s10);
  padding-top: var(--zx-s3);
  border-top: 1px solid var(--zx-line);
  color: var(--zx-ink-soft);
  font-size: var(--zx-fs-meta);
}
.pagefoot a { color: var(--zx-ink-dim); border-bottom-color: var(--zx-line); }

/* --- the tab bar, on a phone --------------------------------------------- */

.tabbar { display: none; }

@media (max-width: 760px) {
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--zx-appbar-h) 1fr var(--zx-tabbar-h);
    /* the frame is the screen: the content scrolls inside it, so the tab
       bar stays at the bottom instead of being pushed off by a long page */
    height: 100vh;
    overflow: hidden;
  }
  #doc { padding: var(--zx-s5) var(--zx-s4) var(--zx-s8); overflow: auto; }
  .scope { display: none; }

  .rail {
    position: fixed;
    top: var(--zx-appbar-h);
    left: 0;
    width: min(84vw, var(--zx-sidebar-w));
    z-index: 30;
    transform: translateX(-102%);
    transition: transform var(--zx-dur-2) var(--zx-ease);
    box-shadow: var(--zx-sh-2);
  }
  body.rail-open .rail { transform: none; }

  .tabbar {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    align-items: stretch;
    height: var(--zx-tabbar-h);
    background: var(--zx-panel);
    border-top: 1px solid var(--zx-line);
  }
  .tabbar button {
    flex: 1;
    border: 0;
    background: none;
    color: var(--zx-ink-dim);
    font: inherit;
    font-size: var(--zx-fs-sm);
    cursor: pointer;
  }
  .tabbar button:active { background: var(--zx-bg-hover); }
}

/* --- the gate's own page, on the same tokens ----------------------------- */

body.gated {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(1200px 600px at 50% -10%, var(--zx-canvas-top) 0%, var(--zx-canvas-bottom) 55%);
  color: var(--zx-card-fg);
  padding: var(--zx-s6);
}
.card {
  width: min(94vw, 420px);
  background: linear-gradient(180deg, var(--zx-card-top), var(--zx-card-bottom));
  border: 1px solid var(--zx-card-line);
  border-radius: 18px;
  padding: var(--zx-s6);
  box-shadow: var(--zx-shadow-portal), var(--zx-inset-top);
  color: var(--zx-card-fg);
}
.brand { display: flex; align-items: center; gap: var(--zx-s3); margin: 0 0 var(--zx-s4); }
.brand img {
  width: 46px; height: 46px; flex: none; object-fit: contain;
  filter: drop-shadow(0 4px 14px var(--zx-glow-accent));
}
.brand h1 { display: flex; align-items: baseline; gap: 1px; font-size: 20px; margin: 0; letter-spacing: .01em; }
.brand h1 .wm-word { color: var(--zx-wm-word); }
.brand h1 .wm-sm { font-size: .72em; }
.brand h1 .wm-pipe { color: var(--zx-wm-pipe); font-weight: 900; margin: 0 .35em; }
.brand h1 .wm-product { color: var(--zx-wm-product); }
/* the same wordmark, under the names the estate's own login page uses */
.brand h1 .wm { color: var(--zx-wm-word); }
.brand h1 .pipe { color: var(--zx-wm-pipe); font-weight: 900; margin: 0 .35em; }
.brand h1 .product { color: var(--zx-wm-product); }
.kicker { margin: 3px 0 0; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--zx-accent-mid); font-weight: 600; }
.sub { color: var(--zx-card-dim); font-size: var(--zx-fs-sm); margin: 0 0 var(--zx-s4); }
label { display: block; font-size: var(--zx-fs-sm); color: var(--zx-card-dim); margin: var(--zx-s3) 0 var(--zx-s1); }
input {
  width: 100%;
  height: var(--zx-control-h);
  padding: 0 var(--zx-s3);
  border-radius: 12px;
  border: 1px solid var(--zx-input-line);
  background: var(--zx-input-bg);
  color: var(--zx-card-fg);
  font: inherit;
  outline: none;
}
input:focus-visible { outline: none; box-shadow: var(--zx-glow-focus); border-color: var(--zx-accent); }
.row { display: flex; gap: var(--zx-s2); }
.row input { flex: 1; }
button {
  font: inherit;
  border-radius: var(--zx-r-sm);
  border: 1px solid var(--zx-line);
  cursor: pointer;
  transition: background var(--zx-dur-1) var(--zx-ease);
}
button:disabled { opacity: .6; cursor: progress; }
.btn {
  width: 100%;
  height: var(--zx-control-h);
  margin-top: var(--zx-s4);
  font-weight: 650;
  color: var(--zx-accent-ink);
  background: linear-gradient(180deg, var(--zx-accent-top), var(--zx-accent-mid) 45%, var(--zx-accent-bottom));
  border: 1px solid var(--zx-accent-line);
  box-shadow: 0 10px 24px var(--zx-glow-accent);
}
.btn:hover { filter: brightness(1.06); }
.pencil { width: var(--zx-control-h); background: transparent; color: var(--zx-accent); }
.pencil:hover { background: var(--zx-accent-soft); }
.hint { font-size: var(--zx-fs-meta); color: var(--zx-card-dim); margin: var(--zx-s4) 0 0; }
.hint code { font-size: .92em; }
.msg { margin-top: var(--zx-s3); font-size: var(--zx-fs-sm); min-height: 20px; }
.ok { color: var(--zx-card-ok); }
.err { color: var(--zx-card-err); }
.spin {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--zx-accent-ink);
  border-top-color: var(--zx-accent);
  border-radius: 50%;
  animation: sp .7s linear infinite;
  margin-right: 6px;
  vertical-align: -1px;
}
@keyframes sp { to { transform: rotate(360deg); } }

/* the gate's page does not need the app shell */
body.gated #app { display: none; }

/* ============================================================================
   the Now board.
   ----------------------------------------------------------------------------
   The landing page is a READ MODEL over four sources, not a document. So it
   reads as a board: a truth strip, then what needs attention, then what
   exists, then the two logs that are deliberately kept apart.

   It sits in the CONTENT area, which follows the theme, so it uses the
   themed tokens -- --zx-fg, --zx-fg-dim, and the --zx-state-* palette the
   host declares for exactly this. The gate page is a DARK CARD in both
   themes and keeps the --zx-card-* palette; the two must not be mixed.

   Every colour here is a token. The contract test fails the build if one of
   these lines names a colour of its own.
   ========================================================================== */

.board { max-width: var(--zx-content-max); }

.board-h1 {
  font: var(--zx-fs-title) / var(--zx-lh-tight) var(--zx-font-serif);
  margin: 0 0 var(--zx-s3);
}

/* the truth strip - freshness, and RED when a source could not be read */
.board-truth {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zx-s2);
  padding: var(--zx-s3) var(--zx-s4);
  margin: 0 0 var(--zx-s5);
  border: 1px solid var(--zx-line);
  border-radius: var(--zx-r-md);
  background: var(--zx-panel);
  color: var(--zx-fg-dim);
  font-size: var(--zx-fs-sm);
}
.board-when { color: var(--zx-fg-dim); }
.board-when b { color: var(--zx-fg); font-weight: 650; }
.board-sep { color: var(--zx-fg-dim); }
.board-red {
  display: block;
  border-color: var(--zx-state-bad);
  color: var(--zx-state-bad);
}
.board-red ul { margin: var(--zx-s2) 0 0; padding-left: var(--zx-s5); }
.board-red code { color: var(--zx-fg); }

/* the sections */
.board-sec { margin: 0 0 var(--zx-s5); }
.board-sec h2 {
  font: var(--zx-fs-md) / var(--zx-lh-tight) var(--zx-font-sans);
  font-weight: 650;
  margin: 0 0 var(--zx-s3);
  padding-bottom: var(--zx-s2);
  border-bottom: 1px solid var(--zx-line);
}
.board-note {
  margin: 0 0 var(--zx-s3);
  color: var(--zx-fg-dim);
  font-size: var(--zx-fs-sm);
}
.board-empty { color: var(--zx-fg-dim); font-size: var(--zx-fs-sm); }
.board-dim { color: var(--zx-fg-dim); }

/* a pill - a count or a state */
.pill {
  display: inline-block;
  padding: 1px var(--zx-s2);
  margin: 0 var(--zx-s1);
  border-radius: var(--zx-r-pill);
  border: 1px solid var(--zx-line);
  background: transparent;
  color: var(--zx-fg);
  font-size: var(--zx-fs-meta);
  white-space: nowrap;
}
.pill-quiet { color: var(--zx-fg-dim); }
.pill-ok { border-color: var(--zx-state-ok); color: var(--zx-state-ok); }
.pill-warn { border-color: var(--zx-state-bad); color: var(--zx-state-bad); }

/* the attention table */
.board-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--zx-fs-sm);
}
.board-table th {
  text-align: left;
  font-weight: 600;
  color: var(--zx-fg-dim);
  padding: var(--zx-s2) var(--zx-s3);
  border-bottom: 1px solid var(--zx-line);
  white-space: nowrap;
}
.board-table td {
  padding: var(--zx-s2) var(--zx-s3);
  border-bottom: 1px solid var(--zx-line);
  vertical-align: top;
}
.board-table .nowrap { white-space: nowrap; }
.board-ref code { font-size: .92em; word-break: break-all; }

/* the lists */
.board-list { margin: 0; padding-left: var(--zx-s5); font-size: var(--zx-fs-sm); }
.board-list li { margin: 0 0 var(--zx-s2); }
.board-list code { font-size: .92em; }
.board-list .board-red, .board-list .board-warn { list-style: none; margin-left: calc(-1 * var(--zx-s5)); }
.board-list .board-warn code { color: var(--zx-state-warn); }

/* the two feeds */
.board-feed { margin: 0; padding: 0; list-style: none; font-size: var(--zx-fs-sm); }
.board-feed li {
  margin: 0;
  padding: var(--zx-s2) 0;
  border-bottom: 1px solid var(--zx-line);
  line-height: var(--zx-lh-body);
}
.board-ev { font-size: .9em; color: var(--zx-fg-dim); }

/* on a phone the table is too wide to read, so it becomes a list */
@media (max-width: 720px) {
  .board-table thead { display: none; }
  .board-table, .board-table tbody, .board-table tr, .board-table td { display: block; width: 100%; }
  .board-table tr { padding: var(--zx-s3) 0; border-bottom: 1px solid var(--zx-line); }
  .board-table td { border: 0; padding: 2px 0; }
  .board-table td::before {
    content: attr(data-label) " ";
    color: var(--zx-fg-dim);
    font-size: var(--zx-fs-meta);
  }
}

/* ============================================================================
   the search results, under the rail's search box.
   The box filters the nav by title (instant, local) AND asks the server for
   the pages' own text (the same engine the agent API uses). One search, two
   audiences.
   ========================================================================== */
.filter-results {
  margin: var(--zx-s2) 0 var(--zx-s3);
  max-height: 40vh;
  overflow-y: auto;
  font-size: var(--zx-fs-sm);
}
.filter-hit {
  display: block;
  padding: var(--zx-s2) var(--zx-s3);
  margin-bottom: var(--zx-s1);
  border-left: 2px solid var(--zx-accent-line);
  border-radius: var(--zx-r-xs);
  text-decoration: none;
  color: var(--zx-fg);
}
.filter-hit:hover { background: var(--zx-bg-hover); }
.filter-hit-t { display: block; font-weight: 600; }
.filter-snip {
  display: block;
  color: var(--zx-fg-dim);
  font-size: var(--zx-fs-meta);
  line-height: var(--zx-lh-body);
}
.filter-none { color: var(--zx-fg-dim); font-size: var(--zx-fs-meta); margin: var(--zx-s2) 0; }