/*
  03-components.css — v37 pattern library.
  Segmented controls, stat tiles, list rows, steppers, filter rails,
  alert ribbon, plus flat restyles of the legacy button/card/chip.
*/

/* ---------- Buttons: flat, one accent ---------- */
.button {
  background: #5a4327; border: 1px solid rgba(0,0,0,.32);
  border-radius: 12px; box-shadow: none; font-weight: 650;
  color: #f6ecd4; min-height: var(--tap);
}
.button.primary { background: var(--brass); border-color: transparent; color: #1b1105; }
.button.secondary { background: var(--lagoon-deep); border-color: transparent; color: #eaf6f4; }
.button.danger { background: var(--danger-bg); border-color: rgba(194,56,38,.4); color: #8f2318; }
.button.small { min-height: 36px; border-radius: 10px; }
.button.mini { min-height: 32px; }

/* ---------- Cards: chart paper, quiet ---------- */
.card {
  background: var(--chart); border: 1px solid var(--line-strong);
  border-radius: var(--r-m); box-shadow: var(--e1);
}

/* ---------- Chips ---------- */
.chip { font-size: var(--t0); border-color: var(--line); }

/* ---------- Segmented control (generalizes the Combat Now tab bar) ---------- */
.seg {
  display: flex; gap: 5px; padding: 4px;
  background: rgba(0,0,0,.24); border-radius: 999px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 0 var(--gap);
}
.seg-btn {
  flex: 1 0 auto; min-height: 38px; padding: 7px 14px;
  border: 0; border-radius: 999px; background: transparent;
  color: #d9c9a4; font: inherit; font-weight: 650; font-size: var(--t1);
  cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.seg-btn.active { background: var(--brass); color: #1b1105; }

/* Combat Now tabs adopt the same look. */
.combat-tab-bar { background: rgba(0,0,0,.24); border-radius: 999px; padding: 4px; gap: 5px; border: 0; }
.combat-tab-btn {
  border: 0; border-radius: 999px; background: transparent;
  color: #d9c9a4; font-weight: 650; min-height: 38px; padding: 7px 13px;
}
.combat-tab-btn.active { background: var(--brass); color: #1b1105; border: 0; }

/* ---------- Stat tiles (evolved .metric) ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s2); margin-bottom: var(--gap); }
.metric {
  background: var(--chart); border: 1px solid var(--line-strong);
  border-radius: var(--r-s); padding: 9px 10px; min-height: 62px; box-shadow: var(--e1);
}
.metric .label { color: var(--muted); -webkit-text-fill-color: currentColor; font-size: var(--t0); font-weight: 700; letter-spacing: .02em; }
.metric .value { font-family: var(--font-display); font-weight: 400; font-size: var(--t3); margin-top: 2px; color: var(--ink); -webkit-text-fill-color: currentColor; }
.metric .note { color: var(--muted); -webkit-text-fill-color: currentColor; font-size: var(--t0); margin-top: 2px; }
button.metric { text-align: left; cursor: pointer; font: inherit; width: 100%; }
button.metric:active { transform: translateY(1px); }

/* ---------- List rows ---------- */
.lrow-list { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.lrow {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
  background: var(--chart); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 8px 12px; min-height: 56px;
  color: var(--ink); text-align: left; font: inherit; cursor: pointer;
  box-shadow: var(--e1); -webkit-tap-highlight-color: transparent;
}
.lrow:active { background: var(--chart-2); }
.lrow-main { flex: 1; min-width: 0; display: block; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; -webkit-text-fill-color: currentColor; cursor: pointer; }
/* Split rows (NPCs): a separate leading avatar button, then one main button
   holding text + trailing chips, so portraits are tappable from the list. */
.lrow-open { display: flex; align-items: center; gap: 10px; }
.lrow-text { flex: 1; min-width: 0; display: block; }
.avatar-btn { border: 0; background: none; padding: 0; margin: 0; flex: 0 0 auto; cursor: zoom-in; display: block; border-radius: var(--r-s); }
.lrow-title { display: block; -webkit-text-fill-color: currentColor; font-weight: 700; font-size: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-sub { display: block; color: var(--muted); -webkit-text-fill-color: currentColor; font-size: var(--t0); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-end { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.lrow-day { color: var(--muted); font-size: var(--t0); }
.lrow-chevron { color: var(--faint); font-size: 1rem; flex: 0 0 auto; }

/* ---------- Stepper ---------- */
.stepper {
  display: inline-flex; align-items: center; gap: 1px; flex: 0 0 auto;
  background: rgba(0,0,0,.06); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px;
}
.step-btn {
  width: 38px; height: 38px; border-radius: 999px; border: 0;
  background: transparent; color: var(--ink); -webkit-text-fill-color: currentColor; font-size: 1.25rem; font-weight: 700;
  cursor: pointer; display: grid; place-items: center; line-height: 1;
}
.step-btn:active { background: var(--brass); color: #1b1105; }
.step-qty {
  min-width: 36px; text-align: center; font-weight: 800; font-size: var(--t1);
  border: 0; background: none; padding: 0 2px; font-family: inherit; cursor: pointer; color: var(--ink); -webkit-text-fill-color: currentColor;
}

/* v40.34: Samsung/Android auto-dark could leave the Stores parchment intact
   while painting its button text white. Keep this correction scoped to the
   reported light surfaces so coloured and historical rows elsewhere retain
   their existing status styling. */
#screen-stores .metric .label,
#screen-stores .metric .note,
#screen-stores .lrow-sub {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
}
#screen-stores .metric .value,
#screen-stores .lrow-main,
#screen-stores .step-btn,
#screen-stores .step-qty {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}
#screen-stores .step-btn:active {
  color: #1b1105;
  -webkit-text-fill-color: #1b1105;
}

/* ---------- Filter rail + status chips ---------- */
.filter-rail { display: flex; gap: 8px; align-items: center; margin-bottom: var(--s2); }
.filter-rail input {
  flex: 1; min-width: 0; min-height: 42px; border-radius: 999px;
  border: 1px solid rgba(232,192,105,.3); background: rgba(0,0,0,.22);
  color: #f3e6c8; padding: 8px 14px;
}
.filter-rail input::placeholder { color: #a08c67; }
.rail-icon-btn {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid rgba(232,192,105,.3); background: rgba(0,0,0,.22);
  color: var(--brass-bright); font-size: 1.05rem; cursor: pointer; display: grid; place-items: center;
}
.rail-clear-btn { font-size: 1.35rem; line-height: 1; }
.active-filter-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: -2px 2px var(--s2); padding: 7px 10px; border-radius: var(--r-s);
  border: 1px solid rgba(232,192,105,.24); background: rgba(0,0,0,.15);
  color: #d9c9a4; font-size: var(--t0);
}
.active-filter-summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.active-filter-summary button {
  flex: 0 0 auto; border: 0; background: none; color: var(--brass-bright);
  font: inherit; font-weight: 800; cursor: pointer; padding: 4px 2px;
}
.empty .button { margin-top: 10px; }
.status-chips, .pane-chips {
  display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 3px; margin-bottom: var(--s2);
}
.fchip {
  flex: 0 0 auto; border: 1px solid rgba(232,192,105,.28); border-radius: 999px;
  background: rgba(0,0,0,.2); color: #d9c9a4; padding: 7px 13px; min-height: 36px;
  font: inherit; font-size: var(--t0); font-weight: 650; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.fchip .fcount { color: #a08c67; font-weight: 600; }
.fchip.active { background: var(--brass); border-color: transparent; color: #1b1105; }
.fchip.active .fcount { color: rgba(27,17,5,.62); }

/* ---------- Alert ribbon ---------- */
.alert-ribbon {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border-radius: var(--r-s); border: 1px solid; padding: 10px 12px;
  margin-bottom: var(--s2); font: inherit; font-weight: 650; font-size: var(--t1);
  cursor: pointer; text-align: left;
}
.alert-ribbon .alert-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; flex: 0 0 auto; }
.alert-ribbon .ribbon-count { margin-left: auto; font-weight: 600; font-size: var(--t0); opacity: .85; }
.alert-ribbon.danger { background: var(--danger-bg); border-color: rgba(224,106,85,.45); color: #ffd7d0; }
.alert-ribbon.warn { background: var(--warn-bg); border-color: rgba(233,180,84,.4); color: #ffe4a3; }
.alert-ribbon.info { background: rgba(46,111,143,.16); border-color: rgba(120,180,210,.35); color: #cfe7f4; }

/* ---------- Duty chips ---------- */
.duty-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 3px; margin-bottom: var(--s2); align-items: center; }
.duty-chip {
  flex: 0 0 auto; min-height: 38px; border-radius: 999px;
  border: 1px solid rgba(232,192,105,.28); background: rgba(0,0,0,.2);
  color: #d9c9a4; padding: 7px 13px; font: inherit; font-size: var(--t0); font-weight: 650; cursor: pointer;
}
.duty-chip.done { background: var(--ok); border-color: transparent; color: #eefbe9; }
.duty-count { flex: 0 0 auto; color: #a08c67; font-size: var(--t0); font-weight: 700; }

/* ---------- Progress rails: thinner, consistent ---------- */
.hpbar { height: 7px; margin-top: 6px; background: rgba(0,0,0,.18); border: 0; }

/* ---------- Empty states ---------- */
.empty { border-radius: var(--r-s); }

/* ---------- Two-row scrolling rails on phones ---------- */
/* Long single-row rails (daily duties, the 7 combat tabs) fold into two
   rows that scroll sideways together, halving the scroll distance. */
@media (max-width: 699px) {
  .duty-chips, .combat-tab-bar {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: max-content;
    justify-content: start;
    align-items: stretch;
    gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: var(--r-m);
  }
  .combat-tab-btn, .duty-chip { white-space: nowrap; }
}

/* ============================================================ v39 ======= */

/* Menu customiser (reuses the marker-order row pattern) */
.nav-order-row { gap: 8px; }
.nav-order-icon { display: inline-flex; width: 22px; height: 22px; flex: 0 0 auto; color: #5c4a2f; }
.nav-order-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.nav-order-row .marker-order-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-show-toggle { flex: 0 0 auto; font-size: .72rem; }
.nav-row-hidden .marker-order-name, .nav-row-hidden .nav-order-icon { opacity: .45; }
.nav-template-row { flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }

/* Actions reference editor */
.ref-textarea { width: 100%; min-height: 220px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; line-height: 1.45; white-space: pre; overflow-x: auto; }
.ref-edit-actions { margin-top: 8px; justify-content: flex-end; }

/* Sign-in: character name under the real name */
.player-choice-char { display: block; font-size: .68rem; font-weight: 600; opacity: .75; margin-top: 2px; }