/* ============================================================
   Little Signals — dashboard
   A tool, not a document: scanned and operated rather than read
   top to bottom. Summary before detail; state encoded in form as
   well as number so what needs attention reads at a glance.
   Inherits the palette tokens from styles.css.
   ============================================================ */

:root{
  --surface:#FBF5EC;
  --surface-2:#F6EDE0;
  --edge:rgba(43,33,24,.11);
  --edge-soft:rgba(43,33,24,.06);

  /* Semantic state, kept separate from the clay accent. */
  --ok:#4F6B44;
  --warn:#B0763A;
  --alert:#A4472A;
  --idle:#8B7B66;
}

body.app{
  background:var(--surface);
  display:grid;
  grid-template-columns:15.5rem 1fr;
  min-height:100vh;
  align-items:start;
}

/* ---------- left rail ---------- */
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:1.4rem;
  padding:1.5rem 1.15rem;border-right:1px solid var(--edge);background:var(--surface-2)}
.side__brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);
  font-size:1.05rem;letter-spacing:-.01em}
.side__nav{display:flex;flex-direction:column;gap:.1rem;flex:1}
.side__nav a{padding:.5rem .65rem;border-radius:.45rem;font-size:.85rem;color:var(--ink-soft);
  text-decoration:none;border-left:2px solid transparent}
.side__nav a:hover{background:rgba(43,33,24,.045);color:var(--ink)}
.side__nav a.is-active{background:rgba(201,123,90,.1);border-left-color:var(--clay);color:var(--ink);font-weight:600}
.side__foot{display:flex;flex-direction:column;gap:.8rem}
.side__note{margin:0;font-size:.68rem;line-height:1.5;color:var(--ink-faint)}

.switch{display:flex;align-items:center;gap:.55rem;cursor:pointer;font-size:.78rem;color:var(--ink-soft)}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch__track{width:2.1rem;height:1.15rem;border-radius:1rem;background:rgba(43,33,24,.18);
  position:relative;flex:none;transition:background-color .2s ease}
.switch__track i{position:absolute;top:2px;left:2px;width:.95rem;height:.95rem;border-radius:50%;
  background:#fff;transition:transform .2s ease}
.switch input:checked + .switch__track{background:var(--clay)}
.switch input:checked + .switch__track i{transform:translateX(.95rem)}
.switch input:focus-visible + .switch__track{outline:2.5px solid var(--clay);outline-offset:2px}

/* ---------- main ---------- */
.main{padding:2rem clamp(1.25rem,3.2vw,2.75rem) 4rem;max-width:78rem}

.head{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-start;
  padding-bottom:1.6rem;border-bottom:1px solid var(--edge);margin-bottom:2.2rem}
.head__eyebrow{margin:0 0 .35rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-faint)}
.head__title{margin:0;font-family:var(--display);font-weight:400;letter-spacing:-.022em;
  font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.1;max-width:22ch;text-wrap:balance}
.head__sub{margin:.5rem 0 0;color:var(--ink-soft);font-size:.92rem;max-width:44ch}

