/* Round 13: the owner's pages. Same display as round 12 (pixel light on a near-black field, mono, Doto for names).
   Two colours join the chart blue-white, each with one meaning:
   --wait   amber: something waits for you (a draft, a stale machine). Owner pages only; coworkers never see it.
   --flag   coral: the exact words a flag matched. Nothing else. */
:root{--chart:206,222,240;--wait:#f0b44c;--flag:#e0745f;--dot:'Doto',var(--mono);--line:rgba(206,222,240,.16)}
html,body{background:#020308}
body{min-height:100vh}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.wrap{position:relative;z-index:1}
.k{display:inline-block;min-width:16px;padding:0 4px;margin-left:8px;font-size:10px;line-height:15px;text-align:center;color:var(--faint);box-shadow:inset 0 0 0 1px rgba(206,222,240,.18);border-radius:2px;letter-spacing:0;text-transform:none}

/* focus: the design's own ring, only for the keyboard */
:focus{outline:none}
:focus-visible{outline:1px solid rgba(240,180,76,.9);outline-offset:2px}
/* the owner bar */
#bar{position:sticky;top:0;z-index:5}
.ob{position:relative;z-index:3;display:flex;align-items:center;gap:14px;height:48px;padding:0 var(--gut)}
.ob-back{display:grid;place-items:center;width:32px;height:32px;margin-left:-8px;color:rgba(240,180,76,.6)}
.ob-back:hover{color:#ffd58a}
.ob-here{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,180,76,.55)}
.ob-n{font-weight:500;color:#ffe2a6;letter-spacing:0;font-variant-numeric:tabular-nums;margin-left:8px}
.ob-warn{width:5px;height:5px;background:var(--wait);display:inline-block;margin-left:8px;vertical-align:1px}
.ob-menu{position:relative;margin-left:auto}
.ob-pol{display:flex;align-items:baseline;gap:9px;font-size:11px;color:rgba(240,180,76,.55);white-space:nowrap;padding:6px 0}
.ob-pol:hover,.ob-menu.on .ob-pol{color:#ffd58a}
.ob-dd{position:absolute;right:0;top:calc(100% + 4px);min-width:170px;display:none;flex-direction:column;padding:6px 0;background:#06070d;box-shadow:inset 0 0 0 1px rgba(240,180,76,.35),0 14px 40px rgba(0,0,0,.6);z-index:9}
.ob-menu.on .ob-dd{display:flex}
.ob-dd a{display:flex;align-items:center;padding:9px 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,180,76,.7)}
.ob-dd a:hover{background:rgba(240,180,76,.07);color:#ffd58a}
.ob-dd a.on{color:#ffe2a6}

/* sections: a label and a dotted rule, as in the round 12 panel */
.sec{display:flex;align-items:center;gap:10px;margin:22px 0 11px}
.sec .lbl{font-size:10px;color:var(--faint);white-space:nowrap}
.sec::after{content:'';flex:1;height:1px;background-image:linear-gradient(90deg,rgba(206,222,240,.2) 1px,transparent 1px);background-size:3px 1px}
.sec .aside{order:3;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);white-space:nowrap}

/* buttons: hairlines, never filled. The one you are about to press gets corner marks */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;height:38px;padding:0 12px;font-size:12px;color:var(--body);
  box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s,color .15s;white-space:nowrap}
.btn:hover{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(206,222,240,.4)}
.btn.on,.btn.go{color:var(--ink);box-shadow:none}
.btn.on::before,.btn.go::before{content:'';position:absolute;inset:0;pointer-events:none;--c:rgba(206,222,240,.9);
  background:linear-gradient(var(--c),var(--c)) 0 0/7px 1px,linear-gradient(var(--c),var(--c)) 0 0/1px 7px,linear-gradient(var(--c),var(--c)) 100% 0/7px 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px 7px,
    linear-gradient(var(--c),var(--c)) 0 100%/7px 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px 7px,linear-gradient(var(--c),var(--c)) 100% 100%/7px 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px 7px;background-repeat:no-repeat}
.btn.on{background:rgba(206,222,240,.05)}
.btn[disabled]{color:var(--faint);cursor:default}
.btn[disabled]::before{--c:rgba(206,222,240,.3)}
.btn .k{margin-left:0}

/* why chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 11px 0 8px;font-size:12px;color:var(--body);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .12s,color .12s,background .12s}
.chip .k{margin:0;min-width:15px}
.chip:hover{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(206,222,240,.4)}
.chip.on{color:var(--ink);background:rgba(206,222,240,.08);box-shadow:inset 0 0 0 1px rgba(206,222,240,.85)}
.chip.on .k{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(206,222,240,.6)}
.line-in{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;box-shadow:inset 0 0 0 1px var(--line);margin-top:10px}
.line-in:focus-within{box-shadow:inset 0 0 0 1px rgba(206,222,240,.6)}
.line-in input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:13px var(--mono)}
.line-in input::placeholder{color:var(--faint)}
.line-in .lbl{font-size:10px;color:var(--faint)}

/* flags: the exact words, marked in place */
mark.fl{background:none;color:var(--flag);box-shadow:0 1px 0 var(--flag)}
.flag{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;font-size:12px;color:var(--body);padding:6px 0}
.flag .fk{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--flag);padding-top:1px;white-space:nowrap}
.flag .fm{color:var(--ink)}
.flag .fm q{quotes:none;color:var(--flag)}
.flag .fw{grid-column:2;color:var(--faint);font-size:11px}

/* labelled facts */
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 16px;font-size:12px;align-items:baseline}
.facts .lbl{font-size:10px;color:var(--faint)}
.facts b{font-weight:400;color:var(--body)}
.facts .soon{color:var(--wait)}

ins{text-decoration:none;color:var(--ink);box-shadow:0 1px 0 rgba(206,222,240,.7)}
del{color:var(--faint);text-decoration:line-through;text-decoration-color:rgba(206,222,240,.45)}

@media (max-width:720px){
  .ob-pol{font-size:10.5px}
  .chip{height:44px;padding:0 13px 0 10px;font-size:13px}
  .btn{height:46px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}