/* The ground the Studio tab stands on: the hub's tokens, type and the few
   shared pieces its connect.css leans on (the hub's static/css/hub.css,
   whose tokens are the studio's 00-tokens.css). connect.css beside this is
   the hub's own file, copied whole. Fonts are served from here: this origin
   loads nothing from anywhere else. */
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(../fonts/Barlow_400Regular.ttf) format("truetype")}
@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url(../fonts/Barlow_500Medium.ttf) format("truetype")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(../fonts/Barlow_600SemiBold.ttf) format("truetype")}
@font-face{font-family:"Barlow Semi Condensed";font-weight:500;font-display:swap;src:url(../fonts/BarlowSemiCondensed_500Medium.ttf) format("truetype")}
@font-face{font-family:"Barlow Semi Condensed";font-weight:600;font-display:swap;src:url(../fonts/BarlowSemiCondensed_600SemiBold.ttf) format("truetype")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(../fonts/JetBrainsMono_400Regular.ttf) format("truetype")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url(../fonts/JetBrainsMono_500Medium.ttf) format("truetype")}

:root{
  color-scheme:dark;
  --ground:#0A0E13;
  --well:#06090D;
  --surf-1:#10161D;
  --surf-2:#172029;
  --surf-3:#1F2A35;
  --surf-4:#26333F;
  --line:#243240;
  --line-soft:#1A2430;
  --ink:#E9F0F5;
  --ink-2:#B4C3CF;
  --ink-3:#8A9DAD;
  --ink-4:#697E90;
  --ink-5:#4A5C6B;
  --accent:#F5A524;
  --accent-2:#FFC15E;
  --accent-ink:#1A1206;
  --accent-wash:rgba(245,165,36,.13);
  --accent-line:rgba(245,165,36,.42);
  --ok:#35C48D;       --ok-wash:rgba(53,196,141,.13);   --ok-line:rgba(53,196,141,.40);
  --review:#7AA2F7;   --review-wash:rgba(122,162,247,.13);
  --work:#A78BFA;     --work-wash:rgba(167,139,250,.13);
  --stale:#F2566A;    --stale-wash:rgba(242,86,106,.13);
  --mono:"Cascadia Mono","JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ui:"Bahnschrift Light","Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --disp:"Bahnschrift SemiCondensed","Barlow Semi Condensed","Bahnschrift Light",system-ui,sans-serif;
  --ui-body:system-ui,-apple-system,"Segoe UI",Roboto,"Barlow","Helvetica Neue",sans-serif;
  --r:5px;
  --r-sm:3px;
}

*{box-sizing:border-box}
html,body{background:var(--ground)}
body{margin:0;color:var(--ink);font-family:var(--ui-body);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--ui);font-weight:600;text-wrap:balance}
h3{font-size:14px;letter-spacing:-.005em}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;padding:2px 7px 2px 5px;border-radius:99px;border:1px solid}
.pill i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.pill.ok{color:var(--ok);border-color:rgba(53,196,141,.32);background:var(--ok-wash)}
.pill.review{color:var(--review);border-color:rgba(122,162,247,.32);background:var(--review-wash)}
.pill.work{color:var(--work);border-color:rgba(167,139,250,.32);background:var(--work-wash)}
.pill.work i{animation:pulse 1.6s ease-in-out infinite}
.pill.stale{color:var(--stale);border-color:rgba(242,86,106,.32);background:var(--stale-wash)}
.pill.idle{color:var(--ink-3);border-color:var(--line);background:var(--surf-2)}
.pill.warn{color:var(--accent-2);border-color:var(--accent-line);background:var(--accent-wash)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.muted{color:var(--ink-3)}.faint{color:var(--ink-4)}
.tiny{font-size:11.5px}
a.lnk{color:var(--accent-2);text-decoration:none;cursor:pointer}
a.lnk:hover{text-decoration:underline}
.fld{display:grid;gap:5px}
.fld label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.inp{background:var(--surf-2);border:1px solid var(--line);border-radius:var(--r);padding:7px 10px;color:var(--ink);font-size:13px;width:100%}
textarea.inp{min-height:70px;resize:none;font-family:inherit}
.inp:focus{outline:none;border-color:var(--surf-4);background:var(--surf-3)}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:200;
  display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 16px 0 14px;
  max-width:min(560px,calc(100vw - 32px));border-radius:99px;
  background:rgba(31,42,53,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--surf-4);box-shadow:0 10px 30px rgba(0,0,0,.5);
  font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:toastRise .2s cubic-bezier(.2,.8,.3,1)}
.toast::before{content:'';width:7px;height:7px;border-radius:50%;flex:none;background:var(--ink-4)}
.toast.err{border-color:rgba(242,86,106,.38)}
.toast.err::before{background:var(--stale)}
.toast.out{animation:toastOut .18s ease-in forwards}
@keyframes toastRise{from{opacity:0;transform:translate(-50%,10px) scale(.97)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,6px)}}

/* what the hub's templates said in style attributes: no inline style here */
.mt4{margin-top:4px}.mt6{margin-top:6px}.mt10{margin-top:10px}.mt14{margin-top:14px}.mt16{margin-top:16px}.mt18{margin-top:18px}
.cn-err.inset{margin:12px 16px}
.cn-tk .pill.incut{vertical-align:3px}
.cn-thd .cn-hint{margin:0}
.cn-card .warnfix{margin-top:6px;color:var(--ink-2)}
.cn-card .bt.one{grid-template-columns:1fr}
.cn-card .bt.pad{padding-top:2px}
.cn-act.flex{display:flex}
.cn-q .m.gap{margin-right:8px}
.cn-pad .cn-btn.mt4{margin-top:4px}
/* Waiting for Keep: the studio holds a new phone until the desk says so */
.cn-keep{border:1px solid var(--accent-line);background:var(--accent-wash);border-radius:var(--r);padding:10px 12px;font-size:13px;color:var(--ink);line-height:1.45}
.cn-keep b{font-weight:600}
/* top level, outside the hub's frame: a little room above */
body.top .cn{padding-top:22px}

.sprite{position:absolute;width:0;height:0;overflow:hidden}