.tiles{display:flex;gap:.6rem;flex-wrap:wrap}
.tile{border:1px solid var(--edge);border-radius:.6rem;padding:.7rem .9rem;background:#fff;min-width:6.4rem}
.tile b{display:block;font-family:var(--mono);font-size:1.45rem;font-weight:500;line-height:1;
  letter-spacing:-.02em}
.tile span{display:block;margin-top:.3rem;font-size:.68rem;color:var(--ink-faint);letter-spacing:.02em}
.tile--alert b{color:var(--alert)}

/* ---------- sections ---------- */
.sec{margin-bottom:3rem;scroll-margin-top:1.5rem}
.sec__h{margin:0 0 .4rem;font-family:var(--display);font-weight:400;font-size:1.55rem;
  letter-spacing:-.018em}
.sec__lede{margin:0 0 1.25rem;color:var(--ink-soft);font-size:.92rem;max-width:56ch;line-height:1.55}

.sec--first{margin-bottom:2.2rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:.85rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:.85rem}
.grid--tight{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}

/* ---------- do this next ---------- */
.next__card{border:1px solid rgba(201,123,90,.32);border-left:3px solid var(--clay);
  border-radius:.7rem;background:#fff;padding:1.15rem 1.3rem}
.next__k{margin:0 0 .5rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--clay)}
.next__t{margin:0;font-family:var(--display);font-size:clamp(1.15rem,2.3vw,1.45rem);
  line-height:1.3;letter-spacing:-.012em}
.next__w{margin:.5rem 0 0;font-size:.9rem;line-height:1.55;color:var(--ink-soft);max-width:58ch}
.next__go{display:inline-block;margin-top:.85rem;background:var(--ink);color:var(--paper);
  border-radius:.45rem;padding:.5rem 1rem;font-size:.85rem;font-weight:600;text-decoration:none}
.next__go:hover{background:var(--clay)}

/* ---------- the four ways out ---------- */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr));gap:.5rem;
  margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--edge)}
.path{text-align:left;background:var(--surface);border:1px solid var(--edge);border-radius:.55rem;
  padding:.65rem .75rem;font:inherit;cursor:pointer;transition:border-color .18s ease,background-color .18s ease}
.path b{display:block;font-size:.88rem;font-weight:600}
.path span{display:block;margin-top:.2rem;font-size:.74rem;color:var(--ink-faint);line-height:1.4}
.path:hover{border-color:var(--clay)}
.path[aria-pressed="true"]{border-color:var(--clay);background:rgba(201,123,90,.12)}
.path[aria-pressed="true"] b::after{content:" ✓";color:var(--clay)}
.paths__out{margin:.8rem 0 0;font-size:.85rem;line-height:1.5;color:var(--ok);min-height:1.2rem}

/* ---------- sparkline drill-down ---------- */
.spark--live{cursor:pointer}
.spark__hit{fill:transparent}
.spark__hit.is-on{fill:rgba(201,123,90,.16)}
.sig__peek{margin:.2rem 0 0;font-size:.8rem;line-height:1.5;color:var(--ink-faint);min-height:2.2rem}
.sig__peek b{color:var(--ink)}
.sig__peekv{font-family:var(--mono);font-size:.7rem;color:var(--clay);white-space:nowrap}

/* ---------- by subject ---------- */
.topic{border:1px solid var(--edge);border-radius:.7rem;background:#fff;padding:.9rem 1rem;
  display:flex;flex-direction:column;gap:.5rem}
.topic__head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.topic__name{font-size:.95rem;font-weight:600;text-transform:capitalize}
.topic__n{font-family:var(--mono);font-size:.66rem;color:var(--ink-faint)}
.topic__lift{margin:0;font-size:.85rem;line-height:1.45;color:var(--ink-soft)}
.topic__lift--flat{color:var(--ink-faint)}
.topic__ev{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:auto}

/* ---------- takeaway cards ---------- */
.card{border:1px solid var(--edge);border-radius:.7rem;background:#fff;padding:1rem 1.1rem;
  display:flex;flex-direction:column;gap:.7rem}
.card__kind{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:.3rem}
.card__kind::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:currentColor}
.kind-change{color:var(--ok);background:rgba(79,107,68,.1)}
.kind-tension{color:var(--alert);background:rgba(164,71,42,.1)}
.kind-habit{color:var(--warn);background:rgba(176,118,58,.1)}
.card__text{margin:0;font-size:1rem;line-height:1.5;text-wrap:pretty}
.card__ev{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto}

.chip{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--edge);
  border-radius:2rem;padding:.22rem .6rem .22rem .5rem;background:var(--surface);
  font-family:var(--mono);font-size:.64rem;color:var(--ink-soft);cursor:pointer}
