/* Levista dashboard: white cards on a pale grey canvas, a white side nav, forest green for actions (buttons, links, the
   current page). Sentiment has its own traffic-light colours and nothing else uses them: positive green, neutral yellow,
   negative red. Base text is 14px; every size is in rem, so changing html's font-size rescales the whole app. */
:root {
  color-scheme: light;
  --bg: #f5f6f4; --surface: #ffffff; --fill: #f1f3f1; --fill-hover: #e8ebe8; --hair: #e3e6e3;
  --field-line: #939a95; --label: #5f6661; --text: #18201b; --ink: #3a423d; --muted: #6b736e; --grid: #eef0ee;
  --accent: #1f473e; --accent-hover: #163a32; --accent-ink: #ffffff; --accent-soft: #e6f0ec; --ring: rgba(31, 71, 62, .2);
  --star: #f59e0b; --star-off: #dfe3df;
  --pos: #16a34a; --pos-bg: #e7f6ec; --pos-ink: #15803d;
  --neu: #eab308; --neu-bg: #fdf6d8; --neu-ink: #8a6a04;
  --neg: #dc2626; --neg-bg: #fdecec; --neg-ink: #b91c1c;
  --side: 236px;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235f6661' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0f1311; --surface: #171c19; --fill: #1f2622; --fill-hover: #27302b; --hair: #2a322d;
    --field-line: #6b746e; --label: #a9b2ac; --text: #eef1ee; --ink: #d3d9d5; --muted: #a0a9a3; --grid: #232a26;
    --accent: #8fcfb3; --accent-hover: #a6dcc4; --accent-ink: #0b1f18; --accent-soft: #1c2f27; --ring: rgba(143, 207, 179, .3);
    --star: #fbbf24; --star-off: #3a423d;
    --pos: #4ade80; --pos-bg: #15301f; --pos-ink: #86efac;
    --neu: #facc15; --neu-bg: #33290a; --neu-ink: #fde047;
    --neg: #f87171; --neg-bg: #3a1717; --neg-ink: #fca5a5;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a9b2ac' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 1rem; font-weight: 500; line-height: 1.5; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { color: var(--text); font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.45rem; margin: 0; letter-spacing: -.01em; }
main > h1 { margin-bottom: 1rem; }
h2 { font-size: 1.1rem; margin: 1.75rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 .4rem; }
.muted { color: var(--muted); font-size: .9rem; }
code { background: var(--fill); padding: .1rem .35rem; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Side nav: always open on wide screens; below 960px it slides in from the ☰ button over a dimmed page */
.side { position: fixed; inset: 0 auto 0 0; width: var(--side); display: flex; flex-direction: column; gap: .15rem; padding: 1.1rem .8rem;
  background: var(--surface); border-right: 1px solid var(--hair); overflow-y: auto; z-index: 20; transition: transform .2s ease; }
.side ~ main { margin-left: var(--side); }
.wordmark { color: var(--accent); text-decoration: none; display: flex; align-items: baseline; gap: .5rem; padding: 0 .6rem; }
.wordmark b { font-size: 1.1rem; font-weight: 700; letter-spacing: .2em; }
.wordmark span { font-size: .8rem; color: var(--muted); }
.side-label { margin: 1.4rem .6rem .35rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.side nav { display: grid; gap: .15rem; }
.side nav a, .side-foot a, .side-link { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.3rem; padding: .4rem .6rem;
  justify-content: flex-start; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.side nav a:hover, .side-foot a:hover, .side-link:hover { background: var(--fill); color: var(--text); }
.side [aria-current] { background: var(--accent-soft); color: var(--accent); }
.side [aria-current]:hover { background: var(--accent-soft); color: var(--accent); }
.ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.initial { width: 1.6rem; height: 1.6rem; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--fill); color: var(--accent); font-size: .8rem; font-weight: 700; }
[aria-current] .initial { background: var(--accent); color: var(--accent-ink); }
.count { margin-left: auto; min-width: 1.5rem; padding: 0 .45rem; border-radius: 999px; background: var(--neg-bg); color: var(--neg-ink); font-size: .72rem; text-align: center; line-height: 1.35rem; }
.side-foot { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--hair); display: grid; gap: .15rem; }
.side-foot form { margin: 0; }
.who { margin: .4rem .6rem 0; color: var(--muted); font-size: .8rem; }
.mbar { display: none; }
.scrim { position: fixed; inset: 0; background: rgba(15, 19, 17, .35); z-index: 15; }
@media (max-width: 960px) {
  .mbar { display: flex; align-items: center; gap: .5rem; position: sticky; top: 0; z-index: 10; padding: .5rem .75rem; background: var(--surface); border-bottom: 1px solid var(--hair); }
  .mbar .wordmark { padding: 0; }
  .menu { min-height: 2.3rem; width: 2.3rem; padding: 0; border-color: var(--hair); }
  .menu .ico { width: 18px; height: 18px; }
  .side { transform: translateX(-100%); }
  .nav-open .side { transform: none; box-shadow: 0 10px 40px rgba(15, 19, 17, .2); }
  .side ~ main { margin-left: 0; }
}
main { margin: 0 auto; padding: 1.5rem clamp(1rem, 3vw, 2.25rem) 4rem; max-width: calc(1240px + var(--side)); }

.strip { margin: 0 0 1rem; padding: .45rem .9rem; border-radius: 10px; background: var(--neu-bg); color: var(--neu-ink); font-size: .85rem; }
.flash { padding: .65rem .9rem; border-radius: 10px; margin: 0 0 1rem; }
.flash.success { background: var(--pos-bg); color: var(--pos-ink); }
.flash.error { background: var(--neg-bg); color: var(--neg-ink); border-left: 3px solid var(--neg); }
.note { background: var(--surface); border: 1px solid var(--hair); padding: .65rem .9rem; border-radius: 10px; font-size: .9rem; }
.bad { color: var(--neg-ink); }

/* Buttons: green fill = the main action; white with a grey edge = everything else */
button, .button { font: inherit; font-weight: 600; min-height: 2.3rem; padding: .35rem .95rem; border-radius: 8px; border: 1px solid var(--field-line);
  background: var(--surface); color: var(--accent); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  line-height: 1.2; transition: background-color .12s, border-color .12s, color .12s; }
button:hover, .button:hover { background: var(--fill); border-color: var(--accent); }
button:active, .button:active { transform: translateY(1px); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.link { min-height: 0; border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; }
button.link:hover { background: none; text-decoration: underline; }
button.danger { color: var(--neg-ink); border-color: var(--hair); }
button.danger:hover { background: var(--neg-bg); border-color: var(--neg); }
button.link.danger:hover { background: none; }
button:disabled { opacity: .6; cursor: progress; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Fields: the grey edge is 3:1 on white, so the box stays visible; green edge and halo when active */
input, select, textarea { font: inherit; font-weight: 500; color: var(--text); background: var(--surface); border: 1px solid var(--field-line); border-radius: 8px;
  padding: .4rem .7rem; width: 100%; transition: border-color .12s, box-shadow .12s; }
input:not([type=checkbox]), select { height: 2.3rem; }
select { appearance: none; padding-right: 2rem; background-image: var(--chevron); background-repeat: no-repeat; background-position: right .7rem center; background-size: .65rem; cursor: pointer; }
textarea { resize: vertical; line-height: 1.5; padding: .55rem .7rem; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:hover, select:hover, textarea:hover { border-color: var(--label); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
input[type=checkbox] { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
label { display: block; font-size: .8rem; color: var(--label); font-weight: 600; }
label > input, label > select, label > textarea { margin-top: .3rem; }
label.check { display: flex; align-items: center; gap: .45rem; color: var(--text); font-weight: 500; cursor: pointer; }

/* Page header */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.eyebrow { margin: 0 0 .15rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.meta { margin: .35rem 0 0; color: var(--muted); font-size: .85rem; display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; }
.page-head form { margin: 0; }

/* Cards */
.card, .panel, .charts figure, .table-wrap, .report, .kpis > div, .filters, .says section { background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; }

/* Overview: KPI tiles, the sentiment split, charts */
.kpis { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: .9rem; } /* flex, not grid: every row fills edge to edge */
.kpis > div { flex: 1 1 140px; padding: .8rem 1rem; }
.kpis > .mood { flex: 2 1 300px; }
.kpis > div > span { display: block; color: var(--muted); font-size: .8rem; font-weight: 600; }
.kpis strong { display: block; margin-top: .15rem; font-size: 1.55rem; font-weight: 600; color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpis strong small { font-size: 1rem; color: var(--star); }
.split { display: flex; height: .6rem; margin: .65rem 0 .5rem; border-radius: 999px; overflow: hidden; background: var(--fill); }
.split i { display: block; }
.split .positive { background: var(--pos); }
.split .neutral { background: var(--neu); }
.split .negative { background: var(--neg); }
.legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0; font-size: .8rem; color: var(--ink); }
.legend > span { display: inline-flex; align-items: center; gap: .35rem; }
/* What customers say: top topics per feeling, each a link to those reviews */
.says { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .7rem; margin-bottom: .9rem; }
.says section { padding: .8rem .9rem; border-top: 3px solid var(--hair); }
.says .positive { border-top-color: var(--pos); }
.says .neutral { border-top-color: var(--neu); }
.says .negative { border-top-color: var(--neg); }
.says h2 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .45rem; font-size: .9rem; }
.says a { display: grid; grid-template-columns: 6.5rem 1fr 3rem; align-items: center; gap: .6rem; padding: .3rem .45rem; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: .85rem; }
.says a:hover { background: var(--fill); color: var(--text); }
.says i { display: block; height: .45rem; min-width: 3px; border-radius: 999px; }
.says .positive i { background: var(--pos); }
.says .neutral i { background: var(--neu); }
.says .negative i { background: var(--neg); }
.says b { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: .7rem; }
.charts figure { margin: 0; padding: .85rem 1rem; }
.charts figcaption { font-weight: 600; font-size: .9rem; color: var(--text); margin-bottom: .5rem; }
.charts figcaption small { font-weight: 500; color: var(--muted); margin-left: .35rem; }
.chart { position: relative; height: 230px; }

/* Stars, chips, sentiment dots */
.stars { color: var(--star); letter-spacing: 1px; white-space: nowrap; }
.stars .off { color: var(--star-off); }
.chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; padding: .1rem .55rem; border-radius: 999px; background: var(--fill); color: var(--ink); white-space: nowrap; }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted); flex: none; }
.chip.positive, .chip.status-replied { background: var(--pos-bg); color: var(--pos-ink); }
.chip.neutral { background: var(--neu-bg); color: var(--neu-ink); }
.chip.negative { background: var(--neg-bg); color: var(--neg-ink); }
.chip.status-approved, .chip.status-auto, .chip.auto { background: var(--accent-soft); color: var(--accent); }
.dot.positive, .positive > .dot { background: var(--pos); }
.dot.neutral, .neutral > .dot { background: var(--neu); }
.dot.negative, .negative > .dot { background: var(--neg); }
.tags { display: flex; flex-wrap: wrap; gap: .3rem; }

/* Inbox: the left edge shows the sentiment */
.card { padding: .95rem 1.1rem; margin-bottom: .65rem; border-left: 3px solid var(--hair); }
.card.positive { border-left-color: var(--pos); }
.card.neutral { border-left-color: var(--neu); }
.card.negative { border-left-color: var(--neg); }
.card header { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.avatar { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--fill); color: var(--accent); display: grid; place-items: center; font-weight: 700; flex: none; }
.who-line { display: flex; flex-direction: column; line-height: 1.3; margin-right: auto; }
.who-line strong { color: var(--text); }
.review { margin: .6rem 0 .85rem; white-space: pre-wrap; color: var(--text); max-width: 80ch; }
.card textarea { field-sizing: content; min-height: 4.5lh; }
.card footer { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.approve { min-height: 2.1rem; padding: .25rem .85rem .25rem .7rem; border: 1px solid var(--field-line); border-radius: 8px; transition: background-color .12s, border-color .12s; }
.approve:hover { background: var(--fill); }
.approve:has(input:checked) { background: var(--pos-bg); border-color: var(--pos); color: var(--pos-ink); font-weight: 600; }
.actions { display: flex; gap: .5rem; align-items: center; position: sticky; bottom: 1rem; margin-top: 1rem; padding: .5rem .5rem .5rem 1.1rem;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; box-shadow: 0 10px 30px rgba(15, 19, 17, .12); } /* it floats over the cards, so it alone casts a shadow */
.actions .muted { margin-right: auto; }
@media (max-width: 480px) { .actions .muted { display: none; } .actions { justify-content: flex-end; } }

/* All reviews: filter bar, a table whose header stays put while it scrolls, pages of 50 */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; padding: .75rem .85rem; margin-bottom: .7rem; }
.filters label { flex: 1 1 120px; }
.filters .search { flex: 2 1 220px; }
.table-wrap { overflow: auto; max-height: calc(100vh - 15rem); min-height: 12rem; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
th { position: sticky; top: 0; z-index: 1; background: var(--fill); color: var(--muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--fill) 55%, transparent); }
td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
td:nth-child(3) { color: var(--text); font-weight: 600; min-width: 8rem; }
td .tags { min-width: 7rem; }
.clamp { min-width: 15rem; max-width: 28rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; cursor: pointer; border-radius: 4px; }
.clamp:focus { display: block; outline-offset: 4px; }
.presets { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: .3rem; }
.chip-link { padding: .25rem .75rem; border-radius: 999px; background: var(--fill); color: var(--ink); font-size: .8rem; font-weight: 600; text-decoration: none; }
.chip-link:hover { background: var(--fill-hover); color: var(--text); }
.chip-link[aria-current] { background: var(--accent); color: var(--accent-ink); }
.shown { margin: -.2rem 0 .7rem; }
.pager { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
.pager .muted { margin-right: auto; }

.report { max-width: 80ch; padding: .25rem 1.5rem 1.1rem; line-height: 1.65; }

/* Sign in */
.login { max-width: 380px; margin: 10vh auto; padding: 1.75rem; }
.login .wordmark { justify-content: center; margin-bottom: 1rem; }
.login h1 { font-size: 1.25rem; text-align: center; margin-bottom: .25rem; }
.login > .muted { text-align: center; }
.button.google { display: flex; width: 100%; margin-top: 1.1rem; }
.or { text-align: center; margin: .9rem 0; }
.login form, .panel form { display: grid; gap: .75rem; }
.login form { margin-top: .9rem; }
.login form > button { width: 100%; }

/* Settings */
.panel form > button { justify-self: start; }
.panel form + form { margin-top: .5rem; }
.grid2 { align-items: end; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.panel { margin-bottom: .8rem; padding: 1.1rem 1.2rem; }
.panel h2:first-child, .panel h3:first-child { margin-top: 0; }
.panel .table-wrap { max-height: none; min-height: 0; }
fieldset { border: 0; padding: 0; margin: 0; }
.secret { font-family: ui-monospace, Consolas, monospace; background: var(--fill); padding: .1rem .4rem; border-radius: 6px; user-select: all; }