@font-face { font-family: 'BDO Grotesk'; font-weight: 400; font-display: swap;
  src: url('https://147630916.fs1.hubspotusercontent-eu1.net/hubfs/147630916/BDOGrotesk-Regular.woff2') format('woff2'); }
@font-face { font-family: 'BDO Grotesk'; font-weight: 600; font-display: swap;
  src: url('https://147630916.fs1.hubspotusercontent-eu1.net/hubfs/147630916/BDOGrotesk-DemiBold.woff2') format('woff2'); }

:root {
  --white: #FFFFFF; --noir: #0B0B0B; --ox: #3F1418; --gunmetal: #2C3539; --steel: #5B6770;
  --cement: #8C8C88; --timberwolf: #E4E1DA; --sandstone: #A9805A; --scarlet: #EA6A3A;
  --sans: 'BDO Grotesk', Arial, Helvetica, sans-serif;
  --serif: 'Times New Roman', Times, serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--white); color: var(--noir); font: 400 17px/1.5 var(--sans); }

header { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 24px; border-bottom: 2px solid var(--scarlet); }
header img { height: 28px; width: auto; }
header .label { font: 400 13px/1 var(--serif); letter-spacing: 0; text-transform: uppercase; color: var(--steel); }
header form button { background: none; border: 1px solid var(--cement); color: var(--steel);
  border-radius: 4px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; }

.emergency { padding: 10px 24px; background: var(--timberwolf); border-left: 4px solid var(--scarlet);
  font-weight: 600; font-size: 15px; }

main { max-width: 860px; margin: 0 auto; padding: 24px 16px 180px; }
h1 { font: 600 32px/1.15 var(--sans); margin: 8px 0 4px; }
.sub { font: 400 14px/1.4 var(--serif); text-transform: uppercase; color: var(--steel); margin: 0 0 20px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chips button { background: var(--white); border: 1px solid var(--timberwolf); border-radius: 18px;
  padding: 8px 14px; font: inherit; font-size: 15px; cursor: pointer; color: var(--gunmetal); }
.chips button:hover { border-color: var(--scarlet); }

.msg { margin: 0 0 18px; }
.msg.user { background: var(--timberwolf); border-radius: 8px; padding: 12px 16px; font-weight: 600; }
.msg.bot { padding: 4px 2px; }
.msg.bot p { margin: 0 0 10px; }
.msg.bot ol, .msg.bot ul { margin: 0 0 10px; padding-left: 24px; }
.msg.bot li { margin-bottom: 4px; }
.msg.bot a { color: var(--ox); }
.msg.bot .source { font-size: 14px; color: var(--steel); }
.msg.bot.gap { border-left: 4px solid var(--sandstone); padding-left: 14px; }
.msg.error { color: var(--ox); font-weight: 600; }
.fb { margin-top: 6px; display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--steel); }
.fb button { background: none; border: 1px solid var(--timberwolf); border-radius: 4px; padding: 4px 10px;
  cursor: pointer; font: inherit; color: var(--gunmetal); }
.fb button:disabled { opacity: .5; cursor: default; }

.composer { position: fixed; left: 0; right: 0; bottom: 0; background: var(--white);
  border-top: 1px solid var(--timberwolf); padding: 12px 16px 16px; }
.composer form { max-width: 860px; margin: 0 auto; display: flex; gap: 10px; }
.composer textarea { flex: 1; min-height: 52px; max-height: 160px; resize: vertical; padding: 12px 14px;
  font: inherit; border: 1px solid var(--cement); border-radius: 6px; color: var(--noir); }
.composer textarea:focus { outline: 2px solid var(--scarlet); outline-offset: 0; border-color: transparent; }
.composer button { background: var(--scarlet); color: var(--noir); border: 0; border-radius: 6px;
  padding: 0 22px; font: 600 16px var(--sans); cursor: pointer; }
.composer button:disabled { opacity: .5; cursor: default; }
.composer .note { max-width: 860px; margin: 6px auto 0; font-size: 13px; color: var(--steel); }
.composer .note button { background: none; color: var(--steel); padding: 0; font: inherit; text-decoration: underline; }

