/* Actually Interns: a neo-brutalist desktop. Ink outlines, hard shadows, flat bright colours.
   Apps lay themselves out against their own window, not the screen. desktop.js gives each window body size classes
   (.w760 = 760px wide or narrower, .h560 = 560px tall or shorter) and --cw/--ch, because Safari before 16 has no container queries. */
:root {
  --ink: #16161d; --ink2: #3d3c48; --muted: #62606e; --faint: #9d9aa8;
  --paper: #fffdf6; --cream: #f6f1e3; --cream2: #ebe4d0; --hair: rgba(22, 22, 29, .14);
  --wall: #8c9cff;
  --accent: #4a64ff; --accent-d: #3249e6; --accent-soft: #e2e7ff;
  --yellow: #ffd23f; --yellow-soft: #fff3c4; --pink: #ff8fab; --mint: #7ee0b0; --mint-soft: #dcf7ea; --lime: #bff168; --lilac: #c4b5fd; --orange: #ff9f43;
  --good: #13a36b; --good-soft: #d4f5e4; --warn-soft: #fff0c2; --bad: #e5383b; --bad-soft: #ffe0e0;
  --guest: #9aa1ad; --free: #13a36b; --pro: #8b5cf6; --staff: #f06f22; --investor: #16161d; --link: #3366cc;
  --b: 2px solid var(--ink);
  --shc: rgba(22, 22, 29, .28);  /* hard shadows, softened */
  --r: 10px; --r-sm: 7px;
  --sh-sm: 2px 2px 0 var(--shc); --sh: 4px 4px 0 var(--shc); --sh-lg: 7px 7px 0 var(--shc);
  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Space Grotesk', 'DM Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
html, body { height: 100%; margin: 0; }
body {
  font: .9375rem/1.5 var(--font); color: var(--ink); overflow: hidden; display: flex; flex-direction: column;
  background: var(--wall);
}
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
img.avatar { display: block; border-radius: 24%; flex: none; border: var(--b); background: var(--paper); }
img.icon { display: block; flex: none; }
kbd {
  font: 700 .72rem/1 var(--display); border: 1.5px solid var(--ink); border-bottom-width: 3px; border-radius: 5px; padding: 3px 6px 2px;
  background: var(--paper); color: var(--ink); display: inline-block; min-width: 20px; text-align: center; vertical-align: 1px;
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.stars { color: #f0a800; letter-spacing: 1px; white-space: nowrap; font-size: .85em; -webkit-text-stroke: .5px var(--ink); }
.stars .off { color: var(--cream2); }
.tier {
  font: 700 .62rem/1 var(--display); letter-spacing: .06em; padding: 3px 6px; border-radius: 5px; color: #fff; flex: none; display: inline-block;
  text-transform: uppercase; border: 1.5px solid var(--ink);
}
.tier.guest { background: var(--guest); } .tier.free { background: var(--free); } .tier.pro { background: var(--pro); }
.tier.staff { background: var(--staff); } .tier.investor { background: var(--investor); }
.btn {
  font: 700 .875rem/1.2 var(--display); border: var(--b); background: var(--paper); color: var(--ink); padding: 7px 14px;
  cursor: pointer; border-radius: var(--r-sm); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; box-shadow: 3px 3px 0 var(--shc);
  transition: transform .06s, box-shadow .06s, background .1s;
}
.btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shc); background: var(--yellow-soft); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--accent-d); }
.btn.primary kbd { background: rgba(255, 255, 255, .2); border-color: #fff; color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: var(--sh-sm); }
.btn:not(:disabled):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shc); }
.btn.big { font-size: 1rem; padding: 11px 20px; }
.tag { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; font: 700 .7rem/1 var(--font); background: var(--mint-soft); color: var(--ink); border: 1.5px solid var(--ink); padding: 3px 7px 2px; white-space: nowrap; border-radius: 999px; flex: none; }
.tag.money { background: var(--yellow); }
.tag + .tag { margin-left: 6px; }
.tag.new { background: var(--pink); }
.muted { color: var(--muted); font-size: .85rem; }

/* ---------------- top bar ---------------- */
.topbar {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; flex-wrap: nowrap; z-index: 5; min-width: 0; overflow: hidden;
  background: var(--paper); border-bottom: var(--b);
}
/* The top bar is always one row (a second row pushes the whole desktop down). fitTop() in ui.js sets data-fit to the
   least compact level that fits: 1 drops the extras, 2 stacks each chip's label above its value, 3 drops the logo,
   4 drops your picture. The chips never shrink, so the meters always stay readable. */
.topbar > * { flex-shrink: 0; }
.topbar .spacer { flex-shrink: 1; min-width: 0; }
.logo .lg-short { display: none; }
.topbar[data-fit="1"] .logo small, .topbar[data-fit="1"] .nextms, .topbar[data-fit="1"] .me .role,
.topbar[data-fit="2"] .logo small, .topbar[data-fit="2"] .nextms, .topbar[data-fit="2"] .me div,
.topbar[data-fit="3"] .logo, .topbar[data-fit="3"] .nextms, .topbar[data-fit="3"] .me div,
.topbar[data-fit="4"] .logo, .topbar[data-fit="4"] .nextms, .topbar[data-fit="4"] .me { display: none; }
.topbar[data-fit="2"] .lg-full { display: none; }
.topbar[data-fit="2"] .lg-short { display: inline; }
.topbar:is([data-fit="2"], [data-fit="3"], [data-fit="4"]) { gap: 6px; }
.topbar:is([data-fit="2"], [data-fit="3"], [data-fit="4"]) .chip { flex-direction: column; align-items: flex-start; gap: 2px; padding: 3px 8px 4px; font-size: .8rem; line-height: 1.1; }
.topbar:is([data-fit="2"], [data-fit="3"], [data-fit="4"]) .chip .lbl { font: 700 .56rem/1 var(--display); letter-spacing: .07em; text-transform: uppercase; }
.topbar:is([data-fit="2"], [data-fit="3"], [data-fit="4"]) .meter { --w: 64px; height: 10px; }
.logo { font: 700 1.1rem/1.1 var(--display); margin-right: 8px; white-space: nowrap; letter-spacing: -.01em; }
.logo small { display: block; font: 500 .74rem/1.3 var(--font); color: var(--muted); }
.logo small i { font-style: normal; font-size: .64rem; opacity: .7; margin-left: 4px; }
.chip {
  display: flex; align-items: center; gap: 8px; background: #fff; border: var(--b); padding: 4px 12px; font: 700 .9rem/1.3 var(--display);
  border-radius: var(--r-sm); white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: var(--sh-sm);
}
.chip .lbl { color: var(--muted); font-weight: 500; }
.neg { color: var(--bad); }
.meter { --w: 96px; width: var(--w); height: 12px; border-radius: 4px; background: var(--cream); border: var(--b); position: relative; overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #3fcf8e, var(--yellow) 55%, var(--bad)) 0 0 / calc(var(--w) - 4px) 100% no-repeat; box-shadow: 2px 0 0 var(--ink); transition: width .5s; } /* a shadow, not a border: at 100% it tucks under the frame */
.meter.prog { --w: 120px; }
.meter.prog i { background: var(--mint); }
.meter.prog b, #tracTicks b { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); opacity: .35; }
#tracTicks { position: absolute; inset: 0; }
.nextms { font: 500 .75rem/1.2 var(--font); color: var(--muted); }
.msline { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; font: 700 .85rem/1.2 var(--display); flex-wrap: wrap; }
.msline .meter { --w: 220px; flex: 1; min-width: 120px; }
.msline .meter b { opacity: 1; width: 3px; }
.spacer { flex: 1; }
.me { display: flex; align-items: center; gap: 9px; font-size: .85rem; line-height: 1.2; }
.me b { font-family: var(--display); }
.me small { color: var(--muted); }

/* ---------------- desktop ---------------- */
/* Its own stacking context: however often windows are raised, they stay below overlays and menus. */
.desktop { flex: 1; position: relative; min-height: 0; overflow: hidden; isolation: isolate; }
.desktop::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(22, 22, 29, .16) 1.2px, transparent 1.2px); background-size: 24px 24px; pointer-events: none; }
.desk-icons { position: absolute; left: 8px; top: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 0; }
.desk-icon {
  width: 84px; background: none; border: 2px solid transparent; border-radius: var(--r-sm); padding: 8px 2px 6px; cursor: pointer; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 6px; font: 700 .74rem/1.2 var(--display);
}
.desk-icon .dl { background: var(--paper); border: 1.5px solid var(--ink); border-radius: 4px; padding: 1px 6px; }
.desk-icon .di { position: relative; }
.desk-icon .ibadge { position: absolute; top: -7px; right: -9px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff; border: 2px solid var(--ink); font: 700 .68rem/16px var(--display); text-align: center; }
.desk-icon img { filter: drop-shadow(2px 2px 0 var(--shc)); }
.desk-icon:hover, .desk-icon:focus-visible { background: rgba(255, 255, 255, .25); border-color: var(--ink); }
.wallmark { position: absolute; right: 26px; bottom: 18px; font: 700 2rem/1 var(--display); color: rgba(22, 22, 29, .18); pointer-events: none; text-align: right; letter-spacing: -.03em; }
.wallmark small { display: block; font-size: .85rem; margin-top: 4px; letter-spacing: 0; }
@media (max-width: 1279px) { .desk-icons { display: none; } }

