/* =========================================================================
   EMPIRIUM OS — MOBILE: BRIEFING (the evening flow's own furniture)

   app.css already carries the briefing shell — the mode switch, the stepper,
   .bfield, .scale, .summary. This sheet is only what the Evening Briefing
   needed once it grew to the desktop's full seven steps: foldable sections,
   segmented answers where the desktop has a <select>, emotion tags, and the
   closeout summary blocks.

   Everything here is prefixed `b*` (briefing) so it cannot collide with the
   .rt-*, .cmd-* and .as-* families other screens own. Loaded after app.css
   and before mobile-feel.css, which stays the last word on skin and motion.
   ========================================================================= */

/* ---------------- foldable section ----------------
   Native <details>, so the open/closed state lives in the element and needs
   no module state — nothing inside a step triggers a full re-render. */
.bsec{
  background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); margin-bottom:12px; overflow:hidden;
}
.bsec-head{
  display:flex; align-items:center; gap:10px;
  min-height:var(--tap); padding:0 14px;
  cursor:pointer; list-style:none;
  font-family:var(--font-display); font-size:14.5px; font-weight:600;
  color:var(--text);
}
/* Both engines need telling: WebKit uses its own pseudo, the spec uses ::marker. */
.bsec-head::-webkit-details-marker{ display:none; }
.bsec-head::marker{ content:''; }
.bsec-head span{ flex:1; min-width:0; }
.bsec-head i{
  flex:none; font-style:normal;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.9px;
  text-transform:uppercase; color:var(--faint);
}
/* The chevron is drawn rather than typed so it rotates cleanly. */
.bsec-head::after{
  content:''; flex:none; width:8px; height:8px; margin-left:2px;
  border-right:2px solid var(--faint); border-bottom:2px solid var(--faint);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .15s ease;
}
.bsec[open] > .bsec-head::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.bsec[open] > .bsec-head{ border-bottom:1px solid var(--line-soft); }
.bsec-body{ padding:14px 14px 4px; }
.bsec-body > .bfield:last-child,
.bsec-body > .scale:last-child{ margin-bottom:14px; }
.bsec-body > .list,
.bsec-body > .empty,
.bsec-body > .summary{ margin-bottom:14px; }

/* ---------------- read-only values carried in from elsewhere ---------------- */
.bvalue{ margin-bottom:12px; }
.bvalue span{
  display:block; margin-bottom:4px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--faint);
}
.bvalue p{
  margin:0; font-size:14.5px; line-height:1.45; color:var(--text);
  white-space:pre-wrap;
}

.bhint{
  margin:0 0 12px; font-size:12.5px; line-height:1.5; color:var(--muted);
}

/* ---------------- segmented answer ----------------
   Stands in for the desktop's <select>: same stored string, thumb-sized
   target, no OS picker sheet between the question and the answer. */
.bchoice{ display:flex; flex-wrap:wrap; gap:6px; }
.bchoice-btn{
  flex:1 1 auto; min-width:72px; min-height:42px; padding:0 12px;
  background:var(--card-subtle); color:var(--muted);
  border:1px solid var(--line); border-radius:var(--r-md);
  font-family:var(--font); font-size:13.5px; font-weight:600;
  cursor:pointer;
}
.bchoice-btn.is-on{
  background:var(--accent); color:var(--on-accent); border-color:var(--accent);
  box-shadow:0 0 10px rgba(var(--accent-rgb),.22);
}

/* ---------------- emotion tags ---------------- */
.btags{ display:flex; flex-wrap:wrap; gap:6px; }
.btag{
  min-height:36px; padding:0 12px;
  background:var(--card-subtle); color:var(--muted);
  border:1px solid var(--line-soft); border-radius:999px;
  font-family:var(--font); font-size:13px; cursor:pointer;
}
.btag.is-on{
  background:rgba(var(--accent-rgb),.16); color:var(--accent);
  border-color:rgba(var(--accent-rgb),.42);
}

.badd{ display:flex; gap:8px; margin-bottom:14px; }
.badd input{
  flex:1; min-width:0; min-height:var(--tap); padding:0 12px;
  background:var(--card-subtle); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-md);
  font-family:var(--font); font-size:16px;
}
.badd input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.28);
}
.badd .btn{ flex:none; }

/* ---------------- weekly direction preview ---------------- */
.bweek-mission{
  padding:12px; margin-bottom:12px;
  background:var(--card-subtle); border-left:3px solid var(--accent);
  border-radius:var(--r-md);
  font-family:var(--font-display); font-size:15px; line-height:1.45;
}
.bweek-list{
  margin:0 0 12px; padding-left:20px;
  font-size:14px; line-height:1.55; color:var(--muted);
}

/* ---------------- tomorrow planning header ---------------- */
.bplan-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:12px;
}
.bplan-head span{
  font-family:var(--font-display); font-size:15px; font-weight:600;
}
.bplan-head b{
  font-family:var(--font-mono); font-size:12px; color:var(--accent);
}
.bplan-bar{
  flex:1 0 100%; height:4px; border-radius:2px;
  background:var(--card-subtle); border:1px solid var(--line-soft);
  overflow:hidden;
}
.bplan-bar b{ display:block; height:100%; background:var(--accent); }

/* ---------------- closeout summary ---------------- */
.bstats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
  margin-bottom:12px;
}
.bstats span{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:9px 4px; text-align:center;
  background:var(--card-subtle); border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.4px;
  text-transform:uppercase; color:var(--faint); line-height:1.25;
}
.bstats b{
  font-family:var(--font-display); font-size:17px; letter-spacing:0;
  text-transform:none; color:var(--accent);
}
.bfirst{
  padding:12px; margin-bottom:14px;
  background:var(--card-subtle); border-left:3px solid var(--accent);
  border-radius:var(--r-md);
  font-size:15px; line-height:1.45;
}
.bchips{
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;
}
.bchips span{
  padding:5px 9px; border-radius:var(--r-sm);
  background:var(--card-subtle); border:1px solid var(--line-soft);
  font-size:12px; color:var(--muted);
}
.bchips b{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.8px;
  text-transform:uppercase; color:var(--faint); margin-right:5px;
}
.bnote{
  margin:0 0 12px; padding:10px;
  background:var(--card-subtle); border-radius:var(--r-md);
  font-size:13.5px; line-height:1.5; color:var(--muted);
  white-space:pre-wrap;
}