/* CoachWise console — FloorWise OS brand system (Brand Guide v1.0).
   Palette: Navy foundation, generous Cream, Copper as deliberate accent,
   Plum reserved for AI-generated content. Montserrat headings, Open Sans body. */

/* Self-hosted variable fonts (latin) — no runtime Google Fonts dependency,
   no fallback flash, true weights across the whole axis (Black 900 is real,
   never synthesized). */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Montserrat-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/OpenSans-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/OpenSans-var-italic.woff2') format('woff2');
}

:root {
  --navy: #1F3654;
  --navy-deep: #16283F;
  --copper: #DB7A1A;
  --copper-dark: #B96412;
  --plum: #3B1C4C;
  --plum-tint: #EDE6F2;
  --cream: #F7F4EE;
  --ink: #1A1A1A;
  --surface: #FFFFFF;
  --line: #E4DFD4;
  --muted: #5F6E82;
  --good: #2E7D4F;      /* Approve green — muted pine, sits beside copper without fighting it */
  --good-tint: #E3F0E8;
  --warn: #B35900;
  --warn-tint: #FBEEDD;
  --bad: #C62828;
  --bad-tint: #FBE4E4;
  --font-head: 'Montserrat', 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
/* Author display rules (e.g. .view { display: grid }) override the browser's
   built-in [hidden] handling; force hidden to always win. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 .5em;
}
h2 { font-size: 1.05em; }
.muted { color: var(--muted); }
.center { text-align: center; padding: 2em; }
.error { color: var(--bad); }

/* Copper underline motif: 24pt rule beneath section labels only. */
.panel > h2 {
  text-transform: uppercase;
  font-size: .82em;
  letter-spacing: .12em;
  padding-bottom: .5em;
  position: relative;
}
.panel > h2::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 32px; height: 2px;
  background: var(--copper);
}

/* ---------- buttons: 6pt radius, Montserrat Bold labels ---------- */