.login { max-width: 380px; margin: 12vh auto 0; padding: 0 16px; }
.login img { width: 100%; max-width: 320px; margin-bottom: 24px; }
.login input { width: 100%; padding: 12px 14px; font: inherit; border: 1px solid var(--cement); border-radius: 6px; margin: 8px 0 12px; }
.login button { width: 100%; background: var(--scarlet); color: var(--noir); border: 0; border-radius: 6px; padding: 12px; font: 600 16px var(--sans); cursor: pointer; }
.login .err { color: var(--ox); font-weight: 600; }

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { background: var(--gunmetal); color: var(--white); text-align: left; padding: 8px; font-weight: 600; }
td { padding: 8px; vertical-align: top; border-bottom: 1px solid var(--timberwolf); }
tr:nth-child(even) td { background: #F4F2EE; }

@media (max-width: 600px) {
  header { padding: 12px 16px; } .emergency { padding: 10px 16px; } h1 { font-size: 26px; }
}

/* Kettle, the staff guide buddy (static/avatar.js). Decorative only. */
.buddy { position: fixed; left: 0; bottom: 118px; z-index: 5; cursor: pointer; user-select: none;
  will-change: transform; }
.buddy[hidden] { display: none !important; }
.buddy svg { display: block; overflow: visible; animation: buddy-bob 2.4s ease-in-out infinite; }
.buddy .buddy-body { fill: var(--noir); }
.buddy .buddy-handle { stroke: var(--scarlet); }
.buddy .buddy-eye { fill: var(--white); }
.buddy .buddy-eyes { transition: transform .25s; transform-box: fill-box; }
.buddy .buddy-eye { transform-box: fill-box; transform-origin: center; transition: transform .08s; }
.buddy .buddy-eyes.blink .buddy-eye { transform: scaleY(.1); }
.buddy .buddy-mouth { stroke: var(--white); }
.buddy .buddy-mouth.filled { fill: var(--scarlet); stroke: var(--scarlet); }
.buddy .buddy-feet { fill: var(--gunmetal); }
.buddy.facing-left .buddy-flip { transform: scaleX(-1); }
.buddy.walking svg { animation: buddy-walk .35s ease-in-out infinite; }
.buddy[data-state="cheer"] svg { animation: buddy-hop .5s ease-out 2; }
.buddy[data-state="worried"] svg { animation: buddy-shrug .8s ease-in-out 2; }
.buddy[data-state="thinking"] svg { animation: buddy-bob 1s ease-in-out infinite; }
.buddy[data-state="serious"] svg { animation: none; }
.buddy-bubble { position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--white); border: 1px solid var(--timberwolf); border-left: 3px solid var(--scarlet);
  border-radius: 6px; padding: 6px 10px; font-size: 13px; color: var(--noir); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.buddy-dots { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; }
.buddy-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--scarlet);
  animation: buddy-dot 1s ease-in-out infinite; }
.buddy-dots span:nth-child(2) { animation-delay: .15s; } .buddy-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes buddy-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes buddy-walk { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(4deg); } }
@keyframes buddy-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-22px); } 100% { transform: translateY(0); } }
@keyframes buddy-shrug { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-8deg); } 60% { transform: rotate(8deg); } }
@keyframes buddy-dot { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .buddy svg, .buddy-dots span { animation: none !important; } }
@media (max-width: 600px) { .buddy { bottom: 132px; } .buddy svg { width: 48px; height: 54px; } }

