/* Plotline — design system.
 *
 * Everything is driven by the tokens in :root, so the whole app can be
 * re-themed (including dark mode) without touching component rules.
 * Class names are shared with app.js — keep them stable.
 */
:root {
  /* Brand: deep ink surfaces + a warm amber action colour */
  --brand:        #ff7a2f;
  --brand-dark:   #e8631a;
  --brand-soft:   #fff1e7;
  --brand-ink:    #8a3d0c;

  --accent2:      #12b3a6;   /* teal — positive / secondary */
  --accent2-dark: #0a8d81;
  --accent2-soft: #e2f7f4;

  --violet:       #6b5bd6;
  --violet-soft:  #efedfc;

  /* Neutrals */
  --ink:          #161a27;
  --ink-soft:     #5f6880;
  --ink-mute:     #8b93a7;
  --bg:           #f4f6fb;
  --surface:      #ffffff;
  --surface-2:    #f8fAfd;
  --rule:         #e4e8f2;

  /* Chrome (header / nav) */
  --chrome:       #161c30;
  --chrome-2:     #212942;
  --on-chrome:    #ffffff;
  --on-chrome-dim: rgba(255,255,255,0.62);

  /* Status */
  --danger:       #e5484d;
  --danger-soft:  #fdecec;
  --danger-ink:   #a11d21;
  --warn:         #f5a524;
  --warn-soft:    #fff6e5;
  --warn-ink:     #8a5a04;
  --ok:           #17a673;
  --ok-soft:      #e6f7f0;
  --ok-ink:       #0d6b49;

  /* Shape */
  --r-sm:  8px;
  --r:     12px;
  --r-lg:  18px;
  --r-pill: 999px;

  /* Elevation */
  --shadow:    0 1px 2px rgba(18,23,41,0.06), 0 1px 3px rgba(18,23,41,0.04);
  --shadow-md: 0 4px 12px rgba(18,23,41,0.10), 0 2px 4px rgba(18,23,41,0.06);
  --shadow-lg: 0 12px 28px rgba(18,23,41,0.18);

  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #e8ebf5;
    --ink-soft:   #a2abc2;
    --ink-mute:   #7c86a0;
    --bg:         #0e1220;
    --surface:    #171d2e;
    --surface-2:  #1d2438;
    --rule:       #2a3247;

    --chrome:     #0b0f1c;
    --chrome-2:   #151b2c;

    --brand-soft: #3a2214;
    --brand-ink:  #ffb98a;
    --accent2-soft: #10322f;
    --violet-soft:  #241f47;

    --danger-soft: #3a1c1e;
    --danger-ink:  #ff9b9e;
    --warn-soft:   #392b12;
    --warn-ink:    #f8c976;
    --ok-soft:     #10322a;
    --ok-ink:      #6fd9b0;

    --shadow:    0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 28px rgba(0,0,0,0.6);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
  font-size: 15px;
}
input, textarea, select, button { font-family: inherit; }

/* ===== App layout ===== */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.statusbar-pad {
  background: var(--chrome);
  height: env(safe-area-inset-top, 0px);
}

.app-header {
  background: var(--chrome);
  color: var(--on-chrome);
  padding: 0 6px;
  display: flex;
  align-items: center;
  height: 58px;
}
.app-header .title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.2px;
  flex: 1;
  margin-left: 8px;
  display: flex;
  align-items: center;
}
.icon-btn {
  background: transparent;
  border: 0;
  color: var(--on-chrome);
  font-size: 21px;
  padding: 10px;
  min-width: var(--tap);
  cursor: pointer;
  line-height: 1;
  border-radius: var(--r-sm);
}
.icon-btn:active { background: rgba(255,255,255,0.12); }

.app-tabs {
  background: var(--chrome);
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 4px 6px;
  gap: 2px;
}
.app-tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 1 auto;
  padding: 9px 14px;
  background: transparent;
  border: 0;
  color: var(--on-chrome-dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  min-width: 68px;
  border-radius: var(--r-pill);
}
@media (max-width: 430px) {
  .tab { padding: 9px 8px; font-size: 12px; min-width: 0; }
}
.tab[aria-selected="true"] {
  color: var(--chrome);
  background: var(--brand);
  font-weight: 700;
}