.win {
  position: absolute; z-index: 2; background: var(--paper); border: var(--b); border-radius: var(--r); box-shadow: var(--sh);
  display: flex; flex-direction: column; overflow: hidden; min-width: 300px; min-height: 180px; resize: both;
}
.win.front { box-shadow: var(--sh-lg); }
.win.maxed { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
.titlebar {
  display: flex; align-items: center; gap: 9px; padding: 0 7px 0 12px; height: 38px; border-bottom: var(--b); font: 700 .88rem/1 var(--display);
  user-select: none; white-space: nowrap; overflow: hidden; flex: none; cursor: default; touch-action: none; background: var(--cream);
}
.titlebar img.icon { filter: drop-shadow(1px 1px 0 var(--shc)); }
.titlebar .ttl { overflow: hidden; text-overflow: ellipsis; flex: 1; line-height: 1.3; } /* room for descenders: overflow clips them at 1 */
.titlebar .ctl { display: flex; gap: 5px; }
.titlebar .ctl button {
  width: 26px; height: 24px; border: var(--b); background: var(--paper); padding: 0; cursor: pointer; border-radius: 6px; color: var(--ink);
  display: grid; place-items: center; box-shadow: 1.5px 1.5px 0 var(--shc); transition: transform .06s, box-shadow .06s;
}
.titlebar .ctl button svg { display: block; }
.titlebar .ctl button:hover { background: var(--yellow); }
.titlebar .ctl button:active { transform: translate(1px, 1px); box-shadow: none; }
.titlebar .ctl .cl:hover { background: var(--bad); color: #fff; }
.win-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.t-console { background: #a9b6ff; } .t-browser { background: var(--mint); } .t-memo { background: var(--yellow); } .t-inbox { background: var(--pink); }
.t-bin, .t-note { background: #d8d3c4; } .t-snake { background: var(--lime); } .t-paint { background: #ffb3a7; }
.win:not(.front) .titlebar { filter: saturate(.3) brightness(1.08); color: var(--ink2); }

/* ---------------- taskbar and start menu ---------------- */
.taskbar {
  display: flex; align-items: center; gap: 8px; padding: 0 10px 0 0; min-height: 52px; z-index: 5;
  background: var(--paper); border-top: var(--b);
  /* No safe-area padding for the home indicator: on an iPad even part of it left an empty strip under the buttons.
     The bar sits flush with the bottom edge, and the indicator floats over its lower edge, clear of the buttons. */
}
.taskbar .apps { display: flex; gap: 6px; overflow-x: auto; min-width: 0; padding: 2px 4px 4px 2px; }
.taskbtn {
  display: flex; align-items: center; gap: 7px; font: 700 .8rem/1.2 var(--display); border: var(--b); background: #fff; padding: 5px 10px;
  cursor: pointer; border-radius: var(--r-sm); white-space: nowrap; position: relative; color: var(--ink); box-shadow: var(--sh-sm);
}
.taskbtn:hover { background: var(--yellow-soft); }
.taskbtn.on { background: var(--yellow); }
.taskbtn .count { background: var(--bad); color: #fff; border: 1.5px solid var(--ink); border-radius: 999px; font-size: .66rem; padding: 0 6px; font-weight: 700; }
#startBtn {
  align-self: stretch; border: 0; border-right: var(--b); border-radius: 0; box-shadow: none; background: var(--yellow); padding: 0 18px; font-size: .95rem; margin-right: 4px;
}
#startBtn:hover { transform: none; box-shadow: none; background: #ffdf6e; }
#startBtn:active { transform: none; box-shadow: inset 0 3px 0 var(--shc); }
.clock { font: 700 .95rem/1 var(--display); padding: 0 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.startmenu {
  position: fixed; left: 10px; bottom: 60px; background: var(--paper); border: var(--b); box-shadow: var(--sh-lg); z-index: 40;
  width: 280px; max-height: calc(100vh - 80px); overflow-y: auto; border-radius: var(--r); padding: 0 0 6px;
}
.startmenu .head { font: 700 1rem/1.2 var(--display); padding: 12px 14px; background: var(--accent); color: #fff; border-bottom: var(--b); margin-bottom: 4px; }
.startmenu .sect { font: 700 .68rem/1 var(--display); letter-spacing: .1em; color: var(--muted); padding: 12px 14px 6px; text-transform: uppercase; }
.startmenu button { display: flex; align-items: center; gap: 10px; width: calc(100% - 12px); margin: 0 6px; text-align: left; background: none; border: 2px solid transparent; padding: 6px 8px; cursor: pointer; font-size: .875rem; font-weight: 500; border-radius: var(--r-sm); }
.startmenu button:hover { background: var(--yellow-soft); border-color: var(--ink); }

/* ---------------- console ---------------- */
.chatapp { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.chatlist { border-right: var(--b); background: var(--cream); overflow-y: auto; display: flex; flex-direction: column; padding-bottom: 6px; }
.chatlist h4 { margin: 0; padding: 12px 14px 2px; font: 700 .7rem/1.2 var(--display); letter-spacing: .1em; color: var(--muted); }
.listmeta { padding: 0 14px 10px; font-size: .75rem; color: var(--muted); }
.chatitem { display: flex; gap: 10px; align-items: center; text-align: left; border: 2px solid transparent; background: none; padding: 7px 8px; margin: 0 6px 4px; cursor: pointer; border-radius: var(--r-sm); position: relative; width: calc(100% - 12px); }
.chatitem:hover { background: rgba(255, 255, 255, .6); border-color: var(--hair); }
.chatitem.viewing { background: #fff; border-color: var(--ink); box-shadow: var(--sh-sm); }
.chatitem.closed { opacity: .7; }
.ci-main { flex: 1; min-width: 0; }
.ci-name { font-weight: 700; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-sub { font-size: .75rem; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 3px; white-space: nowrap; overflow: hidden; }
.minipat { flex: 1; height: 8px; border-radius: 3px; background: #fff; border: 1.5px solid var(--ink); min-width: 30px; overflow: hidden; }
.minipat i { display: block; height: 100%; background: var(--good); }
.minipat.low i { background: var(--bad); }
.unread { position: absolute; right: 8px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); border: 1.5px solid var(--ink); }
.emptylist { padding: 14px; color: var(--muted); font-size: .85rem; }
.finished { margin: 8px 6px 0; border-top: 2px dashed var(--hair); padding-top: 6px; }
.finished summary { font: 700 .75rem/1.2 var(--display); color: var(--muted); padding: 6px 8px; cursor: pointer; list-style: none; }
.finished summary::-webkit-details-marker { display: none; }
.finished summary::before { content: '▸ '; }
.finished[open] summary::before { content: '▾ '; }

.convo { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.convhead { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: var(--b); flex: none; background: var(--paper); }
.convhead img.avatar { box-shadow: var(--sh-sm); }
.convhead .who { flex: 1; min-width: 0; }
.convhead .nm { font: 700 1.1rem/1.2 var(--display); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.convhead .sub { font-size: .8rem; color: var(--muted); }
.patience { height: 10px; border-radius: 4px; background: #fff; border: var(--b); margin-top: 8px; max-width: 260px; overflow: hidden; }
.patience i { display: block; height: 100%; width: 100%; background: var(--good); transition: background .3s; }
.patience.low i { background: var(--bad); }
.log { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--cream); }
.bubble { background: #fff; border: var(--b); padding: 8px 13px; border-radius: 14px 14px 14px 4px; font-size: .95rem; max-width: 86%; align-self: flex-start; box-shadow: var(--sh-sm); }
.bubble.bot { background: var(--accent); color: #fff; border-radius: 14px 14px 4px 14px; align-self: flex-end; }
.bubble .name { font: 700 .7rem/1.3 var(--display); color: var(--muted); display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.bubble.bot .name { color: rgba(255, 255, 255, .85); }
.bubble .ad { display: block; margin-top: 7px; padding-top: 6px; border-top: 1.5px dashed rgba(255, 255, 255, .5); font-size: .8rem; }
.bubble .srcs { display: block; margin-top: 7px; padding-top: 6px; border-top: 1.5px dashed rgba(255, 255, 255, .5); font-size: .75rem; }
.bubble .srcs b { font: 700 .62rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; margin-right: 6px; opacity: .85; }
.bubble .srcs i { font-style: normal; text-decoration: underline; text-underline-offset: 2px; margin-right: 8px; }
.bubble .ad b, .preview .ad b { font: 700 .62rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; margin-right: 5px; opacity: .85; }
.sys { align-self: center; font-size: .82rem; background: #fff; border: var(--b); padding: 9px 13px; max-width: 94%; border-radius: var(--r-sm); box-shadow: var(--sh-sm); }
.sys.tip { background: var(--yellow-soft); }
.sys.tip ol { margin: 5px 0 0; padding-left: 20px; }
.sys.tip li { margin-bottom: 3px; }
.sys .bad { color: var(--bad); }
.sys .good { color: var(--good); }
.sys .row { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-weight: 700; }
.sys .cite { color: #fff; background: var(--bad); border: 1.5px solid var(--ink); display: inline-block; padding: 1px 9px; margin-top: 5px; font: 700 .72rem/1.4 var(--display); border-radius: 999px; letter-spacing: .02em; }
.sys .detail { margin-top: 4px; }

.ctx { border-top: var(--b); padding: 8px 14px; background: var(--mint-soft); display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; }
.ctx .lbl { font: 700 .7rem/1.2 var(--display); letter-spacing: .08em; white-space: nowrap; text-transform: uppercase; }
.pills { display: flex; gap: 6px; flex: 1; min-width: 0; }
.pill { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; border: 2px dashed rgba(22, 22, 29, .35); border-radius: var(--r-sm); padding: 3px 8px; font-size: .75rem; color: var(--muted); min-height: 30px; line-height: 1.2; }
.pill.full { border: var(--b); background: #fff; color: var(--ink); box-shadow: var(--sh-sm); animation: pop .25s; }
.pill .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill .txt b { font-weight: 700; }
.pill button { border: 0; background: none; cursor: pointer; font-weight: 700; font-size: 1rem; padding: 0 2px; line-height: 1; color: var(--ink); }
@keyframes pop { from { transform: scale(.95); opacity: .6; } }

/* The composer scrolls when it's full; its parts never squash (squashed, the reply text spills out of its box). */
.composer > * { flex-shrink: 0; }
.composer { border-top: var(--b); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; flex: none; background: var(--paper); max-height: 55%; overflow-y: auto; }
.comp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.steps { display: flex; gap: 5px; flex-wrap: wrap; flex: 1 1 240px; }
.steps span { padding: 2px 9px; border-radius: 999px; font: 700 .72rem/1.4 var(--display); border: 1.5px solid var(--hair); color: var(--faint); }
.steps span.cur { background: var(--yellow); border-color: var(--ink); color: var(--ink); }
.steps span.done { background: var(--mint); border-color: var(--ink); color: var(--ink); }
.actions { display: flex; gap: 8px; }
.preview { min-height: 52px; border: var(--b); background: #fff; padding: 10px 13px; font-size: 1.0625rem; line-height: 1.5; border-radius: var(--r-sm); }
.preview .ph { color: var(--faint); font-size: .95rem; }
.preview .seg { animation: pop .2s; }
.preview .ad { display: block; margin-top: 6px; font-size: .85rem; color: var(--ink2); }
.cursor { display: inline-block; width: 3px; height: 1.1em; background: var(--accent); vertical-align: -3px; margin-left: 3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.opts { display: flex; flex-direction: column; gap: 8px; padding: 0 4px 4px 0; }
.opt {
  display: flex; align-items: center; gap: 11px; text-align: left; border: var(--b); background: #fff; padding: 9px 12px;
  font-size: 1rem; line-height: 1.4; cursor: pointer; border-radius: var(--r-sm); box-shadow: 3px 3px 0 var(--shc); transition: transform .06s, box-shadow .06s, background .1s;
}
.opt:hover { background: var(--yellow-soft); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shc); }
.opt:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shc); }
.opt .txt { flex: 1; }
.opt .txt small { display: block; font-size: .78rem; color: var(--muted); }
.note { font-size: .875rem; color: var(--muted); padding: 2px 0; }
.closebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 4px 4px 0; }

/* Drawings in the chat and the composer */
img.drawing { display: block; width: 216px; max-width: 100%; aspect-ratio: 3 / 2; image-rendering: pixelated; border: var(--b); border-radius: 6px; margin-top: 6px; background: #fff; }
.preview .attach { display: flex; align-items: center; gap: 8px; width: fit-content; margin-top: 8px; padding: 4px 10px 4px 4px; border: var(--b); border-radius: var(--r-sm); background: var(--cream); font: 700 .75rem/1.2 var(--display); color: var(--ink2); animation: pop .2s; }
.preview .attach img.drawing { width: 64px; margin: 0; border-width: 1.5px; border-radius: 4px; }
.imgstep { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 0 4px 4px 0; }
.imgstep .thumb { width: 132px; aspect-ratio: 3 / 2; image-rendering: pixelated; border: var(--b); border-radius: 6px; background: #fff; flex: none; }
.imgstep .thumb.empty { display: grid; place-items: center; font-size: .75rem; color: var(--muted); border-style: dashed; }
.imgacts { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 180px; }
.opt:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: var(--sh-sm); background: #fff; }

.clockin { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: var(--cream); }
.clockin h2 { font: 700 1.8rem/1.1 var(--display); margin: 0; letter-spacing: -.02em; }
.clockin p { margin: 0; max-width: 440px; color: var(--ink2); }
.todaygoal { display: flex; flex-direction: column; gap: 3px; max-width: 460px; background: var(--yellow-soft); border: var(--b); border-radius: var(--r-sm); box-shadow: var(--sh-sm); padding: 10px 16px; }
.todaygoal small { font: 700 .66rem/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.todaygoal b { font: 700 1.15rem/1.2 var(--display); }
.todaygoal span { font-size: .88rem; color: var(--ink2); }
.clockin ul { text-align: left; margin: 0; padding: 12px 16px 12px 34px; color: var(--ink2); font-size: .9rem; background: #fff; border: var(--b); border-radius: var(--r-sm); box-shadow: var(--sh-sm); max-width: 480px; }

/* The console adapts to its own window. */
.w760 .chatapp, .h560.w1100 .chatapp { grid-template-columns: 66px minmax(0, 1fr); }
:is(.w760, .h560.w1100) .chatlist :is(h4, .ci-main, .listmeta, .finished summary, .emptylist) { display: none; }
.w760 .chatlist .chatitem, .h560.w1100 .chatlist .chatitem { justify-content: center; padding: 5px 3px; margin: 3px 4px; width: calc(100% - 8px); }
.w760 .convhead img.avatar, .h560.w1100 .convhead img.avatar { width: 64px; height: 64px; }
.h820 .convhead img.avatar { width: 48px; height: 48px; }
.h820 .convhead { padding: 8px 14px; }
/* Narrow console (phones, split-screen tablets): the conversation gets the room. The header and sources bar slim down,
   the empty reply box goes (the step pills say where you are), and the options tighten up. */
.w620 .convhead { padding: 6px 10px; gap: 10px; }
.w620 .convhead img.avatar { width: 36px; height: 36px; }
.w620 .convhead .nm { font-size: .95rem; }
.w620 .convhead .sub { display: none; }
.w620 .log { padding: 10px; gap: 9px; }
.w620 .ctx { padding: 5px 10px; gap: 6px; }
.w620 .ctx .lbl { font-size: .62rem; }
.w620 .pill { min-height: 24px; padding: 1px 6px; font-size: .7rem; }
.w620 .composer { padding: 8px 10px 10px; gap: 7px; max-height: 50%; }
.w620 .comp-head .btn { padding: 5px 10px; font-size: .8rem; }
.w620 .preview { min-height: 38px; padding: 7px 10px; font-size: .95rem; overflow-wrap: anywhere; }
.w620 .preview.empty { display: none; }
.w620 .opts { gap: 6px; }
.w620 .opt { padding: 7px 10px; gap: 8px; font-size: .92rem; line-height: 1.3; }
.w460 .chatapp { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
.w460 .chatlist { flex-direction: row; border-right: 0; border-bottom: var(--b); overflow-x: auto; overflow-y: hidden; padding-bottom: 0; }
.w460 .chatlist .chatitem { width: auto; flex: none; }
.w460 .chatlist .finished { display: flex; margin: 0; border: 0; padding: 0; }
.w460 .ctx .lbl { display: none; }
.w460 .convhead { padding: 8px 12px; }
.w460 .convhead .sub { display: none; }
/* Wide but not tall (a laptop, or an iPad on its side): conversation on the left, composer on the right,
   so the answer options never squeeze the conversation to a sliver. */
:is(.h560:not(.w699), .h820:not(.w899)) .convo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto minmax(0, 1fr) auto; }
:is(.h560:not(.w699), .h820:not(.w899)) .convhead { grid-column: 1; padding: 8px 12px; }
:is(.h560:not(.w699), .h820:not(.w899)) .convhead .sub { display: none; }
:is(.h560:not(.w699), .h820:not(.w899)) .convhead img.avatar { width: 48px; height: 48px; }
:is(.h560:not(.w699), .h820:not(.w899)) .log { grid-column: 1; padding: 10px; }
:is(.h560:not(.w699), .h820:not(.w899)) .ctx { grid-column: 1; padding: 6px 10px; }
:is(.h560:not(.w699), .h820:not(.w899)) .ctx .lbl { display: none; }
:is(.h560:not(.w699), .h820:not(.w899)) .composer { grid-column: 2; grid-row: 1 / 4; border-top: 0; border-left: var(--b); max-height: none; padding: 10px; }
/* A finished chat: Close chat and End shift stacked in the middle of the side panel, not stranded at the top. */
:is(.h560:not(.w699), .h820:not(.w899)) .composer.done { justify-content: center; }
:is(.h560:not(.w699), .h820:not(.w899)) .composer.done .closebar { flex-direction: column; justify-content: center; text-align: center; padding: 0; }
:is(.h560:not(.w699), .h820:not(.w899)) .composer.done .closebar .btn { min-width: 200px; justify-content: center; margin: 0; }
:is(.h560:not(.w699), .h820:not(.w899)) .clockin { grid-column: 1 / 3; grid-row: 1 / 4; }
.h560:not(.w699) .preview { font-size: .95rem; min-height: 40px; padding: 7px 10px; }
.h560:not(.w699) .opt { font-size: .9rem; padding: 6px 10px; }
.h560.w699 .convhead img.avatar { width: 40px; height: 40px; }
.h560.w699 .composer { max-height: 58%; }

/* ---------------- browser ---------------- */
/* One bar: back, then a tab per site. No addresses. */
.navbar { display: flex; align-items: flex-end; gap: 4px; padding: 6px 9px 0; background: var(--cream); border-bottom: var(--b); flex: none; }
.navbar .navbtn { margin: 0 4px 6px 0; }
.navbtn { border: var(--b); background: #fff; width: 30px; height: 28px; cursor: pointer; border-radius: 6px; font-weight: 700; line-height: 1; padding: 0; color: var(--ink); box-shadow: 1.5px 1.5px 0 var(--shc); }
.navbtn:hover:not(:disabled) { background: var(--yellow-soft); }
.navbtn:disabled { opacity: .35; cursor: default; }
.tabs-row { display: flex; gap: 4px; min-width: 0; overflow: hidden; }
.tabs-row button { border: var(--b); border-bottom: 0; background: var(--cream2); font: 700 .76rem/1.2 var(--display); padding: 9px 12px 8px; cursor: pointer; border-radius: 8px 8px 0 0; color: var(--ink2); white-space: nowrap; margin-bottom: -1.5px; }
.tabs-row button:hover { color: var(--ink); background: #fff; }
.tabs-row button.on { background: #fff; color: var(--ink); padding-bottom: 10px; }
.page { flex: 1; min-height: 0; overflow-y: auto; background: #fff; }
.status { flex: none; border-top: var(--b); background: var(--cream); font-size: .72rem; color: var(--muted); padding: 4px 12px; display: flex; justify-content: space-between; gap: 8px; }
/* Wikipedant keeps its own encyclopedia look inside the window. */
.wphead { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #e3e5ea; flex-wrap: wrap; }
.wplogo { font-family: Georgia, 'Times New Roman', serif; font-size: 1.25rem; line-height: 1.05; color: #202122; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
.wplogo small { display: block; font-size: .66rem; line-height: 1.2; color: #54595d; font-family: Arial, sans-serif; }
.wpsearch { display: flex; flex: 1; min-width: 160px; }
.wpsearch input { flex: 1; min-width: 0; font: .875rem Arial, sans-serif; border: 1px solid #a2a9b1; border-right: 0; padding: 6px 10px; border-radius: 3px 0 0 3px; }
.wpsearch input:focus, .wpsearch input:focus-visible { outline: none; border-color: #36c; box-shadow: inset 0 0 0 1px #36c; }
.wpsearch:focus-within button { border-color: #36c; }
.wpsearch button { border: 1px solid #a2a9b1; background: #f8f9fa; padding: 0 12px; font: .85rem Arial, sans-serif; cursor: pointer; border-radius: 0 3px 3px 0; }
.wpbody { padding: 12px 18px 22px; font-family: Arial, Helvetica, sans-serif; font-size: .92rem; line-height: 1.6; color: #202122; }
.wpbody h1 { font-family: Georgia, 'Linux Libertine', 'Times New Roman', serif; font-weight: 400; font-size: 1.65rem; margin: 0; border-bottom: 1px solid #a2a9b1; padding-bottom: 2px; }
.wpbody .from { font-size: .78rem; color: #54595d; margin: 4px 0 10px; }
.wpbody h2 { font-family: Georgia, 'Linux Libertine', 'Times New Roman', serif; font-weight: 400; font-size: 1.25rem; margin: 16px 0 6px; border-bottom: 1px solid #a2a9b1; padding-bottom: 1px; }
.wpbody p { margin: 0 0 10px; }
.wpbody a, .linkish { color: var(--link); cursor: pointer; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; }
.wpbody a:hover, .linkish:hover { text-decoration: underline; }
.infobox { float: right; width: min(220px, 46%); margin: 0 0 10px 14px; border: 1px solid #a2a9b1; background: #f8f9fa; font-size: .8rem; line-height: 1.4; }
.infobox .ib-title { text-align: center; font-weight: 700; font-size: .9rem; padding: 5px; background: #dfe6ec; }
.ibrow { display: grid; grid-template-columns: 44% 56%; gap: 6px; padding: 4px 8px; border-top: 1px solid #e3e3e3; cursor: pointer; }
.ibrow .k { font-weight: 700; }
.sent { cursor: pointer; border-radius: 3px; transition: background .1s; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sent:hover, .ibrow:hover { background: #fff1a0; }
.sent.clipped, .ibrow.clipped { background: #c8efd6; box-shadow: inset 0 -2px 0 #2f9e6d; }
.seealso { clear: both; font-size: .85rem; margin-top: 14px; padding-top: 6px; border-top: 1px solid #eaecf0; }
.results { list-style: none; margin: 6px 0 0; padding: 0; }
.results li { margin-bottom: 14px; }
.results .rt { font-size: 1rem; }
.results .rs { font-size: .8rem; color: #54595d; }
.wphome { text-align: center; padding: 28px 16px; }
.wphome h1 { border: 0; font-size: 2rem; line-height: 1.1; padding: 0; }
.wphome .from { margin: 0; font-size: .85rem; }
.wphome .count { font-size: .75rem; color: #54595d; margin-top: 10px; }
.wphome .wpsearch { max-width: 420px; margin: 16px auto; }
.wphome .feat { text-align: left; max-width: 420px; margin: 12px auto 0; font-size: .8rem; line-height: 1.45; color: #54595d; padding: 8px 0 0; border-top: 1px solid #eaecf0; }
.wphome .feat b { font-weight: 400; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.wphome .feat h3 { font: 400 .95rem/1.2 Georgia, 'Times New Roman', serif; margin: 2px 0 2px; color: #202122; }
.wphome .feat ul { margin: 4px 0 0; padding-left: 18px; }
.inhead { background: var(--ink); color: #fff; padding: 11px 16px; font-size: .85rem; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.inhead b { font: 700 1rem/1.2 var(--display); }
.inbody { padding: 14px 18px 22px; font-size: .92rem; line-height: 1.6; }
.inbody h1 { font: 700 1.3rem/1.2 var(--display); margin: 0 0 8px; }
/* Humbled, the professional network */
.hbhead { background: var(--accent); color: #fff; padding: 10px 16px; display: flex; align-items: baseline; gap: 10px; border-bottom: var(--b); }
.hbhead b { font: 700 1.15rem/1.2 var(--display); background: #fff; color: var(--accent); padding: 1px 8px; border: var(--b); border-radius: 6px; box-shadow: var(--sh-sm); }
.hbhead span { font-size: .8rem; opacity: .9; }
.hbbody { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; padding: 14px; background: var(--cream); min-height: 100%; align-items: start; }
.w760 .hbbody { grid-template-columns: minmax(0, 1fr); }
.hbside { display: grid; gap: 12px; }
.hbcard, .hbpost { background: #fff; border: var(--b); border-radius: var(--r-sm); box-shadow: var(--sh-sm); padding: 12px; font-size: .85rem; }
.hbcard { display: grid; gap: 4px; justify-items: start; }
.hbcard small { color: var(--muted); }
.hbstat { font-size: .75rem; color: var(--ink2); border-top: 1px solid var(--hair); padding-top: 5px; width: 100%; }
.hbnews ul { margin: 0; padding-left: 16px; font-size: .8rem; line-height: 1.45; }
.hbfeed { display: grid; gap: 12px; }
.hbpost header { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 8px; }
.hbpost header > div { display: grid; line-height: 1.3; }
.hbpost header small { color: var(--muted); font-size: .72rem; }
.hbpost p { margin: 0 0 6px; line-height: 1.5; }
.hbpost footer { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--hair); font-size: .75rem; color: var(--muted); }
.inbody h2 { font: 700 1rem/1.3 var(--display); margin: 14px 0 4px; }
.inbody p { margin: 0 0 8px; }
.inlist { list-style: none; padding: 0; margin: 0; }
.inlist li { padding: 8px 0; border-bottom: 1px solid #eee; }
.inlist small { display: block; color: var(--muted); }
.w460 .infobox { float: none; width: auto; margin: 0 0 12px; }
.w460 .wpbody { padding: 10px 12px 18px; }
.w460 .status span:first-child { display: none; }

/* ---------------- memo ---------------- */
.memo { background: #fff6c9; flex: 1; overflow-y: auto; padding: 12px 16px; font-size: .85rem; line-height: 1.5; }
.memo .from { font-size: .75rem; color: #6b5a12; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1.5px dashed rgba(22, 22, 29, .25); }
.memo ol { margin: 0 0 8px; padding-left: 20px; }
.memo li { margin-bottom: 6px; }
.memo table { width: 100%; border-collapse: collapse; font-size: .8rem; margin-top: 4px; }
.memo td { padding: 3px 4px; border-top: 1.5px dashed rgba(22, 22, 29, .2); }
.memo td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.memo h5 { margin: 12px 0 0; font: 700 .68rem/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #6b5a12; }

/* ---------------- inbox ---------------- */
.inbox { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.maillist { border-right: var(--b); overflow-y: auto; background: var(--cream); padding: 8px 8px 8px 6px; }
.mailitem { display: flex; gap: 10px; width: 100%; text-align: left; border: 2px solid transparent; background: none; padding: 8px 9px; cursor: pointer; align-items: flex-start; border-radius: var(--r-sm); margin-bottom: 4px; }
.mailitem:hover { background: rgba(255, 255, 255, .6); border-color: var(--hair); }
.mailitem.viewing { background: #fff; border-color: var(--ink); box-shadow: var(--sh-sm); }
.mailitem .m { flex: 1; min-width: 0; font-size: .78rem; color: var(--muted); }
.mailitem .m b { display: block; color: var(--ink); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mailitem.unreadmail .m b::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); border: 1.5px solid var(--ink); margin-right: 6px; vertical-align: 0; }
.mailitem .subj { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.mailitem .when { font-size: .7rem; color: var(--muted); white-space: nowrap; flex: none; padding-top: 2px; }
.mailread { overflow-y: auto; padding: 20px 24px; background: #fff; }
.mailread h3 { margin: 0 0 12px; font: 700 1.25rem/1.25 var(--display); letter-spacing: -.01em; }
.mailread .hdr { display: flex; gap: 12px; align-items: center; font-size: .82rem; color: var(--muted); padding-bottom: 12px; border-bottom: var(--b); margin-bottom: 14px; }
.mailread .hdr b { color: var(--ink); }
.mailread p { margin: 0 0 10px; font-size: .95rem; }
.mailread .choices { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1.5px dashed var(--hair); }
.mailread .choices span { font: 700 .72rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mailread .replied { margin-top: 16px; padding: 10px 12px; border: var(--b); border-radius: var(--r-sm); background: var(--mint-soft); font-size: .9rem; box-shadow: var(--sh-sm); }
.w620 .inbox { grid-template-columns: 1fr; grid-template-rows: 38% minmax(0, 1fr); }
.w620 .maillist { border-right: 0; border-bottom: var(--b); }
.w620 .mailread { padding: 14px 16px; }

/* ---------------- recycle bin, notes, snake ---------------- */
.files { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; align-content: flex-start; flex: 1; overflow-y: auto; background: #fff; }
.file { width: 104px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 2px solid transparent; border-radius: var(--r-sm); padding: 8px; cursor: pointer; font-size: .76rem; font-weight: 500; text-align: center; }
.file img { filter: drop-shadow(2px 2px 0 var(--shc)); }
.file:hover { background: var(--yellow-soft); border-color: var(--ink); }
.notebody { flex: 1; overflow-y: auto; padding: 16px 20px; background: #fff; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; line-height: 1.65; white-space: pre-wrap; }
.snake { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px; background: var(--cream); }
.snake .board { width: min(calc(var(--cw) - 28px), calc(var(--ch) - 80px)); aspect-ratio: 1; border: var(--b); border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--sh); background: var(--paper); }
.snake canvas { display: block; touch-action: none; }
.snake .play { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.snake.side .play { flex-direction: row; }
/* Touch: room for the pad beside the board, or below it in a tall window */
html.touch .snake .board { width: min(calc(var(--cw) - 28px), calc(var(--ch) - 250px)); }
html.touch .snake.side .board { width: min(calc(var(--cw) - 210px), calc(var(--ch) - 80px)); }
.snake .pad { display: grid; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 50px); gap: 6px; flex: none; }
.snake .pad .btn { justify-content: center; padding: 0; font-size: 1rem; touch-action: none; }
.snake .pad [data-pad="up"] { grid-column: 2; }
.snake .pad [data-pad="left"] { grid-column: 1; }
.snake .pad [data-pad="down"] { grid-column: 2; }
.snake .pad [data-pad="play"] { font-size: .8rem; }
.snake .bar { display: flex; gap: 16px; font-size: .8rem; font-weight: 500; flex-wrap: wrap; justify-content: center; }
.snake .bar b { font-family: var(--display); }

/* ---------------- paint ---------------- */
.paint { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--cream); }
.paint .brief { padding: 10px 14px; border-bottom: var(--b); background: var(--paper); font-size: .85rem; display: flex; flex-direction: column; gap: 2px; }
.paint .brief b { font: 700 .72rem/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ptools { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 14px 4px; }
.pals { display: flex; flex-wrap: wrap; gap: 5px; }
.pal { width: 26px; height: 26px; border: var(--b); border-radius: 6px; cursor: pointer; padding: 0; }
.pal.on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.pbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.tool { border: var(--b); background: #fff; border-radius: 999px; padding: 4px 11px; font: 700 .74rem/1.2 var(--display); cursor: pointer; box-shadow: 1.5px 1.5px 0 var(--shc); }
.tool:hover { background: var(--yellow-soft); }
.tool.on { background: var(--yellow); }
.pstage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px 14px; }
.pgrid {
  display: grid; grid-template-columns: repeat(var(--w), 1fr); grid-template-rows: repeat(var(--h), 1fr); aspect-ratio: 3 / 2;
  width: min(var(--cw) - 28px, (var(--ch) - 210px) * 1.5); border: var(--b); border-radius: 6px; overflow: hidden; background: #fff; box-shadow: var(--sh);
  touch-action: none; cursor: crosshair; position: relative; user-select: none;
}
.pgrid i { box-shadow: inset 0 0 0 .5px rgba(22, 22, 29, .08); }
/* Thirds guides, drawn over the grid without catching the pointer. */
.pgrid.guides::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent calc(33.33% - 1px), rgba(22, 22, 29, .45) calc(33.33% - 1px) calc(33.33% + 1px), transparent calc(33.33% + 1px) calc(66.66% - 1px), rgba(22, 22, 29, .45) calc(66.66% - 1px) calc(66.66% + 1px), transparent calc(66.66% + 1px)),
    linear-gradient(180deg, transparent calc(33.33% - 1px), rgba(22, 22, 29, .45) calc(33.33% - 1px) calc(33.33% + 1px), transparent calc(33.33% + 1px) calc(66.66% - 1px), rgba(22, 22, 29, .45) calc(66.66% - 1px) calc(66.66% + 1px), transparent calc(66.66% + 1px));
  -webkit-mask: repeating-linear-gradient(45deg, #000 0 4px, transparent 4px 7px); mask: repeating-linear-gradient(45deg, #000 0 4px, transparent 4px 7px);
}
.pfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px 12px; }
.h420 .paint .brief { display: none; }
.h420 .pgrid { width: min(var(--cw) - 28px, (var(--ch) - 130px) * 1.5); }

/* ---------------- office events ---------------- */
.office {
  position: fixed; right: 18px; bottom: 72px; width: min(360px, calc(100vw - 36px)); background: var(--paper); border: var(--b);
  border-radius: var(--r); box-shadow: var(--sh-lg); z-index: 30; overflow: hidden; animation: slidein .3s ease-out;
}
@keyframes slidein { from { transform: translateY(20px); opacity: 0; } }
.office .oh { display: flex; gap: 10px; align-items: center; padding: 12px 14px 4px; font-size: .75rem; color: var(--muted); }
.office .oh b { color: var(--ink); font: 700 .95rem/1.2 var(--display); display: block; }
.office .ob { padding: 6px 14px 10px; font-size: .92rem; }
.office .oc { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
.office .oc .btn { font-size: .8rem; padding: 6px 11px; }
.office .timer { height: 5px; background: var(--accent); border-bottom: var(--b); transform-origin: left; animation: shrink linear forwards; }
@keyframes shrink { to { transform: scaleX(0); } }

/* ---------------- overlays ---------------- */
.overlay { position: fixed; inset: 0; background: rgba(22, 22, 29, .5); display: flex; z-index: 50; padding: 16px; overflow: auto; }
.overlay > * { margin: auto; }
.card { background: var(--paper); border: var(--b); box-shadow: 8px 8px 0 var(--shc); max-width: 620px; width: 100%; border-radius: 14px; overflow: hidden; }
.card .titlebar { height: auto; padding: 14px 18px; font-size: 1.05rem; }
.card .titlebar.danger { background: var(--bad); color: #fff; }
.card .inner { padding: 16px 20px 18px; }
.card table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 4px 0 14px; }
.card td, .card th { border-bottom: 1.5px solid var(--hair); padding: 7px 4px; text-align: left; vertical-align: middle; }
.card th { font: 700 .72rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card tr:last-child th { border-bottom: 0; border-top: var(--b); color: var(--ink); font-size: .85rem; }
.card td.num, .card th.num { text-align: right; font-variant-numeric: tabular-nums; }
.card .who { display: flex; gap: 10px; align-items: center; }
.card ul { padding-left: 18px; margin: 6px 0; }
.card li { margin-bottom: 4px; }
.card .actions { justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.quote { background: #fff; border: var(--b); padding: 11px 13px; margin: 12px 0; font-size: .92rem; border-radius: var(--r); display: flex; gap: 12px; align-items: flex-start; box-shadow: var(--sh-sm); }
.headline { font-family: Georgia, serif; font-size: 1.75rem; line-height: 1.15; margin: 4px 0 10px; }

/* Title screen: its own flat screen over the desktop. Name and menu on the left, a strip of faces on the right,
   and every secondary control (sound, About, saves) with the disclaimer in a paper strip along the bottom, like the
   taskbar. Stacks on narrow screens. */
/* The desktop's dot grid, so the title reads as the same wall with the windows cleared away */
.overlay.title-ov { background: radial-gradient(rgba(22, 22, 29, .16) 1.2px, transparent 1.2px) 0 0 / 24px 24px, var(--wall); padding: 0; overflow-x: hidden; }
.overlay.title-ov > .title-screen { margin: 0; flex: 1; align-self: flex-start; min-height: 100%; min-width: 0; display: flex; flex-direction: column; }
.ts-main { flex: 1; display: flex; min-width: 0; }
/* The content sits in the middle of whatever the strip of faces leaves */
.ts-left { flex: 1; min-width: 0; display: flex; justify-content: center; align-items: center; padding: 40px 48px; }
.ts-inner { width: 540px; max-width: 100%; }
/* The eyebrow: a small yellow label stuck on at a slight angle */
.title-screen .madein { display: flex; align-items: center; gap: 7px; width: max-content; max-width: 100%; margin: 0 0 22px; font: 700 .9rem/1.2 var(--display); color: var(--ink); background: var(--yellow); border: var(--b); border-radius: var(--r-sm); padding: 5px 12px; box-shadow: var(--sh-sm); transform: rotate(-2.5deg); transform-origin: left center; }
.title-screen .madein .ukflag { width: 26px; height: 26px; }
/* The name: its letters drop in one by one, then every few seconds a small wave runs along them */
.title-screen .mark { margin: 0; font: 700 6rem/.88 var(--display); letter-spacing: -.04em; color: #fff; text-shadow: 4px 4px 0 var(--shc); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.title-screen .mark .w { display: inline-block; white-space: nowrap; }
.title-screen .mark .ch { display: inline-block; animation: markIn .6s cubic-bezier(.3, 1.5, .55, 1) calc(.15s + var(--i) * 45ms) backwards, markWave 7s ease-in-out calc(2.2s + var(--i) * 70ms) infinite; }
@keyframes markIn { from { opacity: 0; transform: translateY(-.45em) rotate(-10deg) scale(.8); } }
@keyframes markWave { 0%, 6%, 100% { transform: none; } 3% { transform: translateY(-.1em) rotate(-3deg); } }
/* A deep indigo rather than ink: black body text clashes with the wall colour */
.title-screen .premise { max-width: 460px; margin: 20px 0 0; font: 600 1.3rem/1.35 var(--display); color: #1d2168; }
.title-screen .menu { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.title-screen .menu .btn { min-width: 170px; justify-content: center; }
/* The faces: columns drifting up and down, alternate columns the other way. The columns are positioned inside the
   strip, so however tall they are they never stretch the page. Each track holds its set twice, so sliding it half
   its height loops without a seam. */
.title-screen .faces { flex: none; width: 400px; position: relative; overflow: hidden; border-left: var(--b); background: rgba(22, 22, 29, .07); }
.title-screen .fcols { position: absolute; inset: 0; display: flex; justify-content: center; gap: 16px; }
.title-screen .fr { flex: none; overflow: hidden; padding-right: 6px; }
.title-screen .track { display: flex; flex-direction: column; animation: facesY linear infinite; will-change: transform; }
.title-screen .fr:nth-child(2) .track { animation-direction: reverse; }
.title-screen .faces img { display: block; flex: none; margin-bottom: 16px; box-shadow: var(--sh); }
@keyframes facesY { to { transform: translateY(-50%); } }
@keyframes facesX { to { transform: translateX(-50%); } }
@media (max-width: 1100px) { .title-screen .faces { width: 270px; } .title-screen .fr:nth-child(3) { display: none; } }
.ts-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: nowrap; background: var(--paper); border-top: var(--b); padding: 10px 16px; }

/* The wrap sets the width (leaving room for the badge's 8px shadow) so the badge never outgrows a narrow overlay. */
.badgewrap { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 588px; padding-right: 8px; box-sizing: border-box; }
.lanyard { width: 26px; height: 42px; background: repeating-linear-gradient(45deg, var(--accent) 0 8px, var(--accent-d) 8px 16px); border: var(--b); border-bottom: 0; }
.clip { width: 44px; height: 14px; background: #d8d3c4; border: var(--b); border-radius: 4px; margin-bottom: -5px; position: relative; z-index: 1; }
.badge { width: 100%; background: var(--paper); border: var(--b); border-radius: 16px; box-shadow: 8px 8px 0 var(--shc); overflow: hidden; }
.badge-top { background: var(--accent); color: #fff; padding: 12px 18px; font: 700 1.05rem/1.2 var(--display); letter-spacing: .02em; border-bottom: var(--b); }
.badge-top small { display: block; font: 500 .8rem/1.3 var(--font); opacity: .9; letter-spacing: 0; }
.badge-body { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 16px 18px; }
.photo { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.photo img { box-shadow: var(--sh); }
.fields label, .fields .lbl { display: block; font: 700 .7rem/1.2 var(--display); letter-spacing: .08em; color: var(--muted); margin-bottom: 11px; text-transform: uppercase; }
.fields input, .fields select { width: 100%; font: 500 .95rem/1.3 var(--font); border: var(--b); padding: 7px 10px; margin-top: 4px; background: #fff; color: var(--ink); border-radius: var(--r-sm); text-transform: none; letter-spacing: 0; }
.fields .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.swrow { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.sw { width: 24px; height: 24px; border: var(--b); cursor: pointer; padding: 0; border-radius: 6px; }
.sw.on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.stylebtn { border: var(--b); background: #fff; font: 700 .74rem/1.3 var(--display); padding: 3px 10px; cursor: pointer; border-radius: 999px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.stylebtn:hover { background: var(--yellow-soft); }
.stylebtn.on { background: var(--yellow); box-shadow: var(--sh-sm); }
.badge-role { background: var(--yellow); border-top: var(--b); border-bottom: var(--b); text-align: center; font: 700 .8rem/1.2 var(--display); letter-spacing: .14em; padding: 8px; }
.badge-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 18px; }
.barcode { height: 28px; flex: 1; max-width: 130px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); }
@media (max-width: 640px) { .badge-body { grid-template-columns: 1fr; } }
@media (max-height: 560px) { .lanyard, .clip { display: none; } }

.toast {
  position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 8px 16px; font-size: .85rem; font-weight: 500;
  z-index: 60; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 90vw; text-align: center; border-radius: var(--r-sm); border: 2px solid var(--paper); box-shadow: 4px 4px 0 rgba(22, 22, 29, .35);
}
.toast.show { opacity: 1; }

/* ---------------- one window at a time (tablets, small screens) ---------------- */
body.tabs .desk-icons, body.tabs .wallmark { display: none; }
body.tabs .win { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; box-shadow: none; border-width: 0; resize: none; }
body.tabs .win:not(.front) { display: none; }
body.tabs .titlebar .ctl .mx, body.tabs .titlebar .ctl .mn { display: none; }
body.tabs .logo small, body.tabs .me .role { display: none; }
body.tabs .topbar { gap: 8px; padding: 5px 10px; }
body.tabs .chip { font-size: .8rem; padding: 2px 9px; }
body.tabs .meter, body.tabs .meter.prog { --w: 60px; }
body.tabs .nextms { display: none; }
@media (max-width: 560px) { .me div, #dayChip:not(.cd) .lbl { display: none; } }
body.short .topbar { padding: 4px 10px; }
body.short .logo { font-size: .95rem; }
body.short .taskbar { min-height: 42px; }
body.short .taskbtn { padding: 3px 8px; }
/* ---------------- night shift ---------------- */
body.night { --wall: #26285a; }
body.night .desktop::before { background-image: radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1.3px), radial-gradient(rgba(255, 255, 255, .25) 1px, transparent 1.2px); background-size: 90px 70px, 37px 53px; background-position: 0 0, 18px 9px; }
body.night .wallmark { color: rgba(255, 255, 255, .14); }
body.night .desk-icon img { filter: drop-shadow(2px 2px 0 #000); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Developer terminal */
.t-terminal { background: var(--lime); }
.term { flex: 1; height: 100%; display: flex; flex-direction: column; min-height: 0; background: var(--ink); color: #e9e7f2; font: .8125rem/1.45 ui-monospace, Consolas, monospace; }
.term-out { flex: 1; overflow-y: auto; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; }
/* Line types are prefixed (tl-sys, not sys): the chat log's .sys style (a white box) used to catch the terminal's lines. */
.term .tl-in { color: #fff; margin-top: 6px; } .term .tl-in b, .term-in b { color: var(--lime); }
.term .tl-err { color: #ff9b8f; }
.term .tl-warn { color: var(--ink); background: var(--yellow); padding: 6px 9px; margin-bottom: 8px; border-radius: 4px; }
.term-in { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-top: 2px solid #3d3c48; }
.term-in input { flex: 1; background: var(--ink); -webkit-text-fill-color: #fff; border: 0; outline: 0; color: #fff; font: inherit; -webkit-appearance: none; appearance: none; border-radius: 0; caret-color: var(--lime); }
/* The password is masked without type=password, so no password manager paints the field white. */
.term-in input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--ink) inset; -webkit-text-fill-color: #fff; }

/* Review queue (Act 3) */
.t-review { background: var(--orange); }
.rv { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.rv-list { border-right: var(--b); background: var(--cream); overflow-y: auto; display: flex; flex-direction: column; min-width: 0; padding-bottom: 6px; }
.rv-list h4 { margin: 0; padding: 12px 14px 2px; font: 700 .7rem/1.2 var(--display); letter-spacing: .1em; color: var(--muted); }
.rv-main { overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; background: var(--paper); }
.rv-q { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: var(--b); border-radius: var(--r); padding: 10px 12px; box-shadow: var(--sh-sm); }
.rv-q p { margin: 4px 0 0; }
.rv-by { display: flex; gap: 8px; align-items: center; font-size: .9rem; color: var(--ink2); }
.rv-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rv-line { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: center; background: #fff; border: var(--b); border-radius: var(--r-sm); padding: 9px 12px; box-shadow: 3px 3px 0 var(--shc); }
.rv-line .lbl { font: 700 .7rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rv-src { font-size: .88rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rv-main .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: auto; }
.w640 .rv { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
.w640 .rv-list { max-height: 150px; border-right: 0; border-bottom: var(--b); }

/* Hiring */
.card.wide { max-width: 860px; }
.cvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 12px 0; }
.cv { text-align: left; background: #fff; border: var(--b); border-radius: var(--r); padding: 12px; cursor: pointer; font: inherit; box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 8px; transition: transform .06s; }
.cv:hover { transform: translate(-1px, -1px); box-shadow: var(--sh); }
.cv.on { background: var(--mint-soft); outline: 3px solid var(--ink); }
.cv-top { display: flex; align-items: center; gap: 10px; font: 700 1rem/1.2 var(--display); }
.cv ul { margin: 0; padding-left: 18px; font-size: .88rem; }
.cv-ref { font-size: .85rem; font-style: italic; color: var(--ink2); border-top: 1.5px dashed var(--faint); padding-top: 8px; }
.cv-ref small { display: block; font-style: normal; color: var(--muted); margin-top: 2px; }

/* Source tag: a small bookmark ribbon */
.srcmark { flex: none; width: 8px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M1 1h6v8L4 7 1 9z' fill='none' stroke='%2316161d' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Bin: saved drawings */
.file .thumb { width: 54px; height: 36px; border: 1.5px solid var(--ink); border-radius: 4px; image-rendering: pixelated; background: #fff; }

/* Phones and tablets: the taskbar is a row of app icons that never scrolls */
body.tabs .taskbar { gap: 6px; padding-right: 8px; }
body.tabs .taskbar .apps { flex: 1; overflow: visible; justify-content: space-around; gap: 4px; padding: 2px 0 4px; }
body.tabs .taskbar .spacer { display: none; }
/* Labels beside the icons when they all fit (fitTaskbar() in desktop.js); icons alone when they don't. */
body.tabs .taskbtn { padding: 8px 14px; flex: 1 1 auto; max-width: 190px; justify-content: center; font-size: .85rem; }
body.tabs .taskbtn img.icon { width: 20px; height: 20px; }
body.tabs .taskbar.measuring .taskbtn { flex: none; max-width: none; }
body.tabs .taskbtn .count { position: absolute; top: -7px; right: -7px; padding: 0 5px; }
body.tabs .taskbar.icons-only .taskbtn { padding: 6px; flex: 0 1 40px; min-width: 0; }
body.tabs .taskbar.icons-only .taskbtn > span:not(.count) { display: none; }
body.tabs .clock { font-size: .75rem; }
.rv-team { display: flex; flex-direction: column; gap: 5px; padding: 6px 14px 8px; border-bottom: 1.5px dashed var(--faint); }
.rv-mate { display: flex; align-items: center; gap: 8px; font-size: .82rem; min-width: 0; }
.rv-mate img { flex: none; }
.rv-mate span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-mate b { font: 700 .75rem/1 var(--display); }

/* Answer options: source and detail tags sit together, compactly */
.opt .tags { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: auto; max-width: 45%; }
.opt .tags .tag { font-size: .64rem; padding: 3px 6px 2px; }
.opt .tags .tag + .tag { margin-left: 0; }

/* Scrollbars that match the ink-and-paper look */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--yellow); }
::-webkit-scrollbar-corner { background: transparent; }
@supports (-moz-appearance: none) { * { scrollbar-color: var(--ink2) transparent; scrollbar-width: thin; } }

/* Bin: long file names wrap onto two lines at most */
.file span { max-width: 100%; overflow-wrap: anywhere; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.binask { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: var(--yellow-soft); border: var(--b); border-radius: var(--r-sm); padding: 10px 12px; font-size: .88rem; box-shadow: var(--sh-sm); }
.binask span { display: flex; gap: 8px; }

/* End of shift */
.card.report { max-width: 660px; }
.rp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.rp-stats > div { background: #fff; border: var(--b); border-radius: var(--r-sm); padding: 10px 12px; box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 2px; }
.rp-stats small { font: 700 .68rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rp-stats b { font: 700 1.5rem/1.1 var(--display); }
.rp-stats em { font-style: normal; font-size: .75rem; color: var(--muted); }
.rp-stats .pos { color: var(--good); } .rp-stats .neg { color: var(--bad); }
/* Acts 4 and 5: the team on the report */
.rp-team { margin: 14px 0 6px; padding: 10px 12px; border: var(--b); border-radius: var(--r-sm); background: var(--yellow-soft); box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 8px; }
.rp-team h4 { margin: 0; display: flex; justify-content: space-between; gap: 10px; font: 700 .9rem/1.2 var(--display); }
.rp-team h4 span { font: 500 .8rem/1.2 var(--font); color: var(--muted); }
.rp-meter { --w: 100%; width: 100%; }
.rp-faces { display: flex; flex-wrap: wrap; gap: 10px; }
.rp-face { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 52px; opacity: .55; }
.rp-face.safe { opacity: 1; }
.rp-face small { font: 700 .72rem/1.1 var(--display); }
.rp-face.new img, .rp-face.new svg { animation: bump .7s ease-out; }
.rp-beat { margin: 0; font-size: .85rem; }
.rp-beat.good { font-weight: 700; }
.rp-goal { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 10px; font-size: .88rem; }
.rp-goal .meter { --w: 100%; width: 100%; }
.rp-goal small { color: var(--muted); }
.rp-rows { display: flex; flex-direction: column; border-top: 1.5px solid var(--hair); margin-bottom: 12px; }
.rp-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 44px; gap: 10px; align-items: center; padding: 7px 2px; border-bottom: 1.5px solid var(--hair); }
.rp-row .nm { display: flex; flex-direction: column; font-weight: 700; font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-row .nm small { font-weight: 400; color: var(--muted); font-size: .76rem; }
.rp-row .num { text-align: right; font: 700 .95rem/1 var(--display); }
.rp-row .num.pos { color: var(--good); } .rp-row .num.neg { color: var(--bad); }
.rp-notes { background: #fff; border: var(--b); border-radius: var(--r-sm); padding: 10px 14px; margin: 0 0 4px; box-shadow: var(--sh-sm); }
.rp-notes h4 { margin: 0 0 4px; font: 700 .7rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rp-notes ul { margin: 0; padding-left: 18px; font-size: .88rem; }
.report .actions { display: flex; align-items: center; gap: 12px; }
.rp-save { margin-right: auto; font-size: .82rem; }
@media (max-width: 540px) { .rp-stats { grid-template-columns: 1fr; } }

/* Saves */
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.savedline { font-size: .82rem; color: var(--muted); margin-top: 10px; }
.tick { width: 1.15em; height: 1.15em; vertical-align: -.22em; margin-right: .3em; flex: none; }
.savebar { display: flex; gap: 18px; justify-content: center; margin-top: 18px; font-size: .88rem; }

/* Console: end a shift early */
.early { margin: 10px 8px 4px; padding: 8px 10px; border: 1.5px dashed var(--ink2); border-radius: var(--r-sm); display: flex; flex-direction: column; gap: 6px; font-size: .78rem; color: var(--ink2); }
.early .btn { justify-content: center; font-size: .8rem; }

/* Review: what happened to the last draft */
.rv-src .srclink { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.rv-src .srclink:hover { background: var(--yellow-soft); }
.rv-last { border: var(--b); border-radius: var(--r-sm); background: var(--mint-soft); padding: 8px 12px; font-size: .85rem; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.rv-last.warn { background: #ffe1d9; }
.rv-last ul { flex-basis: 100%; margin: 2px 0 0; padding-left: 18px; }

/* Title screen extras: the save links are proper little buttons */
.ukflag { width: 32px; height: 32px; flex: none; display: block; margin: -6px -4px -6px 0; }
.savebar .linkbtn, .title-prefs .linkbtn { background: var(--paper); color: var(--ink); text-decoration: none; border: var(--b); border-radius: var(--r-sm); padding: 7px 12px; font: 700 .8rem/1 var(--display); box-shadow: var(--sh-sm); }
.savebar .linkbtn:hover, .title-prefs .linkbtn:hover { background: var(--yellow-soft); }
.title-prefs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: none; }
.title-prefs .sep { width: 2px; height: 22px; background: var(--hair); margin: 0 4px; }
.devicenote { max-width: 420px; margin: 30px 0 0; padding: 10px 14px; background: var(--yellow); color: var(--ink); border: var(--b); border-radius: var(--r-sm); box-shadow: var(--sh); font-size: .85rem; line-height: 1.4; text-align: left; transform: rotate(.6deg); }
.devicenote p { margin: 0; }
.devicenote p + p { margin-top: 8px; padding-top: 8px; border-top: 1.5px dashed rgba(22, 22, 29, .35); }
.devicenote b { display: block; font-family: var(--display); font-size: .95rem; margin-bottom: 2px; }
.devicenote .linkbtn { display: block; width: -webkit-fit-content; width: fit-content; margin-top: 8px; background: var(--paper); color: var(--ink); text-decoration: none; border: var(--b); border-radius: var(--r-sm); padding: 6px 11px; font: 700 .8rem/1 var(--display); box-shadow: var(--sh-sm); }
/* Beside the buttons, taking whatever width is left and wrapping onto more lines rather than dropping underneath */
.title-screen .disclaimer { flex: 0 1 520px; min-width: 0; margin: 0 0 0 auto; font-size: .7rem; line-height: 1.45; color: var(--ink2); text-align: right; text-wrap: balance; }
/* About and credits: above every other layer, including the overlay it may be opened over */
.overlay.about-ov { z-index: 70; }
.card.about h4 { margin: 14px 0 4px; font: 700 .78rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card.about td:first-child { font: 700 .85rem/1.3 var(--display); width: 70px; vertical-align: top; }
.card.about td { vertical-align: top; }
.card.about a { color: var(--link); }
.card.about .fine { font-size: .82rem; color: var(--ink2); margin: 6px 0; }

/* Title screen on narrower screens: one centred column, with two rows of faces drifting sideways across the top */
@media (max-width: 900px) {
  .ts-main { flex-direction: column; justify-content: flex-start; gap: 0; padding: 24px 0 0; text-align: center; }
  .ts-left { flex: 1; width: 100%; padding: 24px 16px 40px; }
  .ts-inner { display: flex; flex-direction: column; align-items: center; }
  .title-screen .madein { margin-left: auto; margin-right: auto; transform-origin: center; }
  .title-screen .menu { justify-content: center; }
  .title-screen .disclaimer { text-align: center; margin: 0 auto; flex: 1 1 100%; max-width: 520px; }
  .title-screen .faces { order: -1; width: 100%; height: 146px; border-left: 0; background: none; }
  .title-screen .fcols { flex-direction: column; justify-content: flex-start; gap: 12px; }
  .title-screen .fr { padding: 0 0 6px; }
  .title-screen .fr:nth-child(3) { display: none; }
  .title-screen .track { flex-direction: row; animation-name: facesX; }
  .title-screen .faces img { width: 64px; height: 64px; margin: 0 12px 0 0; }
  .ts-foot { flex-wrap: wrap; }
  .ts-foot, .title-prefs { justify-content: center; }
  .title-prefs { flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .title-screen .mark { font-size: 3.1rem; }
  /* The tagline wraps its words if it must, but the flag stays beside them */
  .title-screen .madein { width: -webkit-fit-content; width: fit-content; font-size: .75rem; padding: 5px 10px; gap: 6px; text-align: left; margin-bottom: 16px; }
  .title-screen .madein .ukflag { width: 22px; height: 22px; }
  .title-screen .menu { margin-top: 22px; }
  .title-screen .premise { font-size: 1.1rem; margin-top: 14px; }
  .title-screen .faces { height: 130px; }
  .title-screen .faces img { width: 56px; height: 56px; margin-right: 10px; }
  .title-prefs .sep { display: none; }
  .savebar { flex-wrap: wrap; }
}

/* Touch screens: no double-tap zoom, no accidental text selection or long-press menus. Typing still works.
   touch-action goes on everything because older iPad Safari only honours it on the element that was tapped. */
*, html, body { touch-action: manipulation; }
html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, select, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img { -webkit-user-drag: none; }
/* iOS zooms into any field with text under 16px when it's focused, so fields are 16px on touch screens. */
/* html.touch catches an iPad with a keyboard and trackpad attached, where pointer: coarse stops matching. */
@media (pointer: coarse) { input, textarea, select { font-size: 16px !important; } }
html.touch input, html.touch textarea, html.touch select { font-size: 16px !important; }

/* ---------- persistent threads ---------- */
.log .divider { align-self: stretch; display: flex; align-items: center; gap: 10px; font: 700 .66rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 4px 0; }
.log .divider::before, .log .divider::after { content: ''; flex: 1; border-top: 1.5px dashed var(--hair); }
.log .divider.now { color: var(--accent); }
.log .divider.now::before, .log .divider.now::after { border-top-color: var(--accent-soft); }
.bubble.old { opacity: .55; box-shadow: none; filter: grayscale(.6); font-size: .88rem; }
.bubble.old img.drawing { width: 120px; }
.bubble .picnote { display: block; font-size: .78rem; opacity: .8; }
.bubble.bot.model { background: #6d5bd0; }
.bubble.bot.model .name::after { content: 'model'; font: 700 .58rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 255, 255, .22); border-radius: 4px; padding: 2px 5px; }
img.drawing.kez { image-rendering: auto; width: 240px; height: auto; border: 0; background: none; } /* the picture has its own frame */
.tier.live { background: var(--bad); }

/* ---------- the Live feed (Acts 4 and 5): part of the console ---------- */
.convo.feedpane > .feedbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.feedmark { flex: none; width: 34px; height: 34px; border: var(--b); border-radius: 24%; background: #6d5bd0; color: #fff; font: 700 .74rem/30px var(--display); text-align: center; }
/* The scoreboard across the top of the console: you against Knowsley 2.0, and the way into the Live feed. */
.vsbar { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--lilac); border-bottom: var(--b); cursor: pointer; min-width: 0; }
.vsbar:hover { background: #d4c9fe; }
.vsbar.open { background: #ebe5ff; }
.vsbar.alert .feedmark { animation: vsPulse 1.2s ease-in-out infinite; }
@keyframes vsPulse { 50% { transform: scale(1.12); box-shadow: 0 0 0 4px var(--yellow); } }
.vs-lead { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.vs-lead b { font: 700 .88rem/1.2 var(--display); white-space: nowrap; }
.vs-lead small { font-size: .74rem; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-lead kbd { font-size: .66rem; padding: 0 4px; }
.vs-score { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.vs-n { display: flex; flex-direction: column; align-items: center; background: #fff; border: var(--b); border-radius: var(--r-sm); padding: 3px 10px; box-shadow: var(--sh-sm); line-height: 1.1; }
.vs-n b { font: 700 1.05rem/1.15 var(--display); font-variant-numeric: tabular-nums; }
.vs-n small { font: 700 .6rem/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vs-n.good b { color: var(--good); } .vs-n.bad b { color: var(--bad); }
.vs-score.ahead .vs-n.you { background: var(--good-soft); } .vs-score.behind .vs-n.you { background: var(--bad-soft); }
.vs-v { font: 700 .72rem/1 var(--display); font-style: normal; color: var(--ink2); }
.vs-tag { font: 700 .7rem/1 var(--display); border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 8px; background: #fff; white-space: nowrap; }
.vs-score.ahead .vs-tag { background: var(--good); color: #fff; } .vs-score.behind .vs-tag { background: var(--bad-soft); }
.vs-go { flex: none; font: 700 .76rem/1 var(--display); border: var(--b); border-radius: 999px; padding: 6px 11px; background: #fff; box-shadow: var(--sh-sm); white-space: nowrap; }
.vs-lead + .vs-go { margin-left: auto; }
.w760 .vs-lead small, .w620 .vs-tag { display: none; }
.w460 .vsbar { gap: 8px; padding: 6px 8px; } .w460 .vs-lead { display: none; } .w460 .vs-score { margin-left: 0; } .w460 .vs-go { margin-left: auto; }
.w460 .vs-n { padding: 2px 7px; }
/* Autopilot: a stopped draft, scored. */
.sys.drafted { font-size: .78rem; color: var(--ink2); background: var(--cream); box-shadow: none; }
.sys.catch { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: var(--cream); }
.sys.catch.good { background: var(--good-soft); }
.catch-tag { font: 700 .7rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 8px; background: #fff; flex: none; }
.sys.catch.good .catch-tag { background: var(--good); color: #fff; }
.catch-why { flex: 1; min-width: 0; }
.catch-pts { font: 700 1.2rem/1 var(--display); flex: none; }
.sys.catch.good .catch-pts { color: var(--good); animation: catchPop .5s ease-out; }
@keyframes catchPop { 0% { transform: scale(.4); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
.rt-time.drafting i { font-style: normal; animation: blinkDots 1.2s steps(2) infinite; }
@keyframes blinkDots { 50% { opacity: .2; } }
.feedearly { padding: 8px 12px 12px; border-top: var(--b); background: var(--cream); }
.feedearly .early { margin: 0; }
.t-feed { background: var(--lilac); }
.rt { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--paper); }
.rt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 12px; border-bottom: var(--b); background: var(--cream); }
.rt-stats > div { background: #fff; border: var(--b); border-radius: var(--r-sm); padding: 6px 10px; display: flex; flex-direction: column; box-shadow: var(--sh-sm); min-width: 0; }
.rt-stats small { font: 700 .62rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rt-stats b { font: 700 1.2rem/1.2 var(--display); font-variant-numeric: tabular-nums; }
.rt-stats em { font-style: normal; font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.rt-warn { margin: 0 12px; margin-top: 8px; padding: 7px 10px; border: var(--b); border-radius: var(--r-sm); background: var(--warn-soft); font-size: .82rem; font-weight: 700; }
.rt-warn.calm { background: var(--mint-soft); }
.rt-feed { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rt-feed h4 { margin: 4px 0 0; font: 700 .7rem/1.2 var(--display); letter-spacing: .1em; color: var(--muted); }
.rt-draft { background: #fff; border: var(--b); border-radius: var(--r); padding: 9px 11px; box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 7px; }
.rt-draft.sel { box-shadow: 4px 4px 0 var(--accent); }
.rt-draft.regular { background: var(--yellow-soft); }
.rt-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rt-who .nm { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: .9rem; }
.rt-time { font: 700 .75rem/1 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-msg { margin: 0; font-size: .9rem; }
.rt-msg.small { font-size: .8rem; color: var(--muted); }
.rt-draft .bubble { max-width: 100%; align-self: stretch; }
.rt-src { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .8rem; }
.rt-src b { font: 700 .62rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rt-src button.tag { cursor: pointer; margin: 0; }
.rt-src button.tag:hover { background: var(--yellow-soft); }
.rt-bar { height: 8px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--cream); overflow: hidden; }
.rt-bar i { display: block; height: 100%; background: var(--accent); transition: width .1s linear; }
.rt-bar.low i { background: var(--bad); }
.rt-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.rt-acts .btn { padding: 5px 11px; }
.rt-sent { background: #fff; border: var(--b); border-radius: var(--r); padding: 8px 11px; display: flex; flex-direction: column; gap: 6px; font-size: .85rem; }
.rt-sent.regular { background: var(--yellow-soft); }
.rt-sent.poor { border-color: var(--bad); }
.rt-sent .bubble { max-width: 100%; align-self: stretch; }
.rt-sent .stars { color: var(--ink); white-space: nowrap; font-size: .8rem; }
.rt-sent .stars i { font-style: normal; color: var(--hair); }
.rt-react { margin: 0; padding-left: 10px; border-left: 3px solid var(--hair); font-size: .82rem; }
.rt-sub { margin-top: 6px !important; }
.rt-acts .btn.small { padding: 4px 10px; font-size: .78rem; }
.rt-flagged { font: 700 .78rem/1.3 var(--display); align-self: flex-end; border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px 9px; }
.rt-flagged.right { background: var(--good-soft); } .rt-flagged.wrong { background: var(--bad-soft); }
.w480 .rt-stats { grid-template-columns: 1fr 1fr; }

/* ---------- report, training, act end ---------- */
.card .aside { font-size: .9rem; color: var(--ink2); font-style: italic; }
.cliff { display: flex; gap: 12px; align-items: center; margin: 16px 0 6px; padding: 12px 14px; border: var(--b); border-radius: var(--r); background: var(--yellow-soft); box-shadow: var(--sh); }
.cliff small { display: block; font-size: .75rem; color: var(--muted); }
.cliff b { font: 700 1.15rem/1.2 var(--display); }
.card.ending { max-width: 720px; }

/* The office changes as the company grows: a chip shop, a co-working space, a proper floor, a corridor. */
body.act-2 { --wall: #7ecbd6; }
body.act-3 { --wall: #a99cf2; }
body.act-4 { --wall: #a4a9b6; }
body.act-5 { --wall: #f2a07b; }
body.night { --wall: #26285a; }
.bubble, .rt-msg { white-space: pre-line; }
.memo-foot { font-size: .78rem; margin: 10px 0 0; }


/* The idle blob on the empty console: faint, monochrome, bobbing and blinking. */
.blob { opacity: .22; flex: none; }
.blob .blob-body path { fill: var(--ink2); }
.blob .blob-eyes ellipse { fill: var(--cream); }
.blob .blob-shadow { fill: var(--ink2); opacity: .5; animation: blob-shadow 2.8s ease-in-out infinite; transform-origin: 36px 56px; }
.blob .blob-body { animation: blob-bob 2.8s ease-in-out infinite; transform-origin: 36px 52px; }
.blob .blob-eyes { animation: blob-blink 5s infinite; transform-origin: 36px 30px; }
@keyframes blob-bob { 0%, 100% { transform: translateY(0) scale(1.04, .96); } 50% { transform: translateY(-5px) scale(.97, 1.03); } }
@keyframes blob-shadow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.8); } }
@keyframes blob-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@media (prefers-reduced-motion: reduce) { .blob * { animation: none !important; } }
.clockin.idle .early { margin: 4px 0 0; max-width: 300px; }
.closebar .btn[data-act="early"] { margin-left: auto; }

/* ---------- Acts 4 and 5: telling people ---------- */
/* Who knows: a small tag by the tier badge. Cost tags on the Honest options. The Honest part itself, a shade warmer. */
/* Acts 4 and 5: the goal chip (where traction was), and a saved job */
.chip.goal { background: var(--yellow-soft); }
.chip.goal .lbl { color: var(--ink); font-weight: 700; }
.chip.goal.bump { animation: bump .6s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .chip.goal.bump { animation: none; } }
.tag.team { background: var(--mint-soft); }
.tag.saved { background: var(--yellow); font-size: .62rem; padding: 2px 6px 1px; letter-spacing: .04em; text-transform: uppercase; font-family: var(--display); }
.tag.knows { background: var(--pink); font-size: .62rem; padding: 2px 6px 1px; letter-spacing: .04em; text-transform: uppercase; font-family: var(--display); }
.ci-sub .tag.knows, .convhead .tag.knows, .rp-row .tag.knows { margin-left: 0; }
.convhead .nm .tag.knows { font-size: .66rem; }
.rp-row .nm .tag.knows { align-self: flex-start; margin: 2px 0; }
.tag.cost { background: var(--warn-soft); }
.tag.cost.internal { background: var(--cream); color: var(--muted); }
.tag.you { background: var(--yellow); }
.steps span.honest.cur { background: var(--pink); }
.composer.honest { background: #fff6f1; }
.honest-lead { font: 700 .78rem/1.3 var(--display); color: var(--ink2); letter-spacing: .01em; }
/* They're typing: after an Honest reply, the answer takes a moment. */
.bubble.typing { padding: 8px 14px 10px; }
.bubble.typing .dots { display: flex; gap: 5px; padding-top: 3px; }
.bubble.typing .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: typing 1.2s infinite ease-in-out; }
.bubble.typing .dots i:nth-child(2) { animation-delay: .15s; } .bubble.typing .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bubble.typing .dots i { animation: none; opacity: .7; } }
/* When someone finds out. */
.sys.told { background: #ffe8ef; font-weight: 700; animation: pop .35s; }
.sys.told .tag { margin-right: 6px; }
/* Sunday, and after: your own name and face on the bubble. White, not Knowsley's blue. */
.bubble.bot.you { background: #fff; color: var(--ink); border-color: var(--ink); }
.bubble.bot.you .name { color: var(--ink); font-size: .78rem; }
.bubble.bot.you .name img.avatar { border-width: 1.5px; border-radius: 30%; }
.bubble.bot.you .name small { font: 500 .7rem/1 var(--font); color: var(--muted); }
.bubble.bot.you.reveal { animation: reveal 1.1s ease-out; }
@keyframes reveal { 0% { transform: translateY(8px) scale(.96); opacity: 0; box-shadow: 0 0 0 var(--yellow); } 55% { opacity: 1; box-shadow: 0 0 0 7px var(--yellow); } 100% { transform: none; box-shadow: var(--sh-sm); } }
@media (prefers-reduced-motion: reduce) { .bubble.bot.you.reveal { animation: none; } }
.sys.stand { background: none; border: 0; box-shadow: none; font-style: italic; color: var(--ink2); font-size: .88rem; text-align: center; padding: 2px 8px; }
/* The top bar in Acts 4 and 5: the countdown, and Exposure once it's high. */
#swChip b { font-weight: 700; }
#susChip.warn { background: var(--warn-soft); }
.rp-row.model .rp-mark { width: 34px; height: 34px; border: var(--b); border-radius: 24%; background: #6d5bd0; color: #fff; font: 700 .72rem/30px var(--display); text-align: center; }
body.act-4 .report .rp-row, body.act-5 .report .rp-row { grid-template-columns: 34px minmax(0, 1fr) auto; }

/* ---------- the finale: a cutscene after the last shift ---------- */
.overlay.finale-ov { background: radial-gradient(rgba(255, 255, 255, .08) 1.2px, transparent 1.2px) 0 0 / 24px 24px, #1f1d33; color: #fff; }
.finale { margin: auto; width: 100%; max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 24px 16px; text-align: center; }
.fin-scene { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; animation: finIn 1.2s ease-out both; }
.fin-time { font: 700 clamp(3.5rem, 14vw, 6rem)/1 var(--display); letter-spacing: -.03em; color: var(--yellow); font-variant-numeric: tabular-nums; }
.fin-big { font: 700 clamp(1.4rem, 4vw, 2rem)/1.2 var(--display); margin: 0; }
.fin-sub { margin: 0; color: #d6d3e8; max-width: 460px; animation: finIn 1.2s .9s ease-out both; }
.fin-board { font: 700 clamp(1.8rem, 7vw, 3.2rem)/1 var(--display); letter-spacing: .08em; color: var(--ink); background: var(--yellow); border: 3px solid #fff; border-radius: 10px; padding: 16px 26px; box-shadow: 8px 8px 0 rgba(0, 0, 0, .45); transform: rotate(-2deg); animation: finSign 1.6s ease-out both; }
.fin-h { font: 700 1.2rem/1.2 var(--display); margin: 0; letter-spacing: .04em; color: var(--yellow); }
.fin-roll { display: flex; flex-direction: column; gap: 10px; width: 100%; max-height: min(62vh, 560px); overflow-y: auto; text-align: left; }
.fin-line { display: flex; gap: 12px; align-items: center; background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .18); border-radius: var(--r-sm); padding: 8px 12px; animation: finIn .9s ease-out both; }
.fin-line p { margin: 0; font-size: .92rem; line-height: 1.4; }
.fin-mail { width: 100%; background: var(--paper); color: var(--ink); border: var(--b); border-radius: 12px; box-shadow: 8px 8px 0 rgba(0, 0, 0, .45); padding: 18px 22px; text-align: left; animation: finMail .8s ease-out both; }
.fin-mhead { display: flex; gap: 12px; align-items: center; border-bottom: var(--b); padding-bottom: 10px; margin-bottom: 8px; }
.fin-mhead small { display: block; font-size: .75rem; color: var(--muted); } .fin-mhead b { font: 700 1.2rem/1.2 var(--display); }
.fin-mail p { margin: 6px 0; animation: finIn .6s ease-out both; }
.fin-mail p.bex { font-weight: 700; }
.fin-end { font: 700 clamp(3rem, 12vw, 5rem)/1 var(--display); margin: 6px 0 0; letter-spacing: -.02em; animation: finIn 1.6s .6s ease-out both; }
.fin-tbc { margin: 0; font: 500 1.1rem/1.3 var(--display); color: var(--yellow); letter-spacing: .06em; animation: finIn 1.6s 1.8s ease-out both; }
.fin-reply { display: flex; align-items: flex-end; gap: 10px; align-self: flex-end; max-width: 100%; text-align: left; animation: finIn .8s .3s ease-out both; }
.fin-reply .bubble { max-width: 340px; font-size: 1.05rem; box-shadow: 4px 4px 0 rgba(0, 0, 0, .45); }
.fin-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; animation: finIn .8s 1s ease-out both; }
@keyframes finIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes finSign { 0% { opacity: 0; transform: rotate(-2deg) scale(.7); } 60% { opacity: 1; transform: rotate(-2deg) scale(1.06); } 100% { transform: rotate(-2deg) scale(1); } }
@keyframes finMail { from { opacity: 0; transform: translateY(40px) scale(.96); } }

/* ---------- six to eight weeks later ---------- */
.overlay.later-ov { background: radial-gradient(rgba(22, 22, 29, .16) 1.2px, transparent 1.2px) 0 0 / 24px 24px, #ffd9a8; }
.later { margin: auto; max-width: 560px; width: 100%; }
.later-card { background: var(--paper); border: var(--b); border-radius: 14px; box-shadow: 8px 8px 0 var(--shc); padding: 34px 32px 30px; text-align: center; animation: later 1.4s ease-out; }
.later-card h1 { font: 700 clamp(2rem, 6vw, 3rem)/1.05 var(--display); letter-spacing: -.02em; margin: 18px 0 12px; }
.later-card p { color: var(--ink2); margin: 0 0 22px; }
.later-card .board { display: inline-block; background: #fff; border: var(--b); border-radius: var(--r-sm); padding: 6px 14px; font: 700 .85rem/1.2 var(--display); letter-spacing: .06em; transform: rotate(-2deg); box-shadow: var(--sh-sm); }
.later-card .board s { text-decoration-thickness: 3px; text-decoration-color: var(--bad); }
@keyframes later { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .later-card { animation: none; } }
/* The last shift: the old office, with a new sign. */
body.epilogue { --wall: #ffc98f; }
body.epilogue .logo .lg-full, body.epilogue .wallmark { letter-spacing: -.01em; }
/* Phones: the Live feed's three numbers in one tight row */
@media (max-width: 560px) {
  .rt-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; }
  .rt-stats > div { padding: 5px 7px; }
  .rt-stats em { display: none; }
}

/* Wikipedant Lookup (lookup.js): Wikipedant's own promotion, then underlined words in customers' messages */
.wppromo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 10px 16px 0; padding: 10px 12px; background: #fef6e7; border: 1px solid #fc3; border-radius: 2px; font: .8rem/1.4 sans-serif; color: #202122; }
.wppromo button { font: 600 .8rem/1 sans-serif; background: #36c; color: #fff; border: 1px solid #36c; border-radius: 2px; padding: 6px 10px; cursor: pointer; }
.wppromo button:hover { background: #447ff5; }
.wppromo .wpdenied { display: block; padding: 6px 8px; background: #fee7e6; border: 1px solid #d73333; color: #202122; }
.wppromo .wpdenied b { color: #d73333; }
.bubble .look { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-decoration: underline dotted #36c 2px; text-underline-offset: 3px; border-radius: 3px; }
.bubble .look:hover { background: #fff1a0; }