/* THE ROOM · 1102i · THE CREW — SCRIBE (yellow, the record) · SCOUT (white, the searchlight) · WATCH (silver, the eye).
   TAKE STYLE: black glass over the sky, white and silver type, the cube's corner brackets in each agent's colour. */
.m.scribe, .ag-scribe { --c: var(--gold); --a: #ffd400; --a2: rgba(255,212,0,.16); }
.m.scout, .ag-scout { --c: #ffffff; --a: #ffffff; --a2: rgba(255,255,255,.12); }
.m.watch, .ag-watch { --c: var(--silver); --a: #c3c9d2; --a2: rgba(195,201,210,.14); }

/* in the room: the crew speaks in type, its glyph before its name */
.m.scribe .who, .m.scout .who, .m.watch .who { font: 400 15px/1 "Bebas Neue", Impact, sans-serif; letter-spacing: .22em; align-items: center; text-shadow: 0 0 14px var(--c), 0 1px 8px #000; }
.m.scribe .who time, .m.scout .who time, .m.watch .who time { font: 400 10px/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-shadow: none; }
.m .who .ag { width: 15px; height: 15px; margin-right: -2px; color: var(--c); filter: drop-shadow(0 0 6px var(--c)); flex: none; }
.m.scribe .txt, .m.scout .txt, .m.watch .txt { position: relative; font: 14px/1.6 "JetBrains Mono", monospace; color: #eef0f3; max-width: 96%; padding: 12px 15px;
  background: rgba(8,8,10,.78); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); border-left: 2px solid var(--c); border-radius: 4px 14px 14px 14px;
  box-shadow: inset 0 0 40px color-mix(in srgb, var(--c) 5%, transparent); }
.m.ag-work .txt { display: inline-flex; align-items: center; gap: 10px; font: 600 10px/1 "JetBrains Mono", monospace; letter-spacing: .26em; color: var(--c); }

/* the lock carries a gold light when something waits on your yes */
#vaultBtn { position: relative; }
#vaultBtn.wait::after { content: ""; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold), 0 0 22px rgba(255,212,0,.6); animation: cwWait 1.8s ease-in-out infinite; }
@keyframes cwWait { 50% { transform: scale(.7); opacity: .6; } }

/* behind the lock: THE CREW · THE VAULT */
.locknav { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; margin: 2px 0 18px; background: rgba(5,5,6,.6); }
.locknav button { font: 600 10.5px/1 "JetBrains Mono", monospace; letter-spacing: .22em; padding: 9px 14px; border-radius: 999px; color: var(--silver); }
.locknav button.on { background: var(--gold); color: #000; }
#crewFace .wrap { width: min(1180px, 100%); }

/* ------------------------------------------------------------ the panel */
.cw { --g: rgba(10,10,12,.8); }
.cw-top { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.cw-top .ttl { flex: 1; min-width: 260px; }
.cw-top h3 { font: 400 clamp(40px, 7vw, 64px)/.9 "Bebas Neue", Impact, sans-serif; letter-spacing: .06em; margin: 0; text-shadow: 0 0 28px rgba(255,255,255,.12); }
.cw-top h3 em { font-style: normal; background: linear-gradient(90deg, #ffd400, #fff 50%, #c3c9d2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cw-top p { color: var(--silver); font-size: 14.5px; max-width: 620px; margin-top: 10px; text-shadow: 0 1px 10px #000; }
.cw-master { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--g); font: 600 10.5px/1 "JetBrains Mono", monospace; letter-spacing: .24em; color: var(--dim); }
.cw-master .tri { display: flex; gap: 4px; }
.cw-master .tri svg { width: 18px; height: 18px; opacity: .35; transition: opacity .4s, filter .4s; }
.cw-master.on { color: #fff; border-color: rgba(255,255,255,.4); box-shadow: 0 0 30px rgba(255,212,0,.12); }
.cw-master.on .tri svg { opacity: 1; filter: drop-shadow(0 0 6px currentColor); }
.cw-master .tri .s1 { color: #ffd400; } .cw-master .tri .s2 { color: #fff; } .cw-master .tri .s3 { color: #c3c9d2; }
.cw-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 20px 0 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--g); }
.cw-bar .lbl { font: 600 9.5px/1 "JetBrains Mono", monospace; letter-spacing: .28em; color: var(--dim); }
.cw-shift { margin-left: auto; display: flex; align-items: center; gap: 10px; font: 600 10px/1.3 "JetBrains Mono", monospace; letter-spacing: .14em; color: var(--silver); }
.cw-shift b { color: var(--blue); font-weight: 600; text-shadow: 0 0 10px rgba(58,120,255,.5); }
.cw-shift i { font-style: normal; color: var(--dim); }
.seg3 { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0,0,0,.35); }
.seg3 button { font: 600 9.5px/1 "JetBrains Mono", monospace; letter-spacing: .16em; padding: 8px 11px; border-radius: 999px; color: var(--dim); white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.seg3 button:hover { color: #fff; }
.seg3 button.on { background: var(--a, #fff); color: #000; box-shadow: 0 0 16px color-mix(in srgb, var(--a, #fff) 45%, transparent); }
.cw-bar .seg3 button.on { background: var(--gold); }

.cw-kick { font: 600 10px/1 "JetBrains Mono", monospace; letter-spacing: .3em; color: var(--dim); margin: 26px 0 10px; display: flex; align-items: center; gap: 10px; }
.cw-kick::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.cw-clear { display: flex; align-items: center; gap: 10px; font: 600 10.5px/1 "JetBrains Mono", monospace; letter-spacing: .24em; color: var(--green); padding: 14px 16px; border: 1px dashed rgba(34,211,107,.3); border-radius: 14px; background: var(--g); }
.cw-clear b { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.cw-ap { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; margin: 8px 0; background: var(--g); border: 1px solid rgba(255,212,0,.35); box-shadow: 0 0 30px rgba(255,212,0,.08); }
.cw-ap .gl { width: 30px; height: 30px; color: var(--gold); filter: drop-shadow(0 0 8px var(--gold)); }
.cw-ap .t { font-size: 15px; } .cw-ap .meta { margin-top: 6px; font: 10px/1.4 "JetBrains Mono", monospace; letter-spacing: .14em; color: var(--dim); }
.cw-ap .acts { display: flex; gap: 6px; }
.cw-ap .yes { font: 600 10px/1 "JetBrains Mono", monospace; letter-spacing: .22em; padding: 11px 14px; border-radius: 999px; background: var(--gold); color: #000; box-shadow: 0 0 18px rgba(255,212,0,.4); }
.cw-ap .no { font: 600 10px/1 "JetBrains Mono", monospace; letter-spacing: .22em; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); }
.cw-ap .no:hover { color: #fff; border-color: #fff; }

.cw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .cw-grid { grid-template-columns: 1fr; } }
.cw-card { position: relative; padding: 18px 18px 16px; border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--a) 7%, rgba(12,12,14,.84)), rgba(8,8,10,.86) 46%); border: 1px solid color-mix(in srgb, var(--a) 20%, transparent);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04); transition: box-shadow .5s, border-color .5s, opacity .4s; overflow: hidden; }
.cw-card::before, .cw-card::after { content: ""; position: absolute; width: 16px; height: 16px; border: 0 solid var(--a); top: 8px; opacity: .9; }
.cw-card::before { left: 8px; border-width: 2px 0 0 2px; } .cw-card::after { right: 8px; border-width: 2px 2px 0 0; }
.cw-card .bk { position: absolute; bottom: 8px; width: 16px; height: 16px; border: 0 solid var(--a); opacity: .9; pointer-events: none; }
.cw-card .bk.l { left: 8px; border-width: 0 0 2px 2px; } .cw-card .bk.r { right: 8px; border-width: 0 2px 2px 0; }
.cw-card .scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px); }
.cw-card.busy { border-color: var(--a); box-shadow: 0 0 0 1px var(--a), 0 0 40px color-mix(in srgb, var(--a) 30%, transparent), 0 24px 60px rgba(0,0,0,.45); }
.cw-card.off { opacity: .55; } .cw-card.off .cfg { pointer-events: none; filter: grayscale(1); opacity: .5; }
.cw-card header { display: flex; align-items: center; gap: 14px; position: relative; }
.cw-card .gl { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 14px; color: var(--a); background: radial-gradient(circle at 50% 40%, var(--a2), transparent 70%); border: 1px solid color-mix(in srgb, var(--a) 28%, transparent); }
.cw-card .gl svg { width: 34px; height: 34px; filter: drop-shadow(0 0 10px var(--a)); }
.cw-card.busy .gl svg { animation: cwBusy 1.4s ease-in-out infinite; }
@keyframes cwBusy { 50% { filter: drop-shadow(0 0 2px var(--a)); opacity: .55; } }
.cw-card h4 { font: 400 34px/.9 "Bebas Neue", Impact, sans-serif; letter-spacing: .1em; color: #fff; text-shadow: 0 0 18px color-mix(in srgb, var(--a) 40%, transparent); }
.cw-card h4 small { display: block; font: 600 9px/1.6 "JetBrains Mono", monospace; letter-spacing: .32em; color: var(--a); text-shadow: none; margin-top: 4px; }
.cw-sw { margin-left: auto; width: 52px; height: 28px; border-radius: 999px; position: relative; background: rgba(255,255,255,.08); border: 1px solid var(--line); transition: background .3s, box-shadow .3s; flex: none; }
.cw-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #6d737c; transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s, box-shadow .3s; }
.cw-sw.on { background: color-mix(in srgb, var(--a, #fff) 22%, transparent); border-color: var(--a, #fff); box-shadow: 0 0 16px color-mix(in srgb, var(--a, #fff) 35%, transparent); }
.cw-sw.on::after { transform: translateX(24px); background: var(--a, #fff); box-shadow: 0 0 10px var(--a, #fff); }
.cw-card .st { display: flex; align-items: center; gap: 9px; margin: 16px 0 6px; font: 600 9.5px/1.3 "JetBrains Mono", monospace; letter-spacing: .2em; color: var(--silver); }
.cw-card .st b { width: 8px; height: 8px; border-radius: 50%; background: var(--a); box-shadow: 0 0 10px var(--a); flex: none; }
.cw-card.busy .st b { animation: pulse .8s ease-in-out infinite; } .cw-card.off .st b { background: #41464d; box-shadow: none; }
.cw-card.alarm .st b { background: var(--red); box-shadow: 0 0 12px var(--red); } .cw-card.alarm .st { color: #ff7a70; }
.cw-card .ln { color: var(--silver); font-size: 13.5px; line-height: 1.5; min-height: 3em; }
.cw-card .cfg { margin-top: 14px; display: grid; gap: 9px; }
.cw-card .r3 { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 8px; }
.cw-card .r3 > span { font: 600 9px/1 "JetBrains Mono", monospace; letter-spacing: .24em; color: var(--dim); }
.cw-card .r3 .seg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cw-card .r3 .seg3 button { padding: 9px 4px; overflow: hidden; text-overflow: ellipsis; }
.cw-card .ft { margin-top: 14px; display: flex; gap: 8px; align-items: center; }
.cw-go { font: 600 10px/1 "JetBrains Mono", monospace; letter-spacing: .24em; padding: 12px 16px; border-radius: 999px; color: #000; background: var(--a); box-shadow: 0 0 18px color-mix(in srgb, var(--a) 40%, transparent); flex: none; }
.cw-go:disabled { opacity: .4; }
.cw-ask { flex: 1; min-width: 0; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px; color: #fff; font: 14px/1 Inter, sans-serif; padding: 11px 14px; outline: none; }
.cw-ask:focus { border-color: var(--a); }
.cw-last { margin-top: 12px; font: 10px/1.5 "JetBrains Mono", monospace; letter-spacing: .06em; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* WATCH: the cube, three by three, one light per site */
.cube9 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.cube9 .c { position: relative; padding: 9px 9px 8px; border-radius: 10px; background: rgba(0,0,0,.42); border: 1px solid var(--line); min-width: 0; }
.cube9 .c b { position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: #41464d; }
.cube9 .c span { display: block; font: 600 9px/1.2 "JetBrains Mono", monospace; letter-spacing: .04em; color: var(--silver); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 12px; }
.cube9 .c em { display: block; font: 400 9px/1.2 "JetBrains Mono", monospace; font-style: normal; color: var(--dim); margin-top: 4px; letter-spacing: .08em; }
.cube9 .c.up b, .cube9 .c.shield b { background: var(--green); box-shadow: 0 0 8px var(--green); }
.cube9 .c.slow b { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.cube9 .c.down b { background: var(--red); box-shadow: 0 0 10px var(--red); animation: pulse 1s ease-in-out infinite; }
.cube9 .c.down { border-color: rgba(225,6,0,.5); } .cube9 .c.down em { color: #ff7a70; }
.cube9 .c.blind b { background: transparent; border: 1px solid #6d737c; }
.cw-edit { margin-top: 10px; } .cw-edit textarea { width: 100%; min-height: 150px; background: rgba(0,0,0,.45); border: 1px solid var(--line); border-radius: 12px; color: #fff; font: 12.5px/1.6 "JetBrains Mono", monospace; padding: 10px 12px; outline: none; resize: vertical; }
.cw-link { font: 600 9.5px/1 "JetBrains Mono", monospace; letter-spacing: .2em; color: var(--dim); padding: 10px 4px; }
.cw-link:hover { color: #fff; }

/* the record: what the crew did, what got decided */
.cw-log { margin-top: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--g); overflow: hidden; }
.cw-log .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); }
.cw-log .tabs button { flex: 1; font: 600 10px/1 "JetBrains Mono", monospace; letter-spacing: .26em; padding: 13px; color: var(--dim); }
.cw-log .tabs button.on { color: #fff; box-shadow: inset 0 -2px 0 var(--gold); }
.cw-log ol { list-style: none; margin: 0; padding: 6px 0; max-height: 360px; overflow-y: auto; }
.cw-log li { display: grid; grid-template-columns: 70px 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 16px; font-size: 13.5px; color: #e4e7eb; }
.cw-log li + li { border-top: 1px solid rgba(195,201,210,.06); }
.cw-log li time { font: 10px/1.6 "JetBrains Mono", monospace; letter-spacing: .06em; color: var(--dim); }
.cw-log li svg { width: 16px; height: 16px; color: var(--a, var(--silver)); margin-top: 2px; filter: drop-shadow(0 0 5px var(--a, transparent)); }
.cw-log .empty { padding: 16px; font: 10.5px/1.6 "JetBrains Mono", monospace; letter-spacing: .14em; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { #vaultBtn.wait::after, .cw-card.busy .gl svg, .cube9 .c.down b { animation: none; } }