button {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .82em;
  letter-spacing: .02em;
  padding: .6em 1.35em;
  border-radius: 999px;            /* the product's pill CTAs */
  border: 1px solid var(--copper);
  background: var(--copper);       /* primary = copper */
  color: #fff;
  cursor: pointer;
}
/* Create-style CTAs carry the product's plus prefix. */
#score-selected::before, #start-rating::before { content: '+  '; font-weight: 900; white-space: pre; }
button:hover:not(:disabled) { background: var(--copper-dark); border-color: var(--copper-dark); }
/* Disabled = solid neutral, never a washed-out brand color. */
button:disabled {
  background: var(--line);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

button.ghost {                     /* outline / secondary on light */
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
button.ghost:hover:not(:disabled) { background: rgba(31, 54, 84, .07); border-color: var(--navy); }

button.ai {                        /* Plum: AI moments only */
  background: var(--plum);
  border-color: var(--plum);
  color: #fff;
}
button.ai:hover:not(:disabled) { background: #2C1439; border-color: #2C1439; }

button.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
button.danger:hover:not(:disabled) { background: #A82121; border-color: #A82121; }
button.approve { background: var(--good); border-color: var(--good); color: #fff; }
button.approve:hover:not(:disabled) { background: #256841; border-color: #256841; }

input, select, textarea {
  font-family: var(--font-body);
  font-size: .95em;
  padding: .45em .55em;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--copper); outline-offset: 0; }

/* ---------- masthead: navy band = nav row + app hero + tabs (product pattern) ---------- */

.masthead {
  background: var(--navy);           /* true #1F3654, no overlays */
  color: #fff;
  padding: 0 max(1.6em, calc((100% - 1200px) / 2 + 1.2em));
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.8em;
  min-height: 56px;
}
.brand { display: flex; align-items: center; gap: .65em; }
.brand-disc {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--copper);   /* mascot disc: always copper-ringed, perfectly circular */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex: none;
}
.brand-disc img { width: 76%; height: 76%; object-fit: contain; display: block; }
.wordmark {
  font-family: var(--font-head);
  font-weight: 900;                  /* Montserrat Black */
  font-size: 1.25em;
  letter-spacing: .01em;
  white-space: nowrap;
}
.wordmark .wm-coach { color: #fff; }
.wordmark .wm-wise { color: var(--copper); }
.login-card .wordmark .wm-coach { color: var(--navy); }  /* light-surface variant */
.topbar-right { display: flex; gap: .5em; }
.topbar-right .ghost { color: var(--cream); border-color: rgba(247, 244, 238, .45); }
.topbar-right .ghost:hover:not(:disabled) { background: rgba(247, 244, 238, .12); }

/* App hero: kicker above a large two-tone title, org chip beside, italic tagline under. */
.app-hero { padding: 1.1em 0 .2em; }
.hero-kicker {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72em;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--copper);
}
.hero-title-row { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; margin: .1em 0; }
.hero-title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 2.15em;
  margin: 0;
  color: #fff;
  letter-spacing: 0;
}
.hero-title .wm-coach { color: #fff; }
.hero-title .wm-wise { color: var(--copper); }
.org-chip {
  font-family: var(--font-body);
  font-size: .82em;
  color: var(--cream);
  background: rgba(247, 244, 238, .12);
  border: 1px solid rgba(247, 244, 238, .28);
  border-radius: 999px;
  padding: .3em .95em;
  white-space: nowrap;
}
.hero-tagline {
  font-style: italic;
  color: rgba(247, 244, 238, .85);
  margin: 0 0 .9em;
  font-size: .95em;
}

.hero-tabs { display: flex; gap: .4em; }
.hero-tabs .tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: rgba(247, 244, 238, .78);
  padding: .7em 1.05em .8em;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .8em;
}
.hero-tabs .tab:hover { color: #fff; background: transparent; }
.hero-tabs .tab.active { color: #fff; border-bottom-color: var(--copper); background: transparent; }

/* ---------- summary stat cards (ReviewWise-style row under the tabs) ---------- */

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.2em;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--navy);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(31, 54, 84, .07);
  padding: 1em 1.3em .9em;
}
.stat-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .7em;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: .25em;
}
.stat-value {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.85em;
  color: var(--navy);
  line-height: 1.1;
}
.stat-caption { font-size: .78em; color: var(--muted); margin-top: .3em; }

/* ---------- layout: generous cream, cards 8pt radius ---------- */

.view { max-width: 1200px; margin: 1.8em auto; padding: 0 1.2em; display: grid; gap: 1.6em; }
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--navy);   /* the product's colored top-edge accent */
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(31, 54, 84, .07);
  padding: 1.5em 1.7em;
}
.filters { display: flex; flex-wrap: wrap; gap: .8em 1.2em; align-items: end; margin-bottom: 1em; }
.filters label {
  display: flex; flex-direction: column; gap: .3em;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .68em;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--navy);
}
.filters label input, .filters label select { font-size: 1.28em; font-family: var(--font-body); font-weight: 400; letter-spacing: 0; text-transform: none; }
.actions-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8em; align-items: center; margin-bottom: 1em; }
.sync-controls { display: flex; gap: .4em; align-items: center; flex-wrap: wrap; }

/* ---------- filter panel (FloorWise OS pattern, CoachWise palette) ---------- */

.filter-anchor { position: relative; align-self: end; }
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: .45em;
}
.filter-btn svg { flex: none; }
.filter-count {
  background: var(--copper);
  color: #fff;
  border-radius: 999px;
  font-size: .82em;
  padding: .05em .55em;
  font-family: var(--font-head);
  font-weight: 700;
}
.filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: 300px;
  max-height: 430px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(31, 54, 84, .18);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--ink);
}
.fp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .7em 1em;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--surface);
}
.fp-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--navy);
}
.fp-clear {
  background: none;
  border: none;
  color: var(--copper-dark);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .8em;
  padding: 0;
  cursor: pointer;
}
.fp-clear:hover { background: none; color: var(--copper); }
.fp-section { padding: .65em 1em .75em; border-bottom: 1px solid var(--line); }
.fp-section:last-child { border-bottom: none; }
.fp-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72em;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--navy);
  margin-bottom: .4em;
}
/* Item rows: control LEFT, label beside it on the same line, flush left,
   normal case. Must out-rank .filters label, which stacks toolbar labels
   into uppercase columns. */
