/*
 * /vendor's figures and charts: the week's bars, the busy grid and strip,
 * and the change on last week. Shared by the Overview and Insights.
 *
 * One ramp for busy-ness (quiet to packed), and it is the only colour a chart
 * uses besides the accent. Bars are thin and square-topped; the figure a
 * vendor is asking about is printed, not left to be read off an axis.
 */

:root {
  --busy-0: color-mix(in srgb, var(--st-open) 30%, var(--raise-2));
  --busy-1: #e9c46a;
  --busy-2: #f08a00;
  --busy-3: var(--st-sold);
}

/* ── Figures ─────────────────────────────────────────────────────────────── */
/* Each figure is a tile of its own, filled a step up from the card it sits
   in, as the app draws a stat: the label and the change across the top, the
   number, and under it what the number means for the business (.d-kpi-means).
   The tiles used to be columns parted by rules, which read as a spreadsheet. */

.d-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
}
.d-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  padding: var(--s-4);
  border-radius: var(--r-3);
  background: var(--raise-2);
  color: var(--ink);
  text-align: left;
  transition: background 0.15s var(--e-out);
}
.d-kpi-btn:hover { background: color-mix(in srgb, var(--ink) 6%, var(--raise-2)); }
/* On Insights the tiles stand on the page itself, so they take a card's fill. */
.ins-kpis .d-kpi { padding: var(--s-5); border-radius: var(--r-4); background: var(--raise); }
.d-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.d-kpi-label { color: var(--ink-2); font-size: var(--t-13); font-weight: 650; transition: color 0.15s var(--e-out); }
.d-kpi-btn:hover .d-kpi-label { color: var(--ink); }
.d-kpi-value {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  font-size: var(--t-28);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.d-kpi-value .ic { width: 20px; height: 20px; color: var(--ink-4); }
.d-kpi-star .ic { width: 18px; height: 18px; color: var(--st-busy); fill: var(--st-busy); }
.d-kpi-none { color: var(--ink-4); font-size: var(--t-16); font-weight: 550; letter-spacing: 0; }
.d-kpi-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; color: var(--ink-3); font-size: var(--t-12); font-weight: 650; }
.d-kpi-means { color: var(--ink-3); font-size: var(--t-12); line-height: 1.4; text-wrap: pretty; }
.d-delta { font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.d-delta.up { color: var(--ok); }
.d-delta.down { color: var(--danger); }

@media (max-width: 760px) {
  .d-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── The week's bars ───────────────────────────────────────────────────── */

.d-week { padding-top: var(--s-5); }
.d-chart { position: relative; }
.d-cols {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 6px;
  height: 168px;
  align-items: stretch;
}
.d-cols-week { gap: var(--s-4); }
.d-col { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.d-bar-slot {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 1;
}
.d-bar {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 36px;
  overflow: hidden;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 34%, var(--raise-2));
  transform-origin: bottom;
  animation: dk-bar 0.5s var(--e-out) both;
  animation-delay: calc(var(--i, 0) * 25ms);
}
.d-bar-in { display: block; width: 100%; border-radius: 8px; background: var(--accent); }
.d-col.is-today .d-bar { background: color-mix(in srgb, var(--accent) 50%, var(--raise-2)); }
.d-col.is-zero .d-bar { background: repeating-linear-gradient(-45deg, var(--line-2) 0 2px, transparent 2px 5px); }
.d-col:hover .d-bar { filter: brightness(1.08); }
.d-bar-flag {
  position: absolute;
  bottom: calc(var(--h) + 6px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink);
  font-size: var(--t-12);
  font-weight: 650;
}
.d-tick { color: var(--ink-3); font-size: var(--t-12); text-align: center; white-space: nowrap; }
.d-col.is-today .d-tick { color: var(--ink); font-weight: 600; }
@keyframes dk-bar { from { transform: scaleY(0); } }
@media (max-width: 600px) {
  .d-tick-date { display: none; }
  .d-cols { height: 160px; }
}

.d-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
  color: var(--ink-3);
  font-size: var(--t-12);
}
.d-legend span { display: inline-flex; align-items: center; gap: 6px; }
.d-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.d-sw-views { background: color-mix(in srgb, var(--accent) 34%, var(--raise-2)); }
.d-sw-dir { background: var(--accent); }
.d-sw-zero { background: repeating-linear-gradient(-45deg, var(--line-2) 0 2px, var(--raise-2) 2px 5px); }

/* ── Busy: the week grid, and today's strip ───────────────────────────── */

.d-heat {
  display: grid;
  grid-template-columns: 36px repeat(18, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
}
.d-hour { color: var(--ink-4); font-size: var(--t-11); }
.d-row-label { color: var(--ink-3); font-size: var(--t-12); }
.d-cell { display: block; height: 22px; border-radius: 5px; background: var(--raise-2); }
.d-legend .d-cell { width: 10px; height: 10px; }
.d-cell[data-level="0"] { background: var(--busy-0); }
.d-cell[data-level="1"] { background: var(--busy-1); }
.d-cell[data-level="2"] { background: var(--busy-2); }
.d-cell[data-level="3"] { background: var(--busy-3); }

.d-busy-line { color: var(--ink-2); font-size: var(--t-14); }
.d-busy-line b { color: var(--ink); font-weight: 600; }
.d-busy-strip {
  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  gap: 3px;
  align-items: end;
  height: 88px;
  margin-top: var(--s-4);
}
.d-busy-h { height: var(--h); border-radius: 5px; background: var(--raise-2); }
.d-busy-h[data-level="0"] { background: var(--busy-0); }
.d-busy-h[data-level="1"] { background: var(--busy-1); }
.d-busy-h[data-level="2"] { background: var(--busy-2); }
.d-busy-h[data-level="3"] { background: var(--busy-3); }
.d-busy-h.is-now { position: relative; }
.d-busy-h.is-now::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ink); }
.d-busy-axis { display: flex; justify-content: space-between; margin-top: 6px; color: var(--ink-4); font-size: var(--t-11); }
.d-busy-now { margin-top: var(--s-3); color: var(--ink-3); font-size: var(--t-13); }

