/* Shared look for the /whats-new newsletter issues and pitch pages.
   Page-specific pieces (print layout, extra sections) stay inline in each page. */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, section, article, header, footer, h1, h2, h3, p, ul, li, a, span, b { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

:root {
  --paper:#EDF1F8; --card:#FFFFFF; --card-tint:#F6F8FD; --ink:#101A2E;
  --ink-soft:#4E5A75; --ink-faint:#7C88A3; --accent:#2F5FD0; --accent-wash:#E3EAFB;
  --live:#0E8659; --live-wash:#DCF2E8; --amber:#9A5B00; --amber-wash:#FBEACB; --rule:#D3DCEC;
  --hero-bg:#17307A; --hero-bg2:#2150C4; --hero-fg:#FFFFFF; --hero-soft:#BFD0F4; --hero-em:#8FB4FF;
  --shop:#008060; --shop-wash:#E3F4EE;
  --wa-hd:#0B7C6B; --wa-paper:#E7E0D6; --wa-in:#FFFFFF; --wa-out:#D6F5C6; --wa-txt:#12211C; --wa-src:#0B7C6B;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --mono:  ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0A1120; --card:#121B2D; --card-tint:#162034; --ink:#E9EEF9;
    --ink-soft:#9CA9C3; --ink-faint:#6E7C99; --accent:#82A8FF; --accent-wash:#1A2540;
    --live:#4FD79C; --live-wash:#123026; --amber:#F0B95A; --amber-wash:#33260C; --rule:#24314A;
    --hero-bg:#132447; --hero-bg2:#1B3576; --hero-fg:#EAF0FF; --hero-soft:#9FB4E0; --hero-em:#9DC0FF;
    --shop:#5FD3A8; --shop-wash:#12302A;
    --wa-hd:#125C50; --wa-paper:#0B141A; --wa-in:#202C33; --wa-out:#005C4B; --wa-txt:#E9EDEF; --wa-src:#6FD3BD;
  }
}
:root[data-theme="dark"] {
  --paper:#0A1120; --card:#121B2D; --card-tint:#162034; --ink:#E9EEF9;
  --ink-soft:#9CA9C3; --ink-faint:#6E7C99; --accent:#82A8FF; --accent-wash:#1A2540;
  --live:#4FD79C; --live-wash:#123026; --amber:#F0B95A; --amber-wash:#33260C; --rule:#24314A;
  --hero-bg:#132447; --hero-bg2:#1B3576; --hero-fg:#EAF0FF; --hero-soft:#9FB4E0; --hero-em:#9DC0FF;
  --shop:#5FD3A8; --shop-wash:#12302A;
  --wa-hd:#125C50; --wa-paper:#0B141A; --wa-in:#202C33; --wa-out:#005C4B; --wa-txt:#E9EDEF; --wa-src:#6FD3BD;
}

html { -webkit-text-size-adjust: 100%; }
html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
.sheet { max-width: 64rem; margin: 0 auto; padding: clamp(1rem,3.5vw,2.5rem) clamp(1rem,4vw,2.5rem) 3rem; display: flex; flex-direction: column; gap: clamp(1.75rem,4vw,2.75rem); }

.kicker { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.tag { align-self: flex-start; display: inline-flex; align-items: center; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; color: var(--live); background: var(--live-wash); white-space: nowrap; }
.sec-head { display: flex; flex-direction: column; gap: .45rem; max-width: 40rem; }
.sec-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.55rem,3.4vw,2.25rem); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
.sec-head p { color: var(--ink-soft); }