.chip:hover{border-color:var(--clay);color:var(--clay)}
.chip::before{content:"";width:0;height:0;border-left:5px solid currentColor;
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.chip.playing::before{border:0;width:5px;height:6px;border-left:2px solid currentColor;
  border-right:2px solid currentColor}

/* ---------- the open question ---------- */
.ask-card{border:1px solid rgba(164,71,42,.28);border-radius:.8rem;background:#fff;
  padding:1.3rem 1.4rem;box-shadow:0 1px 0 rgba(164,71,42,.06)}
.ask-card__pair{display:grid;grid-template-columns:1fr auto 1fr;gap:1.1rem;align-items:stretch}
.ask-card__side{display:flex;flex-direction:column;gap:.6rem}
.ask-card__when{margin:0;font-family:var(--mono);font-size:.63rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint)}
.ask-card__quote{margin:0;font-family:var(--display);font-size:1.06rem;line-height:1.45;flex:1}
.ask-card__vs{width:1px;background:var(--edge);position:relative}
.ask-card__vs::after{content:"vs";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#fff;padding:.3rem .15rem;font-family:var(--mono);font-size:.6rem;color:var(--ink-faint)}
.ask-card__q{margin:1.3rem 0 .3rem;font-family:var(--display);font-size:1.32rem}
.ask-card__q b{font-weight:400;color:var(--clay)}
.ask-card__note{margin:0;font-size:.8rem;color:var(--ink-faint)}

/* ---------- last conversation read ---------- */
.latest{display:grid;gap:.85rem}
.read{border:1px solid var(--edge);border-radius:.7rem;background:#fff;overflow:hidden}
.read__top{display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.1rem}
.read__band{width:.32rem;align-self:stretch;border-radius:2rem;flex:none}
.band-low{background:var(--blue)} .band-mid{background:var(--sage)} .band-high{background:var(--clay)}
.read__body{flex:1;min-width:0}
.read__title{margin:0;font-family:var(--mono);font-size:.65rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint)}
.read__head{margin:.3rem 0 0;font-size:1.12rem;line-height:1.4;font-weight:600;text-wrap:pretty}
.read__detail{margin:.3rem 0 0;font-size:.87rem;color:var(--ink-soft)}
.read__means{margin:.7rem 0 0;font-size:.92rem;line-height:1.55;color:var(--ink-soft);max-width:62ch}
.read__try{margin:.75rem 0 0;padding:.7rem .85rem;border-radius:.5rem;background:rgba(201,123,90,.08);
  border-left:2px solid var(--clay);font-size:.9rem;line-height:1.5;max-width:62ch}
.read__try b{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--clay);margin-bottom:.25rem}
.read__value{font-family:var(--mono);font-size:1.35rem;font-weight:500;letter-spacing:-.02em;
  white-space:nowrap;text-align:right}
.read__value small{display:block;font-size:.6rem;color:var(--ink-faint);letter-spacing:.03em;margin-top:.15rem}

/* the measurement drawer, hidden until the switch is on */
.tech{display:none;border-top:1px dashed var(--edge);background:var(--surface-2);
  padding:.85rem 1.1rem;font-size:.78rem;color:var(--ink-soft)}
.app.tech-on .tech{display:block}
.tech dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;margin:0}
.tech dt{font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint)}
.tech dd{margin:0}
.tech code{font-family:var(--mono);font-size:.74rem;background:rgba(43,33,24,.06);
  padding:.05rem .3rem;border-radius:.2rem;overflow-wrap:anywhere}

/* ---------- signal cards ---------- */
.sig{border:1px solid var(--edge);border-radius:.7rem;background:#fff;padding:1rem 1.1rem;
  display:flex;flex-direction:column;gap:.55rem}
