/* Job Note Optimizer: shared AV Tools palette, mobile-first. */
:root {
  --teal: #006e90;        /* primary: buttons, links */
  --plum: #8a4f7d;        /* secondary: header, accents */
  --taupe: #6e6469;       /* dark neutral: secondary text */
  --lavender: #a3a5c3;    /* light neutral: borders */
  --gold: #eab464;        /* warning */
  --vermilion: #db5a42;   /* error */
  --green: #3d8b5a;       /* success */

  --bg: #f6f6f9;
  --surface: #ffffff;
  --ink: #1f1d1e;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}

a { color: var(--teal); }

/* Header */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 16px;
  background: var(--plum);
  color: #fff;
}
.topbar a { color: #fff; text-decoration: none; }
.brand { font-weight: 700; }
.topbar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 15px; }
.topbar form { margin: 0; }
.link-button {
  background: none; border: 0; padding: 0; color: #fff;
  font: inherit; text-decoration: underline; cursor: pointer;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

h1 { font-size: 1.5rem; margin: 0 0 16px; }
h2 { font-size: 1.15rem; margin: 28px 0 12px; }
.muted { color: var(--taupe); }

.card {
  background: var(--surface);
  border: 1px solid var(--lavender);
  border-radius: var(--radius);
  padding: 20px 16px;
}

/* Forms: 16px text stops iPhone Safari from zooming in on focus; 48px tap targets. */
.field { margin-bottom: 16px; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
input[type="text"], input[type="password"], input[type="search"] {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid var(--lavender);
  border-radius: 8px;
  background: #fff;
}
input:focus { outline: 3px solid rgba(0, 110, 144, 0.3); border-color: var(--teal); }
.check { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.check input { width: 22px; height: 22px; accent-color: var(--teal); }
.field-error { color: var(--vermilion); font-size: 14px; margin: 6px 0 0; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--teal);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.button.full { width: 100%; }
.button.small { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.button.secondary { background: var(--taupe); }

/* Messages: always an icon/word plus colour, never colour alone. */
.flash {
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  border-left: 5px solid var(--teal);
  background: #e8f2f6;
}
.flash.error { border-color: var(--vermilion); background: #fbece9; }
.flash.success { border-color: var(--green); background: #eaf4ee; }

/* User list */
.user-list { list-style: none; padding: 0; margin: 0; }
.user-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #e3e3ec;
}
.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  color: #fff;
  background: var(--plum);
}
.badge.off { background: var(--taupe); }

/* ---------- Phase 3: notes ---------- */
.small { font-size: 14px; }
h3 { font-size: 1rem; margin: 0 0 8px; color: var(--plum); }

input[type="date"], textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;
  border: 1px solid var(--lavender);
  border-radius: 8px;
  background: #fff;
}
textarea { min-height: 260px; resize: vertical; line-height: 1.45; }
textarea:focus, input[type="date"]:focus {
  outline: 3px solid rgba(0, 110, 144, 0.3);
  border-color: var(--teal);
}
.hint { margin: -8px 0 16px; }
.two-col { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 420px) { .two-col { grid-template-columns: 1fr 1fr; } }

.page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}
.page-head h1 { margin: 0; }
a.button { text-decoration: none; }
.button.danger { background: var(--vermilion); }
.back { display: inline-block; margin-bottom: 10px; text-decoration: none; }

/* My notes / Everyone switch */
.segmented {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--lavender); border-radius: 10px; overflow: hidden;
  margin-bottom: 16px; background: var(--surface);
}
.segmented a {
  padding: 10px; text-align: center; text-decoration: none; color: var(--taupe);
  font-weight: 600;
}
.segmented a[aria-current="page"] { background: var(--teal); color: #fff; }

/* Note list */
.note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.note-card {
  display: block; padding: 14px 16px; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--lavender); border-radius: var(--radius);
}
.note-card:active { background: #eef3f6; }
.note-card-top { display: flex; justify-content: space-between; gap: 12px; }
.preview { margin: 6px 0 0; color: #3b3739; overflow-wrap: anywhere; }
.empty { text-align: center; }
.pager {
  display: flex; justify-content: space-between; align-items: center; margin-top: 16px;
}

/* Note page */
.meta { display: grid; gap: 8px; margin: 0; }
.meta div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.meta dt { color: var(--taupe); }
.meta dd { margin: 0; overflow-wrap: anywhere; }
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.section { margin-bottom: 10px; }
.actions { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.actions form { margin: 0; }

/* Restored-draft banner */
.notice {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 16px; border-radius: 8px;
  background: #fbf3e4; border-left: 5px solid var(--gold);
}
.notice[hidden] { display: none; }
.link-button.dark { color: var(--teal); }

/* ---------- Organizations, roles and review ---------- */
form.inline { display: inline; margin: 0; }
.button.success { background: var(--green); }
.button.small.secondary, a.button.small.secondary { background: #fff; color: var(--ink); border: 1px solid var(--lavender); }

.segmented.three { grid-template-columns: 1fr 1fr 1fr; }
.count {
  display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--gold); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 22px;
  text-align: center;
}

/* Note status: icon + words + colour */
.status {
  display: inline-block; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.status-approved { background: #e3f1e8; color: #23573a; }
.status-pending { background: #fbf0dc; color: #6b4a12; }
.status-rejected { background: #fbe7e3; color: #8d2f1f; }
.status-row { margin: -6px 0 16px; }
.badge-row { margin-top: 8px; }
.review-reason strong { display: block; margin-bottom: 4px; }
.review-reason p { margin: 8px 0 0; }

.review { margin-bottom: 16px; border-color: var(--gold); border-width: 2px; }
.actions.tight { margin: 0 0 14px; }
.changes label { font-weight: 600; }
.changes textarea { min-height: 90px; margin-bottom: 10px; }

/* Members and console lists */
.user-list li.stack { flex-direction: column; align-items: stretch; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.invite { display: flex; align-items: center; gap: 12px; margin: 8px 0 10px; }
.invite code {
  font-size: 22px; letter-spacing: 2px; font-weight: 700; padding: 6px 12px;
  background: #f1f1f6; border-radius: 8px;
}
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid #e3e3ec; }
.activity li:last-child { border-bottom: 0; }
.org-card { display: grid; gap: 6px; }
.stats { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.console-note { margin-top: -8px; }

/* ---------- Report formats, work time and lunch ---------- */
input[type="time"], select {
  width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 16px;
  border: 1px solid var(--lavender); border-radius: 8px; background: #fff;
}
input[type="number"] {
  width: 100%; min-height: 48px; padding: 10px 12px; font-size: 16px;
  border: 1px solid var(--lavender); border-radius: 8px;
}
fieldset.lunch {
  border: 2px solid var(--gold); border-radius: 10px; padding: 12px 14px 4px; margin: 0 0 16px;
}
fieldset.lunch[hidden], #lunch-length[hidden] { display: none; }
fieldset.lunch legend { font-weight: 700; padding: 0 6px; }
fieldset.lunch p { margin: 0 0 10px; }
.choice-row { display: flex; gap: 12px; margin-bottom: 12px; }
.choice {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border: 1px solid var(--lavender); border-radius: 8px; font-weight: 600;
  margin: 0; cursor: pointer;
}
.choice input { width: 20px; height: 20px; accent-color: var(--teal); }
.choice:has(input:checked) { border-color: var(--teal); background: #e8f2f6; }
.hours { margin: -6px 0 16px; font-weight: 600; color: var(--plum); }
.hours:empty { display: none; }

.section-list { margin: 8px 0 12px; padding-left: 22px; }
.section-list li { margin: 2px 0; }
.format-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.link-card { display: grid; gap: 4px; text-decoration: none; color: var(--ink); margin-bottom: 8px; }
.format-pick { display: grid; gap: 4px; margin: 4px 0 6px; max-width: 320px; }
.format-pick label { margin: 0; color: var(--taupe); font-weight: 600; }
.format-pick select { min-height: 40px; padding: 6px 10px; font-size: 15px; }
.hint-above { margin: -10px 0 14px; }

/* ---------- Crews and comparison ---------- */
fieldset.crew {
  border: 2px solid var(--lavender); border-radius: 10px; padding: 12px 14px 8px; margin: 0 0 16px;
}
fieldset.crew legend { font-weight: 700; padding: 0 6px; }
fieldset.crew > p { margin: 0 0 10px; }
.crew-row {
  border-top: 1px solid var(--lavender); padding-top: 12px; margin-top: 4px;
}
.crew-row [data-crew-lunch][hidden] { display: none; }
.crew-row-foot { display: flex; justify-content: space-between; align-items: center; margin: -4px 0 12px; }
.link-button.danger-text { color: var(--vermilion); min-height: 40px; }
#crew-add { margin: 8px 0 12px; }
#crew-add[hidden] { display: none; }
.crew-list { list-style: none; margin: 0; padding: 0; }
.crew-list li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid #ececf2; }
.crew-list li:first-child { border-top: 0; }
.crew-list .total { font-weight: 700; }
.flag { color: #8a5a00; background: #fdf3e2; border-left: 4px solid var(--gold); padding: 8px 10px; border-radius: 6px; margin: 6px 0; }
.flag.bad { color: #8f2c1b; background: #fbe9e5; border-left-color: var(--vermilion); }
.ok-text { color: var(--green); font-weight: 600; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare-table th, .compare-table td { text-align: left; padding: 8px 6px; border-top: 1px solid #ececf2; vertical-align: top; }
.compare-table th { font-size: 13px; color: var(--taupe); border-top: 0; }
.table-scroll { overflow-x: auto; }
fieldset.plain { border: 0; padding: 0; margin: 0 0 8px; }
fieldset.plain legend { font-weight: 700; margin-bottom: 8px; }
fieldset.plain .check { min-height: 40px; }
.card.spaced { margin-bottom: 12px; }

/* ---------- AI settings ---------- */
.provider-option {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px; margin: 0 0 8px;
  border: 1px solid var(--lavender); border-radius: 8px; font-weight: 400; cursor: pointer;
}
.provider-option input { width: 22px; height: 22px; margin-top: 1px; flex: none; accent-color: var(--teal); }
.provider-option span { display: grid; gap: 2px; }
.provider-option:has(input:checked) { border-color: var(--teal); background: #e8f2f6; }
.check-list { list-style: none; margin: 0 0 12px; padding: 0; }
.check-list li { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.check-list input { width: 22px; height: 22px; accent-color: var(--teal); }
.check-list label { margin: 0; font-weight: 400; }
.in-use p { margin: 0 0 8px; }
input[type="password"], input[type="url"] { font-size: 16px; }

/* ---------- Report ---------- */
.raw-notes summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.raw-notes .prewrap { margin-top: 10px; }
.questions label { font-weight: 600; }
.made-with { margin: -4px 0 12px; }
.qa dt { font-weight: 600; margin-top: 8px; }
.qa dd { margin: 2px 0 0; }
textarea.short { min-height: 64px; }
.two-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 420px; }
.two-picks > div { display: grid; gap: 4px; }
.two-picks label { margin: 0; color: var(--taupe); font-weight: 600; }

/* ---------- Note messages ---------- */
.thread > p:first-child { margin-top: 0; }
.message-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.message { padding: 10px 12px; border-radius: 10px; background: #f0f0f5; margin-right: 32px; }
.message.mine { background: #e8f2f6; margin: 0 0 0 32px; }
.message.changes_requested { border-left: 4px solid var(--vermilion); }
.message-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 4px; }
.message-form { display: grid; gap: 8px; }
.message-form textarea { min-height: 72px; }
.new-msg { font-size: 13px; font-weight: 600; color: var(--teal); white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.new-messages h3 { margin: 0 0 4px; } .new-messages a { font-weight: 600; }
.new-messages { margin-bottom: 14px; }
.crew-row [data-crew-guest][hidden] { display: none; }
.guest-tag { font-size: 12px; color: var(--taupe); border: 1px solid var(--lavender); border-radius: 999px; padding: 1px 8px; margin-left: 4px; white-space: nowrap; }
.contractor-edit { margin: 2px 0 8px; }
.contractor-edit summary { cursor: pointer; color: var(--teal); font-weight: 600; min-height: 32px; }
.contractor-edit form { display: grid; gap: 6px; max-width: 320px; margin-top: 6px; }
.contractor-edit input:not([type=checkbox]) { min-height: 40px; padding: 6px 10px; font-size: 16px; border: 1px solid var(--lavender); border-radius: 8px; }

/* ---------- Photos ---------- */
fieldset.photos { border: 2px solid var(--lavender); border-radius: 10px; padding: 12px 14px 8px; margin: 0 0 16px; }
fieldset.photos legend { font-weight: 700; padding: 0 6px; }
fieldset.photos > p { margin: 0 0 8px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 0 0 10px; }
.photo-grid:empty { display: none; }
.photo-grid.view { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-bottom: 16px; }
.photo-tile { display: grid; gap: 4px; margin: 0; text-decoration: none; font-weight: 400; }
.photo-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #e6e6ee; height: auto; }
.photo-tile span { display: flex; align-items: center; gap: 4px; }
.photo-pick { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; cursor: pointer; }
#photo-count.short { color: var(--vermilion); font-weight: 600; }
.badge.ok { background: #e6f2ea; color: #2c6b45; }
.message.approved { border-left: 4px solid var(--green); }
.thread.archived summary { cursor: pointer; min-height: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.thread.archived[open] summary { margin-bottom: 8px; }
.search-row { display: flex; gap: 8px; margin-bottom: 10px; }
.search-row input { flex: 1; min-height: 48px; padding: 10px 12px; font-size: 16px; border: 1px solid var(--lavender); border-radius: 8px; }
.storage-use .meter { height: 8px; background: #ececf2; border-radius: 999px; margin-top: 8px; overflow: hidden; }
.storage-use .meter span { display: block; height: 100%; background: var(--teal); }
.week .row-actions { margin-top: 8px; }
.free-space { margin-top: 8px; }
.free-space summary { cursor: pointer; color: var(--vermilion); font-weight: 600; min-height: 32px; }
.free-space form { display: grid; gap: 8px; margin-top: 6px; }
.photo-archived { font-size: 12px; color: var(--taupe); }
.storage-use { margin-bottom: 14px; }
.share-link { margin: 4px 0 8px; }
.share h2.share-title { margin: 0; }
.share h3 { margin: 16px 0 6px; }
.share input[data-subject] { width: 100%; min-height: 44px; padding: 8px 10px; font-size: 16px; border: 1px solid var(--lavender); border-radius: 8px; }
.share textarea { font-size: 15px; }
.share .row-actions { margin-top: 8px; }
.rewrite { margin-top: 12px; display: grid; gap: 4px; justify-items: start; }
p.notice.small { font-size: 14px; }
.card.share { margin-bottom: 14px; }

/* Job number belongs to a different customer (note form) */
.warn-hint { margin: -6px 0 16px; color: #8a5a00; background: #fdf3e2; border-left: 4px solid var(--gold); padding: 8px 10px; border-radius: 6px; font-size: 14px; }

/* Search (notes list) */
.search-panel { padding: 0; margin-bottom: 16px; }
.search-panel summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; font-weight: 600; color: var(--teal); }
.search-panel[open] summary { border-bottom: 1px solid #e6e6ee; }
.search-panel form { padding: 16px; }
.search-panel .actions { margin-top: 8px; }
.chips, .quick-ranges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--lavender); background: var(--surface); color: var(--ink); text-decoration: none; font-size: 14px; }
.chip.on, .chips .chip { border-color: var(--teal); background: #e6f1f5; color: var(--teal); font-weight: 600; }

/* Customers (org admin) */
.job-rows { list-style: none; margin: 0; padding: 0; }
.job-rows li { padding: 10px 0; border-top: 1px solid #ececf2; }
.job-rows li:first-child { border-top: 0; }
.job-row-top { display: flex; justify-content: space-between; align-items: center; min-height: 40px; }
.move-job summary { cursor: pointer; color: var(--teal); font-size: 14px; min-height: 36px; display: flex; align-items: center; }
.move-job form { display: grid; gap: 8px; margin-top: 6px; }
.move-job input { min-height: 44px; padding: 8px 10px; font-size: 16px; border: 1px solid var(--lavender); border-radius: 8px; }
.card.spaced { margin-bottom: 16px; }

/* Console tabs: 3 + 2 on a phone, one row when there's room */
.segmented.five { grid-template-columns: repeat(3, 1fr); }
.segmented.five a { border-bottom: 1px solid #ececf2; }
@media (min-width: 720px) { .segmented.five { grid-template-columns: repeat(5, 1fr); } .segmented.five a { border-bottom: 0; } }

/* Support tickets */
.badge.ticket-open { background: var(--gold); color: var(--ink); margin-left: 0; }
.badge.ticket-answered { background: var(--teal); margin-left: 0; }
.badge.ticket-resolved { background: #e6f2ea; color: #2c6b45; margin-left: 0; }
.badge.ticket-urgent { background: var(--vermilion); }
.message.from-support { border-left: 4px solid var(--plum); }
.wrap-anywhere { overflow-wrap: anywhere; }
.status-row .muted { margin-left: 6px; }
.request { padding: 14px 16px; }
.request.handled { opacity: 0.6; }
.request form { margin-top: 8px; }

/* Notifications */
.push-status { font-weight: 600; }
.device-list { list-style: none; margin: 0 0 14px; padding: 0; }
.device-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #ececf2; }
.device-list li:first-child { border-top: 0; }
.push-nudge { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.push-nudge[hidden] { display: none; }
.push-nudge p { margin: 0; }
#push-ios ol { margin: 6px 0; padding-left: 20px; }
.push-nudge .link-button { color: var(--taupe); min-width: 32px; min-height: 32px; font-size: 18px; }
/* Anything marked hidden stays hidden, whatever its other styles. */
[hidden] { display: none !important; }
#push-ios { display: block; }
#push-panel .button { margin: 0 0 10px; }
.push-nudge { margin-bottom: 16px; }

/* Two-step sign-in */
.setup-steps { padding-left: 20px; }
.setup-steps li { margin-bottom: 16px; }
.qr { width: 200px; height: 200px; margin: 12px 0 6px; background: #fff; padding: 6px; border: 1px solid var(--lavender); border-radius: 8px; }
.qr svg { width: 100%; height: 100%; display: block; }
code.key { font-size: 15px; word-break: break-all; }
.setup-form { margin-top: 8px; }
.recovery-codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.recovery-codes code { display: block; padding: 8px; background: #f0f0f5; border-radius: 6px; text-align: center; font-size: 17px; }

/* Deleting accounts and organizations */
.danger-text { color: var(--vermilion); }
.delete-account summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.delete-account form { display: grid; gap: 6px; margin-top: 6px; }
.delete-account input { min-height: 44px; padding: 8px 10px; font-size: 16px; border: 1px solid var(--lavender); border-radius: 8px; }
.danger-zone { border-color: var(--vermilion); border-width: 2px; }

/* Console tabs: 3 + 3 on a phone, one row when there's room */
.segmented.six { grid-template-columns: repeat(3, 1fr); }
.segmented.six a { border-bottom: 1px solid #ececf2; }
@media (min-width: 760px) { .segmented.six { grid-template-columns: repeat(6, 1fr); } .segmented.six a { border-bottom: 0; } }

/* Rate the app: radios styled as stars (5 first in the markup, shown right to left) */
.star-picker { display: inline-flex; flex-direction: row-reverse; gap: 2px; margin: 4px 0 8px; }
.star-picker label { font-size: 40px; line-height: 1; color: #d6d6e2; cursor: pointer; padding: 2px; min-width: 44px; text-align: center; }
.star-picker input:checked ~ label, .star-picker label:hover, .star-picker label:hover ~ label { color: var(--gold); }
.star-picker input:focus-visible + label { outline: 3px solid rgba(0, 110, 144, 0.4); border-radius: 6px; }
.stars { color: #c98f2e; letter-spacing: 2px; }
.feedback-average { font-size: 28px; margin: 0; }
.spread { width: 100%; border-collapse: collapse; margin-top: 8px; }
.spread th { width: 56px; white-space: nowrap; text-align: left; font-weight: 600; padding: 3px 8px 3px 0; }
.spread td:nth-child(2) { width: 100%; }
.spread .bar { display: block; height: 12px; background: var(--gold); border-radius: 6px; min-width: 2px; }
.spread td:last-child { padding-left: 8px; text-align: right; }
.feedback-item { padding: 14px 16px; }

/* "There are updates on this page" (live.js), shown when an automatic reload would lose typing. */
.live-bar {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}