/* Round 14: the app shell. Same display as round 12: pixel light on a near-black field, mono for words, Doto for
   names. One added colour, amber, means one thing: something waits on you. It appears on your own surfaces only. */
:root{--chart:206,222,240;--wait:#f0b44c;--wait-hot:#ffd58a;--dot:'Doto',var(--mono)}
html,body{background:#020308}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* away: the page is veiled the moment it is left, so the app switcher shows nothing */
html.veiled body > *:not(#sky){visibility:hidden}
:focus{outline:none}
:focus-visible{outline:1px solid rgba(206,222,240,.7);outline-offset:3px}

/* the name plate (round 12): a ruled star-chart title */
.np{text-align:center}
.np .rule{display:flex;align-items:center;justify-content:center;gap:14px;color:rgba(var(--chart),.5)}
.np .rule i{display:block;height:1px;width:min(22vw,200px);background:linear-gradient(90deg,transparent,rgba(var(--chart),.45))}
.np .rule i:last-child{background:linear-gradient(270deg,transparent,rgba(var(--chart),.45))}
.np h1{font:700 clamp(34px,3.8vw,54px)/1 var(--dot);letter-spacing:.32em;margin:10px 0 0 .32em;text-transform:uppercase;color:rgb(var(--chart));
  text-shadow:0 0 14px rgba(120,180,255,.45),0 0 2px rgba(var(--chart),.7)}

/* corner marks: no bar. Back is a small pixel chevron; the policy is a quiet line that opens Log, Devices, Policy */
.cm{position:fixed;top:0;z-index:6;display:flex;align-items:center;height:52px}
.cm.l{left:0;padding-left:calc(var(--gut) - 8px)}
.cm.r{right:0;padding-right:var(--gut);transition:right .22s cubic-bezier(.2,.7,.2,1)}
.back{display:grid;place-items:center;width:36px;height:36px;color:rgba(var(--chart),.5);transition:color .15s}
.back:hover{color:rgb(var(--chart))}
.back svg{display:block}
.pol{position:relative}
.pol > button{display:flex;align-items:center;gap:9px;height:36px;font-size:11px;letter-spacing:.04em;color:rgba(var(--chart),.42);white-space:nowrap;transition:color .15s}
.pol > button:hover,.pol.on > button,.pol > button:focus-visible{color:rgba(var(--chart),.85)}
.pol > button svg{flex:none}
.pol .lk{display:none}
/* narrow: the policy line shortens to a padlock and the menu mark, so it never clips */
@media (max-width:480px){.pol .pt{display:none}.pol .lk{display:block}.pol > button{gap:10px;padding:0 4px;color:rgba(var(--chart),.6)}}
.pol.up .dd{top:auto;bottom:calc(100% + 4px)}
.pol .dd{position:absolute;right:0;top:calc(100% + 4px);z-index:9;min-width:168px;display:none;flex-direction:column;padding:6px 0;background:#04050b;
  box-shadow:inset 0 0 0 1px rgba(206,222,240,.16),0 16px 40px rgba(0,0,0,.6)}
.pol.on .dd{display:flex}
.pol .dd a,.pol .dd button{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--chart),.6);text-align:left}
.pol .dd a:hover,.pol .dd button:hover{background:rgba(206,222,240,.05);color:rgb(var(--chart))}
.pol .dd hr{border:0;height:1px;margin:6px 14px;background-image:linear-gradient(90deg,rgba(206,222,240,.2) 1px,transparent 1px);background-size:3px 1px}

/* the update element: amber, small, calm. Absent when nothing waits; a count when drafts do */
.up{display:inline-flex;align-items:center;gap:18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.up a{display:inline-flex;align-items:center;gap:9px;color:rgba(240,180,76,.62);transition:color .15s}
.up a:hover{color:var(--wait-hot)}
.up a.rv{color:var(--wait)}
.up a.rv b{font:700 15px/1 var(--dot);letter-spacing:0;color:var(--wait-hot);text-shadow:0 0 8px rgba(240,180,76,.35)}
.up .cell{display:block;width:6px;height:6px;background:var(--wait);box-shadow:0 0 6px rgba(240,180,76,.5)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}