.filter-panel .fp-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: .55em;
  padding: .26em 0;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}
.filter-panel .fp-item input { accent-color: var(--copper); margin: 0; flex: none; font-size: inherit; }

.filter-chips { display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: 1em; }
.filter-chips:empty { margin-bottom: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .22em .5em .22em .85em;
  font-size: .85em;
  color: var(--navy);
}
.chip button {
  background: none;
  border: none;
  color: var(--copper-dark);
  font-size: 1em;
  line-height: 1;
  padding: 0 .2em;
  cursor: pointer;
  border-radius: 0;
}
.chip button:hover { background: none; color: var(--copper); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .7em .75em; border-bottom: 1px solid var(--line); }
th {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .68em;
  text-transform: uppercase;
  letter-spacing: .12em;   /* kicker treatment */
  color: var(--navy);      /* kickers read confident navy, not softened gray */
}
tr:hover td { background: #F5F1E9; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--copper-dark); }
th .sort-ind { color: var(--copper); }
td a, .covered-calls a { color: var(--copper-dark); }

/* Machine scores are AI output — plum identity, not traffic lights. */
.score-chip {
  display: inline-block;
  min-width: 2.4em;
  text-align: center;
  padding: .18em .5em;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .85em;
  background: var(--plum);
  color: #fff;
}
.score-high, .score-mid, .score-low { background: var(--plum); color: #fff; }
.flag { font-size: .85em; margin-left: .35em; }

/* Pass/fail badge — exists only for calls scored under a rubric with
   non-negotiables (v2+). Semantic colors, never rebranded. */
.badge-pass, .badge-fail {
  display: inline-block;
  padding: .14em .6em;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .74em;
  letter-spacing: .05em;
  margin-left: .45em;
}
.badge-pass { background: var(--good-tint); color: var(--good); }
.badge-fail { background: var(--bad-tint); color: var(--bad); }
.badge-pass.mini, .badge-fail.mini { font-size: .64em; padding: .1em .45em; }

.delivery-row { font-size: .9em; }
.nn-list { margin-top: .4em; }
.nn-item { padding: .45em 0; border-bottom: 1px solid var(--line); font-size: .92em; }
.nn-status {
  display: inline-block; min-width: 5.5em; text-align: center;
  border-radius: 999px; padding: .08em .5em;
  font-family: var(--font-head); font-weight: 700; font-size: .78em;
}
.nn-met { background: var(--good-tint); color: var(--good); }
.nn-not-met { background: var(--bad-tint); color: var(--bad); }
.nn-na { background: #EFEBE2; color: var(--muted); }

.pager { display: flex; gap: 1em; align-items: center; justify-content: center; margin-top: 1em; }

/* ---------- jobs & badges ---------- */

.job-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(31, 54, 84, .05);
  padding: .8em 1em;
  margin-bottom: .8em;
}
.job-head { display: flex; justify-content: space-between; align-items: center; gap: 1em; flex-wrap: wrap; }
.job-items { margin-top: .5em; font-size: .9em; padding-left: 0; }
.job-items li { list-style: none; padding: .18em 0; }

.status-badge {
  display: inline-block;
  padding: .12em .6em;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: .72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.st-queued { background: #EFEBE2; color: var(--muted); }
.st-processing { background: #E3E9F2; color: var(--navy); }
.st-done, .st-approved { background: var(--good-tint); color: var(--good); }
.st-failed, .st-killed { background: var(--bad-tint); color: var(--bad); }
.st-skipped { background: var(--warn-tint); color: var(--warn); }
.st-classified { background: #E3E9F2; color: var(--navy); }  /* typed, honestly not scored */
.st-draft { background: var(--plum-tint); color: var(--plum); }  /* drafts are AI content */

/* Call types: brand-harmonized tints (not semantic signals). */
.type-badge {
  display: inline-block;
  padding: .12em .6em;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: .72em;
  font-weight: 700;
  white-space: nowrap;
}
.ct-sales-inquiry { background: #F6E5D0; color: var(--copper-dark); }
.ct-transfer { background: #EFEBE2; color: var(--muted); }
.ct-vendor { background: #E3E9F2; color: var(--navy); }
.ct-service { background: #E3E9F2; color: var(--navy); }
.ct-wrong-number { background: #EFEBE2; color: var(--muted); }
.ct-other { background: #EFEBE2; color: var(--muted); }

/* Flags keep their semantic colors — never rebranded. */
.flag-service {
  background: #E0EAFF;
  color: #0F62FE;
  border-radius: 8px;
  padding: .55em .85em;
  font-weight: 600;
}

/* ---------- coaching review: drafts are AI-generated -> plum accent ---------- */

.rep-group { margin-bottom: 1.6em; }
.rep-group h3 { border-bottom: 1px solid var(--line); padding-bottom: .35em; }
.note-card {
  border: 1px solid var(--line);
  border-top: 4px solid var(--plum);   /* AI content accent */
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(31, 54, 84, .06);
  padding: 1.3em 1.5em;
  margin: 1em 0;
  background: var(--surface);
}
.note-head { display: flex; justify-content: space-between; align-items: center; gap: 1em; flex-wrap: wrap; margin-bottom: .5em; }
.note-text { line-height: 1.55; }
.note-text p { margin: .45em 0; }
.note-text strong { font-family: var(--font-head); color: var(--navy); }
.note-actions { display: flex; gap: .5em; margin-top: .8em; flex-wrap: wrap; }
.note-card textarea { width: 100%; min-height: 10em; margin-top: .5em; }
.covered-calls { margin-top: .6em; font-size: .88em; color: var(--muted); }
.covered-calls a { cursor: pointer; text-decoration: underline; }

/* ---------- dialogs ---------- */

dialog {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.4em;
  max-width: 760px;
  width: 92vw;
  max-height: 85vh;
  overflow: auto;
  background: var(--surface);
  color: var(--ink);
}
dialog::backdrop { background: rgba(31, 54, 84, .55); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-bottom: .8em; }
.modal-actions { display: flex; gap: .6em; margin-top: 1em; flex-wrap: wrap; }

.assign-rep { margin-left: .9em; display: inline-flex; gap: .4em; align-items: center; }
.assign-rep select { font-size: .9em; padding: .25em .4em; }

.transcript { font-size: .92em; line-height: 1.55; }
.turn { margin: .35em 0; }
.turn .t { color: var(--muted); font-size: .85em; margin-right: .5em; }
.turn.rep .who { color: var(--navy); font-weight: 700; }
.turn.customer .who { color: var(--copper-dark); font-weight: 700; }
.turn.hold-message { color: var(--muted); font-style: italic; }
.turn.hold-message .who { color: var(--warn); font-weight: 700; }
.cat-table td:first-child { white-space: nowrap; }
.quote { color: var(--muted); font-style: italic; }

/* ---------- rater mode: the reveal is an AI surface ---------- */

.rate-cat { display: grid; grid-template-columns: 13em 5em 1fr; gap: .8em; align-items: center; padding: .5em 0; border-bottom: 1px solid var(--line); }
.rate-cat label { font-family: var(--font-head); font-size: .9em; color: var(--navy); }
.rate-cat .guidance { color: var(--muted); font-size: .85em; }
.rate-cat input { width: 4.5em; }
.delta-good { color: var(--good); font-weight: 700; }
.delta-warn { color: var(--warn); font-weight: 700; }
.delta-bad { color: var(--bad); font-weight: 700; }
#rate-transcript { max-height: 22em; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: .7em .9em; margin: .6em 0 1.2em; background: #FCFAF6; }
#rate-reveal-panel { border-top: 4px solid var(--plum); }  /* machine scores revealed = AI moment */

/* ---------- Winston processing indicator: brand disc + rotating copper arc.
   Copper accent, navy text, cream ground — plum is AI content, never status. */

.winston-working {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .3em .95em .3em .35em;
  vertical-align: middle;
}
.winston-working .disc {
  position: relative;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid rgba(219, 122, 26, .3);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.winston-working .disc img { width: 74%; height: 74%; object-fit: contain; display: block; }
.winston-working .disc::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--copper);
  animation: winston-arc 1.1s linear infinite;
}
@keyframes winston-arc { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .winston-working .disc::after { animation: none; border-color: var(--copper); }
}
.winston-working .status {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78em;
  color: var(--navy);
  white-space: nowrap;
}
.winston-working.done .disc::after { animation: none; border-color: var(--copper); } /* arc completes */
.winston-working .dismiss {
  background: none; border: none; padding: 0 0 0 .2em;
  color: var(--muted); font-size: 1em; line-height: 1; cursor: pointer; border-radius: 0;
}
.winston-working .dismiss:hover { color: var(--navy); background: none; }
.winston-working.compact { padding: .18em .7em .18em .22em; gap: .4em; }
.winston-working.compact .disc { width: 22px; height: 22px; border-width: 2px; }
.winston-working.compact .disc::after { inset: -2px; border-width: 2px; }
.winston-working.compact .status { font-size: .7em; }
#jobs-live .winston-working { margin-bottom: .8em; }
#work-chip { margin-left: auto; align-self: center; }

/* ---------- Trends chart ---------- */

#t-chart svg { width: 100%; height: auto; display: block; }
.t-trend-ctl {
  display: inline-flex; align-items: center; gap: .45em; cursor: pointer;
  font-family: var(--font-body); font-weight: 400; font-size: 1.28em;
  text-transform: none; letter-spacing: 0; color: var(--ink); padding: .32em 0;
}
.t-trend-ctl input { accent-color: var(--copper); margin: 0; }
#t-chart .tick { font-family: var(--font-body); font-size: 11px; fill: var(--muted); }
#t-chart .std-label { font-family: var(--font-head); font-weight: 700; font-size: 11px; fill: var(--copper-dark); }
#t-chart .trend-pt { cursor: pointer; }
#t-chart .trend-pt:hover { stroke: #fff; stroke-width: 2; }
.trend-legend { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .6em; }
.legend-item {
  display: inline-flex; align-items: center; gap: .45em;
  background: var(--cream); border: 1px solid var(--line); border-radius: 999px;
  color: var(--navy); font-size: .8em; padding: .22em .8em;
}
.legend-item .swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legend-item.off { opacity: .4; }
.legend-item:hover { background: var(--cream); border-color: var(--navy); }
#t-note { font-size: .85em; margin-top: .5em; }
.drill-list { margin: .4em 0 0; padding-left: 1.2em; }
.drill-list a { color: var(--copper-dark); }
#t-drill { margin-top: .8em; border-top: 1px solid var(--line); padding-top: .7em; }

/* ---------- Winston empty states: guidance, never decoration ---------- */

.winston-empty { text-align: center; padding: 2.4em 1em; }
.winston-empty img { height: 110px; display: block; margin: 0 auto .9em; }
.winston-empty p { color: var(--muted); margin: 0; }

/* ---------- login ---------- */

/* ---------- Embedded mode (?embedded=1): FloorWise OS provides the chrome.
   Own header (logo, hero, digest/logout buttons) hides; the functional tab
   row stays, with Weekly digest relocated into it. Display-only. ---------- */

#digest-btn-embed { display: none; }
html.embedded .topbar,
html.embedded .app-hero { display: none; }
html.embedded #digest-btn-embed { display: block; margin-left: auto; }
html.embedded .masthead { padding-top: .3em; }
html.embedded .login-card .winston { display: none; }
html.embedded .login-body { min-height: 60vh; }

.login-body { display: grid; place-items: center; min-height: 100vh; background: var(--cream); }
.login-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(31, 54, 84, .1);
  padding: 2.2em 2.6em;
  display: flex;
  flex-direction: column;
  gap: .9em;
  width: 340px;
  text-align: center;
  align-items: center;
}
.login-card .brand { justify-content: center; }
.login-card .winston { height: 120px; margin: .4em 0 0; }
.login-card input { width: 100%; }
.login-card button { width: 100%; }
.login-tagline { color: var(--muted); margin: 0; font-size: .95em; }