:root{
  --night:#100f0d;--floor:#1a1814;--wall:#23201a;--line:#35302a;
  --paper:#e9e4d8;--mute:#9a9283;--dim:#5e574c;
  --lamp:#ffb457;--lamp-soft:rgba(255,180,87,.28);--ember:#c8542a;--ink:#1b221f;
  --mindmorph:#7a3d7c;--mycomuse:#b37a2a;
}
html{overflow-x:clip;-webkit-text-size-adjust:100%;background:var(--night)}
body{margin:0;background:var(--night);color:var(--paper);font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;min-height:100dvh}
h1,h2,h3{font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;font-weight:500;margin:0;line-height:1.1}
a{color:var(--lamp)}
button{font:inherit}

.bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(16,15,13,.92);backdrop-filter:blur(6px);z-index:5}
.bar h1{font-size:1.25rem}
.bar .sub{color:var(--mute);font-size:.8rem}
.bar .right{display:flex;align-items:center;gap:.5rem}
/* Running studio total, read from the payload's studio block. Server rendered, then kept current by
   poll.js. Tabular figures so the width does not jump when the number moves. */
.tally{display:flex;align-items:baseline;gap:.4rem;white-space:nowrap}
.tally b{font-weight:600;font-size:.95rem;color:var(--paper);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.tally span{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
/* How old the studio's freshest non-parked stamp is. The 3D floor says the same thing in
   daylight; this says it in words, and it is the only version the board and Notes get.
   Colour only moves once the data is genuinely behind, so a healthy studio stays quiet. */
.clock{display:flex;align-items:baseline;gap:.4rem;white-space:nowrap;padding-right:.6rem;margin-right:.2rem;border-right:1px solid var(--line)}
.clock b{font-weight:600;font-size:.95rem;color:var(--paper);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.clock span{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.clock[data-tier=stale] b{color:#e8c07a}
.clock[data-tier=cold] b{color:var(--lamp)}
/* The board and Notes have no floor to light, so they take the same tier as a warm cast over
   the page. Deliberately faint: it should register as a mood on the way past, not as a
   warning. The 3D office ignores this and drives its own daylight rig. */
body[data-fresh=stale]{background-image:linear-gradient(rgba(255,180,87,.022),rgba(255,180,87,.022))}
body[data-fresh=cold]{background-image:linear-gradient(rgba(255,180,87,.05),rgba(255,180,87,.05))}
.bar a.notes{color:var(--mute);text-decoration:none;font-size:.85rem;padding:.6rem .5rem;min-height:44px;display:inline-flex;align-items:center}
.bar form{margin:0}
.ghost{appearance:none;background:transparent;border:1px solid var(--line);color:var(--paper);padding:.5rem .8rem;min-height:44px;border-radius:2px;cursor:pointer;font-size:.85rem}
.ghost:hover{border-color:var(--paper)}
.pulse{width:.5rem;height:.5rem;border-radius:50%;background:var(--dim);display:inline-block;margin-right:.35rem;transition:background .6s}
.pulse.live{background:var(--lamp)}
.pulse.off{background:var(--ember)}

.stage{position:relative;max-width:72rem;margin:0 auto;padding:1rem 1rem 6rem;min-height:70dvh}
.view{transition:opacity .55s ease,transform .55s ease}
.view.leaving{opacity:0;transform:scale(.97)}
.view.arriving{opacity:0;transform:scale(1.03)}

/* Floor plan */
.plan-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:.25rem 0 1rem}
.plan-head h2{font-size:1.5rem}
.tally{color:var(--mute);font-size:.85rem}
.tally b{color:var(--paper);font-weight:600}
.plan{display:grid;gap:.9rem;grid-template-columns:1fr}
@media(min-width:40rem){.plan{grid-template-columns:1fr 1fr}}
@media(min-width:64rem){.plan{grid-template-columns:repeat(3,1fr)}.plan .door.hq{grid-column:span 2}}
.door{position:relative;display:block;width:100%;text-align:left;background:var(--wall);border:1px solid var(--line);border-radius:4px;padding:.9rem 1rem 1rem;cursor:pointer;color:inherit;min-height:9rem;overflow:hidden;transition:border-color .3s,transform .3s}
.door:hover{border-color:var(--mute)}
.door:active{transform:scale(.99)}
.door .glow{position:absolute;inset:auto -20% -60% -20%;height:120%;background:radial-gradient(ellipse at center,var(--lamp-soft),transparent 60%);opacity:0;transition:opacity 1.2s}
.door.lit .glow{opacity:1}
.door h3{font-size:1.2rem;position:relative}
.door .meta{color:var(--mute);font-size:.8rem;margin-top:.15rem;position:relative}
.door .row{display:flex;gap:.45rem;margin-top:.9rem;position:relative;flex-wrap:wrap}
.door .row svg{width:2.4rem;height:2.1rem;display:block}
.door.parked{opacity:.55;filter:saturate(.4)}
.door .brandbar{position:absolute;left:0;top:0;bottom:0;width:4px}

/* Inside a room */
.room-head{display:flex;align-items:center;gap:.6rem;margin:0 0 .75rem;flex-wrap:wrap}
.room-head h2{font-size:1.5rem;flex:1 1 auto}
.room-head .nav{display:flex;gap:.35rem}
.room{position:relative;background:linear-gradient(180deg,var(--wall) 0,var(--wall) 22%,var(--floor) 22%,var(--floor) 100%);border:1px solid var(--line);border-radius:4px;padding:1.75rem .75rem 1rem;overflow:hidden}
.room::before{content:"";position:absolute;left:0;right:0;top:22%;height:1px;background:var(--line)}
.room.parked{filter:brightness(.55) saturate(.35)}
.room.parked .lamp,.room.parked .screen{opacity:.15!important}
.desks{display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr));position:relative}
@media(min-width:40rem){.desks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:64rem){.desks{grid-template-columns:repeat(4,minmax(0,1fr))}}
.zone{grid-column:1/-1;display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr));padding:.75rem .6rem .6rem;border-radius:4px;border:1px solid transparent;position:relative}
@media(min-width:40rem){.zone{grid-template-columns:repeat(3,minmax(0,1fr))}}
.zone .zlabel{grid-column:1/-1;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.zone.mindmorph{border-color:rgba(122,61,124,.55);background:rgba(122,61,124,.10)}
.zone.mindmorph .zlabel{color:#c98fcb}
.zone.mycomuse{border-color:rgba(179,122,42,.55);background:rgba(179,122,42,.10)}
.zone.mycomuse .zlabel{color:#d9a75b}
.desk{appearance:none;background:transparent;border:0;padding:0;color:inherit;text-align:left;cursor:pointer;border-radius:4px;outline-offset:3px}
.desk:focus-visible{outline:2px solid var(--lamp)}
.desk svg{width:100%;height:auto;display:block}
.desk .label{display:flex;align-items:baseline;gap:.4rem;margin:.25rem .15rem 0;flex-wrap:wrap}
.desk .name{font-weight:600;font-size:.85rem}
.desk .st{font-size:.72rem;color:var(--mute)}
.desk.working .st{color:var(--lamp)}
.desk.blocked .st{color:#ff9d7e}
.desk .line{margin:.1rem .15rem 0;font-size:.78rem;color:var(--mute);line-height:1.3;min-height:1.3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.desk.working .line{color:var(--paper)}

/* Desk SVG parts */
.lamp{transition:opacity 1.2s ease}
.screen{transition:fill 1.2s ease,opacity 1.2s ease}
.person{transition:opacity 1.2s ease}
.desk.unknown .person{opacity:0}
.desk.unknown .lamp{opacity:0}
.desk.idle .lamp{opacity:.28}
.desk.parked .lamp{opacity:.1}
.desk.parked .person{opacity:.45}
.desk.working .lamp{opacity:1}
.desk.blocked .lamp{opacity:.85}
.desk.blocked .lampglow{fill:var(--ember)}
.desk.working .hands ellipse{animation:type 1.05s ease-in-out infinite}.desk.working .hands ellipse:last-child{animation-delay:.5s}
.desk.working .head{animation:nod 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.desk.blocked .head{animation:lean 4s ease-in-out infinite;transform-box:fill-box}
@keyframes type{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes nod{0%,100%{transform:rotate(0)}40%{transform:rotate(1.5deg)}70%{transform:rotate(-1deg)}}
@keyframes lean{0%,100%{transform:translateX(0)}50%{transform:translateX(-2px)}}
@media(prefers-reduced-motion:reduce){.desk .hands,.desk .head{animation:none!important}}

/* Fades: anything freshly changed on a poll */
.fade{animation:fadein 1.1s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* Desk card */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .35s;z-index:8}
.scrim.on{opacity:1;pointer-events:auto}
.card{visibility:hidden;position:fixed;left:0;right:0;bottom:0;max-height:82dvh;overflow:auto;background:#1c1a16;border-top:1px solid var(--line);border-radius:10px 10px 0 0;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s .4s;z-index:9;box-shadow:0 -12px 40px rgba(0,0,0,.5)}
.card.on{transform:none;visibility:visible;transition:transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s}
.card:focus{outline:0}
/* On open the blocks settle in top to bottom, a beat apart. The class is dropped after the entrance so
   a poll refresh only fades the lines that changed. */
.card.opening>*{animation:fadein .5s ease both}
.card.opening>:nth-child(2){animation-delay:.05s}
.card.opening>:nth-child(3){animation-delay:.1s}
.card.opening>:nth-child(4){animation-delay:.15s}
.card.opening>:nth-child(5){animation-delay:.2s}
.card.opening>:nth-child(6){animation-delay:.25s}
.card.opening>:nth-child(n+7){animation-delay:.3s}
@media(min-width:56rem){.card{left:auto;top:0;bottom:0;width:26rem;max-height:none;border-radius:0;border-top:0;border-left:1px solid var(--line);transform:translateX(105%);box-shadow:-12px 0 40px rgba(0,0,0,.5)}}
.card .close{position:absolute;right:.6rem;top:.6rem}
.card .who{display:flex;gap:.8rem;align-items:center;margin-right:3.5rem}
.card .who .face{width:4.2rem;height:4.2rem;border-radius:50%;object-fit:cover;object-position:center 18%;flex:none;background:#2a2620;border:1px solid var(--line)}
.card .who svg{width:4rem;height:auto;flex:none}
.card .who:has(.face) svg{width:2.4rem}
.desk .label .face,.row .head .face{width:1.15rem;height:1.15rem;border-radius:50%;object-fit:cover;object-position:center 18%;flex:none;vertical-align:-.22rem;margin-right:.35rem}
.card h3{font-size:1.3rem}
/* Pronouns as the desk filed them: under the name, quieter than the role line. */
.card .pronouns{color:var(--dim);font-size:.78rem;margin-top:.05rem}
.card .role{color:var(--mute);font-size:.85rem}
.card .state{display:inline-block;margin-top:.2rem;font-size:.78rem;padding:.1rem .5rem;border:1px solid var(--line);border-radius:999px;color:var(--mute)}
.card .state.working{color:var(--lamp);border-color:var(--lamp)}
.card .state.blocked{color:#ff9d7e;border-color:#ff9d7e}
.card .doing{margin:1rem 0 0;font-size:1.02rem;line-height:1.45}
.card .doing.empty{color:var(--dim);font-style:italic}
.card .doing .topic{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;color:var(--lamp);text-decoration:underline dotted;text-underline-offset:.18em}
.card .block{margin:.6rem 0 0;padding:.5rem .7rem;border-left:2px solid var(--ember);background:rgba(200,84,42,.12)}
.card .next{margin:.6rem 0 0;color:var(--mute)}
.card .when{margin:.5rem 0 0;color:var(--mute);font-size:.8rem}
.card .when.stale{color:#ff9d7e}
.card h4{margin:1.1rem 0 .4rem;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .7rem;min-height:44px;border:1px solid var(--line);border-radius:999px;color:var(--paper);text-decoration:none;font-size:.85rem;max-width:100%}
.chip:hover{border-color:var(--lamp)}
.chip .kind{font-size:.65rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);border-radius:3px;padding:0 .3rem}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.none{color:var(--dim);font-size:.85rem;margin:0}
/* First paint: the stage is empty for the beat it takes the floor to load. Breathe instead of sitting still. */
.stage>.none{animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}
/* Keyboard focus reads in the lamp colour everywhere, not just on desks. */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--lamp);outline-offset:2px;border-radius:2px}
@media(prefers-reduced-motion:reduce){
  .view,.door,.door .glow,.card,.scrim,.pulse,.lamp,.screen,.person,.row .dot{transition:none!important}
  .fade,.card.opening>*,.stage>.none{animation:none!important}
}
.preview{margin-top:.5rem;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#000}
.preview img{display:block;width:100%;height:auto}
.err{margin:1rem 0;color:#ff9d7e}

/* Tabs in the bar */
nav.tabs{display:flex;gap:.25rem}
nav.tabs a{text-decoration:none;color:var(--mute);padding:0 .6rem;min-height:44px;display:inline-flex;align-items:center;border-bottom:2px solid transparent;font-size:.9rem}
nav.tabs a.on{color:var(--paper);border-bottom-color:var(--lamp)}
/* Wrapping starts at 60rem. Six tabs (HR is the sixth, a link off the floor) plus the clock,
   the wages counter and Close need more than the old 54rem line. On a phone the tabs already
   take their own row. */
@media(max-width:30rem){nav.tabs a{padding:0 .4rem;font-size:.82rem}}
@media(max-width:60rem){
  .bar{flex-wrap:wrap}
  .bar nav.tabs{order:3;width:100%;justify-content:flex-start}
  /* On a phone the bar wraps, so the counter drops to its own line under the title and the Close
     button keeps the corner it already had. Costs one short line, pushes nothing off the screen. */
  .bar .right{display:contents}
  .tally{order:2}
  .tally b{font-size:.9rem}
  /* The clock rides beside the counter on the wrapped line. The divider is a desktop device;
     on a phone the two sit on one row and it would read as a stray mark. */
  .clock{order:1;border-right:0;padding-right:0;margin-right:.75rem}
  .clock b{font-size:.9rem}
}

/* Board tab */
.board{display:grid;gap:1rem}
@media(min-width:64rem){.board{grid-template-columns:1fr 1fr}}
.broom{background:var(--wall);border:1px solid var(--line);border-radius:4px;padding:.9rem 1rem}
.broom h3{font-size:1.15rem;margin-bottom:.5rem}
.broom.parked{opacity:.6}
ul.rows{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:.9rem 1fr;gap:.2rem .6rem;padding:.6rem 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0;padding-top:0}
.row .dot{width:.6rem;height:.6rem;border-radius:50%;border:1.5px solid var(--mute);margin-top:.5rem;transition:background .8s,border-color .8s}
.row.working .dot{background:var(--lamp);border-color:var(--lamp)}
.row.blocked .dot{background:var(--ember);border-color:var(--ember)}
.row.parked .dot{border-color:var(--dim)}
.row.unknown .dot{border-style:dashed}
.row .head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
/* The name is the only way a board row opens a card, so it gets a full 44px thumb zone. The
   negative margin keeps the row as tight as before; only the hit area grows. */
.linkish{appearance:none;background:none;border:0;padding:0 .2rem 0 0;color:var(--paper);font-weight:600;font-size:.95rem;cursor:pointer;min-height:44px;margin:-.5rem 0;display:inline-flex;align-items:center;text-align:left}
.linkish:hover{color:var(--lamp)}
.row .role{color:var(--mute);font-size:.8rem}
.row .st{font-size:.75rem;color:var(--mute)}
.row.working .st{color:var(--lamp)}
.row.blocked .st{color:#ff9d7e}
.row .doing{margin:.1rem 0 0}
.row.idle .doing,.row.parked .doing,.row.unknown .doing{color:var(--mute)}
.row .block{margin:.3rem 0 0;padding:.3rem .6rem;border-left:2px solid var(--ember)}
.row .next{margin:.2rem 0 0;color:var(--mute);font-size:.9rem}
.row .when{margin:.15rem 0 0;color:var(--dim);font-size:.78rem}
.row .when.stale{color:#ff9d7e}

/* Shared by 3D and 2D */
.roomnav{display:flex;gap:.35rem;flex-wrap:wrap;padding:.6rem 1rem 0;max-width:72rem;margin:0 auto}
.roomnav:empty{display:none}
.roomnav .ghost.on{border-color:var(--lamp);color:var(--lamp)}
/* Who is in the room, on the chip that opens it (roomfaces.js). Portraits overlap and are cut out
   with a border in the page colour, so three faces cost about the width of two. The count that
   follows is the desks that did not fit, not a second kind of thing. */
.roomnav .ghost{display:inline-flex;align-items:center;gap:.45rem}
.roomnav .faces{display:inline-flex;align-items:center;flex:none}
.roomnav .faces img{
  display:block;width:22px;height:22px;box-sizing:border-box;
  border-radius:50%;border:2px solid var(--night);background:#2a2620;
  object-fit:cover;object-position:center 18%;
}
.roomnav .faces img+img{margin-left:-6px}
.roomnav .faces .more{margin-left:.3rem;font-size:.72rem;color:var(--mute);font-variant-numeric:tabular-nums}
/* Phone: one face per chip. Five chips plus Floor have to stay inside a thumb's sweep, and a pile of
   three on each turns the strip into a scroll nobody asked for. */
@media(max-width:37.5rem){
  .roomnav .faces img+img{display:none}
  .roomnav .faces .more{display:none}
}
.card .week{margin:.9rem 0 0;border:1px solid var(--line);border-radius:4px;padding:.4rem .7rem}
.card .week summary{cursor:pointer;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:1.05rem;min-height:36px;display:flex;align-items:center;gap:.5rem}
.card .week summary .count{color:var(--mute);font-size:.8rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.weeklist{margin:.4rem 0 .3rem;padding-left:1.1rem}
.weeklist li{margin:.3rem 0;line-height:1.4}
.weeklist .at{display:block;color:var(--mute);font-size:.75rem}
.card .note{color:var(--mute);font-size:.8rem;margin:.35rem 0 0}

/* Bio, resume, background, expertise (monitor/bios) */
.card .bio{margin:0;line-height:1.5}
.card .bio.empty{color:var(--dim);font-style:italic}
.card .background{margin:0;color:var(--mute);line-height:1.5}
ul.resume{margin:0;padding-left:1.1rem}
ul.resume li{margin:.3rem 0;line-height:1.4}
/* Research lines carry raw URLs. Break them instead of pushing the card sideways on a phone. */
ul.research li{overflow-wrap:anywhere}
ul.research li,ul.skills li,ul.training li{color:var(--mute);font-size:.9rem}
ul.tags{display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0;list-style:none}
ul.tags li{font-size:.75rem;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:.2rem .6rem}

/* History (the full log) and the wage line */
ol.history{margin:0;padding-left:1.1rem;max-height:22rem;overflow:auto}
ol.history li{margin:.35rem 0;line-height:1.4}
ol.history .at{display:block;color:var(--mute);font-size:.75rem}
ol.history .hours{color:var(--mute);font-size:.75rem;margin-left:.4rem;white-space:nowrap}
.card .wage{margin:0;font-size:1.02rem;letter-spacing:.01em}
.card .wage.empty{color:var(--dim)}
.card .wagenote{margin:.25rem 0 0;color:var(--mute);font-size:.8rem}

/* Highlight, money saved, and the desk score (all derived in auth.php from monitor/bios + status) */
.card .hl{margin:.35rem 0 0;line-height:1.45}
.card .hlmeta{margin:.2rem 0 0;color:var(--mute);font-size:.8rem}
.card .saved{font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;font-size:2.3rem;line-height:1.05;letter-spacing:-.01em;color:var(--lamp);margin:.1rem 0 0}
.card .saved.empty{color:var(--mute)}
.card .savedsub{margin:.25rem 0 0;color:var(--mute);font-size:.85rem;line-height:1.4}
.card .score{margin:.5rem 0 0;font-size:.85rem;color:var(--paper);display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;line-height:1.4}
.parkmark{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--paper);background:rgba(154,146,131,.16);border:1px solid var(--mute);border-radius:3px;padding:.08rem .35rem;white-space:nowrap}

/* Board: the same two numbers per row, and each room's subtotal in its header */
.row .val{margin:.15rem 0 0;font-size:.8rem;color:var(--mute);display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.row .val b{color:var(--lamp);font-weight:600;font-size:.9rem}
.broom h3 .rsum{display:block;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:.8rem;color:var(--mute);margin-top:.15rem}
.broom h3 .rsum b{color:var(--lamp);font-weight:600;font-size:.9rem}

/* Stale: no status written in over 24 h */
.stalemark{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#1a1613;background:var(--ember);border:1px solid var(--ember);border-radius:3px;padding:0 .3rem;margin-left:.4rem;white-space:nowrap}
.card .who .stalemark{display:inline-block;margin-top:.2rem}

/* Top performer of a room: the one desk auth.php found with a strictly higher score than every
   other non-parked desk in that room. A tie for first, or a room where nobody scored, has no
   winner, so this tag is never simply always on. Gold is the lamp token, the same colour the
   floor, the saved figure and the focus ring already use; it is not a new colour. */
.topmark{font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#241f18;background:var(--lamp);border:1px solid var(--lamp);border-radius:3px;padding:0 .3rem;white-space:nowrap}
.card .who .topmark{display:inline-block;margin-top:.2rem;margin-left:.4rem;border-radius:999px;padding:.1rem .5rem}
/* Drawn as a shadow, not a border, so the ring cannot move the portrait or widen a row. */
.row.top .head .face,.desk.top .label .face{box-shadow:0 0 0 2px var(--lamp)}

/* Ember: the poll could not reach the office */
.pulse.ember{background:var(--ember);animation:ember 1.8s ease-in-out infinite}
@keyframes ember{0%,100%{opacity:1}50%{opacity:.25}}
body[data-poll="ember"] .bar .sub{color:var(--ember)}
@media(prefers-reduced-motion:reduce){.pulse.ember{animation:none}}

/* Modest shell footer. Same mute as the tabs, not a marketing bar. */
.sitefoot{
  border-top:1px solid var(--line);
  padding:.7rem 1rem calc(.9rem + env(safe-area-inset-bottom, 0px));
  color:var(--dim);font-size:.8rem;
}
.sitefoot p{margin:0;max-width:72rem}
.sitefoot a{color:var(--mute);text-underline-offset:2px}
.sitefoot a:hover{color:var(--lamp)}

/* Desk file browser: Mac Sites path notes (kind=mac) */
.chip-mac { cursor: default; opacity: .92; }
.chip-mac .mac-path { display: block; font-size: 11px; opacity: .75; word-break: break-all; margin-top: 2px; }