/* Desk — same base as the rest of priorstates.com (styles.css): light by default,
   dark when the device asks or the visitor picks it (/theme.js sets data-theme).
   Desk's accent is the violet already in the site palette, a shade deeper on paper. */
:root{
  color-scheme:light;
  --bg:#fbfaf7; --bg2:#ffffff; --bg3:#f1f3f7; --fg:#172033; --dim:#4a5870; --border:#dfe4ec;
  --ink:#0f2747; --input-ink:#172033; --nav-bg:rgba(251,250,247,.9);
  --accent:#8957e5; --accent2:#7445d1; --accent-fg:#fff; --soft:rgba(137,87,229,.10);
  --blue:#1a56b8; --green:#1a7f37; --red:#cf222e; --paper:#eef0f4;
  --bad-line:rgba(207,34,46,.35); --bad-ink:#b42318; --toast-bg:#172033; --toast-fg:#fff;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --radius:14px;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0d1117; --bg2:#161b22; --bg3:#1c2230; --fg:#c9d1d9; --dim:#8b949e; --border:#30363d;
    --ink:#fff; --input-ink:#e6edf3; --nav-bg:rgba(13,17,23,.85);
    --accent2:#a371f7; --soft:rgba(163,113,247,.12);
    --blue:#58a6ff; --green:#3fb950; --red:#f85149; --paper:#2a303b;
    --bad-line:rgba(248,81,73,.4); --bad-ink:#ffb3ad; --toast-bg:#e6edf3; --toast-fg:#0d1117; } }
:root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#0d1117; --bg2:#161b22; --bg3:#1c2230; --fg:#c9d1d9; --dim:#8b949e; --border:#30363d;
    --ink:#fff; --input-ink:#e6edf3; --nav-bg:rgba(13,17,23,.85);
    --accent2:#a371f7; --soft:rgba(163,113,247,.12);
    --blue:#58a6ff; --green:#3fb950; --red:#f85149; --paper:#2a303b;
    --bad-line:rgba(248,81,73,.4); --bad-ink:#ffb3ad; --toast-bg:#e6edf3; --toast-fg:#0d1117; }
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 var(--font);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0;color:var(--ink)}

/* ░ nav — the site's lockup: PriorStates › Desk */
.nav{display:flex;align-items:center;gap:1.5rem;padding:.7rem clamp(1rem,4vw,2rem);background:var(--nav-bg);border-bottom:1px solid var(--border);flex:none}
.brand-wrap{display:flex;align-items:center;gap:.5rem;min-width:0}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:1.15rem;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-sep{color:var(--dim);font-size:1.05rem;line-height:1;user-select:none}
.brand-prod{font-weight:700;font-size:1.05rem;color:var(--accent2);white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:1.3rem;margin-left:auto}
.link{background:none;border:0;padding:0;color:var(--dim);font:inherit;font-size:.95rem;font-weight:500;cursor:pointer;text-decoration:none}
.link:hover{color:var(--ink);text-decoration:none} .link.on{color:var(--ink)}
@media (max-width:520px){.brand span{display:none}.brand-sep{display:none}.nav-links{gap:.9rem}}

main{flex:1;min-height:0;display:flex;flex-direction:column}
.view{flex:1;min-height:0;overflow:auto;padding:clamp(1.6rem,4vw,3rem) clamp(1rem,4vw,2rem) 3rem}
.view>.inner{max-width:1100px;margin:0 auto}
.eyebrow{color:var(--accent2);font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .6rem}
h1{font-size:clamp(1.7rem,3.6vw,2.4rem)}
h2{font-size:1.15rem}
.lede{color:var(--dim);font-size:1.05rem;margin:.7rem 0 0;max-width:62ch}
.fine{color:var(--dim);font-size:.86rem}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.6rem}
.grow{flex:1}

/* controls */
input,select,textarea{font:inherit;color:var(--input-ink);background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:.6em .8em;min-width:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px var(--soft)}
input[type=url],input[type=password]{flex:1}
textarea{width:100%;resize:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:inherit;font-weight:600;font-size:.95rem;padding:.6em 1.15em;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:.15s;background:var(--accent);color:var(--accent-fg);white-space:nowrap}
.btn:hover{background:var(--accent2);text-decoration:none}
.btn.ghost{background:var(--bg2);color:var(--fg);border-color:var(--border)}
.btn.ghost:hover{border-color:var(--accent2);color:var(--ink);background:var(--bg2)}
.btn.danger{color:var(--red)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn.sm{font-size:.86rem;padding:.45em .9em}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.25rem;margin:0 0 1rem}
.card h2{margin-bottom:.35rem}

