/* =============================================================================
   Ledger — Direction B. A calm operations desk: TOP segmented-rail nav under a
   collapsing large-title header, no bottom bar, editorial density. Everything
   scannable; a "lens" (All / Mine / Open) triages Spread & List. Whole interior
   still adopts the Loop's palette (data-theme on :root).

   PORT TARGETS:
     .lhead/.lrail  → apps/web/src/loop-ports.tsx  (TopChrome bare + NEW top
                      segmented TabBar variant — see PORT MAP)
     .lcover/.lmeta → LoopDetailHeader.module.css (compact banner variant)
     .lens          → NEW small segmented control (Spread/Lists toolbar)
     .grp/.drow     → spread.module.css / lists *.module.css (dense rows)
     .tl (timeline) → wall WallLayout.module.css "Timeline" layout
   ========================================================================== */

.app {
  position: relative;
  z-index: var(--z-content);
  min-block-size: 100dvh;
  padding-block-end: calc(var(--space-9) + env(safe-area-inset-bottom, 0px));
}
.frame {
  inline-size: min(94vw, 40rem);
  margin-inline: auto;
}

/* ---- sticky top header + segmented rail (the nav lives up top) ------------ */
.lhead {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-chrome);
  background: color-mix(in srgb, var(--color-surface-page) 86%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  margin-inline: calc(-1 * var(--space-4));
  padding-inline: var(--space-4);
}
.lbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: calc(var(--space-2) + env(safe-area-inset-top, 0px)) var(--space-2);
}
.lback {
  display: inline-grid;
  place-items: center;
  inline-size: var(--control-md);
  block-size: var(--control-md);
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--color-text-primary);
}
.lback:hover {
  background: var(--color-surface-sunken);
}
.lcrumb {
  flex: 1;
  min-inline-size: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lactions {
  display: inline-flex;
  gap: var(--space-1);
}
.lactions button {
  display: inline-grid;
  place-items: center;
  inline-size: var(--control-md);
  block-size: var(--control-md);
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
}
.lactions button:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text-primary);
}

/* large-title block — collapses on scroll in the real app (comment) */
.ltitleRow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-2) var(--space-4);
}
.lcover {
  inline-size: 5.5rem;
  aspect-ratio: 4 / 3;
  flex: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  background: linear-gradient(
    155deg,
    var(--loop-a, var(--color-sky)),
    var(--loop-b, var(--color-accent-default)) 55%,
    var(--loop-c, var(--color-sage-deep))
  );
}
.ltitleText {
  min-inline-size: 0;
}
.leyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.ltitle {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
}
.lmeta {
  margin-block-start: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* segmented rail — sticky nav */
.lrail {
  display: flex;
  gap: var(--space-1);
  padding-block-end: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.lrail::-webkit-scrollbar {
  display: none;
}
.lrail button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  border-block-end: 2px solid transparent;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
}
.lrail button[aria-current='true'] {
  color: var(--color-accent-deep);
  border-block-end-color: var(--color-accent-deep);
}
.lrailCount {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

/* ---- modes --------------------------------------------------------------- */
.mode {
  padding-block-start: var(--space-4);
}
.mode[hidden] {
  display: none;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* dense section header (sticky within a mode) */
.grpHead {
  position: sticky;
  inset-block-start: 8.4rem;
  z-index: var(--z-content);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  background: color-mix(in srgb, var(--color-surface-page) 90%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.grpDot {
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-radius: var(--radius-pill);
  flex: none;
}
.grpName {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.grpRule {
  flex: 1;
  block-size: 1px;
  background: var(--color-border-default);
}
.grpCount {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

/* the workhorse dense row — Spread items, list items, roster */
.drow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-block-end: 1px solid var(--color-border-default);
}
.drow:last-child {
  border-block-end: none;
}
.drowBody {
  flex: 1;
  min-inline-size: 0;
}
.drowBody b {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drowBody span {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.drowAction {
  flex: none;
}
.card.pad {
  padding: var(--space-2) var(--space-4);
}

/* ---- lens (All / Mine / Open) triage control ----------------------------- */
.lens {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
}
.lens button {
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.lens button[aria-current='true'] {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  box-shadow: var(--shadow);
}
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-2);
}

/* ---- Loop mode extras: plan rows, stat bar, roster strip, gtk list -------- */
.planLine {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
.planLine + .planLine {
  border-block-start: 1px solid var(--color-border-default);
}
.planGlyph {
  display: inline-grid;
  place-items: center;
  inline-size: var(--control-sm);
  block-size: var(--control-sm);
  border-radius: var(--radius-md);
  flex: none;
}
.statbar {
  display: flex;
  gap: var(--space-2);
}
.statbar > div {
  flex: 1;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  text-align: center;
}
.statbar b {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}
.statbar span {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.rosterStrip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chipPerson {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1);
  padding-inline: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.chipPerson[data-status='maybe'] {
  background: var(--color-sky-soft);
  color: var(--color-sky-deep);
}

/* ---- List mode: progress-bar tiles --------------------------------------- */
.ltile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  inline-size: 100%;
  text-align: start;
}
.ltileMid {
  flex: 1;
  min-inline-size: 0;
}
.ltileMid b {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}
.bar {
  margin-block-start: var(--space-2);
  block-size: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  overflow: hidden;
}
.bar > i {
  display: block;
  block-size: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-accent-deep);
}
.ltilePct {
  flex: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.shopCheck {
  display: inline-grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border-strong);
  color: transparent;
  flex: none;
}
.drow[data-got='true'] .shopCheck {
  background: var(--color-sage-deep);
  border-color: var(--color-sage-deep);
  color: var(--color-text-on-accent);
}
.drow[data-got='true'] .drowBody b {
  color: var(--color-text-subtle);
  text-decoration: line-through;
}

/* ---- Wall mode: tidy chronological "contact sheet" (Timeline layout) ------ */
.tlDay {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-block: var(--space-4) var(--space-2);
}
.tlRow {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-block-end: 1px solid var(--color-border-default);
}
.tlThumb {
  inline-size: 4.5rem;
  aspect-ratio: 1 / 1;
  flex: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--tone-a, var(--color-sky)) 60%, var(--color-surface-raised)),
    color-mix(in srgb, var(--tone-b, var(--color-sage-deep)) 66%, var(--color-surface-sunken))
  );
}
.tlBody {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.tlCap {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.tlWho {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.tlWho .react {
  margin-inline-start: auto;
}
.react {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.05rem var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}
.tlNote {
  padding: var(--space-4);
  background: linear-gradient(
    170deg,
    var(--color-gold-soft),
    color-mix(in srgb, var(--color-gold-soft) 50%, var(--color-surface-raised))
  );
  border-color: color-mix(in srgb, var(--color-gold) 40%, transparent);
  font-size: var(--font-size-base);
  line-height: var(--line-snug);
}
.composerRow {
  display: flex;
  gap: var(--space-2);
}
.composerRow .btn {
  flex: 1;
}

.leadIcon {
  display: inline-grid;
  place-items: center;
  inline-size: var(--control-sm);
  block-size: var(--control-sm);
  border-radius: var(--radius-md);
  flex: none;
}
.leadIcon .i {
  inline-size: var(--icon-sm);
  block-size: var(--icon-sm);
}
.hLabel {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
}

/* density knob: Ledger is already dense; compact tightens further */
:root[data-density='compact'] .drow,
:root[data-density='compact'] .planLine {
  padding-block: var(--space-2);
}
:root[data-density='comfortable'] .stack {
  gap: var(--space-5);
}

@media (width >= 40rem) {
  .cols2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: start;
  }
}