/* Wake / Liquid Signal. App layout over the optional shared-ui foundation. */
html { color-scheme: dark; background: #08090a; }
.shared-ui {
  --bg: #08090a; --panel: #111315; --raised: #1b1e21;
  --text: #f1f4f6; --muted: #aebbc7; --line: #39434b;
  --accent: #38bdf8; --accent-strong: #8ae7ff; --silver: #c4d2e1;
  --signal: #72e1b2; --warning: #f4c66f; --danger: #ff8f87;
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font-family: var(--su-font-body); line-height: 1.6;
}
.shared-ui *, .shared-ui *::before, .shared-ui *::after { box-sizing: border-box; }
.shared-ui a { color: var(--accent-strong); text-underline-offset: .22em; overflow-wrap: anywhere; }
.shared-ui a:hover { color: white; }
.shared-ui :is(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 4px; }
.shared-ui :is(h1,h2,h3,p) { overflow-wrap: anywhere; }
.shared-ui h1 { font-family: var(--su-font-display); font-size: clamp(2rem,4vw,3.7rem); line-height: 1.08; font-weight: 800; letter-spacing: -.035em; text-transform: uppercase; margin: .45rem 0 1rem; }
.shared-ui h1.record-title { text-transform: none; font-size: clamp(1.8rem,3.4vw,3rem); }
.shared-ui h2 { font-family: var(--su-font-display); font-size: 1.25rem; line-height: 1.4; }
.shared-ui h3 { font-family: var(--su-font-display); font-size: 1rem; }
.shared-ui .lead { max-width: 60ch; color: var(--silver); margin: .7rem 0; }
.eyebrow, .shared-ui .section-heading { font-family: var(--su-font-label); text-transform: uppercase; letter-spacing: .08em; }
.eyebrow { color: var(--accent-strong); font-size: .78rem; margin: 0; }
.site-header { max-width: 1220px; margin: auto; padding: 1rem 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; background: var(--accent); color: var(--bg); font-family: var(--su-font-display); font-weight: 900; }
.brand-copy { display: grid; line-height: 1.2; color: var(--text); font-family: var(--su-font-display); font-weight: 800; text-transform: uppercase; }
.brand-copy small { font: .7rem/1.6 var(--su-font-label); color: var(--muted); }
.nav-links { display: flex; flex-wrap: wrap; gap: .3rem; }
.nav-links a { padding: .5rem .65rem; min-height: 2.6rem; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; font: .75rem/1.6 var(--su-font-label); text-transform: uppercase; color: var(--silver); border-bottom: 2px solid transparent; }
.nav-links a.active { color: var(--accent-strong); border-color: var(--accent); background: var(--panel); }
.rss-icon { flex: none; }
.page-main { max-width: 1220px; margin: auto; padding: 2.5rem 2rem 3rem; }
.narrow-main { max-width: 960px; }
.stream-header, .topbar { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1.5rem; padding: 1.5rem 0 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line); }
.stream-header:has(.wake-identity), .topbar:has(.wake-identity) { grid-template-columns: minmax(0,1fr) minmax(220px,42%); }
.stream-header > .actions { grid-column: 1; justify-self: start; }
.topbar > .logout-form { grid-column: 1; grid-row: 2; justify-self: start; }
.wake-identity { grid-column: 2; grid-row: 1 / 3; align-self: stretch; min-height: 240px; position: relative; overflow: hidden; background: var(--raised); border-left: 3px solid var(--accent); pointer-events: none; }
.wake-identity img { display: block; position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 55% center; }
.wake-registration, .wake-asset-id { position: absolute; color: #fff; background: #08090ae8; font: .65rem/1.4 var(--su-font-label); padding: .2rem .4rem; }
.wake-registration { top: .5rem; left: .5rem; font-size: 1rem; }
.wake-asset-id { bottom: .5rem; right: .5rem; }
.hero { max-width: 760px; border-left: 3px solid var(--accent); padding: 2rem; margin: 2rem 0; background: var(--panel); }
.actions, .stream-meta, .filter-state, .tags, .refs { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.shared-ui :is(button,.button) { display: inline-flex; justify-content: center; align-items: center; padding: .7rem 1rem; min-height: 44px; border: 1px solid var(--accent); border-radius: 0; background: var(--accent); color: #08090a; font: 700 .8rem/1.5 var(--su-font-label); text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.shared-ui :is(button,.button):hover { background: var(--accent-strong); color: #08090a; }
.shared-ui :is(button,.button).secondary { background: var(--panel); border-color: var(--line); color: var(--silver); }
.shared-ui button:disabled { background: var(--raised); border-color: var(--line); color: var(--muted); cursor: not-allowed; }
.shared-ui [data-action=hide] { color: var(--danger); background: var(--panel); border-color: var(--danger); }
.shared-ui [data-action=reset], .shared-ui [data-action=up], .shared-ui [data-action=down], .shared-ui #highlight-reset { background: var(--panel); color: var(--silver); border-color: var(--line); }
.shared-ui input, .shared-ui select, .shared-ui textarea { display: block; width: 100%; min-width: 0; min-height: 44px; padding: .6rem; border: 1px solid #65737d; border-radius: 0; background: #08090a; color: var(--text); font: 1rem/1.5 var(--su-font-body); }
.shared-ui input::placeholder { color: var(--muted); opacity: 1; }
.filters { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; padding: 1.25rem; border-radius: 0; background: var(--panel); }
.filters label { min-width: 0; color: var(--silver); font: .75rem/2 var(--su-font-label); text-transform: uppercase; }
.refresh-controls [hidden] { display: none !important; }
.filter-actions { display: flex; flex-wrap: wrap; gap: .6rem; grid-column: 1 / -1; }
.filter-state { margin: 1rem 0 2rem; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.chip, .tag { display: inline-block; padding: .2rem .5rem; border-left: 2px solid var(--line); background: var(--raised); color: var(--silver); font: .75rem/1.5 var(--su-font-label); max-width: 100%; overflow-wrap: anywhere; }
.feed { border-left: 1px solid var(--line); padding-left: 1.7rem; margin: 2rem 0; }
.event { position: relative; margin: 0 0 1rem; padding: 1.3rem 1.5rem; background: var(--panel); min-width: 0; }
.event::before { content: ''; position: absolute; width: .65rem; height: .65rem; top: 1.65rem; left: -2.05rem; border-radius: 50%; background: var(--event-color,var(--accent)); border: 2px solid var(--bg); }
.event-complete { --event-color: var(--signal); }
.event-danger { --event-color: var(--danger); }
.event-alert { --event-color: var(--warning); }
.event header { display: flex; flex-wrap: wrap; gap: .4rem 1rem; color: var(--muted); font: .72rem/1.6 var(--su-font-label); overflow-wrap: anywhere; }
.event .kind { color: var(--event-color,var(--accent-strong)); }
.event h2 { margin: .75rem 0; font-weight: 650; text-transform: none; }
.event .impact { color: var(--silver); }
.event details { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .75rem; }
.event summary { cursor: pointer; color: var(--muted); font: .8rem/1.7 var(--su-font-label); }
.event details p, .meta { overflow-wrap: anywhere; }
.meta, .subtle, .more { color: var(--muted); font-size: .85rem; }
.refs { margin: .7rem 0; }
.code-pill { font: .8rem/1.7 var(--su-font-label); overflow-wrap: anywhere; }
.refs-list { padding-left: 1.3rem; }
.refs-list li { margin-block: .5rem; overflow-wrap: anywhere; }
.redacted { color: var(--warning); }
.panel { border-radius: 0; padding: 1.5rem; background: var(--panel); }
.empty { border-radius: 0; padding: 1.5rem; background: var(--panel); color: var(--silver); }
.privacy-list { display: grid; gap: 1rem; }
.privacy-list h2 { text-transform: uppercase; font-size: 1rem; }
.wake-project-heading { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,42%); gap: 1.5rem; align-items: center; padding: 1.5rem; border-left: 3px solid var(--accent); background: var(--panel); margin-bottom: 2rem; }
.wake-project-heading .wake-identity { grid-row: 1; }
.wake-project-heading > * { position: relative; z-index: 1; }
.wake-project nav { display: flex; flex-wrap: wrap; gap: .75rem; }
.wake-project > .section-heading { margin-top: 2rem; color: var(--silver); font-size: .85rem; }
.wake-highlights { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit,minmax(min(100%,22rem),1fr)); }
.wake-project-card { min-width: 0; padding: 1.25rem; background: var(--panel); overflow-wrap: anywhere; border-top: 2px solid var(--line); }
.wake-project-card > span, .wake-project-card time { display: block; font: .75rem/1.8 var(--su-font-label); color: var(--muted); }
.wake-project-card h2 { font-size: 1.15rem; text-transform: none; }
.wake-project-card ul { padding-left: 1rem; }
.wake-project-form { display: grid; gap: 1rem; }
.wake-project-form > button { justify-self: start; }
.wake-managed-item { min-width: 0; display: flex; flex-direction: column; background: var(--panel); }
.wake-managed-item > .wake-project-card { flex: 1; }
.highlight-controls { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1rem; border-top: 1px solid var(--line); }
.highlight-controls [data-state] { flex-basis: 100%; color: var(--accent-strong); font: .8rem/1.5 var(--su-font-label); }
.highlight-controls button { font-size: .72rem; padding: .5rem .6rem; }
.build-identity { display: flex; justify-content: flex-end; flex-wrap: wrap; align-items: center; gap: .65rem; max-width: 1220px; margin: auto; padding: 1rem 2rem; border-top: 1px solid var(--line); color: var(--muted); font: .7rem/1.6 var(--su-font-label); overflow-wrap: anywhere; }
.build-identity-revision-short { display: none; }
.shared-ui .build-identity-copy { font-size: .65rem; padding: .25rem .6rem; background: var(--panel); color: var(--silver); border-color: var(--line); }
@media (min-width: 1100px) {
  .topbar { isolation: isolate; }
  .topbar::before { content: ''; position: absolute; z-index: -1; inset: 0 0 0 60%; background: url('shared-ui/artwork/wake-texture.webp') center / cover; opacity: .12; pointer-events: none; }
}
@media (max-width: 1024px) { .filters { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 759px) {
  .site-header { padding: 1rem; gap: .8rem; }
  .nav-links { gap: 0; }
  .nav-links a { padding-inline: .5rem; }
  .page-main { padding: 1rem 1rem 2rem; }
  .stream-header, .stream-header:has(.wake-identity), .topbar, .wake-project-heading { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; padding-top: 1rem; }
  .wake-identity { position: relative; order: 2; width: 100%; height: clamp(128px,40vw,180px); min-height: 0; flex: none; border-left-width: 2px; }
  .stream-header > .actions, .topbar > .logout-form { order: 3; }
  .wake-registration { display: none; }
  .hero { padding: 1.2rem; margin: 1rem 0; }
  .event { padding: 1rem; }
  .feed { padding-left: 1.1rem; }
  .event::before { left: -1.45rem; }
  .build-identity { padding: 1rem; justify-content: flex-start; }
  .build-identity-revision-full { display: none; }
  .build-identity-revision-short { display: inline; }
}
@media (max-width: 440px) { .filters { grid-template-columns: minmax(0,1fr); padding: 1rem; } }
@media (forced-colors: active) {
  .wake-identity, .wake-project-heading::after, .topbar::before { display: none; }
  .stream-header:has(.wake-identity), .topbar:has(.wake-identity), .wake-project-heading { display: block; }
  .shared-ui { --text: CanvasText; --muted: CanvasText; --silver: CanvasText; --panel: Canvas; --bg: Canvas; --line: CanvasText; }
  .shared-ui :is(button,.button,input,select), .event, .wake-project-card { border: 1px solid ButtonText; }
  .event::before { background: CanvasText; }
}
@media print {
  html, .shared-ui { color-scheme: light; background: white; color: black; --text: #111; --muted: #333; --silver: #333; --bg: #fff; --panel: #fff; --raised: #eee; --line: #aaa; --accent: #111; --accent-strong: #111; --signal: #111; --warning: #111; --danger: #111; }
  .wake-identity, .wake-project-heading::after, .topbar::before, .nav-links, .filters, .logout-form, .highlight-controls, .shared-ui .build-identity-copy { display: none; }
  .page-main { max-width: none; padding: 0; }
  .stream-header:has(.wake-identity), .topbar:has(.wake-identity), .wake-project-heading { display: block; }
  .event, .wake-project-card, .panel { break-inside: avoid; border-bottom: 1px solid #aaa; }
  .shared-ui a { color: #111; }
  .shared-ui :is(button,.button) { background: #fff; color: #111; border-color: #777; }
}