/* Daytime, shared across Cirlet (Tyler, 2026-10-03: he likes the design, not the colours and presentation for agency
   owners). Same layout, components, drones and motion as /any-agent's night theme: a warm off-white page, deep navy
   words, one accent (a deep cobalt), larger type, fewer small all-caps labels and higher contrast. The drones keep their
   colours, and the computers stay dark hardware with lit screens. Loaded after site.css and story.css, on <html class="day">. */
html.day {
  --bg: #faf6ee; --bg-2: #f1ebdf; --panel: #ffffff; --panel-2: #f5f0e6; --band: #ffffff;
  --ink: #0f1f3d; --ink-2: #263655; --ink-3: #46536f;
  --line: rgba(15, 31, 61, .14); --line-2: rgba(15, 31, 61, .3); --control: rgba(15, 31, 61, .55);
  --ice: #dbe5fb; --eye: #1d3f9e; --accent: #1d3f9e; --steel: #2c4a86;
  --warn: #f5c46a; --ok: #1f6b43;
  --day-accent: #1d3f9e; --day-accent-2: #142f7a;
  color-scheme: light;
}
.day body { font-size: 18.5px; }

/* the sky goes: daylight has no stars */
.day .stars { display: none; }

/* one accent for everything you press */
.day .btn { background: var(--day-accent); color: #fff; }
.day .btn:hover { background: var(--day-accent-2); }
.day .btn--ghost { background: transparent; color: var(--day-accent); box-shadow: inset 0 0 0 1.5px var(--day-accent); }
.day .btn--ghost:hover { background: rgba(29, 63, 158, .07); }
.day .btn.go { box-shadow: 5px 5px 0 #0f1f3d; }
.day .link, .day .alt a, .day .foot a { color: var(--day-accent); border-bottom-color: rgba(29, 63, 158, .4); }
.day .seat b, .day .checks li span, .day .subtitle b, .day .bub b.who, .day .chat-log .agent::before, .day .chat-log .you::before { font-family: var(--sans); text-transform: none; letter-spacing: 0; }
.day .seat b { font-size: 15px; font-weight: 600; }
.day .checks li { font-size: 16px; }
.day .checks li span { font-size: 14px; font-weight: 500; color: var(--ink-3); }
.day .checks li.work span { color: var(--day-accent); } .day .checks li.wait span { color: #8a5300; } .day .checks li.fin span { color: #1f6b43; }
.day .subtitle b, .day .bub b.who { font-size: 13px; font-weight: 600; }
.day .chat-log .agent::before, .day .chat-log .you::before { font-size: 13px; font-weight: 600; }
.day :focus-visible { outline-color: var(--day-accent); }
.day .chat-head b { color: var(--ink); }
.day .appwrap .mb-side em, .day .appwrap .nw-foot em, .day .appwrap .sw-foot em, .day .appwrap .px-foot em { color: #0a6b3e; }
.day .appwrap .btn-b { background: #0a64b0; }
.day .menu-btn { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
@media (max-width: 760px) { .day .checks { display: none; } } /* on a phone the caption says the step; the screen comes up under it */

/* fewer small all-caps monospace labels: the labels read as plain words, larger */
.day .mono { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; }
.day .kicker { color: var(--day-accent); font-size: 16px; font-weight: 600; }
.day .kicker::before { opacity: .8; }
.day .sec-lead, .day .hero .sub, .day .dsub { color: var(--ink-2); }
.day .sec-lead { font-size: 20px; }
.day .small, .day .ask-note, .day .privacy, .day .cnote, .day .terms, .day .dhint { color: var(--ink-3); font-size: 16px; }
.day h1 span { color: var(--day-accent); }

/* the hero: names on the pads in navy, and the trust line under the button */
.day .seat b { color: var(--ink); font-size: 15px; font-weight: 600; }
.day .sent .seat b { color: var(--ink-3); }
.day .plat { color: var(--ink-2); font-size: 15.5px; }
.day .trust { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; }
.day .trust img { width: 36px; height: 36px; object-fit: cover; box-shadow: 0 0 0 2px #0f1f3d; }
.day .trust b { color: var(--ink); font-weight: 600; }
.day .trust .addr:empty { display: none; } /* the St. Louis office address goes here once there is one */
.day .trust .addr::before { content: "· "; }
.day .nsent { color: var(--ok); }

/* the demo: a light window, with the status bar, captions and talk in white boxes with navy edges */
.day .frame { box-shadow: inset 0 0 0 1.5px var(--line-2), 12px 12px 0 #0f1f3d; }
.day .frame-bar { background: #e9e2d4; color: var(--ink-2); }
.day .frame-bar i { background: rgba(15, 31, 61, .25); }
.day .sbar { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.day .sbar[data-tone="wait"] { box-shadow: 4px 4px 0 #0f1f3d; color: #1b1405; }
.day .sbtns button, .day .bb button { background: #0f1f3d; color: #fff; }
.day .sbtns button + button, .day .bb button + button { background: transparent; color: #1b1405; box-shadow: inset 0 0 0 1.5px rgba(27, 20, 5, .6); }
.day .checks span, .day [data-cwho] { color: var(--ink-3); }
.day .mlabel { color: #dbe5fb; }
.day .tk { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.day .tk:hover { background: rgba(255, 255, 255, .12); }
.day .you .tk, .day .tk[aria-pressed="true"] { background: #dbe5fb; color: #0f1f3d; }
.day .subtitle { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); font-size: 17px; }
.day .subtitle[data-tone="ask"] { background: var(--warn); color: #1b1405; box-shadow: 4px 4px 0 #0f1f3d; } .day .subtitle[data-tone="ask"] b { color: #3a2a10; } /* the question, beside the screen */
.day .bub { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px #0f1f3d, 3px 3px 0 0 #0f1f3d; }
.day .bub b.who { color: var(--ink-3); }
.day .bub[data-tone="ok"] .bt { color: var(--day-accent); } .day .bub[data-tone="you"] .bt { color: var(--ink); }
.day .bub[data-tone="ask"] { background: var(--warn); color: #1b1405; }
.day .bridge { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.day .bridge p em { color: var(--day-accent); }
.day .transcript { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.day .drive { background: #dbe5fb; color: #0f1f3d; font-size: 13px; }

/* the demo screens: their faint greys made readable */
.day .appwrap .lbl, .day .appwrap .pager, .day .appwrap .px-head span, .day .appwrap .nw-t small, .day .appwrap .nw-sub, .day .appwrap .ph.pol small,
.day .appwrap .sw-tr .old, .day .appwrap .sw-tr.h, .day .appwrap .nw-tr.h { color: #4a5568; }
.day .appwrap .px-cap .hint, .day .appwrap .code { color: #5b6476; }
.day .appwrap .br .tab, .day .appwrap .br .addr { color: #1f2937; }

/* the sections */
.day .way { background: var(--panel); }
.day .way .get b, .day .way .t { color: var(--ink); }
.day .sm { color: var(--ink-2); }
.day .sm.on, .day .reduce .sm { background: var(--day-accent); color: #fff; }
.day .me img { box-shadow: 0 0 0 2px #0f1f3d, 8px 8px 0 #0f1f3d; }
.day .qs summary { color: var(--ink); }
.day .qs details p { color: var(--ink-2); }

/* the form on its monitor: a light screen in dark hardware */
.day .fmon-bar { background: #e9eef8; color: var(--ink-2); }
.day .fmon .form { background: #fff; }
.day .chat { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px #0f1f3d, 3px 3px 0 0 #0f1f3d; }
.day .chat-head { color: var(--ink-2); }
.day .chat-log .agent { color: var(--ink); } .day .chat-log .agent[data-tone="wait"] { color: #7a4a00; }
.day .chat-log .agent::before { color: var(--day-accent); }
.day .chat-log .you { color: var(--ink); background: var(--panel-2); }
.day .chat-note { color: var(--ink-3); }

/* the step captions: big, plain, one step at a time */
.day .stepcap { background: #fff; box-shadow: inset 0 0 0 1.5px #0f1f3d, 4px 4px 0 #0f1f3d; }
.day .stepcap .sc-prog { color: var(--day-accent); }
.day .stepcap[data-tone="wait"] { background: #fff6e2; }