.app-main {
  flex: 1;
  padding-bottom: 96px; /* room for FAB */
}

.banner {
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  color: var(--ink);
  padding: 12px 14px;
  margin: 10px;
  border-radius: var(--r);
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
}
.banner button { margin-left: auto; }

/* ===== Cards / lists ===== */
.empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 48px 24px;
  font-size: 14px;
  line-height: 1.6;
}

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  margin: 10px;
  padding: 14px;
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 12px;
  align-items: center;
  box-shadow: var(--shadow);
}
.card .delta { text-align: center; }
.card .delta .big {
  font-size: 25px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.card .delta .small {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.card .name {
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.card .desc {
  color: var(--ink-soft);
  font-size: 13px;
}
.card .last {
  color: var(--ink-soft);
  font-size: 13px;
  margin-top: 3px;
}
.card .actions { display: flex; gap: 6px; }

.add-btn {
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  padding: 0 20px;
  height: var(--tap);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.add-btn:active { background: var(--brand-dark); transform: scale(0.97); }

/* ===== Recent list ===== */
.recent-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  cursor: pointer;
}
.recent-row:active { background: var(--surface-2); }
.recent-row .r-name {
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
}
.recent-row .r-when {
  color: var(--ink-soft);
  font-size: 14px;
  margin-top: 2px;
}
.recent-row .r-when small { color: var(--ink-mute); margin-left: 4px; }
.recent-row .r-qant {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.recent-row .r-note { color: var(--ink-soft); font-size: 12px; }

/* ===== Stats ===== */
.stats-bar {
  background: var(--surface);
  color: var(--ink);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--rule);
}
.stats-bar select {
  flex: 1;
  font-size: 15px;
  padding: 10px;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}
.stats-bar .total {
  text-align: right;
  font-size: 12px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.stats-bar .total b {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.4px;
}
.period-tabs {
  display: flex;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  padding: 6px;
  gap: 4px;
}
.period-tabs .tab { color: var(--ink-soft); }
.period-tabs .tab[aria-selected="true"] { background: var(--brand); color: #fff; }
.stats-row {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.stats-row .sr-label { font-size: 15px; }
.stats-row .sr-sub { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
.stats-row .sr-val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-wrap {
  margin: 10px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  height: 260px;
  box-shadow: var(--shadow);
}

/* ===== FAB ===== */
.fab {
  position: fixed;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  border: 0;
  font-size: 30px;
  line-height: 60px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(255,122,47,0.42);
  padding: 0;
  z-index: 100;
}
.fab:active { background: var(--brand-dark); transform: scale(0.94); }

/* ===== Modals / dialogs ===== */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(10,14,26,0.55);
  display: flex;
  align-items: stretch;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}
.dialog {
  background: var(--surface);
  width: 100%;
  max-width: 520px;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dialog header {
  background: var(--chrome);
  color: var(--on-chrome);
  padding: 0 6px;
  display: flex;
  align-items: center;
  height: 58px;
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(58px + env(safe-area-inset-top, 0px));
}
.dialog header .title {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  margin-left: 8px;
}
.dialog .body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
}
.dialog .topic-name {
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 18px;
}
.field { margin-bottom: 18px; }
.field label {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin-bottom: 6px;
}
.field input, .field textarea, .field select {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  font-size: 16px;
  background: var(--surface-2);
  color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.field textarea { min-height: 68px; resize: vertical; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dialog .actions {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--rule);
  justify-content: flex-end;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
}
.btn {
  border: 0;
  background: var(--brand);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-height: var(--tap);
}
.btn:active { background: var(--brand-dark); }
.btn.secondary {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
}
.btn.secondary:active { background: var(--surface-2); }
.btn.danger { background: var(--danger); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.confirm .body p { margin: 0 0 12px 0; line-height: 1.5; }

/* ===== Drawer / menu ===== */
.drawer {
  position: fixed; inset: 0;
  z-index: 1500;
  display: none;
}
.drawer.open { display: block; }
.drawer .scrim {
  position: absolute;
  inset: 0;
  background: rgba(10,14,26,0.55);
  z-index: 1;
  display: block;
}
.drawer .panel {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 84%;
  max-width: 320px;
  background: var(--surface);
  z-index: 2;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.drawer .panel header {
  background: var(--chrome);
  color: var(--on-chrome);
  padding: calc(22px + env(safe-area-inset-top, 0px)) 20px 22px;
}
.drawer .panel header .app-name { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.drawer .panel header .app-sub { font-size: 12px; color: var(--on-chrome-dim); margin-top: 4px; }
.drawer .panel nav {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.drawer .panel nav button,
.drawer .panel nav a.drawer-link {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 13px 20px;
  font-size: 15px;
  cursor: pointer;
  color: var(--ink);
}
.drawer .panel nav a.drawer-link {
  box-sizing: border-box;
  text-decoration: none;
}
.drawer .panel nav button:active,
.drawer .panel nav a.drawer-link:active { background: var(--surface-2); }
.drawer .panel nav .section {
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  padding: 16px 20px 4px;
  letter-spacing: 0.7px;
  font-weight: 700;
}
.drawer .panel nav .danger { color: var(--danger); }
.drawer .panel .drawer-version {
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  font-size: 11px;
  color: var(--ink-mute);
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
}

/* ===== Snackbar ===== */
.snackbar {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  background: var(--chrome-2);
  color: #fff;
  padding: 14px 16px;
  border-radius: var(--r);
  z-index: 2000;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.snackbar.show { opacity: 1; transform: translateY(0); }
.snack-msg { flex: 1; }
.snack-action {
  background: transparent;
  border: 0;
  color: var(--brand);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* ===== Topic manager / list ===== */
.topic-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.topic-row .t-name { font-weight: 600; color: var(--ink); }
.topic-row .t-sub { color: var(--ink-mute); font-size: 12px; }
.topic-row.archived { opacity: 0.55; }
.star {
  background: transparent;
  border: 0;
  font-size: 22px;
  cursor: pointer;
  color: var(--ink-mute);
  padding: 6px;
}
.star.on { color: var(--warn); }

.sticky-header {
  position: sticky;
  top: 0;
  background: var(--bg);
  color: var(--ink-mute);
  padding: 10px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  z-index: 5;
}

/* ===== Quick-bar (frequent topics) ===== */
.quick-bar {
  display: flex;
  gap: 8px;
  padding: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 6;
}
.quick-bar::-webkit-scrollbar { display: none; }
.quick-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1.5px solid var(--accent, var(--rule));
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow);
}
.quick-chip:active { transform: scale(0.96); }
.qc-emoji { font-size: 16px; }

/* ===== Card emoji + accent ===== */
.card { border-left: 4px solid var(--accent, var(--brand)); }
.card-emoji { margin-right: 6px; font-size: 18px; vertical-align: -2px; }

/* ===== Add Event: time chips + severity + tag suggestions ===== */
.time-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.t-chip {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.t-chip:active { background: var(--brand-soft); border-color: var(--brand); }

.sev-row { display: flex; align-items: center; gap: 12px; }
.sev-row input[type="range"] { flex: 1; accent-color: var(--brand); }
.sev-val {
  font-size: 18px;
  font-weight: 700;
  width: 28px;
  text-align: center;
  color: var(--brand);
}

.field .hint { font-weight: normal; color: var(--ink-mute); font-size: 11px; margin-left: 4px; }

.tag-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.tag-suggest-chip {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}
.tag-suggest-chip.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* ===== Tags in body text ===== */
.tag-chip {
  display: inline-block;
  background: var(--violet-soft);
  color: var(--violet);
  padding: 1px 7px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  margin: 0 2px;
}
@media (prefers-color-scheme: dark) {
  .tag-chip { color: #b8afff; }
}

/* ===== Severity badge ===== */
.sev-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 1px 7px;
  margin-left: 4px;
  vertical-align: 1px;
}
.sev-badge.sev-lo  { background: var(--ok-soft);     color: var(--ok-ink); }
.sev-badge.sev-med { background: var(--warn-soft);   color: var(--warn-ink); }
.sev-badge.sev-hi  { background: var(--danger-soft); color: var(--danger-ink); }

/* ===== Topic edit: emoji + color picker ===== */
.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.swatch.on { border-color: var(--ink); transform: scale(1.12); }

/* ===== Recent filter bar ===== */
.recent-filter {
  padding: 10px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.recent-filter .field { margin-bottom: 8px; }
.recent-filter .field label { font-size: 11px; }
.recent-filter input,
.recent-filter select {
  font-size: 14px;
  padding: 9px 10px;
  background: var(--surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  color: var(--ink);
}
.recent-filter-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 6px;
}
.recent-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}
.tag-filter-chip {
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
}
.tag-filter-chip.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.tag-filter-chip small { opacity: 0.7; }

/* ===== Day view ===== */
.day-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px;
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 5;
}
.day-nav .icon-btn { font-size: 24px; padding: 4px 10px; color: var(--ink); }
.day-nav .icon-btn:active { background: var(--surface-2); }
.day-nav .day-title { flex: 1; text-align: center; }
.day-nav .dt-main { font-size: 16px; font-weight: 700; }
.day-nav .dt-sub  { font-size: 11px; color: var(--ink-mute); }
.day-nav input[type="date"] {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: 8px;
  border-radius: var(--r-sm);
  font-size: 12px;
  width: 94px;
}

.day-stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--bg);
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.day-stats-strip > div {
  text-align: center;
  border-right: 1px solid var(--rule);
}
.day-stats-strip > div:last-child { border-right: 0; }
.day-stats-strip b {
  display: block;
  font-size: 22px;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.day-stats-strip span {
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.day-section-h {
  background: var(--bg);
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: 12px 16px 6px;
}
.day-summary-row {
  background: var(--surface);
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  border-left: 4px solid var(--accent, var(--brand));
}
.dsr-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dsr-name { font-weight: 700; color: var(--ink); }
.dsr-count { font-size: 13px; color: var(--ink-mute); }
.dsr-times { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }

.day-event {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  cursor: pointer;
}
.day-event:active { background: var(--surface-2); }
.day-time { color: var(--ink-mute); font-size: 13px; font-variant-numeric: tabular-nums; }
.day-name { color: var(--ink); font-weight: 600; }
.day-note { color: var(--ink-soft); font-size: 12px; }
.day-qant { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ===== Stats view: cards + sections + heatmap ===== */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stats-cards > div {
  background: var(--surface);
  padding: 12px 6px;
  text-align: center;
}
.stats-cards b {
  display: block;
  font-size: 19px;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stats-cards span {
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.stats-section {
  padding: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.stats-section h3 {
  margin: 0;
  background: var(--bg);
  color: var(--ink-mute);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: 14px 16px 6px;
}

.heatmap {
  padding: 14px 12px;
  background: var(--surface);
  overflow-x: auto;
}
.heatmap-grid { display: flex; gap: 3px; }
.heatmap-col { display: flex; flex-direction: column; gap: 3px; }
.heatmap-cell {
  width: 12px;
  height: 12px;
  background: var(--rule);
  border-radius: 3px;
}
.heatmap-cell.level-0 { background: var(--rule); }
.heatmap-cell.level-1 { background: #ffd9bf; }
.heatmap-cell.level-2 { background: #ffb083; }
.heatmap-cell.level-3 { background: #ff7a2f; }
.heatmap-cell.level-4 { background: #c9500f; }
@media (prefers-color-scheme: dark) {
  .heatmap-cell.level-1 { background: #55301c; }
  .heatmap-cell.level-2 { background: #8f4a1c; }
  .heatmap-cell.level-3 { background: #d9661f; }
  .heatmap-cell.level-4 { background: #ff9a55; }
}
.heatmap-legend {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--ink-mute);
}
.heatmap-legend .heatmap-cell { vertical-align: middle; }

.corr-row {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
  background: var(--surface);
  font-size: 14px;
  gap: 8px;
}
.corr-row .muted { color: var(--ink-mute); font-size: 12px; }
.muted-small { color: var(--ink-mute); font-size: 12px; padding: 4px 16px 6px; margin: 0; }

/* ===== Drag-to-reorder cards ===== */
.card {
  touch-action: pan-y;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.drag-active {
  touch-action: none;
  overflow: hidden;
}
body.drag-active .card { touch-action: none; }
.card.dragging {
  background: var(--brand-soft);
  border-color: var(--brand);
  box-shadow: var(--shadow-lg);
  transform: scale(1.02);
  z-index: 50;
  position: relative;
}
.card.drag-target-above { box-shadow: 0 -3px 0 0 var(--brand) inset, var(--shadow); }
.card.drag-target-below { box-shadow:  0 3px 0 0 var(--brand) inset, var(--shadow); }
.reorder-hint {
  color: var(--ink-mute);
  font-size: 12px;
  text-align: center;
  padding: 8px 16px 0;
  line-height: 1.5;
}

/* ===== Topic-edit "kind" picker ===== */
.kind-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.kind-opt {
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 12px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  background: var(--surface);
}
.kind-opt input { margin-right: 6px; vertical-align: middle; accent-color: var(--brand); }
.kind-opt span { color: var(--ink-mute); font-size: 12px; }
.kind-opt:has(input:checked) {
  background: var(--brand-soft);
  border-color: var(--brand);
}

/* ===== Topics Manager rows ===== */
.mgr-hint {
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
}
.topic-row .mgr-arrows {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-right: 4px;
}
.arrow-btn {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1;
  width: 32px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
}
.arrow-btn:active { background: var(--brand-soft); border-color: var(--brand); }
.arrow-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ===== "+ New topic" tile ===== */
.new-topic-tile {
  background: transparent;
  border: 2px dashed var(--rule);
  border-radius: var(--r-lg);
  margin: 10px;
  padding: 20px;
  width: calc(100% - 20px);
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.new-topic-tile:active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }

/* ===== Drive sync status pill ===== */
.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.16);
  color: #fff;
  margin-left: 8px;
  white-space: nowrap;
}
.sync-pill.error { background: rgba(229,72,77,0.45); }
.sync-pill.ok    { background: rgba(18,179,166,0.35); }

/* ===== Insights view ===== */
.setup-card {
  margin: 14px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.setup-card h3 { margin: 0 0 8px; color: var(--ink); font-size: 16px; font-weight: 700; }
.setup-card p { margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }

.status-card {
  margin: 12px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--rule);
  box-shadow: var(--shadow);
}
.status-card.flare { border-left-color: var(--danger); background: var(--danger-soft); }
.status-card.watch { border-left-color: var(--warn);   background: var(--warn-soft); }
.status-card.ok    { border-left-color: var(--ok); }
.status-card.none  { border-left-color: var(--ink-mute); }
.status-head { display: flex; gap: 10px; align-items: flex-start; }
.status-icon { font-size: 22px; line-height: 1.1; }
.status-head h3 { margin: 0; font-size: 16px; color: var(--ink); font-weight: 700; }
.status-head .muted-small { padding: 2px 0 0; }
.status-reasons { margin: 10px 0 0; padding-left: 20px; }
.status-reasons li { font-size: 13px; color: var(--ink); line-height: 1.55; margin-bottom: 3px; }
.status-card .muted-small { padding-left: 0; padding-right: 0; }

.metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.metric {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 10px;
  text-align: center;
}
.metric.bad  { background: var(--danger-soft); border-color: transparent; }
.metric.good { background: var(--ok-soft);     border-color: transparent; }
.metric b {
  display: block;
  font-size: 18px;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.metric b small { font-size: 11px; font-weight: 500; }
.metric span { display: block; font-size: 10px; text-transform: uppercase; color: var(--ink-mute); letter-spacing: 0.4px; }
.metric em { display: block; font-size: 10px; font-style: normal; color: var(--ink-mute); margin-top: 2px; }

.status-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btn.small { padding: 8px 14px; font-size: 12px; min-height: 0; }

.insight-list { list-style: none; margin: 0; padding: 0; }
.insight {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--surface);
}
.insight.is-test { background: var(--surface-2); }
.insight:last-child { border-bottom: 0; }

.sig {
  align-self: flex-start;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-weight: 700;
  white-space: nowrap;
}
.sig.sig-strong { background: var(--ok-soft);   color: var(--ok-ink); }
.sig.sig-weak   { background: var(--warn-soft); color: var(--warn-ink); }
.sig.sig-none   { background: var(--surface-2); color: var(--ink-mute); }

.meal-card { border-top: 1px solid var(--rule); background: var(--surface); }
.meal-card h4 {
  margin: 0;
  padding: 12px 16px 6px;
  font-size: 13px;
  color: var(--ink);
}
.meal-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
  padding: 8px 16px 10px;
  border-top: 1px dashed var(--rule);
}
.meal-q { font-size: 13px; }
.meal-q strong { display: block; }
.meal-q .muted-small,
.meal-v .muted-small { padding: 0; display: block; line-height: 1.45; }
.meal-v { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }

.ins-controls { display: flex; gap: 8px; }
.ins-controls select { flex: 1 1 auto; }

.table-wrap { overflow-x: auto; background: var(--surface); }
.ins-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ins-table th, .ins-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  white-space: nowrap;
}
.ins-table th {
  background: var(--surface-2);
  color: var(--ink-mute);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ins-table td.num, .ins-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ins-table tr.sig-strong td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.ins-table tr.sig-weak   td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

.role-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.role-name { flex: 1 1 auto; font-size: 14px; }
.role-row select { flex: 0 0 auto; max-width: 52%; }

.role-block { flex-wrap: wrap; }
.role-block .role-name { flex: 1 1 45%; }
.role-extra {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 2px 4px;
  border-left: 2px solid var(--rule);
  margin-left: 2px;
}
.role-extra[hidden] { display: none; }
.role-dir,
.role-timing {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
}
.role-dir[hidden] { display: none; }
.role-dir select { max-width: 60%; }
.role-timing input { flex: 0 0 auto; }

.row-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  font-size: 14px;
}
.row-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); }
.row-toggle select { margin-left: auto; }

/* ---- onboarding presets ---- */
.preset-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.preset-card:active { background: var(--surface-2, var(--surface)); }
.preset-card:disabled { opacity: 0.5; }
.preset-icon { font-size: 26px; flex: 0 0 auto; }
.preset-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.preset-text strong { font-size: 15px; }
.preset-text .muted-small { padding: 0; line-height: 1.4; }

/* ---- goals and streaks ---- */
.goal-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 9px 3px 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  background: var(--rule);
  color: var(--ink-soft);
}
.goal-chip.ok   { background: var(--ok-soft);     color: var(--ok-ink); }
.goal-chip.hot  { background: var(--warn-soft, #fff1e2); color: var(--warn-ink, #b4521a); }
.goal-chip.open { background: var(--rule);       color: var(--ink-soft); }
.goal-chip.miss { background: var(--danger-soft); color: var(--danger-ink); }

.goal-section .goal-headline {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 700;
}
.goal-cards { margin-top: 12px; }
.goal-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 14px 0 4px;
}
.goal-dot {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: var(--rule);
}
.goal-dot.met     { background: var(--ok); }
.goal-dot.miss    { background: var(--danger); opacity: 0.55; }
.goal-dot.pending { background: transparent; border: 1px dashed var(--ink-soft); }

.goal-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
}
.goal-form select { flex: 0 0 auto; }
.goal-form input[type="number"] { width: 88px; flex: 0 0 auto; }
.goal-unit, .goal-per { font-size: 13px; color: var(--ink-soft); }