/* ── hero ─────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--hero-bg) 0%, var(--hero-bg2) 100%); color: var(--hero-fg); border-radius: 22px; padding: clamp(1.5rem,4vw,2.8rem); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem,4vw,2.5rem); align-items: center; }
.hero::before { content: ""; position: absolute; right: -8rem; top: -8rem; width: 22rem; height: 22rem; border-radius: 50%; background: radial-gradient(circle, rgba(143,180,255,.28), transparent 70%); pointer-events: none; }
.hero > * { position: relative; }
.brandline { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hero-soft); }
.brandline strong { color: var(--hero-fg); font-weight: 600; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem,4.8vw,3.1rem); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; margin: 0.9rem 0 0.8rem; }
.hero h1 em { font-style: italic; color: var(--hero-em); }
.hero .sub { color: var(--hero-soft); font-size: clamp(1rem,1.7vw,1.12rem); max-width: 40ch; }
.hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.3rem; }
.hero-chips span { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); padding: .42rem .75rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.hero-chips svg { width: 16px; height: 16px; flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

/* ── buttons ─────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 650; font-size: .95rem; padding: .78rem 1.35rem; border-radius: 11px; transition: transform .15s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--hero-em); outline-offset: 3px; }
.btn-primary { background: #fff; color: #16307A; }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.35); }

/* ── WhatsApp demo phone ─────────────────────────── */
.aidemo { width: 100%; max-width: 22.5rem; justify-self: center; background: var(--wa-paper); border-radius: 22px; overflow: hidden; border: 6px solid rgba(255,255,255,.14); box-shadow: 0 26px 60px -26px rgba(0,0,0,.6); }
.aidemo.flat { border: 1px solid var(--rule); box-shadow: 0 16px 42px -26px rgba(16,26,46,.55); }
.aidemo-hd { display: flex; align-items: center; gap: .55rem; background: var(--wa-hd); color: #fff; padding: .6rem .85rem; }
.aidemo-av { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: .95rem; }
.aidemo-nm { display: flex; flex-direction: column; font-weight: 650; font-size: .88rem; line-height: 1.15; }
.aidemo-nm small { font-weight: 400; font-size: .64rem; opacity: .85; }
.aidemo-body { padding: .75rem .7rem .85rem; display: flex; flex-direction: column; gap: .42rem; }
.aidemo-body > * { flex: none; }
.aidemo-msg { max-width: 86%; padding: .45rem .62rem; border-radius: 10px; font-size: .86rem; line-height: 1.4; color: var(--wa-txt); box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.aidemo-msg b { font-weight: 700; }
.aidemo-msg.in { background: var(--wa-in); align-self: flex-start; border-top-left-radius: 2px; }
.aidemo-msg.out { background: var(--wa-out); align-self: flex-end; border-top-right-radius: 2px; }
.aidemo-msg.img { padding: 3px; }
.aidemo-photo { width: 118px; height: auto; border-radius: 8px; }
.aidemo-order { display: flex; gap: .55rem; align-items: center; margin-top: .35rem; padding: .4rem; border-radius: 8px; background: rgba(0,128,96,.08); border: 1px solid rgba(0,128,96,.25); }
.aidemo-order img { width: 36px; height: 50px; border-radius: 5px; object-fit: cover; flex: none; }
.aidemo-typing { align-self: flex-start; background: var(--wa-in); border-radius: 10px; border-top-left-radius: 2px; padding: .5rem .62rem; gap: 3px; display: none; }
.aidemo-typing span { width: 6px; height: 6px; border-radius: 50%; background: #9aa6a2; display: inline-block; animation: aidot 1s infinite; }
.aidemo-typing span:nth-child(2) { animation-delay: .15s; }
.aidemo-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes aidot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.aidemo-btns { align-self: flex-start; width: 80%; display: flex; flex-direction: column; gap: 4px; }
.aidemo-btn { text-align: center; background: var(--wa-in); color: #2f7fd0; font-weight: 650; font-size: .84rem; padding: .48rem; border-radius: 9px; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
/* With JS the chat is a fixed-height window: new bubbles land at the bottom and
   push older ones up out of view, like a real phone. Without JS it shows all. */
.aidemo.js .aidemo-body { height: 30rem; min-height: 0; overflow: hidden; justify-content: flex-end; }
.aidemo.js .aidemo-body.short { height: 17rem; }
.aidemo.js [data-step]:not(.show) { display: none; }
.aidemo.js [data-step].show { animation: pop .28s ease both; }
.aidemo.js .aidemo-typing.show { display: flex; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── spotlight: WhatsApp → AI → Shopify ──────────── */
.spot { background: var(--card); border: 1.5px solid var(--shop); border-radius: 22px; padding: clamp(1.3rem,3.5vw,2.4rem); display: flex; flex-direction: column; gap: 1.5rem; box-shadow: 0 24px 60px -40px rgba(0,128,96,.7); }
.spot-head { display: flex; flex-direction: column; gap: .55rem; max-width: 42rem; }
.spot-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem,3.6vw,2.4rem); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.spot-head h2 em { font-style: italic; color: var(--shop); }
.spot-head .kicker { color: var(--shop); }
.pipe { display: grid; grid-template-columns: 1fr auto 1fr auto 1.3fr; align-items: center; gap: .6rem; }
.pnode { background: var(--card-tint); border: 1px solid var(--rule); border-radius: 16px; padding: 1rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem; min-height: 11rem; justify-content: center; }
.pnode .pic { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; }
.pnode .pic svg { width: 32px; height: 32px; }
.pnode b { font-size: .95rem; font-weight: 700; }
.pnode small { font-size: .8rem; color: var(--ink-soft); line-height: 1.35; }
.pic.wa { background: #25D366; color: #fff; }
.pic.ai { background: linear-gradient(135deg, #2F5FD0, #7B5CFF); color: #fff; }
.pwire { width: 3rem; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 14px); background-size: 28px 4px; animation: flow 0.9s linear infinite; opacity: .75; }
@keyframes flow { to { background-position: 28px 0; } }
@keyframes flow-v { to { background-position: 0 28px; } }
.shopcard { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; text-align: left; box-shadow: 0 14px 34px -24px rgba(16,26,46,.55); }
.shopcard-hd { display: flex; align-items: center; gap: .45rem; padding: .55rem .8rem; background: var(--shop-wash); color: var(--shop); font-size: .78rem; font-weight: 700; }
.shopcard-hd svg { width: 16px; height: 16px; flex: none; }
.shopcard-hd .new { margin-left: auto; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; background: var(--shop); color: #fff; padding: .12rem .45rem; border-radius: 999px; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(0,128,96,.2); } }
.shopcard-bd { padding: .75rem .8rem .8rem; display: flex; flex-direction: column; gap: .55rem; }
.shopcard-no { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.shopcard-no span { font-size: .75rem; font-weight: 500; color: var(--ink-faint); }
.shopcard-item { display: flex; gap: .6rem; align-items: center; }
.shopcard-item img { width: 44px; height: 61px; border-radius: 6px; object-fit: cover; flex: none; }
.shopcard-item div { font-size: .8rem; line-height: 1.35; color: var(--ink-soft); }
.shopcard-item div b { display: block; color: var(--ink); font-size: .84rem; font-weight: 700; }
.shopcard-badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.shopcard-badges span { font-size: .68rem; font-weight: 650; padding: .14rem .5rem; border-radius: 999px; }
.b-pay { background: var(--amber-wash); color: var(--amber); }
.b-src { background: var(--accent-wash); color: var(--accent); }
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.perk { display: flex; gap: .65rem; align-items: flex-start; font-size: .88rem; color: var(--ink-soft); }
.perk .i { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--shop-wash); color: var(--shop); display: grid; place-items: center; }
.perk .i svg { width: 18px; height: 18px; }
.perk b { display: block; color: var(--ink); font-weight: 700; font-size: .93rem; }

/* ── feature rows ────────────────────────────────── */
.row { background: var(--card); border-radius: 20px; padding: clamp(1.3rem,3vw,2rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem,3vw,2rem); align-items: center; box-shadow: 0 1px 2px rgba(16,26,46,.05), 0 14px 36px -28px rgba(16,26,46,.55); }
.row-copy { display: flex; flex-direction: column; gap: .75rem; }
.row-copy h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.45rem,3vw,1.95rem); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
.row-copy p { color: var(--ink-soft); }
.ticks { display: flex; flex-direction: column; gap: .5rem; }
.ticks li { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; }
.ticks li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--live-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%230E8659' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }

/* knowledge graphic */
.kb { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; }
.kb-src { display: flex; flex-direction: column; gap: .5rem; }
.kb-src div { display: flex; align-items: center; gap: .45rem; background: var(--card-tint); border: 1px solid var(--rule); border-radius: 10px; padding: .45rem .65rem; font-size: .8rem; font-weight: 600; }
.kb-src svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.kb-chat { background: var(--wa-paper); border-radius: 16px; padding: .8rem; display: flex; flex-direction: column; gap: .4rem; }
.kb-chat .aidemo-msg { font-size: .82rem; }
.kb-chat .src { display: block; margin-top: .25rem; font-size: .66rem; color: var(--wa-src); font-weight: 650; }

/* parcel tracker */
.track-line { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; margin: .3rem 0; }
.track-line::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 17px; height: 3px; background: linear-gradient(90deg, var(--live) 0 33%, var(--amber) 33% 66%, var(--live) 66%); border-radius: 3px; }
.tstep { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; position: relative; }
.tstep .d { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--live); color: #fff; box-shadow: 0 0 0 4px var(--card); }
.tstep .d svg { width: 18px; height: 18px; }
.tstep.warn .d { background: var(--amber); animation: pulse-a 1.8s ease-in-out infinite; }
@keyframes pulse-a { 50% { box-shadow: 0 0 0 4px var(--card), 0 0 0 9px rgba(154,91,0,.22); } }
.tstep small { font-size: .74rem; font-weight: 650; color: var(--ink-soft); line-height: 1.25; }
.couriers { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .78rem; color: var(--ink-faint); }
.couriers span { background: var(--card-tint); border: 1px solid var(--rule); border-radius: 8px; padding: .25rem .6rem; font-weight: 700; color: var(--ink-soft); }

/* ── icon tiles ──────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.tile { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .5rem; transition: transform .16s ease, border-color .16s ease; }
.tile:hover { transform: translateY(-3px); border-color: var(--accent); }
.tile .tag { position: absolute; top: 1rem; right: 1rem; }
.tile .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.tile .ico svg { width: 22px; height: 22px; }
.tile h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.tile p { font-size: .86rem; color: var(--ink-soft); }
.c1 { background: #FFE9D6; color: #B4540A; } .c2 { background: #E3EAFB; color: #2F5FD0; } .c3 { background: #E6F6EE; color: #0E8659; }
.c4 { background: #F2E6FF; color: #7A3FD0; } .c5 { background: #E3F4EE; color: #008060; } .c6 { background: #FDE7EF; color: #C0306A; }
.also-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.also-head::after { content: ""; flex: 1; height: 2px; background: var(--accent-wash); border-radius: 2px; }

/* ── cta ─────────────────────────────────────────── */
.cta { background: linear-gradient(135deg, var(--hero-bg) 0%, var(--hero-bg2) 100%); color: var(--hero-fg); border-radius: 20px; padding: clamp(1.4rem,3.4vw,2.2rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; }
.cta h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem,3vw,1.8rem); letter-spacing: -0.01em; }
.cta p { color: var(--hero-soft); font-size: .95rem; margin-top: .25rem; }
.cta .actions { margin-top: 0; }
.colophon { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--ink-faint); text-transform: uppercase; text-align: center; }
.colophon a { color: var(--accent); }

@media (max-width: 860px) {
  .hero, .row { grid-template-columns: 1fr; }
  .pipe { grid-template-columns: 1fr; }
  .pwire { width: 4px; height: 1.8rem; justify-self: center; background: repeating-linear-gradient(180deg, var(--accent) 0 8px, transparent 8px 14px); background-size: 4px 28px; animation-name: flow-v; }
  .pnode { min-height: 0; }
  .perks, .tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .perks, .tiles { grid-template-columns: 1fr; }
  .kb { grid-template-columns: 1fr; }
  .kb-src { flex-direction: row; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── flow canvas, team timetable, handover note, report card (July/Aug issues, pitch pages) ── */
/* flow canvas */
.canvas { width: 100%; max-width: 24rem; justify-self: center; border-radius: 20px; padding: 1.1rem; border: 6px solid rgba(255,255,255,.14); box-shadow: 0 26px 60px -26px rgba(0,0,0,.6);
  background: var(--card) radial-gradient(circle, var(--rule) 1px, transparent 1.2px) 0 0/16px 16px; color: var(--ink); display: flex; flex-direction: column; align-items: center; }
.fn { width: 100%; max-width: 15rem; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: .5rem .65rem; display: flex; gap: .55rem; align-items: center; box-shadow: 0 6px 16px -10px rgba(16,26,46,.5); }
.fn .ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.fn .ico svg { width: 16px; height: 16px; }
.fn small { display: block; font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.fn b { font-size: .82rem; font-weight: 700; line-height: 1.25; }
.fline { width: 2px; height: 1.1rem; background: var(--accent); opacity: .55; }
.fsplit { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; position: relative; padding-top: 1.1rem; }
.fsplit::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 1.1rem; border: 2px solid var(--accent); border-bottom: 0; border-radius: 10px 10px 0 0; opacity: .55; }
.fsplit .fn { max-width: none; }
.fchip { font-size: .62rem; font-weight: 700; color: var(--accent); background: var(--accent-wash); padding: .08rem .4rem; border-radius: 999px; margin-left: auto; }
.cursor { align-self: flex-end; margin: -.4rem -.2rem 0 0; font-size: .7rem; font-weight: 700; color: #fff; background: #7A3FD0; padding: .2rem .5rem; border-radius: 6px 6px 6px 0; }

/* team timetable */
.tt { background: var(--card-tint); border: 1px solid var(--rule); border-radius: 16px; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; }
.tt-hd, .tt-row { display: grid; grid-template-columns: 5.6rem 1fr 4.6rem; align-items: center; gap: .6rem; }
.tt-hd { font-size: .64rem; font-family: var(--mono); letter-spacing: .08em; color: var(--ink-faint); text-transform: uppercase; }
.tt-hd .hrs { display: flex; justify-content: space-between; }
.tt-name { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 700; }
.tt-name .av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; font-weight: 700; color: #fff; flex: none; }
.tt-bar { position: relative; height: 16px; border-radius: 6px; background: var(--card); border: 1px solid var(--rule); overflow: hidden; }
.tt-bar span { position: absolute; top: 2px; bottom: 2px; border-radius: 4px; background: var(--accent); opacity: .8; }
.tt-bar span.brk { background: repeating-linear-gradient(45deg, var(--rule) 0 3px, transparent 3px 6px); opacity: 1; }
.tt-now { position: absolute; top: -2px; bottom: -2px; left: 58%; width: 2px; background: #C0306A; }
.st { font-size: .68rem; font-weight: 700; padding: .15rem .45rem; border-radius: 999px; text-align: center; white-space: nowrap; }
.st.on { color: var(--live); background: var(--live-wash); }
.st.away { color: var(--amber); background: var(--amber-wash); }
.st.off { color: var(--ink-faint); background: var(--card); border: 1px solid var(--rule); }
.tt-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .2rem; font-size: .76rem; color: var(--ink-soft); gap: .5rem; flex-wrap: wrap; }
.tt-foot b { color: var(--ink); }
.tt-foot .q { display: inline-flex; align-items: center; gap: .35rem; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: .25rem .55rem; }

/* handover note inside the chat */
.aidemo-note { align-self: center; max-width: 92%; text-align: center; font-size: .72rem; font-weight: 650; color: #5a4a12; background: #fdf1c7; padding: .3rem .6rem; border-radius: 8px; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aidemo-note { background: #3a3317; color: #f3dd92; } }
:root[data-theme="dark"] .aidemo-note { background: #3a3317; color: #f3dd92; }
.aidemo-msg .who { display: block; font-size: .66rem; font-weight: 700; color: #7A3FD0; margin-bottom: .1rem; }
@media (max-width: 420px) { .tt-hd, .tt-row { grid-template-columns: 4.6rem 1fr 4rem; gap: .4rem; } .tt-name { font-size: .74rem; } }
/* report card */
.rep { background: var(--card-tint); border: 1px solid var(--rule); border-radius: 16px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .7rem; }
.rep-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.rep-top small { font-size: .74rem; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.rep-top .v { font-family: var(--serif); font-size: 2rem; line-height: 1; margin-top: .2rem; }
.rep-top .delta { font-size: .76rem; font-weight: 700; color: var(--live); background: var(--live-wash); padding: .2rem .5rem; border-radius: 999px; white-space: nowrap; }
.rep svg { width: 100%; height: auto; display: block; }
.rep .bar { fill: var(--accent); opacity: .85; }
.rep .bar.prev { fill: var(--rule); opacity: 1; }
.rep .tgt { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 4 3; }
.rep .lbl { fill: var(--ink-faint); font-size: 9px; font-family: var(--sans); }
.rep .tlbl { fill: var(--amber); font-size: 9px; font-weight: 700; font-family: var(--sans); }
.rep-foot { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--ink-soft); gap: .5rem; flex-wrap: wrap; }
.rep-foot a { font-weight: 700; color: var(--accent); background: var(--accent-wash); padding: .3rem .6rem; border-radius: 8px; }
.rep-legend { display: flex; gap: .7rem; }
.rep-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.rep-legend i { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); }
.rep-legend i.p { background: var(--rule); }