/* Concept C: The Decision Studio. A working surface: week columns, lane labels, mono week numbers, chips coloured by kind of event
   (staff yellow, tax blue, price green, closures hatched, planned purple, a trial teal), the week in focus in yellow, the forecast's edge
   drawn where it is. Decisions sit below as questions, each tried on the board first. */
.c-page { max-width: 1320px; display: grid; gap: 18px; }
.c-h2 { margin: 0; font: 400 25px/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--green); }
.c-h3 { margin: 6px 0 2px; font: 700 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.c-sub { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.c-kick { margin: 0; font: 700 10.5px/1.25 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.c-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); color: var(--green); font: 700 11.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; cursor: pointer; white-space: nowrap; }
.c-btn.primary { background: var(--green); color: #fff; border-color: var(--green); }
@media (hover: hover) { .c-btn:hover { border-color: var(--green); } .c-btn.primary:hover { background: var(--green-2); } }
.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.dot.restaurant { background: var(--ch-restaurant); } .dot.takeaway { background: var(--ch-takeaway); } .dot.collection { background: var(--ch-collection); }

/* where we stand */
.c-stand { display: grid; gap: 8px; }
.c-stand-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); overflow: hidden; }
.c-read { display: grid; align-content: start; gap: 2px; min-height: 92px; padding: 12px 16px 12px 18px; border: 0; border-left: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; position: relative; }
.c-read:first-child { border-left: 0; }
.c-read::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--faint); }
.c-read.good::before { background: var(--pos); } .c-read.watch::before { background: #C98A0B; } .c-read.concern::before, .c-read.critical::before { background: var(--neg); }
.c-read.on { background: rgba(253,195,8,.14); }
@media (hover: hover) { .c-read:hover { background: var(--soft); } }
.c-read-k { font: 700 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.c-read-big { font: 650 28px/1.15 var(--font); letter-spacing: -.02em; color: var(--ink); }
.c-read-big .arrow { color: var(--faint); font-weight: 400; }
.t-loss, .pf.loss { color: #a2271d; } .t-thin, .pf.thin { color: #7a5200; } .t-covers { color: var(--ink); }
.c-read-sub { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.c-changed { margin: 0; color: var(--muted); font-size: 13px; } .c-changed b { color: var(--ink); font-weight: 600; }
.c-next { margin: -4px 0 0; font-size: 14px; line-height: 1.4; } .c-next b { font-weight: 600; }
.c-next { padding: 6px 0; line-height: 1.5; } .c-next a { color: var(--green); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .c-next a span { white-space: nowrap; }
@media (hover: hover) { .c-next a:hover { text-decoration-thickness: 2px; } }
.skel-wrap .c-read { cursor: default; }

/* the board */
.c-board { background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; padding: 14px 0 10px; container-type: inline-size; }
.c-board-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; padding: 0 16px 10px; }
.c-switches { display: flex; flex-wrap: wrap; gap: 8px; }
.c-tog { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 11px; background: var(--soft); }
.c-tog-l { padding: 0 8px 0 6px; font: 700 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.c-tog button { min-height: 36px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: 600 12.5px/1 var(--font); cursor: pointer; white-space: nowrap; }
.c-tog button[aria-checked="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(6,79,43,.14), 0 0 0 1px rgba(6,79,43,.08); }
@media (pointer: coarse) { .c-tog button { min-height: 44px; } }
.c-scroller { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.c-grid { display: grid; grid-template-columns: var(--label, 118px) repeat(13, var(--col, 64px)); width: max-content; }
.c-label { position: sticky; left: 0; z-index: 2; display: grid; align-content: center; gap: 1px; padding: 6px 10px 6px 16px; background: var(--card); border-top: 1px solid var(--line); box-shadow: 1px 0 0 var(--line); }
.c-label b { font: 700 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.c-label span { font-size: 11.5px; line-height: 1.25; color: var(--muted); }
.c-corner { position: sticky; left: 0; z-index: 2; background: var(--card); box-shadow: 1px 0 0 var(--line); }
.c-cell { border-top: 1px solid var(--line); border-left: 1px solid rgba(6,79,43,.06); min-width: 0; }
.c-cell.sel, .c-wk.sel { background: rgba(253,195,8,.13); }
.c-wk { display: grid; justify-items: center; align-content: center; gap: 0; min-height: 52px; padding: 4px 2px; border: 0; border-left: 1px solid rgba(6,79,43,.06); background: transparent; cursor: pointer; }
.c-wk-n { font: 700 10px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.c-wk-d { font: 650 13.5px/1.2 var(--font); color: var(--ink); }
.c-wk-s { font-size: 10.5px; color: var(--muted); min-height: 13px; }
.c-wk.now .c-wk-n { color: var(--green); }
.c-wk.sel { box-shadow: inset 0 3px 0 var(--yellow); }
.c-wk:focus-visible { outline-offset: -3px; }
.c-ev { display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 6px 4px; min-height: 64px; cursor: pointer; }
.chip { display: block; padding: 3px 5px 3px 6px; border-radius: 5px; border-left: 3px solid var(--faint); background: var(--soft); font: 600 10.5px/1.25 var(--font); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.staff { border-left-color: var(--yellow); background: var(--yellow-soft); }
.chip.price { border-left-color: var(--green-3); background: var(--pos-bg); }
.chip.closed { border-left-color: var(--ink); background: repeating-linear-gradient(45deg, rgba(23,38,29,.08) 0 4px, transparent 4px 8px); }
.chip.hours { border-left-color: var(--faint); }
.chip.pay { border-left-color: var(--cat-tax); background: rgba(23,71,184,.08); }
.chip.planned { border-left-color: var(--purple); background: rgba(143,41,152,.07); border-style: dashed; }
.chip.trial { border-left-color: var(--cat-planned); background: rgba(14,124,134,.12); }
.chip.more { background: transparent; border-left-color: transparent; color: var(--muted); }
.c-span { border-top: 1px solid var(--line); }
.c-span svg { display: block; overflow: visible; }
.c-lane-sales .bar.fc { fill: rgba(6,79,43,.62); } .c-lane-sales .bar.usual { fill: rgba(6,79,43,.24); }
.c-lane-sales .b-restaurant { fill: var(--ch-restaurant); } .c-lane-sales .b-takeaway { fill: var(--ch-takeaway); } .c-lane-sales .b-collection { fill: var(--ch-collection); }
.c-lane-sales .rng { stroke: var(--ink); stroke-width: 1.3; opacity: .5; }
.c-lane-sales .v { font: 600 10.5px var(--font); fill: var(--muted); text-anchor: middle; }
.c-lane-sales .hz, .c-lane-cash .today { stroke: var(--ink); stroke-dasharray: 3 3; opacity: .45; }
.c-lane-sales .hz-t, .c-lane-cash .today-t { font: 700 9.5px var(--mono); text-transform: uppercase; letter-spacing: .04em; fill: var(--muted); }
.c-span .sel-col { fill: rgba(253,195,8,.13); }
.c-pf { display: grid; place-items: center; min-height: 44px; cursor: pointer; }
.pf { font: 700 14px/1 var(--font); } .pf.covers { color: var(--pos); }
.c-pf-none { display: flex; align-items: center; padding: 6px 12px; color: var(--muted); font-size: 12px; line-height: 1.35; background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(23,38,29,.025) 6px 12px); }
.c-lane-cash .grid { stroke: rgba(6,79,43,.08); } .c-lane-cash .tick { font: 500 10.5px var(--font); fill: var(--faint); }
.c-lane-cash .act { fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linejoin: round; }
.c-lane-cash .act.lowered { stroke: var(--cmp-ink); stroke-width: 2.4; }
.c-lane-cash .low { fill: none; stroke: var(--cmp); stroke-width: 1.6; stroke-dasharray: 4 4; }
.c-lane-cash .base { fill: none; stroke: var(--green); stroke-width: 1.5; opacity: .3; }
.c-lane-cash .min { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 6 4; opacity: .55; }
.c-lane-cash .under { fill: rgba(176,32,32,.06); }
.c-lane-cash .lowpt { fill: var(--card); stroke: var(--ink); stroke-width: 2.4; }
.c-lane-cash .lowpt-t { font: 700 11px var(--font); fill: var(--ink); text-anchor: end; }
.c-lane-cash .tip-l { stroke: var(--yellow); stroke-width: 2; } .c-lane-cash .tip-d { fill: var(--card); stroke: var(--ink); stroke-width: 2; }
.c-lane-cash .tip-bg { fill: var(--ink); } .c-lane-cash .tip-t { font: 650 11.5px var(--font); fill: #fff; }
.c-span svg:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.c-grid[data-lane="cash"] .c-label-cash, .c-grid[data-lane="profit"] .c-label-profit, .c-grid[data-lane="sales"] .c-label-sales { box-shadow: inset 4px 0 0 var(--yellow), 1px 0 0 var(--line); }
.c-legend { margin: 8px 16px 0; color: var(--muted); font-size: 12px; }
.lg { display: inline-block; width: 16px; height: 0; vertical-align: 3px; border-top: 2.2px solid var(--green); margin-left: 6px; }
.lg.low { border-top: 2px dashed var(--cmp); } .lg.min { border-top: 1.4px dashed var(--ink); } .lg.hz { height: 10px; border: 0; vertical-align: -1px; background: repeating-linear-gradient(45deg, rgba(23,38,29,.2) 0 2px, transparent 2px 5px); }
.c-board-skel { height: 420px; border-radius: 16px; }

/* the scenario being tried */
.c-dock { margin: 0 16px 12px; padding: 12px 14px; border-radius: 12px; background: rgba(14,124,134,.07); border: 1px solid rgba(14,124,134,.28); display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.c-dock-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.c-dock-head .c-kick { flex-basis: 100%; color: #0b5f66; }
.c-dock-head h3 { flex: 1; margin: 0; font: 650 17px/1.3 var(--font); color: var(--ink); } .c-dock-head h3:focus { outline: none; }
.c-dock p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.c-hint { color: var(--muted); font-size: 13px !important; }
.c-dock-figs { display: flex; flex-wrap: wrap; gap: 8px 22px; } .c-dock-figs div { display: flex; align-items: center; gap: 8px; } .c-dock-figs b { font-size: 18px; } .c-dock-figs span { color: var(--muted); font-size: 13px; }
.c-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.c-form label { display: grid; gap: 4px; font: 700 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.c-form input, .c-form select { min-height: 44px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); font: 400 16px/1.2 var(--font); color: var(--ink); }
.c-form input { width: 120px; }
.c-form label { min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr); } .c-form select { max-width: 100%; }
.c-verdict { padding: 8px 10px; border-radius: 8px; background: var(--soft); } .c-verdict.ok { background: var(--pos-bg); } .c-verdict.watch { background: var(--warn-bg); } .c-verdict.bad { background: var(--neg-bg); }

/* the week in focus */
.c-insp { background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; padding: 14px 16px 16px; }
.c-insp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.c-insp-head > div { flex: 1; }
.c-nav { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--card); font-size: 22px; line-height: 1; color: var(--green); cursor: pointer; }
.c-nav:disabled { opacity: .35; cursor: default; }
.c-insp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@container (max-width: 1px) { .c-insp-grid { display: block; } }
.c-panel { display: grid; align-content: start; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--soft); min-width: 0; }
.c-panel h3 { margin: 0; font: 700 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.c-fig { margin: 0; font: 650 26px/1.1 var(--font); letter-spacing: -.02em; color: var(--ink); } .c-fig small { font: 400 13px var(--font); letter-spacing: 0; color: var(--muted); }
.c-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); } .c-note.big { font-size: 14px; }
.c-chs { display: grid; gap: 4px; margin-top: 4px; } .c-ch { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; font-size: 13.5px; }
.c-evs { list-style: none; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 13px; }
.c-evs li { display: grid; grid-template-columns: 74px 1fr; gap: 6px; } .c-evs li > span:first-child { color: var(--muted); } .c-evs small { display: block; color: var(--muted); }
.c-bridge { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 4px 0 0; font-size: 13.5px; } .c-bridge dt { color: var(--muted); } .c-bridge dd { margin: 0; text-align: right; }
.c-bridge .tot { padding-top: 4px; border-top: 1px solid var(--line-2); font-weight: 650; color: var(--ink); }
.c-pays { list-style: none; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 12.5px; }
.c-pays li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; } .c-pays li > span:first-child { color: var(--muted); } .c-pays b { text-align: right; }
.tier { padding: 2px 5px; border-radius: 4px; background: var(--card); font: 700 9.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.tier.confirmed { background: var(--pos-bg); color: var(--pos); } .tier.planned { color: var(--purple); }

/* decide */
.c-decide { display: grid; gap: 10px; }
.c-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.c-card { display: grid; align-content: start; gap: 6px; padding: 14px 16px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); position: relative; overflow: hidden; }
.c-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--faint); }
.c-card.risk.watch::before { background: #C98A0B; } .c-card.risk.concern::before, .c-card.risk.critical::before { background: var(--neg); } .c-card.risk.good::before, .c-card.opp::before { background: var(--pos); }
.c-card h3 { margin: 0; font: 650 17px/1.3 var(--font); color: var(--ink); text-wrap: pretty; }
.c-card p { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.c-card .c-btn { justify-self: start; }
.c-levers { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); overflow: hidden; }
.c-levers li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); }
.c-levers li:first-child { border-top: 0; } .c-levers li.on { background: rgba(14,124,134,.06); }
.c-lev-t { margin: 2px 0 0; font: 650 15px/1.35 var(--font); color: var(--ink); } .c-lev-s { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.c-notes summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--green); }
.c-notes ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; } .c-notes li span { color: var(--muted); }
.c-fail { padding: 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-2); } .c-fail p { margin: 0 0 12px; }
.c-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; container-type: inline-size; } .c-side p { margin: 0; }
.c-flag { padding: 10px 12px; border-radius: 10px; background: var(--warn-bg); color: #6b4700; font-size: 13.5px; }
.c-range { display: grid; gap: 6px; font: 700 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .c-range input { width: 100%; accent-color: var(--green); min-height: 44px; } .c-range output { font: 600 14px var(--font); text-transform: none; letter-spacing: 0; color: var(--ink); }
.c-sun { width: 100%; border-collapse: collapse; font-size: 14px; } .c-sun th, .c-sun td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: right; } .c-sun th:first-child { text-align: left; color: var(--muted); font-weight: 500; } .c-sun thead th { font: 700 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.c-mbars { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; align-items: end; height: 120px; }
.c-mbars .mb { display: grid; grid-template-rows: 1fr auto; height: 100%; justify-items: center; } .c-mbars .mb-bar { width: 100%; align-self: end; border-radius: 3px 3px 0 0; background: #C9B9A8; } .c-mbars .mb.now .mb-bar { background: #A9572E; } .c-mbars .mb-l { font-size: 11px; color: var(--muted); }
.c-vweeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px 16px 4px; } .c-vw { padding: 12px; border-radius: 12px; background: var(--soft); }

/* narrow */
@media (max-width: 1100px) { .c-insp-grid { grid-template-columns: 1fr 1fr; } .c-insp-grid .c-panel:last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .c-stand-row { grid-template-columns: 1fr; }
  .c-read { border-left: 0; border-top: 1px solid var(--line); min-height: 0; padding: 10px 14px 10px 16px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k big" "sub sub"; align-items: baseline; }
  .c-read:first-child { border-top: 0; }
  .c-read-k { grid-area: k; } .c-read-big { grid-area: big; font-size: 22px; text-align: right; } .c-read-sub { grid-area: sub; }
  .c-insp-grid { grid-template-columns: 1fr; } .c-insp-grid .c-panel:last-child { grid-column: auto; }
  .c-cards { grid-template-columns: 1fr; }
  .c-levers li { flex-direction: column; align-items: stretch; } .c-levers .c-btn { align-self: flex-start; }
  .c-vweeks { grid-template-columns: 1fr 1fr; }
  .c-board-head { padding: 0 12px 10px; } .c-dock { margin: 0 12px 12px; }
}

/* revision 1: chips in two lines, payments in two rows, phone lane labels */
.chip { display: grid; gap: 0; padding: 3px 5px 4px 6px; white-space: normal; }
.chip b { font: 650 10.5px/1.2 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip small { font: 500 9.5px/1.2 var(--font); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-pays li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pd amt" "pl pl"; gap: 0 8px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.c-pays .pd { grid-area: pd; color: var(--muted); } .c-pays b { grid-area: amt; } .c-pays .pl { grid-area: pl; color: var(--ink); }
@media (max-width: 640px) { .c-label span { display: none; } .c-label { padding-left: 12px; } .c-label b { font-size: 10px; } }
.chip b, .chip small { white-space: normal; overflow-wrap: anywhere; hyphens: auto; text-overflow: clip; }
.c-board-head { flex-wrap: nowrap; } .c-board-head > div:first-child { flex: 1 1 auto; min-width: 180px; }
@container (max-width: 820px) { .c-board-head { flex-wrap: wrap; } }
.c-switches { justify-content: flex-end; }
.chip b, .chip small { overflow-wrap: normal; hyphens: manual; }
.c-board-head { flex-wrap: wrap; } .c-board-head > div:first-child { flex-basis: 100%; } .c-switches { justify-content: flex-start; }
@media (max-width: 480px) {
  .c-switches { display: grid; grid-template-columns: 1fr; width: 100%; }
  .c-tog { display: grid; grid-template-columns: 64px 1fr 1fr; width: 100%; }
  .c-tog button { white-space: normal; line-height: 1.2; padding: 4px 8px; }
}

.chip { padding: 3px 4px 4px 5px; border-left-width: 2px; }
.chip b { font-size: 10px; letter-spacing: -.01em; } .chip small { font-size: 9.5px; }
.c-lane-down { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; min-height: 120px; padding: 14px 16px; background: var(--neg-bg); } .c-lane-down p { margin: 0; flex: 1 1 280px; font-size: 14px; }
.c-pf-none span { position: sticky; left: calc(var(--label, 104px) + 8px); max-width: 340px; }
.c-sun-list { display: none; list-style: none; margin: 0; padding: 0; gap: 10px; }
.c-sun-list li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--soft); font-size: 14px; line-height: 1.45; }
.c-sun-list b { font: 700 10.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
@container (max-width: 380px) { .c-sun { display: none; } .c-sun-list { display: grid; } }