.sig__head{display:flex;justify-content:space-between;align-items:baseline;gap:.7rem}
.sig__title{margin:0;font-size:.98rem;font-weight:600}
.sig__plain{margin:.1rem 0 0;font-size:.8rem;color:var(--ink-faint);line-height:1.45}
.sig__trend{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;padding:.2rem .5rem;
  border-radius:.3rem;white-space:nowrap}
.trend-up{color:var(--ok);background:rgba(79,107,68,.1)}
.trend-down{color:var(--warn);background:rgba(176,118,58,.1)}
.trend-flat{color:var(--idle);background:rgba(139,123,102,.11)}
.trend-unknown{color:var(--idle);background:rgba(139,123,102,.11)}
.spark{width:100%;height:54px;display:block;overflow:visible}
.sig__caveat{margin:0;font-size:.78rem;line-height:1.45;color:var(--warn);
  background:rgba(176,118,58,.08);border-radius:.4rem;padding:.5rem .6rem}

/* ---------- beliefs ---------- */
.beliefs{display:grid;gap:.6rem}
.belief{border:1px solid var(--edge);border-radius:.7rem;background:#fff;padding:.95rem 1.1rem;
  display:grid;grid-template-columns:.55rem 1fr auto;gap:.9rem;align-items:start}
.belief__state{width:.32rem;height:100%;min-height:2.4rem;border-radius:2rem}
.state-active{background:var(--ok)}
.state-retired{background:var(--idle)}
.belief__facet{margin:0;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint)}
.belief__text{margin:.28rem 0 .55rem;font-family:var(--display);font-size:1.08rem;line-height:1.4}
.belief__meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.belief__held{font-family:var(--mono);font-size:.66rem;color:var(--ink-faint)}
.belief__conf{text-align:right;font-family:var(--mono);font-size:.66rem;color:var(--ink-faint)}
.belief__conf b{display:block;font-size:1.05rem;color:var(--ink)}
.tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.18rem .45rem;border-radius:.3rem}
.tag-active{color:var(--ok);background:rgba(79,107,68,.1)}
.tag-retired{color:var(--idle);background:rgba(139,123,102,.13)}

/* ---------- conversation log ---------- */
.log{display:grid;gap:.35rem}
.entry{display:grid;grid-template-columns:5.2rem 1fr auto;gap:.9rem;align-items:center;
  padding:.7rem .9rem;border:1px solid var(--edge-soft);border-radius:.55rem;background:#fff}
.entry:hover{border-color:var(--edge)}
.entry__when{font-family:var(--mono);font-size:.68rem;color:var(--ink-faint)}
.entry__text{margin:0;font-size:.9rem;line-height:1.45}
.entry__nums{display:none;gap:.9rem;font-family:var(--mono);font-size:.66rem;color:var(--ink-faint);
  grid-column:2;margin-top:.3rem;flex-wrap:wrap}
.app.tech-on .entry__nums{display:flex}

.dash-foot{border-top:1px solid var(--edge);padding-top:1.4rem;font-size:.78rem;color:var(--ink-faint);
  line-height:1.55;max-width:60ch}
.dash-foot p{margin:0 0 .45rem}
.dash-foot b{color:var(--ink-soft)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  body.app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
    border-right:0;border-bottom:1px solid var(--edge);gap:.9rem}
  .side__nav{flex-direction:row;flex-wrap:wrap;flex:1 1 100%;order:3}
  .side__nav a{border-left:0;border-bottom:2px solid transparent;padding:.35rem .5rem}
  .side__nav a.is-active{border-left:0;border-bottom-color:var(--clay)}
  .side__foot{flex:1 1 100%;order:4}
  .side__note{display:none}
  .ask-card__pair{grid-template-columns:1fr}
  .ask-card__vs{width:auto;height:1px}
  .ask-card__vs::after{background:#fff}
  .entry{grid-template-columns:1fr;gap:.4rem}
  .read__top{flex-wrap:wrap}
  .read__value{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  .switch__track i{transition:none}
}