/* Console and welcome styles (shared). Relies on tokens defined in each page's :root. */
/* console: a floating terminal window on desktop, a bottom sheet on phones */
.console{position:fixed;right:24px;bottom:24px;z-index:50;width:min(640px,calc(100vw - 48px));height:min(660px,calc(100vh - 104px));display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;background:var(--con-bg);color:var(--con-ink);border-radius:12px;overflow:hidden;box-shadow:0 32px 70px -28px rgba(20,16,10,.6),0 10px 24px -14px rgba(20,16,10,.35),0 0 0 1px rgba(20,16,10,.2);font:400 13px/1.65 var(--mono);opacity:0;transform:translateY(12px) scale(.985);transform-origin:100% 100%;visibility:hidden;transition:opacity .18s ease,transform .18s ease,height .2s ease,visibility 0s linear .18s}
.console.open{opacity:1;transform:none;visibility:visible;transition:opacity .18s ease,transform .18s ease,height .2s ease}
.console.compact{height:min(380px,calc(100vh - 112px))}
.console.min{height:auto;grid-template-rows:auto}
.console.min > :not(.con-bar){display:none}
.console.dragging{transition:none}
@media (min-width:721px){ .console.moved{left:var(--x);top:var(--y);right:auto;bottom:auto} .con-keys .dk{display:none} }
.con-bar{position:relative;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-bottom:1px solid var(--con-rule);background:var(--con-bar);font-size:12.5px;color:var(--con-muted);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.console.dragging .con-bar{cursor:grabbing}
.console.min .con-bar{border-bottom:0;cursor:pointer}
.con-ic{flex:none;display:inline-grid;place-items:center;height:20px;padding:0 5px;border:1px solid var(--con-rule);border-radius:5px;font-size:11px;line-height:1;color:var(--con-muted)}
.con-bar .t{flex:1;min-width:0;color:var(--con-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.con-btn{flex:none;display:inline-grid;place-items:center;width:28px;height:26px;padding:0;border:0;border-radius:6px;background:none;color:var(--con-muted);cursor:pointer;transition:background-color .15s ease,color .15s ease}
.con-btn:hover{background:rgba(255,255,255,.08);color:var(--con-ink)}
.con-btn svg{display:block}
.con-btn .i-up{display:none}
.console.min .con-btn .i-min{display:none}
.console.min .con-btn .i-up{display:block}
.con-out{overflow:auto;padding:14px 20px 12px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3A3731 transparent}
.con-out .ok{display:grid;grid-template-columns:auto 15ch minmax(0,1fr);gap:0 10px}
.con-out .ok .s{color:var(--con-muted)}
.con-out .ok .s b{color:#fff;font-weight:500}
.con-out .ok .k{color:var(--con-muted);white-space:nowrap}
.con-out .ok .v .sep{color:var(--con-muted);margin:0 2px}
.con-out .l{white-space:pre-wrap;word-break:break-word;min-height:1.65em}
.con-out .l.in{animation:lin .28s ease both}
@keyframes lin{from{opacity:0;transform:translateY(3px)}}
.con-out .sp{height:.8em}
.con-out .dim{color:var(--con-muted)}
.con-out .b{color:#fff;font-weight:500}
.con-out .h{color:var(--con-muted);text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;margin-top:4px}
.con-out .echo{color:var(--con-ink)}
.con-out .echo .p{color:var(--con-muted)}
.con-out .err{color:#E8B08F}
.con-out .kv{display:grid;grid-template-columns:15ch 1fr;gap:0 14px}
.con-out .kv .k{color:var(--con-muted);overflow-wrap:anywhere}
.con-out .kv.st{grid-template-columns:19ch 1fr}
.con-out .kv.wide{grid-template-columns:26ch 1fr}
.con-out .cols{display:grid;grid-template-columns:1.15fr 1fr;gap:4px 40px}
.con-out .menu{display:grid;grid-template-columns:minmax(0,1fr);gap:0 28px}
.con-out .menu .kv{grid-template-columns:26ch 1fr;gap:0 8px}
.con-out .row{display:flex;flex-wrap:wrap;gap:2px 28px}
.con-out .row .k{color:var(--con-muted);margin-right:10px}
.con-out .menu .k{color:var(--con-muted)}
.con-out .tok{display:inline;padding:0;border:0;background:none;color:var(--con-accent);font:inherit;cursor:pointer;text-decoration:underline dotted 1px;text-underline-offset:3px}
.con-out .tok:hover{text-decoration-style:solid}
.con-out a.lnk{color:var(--con-accent);text-underline-offset:3px;text-decoration-thickness:1px}
.con-out .rp{display:grid;grid-template-columns:5ch 2ch 11ch 1fr;gap:0 10px}
.con-out .rp .t{color:var(--con-muted)}
.con-out .rp .s{color:#fff}
.con-in{display:flex;align-items:center;gap:10px;padding:10px 20px;border-top:1px solid var(--con-rule);background:var(--con-bar)}
.con-in:focus-within{background:#262420}
.con-in label{color:var(--con-muted);white-space:nowrap}
.con-in label b{color:var(--con-accent);font-weight:500}
.con-in input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--con-ink);font:inherit;caret-color:var(--con-accent);padding:4px 0}
.con-keys{display:flex;flex-wrap:wrap;gap:4px 6px;padding:8px 16px 12px;border-top:1px solid var(--con-rule);background:var(--con-bar)}
.con-keys button{display:inline-flex;align-items:center;gap:7px;padding:4px 7px;border:0;border-radius:6px;background:none;color:var(--con-ink);font:400 12px/1.2 var(--mono);cursor:pointer}
.con-keys button:hover{background:rgba(255,255,255,.06)}
.con-keys kbd{height:18px;min-width:18px;border:0;border-radius:3px;background:var(--con-ink);color:var(--con-bg);font-size:11px}
.console :focus-visible{outline-color:var(--con-accent)}

/* docked: a full-height panel on the right at 1024px and wider; the page reflows beside it */
.con-grip{display:none}
@media (min-width:1024px){
  .console.docked,.console.docked.moved{top:0;right:0;bottom:0;left:auto;width:var(--mi-dock-w,440px);max-width:none;height:100vh;height:100dvh;border-radius:0;box-shadow:-1px 0 0 rgba(20,16,10,.35),-18px 0 40px -28px rgba(20,16,10,.5);transform:translateX(24px);transform-origin:100% 50%;transition:opacity .18s ease,transform .22s ease,visibility 0s linear .22s}
  .console.docked.open{transform:none;transition:opacity .18s ease,transform .22s ease}
  .console.docked.compact{height:100vh;height:100dvh}
  .console.docked.min{height:auto;bottom:auto}
  .console.docked .con-bar{cursor:default;touch-action:auto}
  .console.docked.min .con-bar{cursor:pointer}
  .console.docked.resizing{transition:none}
  .console.docked .con-grip{display:block;position:absolute;z-index:2;top:0;bottom:0;left:0;width:9px;cursor:col-resize;touch-action:none}
  .console.docked.min .con-grip{display:none}
  .console.docked .con-grip::after{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:transparent;transition:background-color .15s ease}
  .console.docked .con-grip:hover::after,.console.docked .con-grip:focus-visible::after,.console.docked.resizing .con-grip::after{background:var(--con-accent)}
  .con-grip:focus-visible{outline:none}
  html.mi-docked body{padding-right:var(--mi-dock-w,440px);transition:padding-right .22s ease}
  html.mi-resizing,html.mi-resizing *{cursor:col-resize!important;user-select:none!important;-webkit-user-select:none!important}
  html.mi-resizing body{transition:none}
}
@media (prefers-reduced-motion:reduce){ html.mi-docked body,.console.docked{transition:none} }

/* welcome: two ways to look around */
.wel{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px}
.wel[hidden]{display:none}
.wel-scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity .18s ease}
.wel-card{position:relative;width:min(640px,100%);max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain;padding:24px 26px 18px;background:var(--surface);border:1px solid var(--rule-2);border-radius:14px;box-shadow:0 40px 80px -32px rgba(26,25,22,.45),0 14px 30px -16px rgba(26,25,22,.25);opacity:0;transform:translateY(6px) scale(.97);transition:opacity .18s ease,transform .18s ease}
.wel.on .wel-scrim{opacity:1}
.wel.on .wel-card{opacity:1;transform:none}
.wel-k{display:flex;align-items:center;gap:10px;font:500 12.5px/1 var(--mono);color:var(--muted)}
.wel-t{margin:18px 0 0;font:600 24px/1.2 var(--sans);letter-spacing:-.02em}
.wel-t::before{content:none}
.wel-d{margin-top:6px;color:var(--muted);font-size:15.5px;line-height:1.55;max-width:32em}
.wel-opts{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wel-opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 14px 14px 14px;border-radius:10px;text-align:left;cursor:pointer;font:inherit;color:inherit;transition:background-color .15s ease,border-color .15s ease}
.wel-opt.go{background:var(--ink);color:var(--bg);border:1px solid var(--ink)}
.wel-opt.go:hover{background:color-mix(in srgb,var(--ink) 86%,var(--bg))}
.wel-opt.cli{background:transparent;color:var(--ink);border:1px solid var(--rule-2)}
.wel-opt.cli:hover{background:var(--hover);border-color:var(--ink-2)}
.wel-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;font:500 13px/1 var(--mono)}
.wel-opt.go .wel-ic{border:1px solid color-mix(in srgb,var(--bg) 28%,transparent)}
.wel-opt.cli .wel-ic{border:1px solid var(--rule-2);color:var(--ink-2)}
.wel-tx b{display:block;font-weight:600;font-size:16.5px;line-height:1.3;letter-spacing:-.01em}
.wel-opt.cli .wel-tx b{font:500 14px/1.35 var(--mono);letter-spacing:0;white-space:nowrap}
.wel-tx small{display:block;margin-top:3px;font-size:13px;line-height:1.35;color:var(--muted)}
.wel-opt.go .wel-tx small{color:color-mix(in srgb,var(--bg) 68%,var(--ink))}
.wel-opt.go kbd{background:transparent;border-color:color-mix(in srgb,var(--bg) 35%,transparent);color:var(--bg)}
.wel-cmds{margin-top:16px;padding:13px 16px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--bg)}
.wel-h{font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wel-cmds ul{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 20px}
.wel-cmds li{display:flex;align-items:baseline;gap:10px;min-width:0}
.wel-cmds li.span{grid-column:1 / -1}
.wel-cmds .c{flex:none;display:inline-flex;align-items:baseline;gap:4px}
.wel-cmds .c i{font:400 12px/1 var(--mono);font-style:normal;color:var(--faint)}
.wel-cmds .c i.w{font-size:12.5px;color:var(--ink-2);margin-right:2px}
.wel-cmds button{padding:1px 6px;border:1px solid var(--rule-2);border-radius:5px;background:var(--surface);font:500 12.5px/1.5 var(--mono);color:var(--ink);cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.wel-cmds button:hover{border-color:var(--ink-2);background:var(--hover)}
.wel-cmds .dsc{min-width:0;font-size:13px;line-height:1.4;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wel-foot{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:400 12px/1.5 var(--mono);color:var(--muted)}
.wel-foot kbd{margin-right:6px}
.wel-foot .sep{color:var(--faint)}
.wel-foot .tch{display:none}
@media (hover:none){
  .wel-opt kbd,.wel-foot .kb,.wel-foot .sep{display:none}
  .wel-foot .tch{display:inline}
}

@media (max-width:720px){
  .console{left:0;right:0;bottom:0;width:100%;height:80dvh;border-radius:16px 16px 0 0;font-size:12.5px;opacity:1;transform:translateY(calc(100% + 30px));transition:transform .36s cubic-bezier(.2,.8,.2,1),height .2s ease,visibility 0s linear .36s}
  .console.open{transform:none;transition:transform .36s cubic-bezier(.2,.8,.2,1),height .2s ease}
  .console.compact{height:46dvh}
  .con-bar{padding:18px 8px 8px 16px;cursor:default;touch-action:auto}
  .con-bar::before{content:"";position:absolute;top:7px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:4px;background:rgba(255,255,255,.14)}
  .con-btn[data-min]{display:none}
  .con-out{padding:14px 16px 10px}
  .con-out .ok{grid-template-columns:auto minmax(0,1fr)}
  .con-out .ok .dots{display:none}
  .con-out .ok .v{grid-column:2}
  .wel{place-items:end stretch;padding:0}
  .wel-card{width:100%;max-height:90dvh;border-radius:16px 16px 0 0;border-width:1px 0 0;padding:10px 20px calc(18px + env(safe-area-inset-bottom));transform:translateY(28px)}
  .wel-card::before{content:"";display:block;width:36px;height:4px;margin:0 auto 14px;border-radius:4px;background:var(--rule-2)}
  .wel-t{margin-top:14px;font-size:22px}
  .wel-d{font-size:15px}
  .wel-opts{grid-template-columns:1fr;margin-top:16px}
  .wel-opt{padding:13px 14px}
  .wel-cmds{margin-top:12px;padding:12px 14px}
  .wel-cmds ul{gap:7px 12px}
  .wel-cmds .dsc{display:none}
  .con-out .cols,.con-out .menu{grid-template-columns:1fr}
  .con-out .kv{grid-template-columns:11ch 1fr;gap:0 10px}
  .con-out .kv.wide{grid-template-columns:1fr;margin-bottom:4px}
  .con-out .menu .kv{grid-template-columns:9ch 1fr}
  .con-out .menu .kv.cs{grid-template-columns:auto 1fr}
  .con-out .menu .lf{display:none}
  .con-out .row{flex-direction:column}
  .con-out .rp{grid-template-columns:4ch 2ch 1fr}
  .con-out .rp .x{grid-column:3}
  .con-in{padding:10px 16px}
  .con-in label .u{display:none}
  .con-keys{padding:8px 10px 14px}
}
