/* ====================================================================
   THE CLOCK — /clock, and the organisers' desk for it (/admin → the clock).

   ITS OWN SHEET, AND IT OWNS NO SKY. The scene, the void, the veil and how
   strongly they show through are §2 of esd.css and sky.js; this file only
   lays type and logos over whatever they draw, so a new sky reaches the
   screens in the room without anybody opening this one. ground() in app.js
   gives the clock the poster's full-strength sky — it is the one screen in
   the product that is looked at from across a room, which is what the
   poster was drawn for.

   BUILT PHONE FIRST. A phone is a column: the countdown, your own
   afternoon, then everybody's as names. `.ck-big` — a landscape window
   wide enough for two columns, or ?screen — is the room's: the countdown
   left, the conversations right as marks, rolling upwards.
   ==================================================================== */

/* THE CLOCK'S OWN FACE. Orbitron, self-hosted like the house's fonts, so a
   television on venue wifi never draws the countdown in a fallback: wide,
   squared digits that read as a scoreboard from the back of the room. Only
   the clock's numbers and labels wear it; everything a person reads up
   close stays in the house face. */
@font-face{font-family:"Orbitron";font-style:normal;font-weight:400 900;font-display:block;
  src:url("fonts/Orbitron.woff2") format("woff2")}

body.clockface .wrap{max-width:none;padding:0}
body.ck-fit{overflow:hidden}
/* A SCREEN NOBODY IS STANDING AT HAS NO BAR AT ALL — no account to open,
   no menu, and no strip across the top of a picture that is all clock */
body.ck-kiosk header.topbar,body.ck-kiosk .mobnav{display:none}
body.ck-kiosk{--bar-h:0px}
body.ck-idle,body.ck-idle *{cursor:none !important}
body.ck-idle .ck-full{opacity:0;pointer-events:none}

.ck{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:30px;
  padding:calc(var(--bar-h) + 22px) var(--pad-x) 120px}
.ck-l{display:flex;flex-direction:column;min-width:0;container-type:inline-size}

/* ---- the countdown ---- */
.ck-state{margin:0 0 12px;font-family:"Orbitron",var(--font);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;line-height:1.4}
.ck-state span{opacity:.62}
.ck-chip{display:inline-block;margin-right:.8em;padding:.1em .75em;border:1px solid rgba(255,106,26,.65);
  border-radius:999px;color:var(--accent-bright)}
.ck-time{margin:0 0 0 -.03em;color:#fff;font-family:"Orbitron",var(--font);font-weight:900;line-height:.86;letter-spacing:0;
  white-space:nowrap;font-size:clamp(60px,20vw,130px);font-size:25.6cqi}
/* FIXED-WIDTH DIGITS, BY HAND. The display face is proportional, so a 1
   is narrower than a 0 and a countdown in it shuffles sideways every
   second. Every digit gets the same box and the colon a narrower one. */
