/* ---------- carried over from the old inline <style> (unchanged markup) ---------- */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="number"],
textarea,
select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--ec-surface);
  border: 1px solid var(--ec-line-strong);
  border-radius: var(--ec-radius-sm);
  color: var(--ec-ink);
  padding: var(--ec-space-2) var(--ec-space-3);
  font-size: var(--ec-type-compact);
  font-family: var(--ec-font-sans);
  height: var(--ec-control-height);
}
textarea { resize: vertical; min-height: 60px; height: auto; }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--ec-focus);
  outline-offset: 1px;
}

.app-field-label {
  display: block;
  font-size: var(--ec-type-label);
  color: var(--ec-ink-secondary);
  margin-bottom: var(--ec-space-1);
}

/* ---------- toasts ---------- */
#toastStack {
  position: fixed;
  top: var(--ec-space-4);
  right: var(--ec-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--ec-space-2);
  z-index: 1000;
  max-width: 320px;
}
.toast {
  background: var(--ec-contrast);
  color: var(--ec-on-contrast);
  border-radius: var(--ec-radius-sm);
  padding: var(--ec-space-3);
  font-size: var(--ec-type-compact);
  box-shadow: var(--ec-shadow-md);
}
.toast.urgency-high { border: 1px solid #ff4d4f; }
.toast button {
  margin-top: var(--ec-space-2);
  background: transparent;
  border: 1px solid var(--ec-line-on-contrast);
  color: inherit;
  border-radius: var(--ec-radius-sm);
  padding: var(--ec-space-1) var(--ec-space-2);
  cursor: pointer;
  font-size: var(--ec-type-metadata);
}

.day-review { display: flex; flex-direction: column; gap: var(--ec-space-2); }

/* ---------- shell: sidebar + content ---------- */
.shell { display: grid; grid-template-columns: var(--ec-sidebar-width) minmax(0, 1fr); min-height: 100dvh; }
.side {
  display: flex; flex-direction: column; gap: var(--ec-space-4);
  padding: var(--ec-space-4);
  border-right: 1px solid var(--ec-line);
  background: var(--ec-surface-sunken);
  position: sticky; top: 0; height: 100dvh; box-sizing: border-box;
}
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-link {
  display: flex; align-items: center; gap: var(--ec-space-2);
  width: 100%; height: var(--ec-control-height);
  padding: 0 var(--ec-space-3);
  background: none; border: none; border-radius: var(--ec-radius-sm);
  font: inherit; font-size: var(--ec-type-compact); color: var(--ec-ink-secondary);
  text-align: left; cursor: pointer;
}
.side-link:hover { background: var(--ec-surface-hover); color: var(--ec-ink); }
.side-link.is-active { background: var(--ec-surface); color: var(--ec-ink); font-weight: var(--ec-weight-medium); box-shadow: var(--ec-shadow-sm); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--ec-space-2); }
.capture-pill {
  display: flex; align-items: center; gap: var(--ec-space-2);
  padding: var(--ec-space-2) var(--ec-space-3);
  border: 1px solid var(--ec-line); border-radius: 999px;
  font-size: var(--ec-type-metadata); color: var(--ec-ink-secondary);
}
.capture-pill[data-state="recording"] { color: var(--ec-ink); border-color: var(--ec-line-strong); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ec-ink-tertiary); flex: none; }
.capture-pill[data-state="recording"] .live-dot,
.side-link .live-dot:not([hidden]) { background: var(--ec-accent); animation: ec-pulse 1.6s ease-in-out infinite; }
@keyframes ec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.side-account { position: relative; }
.side-account-btn { display: flex; align-items: center; gap: var(--ec-space-2); width: 100%; padding: var(--ec-space-2); background: none; border: none; border-radius: var(--ec-radius-sm); cursor: pointer; font: inherit; font-size: var(--ec-type-compact); color: var(--ec-ink); }
.side-account-btn:hover { background: var(--ec-surface-hover); }
.side-account-email { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--ec-accent-soft); color: var(--ec-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: var(--ec-weight-semibold); flex: none; }
.side-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; display: flex; flex-direction: column; background: var(--ec-surface); border: 1px solid var(--ec-line); border-radius: var(--ec-radius-sm); box-shadow: var(--ec-shadow-md); padding: var(--ec-space-1); }
.side-menu a, .side-menu button { padding: var(--ec-space-2) var(--ec-space-3); font: inherit; font-size: var(--ec-type-compact); color: var(--ec-ink); background: none; border: none; border-radius: var(--ec-radius-sm); text-align: left; cursor: pointer; }
.side-menu a:hover, .side-menu button:hover { background: var(--ec-surface-hover); }
.side-foot-link { background: none; border: none; padding: var(--ec-space-1) var(--ec-space-3); font: inherit; font-size: var(--ec-type-metadata); color: var(--ec-ink-secondary); text-align: left; cursor: pointer; }

@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; flex-direction: row; align-items: center; gap: var(--ec-space-2); border-right: none; border-top: 1px solid var(--ec-line); z-index: 60; }
  .side-brand, .side-account, .side-foot-link { display: none; }
  .side-nav { flex-direction: row; flex: 1 1 auto; }
  .side-link { justify-content: center; }
  .side-foot { margin-top: 0; }
}