/* Not enough reports yet: how far there is to go, as ten marks. */
.d-busy-soon { display: flex; flex-direction: column; gap: var(--s-2); }
.d-busy-meter { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.d-busy-meter i { height: 28px; border-radius: 6px; background: var(--raise-2); }
.d-busy-meter i.on { background: var(--busy-1); }
.d-busy-soon-n { color: var(--ink-2); font-size: var(--t-14); }
.d-busy-soon-n b { color: var(--ink); font-weight: 650; }

/* ── Insights, after (Nov 2026 board) ─────────────────────────────────────
   The week told as a sentence beside the chart, the chart a taped-up sheet,
   the counts as specimens, how people found the place as a ledger, this week
   on a blue band, and the busy hours as a printed timetable. Everything is
   scoped to .in-page, so Today's figures and bars above keep their drawing.
   Paper (.cut) stays paper in the dark; the page around it follows the theme. */

.in-page { --ink3-paper: #5F5A52; }
.in-page .cut { --ink3: var(--ink3-paper); }
.in-page .k { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.in-page .xband .lede { color: #23252A; }
.in-page .xband .kick { color: #2B2D31; }

.in-hero { display: grid; grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr); gap: clamp(32px, 4vw, 72px); align-items: start; padding-top: clamp(4px, 1.6vw, 24px); }
.in-hero .xh1 { font-size: clamp(40px, 4.4vw, 68px); overflow-wrap: anywhere; }
body.tool .in-tabs { position: relative; margin-top: 34px; }
body.tool .in-tabs .d-seg-btn { font-size: 16px; padding: 0 18px 0 0; text-align: left; }
.in-tabs-why { margin-top: 14px; font-size: 15px; color: var(--ink2); max-width: 30em; }

.in-stage { position: relative; padding: 34px 0 0 34px; }
.in-stage .t1 { position: absolute; left: 0; top: 0; width: 150px; aspect-ratio: 1; object-fit: cover; border-radius: 3px; rotate: -6deg; box-shadow: 0 18px 30px -18px rgba(0,0,0,.6); z-index: 0; }
.in-chart { position: relative; z-index: 1; padding: 26px 28px 24px; --tilt: .9deg; }
.in-chart .top b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.025em; }
.in-chart .top p { margin-top: 4px; font-size: 15px; color: var(--ink2); max-width: 30em; }
.in-chart-none { margin-top: 24px; font-size: 16px; color: var(--ink2); }
.in-page .in-plot { position: relative; }
.in-bars { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 16px; height: 270px; margin-top: 40px; align-items: end; }
.in-bars.wide { gap: 4px; }
.in-page .in-bar { position: relative; display: block; min-width: 0; height: var(--v); border-radius: 6px 6px 3px 3px; background: rgba(29,31,34,.17); transform-origin: bottom; animation: in-rise .55s var(--ease-out, ease-out) both; animation-delay: calc(var(--i, 0) * 20ms); }
.in-bars.wide .in-bar { border-radius: 3px 3px 2px 2px; }
.in-bar i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--d); border-radius: 3px; background: #1D1F22; }
.in-bar b { position: absolute; left: -6px; right: -6px; top: -25px; text-align: center; font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ink2); }
.in-bar.now { background: var(--mustard); box-shadow: inset 0 0 0 2px #1D1F22; }
.in-bar.now b { color: var(--ink); }
.in-bar.zero { height: 10px; background: none; outline: 1.5px dashed rgba(29,31,34,.45); outline-offset: -1.5px; }
.in-bar.zero.now { background: var(--mustard); }
@keyframes in-rise { from { transform: scaleY(0); } }
.in-days { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 16px; margin-top: 12px; text-align: center; font-size: 13.5px; font-weight: 650; color: var(--ink3); }
.in-days.wide { gap: 4px; }
.in-days.wide span { white-space: nowrap; overflow: visible; display: flex; justify-content: center; }
.in-days.wide span:last-child { justify-content: flex-end; }
.in-days .now { color: var(--ink); font-weight: 800; }
.in-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; font-size: 15px; color: var(--ink2); }
.in-legend span { display: inline-flex; align-items: center; gap: 8px; }
.in-legend i { width: 14px; height: 14px; border-radius: 4px; background: rgba(29,31,34,.17); }
.in-legend i.d { background: #1D1F22; }
.in-legend i.n { background: none; outline: 1.5px dashed rgba(29,31,34,.45); outline-offset: -1.5px; }
.in-chart .cap { margin-top: 14px; font-size: 16px; color: var(--ink2); text-wrap: pretty; }
.in-chart .cap b { color: var(--ink); }

.in-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 28px; margin-top: clamp(64px, 6vw, 96px); }
.in-page .xspec .n { overflow-wrap: anywhere; }
.in-chg { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 15px; font-weight: 750; color: var(--ink); }
.in-chg .ic { width: 16px; height: 16px; }
.in-chg.is-same { color: var(--ink2); font-weight: 650; }

.in-ways { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 4.4vw, 80px); align-items: center; }
.in-ledger { padding: 30px 34px 34px; --tilt: -.7deg; }
.in-ledger::after { content: ''; position: absolute; inset: 9px; outline: 1.4px dashed rgba(29,31,34,.28); pointer-events: none; }
.in-way { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; margin-top: 28px; }
.in-way .g { grid-row: span 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(29,31,34,.08); color: var(--ink); }
.in-way b { font-size: 18px; font-weight: 750; letter-spacing: -.015em; line-height: 1.25; }
.in-way .n { grid-row: span 2; align-self: center; font-size: 40px; font-weight: 800; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.in-way .track { height: 10px; border-radius: 99px; background: rgba(29,31,34,.08); overflow: hidden; }
.in-way .track i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: #1D1F22; }
.in-way.poster .track i { background: var(--s-busy); }
.in-way.sent .track i { background: var(--clay); }
.in-ledger-none { margin-top: 18px; font-size: 16px; color: var(--ink2); max-width: 30em; }
.in-control { position: relative; min-height: 470px; }
.in-control img { position: absolute; right: 0; top: 0; width: 70%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; rotate: 5deg; box-shadow: 0 18px 30px -18px rgba(0,0,0,.6); }
.in-page .in-pc { position: absolute; left: 0; bottom: 0; width: min(330px, 92%); padding: 22px 22px 24px; --tilt: -1.6deg; z-index: 2; }
.in-pc b { display: block; margin-top: 8px; font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.in-pc p { margin-top: 8px; font-size: 15.5px; color: var(--ink2); }
.in-pc .btn { margin-top: 16px; background: #1D1F22; color: #FBF8F1; font-size: 16px; }

.in-week .in { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.in-week .ctas .btn { font-size: 16px; }
/* The board's collage as two columns that cannot overlap: the reviews down
   the left, the reports slip and the tip down the right, tilted and nudged
   across each other a little. Long words grow the slip instead of
   running under the next one. */
.in-board { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 22px; align-items: start; }
.in-board-l, .in-board-r { display: grid; gap: 26px; min-width: 0; }
.in-board-r { padding-top: 0; }
.in-rv { padding: 20px 22px 22px; }
.in-rv .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.in-rv .when { font-size: 14px; color: var(--ink3); }
.in-rv blockquote { margin-top: 10px; font-size: 22px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.in-rv .by { margin-top: 6px; font-size: 14.5px; color: var(--ink3); }
.in-rv.r1 { --tilt: -1.3deg; z-index: 2; }
.in-rv.r2 { --tilt: 1.5deg; margin-left: 10%; z-index: 1; }
.in-clean { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 20px 22px; --tilt: 1.8deg; z-index: 2; }
.in-clean p { font-size: 15.5px; color: var(--ink2); }
.in-clean .btn { color: #1D1F22; box-shadow: inset 0 0 0 1.5px #1D1F22; background: transparent; font-size: 16px; }
.in-tip { padding: 24px 22px 24px; --paper: #EEDF9E; --tilt: -2deg; z-index: 3; margin-left: -12%; }
/* paper.css loads after this file and sets every .cut to plain paper; the
   tip is the board's mustard slip in both themes. */
.in-page .in-board .in-tip.cut { --paper: #EEDF9E; }
.in-tip p { margin-top: 8px; font-size: 17px; font-weight: 650; line-height: 1.4; color: var(--ink); }
.in-tip p b { font-weight: 800; }

.in-ttwrap { position: relative; }
.in-ttwrap.has-set { margin-bottom: 40px; }
.in-ttwrap .t2 { position: absolute; right: 0; bottom: -70px; width: 138px; aspect-ratio: 1; object-fit: cover; border-radius: 3px; rotate: 6deg; box-shadow: 0 18px 30px -18px rgba(0,0,0,.6); z-index: 2; }
.in-tt { padding: 30px 32px 28px; --tilt: -.35deg; }
.in-tt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.in-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 15px; color: var(--ink2); }
.in-key span { display: inline-flex; align-items: center; gap: 8px; }
.in-key i { width: 16px; height: 16px; border-radius: 4px; background: rgba(29,31,34,.07); }
.in-page .in-grid { position: relative; display: grid; grid-template-columns: 64px repeat(18, minmax(0, 1fr)); gap: 6px; margin-top: 22px; align-items: center; }
.in-grid .in-h { grid-column: span 3; height: 20px; font-size: 13.5px; font-weight: 750; color: var(--ink3); white-space: nowrap; }
.in-grid .in-d { display: flex; align-items: center; height: 34px; font-size: 16px; font-weight: 700; }
.in-page .in-grid .d-cell { display: block; height: 34px; border-radius: 5px; background: rgba(29,31,34,.07); }
.in-key i[data-level="0"], .in-page .in-grid .d-cell[data-level="0"] { background: var(--sage); }
.in-key i[data-level="1"], .in-page .in-grid .d-cell[data-level="1"] { background: var(--mustard); }
.in-key i[data-level="2"], .in-page .in-grid .d-cell[data-level="2"] { background: var(--s-busy); }
.in-key i[data-level="3"], .in-page .in-grid .d-cell[data-level="3"] { background: #6E3B36; }
/* The busiest hour's column, ringed in pencil: placed on its grid column but
   out of the flow, so it never moves a cell. */
.in-ring { position: absolute; grid-row: 2 / span 7; inset: -12px -10px -10px; pointer-events: none; z-index: 1; }
/* The pencil ring round the rush hour: a paper.css .ink mark, drawn through
   the #cite-pencil grain and drawn on as the section lands. */
.in-ring > .ink { inset: 0; width: 100%; height: 100%; --sw: 2; }
.in-page .in-set { position: absolute; z-index: 3; bottom: -46px; left: clamp(0px, calc(32px + 70px + var(--ring, 0) * ((100% - 64px - 236px) / 18 + 6px) - 92px), calc(100% - 260px)); display: block; padding: 14px 18px 14px; text-align: left; --tilt: -2.2deg; cursor: pointer; }
.in-set b { display: block; margin-top: 2px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
@media (hover: hover) { .in-set:hover { --tilt: -1deg; } }
.in-soon { display: grid; gap: 12px; }
.in-meter { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; max-width: 520px; margin-top: 8px; }
.in-meter i { height: 30px; border-radius: 5px; background: rgba(29,31,34,.08); }
.in-meter i.on { background: var(--mustard); }
.in-soon-n { font-size: 16px; color: var(--ink2); }
.in-soon-n b { color: var(--ink); font-weight: 800; }
.in-soon-t, .in-tt-note .d-empty { font-size: 16px; color: var(--ink2); max-width: 40em; }

@media (max-width: 960px) {
  .in-hero, .in-ways, .in-week .in { grid-template-columns: minmax(0, 1fr); }
  .in-control { min-height: 420px; max-width: 560px; }
}
@media (max-width: 760px) {
  .in-hero .xh1 { font-size: 40px; }
  .in-stage { padding: 26px 0 0 14px; }
  .in-stage .t1 { width: 96px; }
  .in-chart { padding: 22px 18px 20px; }
  .in-bars { gap: 8px; height: 210px; margin-top: 36px; }
  .in-days { gap: 8px; font-size: 13px; }
  .in-bars.wide, .in-days.wide { gap: 2px; }
  .in-date { display: none; }
  .in-bars:not(.wide) .in-bar b { font-size: 13px; }
  .in-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 18px; }
  .in-page .xspec .n { font-size: 48px; }
  .in-ledger { padding: 24px 20px 26px; }
  .in-way { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 6px 12px; }
  .in-way .g { width: 40px; height: 40px; }
  .in-way b { font-size: 16px; }
  .in-way .n { font-size: 32px; }
  .in-control { min-height: 0; display: grid; }
  .in-control img { position: relative; width: 62%; justify-self: end; margin-right: 4px; }
  .in-page .in-pc { position: relative; width: 100%; margin-top: -60px; }
  /* The band's slips piled as the board lays them, each lapping the last
     one's bottom margin (never its words) and offset left and right. */
  .in-board { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .in-board-l, .in-board-r { gap: 0; }
  .in-rv.r1 { width: 94%; }
  .in-rv.r2 { width: 88%; margin: -12px 0 0 auto; }
  .in-board-r { margin-top: -10px; }
  .in-clean { width: 82%; margin-left: 2%; }
  .in-tip { width: 86%; margin: -12px 0 0 auto; }
  .in-tt { padding: 24px 14px 22px; }
  .in-page .in-grid { grid-template-columns: 34px repeat(18, minmax(0, 1fr)); gap: 2px; }
  .in-grid .in-h { font-size: 11.5px; }
  .in-grid .in-d { font-size: 13.5px; height: 26px; }
  .in-page .in-grid .d-cell { height: 26px; border-radius: 3px; }
  .in-ring { inset: -10px -5px -8px; }
  .in-page .in-set { position: relative; left: auto; bottom: auto; display: inline-block; margin-top: -10px; margin-left: 14px; }
  .in-ttwrap.has-set { margin-bottom: 0; }
  .in-ttwrap .t2 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .in-page .in-bar { animation: none; }
}

/* Bled to 12px inside the page's own gutter, whatever the shell sets it to. */
.in-page .xband { margin-left: calc(12px - var(--tg, 24px)); margin-right: calc(12px - var(--tg, 24px)); }