.ck-time .d{display:inline-block;width:.86em;text-align:center}
.ck-time .c{display:inline-block;width:.34em;text-align:center;position:relative;top:-.02em}
.ck-word{display:inline-block;font-size:.4em;text-transform:uppercase;letter-spacing:-.03em;
  background:var(--sweep);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.ck-bar{height:4px;margin:12px 0 16px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.ck-bar i{display:block;height:100%;width:0;background:var(--sweep);transition:width .3s linear}
.ck-sub{margin:0;font-size:16px;line-height:1.45;color:var(--ink)}
.ck-sub b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.ck-note{margin:16px 0 0;padding-left:14px;border-left:2px solid var(--accent);
  font-size:16px;font-weight:700;line-height:1.35;color:var(--accent-bright)}
.ck-note[hidden]{display:none}

/* THE BREAK IS THE POSTER'S GRADIENT. A conversation is white digits; the
   five minutes to change tables are the sphere poured into them, which is
   what makes the two readable from the back of the room without reading. */
.ck-break .ck-time{background:var(--sweep);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.ck-hurry .ck-time{color:var(--accent);animation:ckpulse 1s ease-in-out infinite alternate}
.ck-hurry .ck-bar i{background:var(--accent)}
.ck-paused .ck-time{animation:ckblink 2.4s ease-in-out infinite}
.ck-paused .ck-bar i{background:rgba(255,255,255,.45)}
.ck.ck-before .ck-bar,.ck.ck-after .ck-bar,.ck.ck-unset .ck-bar{display:none}
.ck.ck-after .ck-r,.ck.ck-unset .ck-r{display:none}
@keyframes ckpulse{from{opacity:1}to{opacity:.62}}
@keyframes ckblink{0%,100%{opacity:.85}50%{opacity:.35}}

/* ---- your own afternoon ---- */
.ck-you:empty{display:none}
.ck-you{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.ck-yh{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.ck-yl{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:9px 0}
.ck-yk{flex:0 0 46px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-bright)}
.ck-them{display:inline-flex;align-items:center;gap:9px;min-width:0;font-size:19px;line-height:1.2}
.ck-them b{font-weight:700;color:#fff}
.ck-them.off{font-size:15px;opacity:.75}
.ck-yt{font-size:14px;font-variant-numeric:tabular-nums;opacity:.8}
.ck-yall{margin-top:6px}
.ck-yall summary{cursor:pointer;width:max-content;font-size:13px;opacity:.85}
.ck-yall summary:hover{opacity:1}
.ck-yall ol{list-style:none;margin:10px 0 0;padding:0}
.ck-yall li{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line-soft)}
.ck-yall li .ck-them{font-size:15px}
.ck-yall li.done{opacity:.38}
.ck-yall li.on .ck-ys{color:var(--accent-bright)}
.ck-ys{width:20px;font-weight:700;font-variant-numeric:tabular-nums}
.ck-yall li .ck-yt{width:44px}
.ck-desk{margin-top:26px;align-self:flex-start}

/* ---- everybody's: the board ---- */
.ck-r{min-width:0}
.ck-bh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 4px;font-family:"Orbitron",var(--font);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.ck-bh b{margin-right:.7em;color:var(--accent-bright)}
.ck-bh i{font-style:normal;opacity:.6}
.ck-wall{display:none}
.ck-row{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.ck-row.mine{margin:0 -10px;padding-left:10px;padding-right:10px;background:var(--accent-soft);
  border-bottom-color:transparent;border-radius:4px}
.ck-side{display:flex;align-items:center;gap:9px;min-width:0}
.ck-nm{min-width:0;font-size:15px;font-weight:500;line-height:1.25;overflow-wrap:break-word;color:#fff}
/* A PHONE GETS NAMES. It is read at arm's length, where a name is quicker
   than a mark, and a wordmark beside the same word is the name twice. The
   marks are the big screen's (below). */
.ck-logo,.ck-mark{display:none}
.ck-arw{display:block;width:18px;height:18px;color:var(--accent-bright)}
.ck-arw svg{display:block;width:100%;height:100%}
.ck-empty{margin:16px 0;font-size:15px;opacity:.75}
.ck-empty:empty{display:none}
.ck-full{position:fixed;right:22px;bottom:calc(var(--footer-h) + 16px);z-index:60;transition:opacity .4s var(--ease)}

/* ====================================================================
   THE ROOM'S SCREEN
   ==================================================================== */
.ck-big{--ck-row:clamp(38px,6.2vh,74px);
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:clamp(24px,2.6vw,60px);
  height:100vh;height:100dvh;overflow:hidden;
  padding:calc(var(--bar-h) + 3.4vh) clamp(28px,3.6vw,76px) calc(var(--footer-h) + 2.6vh)}
.ck-big.ck-after,.ck-big.ck-unset{grid-template-columns:minmax(0,1fr)}
.ck-big .ck-l{justify-content:center;justify-content:safe center;overflow-y:auto;scrollbar-width:none}
.ck-big .ck-l::-webkit-scrollbar{display:none}
.ck-big .ck-state{margin-bottom:2.4vh;font-size:clamp(18px,2.1vw,44px)}
/* THE CLOCK IS THE SCREEN. As wide as its column allows and never taller
   than about half the screen, whichever runs out first. */
.ck-big .ck-time{font-size:clamp(120px,22vw,520px);font-size:min(25.8cqi,48vh)}
.ck-big .ck-bar{height:10px;margin:3.2vh 0 2.8vh;border-radius:5px}
.ck-big .ck-sub{font-size:clamp(18px,1.9vw,40px)}
.ck-big .ck-note{margin-top:3vh;font-size:clamp(18px,1.8vw,38px)}
.ck-big .ck-you{margin-top:4vh}
.ck-big .ck-r{display:flex;flex-direction:column;min-height:0}
.ck-big .ck-bh{margin-bottom:1vh;font-size:clamp(11px,.85vw,17px)}
.ck-big .ck-wall{display:block;font-size:clamp(17px,1.5vw,32px);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;color:#fff}
.ck-big .ck-roll{flex:1;min-height:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 92%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 92%,transparent 100%)}
/* THE CONVERSATIONS ARE THE SMALL PRINT. One narrow column beside the
   clock, rolling, for the person looking for their own name — the room as
   a whole reads the countdown. */
.ck-big .ck-set{display:grid;grid-template-columns:minmax(0,1fr);padding-bottom:var(--ck-row)}
.ck-big .ck-row{height:var(--ck-row);box-sizing:border-box;padding:0;gap:clamp(8px,.8vw,16px);
  grid-template-columns:minmax(0,1fr) clamp(13px,1vw,20px) minmax(0,1fr)}
.ck-big .ck-row.mine{margin:0;padding:0 10px}
.ck-big .ck-side{height:100%;container-type:inline-size}
.ck-big .ck-st{justify-content:flex-end}
.ck-big .ck-arw{width:100%;height:auto;aspect-ratio:1}
/* NAMES, NOT LOGOS — on the big screen too. Thirty startups' marks are
   thirty things nobody in the room has seen before; a name is read at once.
   The marks are still in the row (and prepared, see clock.js) for the day
   somebody wants them back: this one rule is the switch. */
.ck-big .ck-side .ck-logo,.ck-big .ck-side .ck-mark{display:none !important}
.ck-big .ck-mark{display:flex;align-items:center;min-width:0;max-width:100%;height:100%}
.ck-big .ck-mark img{display:block;max-width:100%;object-fit:contain;
  height:calc(var(--ck-row) * .46 * var(--s, 1))}
/* a logo, as clock.js prepared it: trimmed to its ink, and either light
   already, turned white, or a tile that carries its own background. `plate`
   is the one that could not be read, on the house's light plate. */
.ck-big .ck-logo{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  box-sizing:border-box;height:calc(var(--ck-row) * var(--lh, .5));max-width:100%}
.ck-big .ck-logo img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}
.ck-big .ck-logo.k-tile img{border-radius:6px}
.ck-big .ck-logo.k-plate{height:calc(var(--ck-row) * .6);border-radius:6px;background:#f4f4f4;
  padding:calc(var(--ck-row) * .07) calc(var(--ck-row) * .12)}
.ck-big .ck-nm{font-size:clamp(13px,1.15vw,24px);font-size:min(clamp(13px,1.15vw,24px),calc(100cqi / (var(--len, 8) * .66)));
  font-weight:700;line-height:1.02;text-transform:uppercase;letter-spacing:-.01em;overflow-wrap:normal;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ck-big .ck-st .ck-nm{text-align:right}
.ck-big .ck-empty{font-size:clamp(13px,1vw,20px)}
.ck-list.rolling{animation:ckroll var(--roll, 40s) linear infinite;will-change:transform}
@keyframes ckroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}

@media (prefers-reduced-motion:reduce){
  .ck-list.rolling{animation:none}
  .ck-big .ck-roll{overflow-y:auto}
  .ck-hurry .ck-time,.ck-paused .ck-time{animation:none}
}

/* ====================================================================
   THE DESK — /admin → the clock
   ==================================================================== */
.ckd{max-width:1000px}
.ckd .pill[disabled]{opacity:.32;pointer-events:none}
/* a press on its way to the database: still pressable — presses queue — but
   visibly not landed yet */
.ckd-busy .ckd-main .pill,.ckd-busy #ckdHere .pill,.ckd-busy .ckd-pick .pill{opacity:.7}
.ckd-off .ckd-main,.ckd-off #ckdHere,.ckd-off .ckd-track,.ckd-off .ckd-pick{opacity:.4;pointer-events:none}
.ckd-now{padding:0 0 26px;border-bottom:1px solid var(--line)}
.ckd-l{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-bright)}
.ckd-face{font-size:clamp(20px,2.4vw,30px);font-weight:700;line-height:1.3;color:#fff}
.ckd-face .ck-chip{font-size:.5em;letter-spacing:.14em;text-transform:uppercase;vertical-align:.3em}
.ckd-big{font-family:"Orbitron",var(--font);font-weight:800;font-variant-numeric:tabular-nums}
.ckd-plan{margin:8px 0 18px;font-size:15px}
.ckd-plan:empty{display:none}
.ckd-plan b{color:#fff}
.ckd-last{margin:14px 0 0;font-size:13px;opacity:.82}
.ckd-last:empty{display:none}
.ckd-sec{padding:26px 0;border-bottom:1px solid var(--line)}
.ckd-sec:empty{display:none}
.ckd-sec .psec{margin:0 0 12px}
.ckd-help{margin:0 0 14px;max-width:64ch}
/* the strip: a block per phase, as wide as it is long */
.ckd-track{position:relative;padding:10px 0 2px}
.ckd-blocks{display:flex;gap:2px;height:60px}
.ckd-ph{flex:1 1 0;min-width:0;padding:0;border:0;border-radius:3px;cursor:pointer;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  transition:background .2s var(--ease),opacity .2s var(--ease)}
.ckd-ph.talk{background:rgba(107,75,216,.5)}
.ckd-ph.talk:hover{background:rgba(107,75,216,.75)}
.ckd-ph.break{background:rgba(255,255,255,.09)}
.ckd-ph.break:hover{background:rgba(255,255,255,.18)}
.ckd-ph.past{opacity:.34}
.ckd-ph.cur.talk{background:rgba(107,75,216,.85)}
.ckd-ph.cur.break{background:rgba(255,106,26,.35)}
.ckd-ph.sel{box-shadow:inset 0 0 0 2px #fff}
.ckd-ph b{font-size:14px;font-weight:700;line-height:1}
.ckd-ph span{font-size:10.5px;line-height:1;font-variant-numeric:tabular-nums;opacity:.85}
.ckd-head{position:absolute;top:2px;bottom:-4px;left:0;width:2px;margin-left:-1px;pointer-events:none;
  background:var(--accent);transition:transform .25s linear}
.ckd-head::before{content:'';position:absolute;top:-4px;left:-5px;width:12px;height:12px;border-radius:50%;
  background:inherit}
.ckd-head.paused{background:var(--warn)}
.ckd-head[hidden]{display:none}
.ckd-pick{margin-top:18px}
.ckd-pick:empty{display:none}
.ckd-pickhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin-bottom:12px;font-size:15px}
.ckd-pickhead b{font-size:17px;color:#fff}
.ckd-pickhead i{font-style:normal;opacity:.65}
.ckd-pick .fq-tip{margin:10px 0 0;max-width:64ch}
.ckd-note{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.ckd-note input{flex:1 1 320px;min-width:0}
.ckd-foot{border-bottom:0}
.ckd-foot .disclaimer{margin-top:16px}
@media (max-width:760px){
  .ckd-blocks{height:48px;gap:1px}
  .ckd-ph span{display:none}
}