/* ---------- entitlement gate ---------- */
.gate, .notice { background: var(--ec-surface); border: 1px solid var(--ec-line); border-radius: var(--ec-radius); box-shadow: var(--ec-shadow-sm); padding: var(--ec-space-6); max-width: 32rem; }
.gate { margin: var(--ec-space-8) auto; }
.notice { margin-bottom: var(--ec-space-6); }
.notice-title { font-size: var(--ec-type-label); font-weight: var(--ec-weight-semibold); margin-bottom: var(--ec-space-2); }
.gate-note { font-size: var(--ec-type-metadata); color: var(--ec-ink-secondary); }
.shell.is-locked .view, .shell.is-locked .actionbar, .shell.is-locked .notice { display: none !important; }

/* ---------- main + shared view chrome ---------- */
.main { padding: var(--ec-space-6); display: flex; flex-direction: column; }
@media (max-width: 820px) { .main { padding-bottom: 96px; } }
.view { display: none; flex-direction: column; gap: var(--ec-space-6); flex: 1 1 auto; width: 100%; max-width: var(--ec-content-width); margin: 0 auto; }
.view.is-active { display: flex; }
.view.coach.is-active { max-width: calc(var(--ec-content-width) + var(--ec-rail-width) + var(--ec-space-6)); }
.view-title { font-family: var(--ec-font-display); font-size: 34px; line-height: 1.1; }
.chips { display: flex; flex-wrap: wrap; gap: var(--ec-space-2); margin-top: var(--ec-space-3); }
.chip { display: inline-flex; align-items: center; gap: var(--ec-space-2); padding: var(--ec-space-1) var(--ec-space-3); border: 1px solid var(--ec-line-strong); border-radius: 999px; background: none; font: inherit; font-size: var(--ec-type-metadata); color: var(--ec-ink-secondary); cursor: pointer; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip:hover { background: var(--ec-surface); color: var(--ec-ink); }
.chip-static { cursor: default; }
.btn-primary { height: var(--ec-control-height); padding: 0 var(--ec-space-4); background: var(--ec-contrast); color: var(--ec-on-contrast); border: 1px solid transparent; border-radius: var(--ec-radius-sm); font: inherit; font-size: var(--ec-type-compact); font-weight: var(--ec-weight-medium); cursor: pointer; }
.btn-ghost { height: var(--ec-control-height); padding: 0 var(--ec-space-4); background: var(--ec-surface); color: var(--ec-ink); border: 1px solid var(--ec-line-strong); border-radius: var(--ec-radius-sm); font: inherit; font-size: var(--ec-type-compact); cursor: pointer; }
.btn-primary:disabled, .btn-ghost:disabled { opacity: 0.4; cursor: default; }
.actionbar { position: sticky; bottom: 0; display: flex; gap: var(--ec-space-2); justify-content: center; padding: var(--ec-space-3); margin-top: auto; background: color-mix(in srgb, var(--ec-paper) 88%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--ec-line); }

/* ---------- coach view ---------- */
.coach-body { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) var(--ec-rail-width); gap: var(--ec-space-6); align-items: start; }
.coach-body.rail-hidden { grid-template-columns: minmax(0, 1fr); }
.coach-body.rail-hidden .rail { display: none; }
.stage { min-height: 44vh; display: flex; align-items: center; justify-content: center; }
#line { text-align: center; font-family: var(--ec-font-display); font-weight: 400; font-size: clamp(28px, 5vw, 52px); line-height: 1.15; letter-spacing: -0.02em; color: var(--ec-ink); text-wrap: balance; }
.rail { display: flex; flex-direction: column; gap: var(--ec-space-4); position: sticky; top: var(--ec-space-6); }
.rail-block { background: var(--ec-surface); border: 1px solid var(--ec-line); border-radius: var(--ec-radius); padding: var(--ec-space-3); }
.rail-title { font-size: var(--ec-type-metadata); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ec-ink-tertiary); font-weight: var(--ec-weight-medium); margin-bottom: var(--ec-space-2); }
#room, #past { font-size: var(--ec-type-compact); color: var(--ec-ink-secondary); max-height: 30vh; overflow-y: auto; }
#room { white-space: pre-wrap; }
#past div { padding: var(--ec-space-1) 0; border-bottom: 1px solid var(--ec-line); color: var(--ec-ink); }
#past div:last-child { border-bottom: none; }
#statusChip[data-state="live"] .live-dot { background: var(--ec-accent); animation: ec-pulse 1.6s ease-in-out infinite; }
@media (max-width: 1100px) { .coach-body { grid-template-columns: minmax(0, 1fr); } .rail { position: static; } }