/* ░ the launch space */
.desk-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2rem;margin-top:2rem;align-items:start}
@media (max-width:860px){.desk-grid{grid-template-columns:1fr}}
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.app{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1.15rem;display:flex;flex-direction:column;gap:.45rem;min-height:230px;transition:.15s}
.app:hover{border-color:var(--accent2);transform:translateY(-2px)}
.app .ico{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;font-size:24px;margin-bottom:.35rem;box-shadow:0 6px 18px rgba(137,87,229,.35)}
.app h3{font-size:1.12rem}
.app .by{font-family:var(--mono);font-size:.74rem;color:var(--dim)}
.app p{margin:.1rem 0 0;color:var(--dim);font-size:.92rem}
.app .status{margin-top:auto;padding-top:.7rem;font-size:.82rem;color:var(--dim);display:flex;align-items:center;gap:.4rem}
.app .status i{width:7px;height:7px;border-radius:50%;background:var(--dim);display:inline-block;flex:none}
.app .status.kept{color:var(--green)} .app .status.kept i{background:var(--green)}
.app .btns{display:flex;gap:.5rem;padding-top:.6rem}
.app.soon{border-style:dashed;background:transparent;justify-content:center;align-items:center;text-align:center;color:var(--dim);gap:.3rem}
.app.soon:hover{transform:none;border-color:var(--border)}
.app.soon b{color:var(--fg)}
.side .card{padding:1rem 1.1rem}
.steps{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.steps li{display:flex;gap:.7rem;font-size:.92rem;color:var(--dim)}
.steps li b{color:var(--ink);display:block;font-weight:600}
.steps .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--soft);color:var(--accent2);font-family:var(--mono);font-size:.78rem;display:grid;place-items:center}

/* ░ shaping one app */
#view-app{padding:0;overflow:hidden;display:flex;flex-direction:column}
.appbar{display:flex;align-items:center;gap:.9rem;padding:.55rem clamp(1rem,4vw,2rem);border-bottom:1px solid var(--border);background:var(--bg2);flex:none;flex-wrap:wrap}
.appbar b{color:var(--ink);font-size:1.02rem}
.appbar .state{font-size:.85rem;color:var(--dim);display:flex;align-items:center;gap:.4rem}
.appbar .state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dim)}
.appbar .state.kept::before{background:var(--green)} .appbar .state.previewing::before{background:var(--accent2)}
.split{flex:1;min-height:0;display:grid;grid-template-columns:minmax(330px,430px) 1fr}
.pane{min-height:0;display:flex;flex-direction:column;background:var(--bg)}
.pane.preview{background:var(--paper);border-left:1px solid var(--border)}
.pane.preview iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:900px){.split{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 55vh}.pane.preview{border-left:0;border-top:1px solid var(--border)}}
.log{flex:1;min-height:0;overflow:auto;padding:1rem clamp(.9rem,2vw,1.25rem) .5rem;display:flex;flex-direction:column;gap:.6rem}
.msg{border-radius:12px;padding:.6rem .8rem;font-size:.93rem;background:var(--bg2);border:1px solid var(--border);white-space:pre-wrap;max-width:95%;align-self:flex-start}
.msg.you{background:var(--soft);border-color:transparent;align-self:flex-end;color:var(--input-ink)}
.msg.bad{border-color:var(--bad-line);color:var(--bad-ink)}
.msg .what{color:var(--dim);font-size:.8rem;margin-top:.3rem;font-family:var(--mono)}
.composer{flex:none;padding:.6rem clamp(.9rem,2vw,1.25rem) .9rem;border-top:1px solid var(--border);background:var(--bg2)}
.quick{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .6rem}
.quick button{font:inherit;font-size:.82rem;padding:.3em .75em;border-radius:999px;background:var(--bg);color:var(--fg);border:1px solid var(--border);cursor:pointer}
.quick button:hover{border-color:var(--accent2);color:var(--ink)}
#ask-form .row{margin-top:.5rem}
details{margin:.4rem 0 0;font-size:.9rem} summary{cursor:pointer;color:var(--dim);padding:.3rem 0} summary:hover{color:var(--ink)}
.item{display:flex;gap:.6rem;align-items:baseline;padding:.4rem 0;border-bottom:1px solid var(--border);font-size:.86rem}
.item .when{color:var(--dim);font-family:var(--mono);font-size:.74rem;min-width:88px}
.item .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--toast-bg);color:var(--toast-fg);padding:.6rem 1.1rem;border-radius:999px;font-size:.9rem;font-weight:500;box-shadow:0 6px 24px rgba(0,0,0,.5);z-index:99}

/* phone: one row of chrome, a scrolling strip of suggestions, more room for the page */
@media (max-width:900px){
  #app-open,#app-surface{display:none}
  .appbar{gap:.6rem;padding:.45rem .9rem}
  .appbar .state{font-size:.8rem}
  .split{grid-template-rows:minmax(0,1fr) 46vh}
  .pane{overflow:auto}
  .log{padding:.6rem .9rem .3rem;flex:1 0 auto;min-height:5rem}
  .msg{font-size:.88rem}
  .composer{padding:.4rem .9rem .6rem}
  .quick{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.25rem;scrollbar-width:none}
  .quick button{flex:none}
  #ask{height:2.7em}
}
.app .status.off{color:var(--dim)} .app .status.off i{background:var(--red)}
.app .local-help{margin:.5rem 0 0;line-height:1.45} .app .local-help b{color:var(--fg)} .app .local-help a{color:var(--accent2)}

/* the two shelves of the launcher */
.shelf{font-size:1rem;margin:0 0 .15rem;color:var(--ink)}
.shelf-note{margin:0 0 .8rem}
.shelves .apps{margin-bottom:1.6rem}
.shelves .apps:last-child{margin-bottom:0}

/* the ☀/☾ button /theme.js adds to the nav (same look as on the site) */
.theme-btn{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;margin-left:.6rem;background:transparent;border:1px solid var(--border);border-radius:9px;color:var(--dim);font-size:1rem;line-height:1;cursor:pointer;flex:0 0 auto}
.theme-btn:hover{color:var(--ink);border-color:var(--accent2)}