/* CMO Game six-channel prototype styles. Design tokens follow the milestone-2
   contract, extended with the four new channel accents. No @import, no web
   fonts, no external assets. Laptop-first (>=1200px). */

:root {
  --ink:#1f2937; --muted:#6b7280; --bg:#f8fafc; --card:#ffffff; --line:#e2e8f0;
  --accent:#0e7c66; --bad:#b91c1c; --warn-bg:#fef3c7;
  --search:#2563eb; --social:#16a34a; --video:#d97706; --display:#9333ea; --qmax:#dc2626; --influencer:#0891b2;
  --radius:8px; --pad:16px; --maxw:1080px;
}

* { box-sizing:border-box; }
.hide { display:none; }  /* app.js toggles this to swap #alloc / #end via display, not a DOM attribute */
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:system-ui, sans-serif; color:var(--ink); background:var(--bg); line-height:1.5; }
h1,h2,h3 { margin:0 0 .5rem; line-height:1.25; }
h2 { font-size:1.15rem; }
h3 { font-size:1rem; }
p { margin:0 0 .5rem; }
p:last-child { margin-bottom:0; }
.muted { color:var(--muted); }
.bad { color:var(--bad); }
a { color:var(--accent); }
.ch-search { color:var(--search); }
.ch-social { color:var(--social); }
.ch-video { color:var(--video); }
.ch-display { color:var(--display); }
.ch-qmax { color:var(--qmax); }
.ch-influencer { color:var(--influencer); }

/* header / footer bars */
.topbar, .bottombar { background:var(--card); }
.topbar { border-bottom:1px solid var(--line); }
.bottombar { border-top:1px solid var(--line); }
.bar-inner { max-width:var(--maxw); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; flex-direction:column; }
.wordmark { font-size:1.35rem; font-weight:700; color:var(--accent); letter-spacing:-.01em; }
.tagline { font-size:.8rem; color:var(--muted); }
.status { text-align:right; }
#hdr-period { font-weight:600; }
#hdr-budget { color:var(--muted); font-size:.9rem; }

/* centered single column */
.column { max-width:var(--maxw); margin:0 auto; padding:20px;
  display:flex; flex-direction:column; gap:16px; }

/* cards */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:var(--pad); }

/* banner */
#banner { background:var(--warn-bg); border-color:#fde68a; font-size:.9rem; }

/* memo */
#memo h2 { color:var(--accent); }

/* allocation form: six channel cards in a responsive grid */
.alloc-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; border:0; margin:0; padding:0; }
.channel { border:1px solid var(--line); border-radius:var(--radius); padding:12px; margin:0; }
.channel legend { font-weight:600; padding:0 6px; }
.channel-search { border-top:3px solid var(--search); } .channel-search legend { color:var(--search); }
.channel-social { border-top:3px solid var(--social); } .channel-social legend { color:var(--social); }
.channel-video { border-top:3px solid var(--video); } .channel-video legend { color:var(--video); }
.channel-display { border-top:3px solid var(--display); } .channel-display legend { color:var(--display); }
.channel-qmax { border-top:3px solid var(--qmax); } .channel-qmax legend { color:var(--qmax); }
.channel-influencer { border-top:3px solid var(--influencer); } .channel-influencer legend { color:var(--influencer); }
.field { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0; }
.field label { font-size:.9rem; }
input.money { width:130px; text-align:right; padding:6px 8px; border:1px solid var(--line);
  border-radius:6px; font:inherit; color:var(--ink); background:var(--card); }
input.money:focus { outline:2px solid var(--accent); outline-offset:1px; }
input.money.bad { border-color:var(--bad); }
.check { display:flex; align-items:flex-start; gap:8px; font-size:.85rem; margin-top:10px; }
.check input { margin-top:3px; }