/* ---------- all-day view ---------- */
.ambient-banner { padding: var(--ec-space-3); border: 1px solid var(--ec-line); border-radius: var(--ec-radius); background: var(--ec-surface); font-size: var(--ec-type-compact); color: var(--ec-ink-secondary); text-align: center; }
.ambient-banner.recording { color: var(--ec-ink); border-color: var(--ec-accent); background: var(--ec-accent-soft); }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ec-space-3); }
.stat { background: var(--ec-surface); border: 1px solid var(--ec-line); border-radius: var(--ec-radius); padding: var(--ec-space-4); text-align: center; }
.stat strong { display: block; font-family: var(--ec-font-display); font-size: 32px; font-weight: 400; color: var(--ec-ink); }
.stat span { font-size: var(--ec-type-metadata); color: var(--ec-ink-secondary); }
@media (max-width: 640px) { .stat-grid { grid-template-columns: 1fr; } }

/* ---------- day view ---------- */
.day-search { position: relative; }
.day-search input { width: 100%; }
.search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; max-height: 50vh; overflow-y: auto; background: var(--ec-surface); border: 1px solid var(--ec-line); border-radius: var(--ec-radius-sm); box-shadow: var(--ec-shadow-md); padding: var(--ec-space-1); }
.chip-input { border: none; background: none; padding: 0; height: auto; font: inherit; font-size: var(--ec-type-metadata); color: var(--ec-ink); width: auto; }
.subtabs { display: flex; gap: var(--ec-space-4); border-bottom: 1px solid var(--ec-line); }
.subtab { background: none; border: none; border-bottom: 2px solid transparent; padding: var(--ec-space-2) 0; font: inherit; font-size: var(--ec-type-compact); color: var(--ec-ink-secondary); cursor: pointer; }
.subtab.is-active { color: var(--ec-ink); border-bottom-color: var(--ec-ink); font-weight: var(--ec-weight-medium); }
.pane { display: none; flex-direction: column; gap: var(--ec-space-4); }
.pane.is-active { display: flex; }
.pane-actions { display: flex; gap: var(--ec-space-2); }
.day-timeline { display: flex; flex-direction: column; gap: var(--ec-space-4); }
.day-hour h3 { position: sticky; top: 0; z-index: 10; background: var(--ec-paper); padding: var(--ec-space-1) 0; font-family: var(--ec-font-mono); font-size: var(--ec-type-metadata); color: var(--ec-ink-tertiary); font-weight: var(--ec-weight-medium); }
.day-row { display: grid; grid-template-columns: 52px 72px minmax(0, 1fr); gap: var(--ec-space-3); align-items: baseline; font-size: var(--ec-type-compact); color: var(--ec-ink); padding: var(--ec-space-2) 0; border-bottom: 1px solid var(--ec-line); }
.day-row time { font-family: var(--ec-font-mono); font-size: var(--ec-type-metadata); color: var(--ec-ink-tertiary); }
.day-row .day-tag { font-size: var(--ec-type-metadata); color: var(--ec-ink-tertiary); text-transform: lowercase; overflow: hidden; text-overflow: ellipsis; }
.day-row-flag .day-tag, .day-row-flag .day-text { color: var(--ec-accent); }
.day-row-screen .day-text { color: var(--ec-ink-secondary); }
.search-results .day-row { grid-template-columns: 52px minmax(0, 1fr); padding: var(--ec-space-2) var(--ec-space-2); border-bottom: none; border-radius: var(--ec-radius-sm); cursor: pointer; }
.search-results .day-row:hover { background: var(--ec-surface-hover); }
.empty { color: var(--ec-ink-secondary); font-size: var(--ec-type-compact); }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ec-space-3); }
.review-card { background: var(--ec-surface); border: 1px solid var(--ec-line); border-radius: var(--ec-radius); padding: var(--ec-space-4); }
.review-card.wide { grid-column: 1 / -1; }
.review-card h4 { font-size: var(--ec-type-metadata); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ec-ink-tertiary); font-weight: var(--ec-weight-medium); margin-bottom: var(--ec-space-2); }
.review-card p { margin: 0 0 var(--ec-space-2); font-size: var(--ec-type-compact); line-height: 1.6; white-space: pre-wrap; }
.review-card p:last-child { margin-bottom: 0; }
@media (max-width: 720px) { .review-grid { grid-template-columns: 1fr; } }

/* ---------- settings dialog ---------- */
.sheet { width: min(560px, calc(100vw - 2rem)); border: 1px solid var(--ec-line); border-radius: var(--ec-radius); padding: 0; background: var(--ec-paper); color: var(--ec-ink); box-shadow: var(--ec-shadow-lg); }
.sheet::backdrop { background: rgba(27, 26, 23, 0.32); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: var(--ec-space-4); border-bottom: 1px solid var(--ec-line); }
.sheet-head h2 { font-size: var(--ec-type-label); font-weight: var(--ec-weight-semibold); }
.sheet-body { padding: var(--ec-space-4); display: flex; flex-direction: column; gap: var(--ec-space-6); max-height: 70vh; overflow-y: auto; }
.field-group { display: flex; flex-direction: column; gap: var(--ec-space-3); }
.field-group h3 { font-size: var(--ec-type-metadata); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ec-ink-tertiary); font-weight: var(--ec-weight-medium); }
.icon-btn { background: none; border: none; font-size: 20px; line-height: 1; color: var(--ec-ink-secondary); cursor: pointer; }
.sheet-account { display: none; }
@media (max-width: 820px) { .sheet-account { display: flex; } }