/* The Spotter — original cyborg bodybuilder (static/avatar.js, CHOICE = 'spotter'). */
main { padding-bottom: 260px; }
.buddy-spotter { bottom: 112px; }
.buddy-spotter svg { animation: sp-breathe 3.2s ease-in-out infinite; }
.buddy-spotter .sp-hair, .buddy-spotter .sp-jacket, .buddy-spotter .sp-sleeve,
.buddy-spotter .sp-boot, .buddy-spotter .sp-belt, .buddy-spotter .sp-shades { fill: var(--noir); }
.buddy-spotter .sp-lapel { fill: #1c1c1c; }
.buddy-spotter .sp-chest, .buddy-spotter .sp-trousers { fill: var(--gunmetal); }
.buddy-spotter .sp-abs { fill: none; stroke: var(--steel); stroke-width: 1.4; stroke-linecap: round; }
.buddy-spotter .sp-face, .buddy-spotter .sp-skin, .buddy-spotter .sp-thumb { fill: var(--cement); }
.buddy-spotter .sp-jaw { fill: #7b7b77; }
.buddy-spotter .sp-buckle { fill: var(--cement); }
.buddy-spotter .sp-mouth { stroke: var(--noir); stroke-width: 2; stroke-linecap: round; }
.buddy-spotter .sp-eye { fill: var(--scarlet); filter: drop-shadow(0 0 2px var(--scarlet)); animation: sp-glow 2s ease-in-out infinite; }
.buddy-spotter .sp-eye-human { fill: var(--noir); }
.buddy-spotter .sp-glint { fill: #fff; opacity: .45; }
.buddy-spotter .sp-glasses { transition: transform .35s ease; }
.buddy-spotter .sp-scan { fill: var(--scarlet); opacity: 0; transform-box: fill-box; transform-origin: left center; }
.buddy-spotter .sp-head { transform-box: view-box; transform-origin: 50px 44px; transition: transform .4s ease; }
.buddy-spotter .sp-arm-l { transform-box: view-box; transform-origin: 26px 53px; transition: transform .35s ease; }
.buddy-spotter .sp-arm-r { transform-box: view-box; transform-origin: 74px 53px; transition: transform .35s ease; }
.buddy-spotter .sp-thumb { opacity: 0; }
.buddy-spotter .sp-leg-l { transform-box: view-box; transform-origin: 42px 112px; }
.buddy-spotter .sp-leg-r { transform-box: view-box; transform-origin: 58px 112px; }

/* Walking: a heavy stomp, legs alternating. */
.buddy-spotter.walking svg { animation: sp-stomp .55s ease-in-out infinite; }
.buddy-spotter.walking .sp-leg-l { animation: sp-step .55s ease-in-out infinite; }
.buddy-spotter.walking .sp-leg-r { animation: sp-step .55s ease-in-out infinite reverse; }

/* Watching the question box: glasses down, red scan line sweeps. */
.buddy-spotter[data-state="watching"] .sp-glasses { transform: translateY(6px); }
.buddy-spotter[data-state="watching"] .sp-scan { animation: sp-scan 1.1s ease-in-out infinite; }

/* Answer: slow thumbs-up. */
.buddy-spotter[data-state="cheer"] .sp-arm-r { transform: rotate(-115deg); }
.buddy-spotter[data-state="cheer"] .sp-thumb { opacity: 1; }

/* Click: double-biceps flex. */
.buddy-spotter[data-state="flex"] .sp-arm-l { transform: rotate(120deg); }
.buddy-spotter[data-state="flex"] .sp-arm-r { transform: rotate(-120deg); }
.buddy-spotter[data-state="flex"] svg { animation: sp-flex .45s ease-in-out 3; }

/* Not in the guide: head tilt. */
.buddy-spotter[data-state="worried"] .sp-head { transform: rotate(-12deg); }

/* Emergency: completely still. */
.buddy-spotter[data-state="serious"] svg,
.buddy-spotter[data-state="serious"] .sp-eye { animation: none; }

.buddy-hud { position: absolute; bottom: 146px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--noir); color: var(--scarlet); font: 600 11px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .08em; padding: 5px 8px; border-radius: 3px; border: 1px solid var(--scarlet); }
.buddy-hud span { animation: sp-blink 1s steps(2) infinite; }
.buddy-spotter .buddy-bubble { bottom: 146px; }

@keyframes sp-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes sp-stomp { 0%,100% { transform: translateY(0); } 25%,75% { transform: translateY(-3px); } 50% { transform: translateY(1px); } }
@keyframes sp-step { 0%,100% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } }
@keyframes sp-scan { 0% { opacity: 0; transform: scaleX(.1); } 40% { opacity: .85; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes sp-glow { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes sp-flex { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes sp-blink { 0% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .buddy-spotter *, .buddy-spotter svg { animation: none !important; transition: none !important; } }
@media (max-width: 600px) { .buddy-spotter svg { width: 56px; height: 100px; } .buddy-spotter .buddy-bubble, .buddy-hud { bottom: 108px; } }
.buddy-spotter[data-state="cheer"] svg, .buddy-spotter[data-state="worried"] svg,
.buddy-spotter[data-state="thinking"] svg, .buddy-spotter[data-state="watching"] svg { animation: sp-breathe 3.2s ease-in-out infinite; }
.buddy-spotter .sp-bicep, .buddy-spotter .sp-pecs { fill: none; stroke: #2a2a2a; stroke-width: 1.4; stroke-linecap: round; }

/* Short answer first, full answer on request. */
.more-toggle { display: inline-block; margin: 2px 0 10px; background: none; border: 1px solid var(--timberwolf);
  border-left: 3px solid var(--scarlet); border-radius: 4px; padding: 6px 12px; font: 600 14px var(--sans);
  color: var(--gunmetal); cursor: pointer; }
.more-toggle:hover { border-color: var(--scarlet); }
.more { border-left: 2px solid var(--timberwolf); padding-left: 14px; margin-bottom: 10px; }
.more[hidden] { display: none !important; }

/* First shift mode */
.fs-start { display: block; width: 100%; text-align: left; margin: 0 0 16px; padding: 14px 16px; background: var(--white);
  border: 1px solid var(--timberwolf); border-left: 4px solid var(--scarlet); border-radius: 6px;
  font: 600 16px var(--sans); color: var(--noir); cursor: pointer; }
.fs-start:hover { border-color: var(--scarlet); }
.fs-start[hidden], .fs[hidden] { display: none !important; }
.fs { border: 1px solid var(--timberwolf); border-radius: 8px; padding: 14px 16px; margin-bottom: 24px; }
.fs-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.fs-head h2 { font: 600 22px/1.2 var(--sans); margin: 0; }
.fs-head select, .fs-close { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--cement); border-radius: 4px; background: var(--white); }
.fs-close { cursor: pointer; margin-left: 6px; }
.fs-first { background: var(--timberwolf); border-radius: 6px; padding: 10px 12px; margin: 10px 0 14px; font-size: 15px; }
.fs-first .fs-ask { margin-top: 8px; }
.fs-task { border-bottom: 1px solid var(--timberwolf); padding: 6px 0; }
.fs-task summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: center; padding: 4px 0; }
.fs-task summary::-webkit-details-marker { display: none; }
.fs-task input { width: 18px; height: 18px; accent-color: var(--scarlet); }
.fs-time { font-weight: 600; min-width: 64px; color: var(--gunmetal); }
.fs-task.now summary { background: #FBEEE8; border-radius: 4px; padding: 4px 6px; }
.fs-task.done .fs-name { text-decoration: line-through; color: var(--steel); }
.fs-badge { background: var(--scarlet); color: var(--noir); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.fs-body { padding: 4px 0 8px 28px; font-size: 15px; }
.fs-body ol { margin: 6px 0 10px; padding-left: 20px; }
.fs-body li { margin-bottom: 3px; }
.fs-timing { color: var(--steel); font-size: 13px; margin: 0; }
.fs-ask { background: none; border: 1px solid var(--cement); border-radius: 4px; padding: 5px 10px; font: 600 13px var(--sans); color: var(--gunmetal); cursor: pointer; margin-right: 6px; }
.fs-ask:hover { border-color: var(--scarlet); }
.fs-sub { font: 600 16px var(--sans); margin: 18px 0 4px; }
.fs-note { font-size: 13px; color: var(--steel); margin: 12px 0 0; }

/* Photos from the guide */
.msg.bot img { display: block; max-width: min(100%, 480px); max-height: 360px; height: auto; border-radius: 6px;
  border: 1px solid var(--timberwolf); margin: 6px 0 10px; }