/* MMM purchase row (below the channel grid) */
.mmm-row { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.mmm-row .check { margin-top:0; font-size:.92rem; }
.mmm-row .check input:disabled + span { color:var(--muted); }
#mmm-note { margin-top:4px; font-size:.82rem; }
#mmm-note:empty { display:none; }

/* totals row */
.totals { display:flex; gap:24px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.totals > div { display:flex; flex-direction:column; }
.totals-label { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.totals-value { font-size:1.1rem; font-weight:600; }

/* errors */
#errors { margin-top:10px; color:var(--bad); font-size:.9rem; }
#errors:empty { display:none; }

/* buttons */
.btn { font:inherit; padding:8px 16px; border-radius:6px; border:1px solid transparent; cursor:pointer; }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { filter:brightness(.95); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.btn-ghost { background:transparent; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover { background:var(--bg); }
#btn-submit { margin-top:14px; }

/* dashboard tiles */
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin:10px 0; }
.tile { border:1px solid var(--line); border-radius:6px; padding:10px; }
.tile-label { font-size:.72rem; color:var(--muted); }
.tile-value { font-size:1.1rem; font-weight:600; }
.tile-sub { font-size:.72rem; color:var(--muted); margin-top:2px; }
.subhead { font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-top:6px; }
.verdict { border-left:3px solid var(--accent); background:var(--bg); padding:10px 14px;
  border-radius:0 6px 6px 0; margin:10px 0 14px; }
.verdict h3 { margin-bottom:4px; }

/* measurement minis: three per row, accented by channel */
.measure { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:10px; }
.measure .mini { border:1px solid var(--line); border-radius:6px; padding:10px; font-size:.9rem; border-left:3px solid var(--line); }
.measure .mini > div { margin-top:3px; }
.measure .measure-head { font-weight:600; margin-top:0; }
.measure .channel-search { border-left-color:var(--search); }
.measure .channel-social { border-left-color:var(--social); }
.measure .channel-video { border-left-color:var(--video); }
.measure .channel-display { border-left-color:var(--display); }
.measure .channel-qmax { border-left-color:var(--qmax); }
.measure .channel-influencer { border-left-color:var(--influencer); }

/* marketing-mix-model results block */
.mmm-measure { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.mmm-measure .measure-head { font-weight:600; }
.mmm-caption { font-size:.82rem; margin:2px 0 8px; }
.mmm-table { font-size:.85rem; }
.mmm-decay { font-size:.85rem; margin-top:6px; }

/* chart */
.chart-svg { width:100%; height:auto; }
.chart-placeholder { display:flex; align-items:center; justify-content:center; min-height:220px;
  border:1px dashed var(--line); border-radius:6px; color:var(--muted); text-align:center; padding:16px; }

/* post-submit drama: tenure line draws itself; results card fades up */
.chart-svg .draw-line { stroke-dasharray:1; stroke-dashoffset:1; animation:drawline .9s ease-out forwards; }
@keyframes drawline { to { stroke-dashoffset:0; } }
.reveal { animation:fadeup .5s ease-out; }
@keyframes fadeup { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .chart-svg .draw-line { animation:none; stroke-dashoffset:0; }
  .reveal { animation:none; }
}

/* notebook filters */
.filters { display:flex; gap:16px; margin-bottom:10px; flex-wrap:wrap; }
.filters label { display:flex; flex-direction:column; font-size:.78rem; color:var(--muted); gap:4px; }
.filters select { font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:6px;
  color:var(--ink); background:var(--card); }

/* tables */
.table-wrap { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; font-size:.9rem; }
table.data th, table.data td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
table.data th { color:var(--muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.02em; }
table.data .num { text-align:right; font-variant-numeric:tabular-nums; }
table.data tfoot td { font-weight:600; border-bottom:0; border-top:2px solid var(--line); }

/* new-game dialog */
dialog#newgame-dialog { border:1px solid var(--line); border-radius:var(--radius); padding:20px;
  max-width:380px; width:calc(100% - 32px); color:var(--ink); background:var(--card); }
dialog#newgame-dialog::backdrop { background:rgba(15,23,42,.4); }

/* instructions */
.linklike { background:none; border:0; padding:0; font:inherit; font-size:.85rem;
  color:var(--accent); text-decoration:underline; cursor:pointer; }
dialog#instructions-dialog { border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 24px; max-width:640px; width:calc(100% - 32px); max-height:85vh; overflow-y:auto;
  color:var(--ink); background:var(--card); }
dialog#instructions-dialog::backdrop { background:rgba(15,23,42,.4); }
.instructions h3 { margin-top:14px; font-size:.95rem; }
.instructions ul { margin:.25rem 0 .5rem; padding-left:1.2rem; }
.instructions li { margin-bottom:6px; font-size:.92rem; }
.instructions ul ul { margin:.25rem 0; }
.instructions form { margin-top:14px; display:flex; justify-content:flex-end; }
.dialog-form { display:flex; flex-direction:column; gap:8px; }
.dialog-form input { font:inherit; padding:8px; border:1px solid var(--line); border-radius:6px; width:100%; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }

/* footer */
#footer-seed { font-size:.85rem; }

/* narrower laptops: collapse the channel/measure grids to two columns */
@media (max-width: 900px) {
  .alloc-grid { grid-template-columns:repeat(2, 1fr); }
  .measure { grid-template-columns:repeat(2, 1fr); }
}

/* ---- hosted build additions (milestone 4): logo, gameplay-code gate ---- */
.brand-row { display:flex; align-items:center; gap:12px; }
.logo { height:36px; width:auto; flex:none; }
main.gated section.card:not(#gate) { display:none; }
.gate-form { display:flex; flex-direction:column; gap:6px; max-width:420px; margin-top:10px; }
.gate-form label { font-size:.85rem; color:var(--muted); margin-top:6px; }
.gate-form input { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:6px; }
.gate-form input:focus { outline:2px solid var(--accent); outline-offset:1px; }
#in-code { text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.gate-form .btn { align-self:flex-start; margin-top:10px; }
#gate-error { color:var(--bad); margin-top:10px; }
#gate-error:empty { display:none; }
.gate-wait { color:var(--muted); font-size:.9rem; margin-top:10px; }


/* Year-end score reveal. The tile scales up once as the number lands; the
   confetti is a pure-CSS burst (no library, no images) that plays once and
   leaves nothing behind. Both are disabled for anyone who has asked their
   system to reduce motion. */
.tile.score-reveal { animation: score-pop 620ms cubic-bezier(.2,1.4,.35,1) both; }
.tile.score-reveal .tile-value { font-size: 2.1rem; line-height: 1.1; }
.tile.score-reveal.celebrate { box-shadow: 0 0 0 2px #0e7c66 inset; }
@keyframes score-pop {
  0%   { transform: scale(.72); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.confetti { position: relative; height: 0; overflow: visible; pointer-events: none; }
.confetti i {
  position: absolute; top: 0; left: calc(4% + (var(--i) * 4%));
  width: 8px; height: 14px; opacity: 0; border-radius: 1px;
  background: #0e7c66;
  animation: confetti-fall 1500ms ease-in both;
  animation-delay: calc(var(--i) * 28ms);
}
.confetti i:nth-child(3n)   { background: #f59e0b; }
.confetti i:nth-child(3n+1) { background: #2563eb; }
.confetti i:nth-child(4n)   { width: 6px; height: 6px; border-radius: 50%; }
@keyframes confetti-fall {
  0%   { opacity: 1; transform: translateY(-14px) rotate(0deg); }
  100% { opacity: 0; transform: translateY(190px) rotate(540deg); }
}
@media (prefers-reduced-motion: reduce) {
  .tile.score-reveal { animation: none; }
  .confetti { display: none; }
}


/* Renewal offer at the end of a contract. */
.renewal { margin: 1rem 0; padding: 0.9rem 1rem; border: 1px solid #0e7c66; border-radius: 6px; }
.renewal h3 { margin-top: 0; }
.renewal p { margin: 0.4rem 0 0.7rem; }

/* MMM equal-split portfolio row (2026-07-27): the pot-level read. */
.mmm-table tr.mmm-portfolio td { border-top: 2px solid var(--line); }
.mmm-table tr.mmm-portfolio td:first-child { font-weight: 600; }

/* Post-game survey (2026-07-31): a two-button prompt on the end screen, with
   the questions in a modal dialog like the instructions. */
.survey .sv-row { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.survey .sv-row .check { margin: 0; }
.survey .sv-row input[type="text"] { flex: 1; min-width: 220px; }
.survey-prompt .sv-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.survey h3 { margin-top: 0; }
.survey .sv-q { margin: 0.7rem 0; }
.survey .sv-label, .survey label { display: block; margin-bottom: 0.25rem; }
.survey .check { display: inline-flex; margin-right: 1rem; }
.survey textarea, .survey input[type="text"] { font: inherit; width: 100%; max-width: 620px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; }
.survey textarea:focus, .survey input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.survey .sv-actions { margin-top: 0.7rem; display: flex; gap: 0.6rem; }