mirror of
https://github.com/esengine/DeepSeek-Reasonix.git
synced 2026-11-07 10:45:59 -10:00
SivanCola
e7d50cf0e9
Problem: project configuration could replace the user persona, and complete mode could suppress built-in guidance. The UI misstated rebuild semantics. Root cause: persona was absent from the user-scope hold, replacement was a supported runtime option, and settings metadata described only new sessions. Fix: hold and clone the user's persona across project decoding, retire complete throughout config/runtime/API/UI, and describe next-build activation. Integrate current studio without dropping its settings or transport contracts. Verification: gofmt, vet, lint, make check, root and Desktop Go suites, boot scope/prompt regressions, frontend typecheck/build and 5,369 tests pass.
5596 lines
314 KiB
CSS
5596 lines
314 KiB
CSS
* { box-sizing: border-box; }
|
|
|
|
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent }
|
|
::-webkit-scrollbar { width: 10px; height: 10px }
|
|
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9px; border: 3px solid transparent; background-clip: content-box }
|
|
::-webkit-scrollbar-track { background: transparent }
|
|
body {
|
|
margin: 0; padding: 0; background: var(--page); color: var(--text);
|
|
font: var(--w-reg) var(--fs-lead)/1.6 var(--ui);
|
|
height: calc(100dvh / var(--zoom, 1)); overflow: hidden;
|
|
}
|
|
|
|
[data-platform="darwin"] body { -webkit-font-smoothing: antialiased }
|
|
body { font-synthesis-weight: none }
|
|
|
|
:lang(zh) :is(.lbl, .dgrp-h, .side .lbl) {
|
|
font-family: var(--ui); font-size: var(--fs-ui); color: var(--muted);
|
|
letter-spacing: 0; text-transform: none;
|
|
}
|
|
|
|
body::before {
|
|
content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
|
|
width: calc(100vw / var(--zoom, 1)); height: calc(100vh / var(--zoom, 1));
|
|
background-image: var(--bg-image, none);
|
|
background-size: cover;
|
|
background-position: var(--bg-x, 50%) var(--bg-y, 50%);
|
|
opacity: var(--bg-alpha, 0);
|
|
transition: opacity var(--t-panel) var(--ease);
|
|
}
|
|
body::after {
|
|
content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
|
|
width: calc(100vw / var(--zoom, 1)); height: calc(100vh / var(--zoom, 1));
|
|
background: var(--page);
|
|
opacity: calc(var(--bg-overlay, 0) * min(var(--bg-alpha, 0) * 4, 1));
|
|
transition: opacity var(--t-panel) var(--ease);
|
|
}
|
|
|
|
.sky {
|
|
position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden;
|
|
width: calc(100vw / var(--zoom, 1)); height: calc(100vh / var(--zoom, 1));
|
|
-webkit-mask-image: radial-gradient(ellipse 118% 82% at 72% -14%, #000 0%, rgb(0 0 0 / .5) 34%, rgb(0 0 0 / .14) 62%, transparent 88%);
|
|
mask-image: radial-gradient(ellipse 118% 82% at 72% -14%, #000 0%, rgb(0 0 0 / .5) 34%, rgb(0 0 0 / .14) 62%, transparent 88%);
|
|
}
|
|
.sky canvas { position: absolute; inset: -6%; width: 112%; height: 112%; filter: blur(17px); opacity: var(--cloud-a, .4) }
|
|
.sky .sun {
|
|
position: absolute; top: -32%; left: 54%; width: 54vw; aspect-ratio: 1;
|
|
border-radius: 50%; filter: blur(84px);
|
|
background: radial-gradient(circle, var(--ray, rgb(255 216 142 / .55)), transparent 68%);
|
|
}
|
|
.sky .shafts {
|
|
position: absolute; left: -20%; right: -20%; top: -30%; height: 150%;
|
|
opacity: var(--ray-a, .85); filter: blur(32px);
|
|
}
|
|
.sky .shaft {
|
|
position: absolute; top: 0; left: var(--x); width: var(--w); height: 100%;
|
|
background: linear-gradient(180deg, var(--ray, rgb(255 216 142 / .55)) 0%, transparent 70%);
|
|
transform: rotate(var(--r)); transform-origin: 50% 0%;
|
|
-webkit-mask-image: linear-gradient(180deg, #000 0 30%, transparent 92%);
|
|
mask-image: linear-gradient(180deg, #000 0 30%, transparent 92%);
|
|
}
|
|
|
|
:root[data-sky] .app { background: transparent }
|
|
|
|
:root[data-bg] .app { background: transparent }
|
|
|
|
.rail, .side { background: var(--page) }
|
|
.panes { background: var(--surface) }
|
|
|
|
:root[data-bg] .main, :root[data-bg] .panes { background: transparent }
|
|
|
|
:root[data-bg] .rail, :root[data-bg] .side,
|
|
:root[data-bg] .nav, :root[data-bg] .chrome {
|
|
background: color-mix(in srgb, var(--page) 62%, transparent);
|
|
text-shadow: 0 1px 2px color-mix(in srgb, var(--page) 88%, transparent),
|
|
0 0 6px color-mix(in srgb, var(--page) 70%, transparent);
|
|
}
|
|
:root[data-bg] .flow:not([data-empty]) {
|
|
text-shadow: var(--flow-text-shadow, 0 1px 2px color-mix(in srgb, var(--page) 90%, transparent),
|
|
0 0 7px color-mix(in srgb, var(--page) 72%, transparent));
|
|
}
|
|
:root[data-bg] .compose {
|
|
background: color-mix(in srgb, var(--raised) 80%, transparent);
|
|
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
|
|
}
|
|
|
|
:root[data-bg] .hero {
|
|
background: radial-gradient(46% 50% at 50% 42%,
|
|
color-mix(in srgb, var(--surface) 34%, transparent) 22%, transparent 70%);
|
|
text-shadow: 0 1px 3px color-mix(in srgb, var(--page) 82%, transparent);
|
|
}
|
|
|
|
.app::after {
|
|
content: ""; position: fixed; inset: 0; z-index: 9; pointer-events: none;
|
|
background-image: var(--grain); opacity: var(--grain-a);
|
|
}
|
|
:root:root:root[data-effects="reduced"] * { -webkit-backdrop-filter: none; backdrop-filter: none; text-shadow: none }
|
|
:root[data-effects="reduced"] .app::after { display: none }
|
|
.app {
|
|
--chrome-h: 45px;
|
|
--lights-w: 0px;
|
|
--lights-h: 0px;
|
|
background: var(--page); border: 0; border-radius: 0; box-shadow: none;
|
|
overflow: clip; display: flex; flex-direction: column; height: calc(100dvh / var(--zoom, 1));
|
|
}
|
|
|
|
:root[data-boot] .app { animation: appin 1.2s cubic-bezier(.4, 0, .2, 1) both }
|
|
@keyframes appin { from { opacity: 0; transform: scale(.99) } to { opacity: 1; transform: none } }
|
|
|
|
:root[data-boot] .chrome::after {
|
|
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
|
|
background: linear-gradient(105deg, transparent 34%,
|
|
color-mix(in srgb, var(--accent) 30%, transparent) 50%, transparent 66%);
|
|
background-size: 220% 100%; background-repeat: no-repeat;
|
|
animation: chromesweep 1.15s var(--ease-out) both;
|
|
}
|
|
@keyframes chromesweep {
|
|
0% { opacity: 0; background-position: 210% 0 }
|
|
16% { opacity: 1 }
|
|
100% { opacity: 0; background-position: -60% 0 }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
:root[data-boot] .app { animation: none }
|
|
:root[data-boot] .chrome::after { display: none }
|
|
}
|
|
|
|
.chrome {
|
|
position: relative;
|
|
display: flex; align-items: center; gap: 14px; height: var(--chrome-h); padding: 0 12px;
|
|
flex: none; background: color-mix(in srgb, var(--surface) 72%, var(--page)); border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgb(0 0 0 / .025);
|
|
}
|
|
|
|
[data-titlebar="app"] .chrome { -webkit-app-region: drag }
|
|
[data-titlebar="app"] .chrome
|
|
*:not(:is(button, a[href], input, select, textarea, summary, .picker,
|
|
[role="button"], [role="tab"], [role="menuitem"], [role="switch"], [role="dialog"]) *) {
|
|
-webkit-app-region: drag;
|
|
}
|
|
|
|
[data-titlebar="app"] .chrome
|
|
:is(button, a[href], input, select, textarea, summary, .picker,
|
|
[role="button"], [role="tab"], [role="menuitem"], [role="switch"], [role="dialog"]) {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
[data-titlebar="app"][data-platform="darwin"] .app {
|
|
--chrome-h: 51px; --lights-w: 96px; --lights-h: var(--chrome-h);
|
|
}
|
|
[data-titlebar="app"][data-platform="darwin"] .app[data-rail="off"] .chrome {
|
|
padding-left: calc(var(--lights-w) + var(--rail-toggle-gap) - var(--nav-w));
|
|
}
|
|
[data-titlebar="app"][data-platform="darwin"] .app[data-rail="on"] .studio-rail-head {
|
|
padding-top: var(--lights-h); -webkit-app-region: drag;
|
|
}
|
|
[data-titlebar="app"][data-platform="darwin"] .app[data-rail="on"] .studio-rail-head > * {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
[data-titlebar="app"][data-platform="darwin"] .brand {
|
|
position: absolute; left: 12px; top: 50%; margin: -7px 0 0;
|
|
opacity: 0; transition: opacity var(--m-card) ;
|
|
}
|
|
[data-titlebar="app"][data-platform="darwin"][data-focused="no"] .brand { opacity: 1 }
|
|
|
|
.winctl { display: flex; margin-left: 6px; margin-right: -12px; align-self: stretch }
|
|
.winctl .wc {
|
|
display: grid; place-items: center; width: 44px; border: 0; background: transparent;
|
|
color: var(--faint); cursor: pointer; transition: background var(--m-line), color var(--m-line);
|
|
}
|
|
.winctl .wc svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.1 }
|
|
.winctl .wc:hover { background: var(--overlay); color: var(--text) }
|
|
.winctl .wc.close:hover { background: var(--err); color: #fff }
|
|
.winctl .wc:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px }
|
|
|
|
.brand {
|
|
width: 68px; height: 15px; flex: none; margin-right: 4px; background: var(--muted); opacity: .78;
|
|
-webkit-mask: url("../assets/logo-wordmark.svg") no-repeat center / contain;
|
|
mask: url("../assets/logo-wordmark.svg") no-repeat center / contain;
|
|
}
|
|
|
|
.crumb { display: flex; align-items: center; gap: 7px; font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--muted); flex: 1; min-width: 0; }
|
|
|
|
.crumb .crumbsep { color: var(--ghost); }
|
|
.crumb b { font-weight: var(--w-reg); color: var(--text); }
|
|
|
|
.crumb-proj {
|
|
font-weight: var(--w-med); color: var(--muted);
|
|
flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.chrome .r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
|
|
.btn {
|
|
padding: 4px 11px; border-radius: var(--r-sm); border: 1px solid var(--border);
|
|
background: transparent; color: var(--muted); font: var(--w-med) var(--fs-ui) var(--ui);
|
|
cursor: pointer; white-space: nowrap;
|
|
transition: color var(--m-line), border-color var(--m-line), background var(--m-line), transform var(--m-line);
|
|
}
|
|
.btn:hover { color: var(--text); border-color: var(--faint); }
|
|
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
|
|
.btn[data-primary] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); box-shadow: var(--lit); }
|
|
.btn[data-primary]:hover { filter: brightness(1.08); }
|
|
.btn[disabled] { opacity: .4; cursor: default; pointer-events: none; }
|
|
.btn.sm { padding: 2.5px 8px; font-size: var(--fs-meta); }
|
|
|
|
.picker { position: relative; flex: none }
|
|
.isolab { flex: none; white-space: nowrap; font: var(--w-med) var(--fs-micro) var(--mono); letter-spacing: var(--track-cap); color: var(--ok-ink); padding: 1.5px 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ok) 13%, transparent) }
|
|
.isolab[hidden] { display: none }
|
|
|
|
.hostlab { color: var(--net-ink); background: color-mix(in srgb, var(--net) 13%, transparent) }
|
|
|
|
.menu {
|
|
position: absolute; z-index: 30; min-width: 244px; padding: 5px;
|
|
max-height: min(calc(58vh / var(--zoom, 1)), 460px); overflow-y: auto; overscroll-behavior: contain;
|
|
border: 1px solid var(--border); border-radius: var(--r-md); background: var(--float);
|
|
box-shadow: var(--shadow-float);
|
|
-webkit-user-select: none; user-select: none;
|
|
transition: opacity var(--t-panel) var(--ease-out),
|
|
transform var(--t-panel) var(--ease-out),
|
|
display var(--t-panel) allow-discrete;
|
|
}
|
|
|
|
.menu .mfind { -webkit-user-select: text; user-select: text }
|
|
|
|
.menu[hidden] {
|
|
display: none; opacity: 0; pointer-events: none;
|
|
transform: translateY(-4px) scaleY(.985);
|
|
}
|
|
@starting-style {
|
|
.menu:not([hidden]) { opacity: 0; transform: translateY(-4px) scaleY(.985) }
|
|
}
|
|
|
|
.modemenu { bottom: calc(100% + 9px); left: 0; transform-origin: bottom left; width: max-content; max-width: 420px }
|
|
@supports (position-try-fallbacks: flip-block) {
|
|
.picker > button[aria-expanded="true"] { anchor-name: --pick }
|
|
.modemenu { position-anchor: --pick; position-try-fallbacks: flip-block }
|
|
|
|
.modemenu { bottom: calc(anchor(top, 100%) + 9px); top: auto }
|
|
}
|
|
.modemenu .mi .lb, .modemenu .mi.head .lb { white-space: nowrap }
|
|
.modemenu .mi .rt { margin-left: auto; padding-left: 14px; white-space: nowrap }
|
|
|
|
.portmenu { position: fixed; z-index: 60; top: 0; left: 0 }
|
|
.pm-down { transform-origin: top left }
|
|
.pm-up { transform-origin: bottom left; width: max-content; max-width: 420px }
|
|
.pm-up .mi .lb, .pm-up .mi.head .lb { white-space: nowrap }
|
|
.pm-up .mi .rt { margin-left: auto; padding-left: 14px; white-space: nowrap }
|
|
|
|
.mi {
|
|
position: relative;
|
|
display: flex; gap: 9px; width: 100%; padding: 7px 9px; text-align: left;
|
|
border: 0; border-radius: var(--r-sm); background: transparent;
|
|
color: inherit; font: inherit; cursor: pointer; transition: background var(--m-line);
|
|
}
|
|
.mi:hover { background: var(--float-hi) }
|
|
.mi:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px }
|
|
.mi .dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 5.5px; flex: none; background: var(--ghost) }
|
|
|
|
.mi[data-on] { background: color-mix(in oklab, var(--float-hi), var(--text) 7%) }
|
|
.mi[data-on]::before {
|
|
content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 2px;
|
|
border-radius: 2px; background: var(--muted);
|
|
}
|
|
.mi[data-on] .dot { background: var(--muted) }
|
|
.mi .tx { min-width: 0; flex: 1 }
|
|
.mi .lb { display: block; font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.mi .ds { display: block; margin-top: 2px; font: var(--w-reg) var(--fs-ui)/1.5 var(--ui); color: var(--muted) }
|
|
.mi .rt { margin-left: auto; padding-left: 10px; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint); white-space: nowrap; flex: none }
|
|
.mi[data-on] .rt { color: var(--muted) }
|
|
.menu .div { height: 1px; margin: 5px 4px; background: var(--hair) }
|
|
.mi.plain .lb { font-weight: var(--w-reg); color: var(--muted) }
|
|
|
|
.menu .mfind {
|
|
position: sticky; top: -5px; z-index: 1; width: calc(100% + 10px);
|
|
margin: -5px -5px 5px; padding: 9px 11px;
|
|
border: 0; border-bottom: 1px solid var(--hair); border-radius: var(--r-md) var(--r-md) 0 0;
|
|
background: var(--float); color: var(--text); font: var(--w-reg) var(--fs-ui) var(--ui);
|
|
}
|
|
.menu .mfind:focus { outline: none }
|
|
.menu .mfind::placeholder { color: var(--ghost) }
|
|
|
|
.mi[data-lead] { background: var(--overlay) }
|
|
.mnone { padding: 9px 10px; font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--faint) }
|
|
.mi.plain .dot { background: transparent }
|
|
|
|
.slashmenu {
|
|
left: 0; right: auto; bottom: calc(100% + 9px); min-width: 0; z-index: 31;
|
|
width: 100%; max-width: 680px;
|
|
max-height: 272px; overflow: hidden; transform-origin: bottom left;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
|
|
.slashmenu .mlist { overflow-y: auto; min-height: 0 }
|
|
.slashmenu .lb { font-family: var(--mono) }
|
|
.slashmenu .ah { margin-left: 6px; font: var(--w-reg) var(--fs-meta) var(--mono); font-style: normal; color: var(--faint) }
|
|
|
|
.slashmenu .mi[data-on] .ah { color: var(--accent-ink) }
|
|
|
|
.slashmenu .hit { color: var(--accent-ink); font-weight: var(--w-semi) }
|
|
|
|
.slashmenu .mi[data-on] {
|
|
background: color-mix(in oklab, var(--float-hi), var(--text) 9%);
|
|
}
|
|
|
|
.slashmenu .mi[data-on]::before {
|
|
content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 2px;
|
|
border-radius: 2px; background: var(--muted);
|
|
}
|
|
|
|
.slashmenu .mi[data-on] .ds { color: var(--text) }
|
|
|
|
.slashmenu .mlist[data-kb] .mi:hover:not([data-on]) { background: transparent }
|
|
|
|
.slashmenu .mlist[data-kb] .mi { transition: none }
|
|
|
|
.mkeys {
|
|
flex: none; margin-top: 3px; padding: 6px 9px 2px;
|
|
border-top: 1px solid var(--hair);
|
|
font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint);
|
|
}
|
|
.sa {
|
|
margin-left: 7px; padding: 1px 5px; border-radius: var(--r-pill);
|
|
font: var(--w-med) var(--fs-micro) var(--ui); font-style: normal; vertical-align: 1px;
|
|
color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 13%, transparent);
|
|
}
|
|
|
|
.mode {
|
|
position: relative; isolation: isolate;
|
|
|
|
flex: none; white-space: nowrap;
|
|
display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px;
|
|
border: 1px solid var(--border); border-radius: var(--r-pill); background: transparent;
|
|
color: var(--muted); font: var(--w-med) var(--fs-ui) var(--ui); cursor: pointer;
|
|
transition: color var(--m-line), border-color var(--m-line), background-color var(--m-line),
|
|
transform var(--m-line) ;
|
|
}
|
|
.mode:hover { color: var(--text); border-color: var(--faint); background: var(--overlay); transform: translateY(-1px) }
|
|
|
|
.mode { --press: translateY(0) scale(.975) }
|
|
.mode:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.mode:disabled { cursor: default }
|
|
.mode:disabled:hover { transform: none }
|
|
|
|
.mode[aria-expanded="true"] { color: var(--text); border-color: var(--faint); background: var(--overlay) }
|
|
.mode .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--ok); transition: background var(--m-card) }
|
|
.mode.plain { padding-inline: 9px 10px; gap: 5px; font-weight: var(--w-reg) }
|
|
.mode .nm { overflow: hidden; text-overflow: ellipsis; max-width: 22ch }
|
|
|
|
.mode .lb { color: var(--faint); font: var(--w-reg) var(--fs-meta) var(--ui); transition: color var(--m-line) }
|
|
.mode .vl {
|
|
color: var(--muted); font: var(--w-med) var(--fs-ui) var(--mono);
|
|
transition: color var(--m-line); animation: modeval var(--t-panel) var(--ease-spring);
|
|
}
|
|
.mode:hover .lb, .mode[aria-expanded="true"] .lb { color: var(--muted) }
|
|
.mode:hover .vl, .mode[aria-expanded="true"] .vl { color: var(--text) }
|
|
@keyframes modeval { from { opacity: 0; transform: translateY(2.5px) } to { opacity: 1; transform: none } }
|
|
|
|
.mode .ic { display: grid; place-items: center; width: 12px; height: 12px; flex: none }
|
|
.mode .ic svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round }
|
|
@keyframes plandraw {
|
|
from { stroke-dasharray: 1; stroke-dashoffset: 1 }
|
|
to { stroke-dasharray: 1; stroke-dashoffset: 0 }
|
|
}
|
|
.mode.danger { color: var(--err-ink); border-color: color-mix(in srgb, var(--err) 45%, var(--border)) }
|
|
.mode.danger .lb, .mode.danger .vl { color: var(--err-ink) }
|
|
|
|
.mode.danger::before {
|
|
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
|
|
background: color-mix(in srgb, var(--err) 12%, transparent);
|
|
animation: gatepulse 2.6s var(--ease) infinite;
|
|
}
|
|
@keyframes gatepulse { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }
|
|
|
|
.sep { width: 1px; height: 14px; flex: none; margin-inline: -1px; background: var(--border); opacity: .75 }
|
|
|
|
.side .block { transition: opacity var(--m-panel) , filter var(--m-panel) }
|
|
[data-plan="on"] .side [data-b="files"] { opacity: .28; filter: saturate(.35) }
|
|
[data-apv="yolo"] .side [data-b="files"] .lbl { color: var(--err-ink) }
|
|
|
|
.thbtn {
|
|
display: grid; place-items: center; width: 28px; height: 28px; flex: none;
|
|
border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ghost);
|
|
cursor: pointer; transition: background var(--m-line), color var(--m-line);
|
|
}
|
|
.thbtn:hover { background: var(--overlay); color: var(--text) }
|
|
.thbtn { --press: scale(.93) }
|
|
.thbtn:active { background: var(--border) }
|
|
.thbtn { transition: background var(--m-line), color var(--m-line), transform var(--m-line) }
|
|
.thbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.thbtn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round }
|
|
|
|
.pip { width: 6px; height: 6px; border-radius: 50%; background: var(--ghost); flex: none }
|
|
@keyframes tick { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
|
|
|
|
.rmark { width: 15px; height: 15px; flex: none; display: block; color: var(--ghost); transition: color var(--m-panel) }
|
|
.rmark path {
|
|
fill: none; stroke: currentColor; stroke-width: 1.7;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
stroke-dasharray: 100; stroke-dashoffset: 0;
|
|
}
|
|
.pane[data-run="idle"] .rmark { opacity: .5 }
|
|
.pane[data-run="running"] .rmark { color: var(--net) }
|
|
.pane[data-run="running"] .rmark path { stroke-dashoffset: 0 }
|
|
|
|
.pane[data-run="halt"] .rmark { color: var(--accent-ink) }
|
|
@keyframes breathe { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }
|
|
|
|
.pane[data-run="done"] .rmark { color: var(--ok) }
|
|
|
|
.queue {
|
|
display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px;
|
|
min-height: 0;
|
|
font: var(--w-reg) var(--fs-meta) var(--mono);
|
|
animation: qin var(--m-card) both;
|
|
}
|
|
@keyframes qin { from { opacity: 0; transform: translateY(3px) } to { opacity: 1; transform: none } }
|
|
.qhd { display: flex; align-items: center; gap: 7px; min-width: 0 }
|
|
.qhd .lb {
|
|
flex: none; font: var(--w-med) var(--fs-micro) var(--ui); letter-spacing: var(--track-cap);
|
|
text-transform: uppercase; color: var(--faint);
|
|
}
|
|
.qcount {
|
|
display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
|
|
border-radius: var(--r-pill); background: var(--overlay); color: var(--muted);
|
|
font: var(--w-med) var(--fs-micro) var(--ui); font-variant-numeric: tabular-nums;
|
|
}
|
|
.qsummary {
|
|
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
color: var(--faint); font: var(--w-reg) var(--fs-meta) var(--ui);
|
|
}
|
|
.qflag { padding: 0 5px; border-radius: var(--r-xs); background: var(--overlay); color: var(--muted) }
|
|
.qflag[data-warn] { color: var(--warn-ink); background: color-mix(in srgb, var(--warn) 16%, transparent) }
|
|
|
|
.qcap {
|
|
margin-left: auto; display: flex; align-items: center; gap: 10px;
|
|
color: var(--faint); font-variant-numeric: tabular-nums;
|
|
}
|
|
.qcap > span { display: flex; align-items: center; gap: 5px }
|
|
.qcap > span[data-full] { color: var(--warn-ink) }
|
|
.mtr { display: inline-block; width: 40px; height: 3px; border-radius: 2px; background: var(--overlay); overflow: hidden }
|
|
.mtr i { display: block; height: 100%; border-radius: 2px; background: var(--faint); transition: width var(--t-card) var(--ease) }
|
|
.mtr[data-full] i { background: var(--warn-ink) }
|
|
.qhold {
|
|
flex: none; margin-left: auto; padding: 3px 8px; border: 1px solid var(--hair); border-radius: var(--r-pill);
|
|
background: color-mix(in srgb, var(--raised) 72%, transparent); color: var(--muted); font: inherit; cursor: pointer;
|
|
transition: color var(--m-line) , border-color var(--m-line) ;
|
|
}
|
|
.qhold:hover:not(:disabled) { color: var(--text); border-color: var(--border) }
|
|
.qhold:disabled { opacity: .45; cursor: default }
|
|
|
|
.qitems {
|
|
display: grid; gap: 4px; min-height: 0;
|
|
overflow-y: auto; overscroll-behavior: contain;
|
|
}
|
|
.qi {
|
|
display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 9px;
|
|
border: 1px solid var(--hair); border-radius: var(--r-sm); background: var(--raised);
|
|
color: var(--text); animation: qstep var(--t-card) var(--ease-out) both;
|
|
transition:
|
|
padding var(--t-card) var(--ease-out), font-size var(--t-card) var(--ease-out),
|
|
opacity var(--t-card) var(--ease-out), border-color var(--t-card) var(--ease-out),
|
|
background var(--t-card) var(--ease-out);
|
|
}
|
|
.qdot {
|
|
width: 5px; height: 5px; flex: none; border-radius: 50%;
|
|
background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent);
|
|
}
|
|
@keyframes qstep { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
|
|
|
|
.qi .pill {
|
|
margin-left: 0; padding: 2px 7px; border-radius: var(--r-xs);
|
|
font: var(--w-med) var(--fs-micro) var(--mono); letter-spacing: .03em;
|
|
}
|
|
.pv { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
.rf { flex: none; color: var(--faint) }
|
|
.qwhy { flex: none; color: var(--warn-ink) }
|
|
.qwhy[data-err] { color: var(--err-ink) }
|
|
.qedit {
|
|
flex: 1; min-width: 0; padding: 2px 5px; border: 1px solid var(--focus); border-radius: var(--r-xs);
|
|
background: var(--surface); color: var(--text); font: inherit; resize: none;
|
|
}
|
|
|
|
.steermark {
|
|
flex: none; padding: 1px 6px; border-radius: var(--r-pill);
|
|
background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-ink);
|
|
font: var(--w-med) var(--fs-micro) var(--ui); letter-spacing: var(--track-cap);
|
|
}
|
|
|
|
.qacts { display: flex; align-items: center; gap: 1px; flex: none }
|
|
.qacts button {
|
|
min-width: 17px; height: 19px; padding: 0 4px; border: none; border-radius: var(--r-xs);
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
background: none; color: var(--faint); font: inherit; cursor: pointer;
|
|
transition: color var(--m-line) , background var(--m-line) ;
|
|
}
|
|
.qacts .studio-icon { width: 12px; height: 12px; stroke-width: 1.9 }
|
|
.qacts button.qnow {
|
|
margin-left: 3px; padding: 0 8px; color: var(--accent-ink);
|
|
font: var(--w-med) var(--fs-micro) var(--ui);
|
|
}
|
|
.qacts button.qnow:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-ink) }
|
|
.qacts button:hover:not(:disabled) { background: var(--overlay); color: var(--text) }
|
|
.qacts button:disabled { opacity: .3; cursor: default }
|
|
.qi .x {
|
|
flex: none; padding: 2px 7px; border: none; border-radius: var(--r-pill); background: none;
|
|
color: var(--faint); font: var(--w-med) var(--fs-micro) var(--ui); line-height: 1.3; cursor: pointer;
|
|
transition: color var(--m-line) , background var(--m-line) ;
|
|
}
|
|
.qi .x:hover { color: var(--err-ink); background: color-mix(in srgb, var(--err) 12%, transparent) }
|
|
.qi .x { position: relative }
|
|
.qi .x::after { content: ""; position: absolute; inset: -5px -2px }
|
|
|
|
@keyframes bumpup { 0% { transform: translateY(2px); opacity: .5 } 100% { transform: none; opacity: 1 } }
|
|
|
|
.chrome .crumb > .picker, .chrome .crumb > .crumbsep { flex: none }
|
|
.chrome .crumb > b {
|
|
flex: 0 1 auto; min-width: 4em; max-width: 48%;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.chrome .badge { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--accent-ink); padding: 2.5px 8px; border-radius: var(--r-pill); background: var(--accent-wash); white-space: nowrap; flex: none }
|
|
.chrome .badge[hidden] { display: none }
|
|
.chrome .badge[data-err] { color: var(--err-ink); background: color-mix(in srgb, var(--err) 13%, transparent); white-space: normal; max-width: 24ch }
|
|
.call[data-pending] > .c { opacity: .7 }
|
|
|
|
.app {
|
|
--nav-w: 0px; --rail-w: var(--rail-open); --side-w: 0px;
|
|
transition: --nav-w var(--t-panel) cubic-bezier(.32, .72, 0, 1), --rail-w var(--t-panel) cubic-bezier(.32, .72, 0, 1), --side-w var(--t-panel) cubic-bezier(.32, .72, 0, 1);
|
|
}
|
|
.app[data-rail="off"] { --rail-w: 0px }
|
|
.app[data-side="on"] { --side-w: var(--side-open) }
|
|
|
|
.app[data-drag] { transition: none }
|
|
.app[data-drag="pointer"] { user-select: none; cursor: col-resize }
|
|
.app[data-drag="pointer"] * { cursor: col-resize }
|
|
|
|
.cols { flex: 1; display: grid; grid-template-columns: var(--nav-w) var(--rail-w) minmax(0, 1fr) var(--side-w); min-height: 0 }
|
|
.rail, .side { overflow: hidden }
|
|
[data-rail="off"] .rail { border-right: 0 }
|
|
.app:not([data-side="on"]) .side { border-left: 0 }
|
|
|
|
.rail > * { width: var(--rail-open); flex: none }
|
|
.side > * { width: var(--side-open) }
|
|
.rail > .scroll, .side > .scroll { flex: 1 }
|
|
.rail, .side { transition: opacity var(--m-card) var(--m-step) }
|
|
[data-rail="off"] .rail, .app:not([data-side="on"]) .side { opacity: 0; transition: opacity var(--m-exit) }
|
|
|
|
.gutter {
|
|
position: absolute; top: 0; bottom: 0; width: 7px; z-index: 5;
|
|
cursor: col-resize; touch-action: none;
|
|
}
|
|
.gutter-l { left: -1px; z-index: 13 }
|
|
.gutter-r { right: -6px }
|
|
.gutter::after {
|
|
content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
|
|
background: var(--faint); opacity: 0;
|
|
transform: translateX(var(--over, 0px));
|
|
transition: opacity var(--m-line) var(--t-line), transform var(--t-panel) var(--ease-spring);
|
|
}
|
|
.gutter:hover::after { opacity: .55; transition-delay: 0s }
|
|
|
|
.gutter:focus-visible::after { opacity: .7; transition-delay: 0s }
|
|
|
|
.gutter[data-on]::after { opacity: .9; transition-delay: 0s; transition-duration: var(--t-line), 0s }
|
|
.gutter[data-edge]::after { animation: edgebump var(--m-card) }
|
|
@keyframes edgebump { 0%, 100% { transform: none } 40% { transform: translateX(var(--bump, 0px)) } }
|
|
.gutter:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; border-radius: var(--r-xs) }
|
|
|
|
.gutter[data-shut] { width: 14px; top: 50%; bottom: auto; height: 46px; margin-top: -23px }
|
|
[data-rail="off"] .gutter-l { left: 0 }
|
|
[data-rail="off"] .gutter-l .grip { margin-left: -6px }
|
|
.grip {
|
|
position: absolute; top: 50%; left: 50%; margin: -16px 0 0 -8px; z-index: 1;
|
|
width: 16px; height: 32px; padding: 0; display: grid; place-items: center;
|
|
border: 1px solid transparent; border-radius: var(--r-pill);
|
|
background: var(--surface); color: var(--muted);
|
|
font: var(--w-reg) var(--fs-micro)/1 var(--mono); cursor: pointer;
|
|
transition: color var(--m-line), background var(--m-line), border-color var(--m-line), box-shadow var(--m-card);
|
|
}
|
|
.grip > * { grid-area: 1 / 1; transition: opacity var(--m-line) }
|
|
|
|
.knurl {
|
|
width: 2.5px; height: 2.5px; border-radius: 50%; background: currentColor;
|
|
box-shadow: 0 -5.5px currentColor, 0 5.5px currentColor;
|
|
}
|
|
.dir { opacity: 0 }
|
|
.gutter:hover .grip, .gutter:focus-visible .grip, .gutter[data-on] .grip {
|
|
color: var(--text); background: var(--raised); border-color: var(--border);
|
|
box-shadow: 0 2px 9px -4px rgb(0 0 0 / .35);
|
|
}
|
|
.gutter:hover .knurl, .gutter:focus-visible .knurl, .gutter[data-on] .knurl { opacity: 0 }
|
|
.gutter:hover .dir, .gutter:focus-visible .dir, .gutter[data-on] .dir { opacity: 1 }
|
|
|
|
.gutter[data-shut] .grip {
|
|
height: 46px; margin-top: -23px;
|
|
color: var(--muted); background: var(--raised); border-color: var(--border);
|
|
box-shadow: 0 2px 10px -3px rgb(0 0 0 / .45);
|
|
}
|
|
.gutter[data-shut] .knurl { opacity: 0 }
|
|
.gutter[data-shut] .dir { opacity: 1 }
|
|
.gutter[data-shut] .grip:hover { color: var(--text); background: var(--overlay) }
|
|
|
|
.scroll { flex: 1; overflow: auto; min-height: 0 }
|
|
|
|
.ovf {
|
|
position: fixed; z-index: 70;
|
|
max-width: min(52ch, calc(100vw - 24px));
|
|
max-height: min(calc(30vh / var(--zoom, 1)), 220px);
|
|
padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
|
|
background: var(--float); box-shadow: var(--shadow-float); color: var(--text);
|
|
font: var(--w-reg) var(--fs-ui)/1.65 var(--mono);
|
|
overflow: auto; overscroll-behavior: contain;
|
|
white-space: pre-wrap; overflow-wrap: anywhere; user-select: text;
|
|
animation: card var(--m-line) both;
|
|
}
|
|
|
|
[data-cut] { cursor: help }
|
|
[data-cut]:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: var(--r-xs) }
|
|
|
|
.lbl { display: flex; align-items: baseline; gap: 9px; font: var(--w-med) var(--fs-micro) var(--ui); letter-spacing: var(--track-cap); text-transform: uppercase; color: var(--ghost) }
|
|
.lbl .c { margin-left: auto; letter-spacing: 0; font-variant-numeric: tabular-nums }
|
|
|
|
.rail { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0 }
|
|
|
|
.railscroll { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden }
|
|
.railfoot { flex: none; border-top: 1px solid var(--border); padding: 6px 7px }
|
|
.ws {
|
|
display: block; width: 100%; text-align: left; background: none; border: 0;
|
|
border-left: 2px solid transparent; padding: 8px 12px 9px 11px; cursor: pointer;
|
|
font: inherit; color: inherit; transition: background var(--m-line);
|
|
}
|
|
.ws:hover { background: var(--overlay) }
|
|
.ws:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px }
|
|
.ws[aria-selected="true"] { background: var(--overlay); border-left-color: var(--brand) }
|
|
.ws[aria-selected="true"][data-s="awaiting"] { border-left-color: var(--accent) }
|
|
.ws .goal { display: flex; align-items: baseline; gap: 7px; font: var(--w-med) var(--fs-ui)/1.45 var(--ui); color: var(--muted) }
|
|
|
|
.ws .goal { padding-right: 22px }
|
|
.ws[data-confirm] .goal { padding-right: 82px }
|
|
.ws .goal > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
.ws[aria-selected="true"] .goal { color: var(--text) }
|
|
.ws .pip { margin-top: 6px }
|
|
.ws[data-s="awaiting"] .pip { background: var(--accent-ink) }
|
|
.ws[data-s="running"] .pip { background: var(--net) }
|
|
.ws[data-s="done"] .pip { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ok) }
|
|
.ws .meta { margin-top: 3px; padding-left: 13px; display: flex; gap: 8px; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint); white-space: nowrap; overflow: hidden }
|
|
.ws[data-s="awaiting"] .meta .st { color: var(--accent-ink) }
|
|
.ws .meta .cost { margin-left: auto; font-variant-numeric: tabular-nums }
|
|
.ws .meta .loc { color: var(--ok-ink) }
|
|
.ws { position: relative }
|
|
.wsdel {
|
|
position: absolute; top: 7px; right: 7px; width: 17px; height: 17px;
|
|
display: grid; place-items: center; border: 0; border-radius: var(--r-xs);
|
|
background: var(--overlay); color: var(--ghost); font: var(--w-reg) var(--fs-ui)/1 var(--ui);
|
|
cursor: pointer; opacity: 0; transition: opacity var(--m-line), background var(--m-line), color var(--m-line);
|
|
}
|
|
.ws:hover .wsdel, .wsdel:focus-visible { opacity: 1 }
|
|
.wsdel:hover { background: var(--border); color: var(--err) }
|
|
.ws[data-confirm] .wsdel { opacity: 1; width: auto; padding: 0 6px; font: var(--w-med) var(--fs-micro) var(--ui); color: var(--err-ink); background: color-mix(in srgb, var(--err) 15%, transparent) }
|
|
|
|
.ws[data-stop] { background: var(--accent-wash) }
|
|
.ws[data-stop] .meta .st { color: var(--accent-ink) }
|
|
.ws[data-gone] {
|
|
height: 0 !important; opacity: 0; padding-block: 0; overflow: hidden;
|
|
transition: height var(--t-card) var(--ease-in), opacity var(--m-line), padding var(--t-card) var(--ease-in);
|
|
}
|
|
|
|
.ws .where { display: none }
|
|
.ws[aria-selected="true"] .where {
|
|
display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-left: 13px;
|
|
font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint);
|
|
}
|
|
.ws .where .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-ink); flex: none }
|
|
.ws[data-iso="on"] .where .dot { background: var(--ok) }
|
|
.ws .where .p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
.ws .where .tag { flex: none; color: var(--accent-ink) }
|
|
.ws[data-iso="on"] .where .tag { color: var(--ok-ink) }
|
|
|
|
.railfoot { flex: none; display: flex; gap: 14px; padding: 9px 12px 11px; border-top: 1px solid var(--hair) }
|
|
.lnk {
|
|
border: 0; background: none; padding: 2px 0; cursor: pointer;
|
|
color: var(--muted); font: var(--w-reg) var(--fs-meta) var(--ui); text-align: left; transition: color var(--m-line);
|
|
}
|
|
.lnk:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px }
|
|
.lnk[disabled] { opacity: .4; cursor: default; pointer-events: none }
|
|
.lnk:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm) }
|
|
|
|
.main { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--surface) }
|
|
|
|
.vtabs { display: flex; align-items: center; gap: 2px; min-width: 0 }
|
|
|
|
.tabmark {
|
|
position: absolute; bottom: 0; left: 0; height: 2px; border-radius: var(--r-xs);
|
|
background: var(--accent-ink); pointer-events: none;
|
|
transition: transform var(--m-panel) , width var(--m-panel) ;
|
|
}
|
|
.tab {
|
|
flex: none; padding: 5px 11px; border: 0; border-radius: var(--r-sm);
|
|
background: none; cursor: pointer; white-space: nowrap;
|
|
font: var(--w-med) var(--fs-ui) var(--ui); color: var(--faint);
|
|
transition: color var(--m-line), background var(--m-line);
|
|
}
|
|
.tab:hover { color: var(--text) }
|
|
.tab[aria-selected="true"], .tab.on { background: var(--overlay); color: var(--text) }
|
|
.tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
|
|
.tab .n { font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--faint); margin-left: 5px; font-variant-numeric: tabular-nums }
|
|
|
|
.scroll[data-pane="browser"] { display: flex; flex-direction: column; overflow: hidden }
|
|
.scroll[data-pane="browser"][hidden] { display: none }
|
|
|
|
.pbody { flex: 1; min-height: 0; display: flex; flex-direction: column }
|
|
.pviews { flex: 1; min-height: 0; display: flex; flex-direction: column }
|
|
.pane > .scroll[data-pane="browser"] { flex: 1; min-height: 0 }
|
|
/* The pages full width: the column holding the conversation is empty then,
|
|
and an empty flex child still takes the room the page needs. */
|
|
.pbody[data-full] { display: none }
|
|
/* Docked, the pane is a grid so the browser's column spans the body's row
|
|
and the composer's; a child of the body would stop at the composer's edge. */
|
|
.pane:has(> .pbody[data-dock]) {
|
|
display: grid;
|
|
grid-template: "find side" auto "body side" minmax(0, 1fr) "compose side" auto / minmax(var(--dock-left-min), 1fr) minmax(0, var(--dock-w));
|
|
}
|
|
.pane:has(> .pbody[data-dock]) > .findhost { grid-area: find }
|
|
.pane:has(> .pbody[data-dock]) > .pbody { grid-area: body }
|
|
.pane:has(> .pbody[data-dock]) > .compose { grid-area: compose }
|
|
.pane:has(> .pbody[data-dock]) > .scroll[data-pane="browser"] {
|
|
grid-area: side; min-width: 0; border-left: 1px solid var(--hair);
|
|
}
|
|
.pane:has(> .pbody[data-dock]) > .gutter-r {
|
|
position: relative; inset: auto; grid-area: side; justify-self: start; align-self: stretch;
|
|
width: 11px; margin-left: -6px; z-index: 6;
|
|
}
|
|
.pane:has(> .pbody[data-dock]) > .pbody { padding-right: 6px }
|
|
.pane:has(> .pbody[data-dock]) > .gutter-r[data-shut] { width: 14px; margin: 0 0 0 -15px; align-self: center }
|
|
.app[data-browser="off"] .pane:has(> .pbody[data-dock]) > .scroll[data-pane="browser"] { visibility: hidden; transition-property: visibility; transition-duration: 0s; transition-delay: var(--t-panel) }
|
|
.pane:has(> .pbody[data-dock]) .workbench-body:not([data-files]) { grid-template-columns: minmax(0, 1fr) }
|
|
.pane:has(> .pbody[data-dock]) .workbench-body:not([data-files]) .workbench-explorer { display: none }
|
|
.pane:has(> .pbody[data-dock]) .workbench-body[data-files] { grid-template-columns: minmax(0, 1fr) }
|
|
.pane:has(> .pbody[data-dock]) .workbench-body[data-files] .workbench-canvas { display: none }
|
|
.bpanel { flex: 1; display: flex; flex-direction: column; min-height: 0 }
|
|
.bbar { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--hair) }
|
|
.bbar .vtabs { overflow-x: auto }
|
|
.btab { max-width: 220px; overflow: hidden; text-overflow: ellipsis }
|
|
.bnav { display: flex; align-items: center; gap: 4px }
|
|
.bbtn {
|
|
flex: none; width: 28px; height: 28px; border: 0; border-radius: var(--r-sm);
|
|
background: none; color: var(--faint); cursor: pointer; font: var(--w-med) var(--fs-ui) var(--ui);
|
|
}
|
|
.bbtn:hover { color: var(--text); background: var(--overlay) }
|
|
.bbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.baddr { flex: 1; min-width: 0 }
|
|
.baddr input {
|
|
width: 100%; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
|
|
background: var(--raised); color: var(--text); font: var(--w-reg) var(--fs-meta) var(--ui);
|
|
}
|
|
.baddr input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.bview { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; background: var(--surface) }
|
|
.bframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; user-select: none; pointer-events: none }
|
|
.bpage { max-width: 560px; padding: 24px; display: grid; gap: 8px; justify-items: start; color: var(--muted) }
|
|
.bpage b { max-width: 100%; font: var(--w-med) var(--fs-lead) var(--ui); color: var(--text); overflow-wrap: anywhere }
|
|
.bpage code { max-width: 100%; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--muted); overflow-wrap: anywhere }
|
|
.bpage p { margin: 0; font: var(--w-reg) var(--fs-meta)/1.7 var(--ui); color: var(--faint) }
|
|
.bfail { max-width: 460px; padding: 24px; display: grid; gap: 8px; justify-items: start; color: var(--muted) }
|
|
.bfail b { font: var(--w-med) var(--fs-lead) var(--ui); color: var(--text) }
|
|
.bfail p { margin: 0; font: var(--w-reg) var(--fs-ui)/1.7 var(--ui) }
|
|
.bfail code { max-width: 100%; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint); overflow-wrap: anywhere }
|
|
.bfail-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px }
|
|
.bfail-cert { margin: 4px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; font: var(--w-reg) var(--fs-meta)/1.6 var(--ui) }
|
|
.bfail-cert dt { color: var(--faint) }
|
|
.bfail-cert dd { margin: 0; color: var(--muted); overflow-wrap: anywhere }
|
|
.bfail-cert .fp { font-family: var(--mono) }
|
|
.bfail .bfail-note { font-size: var(--fs-meta); color: var(--faint) }
|
|
.tab.more { display: inline-flex; align-items: center; gap: 5px }
|
|
.tab.more .cv { font: var(--w-reg) var(--fs-micro) var(--ui); color: var(--faint); font-style: normal; transition: transform var(--t-card) var(--ease) }
|
|
.tab.more[aria-expanded="true"] .cv { transform: rotate(180deg) }
|
|
|
|
[data-pane="flow"] { display: flex; flex-direction: column }
|
|
|
|
[data-pane="flow"]:has(.hero) { justify-content: center }
|
|
[data-pane="flow"]:has(.hero) .flow { margin-top: 0 }
|
|
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 24px 34px }
|
|
.hero .sym-mark {
|
|
width: 78px; height: 78px; display: block;
|
|
color: var(--faint); opacity: .92;
|
|
}
|
|
.hero .t {
|
|
margin-top: 26px; font: var(--w-reg) calc(25px * var(--fs-scale, 1))/1.25 var(--ui);
|
|
letter-spacing: var(--track-display); color: var(--text);
|
|
}
|
|
.hero .s { margin-top: 12px; max-width: 48ch; font-size: var(--fs-ui); line-height: 1.75; color: var(--faint) }
|
|
.herogo { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 19px }
|
|
.pick {
|
|
padding: 8px 20px; border: 1px solid var(--accent); border-radius: var(--r-sm);
|
|
background: var(--accent); color: var(--accent-fg); box-shadow: var(--lit);
|
|
font: var(--w-med) var(--fs-ui) var(--ui); cursor: pointer;
|
|
transition: filter var(--m-line);
|
|
}
|
|
.pick:hover { filter: brightness(1.06) }
|
|
.stay {
|
|
padding: 2px 6px; border: 0; border-radius: var(--r-xs); background: transparent;
|
|
color: var(--ghost); font: var(--w-reg) var(--fs-ui) var(--ui); cursor: pointer;
|
|
}
|
|
.stay:hover { color: var(--muted) }
|
|
.pick:focus-visible, .stay:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
|
|
[data-pane="flow"][hidden], #trajScroll[hidden] { display: none }
|
|
|
|
.flow-edge { position: sticky; top: 0; height: 0; z-index: 3; flex: none; pointer-events: none }
|
|
.flow-edge::before {
|
|
content: ""; position: absolute; inset-inline: 0; top: 0; height: 30px; opacity: 0;
|
|
background: linear-gradient(to bottom, var(--surface), transparent);
|
|
}
|
|
|
|
@supports (animation-timeline: scroll()) {
|
|
.flow-edge::before {
|
|
animation: edgein linear both;
|
|
animation-timeline: scroll(nearest block);
|
|
animation-range: 0 44px;
|
|
}
|
|
@keyframes edgein { to { opacity: 1 } }
|
|
}
|
|
|
|
.pane { --srail-w: 54px; --flow-pad: 20px }
|
|
.railhost { position: sticky; top: 0; height: 0; z-index: 4; pointer-events: none }
|
|
|
|
[data-pane="flow"] { overflow-x: hidden; scrollbar-width: none }
|
|
[data-pane="flow"]::-webkit-scrollbar { display: none }
|
|
|
|
.srail {
|
|
position: absolute; top: 0; right: 0; width: var(--srail-w); pointer-events: auto;
|
|
height: var(--rail-h, 0px);
|
|
}
|
|
|
|
.srail-m {
|
|
position: absolute; right: 15px; width: 39px; height: 18px; margin-top: -9px;
|
|
display: flex; align-items: center; justify-content: flex-end;
|
|
border: 0; padding: 0; background: none; cursor: pointer;
|
|
z-index: calc(1 + var(--lit, 0) * 10);
|
|
}
|
|
|
|
.srail-m > i {
|
|
--lit: 0;
|
|
width: calc(11px + 15px * var(--lit)); height: 2px; flex: none;
|
|
margin-right: 3px; border-radius: var(--r-pill); background: var(--ghost);
|
|
opacity: calc(.3 + .55 * var(--lit));
|
|
transition: width var(--m-line), opacity var(--m-line), background-color var(--m-line);
|
|
}
|
|
.srail-m:focus-visible > i { outline: 2px solid var(--focus); outline-offset: 3px }
|
|
.srail-m[data-on] > i { background: var(--accent-ink) }
|
|
|
|
.pane:hover .srail-m > i { opacity: calc(.46 + .54 * var(--lit)) }
|
|
.srail:hover ~ .srail-peek { opacity: 1 }
|
|
|
|
.srail-peek {
|
|
position: absolute; right: 48px; z-index: 5; width: 300px; padding: 9px 11px;
|
|
border: 1px solid var(--border); border-radius: var(--r-md); background: var(--float);
|
|
box-shadow: var(--shadow-float); pointer-events: none; transform: translateY(-50%);
|
|
animation: peekin var(--m-line) both;
|
|
}
|
|
@keyframes peekin { from { opacity: 0; transform: translate(8px, -50%) } to { opacity: 1; transform: translateY(-50%) } }
|
|
.srail-peek .hd { display: flex; align-items: baseline; gap: 8px; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint) }
|
|
.srail-peek .hd .n { color: var(--accent-ink) }
|
|
.srail-peek .tx {
|
|
margin-top: 5px; font: var(--w-reg) var(--fs-ui)/1.55 var(--ui); color: var(--text);
|
|
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
|
|
}
|
|
|
|
.call[data-hit] > .c > .hl > :is(.nm, .arg),
|
|
.call[data-hit] > .c > .tool-disclosure > .hl > :is(.nm, .arg) { animation: hitmark 1.1s var(--ease-out) }
|
|
.call[data-hit]:not([data-running]) > .g .sym { animation: hitglyph 1.1s var(--ease-out) }
|
|
@keyframes hitmark {
|
|
from { color: var(--accent-ink); text-shadow: 0 0 7px color-mix(in srgb, var(--accent) 44%, transparent) }
|
|
to { text-shadow: none }
|
|
}
|
|
@keyframes hitglyph { from { filter: drop-shadow(0 0 5px var(--accent)) } to { filter: none } }
|
|
|
|
.flow {
|
|
margin-top: auto; margin-inline: auto;
|
|
width: calc(100% - var(--srail-w) * 2); max-width: var(--wide);
|
|
padding: 12px var(--flow-pad) 16px;
|
|
}
|
|
|
|
.chunk { display: flow-root }
|
|
|
|
.flow-end { height: 1px; margin-top: -1px }
|
|
|
|
.traj { width: 100%; border-collapse: collapse; font: var(--w-reg) var(--fs-ui)/1.55 var(--mono) }
|
|
.traj th {
|
|
text-align: left; padding: 7px 12px; position: sticky; top: 0; z-index: 1;
|
|
background: var(--surface); border-bottom: 1px solid var(--border);
|
|
font: var(--w-med) var(--fs-micro) var(--mono); letter-spacing: var(--track-cap); text-transform: uppercase; color: var(--ghost);
|
|
}
|
|
.traj td { padding: 6px 12px; border-bottom: 1px solid var(--hair); vertical-align: top; color: var(--muted) }
|
|
.traj tr:hover td { background: var(--overlay) }
|
|
.traj .seq { width: 46px; text-align: right; color: var(--ghost); font-variant-numeric: tabular-nums }
|
|
.traj .t { width: 62px; color: var(--ghost); font-variant-numeric: tabular-nums }
|
|
.traj .kind { width: 168px; white-space: nowrap; color: var(--faint) }
|
|
|
|
.traj tr[data-k="memory_recall"] .kind { color: var(--deleg) }
|
|
.traj tr[data-k="delegation_admission"] .kind { color: var(--net) }
|
|
.traj tr[data-k="protocol_recovery"] .kind { color: var(--warn-ink) }
|
|
.traj tr[data-k="readiness_audit"] .kind { color: var(--accent-ink) }
|
|
.traj tr[data-k="outcome_progress"] .kind { color: var(--ok-ink) }
|
|
.traj tr[data-k="completion_report"] .kind { color: var(--ok-ink) }
|
|
|
|
.traj .sub {
|
|
display: block; margin-top: 4px; padding-left: 9px;
|
|
border-left: 1px solid var(--border); color: var(--faint);
|
|
}
|
|
.traj .sub b { color: var(--muted); font-weight: var(--w-reg) }
|
|
.traj .num { color: var(--text); font-variant-numeric: tabular-nums }
|
|
|
|
.call { display: grid; grid-template-columns: var(--call-sym) minmax(0, 1fr); gap: var(--call-gap); }
|
|
.call > .g { display: flex; flex-direction: column; align-items: center }
|
|
.call > .g .sym {
|
|
width: var(--call-sym); height: var(--call-sym); margin-top: 5px; display: grid; place-items: center;
|
|
border-radius: var(--r-lg); font: var(--w-med) var(--fs-meta)/1 var(--mono); color: var(--faint);
|
|
|
|
background: transparent; flex: none;
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent), var(--lit);
|
|
}
|
|
.call > .g .sym svg {
|
|
width: 14px; height: 14px; display: block; fill: none; stroke: currentColor;
|
|
stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
|
|
.nest-bd { --call-sym: 20px; --call-gap: 11px }
|
|
.nest-bd .call > .g .sym { margin-top: 8px; border-radius: var(--r-xs); box-shadow: none }
|
|
.nest-bd .call > .g .sym svg { width: 10.5px; height: 10.5px }
|
|
|
|
.call > .c { min-width: 0; padding: var(--y-card) 0 }
|
|
.call:has(> .c > .out:empty) > .c { padding: var(--y-line) 0 }
|
|
.call:has(.nest, .ask) > .c { padding: var(--y-panel) 0 }
|
|
|
|
.nest-bd .call > .c { padding: var(--y-line) 0 }
|
|
|
|
.call[data-k="net"] > .g .sym { color: var(--net); background: var(--net-wash) }
|
|
.call[data-k="deleg"] > .g .sym { color: var(--deleg); background: var(--deleg-wash) }
|
|
.call[data-k="write"] > .g .sym { color: var(--warn-ink); background: color-mix(in srgb, var(--warn) 14%, transparent) }
|
|
.call[data-k="ask"] > .g .sym { color: var(--accent-wash); background: var(--accent-ink) }
|
|
.call[data-k="mcp"] > .g .sym { color: var(--net); background: var(--net-wash) }
|
|
.call[data-k="mem"] > .g .sym { color: var(--deleg) }
|
|
.call[data-k="say"] > .g .sym { background: transparent; color: var(--ghost) }
|
|
.call[data-k="me"] > .g .sym { background: var(--text); color: var(--surface) }
|
|
|
|
.call[data-k="me"] { margin-top: 28px }
|
|
.call[data-k="me"]::before {
|
|
content: ""; grid-column: 1 / -1; height: 1px; margin-bottom: 12px; background: var(--hair);
|
|
}
|
|
|
|
.call[data-k="host"] > .g .sym {
|
|
background: none; color: var(--ok);
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 38%, transparent);
|
|
}
|
|
.call[data-k="host"][data-lvl="warn"] > .g .sym {
|
|
color: var(--warn);
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 38%, transparent);
|
|
}
|
|
.call[data-k="host"][data-lvl="err"] > .g .sym {
|
|
color: var(--err);
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--err) 38%, transparent);
|
|
}
|
|
.call[data-k="host"] > .c .hl .nm { font-weight: var(--w-reg); color: var(--muted) }
|
|
|
|
.call[data-k="say"] > .g .sym { background: none; box-shadow: none; color: var(--text) }
|
|
.call[data-k="say"] > .g .sym svg { fill: currentColor }
|
|
|
|
.call[data-k="say"] > .g {
|
|
background: linear-gradient(color-mix(in srgb, var(--border) 88%, transparent) 0 0)
|
|
no-repeat 50% 0 / 2px 16px;
|
|
}
|
|
.call[data-k="say"] > .c { padding: var(--y-say) 0 }
|
|
|
|
.call[data-k="say"] > .c > .out > .txt {
|
|
color: var(--text); line-height: 1.78; font-size: calc(var(--read) * 1.08);
|
|
}
|
|
|
|
.call:not([data-k="me"], [data-k="say"], [data-k="ask"]) > .c > .hl { flex-wrap: nowrap }
|
|
|
|
.enterbox[data-enter] :is(.term-l, .dl, .plan .s) { animation: line var(--m-line) both }
|
|
.enterbox[data-enter] :is(.hits > *, .steps > *) { animation: card var(--m-card) both }
|
|
|
|
.enterbox { display: contents }
|
|
.enterbox[data-enter] > .call { animation: card var(--m-card) both }
|
|
|
|
.enterbox[data-enter] .nest-bd .call { animation: card var(--m-card) both }
|
|
|
|
.enterbox[data-enter] :is(.nest, .ask) { animation: panel var(--m-panel) both }
|
|
|
|
@keyframes line { from { opacity: 0 } to { opacity: 1 } }
|
|
@keyframes card { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
|
|
@keyframes panel {
|
|
from { opacity: 0; transform: translateY(-4px) scaleY(.985) }
|
|
to { opacity: 1; transform: none }
|
|
}
|
|
.nest, .ask { transform-origin: top }
|
|
|
|
.hl { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; transition: opacity var(--m-exit) }
|
|
.hl[data-swap] { opacity: 0 }
|
|
.enterbox[data-enter] .hl .cost { animation: costin var(--t-card) var(--ease-out) both }
|
|
@keyframes costin { from { opacity: 0; transform: translateX(5px) } to { opacity: 1; transform: none } }
|
|
|
|
.call > .g .sym {
|
|
transition: opacity var(--t-card) var(--ease-out),
|
|
box-shadow var(--t-card) var(--ease-out);
|
|
}
|
|
.call > .g .sym[data-done] { animation: symdone var(--m-panel) }
|
|
@keyframes symdone { 0% { transform: scale(1) } 38% { transform: scale(.86) } 100% { transform: scale(1) } }
|
|
.hl .nm { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
|
|
.call:not([data-k="net"], [data-k="write"], [data-k="ask"], [data-k="deleg"], [data-k="mcp"], [data-k="me"], [data-k="say"])
|
|
> .c .hl .nm { font-weight: var(--w-reg) }
|
|
|
|
.hl:empty { display: none }
|
|
.hl .arg { font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
|
|
.hl .nm + .tag, .hl .nm + .who, .hl .nm + .src { margin-left: -3px }
|
|
.hl .arg { margin-left: 3px }
|
|
.hl .tag { font: var(--w-med) var(--fs-micro) var(--mono); letter-spacing: var(--track-cap); text-transform: uppercase; padding: 1.5px 5px; border-radius: var(--r-xs); color: var(--faint); background: var(--overlay) }
|
|
|
|
.hl .src {
|
|
font: var(--w-med) var(--fs-micro) var(--mono); letter-spacing: var(--track-cap); padding: 1.5px 6px;
|
|
border-radius: var(--r-xs); color: var(--net); background: var(--net-wash);
|
|
}
|
|
|
|
.hl .who {
|
|
font: var(--w-med) var(--fs-micro) var(--mono); letter-spacing: var(--track-cap); padding: 1.5px 6px;
|
|
border-radius: var(--r-xs); color: var(--label-agent); background: var(--label-agent-wash);
|
|
}
|
|
|
|
.cost { margin-left: auto; display: inline-flex; align-items: baseline; gap: 7px; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none }
|
|
|
|
.cost > span + span { color: var(--ghost) }
|
|
.cost > span + span::before {
|
|
content: "·"; margin-right: 7px; color: var(--hair); font-variant-numeric: normal;
|
|
}
|
|
.cost .hit { color: var(--ok-ink) }
|
|
|
|
.cost .live { color: var(--muted) }
|
|
|
|
.cost .took {
|
|
height: 3px; border-radius: var(--r-xs); flex: none; align-self: center;
|
|
background: color-mix(in srgb, var(--faint) 58%, transparent);
|
|
}
|
|
|
|
.shim {
|
|
color: var(--text);
|
|
}
|
|
|
|
.doing { font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
.doing .d { color: var(--ghost) }
|
|
|
|
.stepctl { display: flex; gap: 5px; opacity: 0; transition: opacity var(--m-line); flex: none }
|
|
.call > .c:hover .stepctl, .call > .c:focus-within .stepctl { opacity: 1 }
|
|
.stepctl button {
|
|
position: relative; display: inline-flex; align-items: center; gap: 4px;
|
|
border: 0; background: var(--overlay); color: var(--faint); cursor: pointer;
|
|
font: var(--w-med) var(--fs-micro) var(--ui); padding: 4px 9px; border-radius: var(--r-sm); white-space: nowrap;
|
|
}
|
|
.stepctl button::after { content: ""; position: absolute; inset: -5px -2px }
|
|
.stepctl button .studio-icon { width: 12px; height: 12px }
|
|
.stepctl button:hover { background: var(--border); color: var(--text) }
|
|
.stepctl button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
|
|
.rewind { margin-left: auto }
|
|
|
|
.stepctl[data-open] { opacity: 1 }
|
|
|
|
.rewindmenu {
|
|
position: fixed; z-index: 60; min-width: 208px;
|
|
animation: card var(--m-line) both;
|
|
}
|
|
|
|
.await { display: flex; align-items: center; gap: 5px; padding: 4px 0; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--ghost) }
|
|
.await i { width: 4px; height: 4px; border-radius: 50%; background: var(--ghost); animation: bob 1.15s ease-in-out infinite }
|
|
.await i:nth-child(2) { animation-delay: .15s }
|
|
.await i:nth-child(3) { animation-delay: .3s }
|
|
.await .t { margin-left: 5px }
|
|
.await[data-retry] { color: var(--warn-ink) }
|
|
.await[data-retry] i { background: var(--warn) }
|
|
@keyframes bob { 0%, 100% { opacity: .22; transform: translateY(0) } 50% { opacity: 1; transform: translateY(-3px) } }
|
|
|
|
.think { margin-top: 5px }
|
|
.think > summary { display: inline-flex; max-width: 100%; align-items: baseline; gap: 8px }
|
|
.think .peek { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--faint) }
|
|
.think .tk {
|
|
margin-top: 5px; padding-left: 14px;
|
|
font: var(--w-reg) var(--fs-ui)/1.68 var(--ui); color: var(--faint); white-space: pre-wrap;
|
|
}
|
|
.think[open] > summary .fold { color: var(--faint) }
|
|
|
|
.think::details-content {
|
|
block-size: 0; overflow: hidden;
|
|
transition: block-size var(--t-card) var(--ease-out),
|
|
content-visibility var(--t-card) allow-discrete;
|
|
}
|
|
.think[open]::details-content { block-size: auto }
|
|
|
|
.out { margin-top: 6px }
|
|
|
|
.out .txt { font-size: var(--read); line-height: 1.72; color: var(--muted) }
|
|
|
|
.call[data-k="me"] .out .txt {
|
|
color: var(--text); white-space: pre-wrap;
|
|
width: fit-content; max-width: 100%;
|
|
padding: 11px 13px; background: var(--raised); border-radius: var(--r-md);
|
|
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
|
|
}
|
|
.out .txt { overflow-wrap: anywhere }
|
|
.out .txt pre, .out .txt .md-tw { overflow-wrap: normal }
|
|
|
|
.out .acts { display: flex; gap: 6px; margin-top: 9px; margin-inline-start: -7px }
|
|
.copy {
|
|
display: inline-flex; align-items: center; gap: 5px;
|
|
border: 0; background: transparent; color: var(--faint); cursor: pointer;
|
|
font: var(--w-med) var(--fs-micro) var(--ui); letter-spacing: var(--track-cap); padding: 4px 7px;
|
|
border-radius: var(--r-sm); transition: color var(--m-line), background var(--m-line);
|
|
}
|
|
.copy:hover { background: var(--overlay); color: var(--text) }
|
|
.copy:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.copy[data-state="done"] { color: var(--ok) }
|
|
.copy[data-state="failed"] { color: var(--warn-ink) }
|
|
|
|
|
|
.out .txt.bad { padding-left: 10px; border-left: 2px solid var(--warn) }
|
|
|
|
.tvideos { padding: 6px 0 2px }
|
|
.tvideo { color: var(--muted); font: var(--w-reg) var(--fs-ui) var(--ui); overflow-wrap: anywhere }
|
|
.tshots { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 2px 31px }
|
|
.tshot { padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--sunk); overflow: hidden; cursor: zoom-in }
|
|
.tshot img { display: block; max-width: 260px; max-height: 170px; object-fit: contain }
|
|
.tshot:hover { border-color: var(--halo) }
|
|
.tshot:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
|
|
.out .txt code { font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--text) }
|
|
|
|
.caret { display: inline-block; width: 6px; height: 13px; background: var(--net); vertical-align: -2px; animation: blink 1.1s var(--ease) infinite }
|
|
@keyframes blink { 0%, 100% { opacity: 1 } 55% { opacity: .15 } }
|
|
.tk .caret { width: 5px; height: 11px; background: var(--faint); margin-left: 2px }
|
|
@keyframes settle { from { opacity: 0 } to { opacity: 1 } }
|
|
.rgroup { display: flex; flex-direction: column; gap: 4px }
|
|
.rgroup .hd { font: var(--w-med) var(--fs-micro) var(--mono); letter-spacing: var(--track-cap); color: var(--warn-ink) }
|
|
.rgroup[data-declared] .hd { color: var(--faint) }
|
|
|
|
.rrow {
|
|
padding: 5px 0 5px 10px; border-left: 2px solid var(--warn);
|
|
animation: card var(--t-card) var(--ease-out) both;
|
|
animation-delay: calc(var(--i, 0) * 40ms);
|
|
}
|
|
.rgroup[data-declared] .rrow { border-left-color: var(--hair) }
|
|
.rrow .t { display: block; font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.rrow .d { display: block; margin-top: 2px; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--muted); overflow-wrap: anywhere }
|
|
.rgroup .more { padding-left: 12px; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost) }
|
|
|
|
.subrow { margin-left: 20px; padding-left: 14px; border-left: 1px solid var(--hair) }
|
|
.subrow[data-off] { opacity: .5 }
|
|
|
|
.cfgbad { margin: 10px 16px 0 }
|
|
.cfgbad .term { margin-top: 8px }
|
|
.cfgbad .term-l { white-space: pre-wrap; overflow-wrap: anywhere }
|
|
.cfgbad .acts { display: flex; gap: 8px; margin-top: 10px; align-items: center }
|
|
|
|
.finds { margin-top: 7px; display: flex; flex-direction: column; gap: 5px }
|
|
.find { padding: 6px 0 6px 10px; border-left: 2px solid var(--ghost) }
|
|
.enterbox[data-enter] .find { animation: card var(--t-card) var(--ease-out) both }
|
|
.find[data-lvl="ok"] { border-left-color: var(--ok) }
|
|
.find[data-lvl="warn"] { border-left-color: var(--warn) }
|
|
.find[data-lvl="err"] { border-left-color: var(--err) }
|
|
.find .t { display: block; font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.find .why { display: block; margin-top: 2px; font-size: var(--fs-ui); line-height: 1.55; color: var(--muted) }
|
|
|
|
.find .why > .lnk { margin-left: 6px }
|
|
|
|
.find .gapd {
|
|
display: block; margin-top: 5px; font: var(--w-reg) var(--fs-meta)/1.6 var(--mono);
|
|
color: var(--faint); overflow-wrap: anywhere;
|
|
}
|
|
.find .why.nwhy {
|
|
margin-top: 5px; font: var(--w-reg) var(--fs-meta)/1.6 var(--ui); color: var(--faint);
|
|
white-space: pre-wrap; overflow-wrap: anywhere;
|
|
}
|
|
.find .nmd { margin-top: 5px; font-size: var(--fs-ui); line-height: 1.6; color: var(--text); overflow-wrap: anywhere }
|
|
.find .nrule {
|
|
display: block; margin-top: 5px; font: var(--w-reg) var(--fs-meta)/1.6 var(--mono); color: var(--muted);
|
|
white-space: pre-wrap; overflow-wrap: anywhere;
|
|
}
|
|
|
|
.term {
|
|
margin-top: 8px; padding: 11px 13px 12px; border-radius: var(--r-lg);
|
|
background: var(--face-sunk);
|
|
font: var(--w-reg) var(--fs-ui)/calc(19px * var(--fs-scale, 1)) var(--mono); color: var(--muted); overflow-x: auto;
|
|
}
|
|
.term-l { white-space: pre }
|
|
.term[data-one] { margin: 5px 0 0; padding: 0; background: none; border-radius: 0 }
|
|
.term .ok { color: var(--ok-ink) } .term .er { color: var(--err-ink) } .term .dim { color: var(--ghost) }
|
|
|
|
details > summary { cursor: pointer; list-style: none }
|
|
details > summary::-webkit-details-marker { display: none }
|
|
details > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs) }
|
|
.fold {
|
|
display: inline-flex; align-items: center; gap: 5px;
|
|
font: var(--w-reg) var(--fs-meta) var(--ui); font-variant-numeric: tabular-nums; color: var(--faint);
|
|
}
|
|
.fold::before {
|
|
content: ""; width: 9px; height: 9px; flex: none; color: var(--ghost); background: currentColor;
|
|
-webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat;
|
|
transition: transform var(--t-card) var(--ease);
|
|
}
|
|
details[open] > summary .fold::before { transform: rotate(90deg) }
|
|
.fold:hover { color: var(--text) }
|
|
|
|
.peek { margin-top: 7px; display: flex; flex-direction: column; gap: 3px }
|
|
.peek .contributions { display: flex; flex-direction: column; gap: 3px; margin-top: 7px }
|
|
.peek .contributions > .kind { margin: 0; font: var(--w-med) var(--fs-ui) var(--ui); color: var(--muted) }
|
|
.peek .row { display: flex; gap: 9px; font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--faint) }
|
|
.peek .row .d { color: var(--ghost) }
|
|
.peek .row .n { margin-left: auto; color: var(--ghost); font-variant-numeric: tabular-nums }
|
|
|
|
.peek button.row { width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left }
|
|
.peek button.row:hover, .peek button.row[data-on] { color: var(--text) }
|
|
.peek button.row[data-bad] { color: var(--warn-ink) }
|
|
.peek button.row[data-bad] .n { color: var(--err-ink) }
|
|
.peek button.row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs) }
|
|
|
|
.out-clip { position: relative }
|
|
|
|
.call:not([data-running]):not(:has(> .c > .hl .fail, > .c > .tool-disclosure > .hl .fail)) .out-clip { --out-peek: 5.5rem }
|
|
.call:not([data-running]):not(:has(> .c > .hl .fail, > .c > .tool-disclosure > .hl .fail)) .out-clip[data-over]:not([data-open])::after { height: 2rem }
|
|
.out-body {
|
|
max-height: var(--out-peek, 16rem); overflow: auto;
|
|
transition: max-height var(--t-panel) var(--ease-out);
|
|
}
|
|
|
|
.out-clip > .out-body > .term { width: max-content; min-width: 100%; overflow: visible; box-sizing: border-box }
|
|
|
|
.out-clip[data-open] .out-body { max-height: max-content }
|
|
.out-clip[data-over]::after {
|
|
content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3rem; pointer-events: none;
|
|
background: linear-gradient(to bottom, transparent, var(--face-sunk));
|
|
transition: opacity var(--t-card) var(--ease-out);
|
|
}
|
|
.out-clip[data-open][data-over]::after { opacity: 0 }
|
|
.out-clip { timeline-scope: --out-x }
|
|
.out-clip > .out-body { scroll-timeline: --out-x inline }
|
|
.out-clip::before {
|
|
content: ""; position: absolute; inset-block: 0; right: 0; width: 2.25rem; z-index: 1;
|
|
pointer-events: none; opacity: 0;
|
|
background: linear-gradient(to right, transparent, var(--face-sunk));
|
|
animation: out-x-more linear both; animation-timeline: --out-x;
|
|
}
|
|
@keyframes out-x-more { 0%, 88% { opacity: 1 } 100% { opacity: 0 } }
|
|
|
|
.out-more {
|
|
position: relative; z-index: 1;
|
|
margin-top: 5px; padding: 2px 7px; border: 0; border-radius: var(--r-xs); background: var(--overlay);
|
|
font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint); cursor: pointer;
|
|
}
|
|
.out-more:hover { color: var(--text) }
|
|
.out-more:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
|
|
|
|
.bound { margin-top: 5px; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.bound.bad { color: var(--err-ink) }
|
|
|
|
.hits { margin-top: 7px; display: flex; flex-direction: column; gap: 1px }
|
|
.hit-row { display: grid; grid-template-columns: 16px 1fr; gap: 9px; padding: 6px 8px; border-radius: var(--r-xs) }
|
|
.hit-row:hover { background: var(--overlay) }
|
|
.hit-row .i { font: var(--w-reg) var(--fs-micro)/calc(17px * var(--fs-scale, 1)) var(--mono); color: var(--ghost); text-align: right; font-variant-numeric: tabular-nums }
|
|
.hit-row .t { font-size: var(--fs-ui); color: var(--text); line-height: 1.45 }
|
|
.hit-row .u { margin-top: 2px; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
.hit-row .q { margin-top: 4px; font-size: var(--fs-ui); line-height: 1.55; color: var(--muted); border-left: 2px solid var(--border); padding-left: 8px }
|
|
|
|
.nest { margin-top: 8px; border-left: 2px solid var(--deleg); overflow: hidden }
|
|
.nest-hd { display: flex; align-items: center; gap: 9px; padding: 6px 11px; border-bottom: 1px solid var(--hair) }
|
|
.nest-hd .who { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--label-agent) }
|
|
.nest-hd .prof { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.nest-hd .doing { margin-left: auto; max-width: 46% }
|
|
.nest-hd .rt { margin-left: 13px; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; flex: none }
|
|
.nest-bd { padding: 3px 11px 8px }
|
|
.nest-bd .call { grid-template-columns: 17px minmax(0, 1fr); gap: 9px }
|
|
.nest-bd .call > .g .sym { width: 17px; height: 17px; margin-top: 6px; font-size: var(--fs-micro) }
|
|
.nest-bd .call > .c { padding: 6px 0 6px }
|
|
.nest-bd .hl .nm { font-size: var(--fs-ui) }
|
|
.nest-ret { margin: 0 11px 10px; padding: 6px 0 6px 11px; border-left: 1px solid var(--border); font-size: var(--fs-ui); line-height: 1.6; color: var(--muted) }
|
|
.enterbox[data-enter] .nest-ret { animation: card var(--t-card) var(--ease-out) both }
|
|
|
|
.pip[data-settled] { background: var(--ok) !important }
|
|
.pip[data-failed] { background: var(--err) !important }
|
|
.nest-ret b { color: var(--text); font-weight: var(--w-med) }
|
|
.nest-ret code { font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--text) }
|
|
|
|
.dif { margin-top: 7px; border: 1px solid var(--hair); border-radius: var(--r-sm); overflow: hidden }
|
|
.dif-hd { display: flex; align-items: center; gap: 9px; padding: 6px 11px; background: var(--overlay); font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint) }
|
|
.dif-hd > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
.dif-hd > :is(.ro, .dif-act) { flex: none; margin-left: auto }
|
|
.dif-hd .ro { margin-left: auto; font-size: var(--fs-micro); letter-spacing: var(--track-cap); text-transform: uppercase; color: var(--ghost) }
|
|
|
|
.dlwrap { overflow-x: auto; overscroll-behavior-x: contain }
|
|
.dl { display: grid; grid-template-columns: 42px 14px 1fr; font: var(--w-reg) var(--fs-ui)/calc(20px * var(--fs-scale, 1)) var(--mono); white-space: pre; min-width: max-content }
|
|
|
|
.dhunk {
|
|
display: grid; grid-template-columns: 42px 1fr; font: var(--w-reg) var(--fs-micro)/calc(18px * var(--fs-scale, 1)) var(--mono);
|
|
color: var(--ghost); background: color-mix(in srgb, var(--overlay) 55%, transparent);
|
|
border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
|
|
}
|
|
.dhunk > span:first-child { text-align: right; padding-right: 9px }
|
|
.dhunk > span:last-child { padding-left: 14px }
|
|
/* 多文件 diff 的每文件表头：卡片抬头只说得清第一个文件，其余靠这一行点名。 */
|
|
.dfile {
|
|
display: flex; align-items: baseline; gap: 9px; padding: 4px 11px;
|
|
font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--faint);
|
|
background: color-mix(in srgb, var(--overlay) 70%, transparent);
|
|
border-top: 1px solid var(--hair);
|
|
}
|
|
.dfile:first-child { border-top: none }
|
|
.dfile .p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
.dfile .st { margin-left: auto; flex: none; display: flex; gap: 7px; font-variant-numeric: tabular-nums }
|
|
.dfile .add { color: color-mix(in srgb, var(--add) 62%, var(--text)) }
|
|
.dfile .del { color: color-mix(in srgb, var(--del) 58%, var(--text)) }
|
|
.dl > .no { position: sticky; left: 0; text-align: right; padding-right: 9px; color: var(--faint); background: var(--raised); font-variant-numeric: tabular-nums; user-select: none }
|
|
.dl > .sg { color: var(--ghost); user-select: none }
|
|
.dl > .cd { padding-right: 11px; color: var(--muted) }
|
|
.dl[data-d="+"] { background: color-mix(in srgb, var(--add) 9%, transparent) }
|
|
.dl[data-d="+"] > .sg, .dl[data-d="+"] > .cd { color: color-mix(in srgb, var(--add) 62%, var(--text)) }
|
|
.dl[data-d="-"] { background: color-mix(in srgb, var(--del) 8%, transparent) }
|
|
.dl[data-d="-"] > .sg, .dl[data-d="-"] > .cd { color: color-mix(in srgb, var(--del) 58%, var(--text)) }
|
|
|
|
.goalup { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: var(--fs-ui); line-height: 1.6 }
|
|
.goalup .o { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--ghost) }
|
|
.goalup .ar { font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--ghost) }
|
|
.goalup .n { color: var(--text); font-weight: var(--w-med) }
|
|
.chrome .goal[data-flash] { animation: flash 1.3s var(--ease-out) }
|
|
.medit-r .n .r { color: var(--del) }
|
|
|
|
.guard { margin: 0; padding: 0 }
|
|
.enterbox[data-enter] .guard { animation: card var(--t-card) var(--ease-out) both }
|
|
.guard-hd { display: flex; align-items: baseline; gap: 8px }
|
|
.guard-hd .verdict { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text); flex: none }
|
|
.guard-hd .risk { margin-left: auto; font: var(--w-med) var(--fs-micro) var(--ui); color: var(--faint); white-space: nowrap }
|
|
.guard-hd .scope { font-size: var(--fs-ui); color: var(--muted); min-width: 0 }
|
|
.guard-hd .gauge { display: flex; gap: 2px; flex: none; align-self: center }
|
|
.guard-hd .gauge i { width: 3px; height: 9px; border-radius: var(--r-xs); background: var(--hair) }
|
|
.guard[data-risk="low"] .gauge i:nth-child(1) { background: var(--ok) }
|
|
.guard[data-risk="medium"] .gauge i:nth-child(-n+2) { background: var(--accent-ink) }
|
|
.guard[data-risk="high"] .gauge i { background: var(--err) }
|
|
.guard-why { margin-top: var(--y-close); font-size: var(--fs-ui); line-height: 1.62; color: var(--muted) }
|
|
|
|
.comp { margin-top: 7px }
|
|
.comp-bar { height: 3px; background: color-mix(in srgb, var(--accent) 20%, var(--overlay)); overflow: hidden }
|
|
.comp-bar i { display: block; height: 100%; background: var(--ok); transition: width var(--t-live) var(--ease-out) }
|
|
.comp-n { margin-top: var(--y-close); font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.comp-n b { color: var(--text); font-weight: var(--w-reg); font-variant-numeric: tabular-nums }
|
|
.comp details { margin-top: var(--y-close) }
|
|
.comp-l { margin-top: 5px; display: flex; flex-direction: column; gap: 3px }
|
|
.comp-l .row { display: flex; gap: 8px; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint) }
|
|
.comp-l .row .x { color: var(--del); flex: none; width: 10px }
|
|
.comp-l .row .k { color: var(--ok); flex: none; width: 10px; font-size: var(--fs-micro) }
|
|
|
|
.steps { margin-top: 6px; display: flex; flex-direction: column; gap: 4px }
|
|
.steps .s { display: flex; align-items: baseline; gap: 9px; font-size: var(--fs-ui); color: var(--muted) }
|
|
.steps .s .b { font: var(--w-reg) var(--fs-micro)/1.5 var(--mono); width: 10px; flex: none; color: var(--ghost) }
|
|
.steps .s[data-done] { color: var(--faint) }
|
|
.steps .s[data-done] .b { color: var(--ok) }
|
|
.steps .s[data-now] { color: var(--text) }
|
|
.steps .s[data-now] .b { color: var(--net) }
|
|
|
|
.call > .c:has(.apv:not([data-sealed])) {
|
|
margin: 3px -14px; padding: 13px 14px; border-left: 2px solid var(--warn);
|
|
border-radius: 0 var(--r-lg) var(--r-lg) 0;
|
|
background: linear-gradient(102deg,
|
|
color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%), var(--float);
|
|
box-shadow: var(--shadow-float);
|
|
}
|
|
.apv {
|
|
margin-top: 8px; overflow: hidden; background: none;
|
|
}
|
|
.enterbox[data-enter] .apv { animation: panel var(--t-panel) var(--ease-out) both }
|
|
.apv-hd {
|
|
display: flex; align-items: baseline; gap: 9px; padding: 7px 12px;
|
|
border-bottom: 1px solid var(--hair);
|
|
}
|
|
.apv-hd .tool { font: var(--w-med) var(--fs-meta) var(--ui); letter-spacing: var(--track-lead); color: var(--warn-ink) }
|
|
.apv-hd .sub { font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
.apv-dt { padding: 9px 12px 0; font: var(--w-reg) var(--fs-ui)/1.6 var(--ui); color: var(--muted) }
|
|
|
|
.apv-ft .btn[data-weak] { font-size: var(--fs-micro); color: var(--faint); background: none; border-color: var(--hair) }
|
|
.apv-ft .btn[data-weak]:hover:not(:disabled) { color: var(--muted); border-color: var(--border) }
|
|
.apv-ft .btn[data-deny] { margin-left: auto; color: var(--err-ink); border-color: color-mix(in srgb, var(--err) 34%, transparent) }
|
|
.apv-ft .btn[data-deny]:hover:not(:disabled) { border-color: color-mix(in srgb, var(--err) 58%, transparent) }
|
|
.apv-ft { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 11px 12px }
|
|
.apv-ft .hint { margin-left: auto; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost) }
|
|
|
|
.apv-note { margin-top: var(--y-close); font: var(--w-reg) var(--fs-ui)/1.7 var(--ui); color: var(--faint) }
|
|
.apv-ft .hint b { color: var(--faint); font-weight: var(--w-reg) }
|
|
.apv-done { padding: 10px 12px; font-size: var(--fs-ui); line-height: 1.65; color: var(--muted); border-top: 1px solid var(--hair) }
|
|
.apv-done b { color: var(--text); font-weight: var(--w-med) }
|
|
.apv[data-sealed="deny"] .apv-done b { color: var(--err-ink) }
|
|
.apv[data-sealed] .apv-hd { background: transparent }
|
|
|
|
.ask {
|
|
margin-top: 8px; border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--border));
|
|
border-radius: var(--r-md); overflow: hidden; background: var(--raised);
|
|
box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--accent) 26%, transparent);
|
|
}
|
|
|
|
.ask > .err { padding: 10px 14px; color: var(--err-ink); font: var(--w-med) var(--fs-ui)/1.5 var(--ui); border-bottom: 1px solid var(--hair) }
|
|
|
|
.ask-tabs {
|
|
display: flex; gap: 2px; padding: 8px 10px 0;
|
|
overflow-x: auto; overflow-y: hidden;
|
|
background: var(--accent-wash);
|
|
border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
|
|
}
|
|
.ask-tab {
|
|
flex: none; white-space: nowrap;
|
|
padding: 5px 11px 7px; border: 0; background: none; cursor: pointer;
|
|
font: var(--w-med) var(--fs-ui) var(--ui); color: color-mix(in srgb, var(--accent) 62%, var(--muted));
|
|
border-bottom: 2px solid transparent; margin-bottom: -1px;
|
|
}
|
|
.ask-tab:hover { color: var(--accent-ink) }
|
|
.ask-tab[aria-selected="true"] { color: var(--accent-ink); border-bottom-color: var(--accent) }
|
|
.ask-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px }
|
|
.ask-tab .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-ink); display: inline-block; margin-left: 5px; opacity: 0 }
|
|
.ask-tab[data-answered] .dot { opacity: 1 }
|
|
|
|
.ask-pane { padding: 13px 13px 0; display: none }
|
|
.ask-pane[data-on] { display: block }
|
|
.ask-q { font: var(--w-med) var(--fs-ui)/1.5 var(--ui); color: var(--text); margin-bottom: 3px }
|
|
.ask-hint { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint); margin-bottom: 10px }
|
|
|
|
.opts { display: flex; flex-direction: column }
|
|
|
|
.opt, .prow {
|
|
display: flex; gap: 10px; padding: 10px 12px; text-align: left; width: 100%;
|
|
border: 0; border-top: 1px solid var(--hair); background: transparent;
|
|
cursor: pointer; font: inherit; color: inherit;
|
|
transition: background var(--m-line), box-shadow var(--m-line);
|
|
}
|
|
|
|
.prow { align-items: center; margin-top: 6px }
|
|
.opt:last-of-type, .prow:last-of-type { border-bottom: 1px solid var(--hair) }
|
|
.opt:hover, .prow:hover { background: var(--overlay) }
|
|
.opt:focus-visible, .prow:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px }
|
|
.opt[data-on], .prow[data-on] { background: var(--accent-wash); box-shadow: inset 2px 0 var(--accent) }
|
|
|
|
.opt .mark, .prow .mark {
|
|
width: 14px; height: 14px; flex: none; margin-top: 2px;
|
|
border: 1.5px solid var(--ghost); border-radius: 50%;
|
|
display: grid; place-items: center; transition: border-color var(--m-line), background var(--m-line);
|
|
}
|
|
.opt[data-multi] .mark { border-radius: var(--r-xs) }
|
|
.opt[data-on] .mark, .prow[data-on] .mark { border-color: var(--accent); background: var(--accent) }
|
|
.opt .mark::after, .prow .mark::after {
|
|
content: ""; width: 5px; height: 5px; border-radius: inherit;
|
|
background: var(--accent-fg); opacity: 0; transition: opacity var(--m-line);
|
|
}
|
|
.opt[data-multi] .mark::after { width: 7px; height: 4px; border-radius: 0; background: none;
|
|
border-left: 1.5px solid var(--accent-fg); border-bottom: 1.5px solid var(--accent-fg);
|
|
transform: rotate(-45deg) translate(1px, -1px) }
|
|
.opt[data-on] .mark::after, .prow[data-on] .mark::after { opacity: 1 }
|
|
|
|
.opt .txt, .prow .tx { min-width: 0 }
|
|
|
|
.prow:has(> .seg) > .tx { flex: none }
|
|
.prow > .seg { flex: 0 1 auto; min-width: 0 }
|
|
.opt .lb, .prow .lb { display: flex; align-items: baseline; gap: 8px; font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.opt .rec { font: var(--w-med) var(--fs-micro) var(--mono); letter-spacing: var(--track-cap); text-transform: uppercase; color: var(--accent-ink); flex: none }
|
|
.opt .ds, .prow .ds { display: block; margin-top: 3px; font-size: var(--fs-ui); line-height: 1.55; color: var(--muted) }
|
|
.opt .ds code, .prow .ds code { font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--text) }
|
|
|
|
.opt-other .lb { color: var(--muted) }
|
|
.opt-other[data-on] .lb { color: var(--text) }
|
|
|
|
.other-wrap { margin-top: 8px }
|
|
.ask[data-sealed] .other-wrap:not([data-on]) { display: none }
|
|
.other-wrap input, .other-wrap textarea {
|
|
width: 100%; padding: 9px 11px; border-radius: var(--r-sm);
|
|
border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--border));
|
|
background: var(--surface); color: var(--text);
|
|
font: var(--w-reg) var(--fs-ui) var(--ui); outline: none;
|
|
}
|
|
.other-wrap textarea { resize: vertical; min-height: 120px; }
|
|
.other-wrap input::placeholder, .other-wrap textarea::placeholder { color: var(--ghost) }
|
|
.other-wrap input:focus, .other-wrap textarea:focus { border-color: var(--accent) }
|
|
.ask-foot { display: flex; align-items: center; gap: 12px; padding: 13px }
|
|
.ask-foot .dismiss {
|
|
margin-left: auto; background: none; border: 0; cursor: pointer;
|
|
color: var(--faint); font: var(--w-reg) var(--fs-ui) var(--ui);
|
|
text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;
|
|
}
|
|
.ask-foot .dismiss:hover { color: var(--muted) }
|
|
.ask-foot .dismiss:disabled { opacity: .5; cursor: default }
|
|
.ask-foot .dismiss:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs) }
|
|
|
|
.ask[data-sealed] .opt { cursor: default; opacity: .45 }
|
|
.ask[data-sealed] .opt[data-on] { opacity: 1 }
|
|
.ask[data-sealed] .opt:hover { border-color: var(--border) }
|
|
.ask[data-sealed] .opt[data-on]:hover { border-color: var(--accent) }
|
|
.ask[data-sealed] .ask-hint { opacity: .5 }
|
|
.ask[data-sealed] .other-wrap input, .ask[data-sealed] .other-wrap textarea { opacity: .8 }
|
|
.ask[data-sealed] .ask-tab { cursor: pointer }
|
|
|
|
.ask-done {
|
|
padding: 11px 13px; font-size: var(--fs-ui); line-height: 1.7; color: var(--muted);
|
|
border-top: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
|
|
background: var(--accent-wash);
|
|
}
|
|
.ask-done b { color: var(--text); font-weight: var(--w-med) }
|
|
.ask-done[data-recorded] { white-space: pre-line; color: var(--text) }
|
|
|
|
.dropzone { display: contents }
|
|
|
|
.pane::after {
|
|
content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
|
|
background: color-mix(in srgb, var(--page) 74%, transparent);
|
|
opacity: 0; transition: opacity var(--m-line) ;
|
|
}
|
|
.pane[data-intake]::after { opacity: 1 }
|
|
|
|
.pane[data-intake] .compose {
|
|
position: relative; z-index: 4;
|
|
transform: translateY(-2px);
|
|
transition: transform var(--m-line) , box-shadow var(--m-line) ;
|
|
}
|
|
.pane[data-intake="attach"] .compose { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) }
|
|
.pane[data-intake="attach"] .compose::after { border-color: var(--accent) }
|
|
.pane[data-intake="ref"] .compose { box-shadow: 0 0 0 3px color-mix(in srgb, var(--halo) 22%, transparent) }
|
|
.pane[data-intake="ref"] .compose::after { border-color: var(--halo) }
|
|
.pane[data-intake="insert"] .compose { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent) }
|
|
.pane[data-intake="insert"] .compose::after { border-color: var(--ok) }
|
|
|
|
.pane[data-intake="reject"] .compose { transform: none; box-shadow: none }
|
|
|
|
.intake {
|
|
margin: 0 0 7px; padding: 0 2px; font: var(--w-med) var(--fs-ui) var(--ui);
|
|
animation: intakein var(--m-line) both;
|
|
}
|
|
.intake[data-tone="attach"] { color: var(--accent-ink) }
|
|
.intake[data-tone="ref"] { color: var(--net) }
|
|
.intake[data-tone="insert"] { color: var(--ok-ink) }
|
|
.intake[data-tone="reject"] { color: var(--faint) }
|
|
@keyframes intakein { from { opacity: 0; transform: translateY(3px) } to { opacity: 1; transform: none } }
|
|
|
|
.shots {
|
|
list-style: none; margin: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 7px;
|
|
padding: 0 2px 8px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin;
|
|
}
|
|
.shot {
|
|
display: inline-flex; align-items: center; gap: 8px; flex: none; max-width: min(310px, 78vw);
|
|
padding: 4px 4px 4px 5px;
|
|
border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--raised);
|
|
animation: shotin var(--m-line) both; animation-delay: calc(var(--i, 0) * 45ms);
|
|
}
|
|
.shot[data-state="adding"] { border-style: dashed; color: var(--faint) }
|
|
.shot[data-state="failed"] { border-color: color-mix(in srgb, var(--err) 42%, var(--border)) }
|
|
@keyframes shotin { from { opacity: 0; transform: scale(.94) } to { opacity: 1; transform: none } }
|
|
.shot .thumb {
|
|
width: 30px; height: 30px; flex: none; border-radius: var(--r-lg); background: var(--overlay);
|
|
background-size: cover; background-position: center;
|
|
}
|
|
.shot .thumb > span { width: 100%; height: 100%; border-radius: inherit; background-size: cover; background-position: center }
|
|
.shot .glyph {
|
|
width: 30px; height: 30px; flex: none; border-radius: var(--r-lg); display: grid; place-items: center;
|
|
background: color-mix(in srgb, var(--net) 12%, transparent); color: var(--net);
|
|
font: var(--w-med) var(--fs-micro) var(--mono); letter-spacing: var(--track-cap);
|
|
}
|
|
.shot .meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-right: 2px }
|
|
.shot .nm { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--text) }
|
|
.shot .sz { font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--ghost) }
|
|
.shot .sz.live { color: var(--net) }
|
|
|
|
.shot .undo {
|
|
align-self: flex-start; border: 0; background: none; padding: 0; cursor: pointer;
|
|
font: var(--w-reg) var(--fs-micro) var(--ui); color: var(--faint); text-decoration: underline;
|
|
text-decoration-style: dotted; text-underline-offset: 2px;
|
|
}
|
|
.shot .undo:hover { color: var(--accent-ink) }
|
|
.shot .retry {
|
|
align-self: flex-start; border: 0; background: none; padding: 0; cursor: pointer;
|
|
color: var(--err-ink); font: var(--w-med) var(--fs-micro) var(--ui);
|
|
}
|
|
.shot .why {
|
|
max-width: 34ch; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
|
|
font: var(--w-reg) var(--fs-micro)/1.45 var(--ui); color: var(--err-ink); overflow-wrap: anywhere;
|
|
}
|
|
.shot .retry:hover { text-decoration: underline; text-underline-offset: 2px }
|
|
.shot .x {
|
|
width: 22px; height: 22px; flex: none; border: 0; border-radius: var(--r-sm); cursor: pointer;
|
|
background: transparent; color: var(--ghost); font: var(--w-reg) var(--fs-ui)/1 var(--mono);
|
|
display: grid; place-items: center; transition: color var(--m-line), background var(--m-line);
|
|
}
|
|
.shot .x:hover { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent) }
|
|
.shot button:focus-visible, .intake:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.shotwarn {
|
|
margin: -2px 2px 8px; font: var(--w-reg) var(--fs-meta)/1.5 var(--ui); color: var(--accent-ink);
|
|
}
|
|
|
|
.compose {
|
|
position: relative; flex: none;
|
|
|
|
margin: 0 auto 18px;
|
|
width: calc(100% - var(--srail-w) * 2 - var(--flow-pad) * 2);
|
|
|
|
--aux-budget: min(calc(34vh / var(--zoom, 1)), 320px); --notes-floor: 9.5rem;
|
|
max-width: calc(var(--doc) - var(--flow-pad) * 2);
|
|
|
|
--pad-x: 15px; --pad-b: 11px;
|
|
border-radius: var(--r-lg); padding: 14px var(--pad-x) var(--pad-b);
|
|
background: linear-gradient(180deg,
|
|
color-mix(in srgb, var(--raised) 94%, var(--text) 6%), var(--raised));
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 18px 38px -30px rgb(0 0 0 / .48);
|
|
transition: box-shadow var(--t-card) var(--ease);
|
|
}
|
|
|
|
.composeaux {
|
|
display: flex; flex-direction: column; min-height: 0; overflow: hidden;
|
|
max-height: max(calc(var(--aux-budget) - max(calc(var(--aux-budget) * .28), var(--notes-floor))), 3.5rem);
|
|
}
|
|
.composeaux > * { min-height: 0 }
|
|
|
|
.composenotes {
|
|
max-height: max(calc(var(--aux-budget) * .28), var(--notes-floor));
|
|
overflow-y: auto; overscroll-behavior: contain;
|
|
}
|
|
|
|
.compose::after {
|
|
content: ""; position: absolute; inset: 0; border-radius: inherit;
|
|
border: 1px solid var(--border); pointer-events: none;
|
|
transition: border-color var(--m-card);
|
|
}
|
|
.compose:hover::after { border-color: color-mix(in srgb, var(--accent) 22%, var(--border)) }
|
|
.compose:focus-within::after { border-color: color-mix(in srgb, var(--accent) 52%, var(--border)) }
|
|
|
|
.compose:focus-within {
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, .13),
|
|
0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent),
|
|
0 14px 34px -22px color-mix(in srgb, var(--accent) 50%, transparent);
|
|
}
|
|
|
|
.pane[data-run="running"] .compose:focus-within {
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, .13),
|
|
0 0 0 3px color-mix(in srgb, var(--net) 10%, transparent),
|
|
0 14px 34px -22px color-mix(in srgb, var(--net) 42%, transparent);
|
|
}
|
|
.pane[data-run="running"] .compose:focus-within::after {
|
|
border-color: color-mix(in srgb, var(--net) 55%, var(--border));
|
|
}
|
|
|
|
.glowring {
|
|
position: absolute; inset: -1px; border-radius: calc(var(--r-lg) + 1px); padding: 1px;
|
|
pointer-events: none; overflow: hidden; opacity: 0;
|
|
transition: opacity var(--m-panel);
|
|
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
|
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
}
|
|
|
|
.pane[data-run="running"] .glowring { opacity: 1; --glow: var(--net) }
|
|
.pane[data-run="halt"] .compose::after { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)) }
|
|
|
|
.pane[data-run="halt"]:has(.apv:not([data-sealed]), .ask) .compose:not(:focus-within)::after {
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.glowring i {
|
|
position: absolute; width: 150px; height: 150px;
|
|
background: radial-gradient(circle closest-side,
|
|
var(--glow) 0%,
|
|
color-mix(in srgb, var(--glow) 42%, transparent) 38%,
|
|
transparent 72%);
|
|
offset-path: border-box;
|
|
offset-distance: 0%;
|
|
animation: trace 3.4s linear infinite;
|
|
|
|
animation-play-state: paused;
|
|
}
|
|
.pane[data-run="running"] .glowring i { animation-play-state: running }
|
|
@keyframes trace { to { offset-distance: 100% } }
|
|
|
|
@supports not (offset-path: border-box) {
|
|
.glowring { display: none }
|
|
.pane[data-run="running"] .compose::after { border-color: var(--net) }
|
|
.pane[data-run="halt"] .compose::after { border-color: var(--accent) }
|
|
}
|
|
|
|
.compose textarea {
|
|
width: 100%; border: 0; background: transparent; color: var(--text);
|
|
font-family: var(--ui); font-size: var(--read, var(--fs-lead)); font-weight: var(--w-reg); line-height: 1.6;
|
|
resize: none; outline: none; padding: 0;
|
|
max-height: min(calc(var(--read, 15px) * 14.4), calc(32vh / var(--zoom, 1)));
|
|
overflow-x: hidden; overflow-y: auto;
|
|
}
|
|
.compose textarea::placeholder { color: var(--ghost) }
|
|
|
|
.fmain { display: grid; grid-template-columns: 13px minmax(0, 1fr); gap: 0 14px; align-items: start }
|
|
.prompt {
|
|
justify-self: center; line-height: 1.6; color: var(--ghost);
|
|
font: var(--w-semi) var(--fs-lead) var(--mono);
|
|
-webkit-user-select: none; user-select: none;
|
|
transition: color var(--t-card) var(--ease), transform var(--m-card) ;
|
|
}
|
|
.compose:focus-within .prompt { color: var(--accent-ink); transform: translateX(2px) }
|
|
.composeguide {
|
|
display: flex; align-items: center; gap: 6px 14px; min-height: 18px; margin: 7px 1px 0 27px;
|
|
color: var(--ghost); font: var(--w-reg) var(--fs-meta) var(--ui); -webkit-user-select: none; user-select: none;
|
|
}
|
|
.composecaps { display: inline-flex; align-items: center; gap: 12px }
|
|
.composecaps > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap }
|
|
.composecaps kbd {
|
|
min-width: 17px; padding: 1px 4px; border: 1px solid var(--hair); border-radius: var(--r-xs);
|
|
background: var(--overlay); color: var(--muted); font: var(--w-med) var(--fs-micro)/1.35 var(--mono); text-align: center;
|
|
}
|
|
.composehint { margin-left: auto; white-space: nowrap }
|
|
.compose:focus-within .composecaps, .compose:focus-within .composehint { color: var(--faint) }
|
|
.fcount {
|
|
flex: none; white-space: nowrap; padding-left: 10px; border-left: 1px solid var(--hair);
|
|
color: var(--faint); font: var(--w-reg) var(--fs-micro) var(--ui); font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.compose .row { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
|
margin: 11px calc(var(--pad-x) * -1) calc(var(--pad-b) * -1); padding: 8px 12px;
|
|
background: color-mix(in oklab, var(--raised) 72%, var(--page));
|
|
border-top: 1px solid var(--hair);
|
|
|
|
border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
|
|
-webkit-user-select: none; user-select: none }
|
|
.compose .row .go { margin-left: auto }
|
|
.turntools { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap }
|
|
.turntools > .picker:first-of-type { min-width: 0 }
|
|
.turntools > .picker:first-of-type > .mode { max-width: 100%; min-width: 0 }
|
|
.turntools > .picker:first-of-type .nm { flex: 1; min-width: 0 }
|
|
.go { display: inline-flex; align-items: center; gap: 7px; flex: none }
|
|
|
|
.compose .row > * { position: relative; z-index: 1; animation: rowin var(--m-panel) both }
|
|
@keyframes rowin { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
|
|
|
|
.compose .row [data-pending] { pointer-events: none; opacity: .5; transition: opacity var(--m-line) }
|
|
|
|
.compose .row:has([data-pending])::after {
|
|
content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--net), transparent);
|
|
background-size: 34% 100%; background-repeat: no-repeat;
|
|
animation: rowsweep 1.1s linear infinite;
|
|
}
|
|
@keyframes rowsweep { from { background-position: -34% 0 } to { background-position: 134% 0 } }
|
|
|
|
.policy .vl { font-family: var(--ui); font-size: var(--fs-ui); animation: polval var(--m-line) both }
|
|
|
|
.policy[data-quiet] .mode { border-color: transparent; color: var(--faint) }
|
|
.policy[data-quiet] .mode:hover,
|
|
.policy[data-quiet] .mode[aria-expanded="true"] { border-color: var(--border); color: var(--text) }
|
|
|
|
.policy .vl .polrisk { color: var(--err-ink); font-weight: var(--w-med) }
|
|
.policy .vl .polwarn { margin-right: 4px; font-style: normal; display: inline-grid; vertical-align: -1.5px }
|
|
.policy .vl .polwarn svg, .cachemoved i svg {
|
|
width: 12px; height: 12px; fill: none; stroke: currentColor;
|
|
stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
|
|
.polmenu .seg:has(button[data-value="yolo"][aria-pressed="true"]) {
|
|
background: color-mix(in srgb, var(--err) 13%, var(--overlay));
|
|
}
|
|
.polmenu .seg button[data-value="yolo"][aria-pressed="true"] {
|
|
color: var(--err-ink);
|
|
box-shadow: var(--lit), 0 0 0 1px color-mix(in srgb, var(--err) 42%, transparent);
|
|
}
|
|
@keyframes polval { from { opacity: 0 } to { opacity: 1 } }
|
|
|
|
.polmenu {
|
|
min-width: 296px; padding: 13px 14px 12px; left: auto; right: 0;
|
|
display: flex; flex-direction: column; gap: 16px;
|
|
transform-origin: bottom right; transition-duration: var(--t-card);
|
|
}
|
|
.polmenu .note { margin: 0; font: var(--w-reg) var(--fs-meta)/1.6 var(--ui); color: var(--faint) }
|
|
|
|
.seg button[data-asking] { color: var(--text); box-shadow: inset 0 -1.5px 0 var(--accent) }
|
|
.seg button:disabled:not([data-asking]) { color: var(--ghost) }
|
|
.btn.send { display: inline-flex; align-items: center; gap: 6px; position: relative; overflow: hidden }
|
|
|
|
.btn.send::before {
|
|
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
|
|
background: linear-gradient(105deg, transparent 34%, rgb(255 255 255 / .36) 50%, transparent 66%);
|
|
background-size: 250% 100%; background-position: 200% 0;
|
|
}
|
|
.btn.send:not(:disabled):hover::before { animation: sendsheen .7s var(--ease-out) }
|
|
@keyframes sendsheen { from { opacity: 1; background-position: 200% 0 } to { opacity: 1; background-position: -60% 0 } }
|
|
.btn.send .ic { display: grid; width: 13px; height: 13px; flex: none }
|
|
.btn.send .ic > svg, .btn.stop .ic > svg {
|
|
width: 13px; height: 13px; fill: none; stroke: currentColor;
|
|
stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.btn.stop { display: inline-flex; align-items: center; gap: 6px }
|
|
.btn.stop .ic { display: grid; width: 13px; height: 13px; flex: none }
|
|
.btn.stop .ic > svg { fill: currentColor; stroke: none }
|
|
.btn.stop:hover { border-color: var(--err); color: var(--err-ink) }
|
|
|
|
.pane[data-run="running"] .btn.send:disabled { display: none }
|
|
|
|
.pill {
|
|
margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none;
|
|
padding: 3px 10px; border-radius: var(--r-pill); background: var(--overlay);
|
|
font: var(--w-med) var(--fs-meta) var(--ui); color: var(--faint);
|
|
}
|
|
.pill i { width: 5px; height: 5px; border-radius: var(--r-pill); background: currentColor }
|
|
.pill[data-tone="net"] { background: var(--net-wash); color: var(--net) }
|
|
.pill[data-tone="ok"] { color: var(--ok-ink) }
|
|
.pill[data-tone="accent"] { background: var(--accent-wash); color: var(--accent-ink) }
|
|
.pill[data-tone="warn"] { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn-ink) }
|
|
.pill[data-tone="net"] i { box-shadow: 0 0 0 2px color-mix(in srgb, var(--net) 14%, transparent) }
|
|
@media (hover: hover) { .tk-row:hover { background: var(--overlay); color: var(--text) } }
|
|
@container (max-width: 620px) { .tk-acts { grid-template-columns: minmax(0, 1fr) } }
|
|
|
|
.rail > .wsfind { width: calc(var(--rail-open) - 24px) }
|
|
|
|
.wsfind input::-webkit-search-cancel-button,
|
|
.wsfind input::-webkit-search-decoration { -webkit-appearance: none; appearance: none }
|
|
.wsfind {
|
|
display: flex; align-items: center; gap: 7px; margin: 3px 12px 10px; padding: 7px 9px;
|
|
border: 1px solid var(--border); border-radius: var(--r-md); background: var(--raised); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2);
|
|
transition: border-color var(--t-line) var(--ease);
|
|
}
|
|
.wsfind:focus-within { border-color: var(--focus) }
|
|
.wsfind svg { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--ghost); stroke-width: 1.5; stroke-linecap: round }
|
|
|
|
.wsfind input {
|
|
flex: 1; width: 0; min-width: 0; border: 0; background: none; outline: 0; color: var(--text);
|
|
font: var(--w-reg) var(--fs-ui) var(--ui);
|
|
}
|
|
.wsfind input::placeholder { color: var(--ghost) }
|
|
.wsfind kbd { flex: none; font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--faint) }
|
|
.wsfind .clr { flex: none; border: 0; background: none; cursor: pointer; color: var(--ghost); font-size: var(--fs-ui); line-height: 1; padding: 0 2px }
|
|
.wsfind .clr:hover { color: var(--text) }
|
|
|
|
/* Quiet, not absent. A control that exists only under the pointer is one
|
|
nobody finds, and the row it sits on is where a person looks for it. */
|
|
.reask-open {
|
|
position: relative; flex: none; display: inline-flex; align-items: center; gap: 4px;
|
|
border: 0; background: transparent; color: var(--faint); cursor: pointer;
|
|
font: var(--w-med) var(--fs-micro) var(--ui); padding: 4px 8px; border-radius: var(--r-sm); white-space: nowrap;
|
|
opacity: .58; transition: opacity var(--m-line), background var(--m-line), color var(--m-line);
|
|
}
|
|
.reask-open .studio-icon { width: 12px; height: 12px }
|
|
.call > .c:hover .reask-open, .call > .c:focus-within .reask-open { opacity: 1; background: var(--overlay) }
|
|
.reask-open::after { content: ""; position: absolute; inset: -5px -2px }
|
|
.reask-open:hover { background: var(--border); color: var(--text) }
|
|
.reask-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
|
|
|
|
.reask { display: flex; flex-direction: column; gap: 9px; margin-top: 4px }
|
|
.reask textarea {
|
|
width: 100%; box-sizing: border-box; resize: vertical; min-height: 60px; max-height: min(60vh, 28rem); max-height: min(60dvh, 28rem);
|
|
border: 1px solid var(--border); border-radius: var(--r-md); background: var(--raised); color: var(--text);
|
|
padding: 10px 12px; font: var(--w-reg) var(--fs-ui)/1.62 var(--ui); outline: 0;
|
|
}
|
|
.reask textarea:focus { border-color: var(--focus) }
|
|
.reask-ft { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
|
|
.reask-ft .dismiss {
|
|
background: none; border: 0; cursor: pointer; color: var(--faint); font: var(--w-reg) var(--fs-ui) var(--ui);
|
|
text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;
|
|
}
|
|
.reask-ft .dismiss:hover { color: var(--muted) }
|
|
.reask-ft .hint { margin-left: auto; font: var(--w-reg) var(--fs-micro) var(--ui); color: var(--ghost) }
|
|
|
|
.findhost { position: relative; height: 0; z-index: 6 }
|
|
.tfind {
|
|
position: absolute; top: 10px; right: calc(var(--srail-w) + 12px);
|
|
display: flex; align-items: center; gap: 6px; padding: 6px 7px 6px 9px;
|
|
border: 1px solid var(--border); border-radius: var(--r-md);
|
|
background: var(--float); box-shadow: var(--shadow-float);
|
|
}
|
|
.tfind:focus-within { border-color: var(--focus) }
|
|
.tfind svg { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--ghost); stroke-width: 1.5; stroke-linecap: round }
|
|
.tfind input::-webkit-search-cancel-button,
|
|
.tfind input::-webkit-search-decoration { -webkit-appearance: none; appearance: none }
|
|
.tfind input {
|
|
flex: none; width: 190px; min-width: 0; border: 0; background: none; outline: 0; color: var(--text);
|
|
font: var(--w-reg) var(--fs-ui) var(--ui);
|
|
}
|
|
.tfind input::placeholder { color: var(--ghost) }
|
|
.tfind .n {
|
|
flex: none; min-width: 52px; text-align: right; font: var(--w-reg) var(--fs-micro) var(--mono);
|
|
color: var(--faint); font-variant-numeric: tabular-nums;
|
|
}
|
|
.tfind .n[data-empty] { color: var(--muted) }
|
|
.tfind .st {
|
|
flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
|
|
border: 0; border-radius: var(--r-xs); background: none; cursor: pointer; color: var(--faint);
|
|
}
|
|
.tfind .st svg { stroke: currentColor }
|
|
.tfind .st:hover:not(:disabled) { background: var(--float-hi); color: var(--text) }
|
|
.tfind .st:disabled { opacity: .4; cursor: default }
|
|
.tfind .clr {
|
|
flex: none; border: 0; background: none; cursor: pointer; color: var(--ghost);
|
|
font-size: var(--fs-ui); line-height: 1; padding: 0 3px;
|
|
}
|
|
.tfind .clr:hover { color: var(--text) }
|
|
@container conversation (max-width: 460px) {
|
|
.tfind { right: 12px; left: 12px }
|
|
.tfind input { flex: 1; width: 0 }
|
|
}
|
|
|
|
::highlight(rx-find) { background-color: color-mix(in srgb, var(--warn) 26%, transparent); color: var(--text) }
|
|
::highlight(rx-find-now) { background-color: var(--accent); color: var(--accent-fg) }
|
|
|
|
.acctrow {
|
|
display: flex; align-items: center; gap: 9px; width: 100%; flex: none; text-align: left;
|
|
margin-top: auto; padding: 9px 11px; border: 0; border-top: 1px solid var(--hair);
|
|
background: none; cursor: pointer; transition: background var(--t-line) var(--ease);
|
|
}
|
|
.acctrow:hover { background: var(--overlay) }
|
|
.acctrow:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px }
|
|
.acctrow .ini {
|
|
width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill);
|
|
background: var(--accent-wash); color: var(--accent-ink); font: var(--w-semi) var(--fs-ui) var(--ui);
|
|
}
|
|
.acctrow .ini[data-off] { background: var(--overlay); color: var(--faint) }
|
|
.acctrow .who { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
|
|
.acctrow .who .n { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
|
|
.acctrow .who .d {
|
|
font: var(--w-reg) var(--fs-meta)/1.45 var(--ui); color: var(--ghost);
|
|
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
|
|
}
|
|
|
|
.nav {
|
|
display: flex; flex-direction: column; align-items: center; gap: 2px;
|
|
padding: 10px 0 12px; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--page) 82%, var(--surface));
|
|
}
|
|
.navgrp { display: flex; flex-direction: column; gap: 2px }
|
|
.navgrp.foot { margin-top: auto }
|
|
.navbtn {
|
|
position: relative; width: 38px; height: 38px; display: grid; place-items: center;
|
|
border: 0; border-radius: var(--r-md); background: none; cursor: pointer; color: var(--ghost);
|
|
transition: color var(--t-line) var(--ease), background var(--t-line) var(--ease);
|
|
}
|
|
.navbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
|
|
.navbtn:hover { color: var(--text); background: var(--raised); box-shadow: var(--lit) }
|
|
.navbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px }
|
|
|
|
.navbtn[aria-current] { color: var(--text); background: var(--raised); box-shadow: var(--lit), inset 0 0 0 1px var(--hair) }
|
|
.navbtn[aria-current]::before { content: ""; position: absolute; left: -7px; top: 9px; bottom: 9px; width: 2px; border-radius: var(--r-pill); background: var(--muted) }
|
|
.navhint { position: absolute; left: calc(100% + 10px); top: 50%; z-index: 40; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--float); box-shadow: var(--shadow-float); color: var(--text); font: var(--w-med) var(--fs-ui) var(--ui); white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-3px, -50%); transition: opacity var(--m-line), transform var(--m-line) }
|
|
.navbtn:hover .navhint, .navbtn:focus-visible .navhint { opacity: 1; transform: translate(0, -50%) }
|
|
|
|
.side { border-left: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0 }
|
|
|
|
.side .scroll { padding: 13px 15px 24px; display: flex; flex-direction: column; gap: 22px }
|
|
.block { display: flex; flex-direction: column; gap: 10px }
|
|
.side .block { padding: 0 3px; gap: 9px }
|
|
.block:has(.empty) { gap: 4px }
|
|
|
|
.dgrp { display: flex; flex-direction: column; gap: 7px; padding: 11px 2px 0 }
|
|
.side .scroll > *:first-child { padding-top: 4px }
|
|
|
|
.side .more > summary {
|
|
list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
|
|
padding: 10px 0 9px; font: var(--w-med) var(--fs-ui) var(--ui); color: var(--faint);
|
|
transition: color var(--m-line);
|
|
}
|
|
.side .more > summary::-webkit-details-marker { display: none }
|
|
|
|
.side .more > summary::after {
|
|
content: ""; margin-left: auto; width: 5px; height: 5px; margin-right: 3px;
|
|
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
|
|
transform: rotate(-45deg); transition: transform var(--m-card) ;
|
|
}
|
|
.side .more[open] > summary::after { transform: rotate(45deg) }
|
|
.side .more > summary:hover { color: var(--text) }
|
|
.side .more > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs) }
|
|
|
|
.side .more[open] { display: flex; flex-direction: column; gap: 10px }
|
|
.side .more > * + * { border-top: 1px solid var(--border) }
|
|
.dgrp-h {
|
|
margin: 0 0 3px; display: flex; align-items: baseline; gap: 8px;
|
|
font: var(--w-semi) var(--fs-ui)/1.5 var(--ui); color: var(--text); letter-spacing: var(--track-tight);
|
|
}
|
|
.dgrp-h .a { margin-left: auto; font: var(--w-reg) var(--fs-micro) var(--ui); color: var(--ghost) }
|
|
|
|
.side .lbl, .dgrp-h {
|
|
font: var(--w-semi) var(--fs-micro) var(--ui); letter-spacing: .14em;
|
|
text-transform: uppercase; color: var(--ghost);
|
|
}
|
|
|
|
.side .lbl .c {
|
|
font: var(--w-reg) var(--fs-micro) var(--mono); letter-spacing: 0; text-transform: none;
|
|
}
|
|
|
|
.dgrp-h { margin-bottom: 8px }
|
|
|
|
.rail .scroll, .side .scroll { scrollbar-gutter: stable }
|
|
|
|
.drow { display: flex; align-items: baseline; gap: 10px; min-height: 21px }
|
|
.drow .k { color: var(--faint); font: var(--w-reg) var(--fs-ui) var(--ui) }
|
|
.drow .v {
|
|
margin-left: auto; display: flex; align-items: baseline; gap: 9px; color: var(--text);
|
|
font: var(--w-med) var(--fs-ui) var(--mono); font-variant-numeric: tabular-nums;
|
|
letter-spacing: var(--track-tight);
|
|
}
|
|
.drow[data-tone="err"] .v { color: var(--err-ink) }
|
|
.drow[data-tone="warn"] .v { color: var(--warn-ink) }
|
|
.drow[data-tone="accent"] .v { color: var(--accent-ink) }
|
|
|
|
.drow[data-tone="act"] .k { color: var(--accent-ink) }
|
|
.drow[data-tone="act"] .v { color: var(--accent-ink); font-weight: var(--w-med) }
|
|
|
|
.wallet { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--hair) }
|
|
|
|
.wallet .walletk {
|
|
all: unset; cursor: pointer; color: var(--faint); white-space: nowrap;
|
|
font: var(--w-reg) var(--fs-ui) var(--ui);
|
|
}
|
|
|
|
.wallet .drow .k { display: flex; align-items: baseline; gap: 6px }
|
|
.wallet .walletk:hover { color: var(--text) }
|
|
.wallet .walletk:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px }
|
|
.drow .v .up { color: var(--faint); font-weight: var(--w-reg) }
|
|
.lk { color: var(--link) }
|
|
|
|
.drow .v .rate { min-width: 112px }
|
|
|
|
.gbar { height: 3px; background: var(--hair); border-radius: var(--r-pill); overflow: hidden }
|
|
.gbar i { display: block; height: 100%; background: var(--faint); border-radius: inherit; transition: width var(--t-live) var(--ease) }
|
|
.gbar[data-tone="ok"] i { background: var(--ok) }
|
|
.gbar[data-tone="net"] i { background: var(--net) }
|
|
.gbar[data-tone="accent"] i { background: var(--accent-ink) }
|
|
.msub { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost); font-variant-numeric: tabular-nums }
|
|
|
|
.dgrp .agents { margin-top: 4px }
|
|
|
|
.cachemoved {
|
|
display: flex; align-items: baseline; gap: 5px; margin: 8px 0 0;
|
|
font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--warn-ink);
|
|
}
|
|
.cachemoved i { font-style: normal; display: inline-grid; vertical-align: -1.5px }
|
|
|
|
.bar { display: flex; height: 3px; overflow: hidden; background: var(--hair); gap: 1px }
|
|
.bar i { display: block; transition: flex-grow var(--t-live) var(--ease); position: relative }
|
|
.bar .c { background: var(--ok) } .bar .f { background: var(--overlay) }
|
|
.bar .c::after {
|
|
content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 16px;
|
|
background: linear-gradient(to right, transparent, color-mix(in srgb, #fff 70%, var(--ok)));
|
|
}
|
|
|
|
.legend { display: flex; flex-direction: column; gap: 5px }
|
|
.legend .r { display: flex; align-items: baseline; gap: 8px; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint) }
|
|
.legend .r i { width: 7px; height: 7px; border-radius: var(--r-sm); flex: none }
|
|
.legend .r .n { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted) }
|
|
|
|
.legend .r.aside { margin-top: 3px; padding-top: 7px; border-top: 1px solid var(--hair) }
|
|
|
|
.money { display: flex; align-items: flex-end; justify-content: space-between; gap: 11px; padding-top: 10px; border-top: 1px solid var(--hair) }
|
|
.money .col { display: flex; flex-direction: column; gap: 3px }
|
|
.money .col:last-child { align-items: flex-end; text-align: right }
|
|
.money .col .k { font: var(--w-reg) var(--fs-micro) var(--ui); letter-spacing: var(--track-cap); text-transform: uppercase; color: var(--ghost) }
|
|
.money .col .v { font: var(--w-med) var(--fs-title)/1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: var(--track-tight) }
|
|
.money .col .v.sm { font-size: var(--fs-ui); color: var(--muted) }
|
|
.money .col .note { font: var(--w-reg) var(--fs-micro) var(--ui); color: var(--faint) }
|
|
|
|
.rate { display: flex; align-items: baseline; gap: 7px; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint) }
|
|
.rate .v { color: var(--ghost); font-variant-numeric: tabular-nums; transition: color var(--m-panel) }
|
|
|
|
.rate[data-live] .v { color: var(--text) }
|
|
.rate .u { color: var(--ghost); font-size: var(--fs-micro) }
|
|
|
|
.spark .line { fill: none; stroke: var(--ghost); stroke-width: 1.2; stroke-linejoin: round; transition: stroke var(--m-panel) }
|
|
.spark .fill { fill: color-mix(in srgb, var(--ghost) 10%, transparent); transition: fill var(--m-panel) }
|
|
.spark .tip { fill: var(--ghost); transition: fill var(--m-panel) }
|
|
.rate .spark { flex: 1; min-width: 34px; height: 18px; margin-inline: 2px; align-self: center; overflow: visible }
|
|
.rate[data-live] .spark .line, .rate[data-live] .spark .tip { stroke: var(--net); fill: var(--net) }
|
|
.rate[data-live] .spark .line { fill: none }
|
|
.rate[data-live] .spark .fill { fill: color-mix(in srgb, var(--net) 11%, transparent) }
|
|
|
|
.planwrap { position: relative }
|
|
|
|
.planwrap .cursor {
|
|
position: absolute; left: 0; top: 0; width: 2px; border-radius: var(--r-xs); background: var(--net);
|
|
transition: transform var(--m-panel) , height var(--m-panel) ;
|
|
}
|
|
.planwrap .cursor[hidden] { display: none }
|
|
.plan .s { display: flex; align-items: baseline; gap: 9px; padding: 6px 0 6px 10px; font-size: var(--fs-ui); color: var(--muted); border-bottom: 1px solid var(--hair); transition: color var(--m-card), opacity var(--m-card), background var(--m-line); border-radius: var(--r-xs) }
|
|
.plan .s:hover { background: var(--overlay) }
|
|
.plan .s:last-child { border-bottom: 0 }
|
|
/* Three states, three shapes: a dotted ring has not started, a turning arc is
|
|
in hand, a filled disc is done. Colour alone would say it to some readers
|
|
and to no one using the window in a bright room. */
|
|
.plan .s .b {
|
|
width: 11px; height: 11px; flex: none; align-self: center; border-radius: 50%;
|
|
border: 1.5px dotted var(--ghost); box-sizing: border-box;
|
|
transition: border-color var(--m-card), background var(--m-card);
|
|
}
|
|
.plan .s[data-now] .b {
|
|
border: 1.5px solid var(--hair); border-top-color: var(--accent); border-right-color: var(--accent);
|
|
animation: plan-turn 820ms linear infinite;
|
|
}
|
|
@keyframes plan-turn { to { transform: rotate(360deg) } }
|
|
.plan .s[data-done] { color: var(--faint) }
|
|
.plan .s[data-done] .b { border: 1.5px solid var(--ok); background: var(--ok) }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.plan .s[data-now] .b { animation: none; border-color: var(--accent) }
|
|
}
|
|
|
|
.plan .s .t .ln, .steps .s .t .ln {
|
|
background: linear-gradient(var(--ghost), var(--ghost)) no-repeat 0 62% / 0 1px;
|
|
-webkit-box-decoration-break: clone;
|
|
box-decoration-break: clone;
|
|
transition: background-size var(--m-panel) ;
|
|
}
|
|
.plan .s[data-done] .t .ln, .steps .s[data-done] .t .ln { background-size: 100% 1px }
|
|
.plan .s[data-now] { color: var(--text) }
|
|
.plan .s[data-now] .b { color: var(--net) }
|
|
.plan .s[data-now] .t { font-weight: var(--w-med) }
|
|
.plan .s .n { margin-left: auto; font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--ghost); flex: none; font-variant-numeric: tabular-nums }
|
|
|
|
.prog2 { display: flex; align-items: center; gap: 9px }
|
|
.prog2 .track { flex: 1; height: 3px; border-radius: var(--r-sm); background: var(--overlay); overflow: hidden }
|
|
.prog2 .track i { display: block; height: 100%; width: 0; background: var(--ok); transition: width var(--t-live) var(--ease) }
|
|
|
|
.agents { display: flex; flex-direction: column; gap: 7px; min-height: 18px }
|
|
.ag { display: flex; align-items: center; gap: 9px; font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--muted); animation: card var(--t-card) var(--ease-out) both }
|
|
.ag .nm { color: var(--text); flex: none } .ag .lbl { display: block; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
.ag .rt { margin-left: auto; font-size: var(--fs-meta); color: var(--ghost); font-variant-numeric: tabular-nums; white-space: nowrap }
|
|
.ag[data-status="done"] .rt { color: var(--ok-ink) }
|
|
.ag[data-status="failed"] .rt { color: var(--warn-ink) }
|
|
|
|
.jobs { display: flex; flex-direction: column; gap: 7px; min-height: 18px }
|
|
.job { display: flex; align-items: center; gap: 8px; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--muted); animation: card var(--t-card) var(--ease-out) both }
|
|
.job .cmd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
.job .job-name { position: relative; min-width: 0; flex: 0 1 auto; display: block }
|
|
.job .job-name > .cmd { display: block; max-width: 100% }
|
|
.job-tip { position: fixed; z-index: 60; width: max-content; max-width: min(420px, 80vw); display: flex; flex-direction: column; gap: 4px; padding: 7px 9px; border: 1px solid var(--hair); border-radius: var(--r-sm); background: var(--raised); box-shadow: 0 4px 14px color-mix(in srgb, var(--text) 12%, transparent); user-select: text; cursor: text; white-space: normal }
|
|
.job-tip .jt-name { color: var(--text); font: var(--w-med) var(--fs-ui)/1.5 var(--ui); overflow-wrap: anywhere }
|
|
.job-tip .jt-cmd { color: var(--muted); font: var(--w-reg) var(--fs-meta)/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere }
|
|
.job .rt { margin-left: auto; color: var(--ghost); font-variant-numeric: tabular-nums; flex: none }
|
|
.job[data-done] { color: var(--faint) }
|
|
|
|
.srvs { display: flex; flex-direction: column; gap: 7px; min-height: 18px }
|
|
|
|
.srvrow {
|
|
display: flex; align-items: center; gap: 8px; width: 100%;
|
|
padding: 4px 7px 5px; border: 0; border-radius: var(--r-sm);
|
|
background: transparent;
|
|
color: inherit; font: inherit; text-align: left; cursor: pointer;
|
|
animation: card var(--t-card) var(--ease-out) both;
|
|
transition: background var(--t-line) var(--ease-out);
|
|
}
|
|
.srvrow:hover { background: var(--overlay) }
|
|
.srvrow:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.srvrow .hd { display: flex; align-items: center; gap: 8px; min-width: 0 }
|
|
.srvrow .pip { background: var(--err) }
|
|
|
|
.srvrow .nm {
|
|
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--text);
|
|
}
|
|
|
|
.srvrow .fix {
|
|
margin-left: auto; flex: none;
|
|
font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--accent-ink);
|
|
}
|
|
.srvrow:hover .fix { text-decoration: underline; text-underline-offset: 2px }
|
|
.srvs .more { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
|
|
.sparkbox { display: grid; gap: 4px; margin-top: 2px }
|
|
.sparkbox .sphd { display: flex; align-items: baseline; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.sparkbox .sphd .m { margin-left: auto; font: var(--w-reg) var(--fs-micro) var(--ui); color: var(--ghost) }
|
|
|
|
.sparkbox .spark { width: 100%; height: 30px; overflow: visible }
|
|
|
|
.files { display: flex; flex-direction: column; min-height: 18px }
|
|
|
|
.file {
|
|
display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
|
|
padding: 5px 6px; margin-inline: -6px; border: 0; border-radius: var(--r-xs);
|
|
background: transparent; font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--muted);
|
|
animation: card var(--t-card) var(--ease-out) both;
|
|
transition: background var(--m-line), color var(--m-line);
|
|
}
|
|
button.file { cursor: pointer }
|
|
button.file:hover { background: var(--overlay); color: var(--text) }
|
|
button.file[data-on] { background: var(--accent-wash); color: var(--accent-ink) }
|
|
button.file:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px }
|
|
|
|
.file .st {
|
|
flex: none; width: 15px; padding: 1px 0; border-radius: var(--r-xs);
|
|
font: var(--w-med) var(--fs-micro) var(--mono); font-style: normal; text-align: center;
|
|
background: var(--overlay); color: var(--faint);
|
|
}
|
|
.file .st[data-s="M"] { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn-ink) }
|
|
.file .st[data-s="A"] { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok-ink) }
|
|
.file .st[data-s="D"] { background: color-mix(in srgb, var(--err) 16%, transparent); color: var(--err-ink) }
|
|
.file .st[data-s="R"] { background: color-mix(in srgb, var(--net) 16%, transparent); color: var(--net) }
|
|
|
|
.file .p { min-width: 0; display: flex; white-space: nowrap; overflow: hidden }
|
|
.file .p .d { color: var(--ghost); min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 9999 auto }
|
|
.file .p .f { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; color: var(--muted) }
|
|
.file .n { margin-left: auto; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; letter-spacing: var(--track-tight); flex: none }
|
|
.file .n .a { color: var(--add) } .file .n .r { color: var(--del) }
|
|
.file .n .mk { margin-right: 6px; color: var(--faint); font-size: var(--fs-micro) }
|
|
|
|
.file[data-fresh] { animation: card var(--t-card) var(--ease-out) both, flash 1s var(--ease-out) .12s }
|
|
@keyframes flash {
|
|
from { background: color-mix(in srgb, var(--accent) 22%, transparent) }
|
|
to { background: transparent }
|
|
}
|
|
.empty { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost) }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.pip, .caret { animation: none !important; opacity: 1 !important }
|
|
.glowring { display: none }
|
|
.pane[data-run="running"] .compose::after { border-color: var(--net) }
|
|
.pane[data-run="halt"] .compose::after { border-color: var(--accent) }
|
|
.call, .nest, .ask, .hits > *, .steps > *, .term-l, .dl, .plan .s, .find,
|
|
.ag, .file, .menu, .nest-ret, .hl .cost, .sym, .pip[data-settled],
|
|
.plan .s[data-done] .b,
|
|
.rmark, .rmark path, .await i, .apv, .guard, .rrow, .shot, .intake { animation: none !important }
|
|
.pane[data-intake] .compose { transform: none !important }
|
|
.rmark path { stroke-dashoffset: 0 !important }
|
|
|
|
.reload, .reload .rdot, .rnote { animation: none !important }
|
|
.pane[data-run="done"] .rmark { animation: none !important; filter: none !important }
|
|
.bar .c::after { display: none }
|
|
.mode .vl, .mode.danger::before,
|
|
.compose .row > *, .call[data-running] > .g .sym,
|
|
.app[data-run="running"] .sessrow[data-on][data-live] .pip { animation: none !important }
|
|
|
|
.gutter[data-edge]::after { animation: edgeflash var(--t-card) var(--ease) }
|
|
@keyframes edgeflash { 0%, 100% { opacity: .9 } 50% { opacity: .25 } }
|
|
|
|
.compose .row:has([data-pending])::after { animation: none; background: var(--net); opacity: .5 }
|
|
.scroll { scroll-behavior: auto }
|
|
.btn:active, .navbtn:active,
|
|
.tab:active, .copy:active,
|
|
.act:active, .chip:active, .scope button:active { transform: none !important }
|
|
* { transition-duration: .01ms !important }
|
|
}
|
|
|
|
[data-fold~="side"] .cols {
|
|
grid-template-columns: var(--nav-w) var(--rail-w) minmax(0, 1fr);
|
|
grid-template-rows: minmax(0, 1fr) auto auto;
|
|
}
|
|
[data-fold~="side"] .side { grid-column: 1 / -1 }
|
|
[data-fold~="side"] .side { border-top: 0 }
|
|
[data-fold~="side"] .flow { padding-inline: 14px }
|
|
[data-fold~="side"] .compose { width: calc(100% - 28px) }
|
|
|
|
[data-fold~="rail"][data-fold~="side"] .pane { --srail-w: 24px }
|
|
[data-fold~="rail"][data-fold~="side"] .srail-m { right: 9px; width: 15px }
|
|
[data-fold~="rail"][data-fold~="side"] .srail-m > i { max-width: 14px !important }
|
|
[data-fold~="rail"][data-fold~="side"] .srail-peek {
|
|
right: 26px; width: min(280px, calc(100vw - 54px));
|
|
}
|
|
[data-fold~="side"] .chrome .goal,
|
|
[data-fold~="side"] .chrome .crumb .sep:last-of-type { display: none }
|
|
[data-fold~="side"] .side { border-left: 0; border-top: 1px solid var(--border); max-height: calc(40vh / var(--zoom, 1)) }
|
|
[data-fold~="side"] .side .scroll { padding: 12px 14px 16px; gap: 16px }
|
|
|
|
[data-fold~="side"] .side > * { width: 100% }
|
|
|
|
[data-fold~="side"] [data-side="on"] .gutter-r { display: none }
|
|
[data-fold~="side"] .app:not([data-side="on"]) .side { display: none }
|
|
|
|
.railveil { display: none }
|
|
[data-fold~="scene"] .cols { grid-template-columns: var(--nav-w) 0 minmax(0, 1fr) var(--side-w) }
|
|
[data-fold~="scene"] :is(.gutter-l, .pane > .gutter-r) { display: none }
|
|
[data-fold~="scene"] .app[data-browser="on"] .pane:has(> .pbody[data-dock]) { grid-template: "nav nav" auto "find find" auto "side side" minmax(0, 1fr) / 0 minmax(0, 1fr) }
|
|
[data-fold~="scene"] .app[data-browser="on"] .pane:has(> .pbody[data-dock]) > :is(.pbody, .compose) { display: none }
|
|
[data-fold~="scene"] .app[data-browser="on"] .pane:has(> .pbody[data-dock]) > .scroll[data-pane="browser"] { border-left: 0 }
|
|
[data-fold~="scene"] .app[data-rail="on"] .railveil {
|
|
display: block; position: fixed; inset: 0; z-index: 11; padding: 0; border: 0;
|
|
background: color-mix(in srgb, #000 34%, transparent); cursor: default;
|
|
}
|
|
[data-fold~="short"] .compose { --aux-budget: min(calc(24vh / var(--zoom, 1)), 176px); --notes-floor: 0px }
|
|
[data-fold~="short"] .compose textarea { max-height: min(calc(var(--read, 15px) * 9.6), calc(24vh / var(--zoom, 1))) }
|
|
[data-fold~="short"] .slashmenu { max-height: min(calc(38vh / var(--zoom, 1)), 220px) }
|
|
[data-fold~="short"][data-fold~="side"] .side { max-height: calc(26vh / var(--zoom, 1)) }
|
|
|
|
.pane { container: conversation / inline-size }
|
|
@container conversation (max-width: 460px) {
|
|
.composeguide { flex-wrap: wrap; gap-block: 5px }
|
|
.composehint { order: 2; width: 100%; margin-left: 0 }
|
|
.fcount { margin-left: auto }
|
|
.call:not([data-k="me"], [data-k="say"], [data-k="ask"]) > .c > .hl { flex-wrap: wrap }
|
|
.call:not([data-k="me"], [data-k="say"], [data-k="ask"]) > .c > .hl .arg { order: 5; flex: 1 0 100% }
|
|
.call:not([data-k="me"], [data-k="say"], [data-k="ask"]) > .c > .hl .cost { margin-left: 0 }
|
|
.ask-foot { flex-direction: column; align-items: stretch; gap: 9px }
|
|
.ask-foot .dismiss { align-self: flex-end; margin-left: 0; white-space: nowrap }
|
|
.ask-foot .btn { order: -1 }
|
|
.apv-ft .btn[data-primary] { flex: 1 0 100% }
|
|
|
|
.apv-ft .btn:not([data-primary]) { flex: 1; align-self: stretch }
|
|
}
|
|
|
|
.onb { position: relative; z-index: 3; width: min(452px, calc(100% - 56px)) }
|
|
.oobe[data-play][data-held] .onb { opacity: 0; animation: onbrise .8s var(--ease-out) 9.9s forwards }
|
|
.onb-card { width: 100%; display: grid; gap: 11px; text-align: left }
|
|
@keyframes onbrise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
|
|
.onb-t { margin: 0; font: var(--w-reg) var(--fs-ui) var(--ui); color: rgb(255 255 255 / .62) }
|
|
.onb-s { margin: -4px 0 2px; font: var(--w-reg) var(--fs-ui)/1.6 var(--ui); color: rgb(255 255 255 / .48) }
|
|
|
|
.onb-field { width: 100%; display: grid; gap: 5px; text-align: left }
|
|
|
|
.onb-field > label {
|
|
display: flex; align-items: center; gap: 6px;
|
|
font: var(--w-reg) var(--fs-meta) var(--mono); color: rgb(255 255 255 / .48); letter-spacing: var(--track-lead);
|
|
}
|
|
.onb-field > label code {
|
|
font: var(--w-reg) var(--fs-micro) var(--mono); color: rgb(255 255 255 / .52);
|
|
padding: 1px 5px; border-radius: var(--r-xs); background: rgb(255 255 255 / .06);
|
|
}
|
|
.onb-field > input {
|
|
width: 100%; padding: 9px 11px; border-radius: var(--r-sm);
|
|
border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .05); color: #fff;
|
|
font: var(--w-reg) var(--fs-ui) var(--mono); outline: none;
|
|
}
|
|
.onb-field > input::placeholder { color: rgb(255 255 255 / .26) }
|
|
.onb-field > input:focus-visible, .onb-chip:focus-visible,
|
|
.onb-go:focus-visible, .onb-pick > .picker > button:focus-visible,
|
|
.onb-getkey:focus-visible, .onb-fix:focus-visible {
|
|
outline: 2px solid #7391FF; outline-offset: 1px;
|
|
}
|
|
|
|
.onb-getkey {
|
|
margin-left: auto; padding: 0; cursor: pointer; letter-spacing: 0;
|
|
font: var(--w-reg) var(--fs-meta) var(--ui); color: rgb(255 255 255 / .5);
|
|
background: none; border: 0; border-bottom: 1px solid rgb(255 255 255 / .2);
|
|
}
|
|
.onb-getkey:hover { color: #FFE0A0; border-bottom-color: rgb(221 161 68 / .6) }
|
|
.onb-err { font: var(--w-reg) var(--fs-ui)/1.6 var(--ui); color: #E4675D; overflow-wrap: anywhere }
|
|
.onb-fix {
|
|
display: block; margin-top: 6px; padding: 4px 10px; cursor: pointer;
|
|
font: var(--w-reg) var(--fs-ui) var(--ui); color: #FFE0A0; border-radius: var(--r-sm);
|
|
background: rgb(221 161 68 / .13); border: 1px solid rgb(221 161 68 / .4);
|
|
}
|
|
.onb-fix:hover { background: rgb(221 161 68 / .2) }
|
|
.onb-go {
|
|
justify-self: start; padding: 9px 20px; font: var(--w-med) var(--fs-ui) var(--ui);
|
|
background: #DDA144; color: #171104; border: 1px solid #DDA144; border-radius: var(--r-sm);
|
|
}
|
|
.onb-go[disabled] { opacity: .45 }
|
|
.onb-note { font: var(--w-reg) var(--fs-meta)/1.6 var(--ui); color: rgb(255 255 255 / .48) }
|
|
|
|
.prefs {
|
|
position: fixed; inset: var(--chrome-h, 39px) 0 0; z-index: 50;
|
|
display: grid; place-items: center; padding: 28px; outline: none;
|
|
|
|
background: color-mix(in srgb, var(--page) 40%, transparent);
|
|
-webkit-backdrop-filter: blur(14px) saturate(.92); backdrop-filter: blur(14px) saturate(.92);
|
|
animation: prefsin var(--t-card) var(--ease-out) both;
|
|
}
|
|
.prefs-sheet {
|
|
width: min(1120px, 100%); height: min(800px, 100%);
|
|
display: flex; flex-direction: column; overflow: hidden;
|
|
border: 1px solid var(--border); border-radius: var(--r-lg);
|
|
background: var(--float); box-shadow: var(--shadow-float);
|
|
animation: sheetin var(--t-panel) var(--ease-spring) both;
|
|
}
|
|
|
|
@keyframes prefsin { from { opacity: 0 } to { opacity: 1 } }
|
|
@keyframes sheetin { from { transform: translateY(14px) scale(.985) } to { transform: none } }
|
|
|
|
@supports (view-transition-name: none) {
|
|
:root { view-transition-name: none }
|
|
.prefs { view-transition-name: prefsveil; animation: none }
|
|
.prefs-sheet { view-transition-name: prefssheet; animation: none }
|
|
[data-vt="prefs"]::view-transition-new(prefsveil) { animation: prefsin var(--m-card) both }
|
|
[data-vt="prefs"]::view-transition-old(prefsveil) { animation: prefsout var(--t-line) var(--ease-in) both }
|
|
[data-vt="prefs"]::view-transition-new(prefssheet) { animation: sheetin var(--t-panel) var(--ease-spring) both }
|
|
[data-vt="prefs"]::view-transition-old(prefssheet) { animation: sheetout var(--t-line) var(--ease-in) both }
|
|
@keyframes prefsout { to { opacity: 0 } }
|
|
@keyframes sheetout { to { opacity: 0; transform: translateY(6px) scale(.992) } }
|
|
}
|
|
|
|
.cpv {
|
|
position: fixed; inset: var(--chrome-h, 39px) 0 0; z-index: 60;
|
|
display: grid; place-items: center; padding: 24px;
|
|
background: color-mix(in srgb, var(--page) 40%, transparent);
|
|
-webkit-backdrop-filter: blur(14px) saturate(.92); backdrop-filter: blur(14px) saturate(.92);
|
|
animation: prefsin var(--t-card) var(--ease-out) both;
|
|
}
|
|
.cpv-sheet {
|
|
width: min(980px, 100%); max-height: min(720px, 100%);
|
|
display: flex; flex-direction: column; overflow: hidden;
|
|
border: 1px solid var(--border); border-radius: var(--r-lg);
|
|
background: var(--float); box-shadow: var(--shadow-float);
|
|
animation: sheetin var(--t-panel) var(--ease-spring) both;
|
|
}
|
|
.cpv-hd {
|
|
flex: none; display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 16px;
|
|
border-bottom: 1px solid var(--hair); background: var(--surface);
|
|
}
|
|
.cpv-hd .p {
|
|
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--text);
|
|
}
|
|
.cpv-hd .esc { margin-left: 5px; font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--ghost) }
|
|
.cpv-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 20px }
|
|
|
|
@supports (view-transition-name: none) {
|
|
.cpv { view-transition-name: cpv; animation: none }
|
|
.cpv-sheet { animation: none }
|
|
[data-vt="cpv"]::view-transition-new(cpv) { animation: prefsin var(--t-card) var(--ease-out) both }
|
|
[data-vt="cpv"]::view-transition-old(cpv) { animation: prefsout var(--t-card) var(--ease-in) both }
|
|
}
|
|
|
|
.cpv-body .dif { margin-top: 0 }
|
|
|
|
.prefs-hd {
|
|
position: relative; flex: none;
|
|
display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 20px;
|
|
border-bottom: 1px solid var(--hair); background: var(--surface);
|
|
}
|
|
|
|
.prefs-hd::after {
|
|
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
|
|
background: linear-gradient(90deg, transparent 4%,
|
|
color-mix(in srgb, var(--accent) 34%, transparent) 50%, transparent 96%);
|
|
}
|
|
.prefs-hd h1 { margin: 0; flex: none; font: var(--w-semi) var(--fs-lead) var(--ui); color: var(--text); letter-spacing: .01em }
|
|
|
|
.prefs-find {
|
|
flex: 1; min-width: 0; max-width: 340px; min-height: 32px; margin-left: auto;
|
|
padding: 7px 12px; border-radius: var(--r-pill);
|
|
border: 1px solid var(--border); background: var(--overlay);
|
|
font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--text);
|
|
transition: border-color var(--m-line), background-color var(--m-line);
|
|
}
|
|
.prefs-find::placeholder { color: var(--ghost) }
|
|
.prefs-find:focus { outline: none; border-color: var(--focus); background: var(--raised) }
|
|
|
|
.prefs-found {
|
|
position: absolute; z-index: 5; top: 100%; right: 16px; width: min(460px, calc(100% - 32px));
|
|
max-height: min(52vh, 420px); overflow-y: auto;
|
|
display: flex; flex-direction: column; padding: 5px;
|
|
border: 1px solid var(--border); border-radius: 0 0 var(--r-md) var(--r-md);
|
|
border-top: 0; background: var(--float); box-shadow: var(--shadow-float);
|
|
animation: card var(--m-line) both;
|
|
}
|
|
.prefs-found button {
|
|
display: flex; align-items: baseline; gap: 9px; padding: 7px 9px;
|
|
border: 0; border-radius: var(--r-xs); background: none; text-align: left; cursor: pointer;
|
|
}
|
|
.prefs-found button:not(:disabled):hover { background: var(--float-hi) }
|
|
.prefs-found button:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px }
|
|
.prefs-found .where { flex: none; font: var(--w-reg) var(--fs-micro) var(--ui); letter-spacing: var(--track-cap); text-transform: uppercase; color: var(--faint) }
|
|
.prefs-found .what { flex: 1; min-width: 0; font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.prefs-found .cost { flex: none; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint) }
|
|
.prefs-found .none { margin: 0; padding: 9px; font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--faint) }
|
|
|
|
.apply {
|
|
margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--hair);
|
|
font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost);
|
|
display: flex; align-items: center; gap: 5px;
|
|
}
|
|
.apply::before {
|
|
content: ""; width: 4px; height: 4px; border-radius: 50%;
|
|
background: color-mix(in srgb, currentColor 70%, transparent);
|
|
}
|
|
.apply[data-apply="runtime-rebuild"]::before { background: color-mix(in srgb, var(--net) 60%, transparent) }
|
|
|
|
.grp[data-landed] { animation: landed .9s var(--ease-out) both }
|
|
@keyframes landed {
|
|
0% { outline-color: color-mix(in srgb, var(--accent) 66%, transparent) }
|
|
100% { outline-color: transparent }
|
|
}
|
|
.prefs-hd p {
|
|
margin: 0; flex: 1; min-width: 0; font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--faint);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.prefs-hd .btn { flex: none; align-self: center }
|
|
.prefs-hd .esc { margin-left: 5px; font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--ghost) }
|
|
|
|
.prefs-body { flex: 1; display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 0 }
|
|
.prefs-nav {
|
|
display: grid; align-content: start; gap: 2px; padding: 14px 10px;
|
|
border-right: 1px solid var(--hair); overflow: auto; background: var(--surface);
|
|
}
|
|
|
|
.prefs-nav .navsec {
|
|
padding: 15px 10px 5px; font: var(--w-reg) var(--fs-micro) var(--ui);
|
|
letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
|
|
}
|
|
.prefs-nav .navsec:first-child { padding-top: 2px }
|
|
|
|
.prefs-nav button {
|
|
position: relative; overflow: hidden;
|
|
display: flex; align-items: center; gap: 9px;
|
|
min-height: 34px; text-align: left; padding: 7px 10px; border: 0; border-radius: var(--r-sm); cursor: pointer;
|
|
background: transparent; color: var(--text); font: var(--w-reg) var(--fs-ui) var(--ui);
|
|
transition: background var(--m-line), color var(--m-line);
|
|
}
|
|
.prefs-nav button svg {
|
|
width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor;
|
|
stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round;
|
|
color: var(--muted); transition: color var(--m-line);
|
|
}
|
|
|
|
.prefs-nav .nm { flex: 1 1 auto; min-width: 6.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
|
|
.prefs-nav button::before {
|
|
content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 0;
|
|
border-radius: 0 2px 2px 0; background: var(--muted); transform: translateY(-50%);
|
|
transition: height var(--t-card) var(--ease-spring);
|
|
}
|
|
.prefs-nav button:not(:disabled):hover { background: var(--overlay); color: var(--text) }
|
|
.prefs-nav button:not(:disabled):hover svg { color: var(--muted) }
|
|
.prefs-nav button:disabled, .prefs-found button:disabled { opacity: .45; cursor: default }
|
|
.prefs-nav button[aria-selected="true"] {
|
|
background: var(--overlay); font-weight: var(--w-med);
|
|
}
|
|
.prefs-nav button[aria-selected="true"] svg { color: var(--text) }
|
|
.prefs-nav button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px }
|
|
|
|
.prefs-nav .nv {
|
|
flex: 0 99 auto; min-width: 0; max-width: 74px; overflow: hidden; text-overflow: ellipsis;
|
|
white-space: nowrap; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint);
|
|
}
|
|
.prefs-nav button[aria-selected="true"] .nv { color: var(--text) }
|
|
.prefs-nav .nv[data-danger] { color: var(--err-ink) }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.prefs-nav button::before, .prefs-nav button svg { transition: none }
|
|
}
|
|
|
|
.prefs-main {
|
|
--main-pad-b: 64px; overflow: auto; padding: 30px 36px var(--main-pad-b);
|
|
background: color-mix(in srgb, var(--page) 54%, var(--float));
|
|
}
|
|
|
|
.prefs-col { max-width: 760px }
|
|
|
|
.prefs-main[data-sec="ext"] .prefs-col { max-width: 980px }
|
|
|
|
.prefs-intro {
|
|
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px;
|
|
margin-bottom: 20px; padding: 0 2px 17px; border-bottom: 1px solid var(--hair);
|
|
}
|
|
|
|
.prefs-intro-mark {
|
|
display: grid; place-items: center; width: 34px; height: 34px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--r-md); background: var(--overlay); color: var(--muted);
|
|
}
|
|
.prefs-intro-mark svg {
|
|
width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.45;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.prefs-intro-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
|
|
.prefs-intro-overline {
|
|
font: var(--w-semi) var(--fs-micro) var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
|
|
}
|
|
.prefs-intro h2 { margin: 0; font: var(--w-semi) var(--fs-title)/1.25 var(--ui); color: var(--text); letter-spacing: -.01em }
|
|
.prefs-intro-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0 }
|
|
.prefs-intro-meta strong {
|
|
max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
font: var(--w-med) var(--fs-ui) var(--mono); color: var(--muted);
|
|
}
|
|
.prefs-intro-meta > span { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost) }
|
|
.prefs-intro-meta[data-danger] strong { color: var(--err-ink) }
|
|
|
|
.grp {
|
|
margin-bottom: 16px; padding: 19px 20px 17px; outline: 3px solid transparent; outline-offset: 2px;
|
|
border-radius: var(--r-md); background: var(--surface);
|
|
box-shadow: 0 1px 0 rgb(0 0 0 / .025);
|
|
transition: box-shadow var(--t-card) var(--ease-out),
|
|
background-color var(--t-card) var(--ease-out);
|
|
}
|
|
.prefs-col { animation: navin var(--m-line) both }
|
|
@keyframes navin { from { opacity: 0; transform: translateY(3px) } to { opacity: 1; transform: none } }
|
|
.grp:last-child { margin-bottom: 0 }
|
|
|
|
@media (hover: hover) {
|
|
.grp:hover { background: color-mix(in srgb, var(--accent) 3%, var(--surface)) }
|
|
}
|
|
.grp:focus-within {
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 34%, var(--border)),
|
|
0 0 0 3px color-mix(in srgb, var(--accent) 7%, transparent),
|
|
0 14px 34px -30px color-mix(in srgb, var(--accent) 30%, transparent);
|
|
}
|
|
|
|
.advset {
|
|
margin-bottom: 16px; padding: 0 20px;
|
|
border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--surface);
|
|
transition: border-color var(--t-card) var(--ease-out), box-shadow var(--t-card) var(--ease-out);
|
|
}
|
|
.advset:not(.appearance-advanced) > summary {
|
|
display: flex; align-items: center; gap: 10px; padding: 16px 0; cursor: pointer;
|
|
color: var(--muted); list-style: none;
|
|
}
|
|
.advset > summary::-webkit-details-marker { display: none }
|
|
.advset:not(.appearance-advanced) > summary::after, .appearance-advanced > summary > h3::after {
|
|
content: ""; margin-left: auto; flex: none; width: 10px; height: 10px;
|
|
color: var(--ghost); background: currentColor; transform: rotate(90deg);
|
|
-webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat;
|
|
transition: transform var(--m-line) ;
|
|
}
|
|
.advset:not(.appearance-advanced)[open] > summary::after, .appearance-advanced[open] > summary > h3::after { transform: rotate(270deg) }
|
|
.advset:not(.appearance-advanced) > summary:hover { color: var(--text) }
|
|
@media (hover: hover) {
|
|
.advset:hover { border-color: color-mix(in srgb, var(--accent) 20%, var(--border)) }
|
|
}
|
|
.advset:focus-within {
|
|
border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 7%, transparent);
|
|
}
|
|
.advset:not(.appearance-advanced) > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs) }
|
|
.advset:not(.appearance-advanced) > summary .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
|
|
.advset:not(.appearance-advanced) > summary .lb { font: var(--w-reg) var(--fs-ui) var(--ui); color: inherit }
|
|
.advset:not(.appearance-advanced) > summary .ds { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.advset:not(.appearance-advanced)[open] > summary { margin-bottom: 0; border-bottom: 1px solid var(--hair) }
|
|
.advset:not(.appearance-advanced) > .grp {
|
|
margin: 0; padding: 18px 0; border: 0; border-bottom: 1px solid var(--hair);
|
|
border-radius: 0; background: transparent; box-shadow: none;
|
|
}
|
|
.advset:not(.appearance-advanced) > .grp:last-child { border-bottom: 0 }
|
|
.grp-hd { display: flex; align-items: baseline; gap: 12px }
|
|
|
|
.grp > .grp-hd h3, .grp > h3.grp-hd { margin: 0; font: var(--w-semi) var(--fs-lead)/1.35 var(--ui); color: var(--text); letter-spacing: -.005em }
|
|
.grp .now {
|
|
margin-left: auto; flex: none; padding: 2px 7px; border-radius: var(--r-pill);
|
|
background: var(--overlay); font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint);
|
|
}
|
|
.grp-hd .act { margin-left: 12px; align-self: center }
|
|
.grp-hd .now + .act { margin-left: 0 }
|
|
.grp-hd > .act:first-of-type:not(.now + .act) { margin-left: auto }
|
|
.grp .hint { margin: 6px 0 0; font: var(--w-reg) var(--fs-ui)/1.65 var(--ui); color: var(--muted); max-width: 66ch }
|
|
.grp-items { margin-top: 15px; display: flex; flex-direction: column }
|
|
.grp .note { margin: 11px 0 0; font: var(--w-reg) var(--fs-ui)/1.65 var(--ui); color: var(--faint); max-width: 62ch }
|
|
|
|
.grp .note code { font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--muted) }
|
|
.grp .empty { padding: 14px 12px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
|
|
font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--faint) }
|
|
|
|
@media (max-width: 760px) {
|
|
.prefs { padding: 12px }
|
|
.prefs-sheet { height: 100%; border-radius: var(--r-md) }
|
|
.prefs-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) }
|
|
.prefs-nav {
|
|
display: flex; gap: 4px; padding: 8px 10px; overflow-x: auto; overflow-y: hidden;
|
|
border-right: 0; border-bottom: 1px solid var(--hair); scrollbar-width: none;
|
|
}
|
|
.prefs-nav::-webkit-scrollbar { display: none }
|
|
.prefs-nav .navsec, .prefs-nav .nv { display: none }
|
|
.prefs-nav button { flex: none; min-height: 32px; padding: 6px 10px }
|
|
.prefs-nav button::before {
|
|
left: 50%; top: auto; bottom: 0; width: 0; height: 2px;
|
|
transform: translateX(-50%); transition: width var(--t-card) var(--ease-spring);
|
|
}
|
|
.prefs-nav button[aria-selected="true"]::before { width: 18px; height: 2px }
|
|
.prefs-main { --main-pad-b: 48px; padding: 24px 22px var(--main-pad-b) }
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.prefs { padding: 0 }
|
|
.prefs-sheet { border-inline: 0; border-bottom: 0; border-radius: 0 }
|
|
.prefs-hd { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px }
|
|
.prefs-find { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: none; margin-left: 0 }
|
|
.prefs-found { right: 14px; width: calc(100% - 28px) }
|
|
.prefs-main { --main-pad-b: 40px; padding: 20px 14px var(--main-pad-b) }
|
|
.prefs-intro { grid-template-columns: auto minmax(0, 1fr); gap: 11px; margin-bottom: 16px }
|
|
.prefs-intro-meta {
|
|
grid-column: 2; flex-direction: row; align-items: baseline; justify-content: space-between;
|
|
}
|
|
.prefs-intro-meta strong { max-width: 60% }
|
|
.grp { padding: 17px 15px 15px }
|
|
.advset { padding-inline: 15px }
|
|
}
|
|
|
|
@media (max-height: 620px) {
|
|
.prefs { padding-block: 10px }
|
|
.prefs-sheet { height: 100% }
|
|
.prefs-main { padding-top: 22px }
|
|
}
|
|
|
|
.prow[disabled] { opacity: .5; cursor: default }
|
|
|
|
.prow[data-danger] { box-shadow: inset 2px 0 color-mix(in srgb, var(--err) 55%, transparent) }
|
|
.prow[data-danger][data-on] {
|
|
background: color-mix(in srgb, var(--err) 7%, transparent);
|
|
box-shadow: inset 2px 0 var(--err);
|
|
}
|
|
.prow[data-danger][data-on] .mark { border-color: var(--err); background: var(--err) }
|
|
|
|
.seg[data-danger] { background: color-mix(in srgb, var(--err) 13%, var(--overlay)) }
|
|
.seg[data-danger] button[aria-checked="true"] {
|
|
color: var(--err-ink); background: var(--raised);
|
|
box-shadow: var(--lit), 0 0 0 1px color-mix(in srgb, var(--err) 42%, transparent);
|
|
}
|
|
|
|
.kv { display: flex; gap: 12px; align-items: baseline; padding: 10px 12px; border-top: 1px solid var(--hair) }
|
|
.kv:last-of-type { border-bottom: 1px solid var(--hair) }
|
|
.kv .k { flex: none; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
|
|
.kv .v { font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--text); overflow-wrap: anywhere }
|
|
|
|
.srv { border-top: 1px solid var(--hair); padding: 10px 12px }
|
|
.srv:last-of-type { border-bottom: 1px solid var(--hair) }
|
|
.srv[data-st="failed"] { box-shadow: inset 2px 0 var(--err) }
|
|
.srv > summary { display: flex; align-items: baseline; gap: 9px; cursor: pointer; list-style: none }
|
|
.srv > summary::-webkit-details-marker { display: none }
|
|
.srv-hd { display: flex; align-items: baseline; gap: 9px }
|
|
.srv .pip { align-self: center }
|
|
.srv[data-st="ready"] .pip { background: var(--ok) }
|
|
.srv[data-st="connecting"] .pip { background: var(--net); animation: tick 1.6s ease-in-out infinite }
|
|
.srv[data-st="failed"] .pip { background: var(--err) }
|
|
.srv[data-st="pending"] .pip { background: var(--warn-ink) }
|
|
.srv[data-st="disabled"] .pip { background: var(--ghost) }
|
|
.srv[data-st="disabled"] .nm, .srv[data-st="disabled"] .meta { color: var(--faint) }
|
|
|
|
.srv .nm { flex: 0 1 auto; min-width: 6ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.srv > summary > .fold, .srv > .srv-hd > .fold { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap }
|
|
.srv .meta { margin-left: auto; flex: 0 1 auto; min-width: 0;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint) }
|
|
.srv .acts { flex: none }
|
|
.mcp-server { container: mcp-server / inline-size }
|
|
@container mcp-server (max-width: 560px) {
|
|
.srv > summary, .srv > .srv-hd { flex-wrap: wrap; row-gap: 8px }
|
|
.srv > summary > .nm, .srv > .srv-hd > .nm { flex: 1; min-width: 0 }
|
|
.srv > summary > .meta, .srv > .srv-hd > .meta {
|
|
order: 1; flex: 1 0 calc(100% - 15px); margin-left: 15px;
|
|
overflow: visible; overflow-wrap: anywhere; white-space: normal;
|
|
}
|
|
.srv > summary > .exc, .srv > .srv-hd > .exc { order: 2; margin-left: 15px }
|
|
.srv > summary > .acts, .srv > .srv-hd > .acts {
|
|
order: 2; margin-left: auto; max-width: 100%; flex-wrap: wrap; justify-content: flex-end;
|
|
}
|
|
}
|
|
.srv .why { margin: 4px 0 0 15px; font: var(--w-reg) var(--fs-ui)/1.55 var(--ui); color: var(--err-ink) }
|
|
.srv .why[role="status"] { color: var(--muted) }
|
|
.srv .peek { margin: 7px 0 1px 15px }
|
|
|
|
.srv .srv-ab { display: flex; align-items: baseline; gap: 8px; margin: 5px 0 0 15px }
|
|
.srv .srv-ab .ds { font: var(--w-reg) var(--fs-ui)/1.6 var(--ui); color: var(--faint); min-width: 0; overflow-wrap: anywhere }
|
|
.srv .srv-ab .w {
|
|
flex: none; padding: 1px 6px; border: 1px solid var(--hair); border-radius: var(--r-pill);
|
|
font: var(--w-reg) var(--fs-micro) var(--ui); color: var(--ghost); font-style: normal;
|
|
}
|
|
|
|
.srv .ld {
|
|
flex: none; padding: 1px 6px; border: 1px solid var(--hair); border-radius: var(--r-pill);
|
|
font: var(--w-reg) var(--fs-micro) var(--ui); color: var(--faint); font-style: normal; white-space: nowrap;
|
|
}
|
|
.srv .ld[data-pending] { border-style: dashed; color: var(--ghost) }
|
|
.srv .load { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0 2px 15px; min-width: 0 }
|
|
.srv .load .lb { flex: none; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.srv .load .seg { flex: none }
|
|
.srv .load .hn { flex: 1 1 12em; min-width: 0; font: var(--w-reg) var(--fs-meta)/1.5 var(--ui); color: var(--ghost) }
|
|
|
|
.srv .peek .trow { display: flex; align-items: baseline; gap: 9px; padding: 1px 0 }
|
|
.srv .peek .trow .nm { flex: none; font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--faint) }
|
|
.srv .peek .trow .ds {
|
|
font: var(--w-reg) var(--fs-ui)/1.55 var(--ui); color: var(--ghost); min-width: 0;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.srv .peek .trow[data-bad] .nm { color: var(--ghost); text-decoration: line-through }
|
|
.srv .peek .trow[data-bad] .ds { color: var(--warn-ink) }
|
|
.srv .peek .trow .face { margin-left: auto; flex: none; display: flex; gap: 5px }
|
|
.srv .peek .trow .face i {
|
|
padding: 1px 5px; border-radius: var(--r-xs); font: var(--w-reg) var(--fs-micro) var(--mono); font-style: normal;
|
|
}
|
|
.srv .peek .trow .face .ro { color: var(--ghost); border: 1px solid var(--hair) }
|
|
.srv .peek .trow .face .dg { color: var(--err-ink); border: 1px solid var(--err) }
|
|
|
|
.acts { display: flex; align-items: center; gap: 8px; margin-left: 14px; flex: none }
|
|
.act {
|
|
padding: 3px 9px; border: 1px solid var(--border); border-radius: var(--r-pill);
|
|
background: transparent; color: var(--text); font: var(--w-reg) var(--fs-meta) var(--ui); cursor: pointer;
|
|
transition: background var(--m-line), border-color var(--m-line);
|
|
}
|
|
.act:hover:not(:disabled) { background: var(--overlay); border-color: var(--muted) }
|
|
.act:disabled { color: var(--ghost); cursor: default }
|
|
.srv .act:disabled { opacity: .45 }
|
|
.act:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
|
|
|
|
.reload { display: inline-flex; align-items: center; gap: 6px }
|
|
.reload .rdot {
|
|
flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--ghost);
|
|
transition: background var(--t-line) var(--ease-out);
|
|
}
|
|
.reload[data-s="run"] .rdot { background: var(--net); animation: breathe 1.1s var(--ease) infinite }
|
|
.reload[data-s="run"]:disabled { color: var(--text) }
|
|
.reload[data-s="ok"] { color: var(--ok-ink); border-color: var(--ok) }
|
|
.reload[data-s="ok"] .rdot { background: var(--ok); animation: bumpup var(--t-card) var(--ease-out) }
|
|
.reload[data-s="bad"] { color: var(--err-ink); border-color: var(--err); animation: nudge var(--m-card) }
|
|
.reload[data-s="bad"] .rdot { background: var(--err) }
|
|
|
|
@keyframes nudge { 0%, 100% { transform: none } 30% { transform: translateX(-2px) } 70% { transform: translateX(2px) } }
|
|
|
|
.rnote { margin-top: 9px; font: var(--w-reg) var(--fs-ui)/1.6 var(--ui); color: var(--faint); animation: modeval var(--t-line) var(--ease-out) }
|
|
.rnote[data-s="ok"] { color: var(--ok-ink) }
|
|
.rnote[data-s="bad"] { color: var(--err-ink) }
|
|
|
|
.sw {
|
|
position: relative;
|
|
flex: none; width: 30px; height: 17px; padding: 0; border: 0; border-radius: var(--r-pill);
|
|
background: var(--overlay); box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer;
|
|
transition: background var(--m-line);
|
|
}
|
|
|
|
.sw::before { content: ""; position: absolute; inset: -5px -7px }
|
|
.sw i { display: block; width: 13px; height: 13px; margin-left: 2px; border-radius: 50%;
|
|
background: var(--faint); transition: transform var(--m-line) , background var(--m-line) }
|
|
|
|
.sw[aria-checked="true"] { background: var(--muted); box-shadow: none }
|
|
.sw[aria-checked="true"] i { transform: translateX(13px); background: var(--raised) }
|
|
.sw:disabled { cursor: default; opacity: .55 }
|
|
.sw:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
|
|
|
|
.act.ghost { border-color: transparent; color: var(--faint) }
|
|
.srv:hover .act.ghost, .act.ghost:focus-visible { border-color: var(--hair); color: var(--muted) }
|
|
.act.danger { border-color: color-mix(in srgb, var(--err) 42%, transparent); color: var(--err-ink) }
|
|
.act.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--err) 10%, transparent) }
|
|
.confirm {
|
|
display: flex; align-items: center; gap: 9px; margin: 8px 0 2px 15px; padding: 9px 11px;
|
|
border-radius: var(--r-sm); background: var(--overlay);
|
|
}
|
|
.confirm .q { flex: 1; font: var(--w-reg) var(--fs-ui)/1.55 var(--ui); color: var(--text) }
|
|
|
|
.addsrv, .addpkg { border-top: 1px solid var(--hair); padding: 12px }
|
|
.addsrv .paste, .addpkg .paste {
|
|
width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-sm);
|
|
background: var(--raised); color: var(--text); font: var(--w-reg) var(--fs-ui)/1.7 var(--mono); resize: vertical;
|
|
}
|
|
.addsrv .paste::placeholder, .addpkg .paste::placeholder { color: var(--ghost); white-space: pre-line }
|
|
.addpkg .paste:disabled { background: var(--overlay); cursor: default }
|
|
.addsrv .paste:focus, .addpkg .paste:focus { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.addsrv .acts, .addpkg .acts { display: flex; align-items: center; gap: 8px; margin-top: 10px }
|
|
.addsrv .acts .note, .addpkg .acts .note { flex: 1; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost) }
|
|
.addsrv .act[data-primary], .addpkg .act[data-primary] { border-color: var(--accent); background: var(--accent); color: var(--accent-fg) }
|
|
.addsrv .act[data-primary]:disabled, .addpkg .act[data-primary]:disabled { border-color: var(--border); background: transparent; color: var(--ghost) }
|
|
.addpkg > .why { margin-top: 9px; font: var(--w-reg) var(--fs-ui)/1.55 var(--ui); color: var(--err-ink) }
|
|
|
|
.addpkg[data-over] .paste { border-color: var(--accent); background: var(--overlay) }
|
|
|
|
.rgrp { margin-top: 10px }
|
|
.rgrp:first-child { margin-top: 0 }
|
|
.rgrp h3 { margin: 0; font: var(--w-med) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.rgrp[data-lvl="high"] { padding-left: 9px; box-shadow: inset 2px 0 var(--err) }
|
|
.rgrp[data-lvl="high"] h3 { color: var(--err-ink) }
|
|
|
|
.reasons { margin-top: 7px }
|
|
.reasons > summary { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost); cursor: pointer; list-style: none }
|
|
.reasons > summary::-webkit-details-marker { display: none }
|
|
.reasons p { margin: 4px 0 0; font: var(--w-reg) var(--fs-meta)/1.6 var(--ui); color: var(--muted) }
|
|
|
|
.peek .row[data-run] { color: var(--text) }
|
|
.peek .row[data-run] .d { color: var(--warn-ink) }
|
|
.peek .row .sc { margin-left: auto; padding-left: 12px; color: var(--ghost); font: var(--w-reg) var(--fs-meta) var(--ui);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
.addsrv > .why { margin-top: 9px; font: var(--w-reg) var(--fs-ui)/1.55 var(--ui); color: var(--err-ink) }
|
|
|
|
.scopebar {
|
|
position: relative;
|
|
display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
|
|
padding: 9px 12px; margin-bottom: 14px;
|
|
border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--surface);
|
|
}
|
|
.scopebar .nm { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.scopebar .pt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint) }
|
|
.scopebar .br {
|
|
padding: 1px 6px; border-radius: var(--r-pill);
|
|
font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--muted); background: var(--overlay);
|
|
}
|
|
.scopebar .sh { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--muted) }
|
|
.scopebar .ov { margin-left: auto; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.scopebar .who {
|
|
display: inline-flex; align-items: baseline; gap: 5px; cursor: pointer;
|
|
padding: 1px 6px; margin-left: -6px; border-radius: var(--r-sm);
|
|
border: 1px solid transparent; background: transparent;
|
|
font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text);
|
|
}
|
|
.scopebar .who:hover { border-color: var(--border); background: var(--overlay) }
|
|
.scopebar .who:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.scopebar .who .cv { font-style: normal; font-size: var(--fs-micro); color: var(--faint) }
|
|
|
|
.scopebar[data-away] { border-color: color-mix(in srgb, var(--accent) 45%, var(--hair)) }
|
|
.scopebar .away { flex-basis: 100%; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--accent-ink) }
|
|
|
|
.scope-pick {
|
|
position: absolute; z-index: 3; top: calc(100% + 4px); left: 8px; min-width: 320px; max-width: 460px;
|
|
max-height: 340px; overflow-y: auto; padding: 6px;
|
|
display: flex; flex-direction: column; gap: 1px;
|
|
border: 1px solid var(--border); border-radius: var(--r-md);
|
|
background: var(--float); box-shadow: var(--shadow-float);
|
|
}
|
|
.scope-pick .q {
|
|
padding: 5px 8px; margin-bottom: 4px; border: 1px solid var(--border); border-radius: var(--r-sm);
|
|
background: var(--surface); color: var(--text); font: var(--w-reg) var(--fs-ui) var(--ui);
|
|
}
|
|
.scope-pick .fl {
|
|
align-self: flex-start; margin: 2px 0 6px; padding: 2px 8px; cursor: pointer;
|
|
border: 1px solid var(--border); border-radius: var(--r-pill); background: transparent;
|
|
font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint);
|
|
}
|
|
.scope-pick .fl[aria-pressed="true"] {
|
|
color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
|
|
background: color-mix(in srgb, var(--accent) 12%, transparent);
|
|
}
|
|
.scope-pick .pk {
|
|
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; text-align: left;
|
|
padding: 6px 8px; border: 1px solid transparent; border-radius: var(--r-sm);
|
|
background: transparent; cursor: pointer;
|
|
}
|
|
.scope-pick .pk:hover { background: var(--float-hi) }
|
|
.scope-pick .pk[aria-selected="true"] { border-color: color-mix(in srgb, var(--accent) 45%, transparent) }
|
|
.scope-pick .pk .nm { display: flex; align-items: baseline; gap: 6px; font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.scope-pick .pk .cur { font: var(--w-reg) var(--fs-micro) var(--ui); font-style: normal; color: var(--faint) }
|
|
.scope-pick .pk .pt {
|
|
grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--faint);
|
|
}
|
|
.scope-pick .pk .ct {
|
|
grid-row: 1 / span 2; align-self: center; font-style: normal; white-space: nowrap;
|
|
padding: 1px 7px; border-radius: var(--r-pill);
|
|
font: var(--w-reg) var(--fs-micro) var(--ui); color: var(--accent-ink);
|
|
background: color-mix(in srgb, var(--accent) 12%, transparent);
|
|
}
|
|
.scope-pick .empty { padding: 10px 8px; font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--faint) }
|
|
|
|
.exc {
|
|
flex: none; padding: 1px 7px; border-radius: var(--r-pill); cursor: pointer;
|
|
font: var(--w-reg) var(--fs-micro) var(--ui); color: var(--accent-ink);
|
|
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
|
|
background: color-mix(in srgb, var(--accent) 12%, transparent);
|
|
}
|
|
.exc:hover:not(:disabled) { border-color: var(--accent) }
|
|
.exc:disabled { opacity: .5; cursor: default }
|
|
.exc:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.srv[data-local] .srv-hd, .srv[data-local] > summary,
|
|
.skrow[data-local] { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 55%, transparent) }
|
|
|
|
.msearch { display: flex; align-items: center; gap: 10px; margin-bottom: 12px }
|
|
.msearch input, .mline .malias {
|
|
flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--border);
|
|
border-radius: var(--r-sm); background: var(--raised); color: var(--text); font: var(--w-reg) var(--fs-ui) var(--ui);
|
|
}
|
|
.msearch input:focus, .mline .malias:focus { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.msearch .cnt { flex: none; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint) }
|
|
|
|
.vway { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 2px 12px 10px;
|
|
border-bottom: 1px solid var(--hair) }
|
|
.vway .lb { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint); flex: none }
|
|
|
|
.vway .seg { flex: none; width: auto; flex-wrap: nowrap }
|
|
.vway .seg button { flex: none; min-width: 0; padding: 4px 12px; white-space: nowrap;
|
|
font: var(--w-reg) var(--fs-meta) var(--ui) }
|
|
.vway .why { flex: 1 1 100%; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost); min-width: 0 }
|
|
|
|
.menu .mi.head {
|
|
display: flex; align-items: baseline; gap: 8px; padding: 7px 10px 4px; cursor: default;
|
|
}
|
|
.menu .mi.head .lb { font: var(--w-med) var(--fs-meta) var(--ui); letter-spacing: var(--track-lead); color: var(--faint) }
|
|
.menu .mi.head .rt { margin-left: auto; font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--faint) }
|
|
|
|
.vway .seg button .perk { margin-left: 6px; padding: 0 5px; border-radius: var(--r-pill);
|
|
background: var(--net-wash); color: var(--net); font: var(--w-reg) var(--fs-micro) var(--ui) }
|
|
|
|
.addp[data-edit] { border-top: 0; border-left: 2px solid var(--border); padding-left: 12px; margin: 4px 0 10px }
|
|
.mlist { margin-top: 12px; display: flex; flex-direction: column }
|
|
.mlhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 4px }
|
|
.mlhead .ttl { flex: none; white-space: nowrap; font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.mlhead .count { flex: none; white-space: nowrap; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.mlhead .mrefresh {
|
|
margin-left: auto; padding: 3px 7px; border: 0; border-radius: var(--r-xs);
|
|
background: transparent; color: var(--muted); font: var(--w-reg) var(--fs-meta) var(--ui); cursor: pointer;
|
|
}
|
|
.mlhead .mrefresh + .mrefresh { margin-left: 0 }
|
|
.msummary:empty { margin: 0 }
|
|
.mlhead .mrefresh:hover { background: var(--overlay); color: var(--text) }
|
|
.mlhead .mrefresh:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.mlhead .mrefresh:disabled { opacity: .45; cursor: default }
|
|
.msearch .mfetch {
|
|
flex: none; padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--r-xs);
|
|
background: transparent; color: var(--muted); font: var(--w-reg) var(--fs-meta) var(--ui); cursor: pointer;
|
|
}
|
|
.msearch .mfetch:hover { background: var(--overlay); color: var(--text) }
|
|
.msearch .mfetch:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.msearch .mfetch:disabled { opacity: .45; cursor: default }
|
|
.mguide, .mdiff { margin: 0 0 8px; font: var(--w-reg) var(--fs-meta)/1.55 var(--ui); color: var(--faint) }
|
|
.msummary { margin: 0 0 8px; font: var(--w-med) var(--fs-meta)/1.55 var(--ui); color: var(--muted) }
|
|
.mlist > .find { margin-bottom: 12px }
|
|
.addp-section > .find { margin: 8px 0 12px }
|
|
.mdiff { padding: 5px 8px; border-left: 2px solid var(--net); background: var(--net-wash); color: var(--muted) }
|
|
.mline {
|
|
display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center;
|
|
gap: 8px; min-height: 42px; padding: 5px 2px; border-top: 1px solid var(--hair);
|
|
}
|
|
.mline:last-child { border-bottom: 1px solid var(--hair) }
|
|
.mline[data-off] .nm { color: var(--ghost) }
|
|
.mline .mid { min-width: 0; display: flex; flex-direction: column; gap: 2px }
|
|
.mline .nm { min-width: 0; font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--text); overflow-wrap: anywhere }
|
|
.mline .tick {
|
|
width: 28px; height: 28px; padding: 0; display: grid; place-items: center;
|
|
border: 0; border-radius: var(--r-xs); background: transparent; cursor: pointer;
|
|
}
|
|
.mline .tick i {
|
|
width: 14px; height: 14px; display: grid; place-items: center; border: 1.5px solid var(--ghost);
|
|
border-radius: var(--r-xs); background: transparent; transition: border-color var(--t-line) var(--ease-out), background var(--t-line) var(--ease-out);
|
|
}
|
|
.mline .tick i::after {
|
|
content: ""; width: 6px; height: 3px; border-left: 1.5px solid var(--accent-fg);
|
|
border-bottom: 1.5px solid var(--accent-fg); opacity: 0; transform: translateY(-1px) rotate(-45deg);
|
|
}
|
|
.mline .tick[aria-checked="true"] i { border-color: var(--accent); background: var(--accent) }
|
|
.mline .tick[aria-checked="true"] i::after { opacity: 1 }
|
|
.mline .tick:focus-visible { outline: 2px solid var(--focus); outline-offset: 0 }
|
|
.mevidence { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: var(--faint); font: var(--w-reg) var(--fs-micro) var(--ui) }
|
|
.mevidence > i { width: 5px; height: 5px; margin-left: 2px; border-radius: 50%; background: var(--ghost) }
|
|
.mevidence > i[data-state="available"] { background: var(--ok) }
|
|
.mevidence > i[data-state="unavailable"] { background: var(--err) }
|
|
.mevidence > .mhttp { font-family: var(--mono) }
|
|
.mevidence > .mdetail { flex-basis: 100%; font-family: var(--mono); overflow-wrap: anywhere }
|
|
.mevidence > i[data-state="checking"] { background: var(--net) }
|
|
.mops { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px }
|
|
.mline .mverify {
|
|
min-height: 26px; padding: 2px 6px; border: 0; border-radius: var(--r-xs);
|
|
background: transparent; color: var(--muted); font: var(--w-reg) var(--fs-micro) var(--ui); cursor: pointer;
|
|
}
|
|
.mline .mverify:hover { background: var(--overlay); color: var(--text) }
|
|
.mline .mverify:disabled { opacity: .38; cursor: default }
|
|
.mline .vtag, .mline .dtag {
|
|
flex: none; min-height: 26px; padding: 2px 8px; border: 1px solid var(--hair); border-radius: var(--r-pill);
|
|
background: var(--surface); color: var(--ghost); font: var(--w-reg) var(--fs-micro) var(--ui); cursor: pointer;
|
|
}
|
|
.mline .vtag[aria-pressed="true"] { color: var(--deleg); background: var(--deleg-wash);
|
|
border-color: color-mix(in srgb, var(--deleg) 32%, transparent) }
|
|
.mline .dtag[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent-wash);
|
|
border-color: color-mix(in srgb, var(--accent) 32%, transparent) }
|
|
.mline .mverify:focus-visible, .mline .vtag:focus-visible, .mline .dtag:focus-visible {
|
|
outline: 2px solid var(--focus); outline-offset: 1px;
|
|
}
|
|
.mline .vtag:disabled, .mline .dtag:disabled { opacity: .35; cursor: default }
|
|
|
|
.mline .vtag[data-flat] { color: var(--deleg); background: var(--deleg-wash); border-color: transparent; cursor: default }
|
|
|
|
.mlist .mmore { margin-top: 7px; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.mlist .empty { margin-top: 9px }
|
|
|
|
.mnew {
|
|
display: flex; align-items: flex-start; gap: 9px; width: 100%; margin-top: 8px;
|
|
padding: 8px 9px; text-align: left; cursor: pointer;
|
|
border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
|
|
border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 7%, transparent);
|
|
transition: background var(--t-line) var(--ease-out);
|
|
}
|
|
.mnew:hover { background: color-mix(in srgb, var(--accent) 13%, transparent) }
|
|
.mnew:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.mnew .k { flex: none; font: var(--w-med) var(--fs-ui)/1.2 var(--mono); color: var(--accent-ink) }
|
|
.mnew .tx { min-width: 0 }
|
|
.mnew .lb { display: block; font: var(--w-med) var(--fs-ui) var(--mono); color: var(--text); overflow-wrap: anywhere }
|
|
.mnew .ds { display: block; margin-top: 2px; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.addp {
|
|
min-inline-size: 0;
|
|
margin: 0 0 14px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md);
|
|
background: color-mix(in srgb, var(--raised) 88%, var(--overlay));
|
|
box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow) 22%, transparent);
|
|
}
|
|
.addp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 13px }
|
|
.addp-head > div { min-width: 0 }
|
|
.addp-head .step {
|
|
display: block; margin-bottom: 3px; font: var(--w-med) var(--fs-micro) var(--ui);
|
|
color: var(--faint); letter-spacing: var(--track-cap); text-transform: uppercase;
|
|
}
|
|
.addp-head strong { display: block; font: var(--w-semi) var(--fs-lead) var(--ui); color: var(--text) }
|
|
.addp-head p { margin: 4px 0 0; font: var(--w-reg) var(--fs-meta)/1.5 var(--ui); color: var(--muted) }
|
|
.addp-close {
|
|
flex: none; width: 28px; height: 28px; border: 0; border-radius: var(--r-xs);
|
|
background: transparent; color: var(--faint); font: var(--w-reg) var(--fs-title)/1 var(--ui); cursor: pointer;
|
|
}
|
|
.addp-close:hover { background: var(--overlay); color: var(--text) }
|
|
.addp-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.addp-privacy { flex-basis: 100%; margin: -3px 0 0; font: var(--w-reg) var(--fs-micro) var(--ui); color: var(--ghost) }
|
|
.addp .fields { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px }
|
|
.addp .fields label { display: flex; flex-direction: column; gap: 4px }
|
|
.addp .fields label.grow { flex: 1; min-width: 150px }
|
|
.addp .fields label.full { flex-basis: 100% }
|
|
.addp .fields input[aria-invalid="true"] { border-color: var(--err) }
|
|
.addp .fields .name-cell { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 4px }
|
|
.addp .fields .name-cell label { display: flex; flex-direction: column; gap: 4px }
|
|
.addp .fields input[aria-invalid="true"]:focus { outline-color: var(--err) }
|
|
.addp .fields .name-rule { margin: 0; font: var(--w-reg) var(--fs-micro)/1.45 var(--ui); color: var(--ghost) }
|
|
.addp .fields .name-rule[data-bad] { color: var(--err-ink) }
|
|
.addp .fields .tip { font: var(--w-reg) var(--fs-micro)/1.45 var(--ui); font-style: normal; color: var(--ghost) }
|
|
.addp-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair) }
|
|
.addp-section.compact { margin-top: 12px }
|
|
.addp-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px }
|
|
.addp-section-head > div { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px }
|
|
.addp-section-head strong { font: var(--w-semi) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.addp-section-head span { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.addp-section-head .quiet { flex: none; background: transparent; color: var(--muted) }
|
|
.probe-ok { margin: 8px 0 0; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ok-ink) }
|
|
.unit-field { display: flex; min-width: 0; align-items: stretch; border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--raised); overflow: hidden }
|
|
.unit-field:focus-within { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.unit-field:has(input[aria-invalid="true"]) { border-color: var(--err) }
|
|
.unit-field input { min-width: 0; width: 100%; border: 0 !important; outline: 0 !important; background: transparent !important; color: var(--text) }
|
|
.unit-field > i { flex: none; display: flex; align-items: center; padding: 0 9px; border-left: 1px solid var(--hair); color: var(--faint); font: var(--w-reg) var(--fs-micro) var(--mono); font-style: normal }
|
|
.addp-footer { justify-content: flex-end; padding-top: 14px; border-top: 1px solid var(--hair) }
|
|
|
|
.addp .fields.compat { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--hair) }
|
|
.addp .fields.compat textarea {
|
|
padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-xs);
|
|
background: var(--raised); color: var(--text); font: var(--w-reg) var(--fs-meta)/1.6 var(--mono); resize: vertical;
|
|
}
|
|
.addp .fields.compat textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.addp .fields.compat textarea[aria-invalid] { border-color: var(--err) }
|
|
.addp .fields.compat .tip { font: var(--w-reg) var(--fs-meta)/1.6 var(--ui); font-style: normal; color: var(--ghost) }
|
|
.addp .fields.compat .why { flex-basis: 100%; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--err-ink) }
|
|
.model-efforts { display: flex; flex-direction: column; gap: 4px; flex-basis: 100% }
|
|
.me-list { display: flex; flex-direction: column; margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair) }
|
|
.me-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 8px 0; border-bottom: 1px solid var(--hair) }
|
|
.addp .fields .me-row .me-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--w-med) var(--fs-ui) var(--mono); color: var(--text) }
|
|
.ml-group { display: flex; flex-direction: column; gap: 4px; margin-top: 14px }
|
|
.ml-list { max-height: 232px; overflow-y: auto }
|
|
.ml-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px }
|
|
.ml-head strong { font: var(--w-semi) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.ml-head span { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.ml-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px; align-items: center; gap: 6px 10px; padding: 8px 0; border-bottom: 1px solid var(--hair) }
|
|
.addp .ml-row .unit-field input { padding: 6px 8px; font-size: var(--fs-meta) }
|
|
.mp-row { grid-template-columns: repeat(4, minmax(0, 1fr)) }
|
|
.mp-row .me-name { grid-column: 1 / -1 }
|
|
.mp-row .why { grid-column: 1 / -1 }
|
|
.mp-foreign { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px }
|
|
.mp-row select { padding: 6px 8px; font-size: var(--fs-meta) }
|
|
.ml-row .me-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--w-med) var(--fs-ui) var(--mono); color: var(--text) }
|
|
.ml-row input::placeholder { color: var(--ghost) }
|
|
.ml-row[data-own] .unit-field:has(input:not(:placeholder-shown)) { border-color: var(--accent) }
|
|
@media (max-width: 640px) { .ml-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } .ml-row .me-name { grid-column: 1 / -1 } }
|
|
.me-row > .me-note, .me-own { grid-column: 1 / -1 }
|
|
.me-own { display: flex; flex-direction: column; gap: 8px }
|
|
.me-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px }
|
|
.addp .fields .me-chips .me-extra { width: 110px; padding: 3px 9px; border-radius: var(--r-pill); font-size: var(--fs-meta) }
|
|
.addp .fields label.me-default { flex-direction: row; align-items: center; gap: 8px }
|
|
.addp .more { margin-top: 14px }
|
|
.addp .fields span { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.addp .fields input, .addp .fields select, .addp .ml-row input {
|
|
padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--r-xs);
|
|
background: var(--raised); color: var(--text); font: var(--w-reg) var(--fs-ui) var(--mono);
|
|
}
|
|
.addp .fields input:focus, .addp .fields select:focus, .addp .ml-row input:focus { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.addp .acts { display: flex; align-items: center; gap: 8px; margin-top: 12px }
|
|
.addp .acts-bar {
|
|
position: sticky; bottom: calc(var(--main-pad-b, 0px) * -1); z-index: 2; display: flex; flex-direction: column; gap: 8px;
|
|
margin-top: 12px; padding: 10px 0 12px; background: var(--float); border-top: 1px solid var(--border);
|
|
}
|
|
.addp .acts-bar .acts { margin-top: 0; flex-wrap: wrap }
|
|
.addp .acts-state { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--muted) }
|
|
.addp .acts-state[data-state="dirty"], .addp .acts-state[data-state="failed"], .addp .acts-state[data-state="unapplied"] { color: var(--text); font-weight: var(--w-med) }
|
|
.acts-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ghost) }
|
|
.acts-state[data-state="dirty"] .acts-dot { background: var(--warn) }
|
|
.acts-state[data-state="failed"] .acts-dot { background: var(--err) }
|
|
.acts-state[data-state="saved"] .acts-dot { background: var(--ok) }
|
|
.acts-state[data-state="saving"] .acts-dot { background: var(--accent) }
|
|
.acts-state[data-state="unapplied"] .acts-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--warn) }
|
|
.addp .acts .act:disabled { opacity: .55; cursor: default }
|
|
.addp .act[data-primary]:disabled { border-style: dashed }
|
|
.addp .act[data-primary] { border-color: var(--accent); background: var(--accent); color: var(--accent-fg) }
|
|
.addp .act[data-primary]:disabled { border-color: var(--border); background: transparent; color: var(--ghost) }
|
|
.chip {
|
|
padding: 4px 9px; border: 1px solid var(--border); border-radius: var(--r-pill);
|
|
background: transparent; color: var(--muted); cursor: pointer;
|
|
font: var(--w-reg) var(--fs-meta) var(--mono); white-space: nowrap;
|
|
}
|
|
.chip[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: var(--raised) }
|
|
|
|
.cand { padding: 10px 0; border-bottom: 1px solid var(--hair) }
|
|
.cand-hd { display: flex; align-items: baseline; gap: 9px }
|
|
.cand-hd .nm { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.cand-hd .meta { font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint) }
|
|
|
|
.risk { display: flex; align-items: baseline; gap: 9px; margin-top: 7px; flex-wrap: wrap }
|
|
.risk .lb { flex: none; min-width: 98px; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.risk .dt { font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--text); word-break: break-all }
|
|
.risk[data-kind="secret"] .dt { color: var(--err-ink) }
|
|
.risk .why { flex-basis: 100%; margin-left: 107px; font: var(--w-reg) var(--fs-meta)/1.6 var(--ui); color: var(--muted) }
|
|
|
|
.scope { display: flex; gap: 8px; margin-top: 12px; max-width: 520px }
|
|
.scope button {
|
|
flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 8px 11px; text-align: left;
|
|
border: 1px solid var(--border); border-radius: var(--r-sm); background: transparent;
|
|
color: var(--muted); font: var(--w-reg) var(--fs-ui) var(--ui); cursor: pointer; transition: border-color var(--m-line), color var(--m-line);
|
|
}
|
|
.scope button i { font: var(--w-reg) var(--fs-meta) var(--ui); font-style: normal; color: var(--ghost) }
|
|
.scope button[aria-checked="true"] { border-color: var(--accent); color: var(--text) }
|
|
.scope button:disabled { opacity: .5; cursor: default }
|
|
|
|
.addsrv > .warn {
|
|
margin-top: 9px; padding: 7px 10px; border-radius: var(--r-sm);
|
|
font: var(--w-reg) var(--fs-ui)/1.5 var(--ui); color: var(--warn-ink);
|
|
background: color-mix(in srgb, var(--warn) 10%, transparent);
|
|
}
|
|
.scope button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
|
|
.outcome { display: flex; align-items: baseline; gap: 9px; padding: 8px 0 }
|
|
.outcome .pip { align-self: center; background: var(--ghost) }
|
|
.outcome[data-state="ready"] .pip { background: var(--ok) }
|
|
.outcome[data-state="action_required"] .pip { background: var(--warn, var(--accent)) }
|
|
.outcome[data-state="issue"] .pip { background: var(--err) }
|
|
.outcome .nm { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.outcome .dt { font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--muted) }
|
|
|
|
.mkt-tabs { margin-bottom: 14px }
|
|
.mkt-tabs button[aria-selected="true"] {
|
|
background: var(--raised); color: var(--text); font-weight: var(--w-med);
|
|
box-shadow: var(--lit), 0 1px 2px rgb(0 0 0 / .07);
|
|
}
|
|
.mkt { display: flex; flex-direction: column; gap: 10px; min-width: 0 }
|
|
.mkt[tabindex="-1"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
|
|
.mkt.addpkg { border-top: 0; padding: 0 }
|
|
.mkt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
|
|
.mkt-q {
|
|
flex: 1 1 220px; min-width: 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
|
|
background: var(--raised); color: var(--text); font: var(--w-reg) var(--fs-ui) var(--ui);
|
|
}
|
|
.mkt-q::placeholder { color: var(--ghost) }
|
|
.mkt-q:focus { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.mkt-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none }
|
|
.mkt-installed { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 0; padding: 0; list-style: none; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--muted) }
|
|
.mkt-row {
|
|
display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0; padding: 7px 8px; text-align: left;
|
|
border: 0; border-bottom: 1px solid var(--hair); background: transparent; color: inherit; cursor: pointer;
|
|
}
|
|
.mkt-row:hover { background: var(--overlay) }
|
|
.mkt-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px }
|
|
.mkt-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px }
|
|
.mkt-hd .nm { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.mkt-kind, .mkt-badge {
|
|
padding: 1px 7px; border: 1px solid var(--hair); border-radius: var(--r-pill);
|
|
font: var(--w-reg) var(--fs-micro) var(--ui); color: var(--faint);
|
|
}
|
|
.mkt-badge { color: var(--muted) }
|
|
.mkt-badge[data-tone="ok"] { border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok-ink) }
|
|
.mkt-sum { margin: 0; font: var(--w-reg) var(--fs-ui)/1.55 var(--ui); color: var(--muted) }
|
|
.mkt-meta { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.mkt-id { font-family: var(--mono) }
|
|
.mkt-row .mkt-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap }
|
|
.mkt-row .nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.mkt-row .mkt-kind, .mkt-row .mkt-badge { flex: none }
|
|
.mkt-n { flex: none; margin-left: auto; padding-left: 8px; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint); font-variant-numeric: tabular-nums }
|
|
.mkt-row .mkt-sum { flex: 1 1 60%; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-meta); line-height: 1.5 }
|
|
.mkt-row .mkt-meta { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ghost) }
|
|
.mkt-pinned { flex: none; margin-left: -2px; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost) }
|
|
.mkt-pinned::before { content: "· "; }
|
|
.mkt-pinned[data-on] { color: var(--faint) }
|
|
.mkt-pin { display: inline-flex; align-items: center; gap: 6px; font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--muted); cursor: pointer; white-space: nowrap }
|
|
.mkt-desc { margin: 0; max-width: 70ch; font: var(--w-reg) var(--fs-ui)/1.65 var(--ui); color: var(--text); white-space: pre-wrap }
|
|
.mkt-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 4px 0 0 }
|
|
.mkt-facts dt { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.mkt-facts dd { margin: 0; font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--text); overflow-wrap: anywhere }
|
|
.mkt-facts dd.mono { font: var(--w-reg) var(--fs-meta) var(--mono) }
|
|
.mkt-facts dd[data-missing] { color: var(--warn-ink) }
|
|
.mkt .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0 }
|
|
.mkt .acts .note { flex: 1; min-width: 180px; margin: 0; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost) }
|
|
.mkt .act[data-primary] { border-color: var(--accent); background: var(--accent); color: var(--accent-fg) }
|
|
.mkt .act[data-primary]:disabled { border-color: var(--border); background: transparent; color: var(--ghost) }
|
|
.mkt-names { margin: 6px 0 0; padding-left: 18px; font: var(--w-reg) var(--fs-ui)/1.6 var(--mono); color: var(--text) }
|
|
.mkt-seen { display: flex; align-items: center; gap: 7px; margin-top: 8px; font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--text); cursor: pointer }
|
|
.mkt-views { align-self: flex-start; margin-bottom: 12px }
|
|
.mkt-signin {
|
|
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; padding: 8px 10px;
|
|
border: 1px solid var(--hair); border-radius: var(--r-sm); font: var(--w-reg) var(--fs-ui)/1.5 var(--ui); color: var(--muted);
|
|
}
|
|
.mkt-signin span { flex: 1; min-width: 200px }
|
|
.mkt-row[data-static] { cursor: default }
|
|
.mkt-row[data-static]:hover { background: transparent }
|
|
.mkt-badge[data-tone="err"] { border-color: color-mix(in srgb, var(--err) 45%, transparent); color: var(--err-ink) }
|
|
.mkt-tip { margin: 0; font: var(--w-reg) var(--fs-micro)/1.45 var(--ui); font-style: normal; color: var(--ghost) }
|
|
.mkt-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
|
|
@media (max-width: 720px) { .mkt-fields { grid-template-columns: minmax(0, 1fr) } }
|
|
.mkt-fields label { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
|
|
.mkt-fields label.full { grid-column: 1 / -1 }
|
|
.mkt-fields span { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.mkt-fields input, .mkt-fields textarea {
|
|
min-width: 0; padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--r-xs);
|
|
background: var(--raised); color: var(--text); font: var(--w-reg) var(--fs-ui)/1.5 var(--ui);
|
|
}
|
|
.mkt-fields .mono { font: var(--w-reg) var(--fs-meta)/1.5 var(--mono) }
|
|
.mkt-fields textarea { resize: vertical }
|
|
.mkt-pub .mkt-fields :is(input, textarea):disabled,
|
|
.mkt-pub .mkt-seen:has(:disabled) { opacity: .5; cursor: default }
|
|
.mkt-fields input:focus, .mkt-fields textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.mkt-fields input::placeholder { color: var(--ghost) }
|
|
.mkt-vote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0 }
|
|
.mkt-vote-rate { font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--muted); font-variant-numeric: tabular-nums }
|
|
.mkt-vote-btns { display: inline-flex; gap: 6px }
|
|
.mkt-vote .act .n { margin-left: 2px; color: var(--faint); font-variant-numeric: tabular-nums }
|
|
.mkt-vote .act[aria-pressed="true"] {
|
|
border-color: var(--muted); background: var(--raised); color: var(--text); font-weight: var(--w-med);
|
|
box-shadow: var(--lit);
|
|
}
|
|
.mkt-vote .act[aria-pressed="true"] .n { color: var(--text) }
|
|
.mkt-vote .note, .mkt-vote .why { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost) }
|
|
.mkt-vote .why { color: var(--muted) }
|
|
.mkt-n.mkt-rate { margin-left: 0 }
|
|
@media (max-width: 520px) {
|
|
.mkt-row .mkt-line:first-child { flex-wrap: wrap; row-gap: 2px }
|
|
.mkt-row .nm { flex: none; max-width: 100% }
|
|
.mkt-row .mkt-n.mkt-rate { flex-basis: 100%; padding-left: 0 }
|
|
}
|
|
|
|
.hooks .scope { max-width: 460px; margin-top: 0 }
|
|
.hooks .path { margin: 8px 0 0; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--ghost); word-break: break-all }
|
|
.hooks > .why { margin-top: 9px; font: var(--w-reg) var(--fs-ui)/1.55 var(--ui); color: var(--err-ink) }
|
|
.recipes { margin-top: 14px; display: flex; flex-direction: column }
|
|
.recipe { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--hair) }
|
|
.recipe:last-of-type { border-bottom: 1px solid var(--hair) }
|
|
.recipe .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0 }
|
|
.recipe .lb { font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.recipe .ds { font: var(--w-reg) var(--fs-meta)/1.55 var(--ui); color: var(--faint) }
|
|
|
|
.more {
|
|
margin-top: 14px; display: flex; align-items: baseline; gap: 10px; padding: 0;
|
|
border: 0; background: none; color: var(--muted); font: var(--w-reg) var(--fs-ui) var(--ui); cursor: pointer;
|
|
}
|
|
.more:hover { color: var(--text) }
|
|
.more .c { font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--ghost) }
|
|
.more:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-xs) }
|
|
|
|
.lrow .more { margin-top: 0; margin-left: auto; flex: none }
|
|
|
|
.cmp { padding: 10px 12px 12px }
|
|
.cmpg { display: flex; flex-wrap: wrap; gap: 4px 20px }
|
|
.cmpg .r { display: flex; align-items: baseline; gap: 7px }
|
|
.cmpg .k { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.cmpg b {
|
|
font: var(--w-med) var(--fs-ui) var(--mono); color: var(--text);
|
|
font-variant-numeric: tabular-nums; letter-spacing: var(--track-tight);
|
|
}
|
|
.cmpbar {
|
|
height: 5px; margin-top: 9px; border-radius: var(--r-md);
|
|
background: var(--overlay); overflow: hidden;
|
|
}
|
|
.cmpbar > i {
|
|
display: block; height: 100%; border-radius: var(--r-md);
|
|
background: var(--accent-ink); transition: width var(--m-panel) ;
|
|
}
|
|
.cmp .note { margin-top: 8px }
|
|
.threshold-row { flex-wrap: wrap } .threshold-row .tx { flex-basis: 14em } .threshold-control { width: min(360px, 100%); display: flex; align-items: center; gap: 7px }
|
|
.threshold-control .unit-field { flex: 1 }
|
|
.threshold-control input { height: 30px; padding: 4px 8px; color: var(--text); font: var(--w-reg) var(--fs-ui) var(--mono) }
|
|
.threshold-presets { display: flex; align-items: center; gap: 3px }
|
|
.threshold-presets button { padding: 4px 6px; border: 1px solid var(--hair); border-radius: var(--r-xs); background: transparent; color: var(--muted); font: var(--w-reg) var(--fs-micro) var(--ui); cursor: pointer }
|
|
.threshold-presets button:hover { background: var(--overlay); color: var(--text); border-color: var(--border) }
|
|
.threshold-presets button:disabled { opacity: .4; cursor: default }
|
|
|
|
@media (max-width: 680px) {
|
|
.threshold-control { align-items: stretch; flex-direction: column }
|
|
}
|
|
|
|
.expert { margin-top: 12px; display: flex; flex-direction: column; gap: 10px }
|
|
.rule { padding: 10px 12px; border: 1px solid var(--hair); border-radius: var(--r-sm) }
|
|
|
|
.rule[data-blocking] { box-shadow: inset 2px 0 var(--warn) }
|
|
.rule .line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
|
|
.rule .line + .line { margin-top: 8px }
|
|
.rule select, .rule input {
|
|
padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--r-xs);
|
|
background: var(--raised); color: var(--text); font: var(--w-reg) var(--fs-ui) var(--mono);
|
|
}
|
|
.rule select { width: 200px; max-width: 100%; min-width: 0; text-overflow: ellipsis }
|
|
.rule select:focus, .rule input:focus { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.rule .match { flex: 1; min-width: 140px }
|
|
.rule .cmd { display: block; width: 100%; margin-top: 8px }
|
|
.rule .warn {
|
|
padding: 1px 6px; border-radius: var(--r-pill); font: var(--w-med) var(--fs-micro) var(--ui); font-style: normal;
|
|
color: var(--warn-ink); background: color-mix(in srgb, var(--warn) 14%, transparent);
|
|
}
|
|
.rule .note { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost) }
|
|
.rule .why { margin-top: 6px; font: var(--w-reg) var(--fs-meta)/1.5 var(--ui); color: var(--err-ink) }
|
|
.rule .act[data-primary] { border-color: var(--accent); background: var(--accent); color: var(--accent-fg) }
|
|
|
|
.dryrun { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-top: 8px }
|
|
.dryrun b { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--ok-ink) }
|
|
.dryrun[data-blocks] b { color: var(--err-ink) }
|
|
.dryrun .meta { font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--ghost) }
|
|
.dryrun .out {
|
|
flex-basis: 100%; margin-top: 4px; padding: 6px 8px; border-radius: var(--r-xs);
|
|
background: var(--overlay); font: var(--w-reg) var(--fs-meta)/1.6 var(--mono); color: var(--muted);
|
|
white-space: pre-wrap; word-break: break-all;
|
|
}
|
|
|
|
.fromplugin { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--hair) }
|
|
.fromplugin .lb { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.hookrow { display: flex; align-items: baseline; gap: 10px; margin-top: 6px }
|
|
.hookrow .ev { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--muted) }
|
|
.hookrow .cm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint) }
|
|
.hookrow .sc { flex: none; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--ghost) }
|
|
|
|
.rules .fallback { display: flex; align-items: center; gap: 12px; margin-top: 18px }
|
|
.rules .fallback .k { flex: none; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint) }
|
|
|
|
.seg .ver { margin-left: 5px; font: var(--w-reg) var(--fs-micro) var(--mono); font-style: normal; color: var(--faint) }
|
|
.seg button[aria-checked="true"] .ver { color: var(--faint) }
|
|
|
|
.shell .note code { font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--muted); word-break: break-all }
|
|
.shell .seg { margin-top: 14px }
|
|
|
|
.grp[data-setting="folding"] > .seg { margin-top: 14px }
|
|
.fold-rows { margin-top: 12px }
|
|
.fold-row {
|
|
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 12px;
|
|
border-top: 1px solid var(--hair); border-radius: var(--r-xs);
|
|
transition: background var(--m-line);
|
|
}
|
|
.fold-row:last-child { border-bottom: 1px solid var(--hair) }
|
|
.fold-row[data-hot] { background: color-mix(in srgb, var(--accent) 5%, transparent) }
|
|
.fold-row .tx { flex: 1 1 12em; min-width: 0; display: flex; flex-direction: column; gap: 2px }
|
|
.fold-row .lb { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.fold-row .ds { font: var(--w-reg) var(--fs-meta)/1.55 var(--ui); color: var(--faint) }
|
|
.fold-row .seg { flex: 0 1 auto; align-self: center; max-width: 100%; flex-wrap: wrap }
|
|
|
|
.fold-prev {
|
|
margin: 14px 0 0; padding: 0; border: 1px solid var(--hair); border-radius: var(--r-sm);
|
|
background: var(--sunk); overflow: hidden;
|
|
}
|
|
.fold-prev figcaption {
|
|
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
|
padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--hair);
|
|
font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint);
|
|
}
|
|
.fold-prev figcaption .seg button { padding: 2px 9px; font-size: var(--fs-meta) }
|
|
.fp-turn { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px }
|
|
.fp-who { font: var(--w-med) var(--fs-meta) var(--ui); color: var(--muted) }
|
|
.fp-block { border-radius: var(--r-xs); transition: background var(--m-line), box-shadow var(--m-line) }
|
|
.fp-block[data-hot], .fp-out[data-hot] {
|
|
background: color-mix(in srgb, var(--accent) 7%, transparent);
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
|
|
}
|
|
.fp-sum {
|
|
display: flex; align-items: center; gap: 6px; padding: 2px 4px;
|
|
font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint); white-space: nowrap;
|
|
}
|
|
.fp-sum::before {
|
|
content: ""; width: 9px; height: 9px; flex: none; background: var(--ghost);
|
|
-webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat;
|
|
transition: transform var(--m-line);
|
|
}
|
|
.fp-block[data-open] > .fp-sum::before { transform: rotate(90deg) }
|
|
.fp-sum b { font: var(--w-med) var(--fs-meta) var(--mono); color: var(--muted) }
|
|
.fp-sum i { margin-left: auto; font-style: normal; color: var(--ghost) }
|
|
.fp-work { border: 1px solid var(--hair); padding: 4px }
|
|
.fp-steps { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0 14px }
|
|
.fp-step[data-failed] > .fp-sum b { color: var(--err-ink) }
|
|
.fp-out { position: relative; margin: 4px 0 2px 7px; padding: 4px 0 6px 18px; border-left: 1px solid var(--hair) }
|
|
.fp-out[data-hot] { box-shadow: none; border-radius: 0 }
|
|
.fp-step[data-failed] .fp-out { border-left-color: color-mix(in srgb, var(--err) 55%, transparent) }
|
|
.fp-out[data-clip] .fp-lines { -webkit-mask: linear-gradient(#000 45%, transparent); mask: linear-gradient(#000 45%, transparent) }
|
|
.fp-more { display: inline-block; margin-top: 4px; font: var(--w-reg) var(--fs-micro) var(--ui); color: var(--muted) }
|
|
.fp-lines { display: flex; flex-direction: column; gap: 5px; padding: 4px 4px 2px 19px }
|
|
.fp-out .fp-lines { padding-left: 0 }
|
|
.fp-lines > span { height: 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--text) 16%, transparent) }
|
|
.fp-lines[data-dim] > span { background: color-mix(in srgb, var(--text) 9%, transparent) }
|
|
.fp-lines[data-mono] > span { height: 5px; border-radius: 1px; background: color-mix(in srgb, var(--text) 11%, transparent) }
|
|
@media (max-width: 560px) {
|
|
.fold-row { flex-direction: column; align-items: stretch; gap: 8px }
|
|
.fold-row .seg { align-self: start }
|
|
}
|
|
|
|
.seg.fit { flex: none; width: auto }
|
|
.seg.fit button { flex: none; min-width: 0; padding: 5px 14px }
|
|
.rules .path { margin: 10px 0 0; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--ghost); word-break: break-all }
|
|
.rules .find { margin-bottom: 14px }
|
|
|
|
.granted { margin-top: 18px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--sunk); overflow: hidden }
|
|
.granted .g-hd { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border) }
|
|
.granted .g-hd .n { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.granted .g-hd .how { flex: 1; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--muted) }
|
|
.granted .g-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px }
|
|
.granted .g-row + .g-row { border-top: 1px solid var(--hair) }
|
|
.granted .g-row code { flex: 1; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--text); overflow-wrap: anywhere }
|
|
|
|
.rhead { display: flex; align-items: center; gap: 10px; margin-top: 22px }
|
|
.rhead .n { flex: none; display: flex; align-items: baseline; gap: 8px; font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--muted) }
|
|
|
|
.rhead .mix { display: flex; gap: 4px }
|
|
.rhead .mix i {
|
|
min-width: 20px; padding: 1px 5px; border-radius: var(--r-pill); text-align: center;
|
|
font: var(--w-med) var(--fs-micro) var(--mono); font-style: normal;
|
|
}
|
|
.rhead .mix i[data-k="deny"] { color: var(--err-ink); background: color-mix(in srgb, var(--err) 13%, transparent) }
|
|
.rhead .mix i[data-k="ask"] { color: var(--warn-ink); background: color-mix(in srgb, var(--warn) 15%, transparent) }
|
|
.rhead .mix i[data-k="allow"] { color: var(--ok-ink); background: color-mix(in srgb, var(--ok) 14%, transparent) }
|
|
.rhead .find-rule {
|
|
flex: 1; min-width: 0; margin-left: auto; padding: 5px 9px;
|
|
border: 1px solid var(--border); border-radius: var(--r-xs);
|
|
background: var(--raised); color: var(--text); font: var(--w-reg) var(--fs-ui) var(--ui);
|
|
}
|
|
.rhead .find-rule:focus { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.rhead > .act:last-child { margin-left: auto }
|
|
.rhead .find-rule ~ .act { margin-left: 0 }
|
|
|
|
.raddbox { margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--overlay) }
|
|
.raddbox .line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
|
|
.raddbox select, .raddbox input {
|
|
padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--r-xs);
|
|
background: var(--raised); color: var(--text); font: var(--w-reg) var(--fs-ui) var(--mono);
|
|
}
|
|
.raddbox input { flex: 1; min-width: 160px }
|
|
.raddbox select:focus, .raddbox input:focus { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
|
|
.raddbox .preview { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 0; flex-wrap: wrap }
|
|
.raddbox .preview code { font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--text) }
|
|
.raddbox .preview .says { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
|
|
.rtable { margin-top: 12px; border-top: 1px solid var(--hair) }
|
|
.rgroup { border-bottom: 1px solid var(--hair) }
|
|
.rg-hd {
|
|
display: flex; align-items: baseline; gap: 9px; width: 100%; padding: 9px 2px;
|
|
border: 0; background: none; cursor: pointer; text-align: left;
|
|
}
|
|
.rg-hd:hover .what { color: var(--muted) }
|
|
.rg-hd:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-xs) }
|
|
.rg-hd .caret {
|
|
flex: none; width: 0; height: 0; align-self: center;
|
|
border: 4px solid transparent; border-left-color: var(--ghost); margin-right: 1px;
|
|
transition: transform var(--m-line) ;
|
|
}
|
|
.rg-hd[aria-expanded="true"] .caret { transform: rotate(90deg) }
|
|
.rg-hd code { font: var(--w-med) var(--fs-ui) var(--mono); color: var(--text) }
|
|
.rg-hd .what { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
|
|
.rg-hd .how { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost) }
|
|
.rg-hd .cnt { margin-left: auto; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--ghost) }
|
|
|
|
.rrow { display: flex; align-items: center; gap: 10px; padding: 5px 2px 5px 13px }
|
|
.rrow + .rrow { border-top: 1px solid color-mix(in srgb, var(--hair) 60%, transparent) }
|
|
|
|
.rrow .dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ghost) }
|
|
.rrow[data-k="deny"] .dot { background: var(--err) }
|
|
.rrow[data-k="ask"] .dot { background: var(--warn) }
|
|
.rrow[data-k="allow"] .dot { background: var(--ok) }
|
|
.rrow .pat { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
|
|
.rrow .pat code { font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--text); word-break: break-all }
|
|
.rrow .pat .says { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost) }
|
|
.rrow select {
|
|
flex: none; padding: 3px 6px; border: 1px solid transparent; border-radius: var(--r-xs);
|
|
background: transparent; color: var(--muted); font: var(--w-reg) var(--fs-meta) var(--ui); cursor: pointer;
|
|
}
|
|
.rrow:hover select { border-color: var(--border); background: var(--raised) }
|
|
.rrow select:focus { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
|
|
.rrow .act.ghost { opacity: 0; transition: opacity var(--m-line) }
|
|
.rrow:hover .act.ghost, .rrow:focus-within .act.ghost { opacity: 1 }
|
|
.rtable .empty { padding: 14px 2px; font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--faint) }
|
|
|
|
.box .sec + .sec { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hair) }
|
|
.box h3 { margin: 0; font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.box .note { margin: 6px 0 0; font: var(--w-reg) var(--fs-meta)/1.7 var(--ui); color: var(--faint); max-width: 60ch }
|
|
.box .find { margin-top: 10px }
|
|
.box .fields { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: flex-end }
|
|
.box .fields label { display: flex; flex-direction: column; gap: 4px }
|
|
.box .fields label.grow { flex: 1; min-width: 150px }
|
|
.box .fields label.full { flex-basis: 100% }
|
|
.box .fields span { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.box .fields input {
|
|
padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--r-xs);
|
|
background: var(--raised); color: var(--text); font: var(--w-reg) var(--fs-ui) var(--mono);
|
|
}
|
|
.box .fields input:focus { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.box .extra { margin-top: 12px }
|
|
.box .sublb { margin-bottom: 6px; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
|
|
.prule { display: flex; align-items: center; gap: 10px; margin-top: 8px }
|
|
.prule code {
|
|
flex: 1; min-width: 0; padding: 4px 8px; border-radius: var(--r-xs); background: var(--overlay);
|
|
font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--text); word-break: break-all;
|
|
}
|
|
.prule input {
|
|
flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--r-xs);
|
|
background: var(--raised); color: var(--text); font: var(--w-reg) var(--fs-meta) var(--mono);
|
|
}
|
|
.prule input:focus { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
|
|
.pinpath { margin-top: 14px }
|
|
.pinpath summary { cursor: pointer }
|
|
.pinpath summary .fold { font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--muted) }
|
|
.pinpath summary:hover .fold { color: var(--text) }
|
|
|
|
.box .lrow { margin-top: 12px }
|
|
.box .kv { margin-top: 16px }
|
|
.box .kv .v { display: flex; flex-direction: column; gap: 4px }
|
|
.box .kv .v code { font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--text) }
|
|
.box .seg { margin-top: 12px }
|
|
|
|
.net .note { margin: 8px 0 0; font: var(--w-reg) var(--fs-meta)/1.6 var(--ui); color: var(--faint) }
|
|
.net .kv { border-top: 1px solid var(--hair) }
|
|
.net .kv:first-of-type { margin-top: 12px }
|
|
.net .fields { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px }
|
|
.net .fields label { display: flex; flex-direction: column; gap: 4px }
|
|
.net .fields label.grow { flex: 1; min-width: 150px }
|
|
.net .fields label.full { flex-basis: 100% }
|
|
.net .fields span { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.net .fields input, .net .fields select {
|
|
padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--r-xs);
|
|
background: var(--raised); color: var(--text); font: var(--w-reg) var(--fs-ui) var(--mono);
|
|
}
|
|
.net .fields input:focus, .net .fields select:focus { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.net .fields .port { width: 76px }
|
|
.net .fields label.chk { flex-direction: row; align-items: center; gap: 7px; align-self: flex-end; padding-bottom: 7px }
|
|
.net .fields label.chk span { color: var(--muted) }
|
|
.net .acts { display: flex; gap: 8px; margin-top: 14px }
|
|
.net .act[data-primary] { border-color: var(--accent); background: var(--accent); color: var(--accent-fg) }
|
|
.net .act[data-primary]:disabled { border-color: var(--border); background: transparent; color: var(--ghost) }
|
|
.net > .why { margin-top: 10px; font: var(--w-reg) var(--fs-ui)/1.55 var(--ui); color: var(--err-ink) }
|
|
|
|
.probes { margin-top: 14px; display: flex; flex-direction: column }
|
|
.probe { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; padding: 7px 0; border-top: 1px solid var(--hair) }
|
|
.probe:last-of-type { border-bottom: 1px solid var(--hair) }
|
|
.probe .mk { flex: none; width: 14px; font-style: normal; color: var(--err) }
|
|
.probe[data-ok] .mk { color: var(--ok) }
|
|
.probe .lb { flex: none; min-width: 68px; font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--muted) }
|
|
.probe .dt { flex: 1; min-width: 0; font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--text); word-break: break-all }
|
|
.probe:not([data-ok]) .dt { color: var(--err-ink) }
|
|
.probe .ms { flex: none; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--ghost); font-variant-numeric: tabular-nums }
|
|
|
|
.probe .adv { flex-basis: 100%; margin-left: 91px; margin-top: 4px; font: var(--w-reg) var(--fs-meta)/1.6 var(--ui); color: var(--muted) }
|
|
|
|
.mem .recall { margin: 0 0 14px; font: var(--w-reg) var(--fs-ui)/1.6 var(--ui); color: var(--muted) }
|
|
.memgrp { margin-bottom: 22px }
|
|
.memgrp:last-of-type { margin-bottom: 0 }
|
|
.memgrp .hd { display: flex; align-items: baseline; gap: 9px }
|
|
.memgrp .hd .lb { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.memgrp .hd .c { font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--ghost) }
|
|
.memgrp > .ds { margin: 3px 0 8px; font: var(--w-reg) var(--fs-meta)/1.6 var(--ui); color: var(--faint) }
|
|
|
|
.memrow { border-top: 1px solid var(--hair) }
|
|
.memrow:last-of-type { border-bottom: 1px solid var(--hair) }
|
|
.memrow .line { display: flex; align-items: baseline; gap: 9px; padding: 8px 12px }
|
|
.memrow .dot {
|
|
flex: none; width: 5px; height: 5px; align-self: center; border-radius: 50%;
|
|
background: transparent; box-shadow: inset 0 0 0 1px var(--hair);
|
|
}
|
|
.memrow[data-used] .dot { background: var(--net); box-shadow: none }
|
|
.memrow .nm {
|
|
flex: 0 1 auto; min-width: 168px; max-width: 60%; padding: 0; border: 0; background: none; text-align: left;
|
|
overflow-wrap: anywhere;
|
|
font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--text); cursor: pointer;
|
|
}
|
|
.memrow .nm:hover { text-decoration: underline }
|
|
.memrow .nm:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs) }
|
|
.memrow .line > .ds { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--muted) }
|
|
.memrow .stale {
|
|
flex: none; padding: 1px 5px; border-radius: var(--r-pill); font: var(--w-med) var(--fs-micro) var(--ui); font-style: normal;
|
|
color: var(--warn-ink); background: color-mix(in srgb, var(--warn) 14%, transparent);
|
|
}
|
|
.memrow .act { flex: none; white-space: nowrap }
|
|
.memrow .sc { flex: none; min-width: 30px; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint) }
|
|
.memrow .at { flex: none; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--ghost); font-variant-numeric: tabular-nums }
|
|
.memrow .why-used { margin: -2px 0 8px 26px; font: var(--w-reg) var(--fs-meta)/1.6 var(--ui); color: var(--net) }
|
|
.memrow .peek { margin: 0 12px 10px 26px }
|
|
.memrow .peek pre {
|
|
margin: 0; padding: 9px 11px; border-radius: var(--r-sm); background: var(--overlay);
|
|
font: var(--w-reg) var(--fs-meta)/1.7 var(--mono); color: var(--muted); white-space: pre-wrap; word-break: break-word;
|
|
}
|
|
.memrow .peek .path { display: block; margin-top: 5px; font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--ghost); word-break: break-all }
|
|
.mem > .why { margin-top: 10px; font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--err-ink) }
|
|
|
|
.memhist { margin: 7px 0 0 12px; padding-left: 10px; border-left: 1px solid var(--hair);
|
|
display: flex; flex-direction: column; gap: 8px }
|
|
.memhist > .ds { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.memhist .histrow { display: grid; grid-template-columns: auto auto 1fr auto; align-items: baseline; gap: 9px }
|
|
.memhist .rev { font: var(--w-med) var(--fs-meta) var(--ui); color: var(--muted); font-variant-numeric: tabular-nums }
|
|
.memhist .at { font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--ghost); font-variant-numeric: tabular-nums }
|
|
.memhist .histrow > .ds { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--muted) }
|
|
.memhist .histrow pre {
|
|
grid-column: 1 / -1; margin: 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--overlay);
|
|
font: var(--w-reg) var(--fs-meta)/1.7 var(--mono); color: var(--faint); white-space: pre-wrap; word-break: break-word;
|
|
}
|
|
.memhist .hint { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost) }
|
|
|
|
.remember { display: flex; flex-direction: column; gap: 2px }
|
|
.remember .ti { font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.remember .ds { font: var(--w-reg) var(--fs-ui)/1.6 var(--ui); color: var(--muted) }
|
|
.call[data-gone] { opacity: .6 }
|
|
.call[data-gone] .remember .ti { text-decoration: line-through; color: var(--faint) }
|
|
|
|
.lrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border-top: 1px solid var(--hair) }
|
|
.lrow .tx { flex: 1 1 12em; min-width: 0; display: flex; flex-direction: column; gap: 2px }
|
|
.lrow .lb { font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.lrow .ds { font: var(--w-reg) var(--fs-meta)/1.55 var(--ui); color: var(--faint) }
|
|
.lrow:last-of-type { border-bottom: 1px solid var(--hair) }
|
|
.lrow .sa { margin-left: auto; flex: none }
|
|
.lrow .sa + .sc { margin-left: 8px }
|
|
.lrow .sc { margin-left: auto; flex: none; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint) }
|
|
|
|
/* The persona prompt boxes are prompt-sized rather than row inputs: full
|
|
width, monospace because the content is prompt text, and draggable because
|
|
a persona can be long. */
|
|
.pers-field { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 0 }
|
|
.pers-field .lb { font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.pers-field .ds { font: var(--w-reg) var(--fs-meta)/1.55 var(--ui); color: var(--faint) }
|
|
.pers-field textarea {
|
|
min-height: 84px; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--r-sm);
|
|
background: var(--raised); color: var(--text); outline: none; resize: vertical;
|
|
font: var(--w-reg) var(--fs-ui)/1.6 var(--mono);
|
|
}
|
|
.pers-field textarea:focus-visible { border-color: var(--focus); box-shadow: 0 0 0 2px color-mix(in oklab, var(--focus) 26%, transparent) }
|
|
.pers-field textarea:disabled { opacity: .6 }
|
|
.box .persona-name { margin: 10px 0 0; font: var(--w-reg) var(--fs-ui)/1.6 var(--ui); color: var(--muted) }
|
|
|
|
.skrow { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--hair) }
|
|
.skrow:last-of-type { border-bottom: 1px solid var(--hair) }
|
|
.skrow[data-off] .nm, .skrow[data-off] .ds { color: var(--ghost) }
|
|
.skrow[data-off] .how, .skrow[data-off] .face { opacity: .45 }
|
|
.skrow .nm { flex: none; min-width: 152px; font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--text) }
|
|
.skrow .ds { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--muted) }
|
|
.skrow .how, .skrow .face { flex: none; display: flex; gap: 5px }
|
|
.skrow .w {
|
|
padding: 1px 6px; border-radius: var(--r-pill); font: var(--w-reg) var(--fs-micro) var(--ui); font-style: normal;
|
|
color: var(--faint); background: var(--overlay);
|
|
}
|
|
.skrow .w.none { color: var(--err-ink); background: color-mix(in srgb, var(--err) 10%, transparent) }
|
|
.skrow .ro {
|
|
padding: 1px 5px; border-radius: var(--r-pill); font: var(--w-med) var(--fs-micro) var(--ui); font-style: normal;
|
|
color: var(--ok-ink); background: color-mix(in srgb, var(--ok) 13%, transparent);
|
|
}
|
|
.skrow .sc { flex: none; min-width: 44px; text-align: right; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint) }
|
|
.skrow .sw { margin-left: 4px; align-self: center }
|
|
.skrow:has(> .skprofile) { flex-wrap: wrap }
|
|
.skprofile { flex-basis: 100%; min-width: 0; font: var(--w-reg) var(--fs-meta)/1.55 var(--ui); color: var(--muted) }
|
|
.skprofile > p { margin: 8px 0 }
|
|
.skprofile > dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 8px 0 0 }
|
|
.skprofile dt { color: var(--faint) }
|
|
.skprofile dd { margin: 0; overflow-wrap: anywhere; font-family: var(--mono) }
|
|
.skprofile code { display: block; font: inherit }
|
|
|
|
.seg {
|
|
display: inline-flex; flex: none; align-self: start; flex-wrap: wrap;
|
|
padding: 2px; gap: 2px; border-radius: var(--r-sm); background: var(--overlay);
|
|
}
|
|
|
|
.seg[data-text] button { font: var(--w-reg) var(--fs-ui) var(--ui) }
|
|
.seg button {
|
|
flex: none; min-width: 0; padding: 4px 11px; border: 0; border-radius: var(--r-xs);
|
|
background: transparent; color: var(--muted); font: var(--w-reg) var(--fs-ui) var(--mono);
|
|
white-space: nowrap; cursor: pointer;
|
|
transition: background var(--m-line), color var(--m-line), box-shadow var(--m-line), transform var(--t-line) var(--ease-spring);
|
|
}
|
|
.seg button:hover:not(:disabled) { color: var(--text) }
|
|
.seg button { --press: scale(.96) }
|
|
|
|
.seg button[aria-pressed="true"], .seg button[aria-checked="true"] {
|
|
background: var(--raised); color: var(--text); font-weight: var(--w-med);
|
|
box-shadow: var(--lit), 0 1px 2px rgb(0 0 0 / .07);
|
|
}
|
|
|
|
.seg button:disabled { cursor: default }
|
|
.seg button[data-locked] { color: var(--ghost); cursor: not-allowed }
|
|
.seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.onb-card, .onb-field, .onb-go, .onb-note, .prefs, .prefs-col { animation: none !important }
|
|
.app[data-prefs] > .chrome, .app[data-prefs] > .cols { transform: none }
|
|
|
|
.vrow, .vnow .lb { animation: none !important; animation-delay: 0s !important }
|
|
|
|
.queue, .qi, .ovf, .tabconfirm, .grp[data-landed] { animation: none !important }
|
|
}
|
|
|
|
.ws[data-busy] { opacity: .5; pointer-events: none }
|
|
.ws-empty { padding: 12px 13px; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost) }
|
|
|
|
.errbar {
|
|
display: flex; align-items: center; gap: 10px; padding: 7px 10px; max-width: min(460px, calc(100% - 24px));
|
|
border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--err) 40%, var(--border));
|
|
background: color-mix(in srgb, var(--err) 9%, var(--surface)); box-shadow: var(--shadow-float);
|
|
font: var(--w-reg) var(--fs-ui)/1.5 var(--ui); color: var(--err-ink);
|
|
animation: card var(--t-card) var(--ease-out) both;
|
|
}
|
|
.errbar span { flex: 1; min-width: 0; word-break: break-word }
|
|
.cmpalert { position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: 6; pointer-events: none }
|
|
.cmpalert > .errbar,
|
|
.composenotes > .errbar {
|
|
position: fixed; right: 16px; bottom: 16px; z-index: 20;
|
|
max-width: min(460px, calc(100vw - 32px)); pointer-events: auto;
|
|
}
|
|
.main > .errbar { position: absolute; right: 16px; bottom: 16px; z-index: 6 }
|
|
.errbar button {
|
|
flex: none; border: 0; background: transparent; cursor: pointer;
|
|
color: var(--err-ink); font: var(--w-med) var(--fs-meta) var(--ui); text-decoration: underline; text-underline-offset: 3px;
|
|
}
|
|
|
|
.rtbar {
|
|
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 9px; padding: 7px 10px;
|
|
border-radius: var(--r-sm); border: 1px solid var(--border);
|
|
background: var(--overlay); font: var(--w-reg) var(--fs-ui)/1.5 var(--ui); color: var(--muted);
|
|
animation: card var(--t-card) var(--ease-out) both;
|
|
}
|
|
.rtbar[data-lvl="warn"] {
|
|
border-color: color-mix(in srgb, var(--warn) 38%, var(--border));
|
|
background: color-mix(in srgb, var(--warn) 8%, transparent);
|
|
color: var(--warn-ink);
|
|
}
|
|
.rtbar .t { flex: 1 1 0; min-width: 12rem; overflow-wrap: anywhere; font-weight: var(--w-med) }
|
|
.rtbar .why { order: 1; flex: 1 0 100%; min-width: 0; color: var(--ghost); word-break: break-word }
|
|
.rtbar button {
|
|
flex: none; border: 0; background: transparent; cursor: pointer; color: inherit;
|
|
font: var(--w-med) var(--fs-meta) var(--ui); text-decoration: underline; text-underline-offset: 3px;
|
|
}
|
|
.stallbar .why { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
|
|
.posturenote { flex-wrap: wrap; row-gap: 2px; margin: 0 0 9px }
|
|
.posturenote .why { order: 1; flex-basis: 100% }
|
|
.posturenote button:first-of-type { margin-left: auto }
|
|
|
|
.rc { margin: 4px 0 2px }
|
|
.rc-ok {
|
|
display: flex; flex-direction: row; align-items: baseline; gap: 8px;
|
|
font: var(--w-reg) var(--fs-ui)/1.6 var(--ui); color: var(--ghost); background: none; border: 0; padding: 0; text-align: start; cursor: pointer;
|
|
}
|
|
.rc-ok .rc-tick { flex: none; color: var(--rc-c, var(--ok)) }
|
|
.rc-ok .rc-t { flex: none }
|
|
.rc-ok .rc-src { min-width: 0; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
.rc-hd { padding: 8px 0 2px; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost) }
|
|
.rc-more { padding: var(--y-close) 0 0 12px; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost) }
|
|
|
|
.md > :first-child { margin-top: 0 }
|
|
.md > :last-child { margin-bottom: 0 }
|
|
.md p { margin: 0 0 .7em }
|
|
.md h1, .md h2, .md h3, .md h4 {
|
|
margin: 1.1em 0 .5em; font-weight: var(--w-semi); line-height: 1.35; color: var(--text);
|
|
}
|
|
|
|
.md h1 { font-size: calc(var(--read) * 1.38) } .md h2 { font-size: calc(var(--read) * 1.2) }
|
|
.md h3 { font-size: calc(var(--read) * 1.06) }
|
|
.md h4 { font-size: var(--read); color: var(--muted) }
|
|
.md ul, .md ol { margin: 0 0 .7em; padding-inline-start: 1.4em }
|
|
.md li { margin: .18em 0 }
|
|
.md li::marker { color: var(--ghost) }
|
|
.md strong { font-weight: var(--w-semi); color: var(--text-strong, var(--text)) }
|
|
.md em { font-style: italic }
|
|
.md del { color: var(--faint) }
|
|
.md hr { height: 1px; margin: 1em 0; border: 0; background: var(--hair) }
|
|
.md blockquote {
|
|
margin: 0 0 .7em; padding-block: 2px; padding-inline: 11px 0;
|
|
border-inline-start: 2px solid var(--border); color: var(--faint);
|
|
}
|
|
|
|
.code-wrap {
|
|
position: relative; margin: 0 0 .7em; overflow: hidden;
|
|
border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--face-code);
|
|
transition: border-color var(--m-line);
|
|
}
|
|
.code-wrap:hover { border-color: color-mix(in oklab, var(--border), var(--muted) 34%) }
|
|
.code-hd {
|
|
display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 6px 0 12px;
|
|
border-bottom: 1px solid var(--hair); background: color-mix(in oklab, var(--face-code), var(--text) 3%);
|
|
}
|
|
.code-lang { font: var(--w-med) var(--fs-meta) var(--ui); color: var(--muted) }
|
|
.code-lines { font: var(--w-reg) var(--fs-micro) var(--ui); color: var(--ghost) }
|
|
.code-acts { display: flex; gap: 2px; margin-inline-start: auto }
|
|
.code-act {
|
|
display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
|
|
border: 0; border-radius: var(--r-sm); background: transparent; color: var(--faint); cursor: pointer;
|
|
transition: color var(--m-line), background var(--m-line);
|
|
}
|
|
.code-act:hover, .code-act:focus-visible { color: var(--text); background: var(--overlay) }
|
|
.code-act .studio-icon { width: 14px; height: 14px }
|
|
.code-act[data-state="done"] { color: var(--ok) }
|
|
.code-body { display: flex; align-items: flex-start }
|
|
.code-gutter {
|
|
flex: none; padding: 11px 10px 12px 12px; text-align: end;
|
|
font: var(--w-reg) var(--fs-ui)/calc(19px * var(--fs-scale, 1)) var(--mono); color: var(--ghost); user-select: none;
|
|
border-inline-end: 1px solid var(--hair);
|
|
}
|
|
.code-gutter > span { display: block }
|
|
.code-body > pre.term { flex: 1; min-width: 0; margin: 0; border-radius: 0; background: none; tab-size: 4 }
|
|
.code-wrap[data-folded] .code-body {
|
|
max-height: calc(19px * 12 + 11px); overflow: hidden;
|
|
mask-image: linear-gradient(to bottom, #000 72%, transparent);
|
|
}
|
|
.code-more {
|
|
display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 30px;
|
|
border: 0; border-top: 1px solid var(--hair); background: transparent; color: var(--faint);
|
|
font: var(--w-reg) var(--fs-meta) var(--ui); cursor: pointer;
|
|
transition: color var(--m-line), background var(--m-line);
|
|
}
|
|
.code-more:hover, .code-more:focus-visible { color: var(--text); background: var(--overlay) }
|
|
.code-more .studio-icon { width: 13px; height: 13px; transform: rotate(90deg); transition: transform var(--m-line) }
|
|
.code-more[aria-expanded="true"] .studio-icon { transform: rotate(-90deg) }
|
|
.md pre.term code { font: inherit; color: inherit; white-space: pre }
|
|
.md pre.term .hljs-comment, .md pre.term .hljs-quote { color: var(--faint); font-style: italic }
|
|
.md pre.term :is(.hljs-punctuation, .hljs-operator, .hljs-meta, .hljs-params, .hljs-subst) { color: var(--muted) }
|
|
.md pre.term :is(.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag, .hljs-variable.language_) { color: var(--syn-key) }
|
|
.md pre.term :is(.hljs-string, .hljs-regexp, .hljs-char.escape_, .hljs-addition, .hljs-attribute, .hljs-meta .hljs-string) { color: var(--syn-str) }
|
|
.md pre.term :is(.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-selector-attr, .hljs-template-variable) { color: var(--syn-num) }
|
|
.md pre.term :is(.hljs-title, .hljs-name, .hljs-section, .hljs-built_in, .hljs-type, .hljs-class, .hljs-attr, .hljs-property, .hljs-tag, .hljs-selector-class, .hljs-selector-id) { color: var(--syn-fn) }
|
|
.md pre.term .hljs-deletion { color: var(--del) }
|
|
.md pre.term :is(.hljs-strong, .hljs-title.function_, .hljs-title.class_) { font-weight: var(--w-med) }
|
|
.md pre.term .hljs-emphasis { font-style: italic }
|
|
|
|
.md mark { background: var(--accent-wash); color: var(--text); padding: 0 2px; border-radius: var(--r-xs) }
|
|
.md sub, .md sup { font-size: .75em; line-height: 0 }
|
|
.md kbd {
|
|
font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--muted); padding: 1px 5px;
|
|
border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--r-xs);
|
|
}
|
|
|
|
.md .katex { font-size: 1.02em }
|
|
.md .katex-display { margin: .6em 0; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px }
|
|
|
|
.md-tw { margin: 0 0 .7em; overflow-x: auto }
|
|
|
|
.md table { border-collapse: collapse; font-size: var(--fs-ui) }
|
|
.md th, .md td {
|
|
padding: 6px 16px 6px 0; text-align: left; border-bottom: 1px solid var(--hair); white-space: nowrap;
|
|
}
|
|
.md th { color: var(--faint); font: var(--w-med) var(--fs-meta) var(--ui); border-bottom-color: var(--border) }
|
|
.md td { color: var(--muted) }
|
|
.md tr:last-child td { border-bottom: 0 }
|
|
.md a { color: var(--link); text-decoration: underline; text-underline-offset: 2px }
|
|
.md a:hover { color: var(--text) }
|
|
.md a code, .out .txt a code { color: inherit }
|
|
.md img { max-width: 100%; border-radius: var(--r-sm) }
|
|
.md .md-outside-image { display: inline-block; padding: 1px 8px; border: 1px dashed var(--hair); border-radius: var(--r-sm); color: var(--muted); cursor: help }
|
|
|
|
.md > :last-child::after { content: "" }
|
|
.md .caret { margin-left: 2px; vertical-align: -2px }
|
|
|
|
.acct { display: flex; flex-direction: column; gap: 11px }
|
|
.acct-who { display: flex; align-items: baseline; gap: 9px }
|
|
.acct-who .nm { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.acct-who .em { font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--muted) }
|
|
.acct-note { font: var(--w-reg) var(--fs-ui)/1.6 var(--ui); color: var(--muted); margin: 0 }
|
|
.acct-note[data-err] { color: var(--err-ink) }
|
|
|
|
.bk { display: flex; flex-direction: column; gap: 12px }
|
|
.bk-cats { display: flex; flex-direction: column; border-top: 1px solid var(--hair) }
|
|
.bk-cat { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; row-gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--hair); cursor: pointer }
|
|
.bk-cat input { grid-row: span 2; margin-top: 3px }
|
|
.bk-cat .nm { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.bk-cat .why { font: var(--w-reg) var(--fs-meta)/1.55 var(--ui); color: var(--muted) }
|
|
.bk-cat[data-warn] .why { color: var(--warn-ink) }
|
|
.bk-fields { display: flex; flex-wrap: wrap; gap: 10px }
|
|
.bk-fields label { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 150px }
|
|
.bk-fields label.full { flex-basis: 100% }
|
|
.bk-fields span { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.bk-fields input {
|
|
padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--r-xs);
|
|
background: var(--raised); color: var(--text); font: var(--w-reg) var(--fs-ui) var(--ui);
|
|
}
|
|
.bk-fields input:focus { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.bk-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px }
|
|
.bk-acts .act[data-primary] { border-color: var(--accent); background: var(--accent); color: var(--accent-fg) }
|
|
.bk-acts .act[data-primary]:disabled { border-color: var(--border); background: transparent; color: var(--ghost) }
|
|
.bk-list, .bk-plan { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair) }
|
|
.bk-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--hair) }
|
|
.bk-row .who { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0 }
|
|
.bk-row .nm { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.bk-row .meta { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--muted); overflow-wrap: anywhere }
|
|
.bk-restore { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-sm) }
|
|
.bk-item { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--hair) }
|
|
.bk-item .take { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; cursor: pointer }
|
|
.bk-item .cat { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.bk-item .nm { font: var(--w-med) var(--fs-ui) var(--mono); color: var(--text); overflow-wrap: anywhere }
|
|
.bk-item .st { margin-left: auto; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--muted) }
|
|
.bk-item[data-status="same"] .nm { color: var(--muted) }
|
|
.bk-item .sum, .bk-item .prev code { font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--text); overflow-wrap: anywhere; padding-left: 22px }
|
|
.bk-item .prev { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--muted); padding-left: 22px }
|
|
.bk-item .prev code { padding-left: 4px }
|
|
.bk-item .body { margin: 0 0 0 22px; max-height: 180px; overflow: auto; padding: 8px 10px; border-radius: var(--r-xs); background: var(--overlay); font: var(--w-reg) var(--fs-meta)/1.5 var(--mono); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere }
|
|
.bk-item .warn { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--warn-ink); padding-left: 22px }
|
|
.bk-item .allow { display: flex; align-items: center; gap: 7px; margin-left: 22px; padding: 6px 8px; border-radius: var(--r-xs); background: var(--overlay); font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--text); cursor: pointer }
|
|
.acct-act { display: flex; align-items: center; gap: 11px; flex-wrap: wrap }
|
|
.acct-code { display: flex; flex-direction: column; gap: 9px; align-items: flex-start }
|
|
|
|
.acct-code .cd {
|
|
font: var(--w-semi) var(--fs-display)/1 var(--mono); letter-spacing: .16em; color: var(--text);
|
|
padding: 11px 14px; border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--overlay);
|
|
}
|
|
|
|
.vers { display: flex; flex-direction: column; gap: 11px; container: versions / inline-size }
|
|
.vnow { display: flex; align-items: baseline; gap: 9px }
|
|
.vnow .cur { font: var(--w-semi) var(--fs-display)/1 var(--mono); letter-spacing: .01em; color: var(--text) }
|
|
|
|
.vnow .lb { font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--muted); animation: card var(--t-card) var(--ease-out) .07s both }
|
|
.vnow .pin {
|
|
font: var(--w-med) var(--fs-micro) var(--ui); letter-spacing: var(--track-cap); color: var(--ok-ink);
|
|
padding: 2px 6px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--ok);
|
|
}
|
|
|
|
.vers .find .acts { display: flex; gap: 8px; margin: 8px 0 0; align-items: center }
|
|
.vlist {
|
|
display: grid; margin-top: 3px; column-gap: 10px;
|
|
grid-template-columns: minmax(104px, max-content) minmax(0, 1fr) max-content minmax(0, max-content);
|
|
}
|
|
.vrow {
|
|
grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline;
|
|
padding: 9px 12px; border-top: 1px solid var(--hair);
|
|
animation: card var(--t-card) var(--ease-out) both;
|
|
}
|
|
.vrow:last-of-type { border-bottom: 1px solid var(--hair) }
|
|
.vlist .vmore { margin: 10px 0 0 12px }
|
|
.vrow[data-on] { box-shadow: inset 2px 0 0 var(--accent); background: var(--accent-wash) }
|
|
.vrow .nm { grid-column: 1; font: var(--w-reg) var(--fs-ui) var(--mono); color: var(--muted) }
|
|
|
|
.vrow[data-on] .nm { font-weight: var(--w-med); color: var(--text) }
|
|
.vrow[data-on] .sc { color: var(--muted) }
|
|
.vrow[data-side="ahead"] .nm { color: var(--text) }
|
|
.vrow[data-side="past"] .nm, .vrow[data-side="past"] .ds { color: var(--faint) }
|
|
.vrow .ds { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--muted) }
|
|
.vrow .sc { grid-column: 3; justify-self: end; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint) }
|
|
|
|
.vrow .sa {
|
|
grid-column: 4; justify-self: start; max-width: 100%; margin-left: 0;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
opacity: 0; transition: opacity var(--t-line) var(--ease-out);
|
|
}
|
|
.vrow:hover .sa, .vrow .sa:focus-visible, .vrow .sa[data-keep] { opacity: 1 }
|
|
@container versions (max-width: 600px) {
|
|
.vlist { grid-template-columns: max-content minmax(min-content, 1fr) max-content }
|
|
.vrow { position: relative }
|
|
.vrow .ds { white-space: normal }
|
|
.vrow .sa { grid-column: 1 / -1; grid-row: 2; margin-top: 4px }
|
|
@media (hover: hover) {
|
|
.vrow .sa:not([data-keep]) { grid-area: auto; position: absolute; right: 12px; top: 50%; translate: 0 -50%; margin: 0; max-width: 62% }
|
|
.vrow:has(> .sa:not([data-keep])):is(:hover, :focus-within) :is(.ds, .sc) { visibility: hidden }
|
|
}
|
|
}
|
|
@media (hover: none) { .vrow .sa { opacity: 1 } }
|
|
|
|
.find .lnk { margin-left: 6px }
|
|
.vrow .sa.lnk { text-decoration: none }
|
|
|
|
.hl .fail {
|
|
font: var(--w-med) var(--fs-micro) var(--mono); letter-spacing: var(--track-cap); text-transform: uppercase;
|
|
padding: 1.5px 5px; border-radius: var(--r-xs); flex: none;
|
|
color: color-mix(in oklab, var(--err-ink) 75%, var(--text)); background: color-mix(in srgb, var(--err) 13%, transparent);
|
|
}
|
|
|
|
.extcard, .extform { margin-top: 7px; display: flex; flex-direction: column; gap: 8px }
|
|
.exttext { font-size: var(--fs-ui); line-height: 1.6; color: var(--text); white-space: pre-wrap }
|
|
.extbar {
|
|
display: block; margin-top: 5px; height: 3px; border-radius: var(--r-pill);
|
|
background: var(--overlay); overflow: hidden;
|
|
}
|
|
.extbar > i { display: block; height: 100%; background: var(--deleg); transition: width var(--t-card) var(--ease) }
|
|
.extkv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: var(--fs-ui) }
|
|
.extkv > div { display: contents }
|
|
.extkv dt { color: var(--muted); font-family: var(--mono); font-size: var(--fs-ui) }
|
|
.extkv dd { margin: 0; color: var(--text); overflow-wrap: anywhere }
|
|
.extacts, .extfoot { display: flex; flex-wrap: wrap; gap: 6px }
|
|
.extfield { display: flex; flex-direction: column; gap: 4px }
|
|
.extlabel { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.extlabel .req, .extfield .req { color: var(--err-ink); font-style: normal; margin-left: 3px }
|
|
.extfield input {
|
|
font: var(--fs-ui) var(--ui); color: var(--text); background: var(--surface);
|
|
border: 1px solid var(--border); border-radius: var(--r-sm); padding: 5px 8px;
|
|
}
|
|
.extfield input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.extform[data-sealed] { opacity: .72 }
|
|
|
|
.palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 14px 12px }
|
|
[data-setting="scheme"] .palettes { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)) }
|
|
.theme-more {
|
|
margin-top: 4px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
|
|
}
|
|
.theme-more > summary {
|
|
display: flex; align-items: center; justify-content: space-between; gap: 16px;
|
|
padding: 11px 2px; list-style: none; cursor: pointer; color: var(--muted);
|
|
}
|
|
.theme-more > summary::-webkit-details-marker { display: none }
|
|
.theme-more > summary::before {
|
|
content: ""; width: 6px; height: 6px; flex: none; margin-right: -7px;
|
|
border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
|
|
transform: rotate(-45deg); transition: transform var(--m-line);
|
|
}
|
|
.theme-more[open] > summary::before { transform: rotate(45deg) }
|
|
.theme-more > summary > span:first-of-type { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 }
|
|
.theme-more > summary b { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.theme-more > summary em { font: var(--w-reg) var(--fs-meta) var(--ui); font-style: normal; color: var(--faint) }
|
|
.theme-more > .palettes { padding: 5px 0 15px }
|
|
.personal { margin-top: 12px }
|
|
.personal > .grp { border-top: 1px solid var(--hair); margin-top: 0 }
|
|
.pal { display: flex; flex-direction: column; gap: 7px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer }
|
|
.pal-art {
|
|
position: relative; display: flex; aspect-ratio: 16 / 10; overflow: hidden;
|
|
border: 1px solid var(--border); border-radius: var(--r-sm);
|
|
background: var(--pal-page, var(--page));
|
|
transition: border-color var(--m-line) , box-shadow var(--m-line) ;
|
|
}
|
|
.pal:hover .pal-art { border-color: color-mix(in srgb, var(--pal-accent, var(--accent)) 55%, var(--border)) }
|
|
.pal[data-on] .pal-art { border-color: var(--pal-accent, var(--accent)); box-shadow: 0 0 0 1px var(--pal-accent, var(--accent)) }
|
|
|
|
.pal[data-on] .pal-art::after {
|
|
content: ""; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%;
|
|
background: var(--pal-accent, var(--accent)); box-shadow: 0 0 0 2px var(--pal-page, var(--page));
|
|
}
|
|
.pal-rail { flex: none; width: 26px; background: var(--pal-surface, var(--surface)); border-right: 1px solid var(--pal-border, var(--hair)) }
|
|
.pal-body {
|
|
flex: 1; display: flex; flex-direction: column; gap: 5px; margin: 10px; padding: 9px 8px;
|
|
border: 1px solid var(--pal-border, var(--hair)); border-radius: var(--r-xs);
|
|
background: var(--pal-panel, var(--raised));
|
|
}
|
|
.pal-line { height: 4px; border-radius: var(--r-sm); background: var(--pal-text, var(--text)); opacity: .78 }
|
|
.pal-line[data-short] { width: 58%; background: var(--pal-dim, var(--muted)); opacity: .72 }
|
|
.pal-mark { margin-top: auto; width: 34%; height: 5px; border-radius: var(--r-sm); background: var(--pal-accent, var(--accent)) }
|
|
.pal-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
|
|
|
|
.pal-nm { display: block; min-width: 0; font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--muted) }
|
|
|
|
.pal-nm b, .pal-nm em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 16px }
|
|
.pal-nm b { font-weight: var(--w-reg) }
|
|
.pal[data-on] .pal-nm b { color: var(--text) }
|
|
.pal-nm em { margin-top: 2px; font: var(--w-reg) var(--fs-meta)/calc(16px * var(--fs-scale, 1)) var(--ui); font-style: normal; color: var(--ghost) }
|
|
|
|
.extpanel { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 }
|
|
.extpanel + .extpanel { border-top: 1px solid var(--hair) }
|
|
.extpanel-hd { display: flex; align-items: baseline; gap: 6px }
|
|
.extpanel-hd .nm { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.extpanel-hd .src { font: var(--fs-meta) var(--mono); color: var(--faint) }
|
|
.extpanel-tx { font-size: var(--fs-ui); line-height: 1.5; color: var(--muted) }
|
|
.extpanel .extkv { font-size: var(--fs-ui) }
|
|
.extpanel .btn { padding: 2px 7px; font-size: var(--fs-meta) }
|
|
|
|
.xview { display: flex; flex-direction: column; gap: 7px; min-width: 0 }
|
|
.xv-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0 }
|
|
.xv-stack { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
|
|
.xv-t { font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--text); min-width: 0; overflow-wrap: anywhere }
|
|
.xv-t[data-tone="dim"] { color: var(--faint) }
|
|
.xv-t[data-tone="strong"] { font-weight: var(--w-med) }
|
|
.xv-t[data-tone="ok"] { color: var(--ok-ink) }
|
|
.xv-t[data-tone="warn"] { color: var(--warn-ink) }
|
|
.xv-t[data-tone="err"] { color: var(--err-ink) }
|
|
.xv-t[data-tone="accent"] { color: var(--accent-ink) }
|
|
|
|
.xv-md { margin: 0; font: var(--w-reg) var(--fs-ui)/1.6 var(--ui); color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere }
|
|
.xv-kv { display: flex; align-items: baseline; gap: 9px; font: var(--w-reg) var(--fs-ui) var(--ui) }
|
|
.xv-kv .k { flex: none; min-width: 84px; color: var(--faint) }
|
|
.xv-kv .v { color: var(--text); font-family: var(--mono); overflow-wrap: anywhere }
|
|
.xv-meter { position: relative; min-height: 4px; padding-top: 4px }
|
|
.xv-meter::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: var(--r-pill); background: var(--overlay) }
|
|
.xv-meter > i { position: absolute; left: 0; top: 0; display: block; height: 4px; border-radius: var(--r-pill); background: var(--deleg); transition: width var(--t-card) var(--ease) }
|
|
.xv-meter .lb { display: block; margin-top: 5px; text-align: right; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost) }
|
|
.xv-hr { margin: 2px 0; border: 0; border-top: 1px solid var(--hair) }
|
|
.xview .pip[data-tone="ok"] { background: var(--ok) }
|
|
.xview .pip[data-tone="warn"] { background: var(--warn) }
|
|
.xview .pip[data-tone="err"] { background: var(--err) }
|
|
.xview .pip[data-tone="accent"] { background: var(--accent-ink) }
|
|
|
|
.slotrail {
|
|
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
|
|
padding: 4px 2px 6px; max-height: 84px; overflow-y: auto;
|
|
}
|
|
.slotrail .xview { flex-direction: row; align-items: center; gap: 8px }
|
|
|
|
.slotted { position: relative; display: flex; align-items: center; gap: 6px }
|
|
.movegrip {
|
|
flex: none; padding: 0 4px; border: 0; background: none; cursor: pointer;
|
|
color: transparent; font: var(--w-reg) var(--fs-ui) var(--ui); line-height: 1; transition: color var(--m-line);
|
|
}
|
|
.slotted:hover .movegrip, .movegrip:focus-visible { color: var(--ghost) }
|
|
.movegrip:hover { color: var(--muted) }
|
|
.movemenu {
|
|
position: absolute; right: 0; bottom: calc(100% + 4px); z-index: 30;
|
|
display: flex; flex-direction: column; min-width: 132px; padding: 4px;
|
|
border: 1px solid var(--border); border-radius: var(--r-sm);
|
|
background: var(--float); box-shadow: var(--shadow-float);
|
|
transition: opacity var(--t-card) var(--ease-out),
|
|
transform var(--t-card) var(--ease-out),
|
|
display var(--t-card) allow-discrete;
|
|
}
|
|
.movemenu[hidden] {
|
|
display: none; opacity: 0; pointer-events: none;
|
|
transform: translateY(-4px) scaleY(.985);
|
|
}
|
|
@starting-style {
|
|
.movemenu:not([hidden]) { opacity: 0; transform: translateY(-4px) scaleY(.985) }
|
|
}
|
|
.movemenu .who { padding: 3px 8px 5px; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--ghost) }
|
|
.movemenu button {
|
|
padding: 5px 8px; border: 0; border-radius: var(--r-xs); background: none;
|
|
color: var(--muted); font: var(--w-reg) var(--fs-ui) var(--ui); text-align: left; cursor: pointer;
|
|
}
|
|
.movemenu button:hover { background: var(--float-hi); color: var(--text) }
|
|
.movemenu button[aria-checked="true"] { color: var(--text) }
|
|
.movemenu button[aria-checked="true"]::after { content: " ·" }
|
|
|
|
.drawnby { margin-top: 6px; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost) }
|
|
|
|
.oobe {
|
|
position: fixed; inset: 0; z-index: 90; overflow: hidden;
|
|
background: #05060A; color: #fff; isolation: isolate;
|
|
display: grid; grid-template-rows: auto auto; justify-items: center;
|
|
align-content: safe center; row-gap: 30px; padding-block: 26px;
|
|
overflow: hidden auto;
|
|
}
|
|
.oobe[data-leaving] { animation: oobeout var(--m-panel) forwards }
|
|
@keyframes oobeout { to { opacity: 0; visibility: hidden } }
|
|
|
|
.oobe-glow {
|
|
position: fixed; border-radius: 50%; pointer-events: none; z-index: 0;
|
|
filter: blur(80px); will-change: transform;
|
|
}
|
|
.oobe-glow.g1 { width: 46%; aspect-ratio: 1; left: 4%; top: -12%;
|
|
background: radial-gradient(circle, rgba(221,161,68,.62), transparent 68%) }
|
|
.oobe-glow.g2 { width: 52%; aspect-ratio: 1; right: -6%; top: 18%;
|
|
background: radial-gradient(circle, rgba(66,102,214,.55), transparent 68%) }
|
|
.oobe-glow.g3 { width: 40%; aspect-ratio: 1; left: 22%; bottom: -18%;
|
|
background: radial-gradient(circle, rgba(62,169,186,.42), transparent 70%) }
|
|
.oobe[data-play] .g1 { animation: drift1 24s ease-in-out infinite }
|
|
.oobe[data-play] .g2 { animation: drift2 30s ease-in-out infinite }
|
|
.oobe[data-play] .g3 { animation: drift3 27s ease-in-out infinite }
|
|
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(14%,16%) scale(1.22) } }
|
|
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1.1) } 50% { transform: translate(-16%,-12%) scale(.92) } }
|
|
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(.95) } 50% { transform: translate(10%,-18%) scale(1.18) } }
|
|
|
|
.oobe-vig {
|
|
position: fixed; inset: 0; z-index: 1; pointer-events: none;
|
|
background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(3,4,7,.72) 100%);
|
|
}
|
|
.oobe-scene {
|
|
position: relative; z-index: 2; display: grid; place-items: center;
|
|
text-align: center; padding: 0 40px; width: 100%;
|
|
}
|
|
|
|
.oobe-lockup { display: grid; justify-items: center; }
|
|
.oobe-mark {
|
|
display: block; margin: 0 auto; width: 300px; aspect-ratio: 1692.66 / 392.25;
|
|
filter: drop-shadow(0 0 18px rgb(1 83 229 / .45));
|
|
}
|
|
.oobe[data-play] .oobe-mark {
|
|
opacity: 0;
|
|
animation: oobebrand .9s var(--ease-out) .25s forwards,
|
|
oobelume 1.6s ease-in-out 1.25s forwards;
|
|
}
|
|
@keyframes oobelume {
|
|
0% { filter: drop-shadow(0 0 5px rgb(255 215 130 / .9)) brightness(1.45) }
|
|
32% { filter: drop-shadow(0 0 26px rgb(255 233 184 / .85)) brightness(1.25) }
|
|
100% { filter: drop-shadow(0 0 18px rgb(1 83 229 / .45)) brightness(1) }
|
|
}
|
|
|
|
.oobe-brand {
|
|
margin: 16px 0 0; font: 650 var(--fs-display)/1 var(--mono); letter-spacing: .21em;
|
|
text-transform: uppercase; white-space: nowrap;
|
|
color: rgb(255 255 255 / .72);
|
|
}
|
|
|
|
.oobe-sub {
|
|
margin: 14px 0 0; font: 400 var(--fs-ui) var(--mono); letter-spacing: .01em;
|
|
color: rgb(255 255 255 / .48);
|
|
}
|
|
.oobe[data-play] .oobe-brand {
|
|
opacity: 0;
|
|
animation: oobebrand .9s var(--ease-out) 1.5s forwards;
|
|
}
|
|
.oobe[data-play] .oobe-sub { opacity: 0; animation: ooberise .8s var(--ease-out) 2.1s forwards }
|
|
@keyframes oobebrand { from { opacity: 0; transform: translateY(10px); filter: blur(6px) }
|
|
to { opacity: 1; transform: none; filter: none } }
|
|
@keyframes ooberise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
|
|
|
|
.oobe-lines { position: relative; height: 96px; width: 100%; margin-top: 4px }
|
|
.oobe-line { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0 }
|
|
.oobe-line b { display: block; font: 300 calc(30px * var(--fs-scale, 1))/1.35 var(--ui); color: #fff }
|
|
.oobe-line span { display: block; margin-top: 12px; max-width: 40ch;
|
|
font: 300 var(--fs-lead)/1.7 var(--ui); color: rgb(255 255 255 / .5) }
|
|
.oobe[data-play] .l1 { animation: oobesay 2.6s var(--ease-out) 4s forwards }
|
|
.oobe[data-play] .l2 { animation: oobesay 2.6s var(--ease-out) 6s forwards }
|
|
.oobe[data-play] .l3 { animation: oobesay 2.4s var(--ease-out) 8s forwards }
|
|
@keyframes oobesay { 0% { opacity: 0; transform: translateY(12px); filter: blur(4px) }
|
|
18%,72% { opacity: 1; transform: none; filter: none }
|
|
100% { opacity: 0; transform: translateY(-10px); filter: blur(3px) } }
|
|
|
|
.oobe[data-play][data-held] .oobe-scene { animation: oobecollapse .85s var(--ease-out) 9.6s forwards }
|
|
.oobe[data-play][data-held] .oobe-lines { animation: oobeshrink .85s var(--ease-out) 9.6s forwards }
|
|
@keyframes oobecollapse { to { transform: translateY(calc(-14vh / var(--zoom, 1))) scale(.62); opacity: .96 } }
|
|
@keyframes oobeshrink { to { height: 0; opacity: 0 } }
|
|
|
|
.oobe:not([data-play])[data-held] .oobe-scene { transform: translateY(calc(-14vh / var(--zoom, 1))) scale(.62) }
|
|
.oobe:not([data-play])[data-held] .oobe-lines { height: 0; opacity: 0 }
|
|
|
|
.oobe-prog {
|
|
position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 2;
|
|
width: 148px; height: 2px; border-radius: var(--r-sm); background: rgb(255 255 255 / .1); overflow: hidden;
|
|
}
|
|
.oobe-prog i { display: block; height: 100%; width: 0; border-radius: var(--r-sm);
|
|
background: linear-gradient(90deg, rgba(221,161,68,.35), #FFE0A0) }
|
|
.oobe[data-play] .oobe-prog i { animation: oobefill 9.4s linear forwards }
|
|
.oobe[data-play] .oobe-prog,
|
|
.oobe[data-play] .oobe-skip { animation: oobegone var(--m-panel) 9.5s forwards }
|
|
@keyframes oobefill { to { width: 100% } }
|
|
@keyframes oobegone { to { opacity: 0; visibility: hidden } }
|
|
.oobe-skip { position: absolute; right: 18px; bottom: 16px; z-index: 3;
|
|
font: var(--w-reg) var(--fs-meta) var(--mono); color: rgb(255 255 255 / .56) }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.oobe[data-play] * { animation: none !important }
|
|
.oobe[data-play] .oobe-mark,
|
|
.oobe[data-play] .oobe-brand,
|
|
.oobe[data-play] .oobe-sub { opacity: 1 }
|
|
.oobe[data-play] .oobe-mark { filter: drop-shadow(0 0 18px rgb(1 83 229 / .45)) }
|
|
.oobe[data-play][data-held] .oobe-scene { transform: translateY(calc(-14vh / var(--zoom, 1))) scale(.62) }
|
|
.oobe[data-play][data-held] .oobe-lines { height: 0; opacity: 0 }
|
|
.oobe[data-play][data-held] .onb { opacity: 1 }
|
|
}
|
|
[data-fold~="scene"] .oobe-mark { width: 240px }
|
|
[data-fold~="scene"] .oobe-brand { font-size: var(--fs-title) }
|
|
[data-fold~="scene"] .oobe-line b { font-size: var(--fs-display) }
|
|
|
|
.onb-chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100% }
|
|
.onb-chip {
|
|
font: var(--w-reg) var(--fs-ui) var(--ui); color: rgb(255 255 255 / .62); cursor: pointer;
|
|
padding: 5px 12px; border-radius: var(--r-pill);
|
|
background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .12);
|
|
transition: color var(--t-line) var(--ease), border-color var(--t-line) var(--ease);
|
|
}
|
|
.onb-chip:hover { color: #fff; border-color: rgb(255 255 255 / .26) }
|
|
.onb-chip[aria-pressed="true"] {
|
|
color: #FFE0A0; background: rgb(221 161 68 / .13); border-color: rgb(221 161 68 / .55);
|
|
}
|
|
.onb-chip[data-custom] { border-style: dashed }
|
|
|
|
.onb-field .lb { font: var(--w-reg) var(--fs-meta) var(--mono); color: rgb(255 255 255 / .48); letter-spacing: var(--track-lead) }
|
|
.onb-pick .picker { display: block }
|
|
|
|
.onb-pick > .picker > button {
|
|
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
|
|
padding: 9px 11px; border-radius: var(--r-sm); cursor: pointer;
|
|
font: var(--w-reg) var(--fs-ui) var(--mono); color: #fff; text-align: left;
|
|
background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .14);
|
|
}
|
|
.onb-pick > .picker > button::after {
|
|
content: ""; flex: none; width: 7px; height: 7px; margin-right: 1px;
|
|
border-right: 1.4px solid rgb(255 255 255 / .4); border-bottom: 1.4px solid rgb(255 255 255 / .4);
|
|
transform: translateY(-2px) rotate(45deg);
|
|
}
|
|
.onb-pick > .picker > button:hover { border-color: rgb(255 255 255 / .26) }
|
|
.onb-pick > .picker > button[aria-expanded="true"] { border-color: rgb(221 161 68 / .55) }
|
|
.onb-pick[data-busy] { opacity: .45; pointer-events: none }
|
|
|
|
.onb-pick .menu {
|
|
background: #12151C; color: #fff;
|
|
border-color: rgb(255 255 255 / .14);
|
|
box-shadow: 0 18px 40px -14px rgb(0 0 0 / .7);
|
|
}
|
|
.onb-pick .mi .lb { color: rgb(255 255 255 / .92) }
|
|
.onb-pick .mi .ds, .onb-pick .mi .rt { color: rgb(255 255 255 / .5) }
|
|
.onb-pick .mi .dot { background: rgb(255 255 255 / .22) }
|
|
.onb-pick .mi[data-on] .dot, .onb-pick .mi[data-on] .rt { background: #DDA144; color: #FFE0A0 }
|
|
.onb-pick .mi[data-on] .rt { background: none }
|
|
.onb-pick .mi:hover, .onb-pick .mi[data-lead] { background: rgb(255 255 255 / .07) }
|
|
.onb-pick .mfind {
|
|
background: #12151C; color: #fff;
|
|
border-bottom-color: rgb(255 255 255 / .1);
|
|
}
|
|
.onb-pick .mfind::placeholder { color: rgb(255 255 255 / .3) }
|
|
.onb-pick .mnone { color: rgb(255 255 255 / .4) }
|
|
.onb-found {
|
|
width: 100%; display: grid; gap: 7px; padding: 11px 13px; text-align: left;
|
|
border-radius: var(--r-sm); background: rgb(255 255 255 / .05);
|
|
border: 1px solid rgb(255 255 255 / .14);
|
|
}
|
|
.onb-found-hd { display: flex; align-items: center; gap: 8px; font-size: var(--fs-ui); color: rgb(255 255 255 / .86) }
|
|
.onb-found-hd .tick { color: #52B87C; font-weight: var(--w-semi) }
|
|
.onb-found-hd .k { font: var(--w-reg) var(--fs-meta) var(--mono); color: rgb(255 255 255 / .36) }
|
|
.onb-why { margin: 0; font: var(--w-reg) var(--fs-ui)/1.65 var(--ui); color: rgb(255 255 255 / .5) }
|
|
|
|
.panes { position: relative; flex: 1; min-height: 0 }
|
|
.panes > .pane { transition: opacity var(--m-line) }
|
|
.panes[aria-busy="true"] > .pane[data-active] { opacity: .6; transition-delay: var(--t-card) }
|
|
.pane {
|
|
position: absolute; inset: 0; min-width: 0; min-height: 0;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
.pane[data-off] { visibility: hidden; pointer-events: none }
|
|
.pane[data-off] .call[data-running] > .g .sym,
|
|
.pane[data-off] .glowring i,
|
|
.pane[data-off] :is(.await i, .caret) { animation-play-state: paused !important }
|
|
|
|
.pane:not([data-off]) { view-transition-name: pane }
|
|
[data-vt="tab"] .pane:not([data-off]) .scroll[data-pane]:not([hidden]) { view-transition-name: tabbody }
|
|
[data-vt="tab"] .pane:has(> .pbody[data-dock]) > .scroll[data-pane="browser"] { view-transition-name: none }
|
|
[data-vt="tab"]::view-transition-old(tabbody) { animation: tabout var(--t-line) var(--ease-in) both }
|
|
[data-vt="tab"]::view-transition-new(tabbody) { animation: tabin var(--m-card) both }
|
|
@keyframes tabout { to { opacity: 0; transform: translateY(-4px) } }
|
|
@keyframes tabin { from { opacity: 0; transform: translateY(6px) } }
|
|
[data-vt="pane"]::view-transition-old(pane) { animation: paneout var(--t-card) var(--ease-in) both }
|
|
[data-vt="pane"]::view-transition-new(pane) { animation: panein var(--m-panel) both }
|
|
@keyframes paneout { to { opacity: 0; transform: translateY(-6px) } }
|
|
@keyframes panein { from { opacity: 0; transform: translateY(8px) } }
|
|
|
|
.panetabs {
|
|
position: relative;
|
|
flex: none; display: flex; align-items: stretch; gap: 2px;
|
|
padding: 8px 12px 0; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 82%, var(--page));
|
|
overflow-x: auto; scrollbar-width: none;
|
|
}
|
|
.panetabs::-webkit-scrollbar { display: none }
|
|
|
|
.ptab {
|
|
position: relative; flex: none; min-width: 132px; max-width: 216px;
|
|
display: flex; align-items: center; gap: 7px;
|
|
padding: 7px 8px 8px 11px; cursor: pointer; border-radius: var(--r-xs) var(--r-xs) 0 0;
|
|
border-bottom: 2px solid transparent; margin-bottom: -1px;
|
|
font: var(--w-med) var(--fs-ui) var(--ui); color: var(--faint); white-space: nowrap;
|
|
transition: color var(--m-line), background var(--m-line);
|
|
}
|
|
.ptab:hover { color: var(--text); background: var(--overlay) }
|
|
.ptab[aria-selected="true"] { color: var(--text); background: var(--surface); box-shadow: inset 0 1px 0 var(--border) }
|
|
.ptab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px }
|
|
.ptab-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis }
|
|
.ptab-x { margin-left: auto }
|
|
.ptab-ws { flex: none; font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--ghost) }
|
|
|
|
.ptab-host { flex: none; font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--net) }
|
|
.ptab-host::before { content: "◦"; margin-right: 2px; opacity: .7 }
|
|
.ptab .pip { flex: none; background: var(--ghost) }
|
|
|
|
.ptab[data-run="running"] .pip { background: var(--net); animation: breathe 1.4s ease-in-out infinite }
|
|
@media (prefers-reduced-motion: reduce) { .ptab[data-run="running"] .pip { animation: none } }
|
|
.ptab[data-run="halt"] .pip { background: var(--accent-ink) }
|
|
.ptab[data-run="done"] .pip { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ok) }
|
|
.ptab:not([data-run="running"]) .pip[data-unread] { background: var(--accent-ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-ink) 28%, transparent) }
|
|
.ptab-x {
|
|
flex: none; width: 17px; height: 17px; display: grid; place-items: center;
|
|
border: 0; border-radius: var(--r-xs); background: transparent; color: var(--ghost);
|
|
font: var(--w-reg) var(--fs-ui)/1 var(--mono); cursor: pointer; opacity: 0; transition: opacity var(--m-line), color var(--m-line);
|
|
}
|
|
.ptab:hover .ptab-x, .ptab[aria-selected="true"] .ptab-x, .ptab-x:focus-visible { opacity: 1 }
|
|
.ptab-x:hover { color: var(--err) }
|
|
|
|
.panes-empty {
|
|
position: absolute; inset: 0;
|
|
display: grid; place-content: center; justify-items: center; gap: 10px;
|
|
text-align: center; color: var(--faint);
|
|
animation: card var(--t-card) var(--ease-out) both;
|
|
}
|
|
.panes-empty .mk { font: 300 calc(30px * var(--fs-scale, 1))/1 var(--ui); color: var(--ghost); margin-bottom: 2px }
|
|
.panes-empty .t { margin: 0; font: var(--w-med) var(--fs-lead) var(--ui); color: var(--muted) }
|
|
.panes-empty .h { margin: 0 0 4px; font: var(--w-reg) var(--fs-ui)/1.6 var(--ui); color: var(--faint); max-width: 34ch }
|
|
.panes-empty button {
|
|
justify-self: center; padding: 7px 15px; border-radius: var(--r-pill);
|
|
border: 1px solid var(--border); background: var(--overlay); color: var(--text);
|
|
font: var(--w-med) var(--fs-ui) var(--ui); cursor: pointer;
|
|
}
|
|
.panes-empty button:hover { border-color: var(--faint) }
|
|
|
|
.wsnode { padding-bottom: 7px; padding-left: 12px }
|
|
.wsnode[data-missing] .wsname { color: var(--err-ink); text-decoration: line-through }
|
|
|
|
.wsrow {
|
|
position: relative; display: grid; gap: 0 7px; align-items: center;
|
|
grid-template-columns: 10px 5px minmax(0, 1fr) auto;
|
|
padding: 5px 7px 6px; border-radius: var(--r-md); cursor: pointer;
|
|
font: var(--w-med) var(--fs-ui) var(--ui); color: var(--muted);
|
|
transition: background var(--m-line), color var(--m-line);
|
|
}
|
|
.wsrow .twist { grid-area: 1 / 1 }
|
|
.wsdot { grid-area: 1 / 2 }
|
|
.wsname { grid-area: 1 / 3 }
|
|
.wsmeta { grid-area: 2 / 3; justify-self: start; margin-top: 1px }
|
|
|
|
.wsacts { grid-area: 1 / 4; align-self: center }
|
|
.wsrow:hover { background: var(--overlay); color: var(--text) } .wsrow[data-dragging] { opacity: .5 } .wsrow[data-drop="before"] { box-shadow: 0 -2px 0 var(--accent) } .wsrow[data-drop="after"] { box-shadow: 0 2px 0 var(--accent) }
|
|
|
|
.twist {
|
|
flex: none; width: 10px; height: 10px; display: grid; place-items: center;
|
|
border: 0; background: none; padding: 0; color: var(--ghost); cursor: pointer;
|
|
}
|
|
.twist svg {
|
|
width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8;
|
|
stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-card) var(--ease, ease);
|
|
}
|
|
.wsrow[aria-expanded="true"] .twist svg, .machrow[aria-expanded="true"] .twist svg,
|
|
.rmtwsrow[aria-expanded="true"] .twist svg { transform: rotate(90deg) }
|
|
.twist:hover { color: var(--text) }
|
|
|
|
.wsdot { width: 5px; height: 5px; border-radius: 50%; background: var(--ghost); opacity: .45 }
|
|
.wsname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
|
|
.wsmeta {
|
|
display: flex; align-items: center; gap: 5px; min-width: 0;
|
|
font: var(--w-reg) var(--fs-micro)/1.25 var(--mono); color: var(--ghost);
|
|
}
|
|
.wstag {
|
|
font-style: normal; flex: none; padding: 0 4px; border-radius: var(--r-xs);
|
|
background: var(--overlay); color: var(--faint);
|
|
}
|
|
.wsacts { display: flex; align-items: center; gap: 2px }
|
|
|
|
.wsadd, .wsdel, .wsmore {
|
|
flex: none; width: 20px; height: 20px; display: grid; place-items: center;
|
|
border: 0; padding: 0; border-radius: var(--r-xs); cursor: pointer;
|
|
background: transparent; color: var(--faint);
|
|
transition: background var(--m-line), color var(--m-line);
|
|
}
|
|
.wsadd svg, .wsdel svg {
|
|
width: 13px; height: 13px; fill: none; stroke: currentColor;
|
|
stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.wsadd:hover:not(:disabled) { background: var(--overlay); color: var(--text) }
|
|
.wsadd:focus-visible, .wsdel:focus-visible, .wsmore:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px }
|
|
.wsadd:disabled { opacity: .4; cursor: default }
|
|
.wsadd[data-busy] { opacity: .5; pointer-events: none }
|
|
.wsdel { color: var(--ghost) }
|
|
.wsdel:hover { background: var(--overlay); color: var(--err) }
|
|
|
|
.kids { margin: 1px 0 3px 15px; padding-left: 9px; border-left: 1px solid var(--border) }
|
|
|
|
.sessrow {
|
|
position: relative; display: flex; align-items: center; gap: 7px;
|
|
padding: 5px 8px; cursor: pointer; border-radius: var(--r-sm);
|
|
border-left: 2px solid transparent;
|
|
font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint);
|
|
}
|
|
.sessrow:hover { background: var(--overlay); color: var(--muted) }
|
|
.sessrow[data-live] { color: var(--muted) }
|
|
|
|
.sessrow[data-on] { background: var(--raised); color: var(--text); font-weight: var(--w-med); box-shadow: inset 0 0 0 1px var(--hair), 0 3px 10px -8px rgb(0 0 0 / .5) }
|
|
.sessrow[data-on] .sesstitle { font-weight: var(--w-med) }
|
|
.sessrow[data-busy] { opacity: .55; pointer-events: none }
|
|
.sessrow[data-on][data-busy] { opacity: .8 }
|
|
.sessrow .pip { flex: none; opacity: .35 }
|
|
.sessrow[data-live] .pip { opacity: 1; background: var(--net) }
|
|
|
|
.app[data-run="running"] .sessrow[data-on][data-live] .pip { box-shadow: 0 0 0 2px color-mix(in srgb, var(--net) 14%, transparent) }
|
|
.app[data-run="halt"] .sessrow[data-on] .pip { background: var(--accent-ink); opacity: 1 }
|
|
.sesstitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
.sessmeta {
|
|
flex: none; margin-right: 44px;
|
|
font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--ghost);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.sessrow .wsdel {
|
|
position: absolute; top: 50%; transform: translateY(-50%);
|
|
}
|
|
.sessrow .wsdel { right: 3px }
|
|
|
|
.sessrow:hover .sessmeta, .sessrow[data-on] .sessmeta { color: var(--faint) }
|
|
|
|
.sessarch { flex: none; margin-left: 6px; font: var(--w-med) var(--fs-micro) var(--ui); font-style: normal; color: var(--ghost) }
|
|
.errbar[data-kind="note"] { border-color: var(--border); background: var(--surface); color: var(--text) }
|
|
.errbar[data-kind="note"] button { color: var(--text) }
|
|
.cmpalert > .errbar[data-kind="note"],
|
|
.composenotes > .errbar[data-kind="note"],
|
|
.main > .errbar[data-kind="note"] { top: 106px; bottom: auto }
|
|
.sesscopies {
|
|
flex: none; padding: 0 5px; height: 15px;
|
|
border: 1px solid var(--border); border-radius: var(--r-xs);
|
|
background: transparent; color: var(--ghost); cursor: pointer;
|
|
font: var(--w-reg) var(--fs-micro) var(--mono);
|
|
}
|
|
.sesscopies:hover { border-color: var(--warn); color: var(--warn-ink) }
|
|
.sesscopies[aria-expanded="true"] { border-color: var(--warn); color: var(--warn-ink) }
|
|
.sessrow.sesscopy { padding-left: 34px }
|
|
.sessrow.sesscopy .sesstitle { color: var(--ghost); font-style: italic }
|
|
.sessrow .wsdel { opacity: .45 }
|
|
.sessrow:hover .wsdel,
|
|
.sessrow .wsdel:focus-visible { opacity: 1 }
|
|
.sessedit {
|
|
flex: 1; min-width: 0; padding: 1px 5px; border-radius: var(--r-xs);
|
|
border: 1px solid var(--accent); background: var(--page); color: var(--text);
|
|
font: var(--w-reg) var(--fs-ui) var(--ui);
|
|
}
|
|
.sessedit:focus { outline: none }
|
|
.paperpick .plus {
|
|
display: grid; place-items: center; width: 13px; height: 13px; flex: none; color: var(--ghost);
|
|
}
|
|
.paperpick .plus svg {
|
|
width: 13px; height: 13px; fill: none; stroke: currentColor;
|
|
stroke-width: 1.5; stroke-linecap: round;
|
|
}
|
|
|
|
.askveil, .pickveil {
|
|
position: fixed; inset: 0; z-index: 95; display: grid; place-items: center;
|
|
|
|
background: color-mix(in srgb, var(--page) 72%, transparent);
|
|
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
|
|
animation: card var(--t-card) var(--ease-out) both;
|
|
}
|
|
|
|
.pickveil { z-index: 92 }
|
|
.askcard {
|
|
width: min(440px, calc(100vw - 48px)); padding: 20px 22px;
|
|
border: 1px solid var(--border); border-radius: var(--r-md);
|
|
background: var(--surface); box-shadow: var(--shadow-float);
|
|
}
|
|
.askcard h2 { margin: 0 0 8px; font: var(--w-med) var(--fs-lead) var(--ui); color: var(--text) }
|
|
.askcard .h { margin: 0 0 14px; font: var(--w-reg) var(--fs-ui)/1.7 var(--ui); color: var(--faint) }
|
|
.askcard input {
|
|
width: 100%; padding: 7px 10px; box-sizing: border-box;
|
|
border: 1px solid var(--border); border-radius: var(--r-xs);
|
|
background: var(--surface); color: var(--text); font: var(--w-reg) var(--fs-ui) var(--mono);
|
|
}
|
|
.askcard input:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px }
|
|
.askcard input + input { margin-top: 8px }
|
|
.askfacts {
|
|
display: grid; grid-template-columns: 5em 1fr; gap: 6px 12px; margin: 0 0 4px;
|
|
font: var(--w-reg) var(--fs-ui) var(--ui);
|
|
}
|
|
.askfacts dt { color: var(--ghost) }
|
|
.askfacts dd { margin: 0; color: var(--text); font-family: var(--mono); word-break: break-all }
|
|
|
|
.askfacts .fp { font-size: var(--fs-meta); line-height: 1.6; color: var(--accent-ink) }
|
|
.askcard .askact { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px }
|
|
.askcard .askact button {
|
|
padding: 6px 15px; border-radius: var(--r-xs);
|
|
border: 1px solid var(--border); background: transparent; color: var(--muted);
|
|
font: var(--w-med) var(--fs-ui) var(--ui); cursor: pointer;
|
|
}
|
|
.askcard .askact button:hover { color: var(--text) }
|
|
.askcard .askact button[data-go] { border-color: var(--accent); color: var(--accent-ink) }
|
|
.askcard .askact button[data-go]:hover { background: color-mix(in srgb, var(--accent) 12%, transparent) }
|
|
|
|
.pickcard {
|
|
display: flex; flex-direction: column;
|
|
width: min(520px, calc(100vw - 48px)); max-height: min(560px, calc(100vh - 96px));
|
|
padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--r-md);
|
|
background: var(--surface); box-shadow: var(--shadow-float);
|
|
}
|
|
.pickcard h2 { margin: 0 0 12px; font: var(--w-med) var(--fs-lead) var(--ui); color: var(--text) }
|
|
|
|
.pickpath { display: flex; align-items: center; gap: 6px }
|
|
.pickpath input {
|
|
flex: 1; min-width: 0; padding: 6px 9px;
|
|
border: 1px solid var(--border); border-radius: var(--r-xs);
|
|
background: var(--surface); color: var(--text); font: var(--w-reg) var(--fs-ui) var(--mono);
|
|
}
|
|
.pickpath input:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px }
|
|
.pickup, .pickgo {
|
|
flex: none; padding: 6px 10px; border-radius: var(--r-xs);
|
|
border: 1px solid var(--border); background: transparent; color: var(--muted);
|
|
font: var(--w-med) var(--fs-ui) var(--ui); cursor: pointer;
|
|
transition: color var(--m-line), border-color var(--m-line);
|
|
}
|
|
.pickup { display: grid; place-items: center; width: 30px; height: 30px; padding: 0 }
|
|
.pickup svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round }
|
|
.pickup:hover:not(:disabled), .pickgo:hover:not(:disabled) { border-color: var(--accent); color: var(--text) }
|
|
.pickup:disabled, .pickgo:disabled { opacity: .38; cursor: default }
|
|
.pickerr { margin: 10px 0 0; font: var(--w-reg) var(--fs-ui)/1.6 var(--ui); color: var(--err-ink) }
|
|
|
|
.picklist {
|
|
flex: 1; min-height: 96px; margin-top: 12px; padding: 4px;
|
|
overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-sm);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.picklist[data-busy] { opacity: .55 }
|
|
.pickrow {
|
|
display: flex; align-items: center; gap: 8px; width: 100%;
|
|
padding: 5px 8px; border: 0; border-radius: var(--r-xs);
|
|
background: none; color: var(--muted); cursor: pointer; text-align: left;
|
|
font: var(--w-reg) var(--fs-ui) var(--ui);
|
|
transition: background var(--m-line), color var(--m-line);
|
|
}
|
|
.pickrow svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--ghost); stroke-width: 1.3; stroke-linejoin: round }
|
|
.pickrow span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
.pickrow:hover { background: var(--overlay); color: var(--text) }
|
|
.pickrow:hover svg { stroke: var(--accent-ink) }
|
|
.pickrow:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px }
|
|
.pickempty, .picknote {
|
|
margin: 0; padding: 10px 8px; font: var(--w-reg) var(--fs-ui)/1.6 var(--ui); color: var(--ghost);
|
|
}
|
|
.picknote { padding: 8px 0 0; color: var(--faint) }
|
|
.pickact { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px }
|
|
.pickact button {
|
|
padding: 6px 15px; border-radius: var(--r-xs);
|
|
border: 1px solid var(--border); background: transparent; color: var(--muted);
|
|
font: var(--w-med) var(--fs-ui) var(--ui); cursor: pointer;
|
|
}
|
|
.pickact button:hover:not(:disabled) { color: var(--text) }
|
|
.pickact button[data-go] { border-color: var(--accent); color: var(--accent-ink) }
|
|
.pickact button[data-go]:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 12%, transparent) }
|
|
.pickact button:disabled { opacity: .38; cursor: default }
|
|
|
|
.rmtbook { display: grid; gap: 0 }
|
|
.rmtrow { border-top: 1px solid var(--hair); padding: 10px 2px }
|
|
.rmtrow:last-of-type { border-bottom: 1px solid var(--hair) }
|
|
|
|
.rmtprobe {
|
|
margin: 8px 0 2px 15px; padding: 7px 0 7px 11px;
|
|
display: flex; flex-direction: column; gap: 4px;
|
|
border-left: 2px solid var(--warn);
|
|
animation: panel var(--t-panel) var(--ease-out) both;
|
|
}
|
|
.rmtprobe[data-ok] { border-left-color: var(--ok) }
|
|
.rmtprobe-r { display: flex; gap: 10px; font: var(--w-reg) var(--fs-ui) var(--mono) }
|
|
.rmtprobe-r .k { flex: none; width: 9ch; color: var(--ghost) }
|
|
.rmtprobe-r .v { min-width: 0; color: var(--muted); word-break: break-all }
|
|
|
|
.rmtprobe-why { margin: 3px 0 0; font: var(--w-reg) var(--fs-ui)/1.6 var(--ui); color: var(--warn-ink) }
|
|
.rmtprobe-end { margin-top: 5px; font: var(--w-med) var(--fs-ui) var(--ui); color: var(--faint) }
|
|
.rmtprobe[data-ok] .rmtprobe-end { color: var(--ok-ink) }
|
|
.rmtrow .hd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: var(--w-reg) var(--fs-ui) var(--ui) }
|
|
.rmtrow .hd b { font-weight: var(--w-med); color: var(--text) }
|
|
.rmtrow .tg { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--ghost) }
|
|
|
|
.rmtrow .st { flex: 1; min-width: fit-content; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.rmtrow[data-state="connected"] .st { color: var(--net) }
|
|
.rmtrow[data-state="degraded"] .st { color: var(--warn-ink) }
|
|
.rmtrow[data-state="stopped"] .st { color: var(--err-ink) }
|
|
.rmtrow .sub {
|
|
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
|
|
padding: 4px 0 0 14px; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--faint);
|
|
}
|
|
.rmtrow .sub .dim { color: var(--ghost) }
|
|
.rmtrow .sub .tag {
|
|
padding: 0 6px; border: 1px solid var(--border); border-radius: var(--r-pill);
|
|
font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--ghost);
|
|
}
|
|
.rmtbook .rmtlnk {
|
|
flex: none; border: 0; background: none; cursor: pointer; padding: 0 2px;
|
|
font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint);
|
|
}
|
|
.rmtbook .rmtlnk:hover { color: var(--accent-ink) }
|
|
.rmtbook .rmtlnk[data-danger]:hover { color: var(--err-ink) }
|
|
.rmtconfirm {
|
|
display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; padding: 8px 10px;
|
|
border: 1px solid var(--warn); border-radius: var(--r-sm);
|
|
background: color-mix(in srgb, var(--warn) 8%, transparent);
|
|
font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--text);
|
|
}
|
|
.rmtconfirm span { flex: 1; min-width: 0 }
|
|
.rmtconfirm button {
|
|
flex: none; padding: 4px 10px; border-radius: var(--r-xs);
|
|
border: 1px solid var(--border); background: var(--overlay); color: var(--text);
|
|
font: var(--w-med) var(--fs-meta) var(--ui); cursor: pointer;
|
|
}
|
|
.rmtconfirm button[data-danger] { border-color: var(--err); color: var(--err-ink) }
|
|
.rmtempty { margin: 4px 0 10px; font: var(--w-reg) var(--fs-ui)/1.7 var(--ui); color: var(--faint); max-width: 46ch }
|
|
|
|
.rmtcands { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px }
|
|
.rmtcands .cap { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost) }
|
|
.rmtcands .rmtcand {
|
|
padding: 2px 9px; border: 1px dashed var(--border); border-radius: var(--r-pill);
|
|
background: transparent; color: var(--faint); cursor: pointer;
|
|
font: var(--w-reg) var(--fs-meta) var(--mono);
|
|
}
|
|
.rmtcands .rmtcand:hover { border-style: solid; border-color: var(--accent); color: var(--text) }
|
|
|
|
.rmtform {
|
|
display: grid; gap: 8px; margin-top: 12px; padding: 12px;
|
|
border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--overlay);
|
|
}
|
|
.rmtf { display: flex; align-items: center; gap: 10px; font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--muted) }
|
|
.rmtf > span { flex: none; width: 13ch }
|
|
.rmthint { margin: -2px 0 2px calc(13ch + 10px); font: var(--w-reg) var(--fs-meta)/1.55 var(--ui); color: var(--faint) }
|
|
.rmtf select {
|
|
flex: 1; min-width: 0; padding: 5px 8px; color: var(--text);
|
|
background: var(--raised); border: 1px solid var(--border); border-radius: var(--r-sm);
|
|
font: var(--w-reg) var(--fs-ui) var(--ui);
|
|
}
|
|
.rmtf input {
|
|
flex: 1; min-width: 0; padding: 5px 8px;
|
|
border: 1px solid var(--border); border-radius: var(--r-xs);
|
|
background: var(--surface); color: var(--text); font: var(--w-reg) var(--fs-ui) var(--mono);
|
|
}
|
|
.rmtf input:focus-visible, .rmtf select:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px }
|
|
.rmtck { gap: 8px }
|
|
|
|
.rmtdirs { display: grid; gap: 2px }
|
|
.rmtdirs .sublb { font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--muted) }
|
|
.rmtdirs .prule input { background: var(--surface) }
|
|
.rmtdirs .tag {
|
|
flex: none; padding: 1px 6px; border-radius: var(--r-pill);
|
|
font: var(--w-med) var(--fs-micro) var(--ui); color: var(--accent-ink);
|
|
background: color-mix(in srgb, var(--accent) 13%, transparent);
|
|
}
|
|
.rmtck input { flex: none; width: auto }
|
|
.rmtck > span { width: auto; flex: 1 }
|
|
.rmtform .rmtact { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px }
|
|
.rmtform .rmtact button {
|
|
padding: 5px 14px; border-radius: var(--r-xs);
|
|
border: 1px solid var(--border); background: transparent; color: var(--muted);
|
|
font: var(--w-med) var(--fs-ui) var(--ui); cursor: pointer;
|
|
}
|
|
.rmtform .rmtact button[data-go] { border-color: var(--accent); color: var(--accent-ink) }
|
|
.rmtform .rmtact button:disabled { opacity: .4; cursor: default }
|
|
.rmtadd {
|
|
margin-top: 12px; padding: 6px 12px; border-radius: var(--r-pill);
|
|
border: 1px solid var(--border); background: transparent; color: var(--muted);
|
|
font: var(--w-med) var(--fs-ui) var(--ui); cursor: pointer;
|
|
}
|
|
.rmtadd:hover { border-color: var(--accent); color: var(--text) }
|
|
|
|
.chrome:has(.phonecard) { z-index: 40 }
|
|
.phonepop { position: relative; display: flex }
|
|
.phone-action[data-live] { color: var(--accent-ink) }
|
|
.phone-action[data-live]::after {
|
|
content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px;
|
|
border-radius: 50%; background: var(--net);
|
|
}
|
|
.phone-action { position: relative }
|
|
.phone-action[data-online]::after { display: none }
|
|
.pc-count {
|
|
position: absolute; top: 1px; right: 0; min-width: 13px; height: 13px; padding: 0 3px; box-sizing: border-box;
|
|
display: grid; place-items: center; border-radius: var(--r-pill);
|
|
background: var(--net); color: var(--accent-fg, #fff); font: var(--w-semi) var(--fs-micro)/1 var(--mono);
|
|
}
|
|
.pc-note-pop {
|
|
position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; white-space: nowrap;
|
|
padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
|
|
background: var(--raised); box-shadow: 0 12px 30px -16px #000;
|
|
color: var(--text); font: var(--w-med) var(--fs-meta)/1 var(--ui);
|
|
animation: pcin var(--t-card, .14s) var(--ease-out, ease-out) both;
|
|
}
|
|
.chrome:has(.pc-note-pop) { z-index: 40 }
|
|
.app:has(> .devicebar) .rail { top: 30px }
|
|
.viamark {
|
|
flex: none; padding: 1px 7px; border-radius: var(--r-pill);
|
|
background: color-mix(in srgb, var(--net) 14%, transparent); color: var(--text);
|
|
font: var(--w-med) var(--fs-micro)/1.5 var(--ui);
|
|
}
|
|
.apv-by { display: block; margin-top: 4px; color: var(--faint); font: var(--w-reg) var(--fs-micro)/1.4 var(--ui) }
|
|
.devicebar {
|
|
display: flex; align-items: center; gap: 8px; flex: none; height: 30px; padding: 0 12px;
|
|
border-bottom: 1px solid var(--hair);
|
|
background: color-mix(in srgb, var(--net) 11%, var(--page));
|
|
color: var(--text); font: var(--w-med) var(--fs-meta)/1.3 var(--ui);
|
|
}
|
|
.devicebar > i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--net) }
|
|
.devicebar[data-down] { background: color-mix(in srgb, var(--ghost) 12%, var(--page)) }
|
|
.devicebar[data-down] > i { background: var(--ghost) }
|
|
.devicebar .db-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
.devicebar > small { flex: none; color: var(--faint); font: var(--w-reg) var(--fs-micro)/1 var(--ui) }
|
|
.devicebar > button {
|
|
flex: none; margin-left: auto; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--r-pill);
|
|
background: var(--surface); color: var(--muted); cursor: pointer; font: var(--w-med) var(--fs-micro)/1 var(--ui);
|
|
}
|
|
.devicebar > button:hover, .devicebar > button[data-armed] { color: var(--err-ink); border-color: color-mix(in srgb, var(--err) 45%, var(--border)) }
|
|
.phone-action[aria-expanded="true"] { background: var(--overlay); color: var(--text) }
|
|
.phonecard {
|
|
position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
|
|
width: min(318px, calc(100vw - 24px)); max-height: calc(100dvh - var(--chrome-h, 45px) - 24px); overflow: auto;
|
|
display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; padding: 13px;
|
|
border: 1px solid var(--border); border-radius: 10px;
|
|
background: var(--raised); box-shadow: 0 20px 50px -20px #000;
|
|
color: var(--faint); font: var(--w-med) var(--fs-meta)/1.4 var(--ui); cursor: default; text-align: left;
|
|
animation: pcin var(--t-card, .14s) var(--ease-out, ease-out) both;
|
|
}
|
|
@keyframes pcin { from { opacity: 0; transform: translateY(-4px) scale(.985) } }
|
|
.phonecard > header {
|
|
display: flex; align-items: center; justify-content: space-between; gap: 14px;
|
|
padding-bottom: 10px; border-bottom: 1px solid var(--border);
|
|
}
|
|
.phonecard > header > span { display: grid; gap: 3px; min-width: 0 }
|
|
.phonecard > header b { color: var(--text); font: var(--w-semi) var(--fs-ui)/1.3 var(--ui) }
|
|
.phonecard > header small { color: var(--ghost); font: var(--w-reg) var(--fs-micro)/1.45 var(--ui) }
|
|
.pc-code { display: grid; justify-items: center; gap: 7px; padding-top: 2px }
|
|
.pc-code[data-cloud] { padding: 10px 8px; border-radius: 8px; background: color-mix(in srgb, var(--net) 9%, transparent) }
|
|
.pc-code img {
|
|
width: 148px; height: 148px; padding: 8px; box-sizing: content-box;
|
|
border: 1px solid var(--hair); border-radius: 8px; background: #fff; image-rendering: pixelated;
|
|
}
|
|
.pc-when { color: var(--muted); font: var(--w-med) var(--fs-meta)/1 var(--ui) }
|
|
.pc-acts { display: flex; align-items: center; gap: 9px }
|
|
.pc-acts > i { width: 1px; height: 10px; background: var(--border) }
|
|
.pc-acts button, .pc-mint, .pc-dev button {
|
|
padding: 2px 0; border: 0; background: none; cursor: pointer;
|
|
color: var(--muted); font: var(--w-med) var(--fs-meta)/1 var(--ui);
|
|
}
|
|
.pc-acts button:hover, .pc-mint:hover { color: var(--text) }
|
|
.pc-acts button:disabled, .pc-mint:disabled { opacity: .5; cursor: default }
|
|
.pc-row {
|
|
display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px;
|
|
padding-top: 10px; border-top: 1px solid var(--border);
|
|
}
|
|
.pc-row > span { color: var(--ghost) }
|
|
.pc-row select {
|
|
min-width: 0; height: 24px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px;
|
|
background: var(--surface); color: var(--text); font: var(--w-reg) var(--fs-meta)/1 var(--ui);
|
|
}
|
|
.pc-row select:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px }
|
|
.phonecard > section { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--border) }
|
|
.pc-hd { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 2px }
|
|
.pc-hd > span { display: grid; gap: 3px; min-width: 0 }
|
|
.pc-hd b { color: var(--text); font: var(--w-semi) var(--fs-meta)/1 var(--ui) }
|
|
.pc-hd span small { color: var(--ghost); font: var(--w-reg) var(--fs-micro)/1.3 var(--ui) }
|
|
.pc-hd small { color: var(--ghost); font: var(--w-reg) var(--fs-micro)/1 var(--mono) }
|
|
.pc-dev {
|
|
min-height: 24px; display: grid; grid-template-columns: 6px minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
|
|
padding: 0 5px; border-radius: 5px;
|
|
}
|
|
.pc-dev:hover { background: var(--overlay) }
|
|
.pc-dev > i { width: 6px; height: 6px; border-radius: 50%; background: var(--ghost); opacity: .6 }
|
|
.pc-dev[data-online] > i { background: var(--net); opacity: 1 }
|
|
.pc-dev > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted) }
|
|
.pc-dev > small { color: var(--ghost); font: var(--w-reg) var(--fs-micro)/1 var(--mono) }
|
|
.pc-dev button { color: var(--ghost); font-size: var(--fs-micro) }
|
|
.pc-dev button:hover, .pc-dev button[data-armed] { color: var(--err-ink) }
|
|
.pc-dev button[data-armed] { font-weight: var(--w-semi) }
|
|
.phonecard > section > p { margin: 0; padding: 2px 5px; color: var(--ghost) }
|
|
.pc-err { margin: 0; color: var(--err-ink); font: var(--w-reg) var(--fs-micro)/1.5 var(--ui); word-break: break-word }
|
|
.pc-note { margin: 0; padding-top: 10px; border-top: 1px solid var(--border); color: var(--ghost); font: var(--w-reg) var(--fs-micro)/1.5 var(--ui) }
|
|
[data-fold~="scene"] .phonecard { position: fixed; top: calc(var(--chrome-h, 45px) + 6px); right: 12px; left: 12px; width: auto }
|
|
.share .rmtf { margin-top: 10px }
|
|
.share .rmtf input { background: var(--raised); border-radius: var(--r-sm) }
|
|
.shareopen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px }
|
|
.shareopen .rmtadd { margin-top: 0; justify-self: start }
|
|
.shareqr { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap }
|
|
.shareqr img {
|
|
flex: none; width: 184px; height: 184px; padding: 8px; box-sizing: content-box;
|
|
background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm);
|
|
image-rendering: pixelated;
|
|
}
|
|
.sharehow { display: grid; gap: 6px; flex: 1; min-width: 22ch }
|
|
.sharehow .lb { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.sharehow .ds { font: var(--w-reg) var(--fs-meta)/1.6 var(--ui); color: var(--faint) }
|
|
.sharehow .sharecopy { border: 0; background: none; padding: 2px 4px; cursor: pointer; font: var(--w-med) var(--fs-meta) var(--ui); color: var(--accent-ink) }
|
|
.sharehow .sharecopy:hover { text-decoration: underline }
|
|
.sharehow code { font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--muted); overflow-wrap: anywhere }
|
|
.sharedevs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px }
|
|
.sharedev { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 2px; border-top: 1px solid var(--hair) }
|
|
.sharedev .nm {
|
|
flex: 1 1 18ch; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--text);
|
|
}
|
|
.sharedev .st { flex: none; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint) }
|
|
.sharedev .rmtlnk {
|
|
flex: none; border: 0; background: none; cursor: pointer; padding: 0 2px;
|
|
font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--faint);
|
|
}
|
|
.sharedev .rmtlnk:hover { color: var(--err-ink) }
|
|
.sharedev .rmtconfirm { flex: 1 1 100%; margin: 0 }
|
|
.sharewarn {
|
|
margin: 0; padding: 8px 10px; border-left: 2px solid var(--warn);
|
|
font: var(--w-reg) var(--fs-meta)/1.6 var(--ui); color: var(--muted); max-width: 64ch;
|
|
}
|
|
|
|
.find .ntimes {
|
|
margin-left: 6px; padding: 0 5px; border-radius: var(--r-pill);
|
|
background: var(--overlay); color: var(--faint);
|
|
font: var(--w-reg) var(--fs-micro) var(--mono);
|
|
}
|
|
|
|
.rmts { margin-top: 8px }
|
|
.rmt { padding-bottom: 2px }
|
|
|
|
.rmt + .rmt, .rail .scroll > .rmt:first-of-type { margin-top: 20px }
|
|
|
|
.machrow {
|
|
display: grid; gap: 0 7px; align-items: center;
|
|
grid-template-columns: 10px 6px minmax(0, 1fr) auto;
|
|
padding: 6px 6px 7px 6px; border-radius: var(--r-sm); cursor: pointer;
|
|
|
|
font: var(--w-med) var(--fs-ui) var(--ui); color: var(--muted);
|
|
transition: background var(--m-line), color var(--m-line);
|
|
}
|
|
.machrow:hover { background: var(--overlay); color: var(--text) }
|
|
.machrow .twist { grid-area: 1 / 1 }
|
|
.rmtpip { grid-area: 1 / 2 }
|
|
.rmtname { grid-area: 1 / 3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
|
|
.rmttarget {
|
|
grid-area: 2 / 3; justify-self: start; margin-top: 1px; min-width: 0;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
font: var(--w-reg) var(--fs-micro)/1.25 var(--mono); color: var(--ghost);
|
|
}
|
|
.rmtsub {
|
|
grid-area: 2 / 4; justify-self: end; margin-top: 1px; flex: none;
|
|
font: var(--w-reg) var(--fs-micro)/1.25 var(--ui); color: var(--ghost);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 96px;
|
|
}
|
|
|
|
.rmtpip { width: 6px; height: 6px; border-radius: 50%; background: var(--ghost); flex: none }
|
|
|
|
.machrow[data-here] .rmtpip { background: none; box-shadow: inset 0 0 0 1.5px var(--faint) }
|
|
.rmt[data-state="connected"] .rmtpip, .rmtrow[data-state="connected"] .rmtpip { background: var(--net) }
|
|
.rmt[data-state="connecting"] .rmtpip, .rmtrow[data-state="connecting"] .rmtpip,
|
|
.rmt[data-state="reconnecting"] .rmtpip, .rmtrow[data-state="reconnecting"] .rmtpip {
|
|
background: var(--accent-ink);
|
|
}
|
|
.rmt[data-state="degraded"] .rmtpip, .rmtrow[data-state="degraded"] .rmtpip { background: var(--warn) }
|
|
.rmt[data-state="stopped"] .rmtpip, .rmtrow[data-state="stopped"] .rmtpip { background: var(--err) }
|
|
.rmt[data-state="connected"] .rmtname,
|
|
.rmt[data-state="degraded"] .rmtname { color: var(--text) }
|
|
|
|
.machpick {
|
|
grid-area: 1 / 4; flex: none; display: grid; place-items: center;
|
|
width: 18px; height: 18px; padding: 0; border: 0; border-radius: var(--r-xs);
|
|
background: transparent; color: var(--ghost); cursor: pointer;
|
|
transition: background var(--m-line), color var(--m-line);
|
|
}
|
|
.machpick svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round }
|
|
.machacts { grid-area: 1 / 4; display: flex; gap: 2px }
|
|
.machacts .machpick { grid-area: auto }
|
|
.machpick[data-busy] svg { animation: machspin .9s linear infinite }
|
|
@keyframes machspin { to { transform: rotate(360deg) } }
|
|
@media (prefers-reduced-motion: reduce) { .machpick[data-busy] svg { animation: none } }
|
|
.machpick:hover:not(:disabled) { background: var(--raised); color: var(--text) }
|
|
.machpick:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px }
|
|
.machpick:disabled { opacity: .4; cursor: default }
|
|
.machpick[data-busy] { opacity: .5; pointer-events: none }
|
|
.rmtnote {
|
|
padding: 0 9px 4px 22px; font: var(--w-reg) var(--fs-meta)/1.5 var(--ui); color: var(--faint);
|
|
}
|
|
.rmt[data-state="degraded"] .rmtnote { color: var(--warn-ink) }
|
|
.rmt[data-state="stopped"] .rmtnote { color: var(--err-ink) }
|
|
|
|
.rmtsteps { list-style: none; margin: 0; padding: 0 9px 5px 22px }
|
|
.rmtsteps li {
|
|
display: flex; align-items: center; gap: 7px; padding: 1.5px 0;
|
|
font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost);
|
|
}
|
|
.rmtsteps li[data-at="done"] { color: var(--faint) }
|
|
.rmtsteps li[data-at="now"] { color: var(--text) }
|
|
.rmtsteps .mk { flex: none; width: 10px; text-align: center; font: var(--w-reg) var(--fs-micro)/1 var(--mono) }
|
|
.rmtsteps li[data-at="done"] .mk { color: var(--ok) }
|
|
.rmtsteps li[data-at="now"] .mk { color: var(--accent-ink) }
|
|
.rmtsteps .lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
.rmtsteps .dt { flex: none; font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--faint) }
|
|
|
|
.rmtws-node { padding-bottom: 1px }
|
|
|
|
.rmtwsrow { margin-left: 14px; font-size: var(--fs-ui) }
|
|
|
|
.rmtmore {
|
|
display: block; width: 100%; padding: 4px 9px 6px 32px; text-align: left;
|
|
border: 0; background: none; cursor: pointer;
|
|
font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost);
|
|
}
|
|
.rmtmore:hover { color: var(--text); background: var(--overlay) }
|
|
|
|
.rmtopen {
|
|
display: flex; align-items: center; gap: 7px; width: 100%;
|
|
padding: 5px 9px 7px 22px;
|
|
border: 0; background: none; cursor: pointer; text-align: left;
|
|
font: var(--w-med) var(--fs-ui) var(--ui); color: var(--faint);
|
|
transition: color var(--m-line), background var(--m-line);
|
|
}
|
|
.rmtopen .plus { display: grid; place-items: center; width: 13px; height: 13px; flex: none; color: var(--ghost) }
|
|
.rmtopen .plus svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round }
|
|
|
|
.rmtopen .rmtws { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
.rmtopen:hover { color: var(--text); background: var(--overlay) }
|
|
.rmtopen:hover .plus { color: var(--accent-ink) }
|
|
.rmtopen:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px }
|
|
.rmtopen[data-busy] { opacity: .5; pointer-events: none }
|
|
.rmtopen:disabled { opacity: .38; cursor: default; background: none; color: var(--faint) }
|
|
|
|
.fontrow { display: flex; flex-direction: column; gap: 6px; width: 100% }
|
|
.fontown {
|
|
flex: 1 1 200px; min-width: 0; padding: 5px 8px;
|
|
border: 1px solid var(--border); border-radius: var(--r-sm);
|
|
background: var(--raised); color: var(--text); font: var(--w-reg) var(--fs-ui) var(--ui);
|
|
}
|
|
.fontown::placeholder { color: var(--ghost) }
|
|
.fontown:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px }
|
|
|
|
.fontsample {
|
|
padding: 7px 10px; border-radius: var(--r-sm); background: var(--overlay);
|
|
color: var(--muted); font: var(--w-reg) var(--fs-ui)/1.6 var(--ui); white-space: nowrap;
|
|
overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
.fontsample[data-slot="mono"] { font-family: var(--mono); font-size: var(--fs-ui) }
|
|
|
|
.paperpick {
|
|
display: flex; align-items: center; gap: 7px; width: 100%;
|
|
padding: 8px 10px; border: 1px dashed var(--border); border-radius: var(--r-sm);
|
|
background: none; cursor: pointer; text-align: left;
|
|
font: var(--w-med) var(--fs-ui) var(--ui); color: var(--faint);
|
|
transition: color var(--m-line), background var(--m-line);
|
|
}
|
|
.paperpick:hover { color: var(--text); background: var(--overlay) }
|
|
.paperpick:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px }
|
|
.paperpick[data-busy] { opacity: .5; pointer-events: none }
|
|
.themeacts { display: flex; align-items: center; gap: 12px }
|
|
.themeacts .note { flex: 1; min-width: 0; max-width: none; margin: 0; overflow-wrap: anywhere }
|
|
.themeacts .btn { flex: none }
|
|
|
|
.slider {
|
|
flex: 1 1 120px; min-width: 90px; height: 18px; margin: 0;
|
|
-webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
|
|
}
|
|
.slider::-webkit-slider-runnable-track {
|
|
height: 3px; border-radius: var(--r-sm);
|
|
background: linear-gradient(90deg, var(--accent) var(--at, 50%), var(--border) var(--at, 50%));
|
|
}
|
|
.slider::-moz-range-track { height: 3px; border-radius: var(--r-sm); background: var(--border) }
|
|
.slider::-moz-range-progress { height: 3px; border-radius: var(--r-sm); background: var(--accent-ink) }
|
|
.slider::-webkit-slider-container { height: 18px }
|
|
.slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none; appearance: none;
|
|
width: 13px; height: 13px; margin-top: -5px; border-radius: 50%;
|
|
background: var(--raised); border: 1.5px solid var(--accent);
|
|
box-shadow: 0 1px 3px rgb(0 0 0 / .3);
|
|
transition: transform var(--m-line) , border-color var(--m-line);
|
|
}
|
|
.slider::-moz-range-thumb {
|
|
width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--accent);
|
|
background: var(--raised); box-shadow: 0 1px 3px rgb(0 0 0 / .3);
|
|
}
|
|
.slider:hover::-webkit-slider-thumb { transform: scale(1.12) }
|
|
.slider:active::-webkit-slider-thumb { transform: scale(1.02); background: var(--accent) }
|
|
.slider:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs) }
|
|
.slider:disabled { opacity: .4; cursor: default }
|
|
.slider:disabled:hover::-webkit-slider-thumb { transform: none }
|
|
.prow[data-idle] .tx, .prow[data-idle] .now { color: var(--ghost) }
|
|
|
|
.paperview {
|
|
position: relative; width: min(100%, calc(220px * var(--win-ar, 1.6)));
|
|
aspect-ratio: var(--win-ar, 1.6); margin-inline: auto;
|
|
border-radius: var(--r-sm); overflow: hidden;
|
|
background-size: cover; background-repeat: no-repeat;
|
|
border: 1px solid var(--border);
|
|
}
|
|
.paperview i, .paperview b {
|
|
content: ""; position: absolute; inset: 0; display: block; pointer-events: none;
|
|
background: var(--surface);
|
|
}
|
|
.nowbtn {
|
|
border: 0; background: none; cursor: pointer; padding: 0;
|
|
color: var(--muted); text-decoration: underline; text-underline-offset: 2px;
|
|
}
|
|
.nowbtn:hover { color: var(--err-ink) }
|
|
|
|
.sessmore {
|
|
width: 100%; padding: 5px 9px 7px 22px; border: 0; background: none; cursor: pointer;
|
|
text-align: left; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost);
|
|
transition: color var(--m-line), background var(--m-line);
|
|
}
|
|
.sessmore:hover { color: var(--text); background: var(--overlay) }
|
|
.sessmore:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px }
|
|
|
|
.wstag {
|
|
flex: none; padding: 1px 5px; border-radius: var(--r-pill);
|
|
font: var(--w-reg) var(--fs-micro) var(--ui); color: var(--ghost);
|
|
background: var(--overlay); white-space: nowrap;
|
|
max-width: 8ch; overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
|
|
.wsconfirm {
|
|
display: flex; align-items: center; gap: 8px;
|
|
padding: 7px 9px 8px 11px;
|
|
background: var(--overlay); border-left: 2px solid var(--accent);
|
|
animation: card var(--m-line) both;
|
|
}
|
|
.wsconfirm[data-wide] { flex-direction: column; align-items: stretch; gap: 6px }
|
|
.wsconfirm[data-wide] .wsconfirm-a { flex-wrap: wrap; justify-content: flex-end }
|
|
.wsconfirm-t { flex: 1; min-width: 0; display: grid; gap: 1px }
|
|
.wsconfirm-t .q {
|
|
font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.wsconfirm-t .h { font: var(--w-reg) var(--fs-micro) var(--ui); color: var(--ghost) }
|
|
.wsconfirm-a { flex: none; display: flex; gap: 4px }
|
|
.wsconfirm-a button {
|
|
padding: 4px 9px; border-radius: var(--r-xs); cursor: pointer;
|
|
border: 1px solid var(--border); background: transparent; color: var(--muted);
|
|
font: var(--w-med) var(--fs-meta) var(--ui); white-space: nowrap;
|
|
transition: color var(--m-line), border-color var(--m-line), background var(--m-line);
|
|
}
|
|
.wsconfirm-a button:hover { color: var(--text); border-color: var(--faint) }
|
|
.wsconfirm-a button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.wsconfirm-a button[data-primary], .wsconfirm-a button[data-primary]:hover { border-color: var(--accent); background: var(--accent); color: var(--accent-fg) }
|
|
.wsconfirm-a button[data-danger] { color: var(--err-ink); border-color: color-mix(in srgb, var(--err) 45%, var(--border)) }
|
|
.wsconfirm-a button[data-danger]:hover { background: var(--err); border-color: var(--err); color: var(--err-fg) }
|
|
|
|
.ptab-in {
|
|
flex: 1; min-width: 0; padding: 1px 4px; border-radius: var(--r-xs);
|
|
border: 1px solid var(--accent); background: var(--page); color: var(--text);
|
|
font: var(--w-med) var(--fs-ui) var(--ui);
|
|
}
|
|
.ptab-in:focus { outline: none }
|
|
|
|
.tabmenu {
|
|
position: fixed; z-index: 60; min-width: 132px;
|
|
display: grid; padding: 4px; border-radius: var(--r-sm);
|
|
background: var(--float); border: 1px solid var(--border);
|
|
box-shadow: var(--shadow-float);
|
|
animation: card var(--m-line) both;
|
|
}
|
|
.tabmenu button {
|
|
padding: 6px 9px; border: 0; border-radius: var(--r-xs); background: none;
|
|
color: var(--muted); font: var(--w-reg) var(--fs-ui) var(--ui); text-align: left; cursor: pointer;
|
|
}
|
|
.tabmenu button:hover:not(:disabled) { background: var(--float-hi); color: var(--text) }
|
|
.tabmenu button:disabled { color: var(--ghost); cursor: default }
|
|
|
|
.tabconfirm {
|
|
position: fixed; z-index: 61; width: max-content; max-width: min(340px, 92vw);
|
|
display: flex; flex-direction: column; gap: 3px;
|
|
padding: 9px 11px 10px; border-radius: var(--r-sm);
|
|
background: var(--float); border: 1px solid var(--border);
|
|
box-shadow: var(--shadow-float);
|
|
animation: tabconfirmin var(--m-card) both;
|
|
}
|
|
@keyframes tabconfirmin { from { opacity: 0; transform: translateY(-3px) } to { opacity: 1; transform: none } }
|
|
.tabconfirm .q { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.tabconfirm .h { font: var(--w-reg) var(--fs-meta)/1.55 var(--ui); color: var(--muted) }
|
|
.tabconfirm .a { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end }
|
|
.tabconfirm .a button {
|
|
padding: 4px 10px; border-radius: var(--r-xs); cursor: pointer;
|
|
border: 1px solid var(--border); background: transparent; color: var(--muted);
|
|
font: var(--w-med) var(--fs-meta) var(--ui);
|
|
}
|
|
.tabconfirm .a button:hover { color: var(--text); border-color: var(--faint) }
|
|
.tabconfirm .a button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.tabconfirm .a button[data-danger] { color: var(--err-ink); border-color: color-mix(in srgb, var(--err) 45%, var(--border)) }
|
|
.tabconfirm .a button[data-danger]:hover { background: var(--err); border-color: var(--err); color: var(--err-fg) }
|
|
|
|
.wsrow .wsdel {
|
|
position: static; top: auto; right: auto; flex: none;
|
|
background: transparent;
|
|
}
|
|
.sessrow .wsdel { flex: none; background: transparent }
|
|
|
|
.wsrow .wsdel, .wsrow .wsmore { opacity: .45 }
|
|
.wsrow:hover .wsdel, .wsrow .wsdel:focus-visible, .wsrow:hover .wsmore, .wsrow .wsmore:focus-visible, .wsmore[aria-expanded="true"] { opacity: 1 }
|
|
.wsmore:hover, .wsmore[aria-expanded="true"] { background: var(--overlay); color: var(--text) }
|
|
.wsmore .studio-icon { width: 14px; height: 14px; stroke-width: 2.4 }
|
|
.sessrow .wsdel:hover, .wsrow .wsdel:hover { background: var(--border); color: var(--err) }
|
|
|
|
.ptab { user-select: none }
|
|
.ptab-in { user-select: text }
|
|
|
|
.mode.attach { padding-inline: 8px; color: var(--faint) }
|
|
.mode.attach:hover { color: var(--accent-ink) }
|
|
|
|
:root[data-bg] .prefs-sheet {
|
|
background: color-mix(in srgb, var(--float) 80%, transparent);
|
|
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
|
|
}
|
|
:root[data-bg] .cpv-sheet {
|
|
background: color-mix(in srgb, var(--float) 80%, transparent);
|
|
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
|
|
}
|
|
:root[data-bg] .cpv-hd { background: color-mix(in srgb, var(--surface) 34%, transparent) }
|
|
:root[data-bg] .prefs-hd,
|
|
:root[data-bg] .prefs-nav { background: color-mix(in srgb, var(--surface) 34%, transparent) }
|
|
|
|
.block[data-b="ctx"] .lbl { display: flex; align-items: baseline; gap: 8px }
|
|
.block[data-b="ctx"] .lbl .n { margin-left: auto; font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--ghost) }
|
|
|
|
.ctxnote { margin: 5px 0 0; font: var(--w-reg) var(--fs-meta)/1.5 var(--ui); color: var(--faint) }
|
|
.ctxnote[data-lvl="warn"] { color: var(--warn-ink) }
|
|
|
|
.drow .v .ctxq { display: inline }
|
|
|
|
.block[data-b="ctx"] > .drow:first-of-type .v .ctxq {
|
|
font: var(--w-semi) var(--fs-display)/1.1 var(--mono);
|
|
font-variant-numeric: tabular-nums; letter-spacing: -.01em;
|
|
}
|
|
.block[data-b="ctx"] .ctxbar { height: 10px; margin-top: 10px }
|
|
|
|
.drow .v .ctxq em { font-style: normal; margin-left: 7px; color: var(--ghost) }
|
|
.ctxden {
|
|
padding: 0; border: 0; background: none; cursor: pointer;
|
|
font: inherit; color: inherit; letter-spacing: inherit;
|
|
border-bottom: 1px dashed var(--faint); transition: color var(--m-line), border-color var(--m-line);
|
|
}
|
|
.ctxden:hover, .ctxden[aria-expanded="true"] { color: var(--accent-ink); border-bottom-color: var(--accent) }
|
|
|
|
.ctxwin { margin-top: 7px }
|
|
|
|
.ctxfold { margin-top: 7px; display: grid; gap: 5px }
|
|
.ctxfold .ctxnote { margin: 0 }
|
|
|
|
.ctxfold .ctxfine { margin: 0; font: var(--w-reg) var(--fs-micro)/1.45 var(--ui); color: var(--ghost) }
|
|
.ctxwin .r { display: flex; gap: 6px }
|
|
.ctxwin input {
|
|
flex: 1 1 auto; min-width: 0; padding: 4px 7px;
|
|
border: 1px solid var(--border); border-radius: var(--r-xs);
|
|
background: var(--surface); color: var(--text);
|
|
font: var(--w-reg) var(--fs-ui) var(--mono); font-variant-numeric: tabular-nums;
|
|
}
|
|
.ctxwin input:focus-visible { outline: none; border-color: var(--accent) }
|
|
.ctxwin button {
|
|
flex: none; padding: 4px 11px; border: 1px solid var(--border); border-radius: var(--r-xs);
|
|
background: var(--overlay); color: var(--text); font: var(--w-med) var(--fs-meta) var(--ui); cursor: pointer;
|
|
transition: background var(--m-line), color var(--m-line), border-color var(--m-line);
|
|
}
|
|
.ctxwin button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink) }
|
|
.ctxwin button:disabled { color: var(--ghost); cursor: default }
|
|
|
|
.ctxbar {
|
|
position: relative; display: flex; gap: 2px; height: 6px; margin-top: 7px;
|
|
border-radius: var(--r-md); background: var(--overlay); overflow: visible; cursor: default;
|
|
}
|
|
.ctxbar > i {
|
|
height: 100%; min-width: 2px; transition: width var(--m-panel) ;
|
|
border-radius: var(--r-xs);
|
|
}
|
|
.ctxbar > i:first-child { border-radius: var(--r-md) var(--r-xs) var(--r-xs) var(--r-md) }
|
|
.ctxbar > i:last-of-type { border-radius: var(--r-xs) var(--r-md) var(--r-md) var(--r-xs) }
|
|
.ctxbar > i[data-p="system"] { background: var(--cat-1) }
|
|
.ctxbar > i[data-p="tools"] { background: var(--cat-2) }
|
|
.ctxbar > i[data-p="user"] { background: var(--cat-3) }
|
|
.ctxbar > i[data-p="reply"] { background: var(--cat-4) }
|
|
.ctxbar > i[data-p="output"] { background: var(--cat-5) }
|
|
|
|
.ctxbar[data-press="near"] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) }
|
|
.ctxbar[data-press="soon"] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 58%, transparent) }
|
|
.ctxnote[data-press] { color: var(--accent-ink) }
|
|
|
|
.ctxcap { margin-top: 9px }
|
|
.ctxcap .drow .k, .ctxcap .drow .v { color: var(--ghost) }
|
|
.ctxcapbar {
|
|
position: relative; height: 3px; margin-top: 4px; border-radius: var(--r-md);
|
|
background: var(--overlay);
|
|
}
|
|
.ctxcapbar > i {
|
|
display: block; height: 100%; border-radius: var(--r-md);
|
|
background: var(--faint); transition: width var(--m-panel) ;
|
|
}
|
|
|
|
.ctxcapbar > b {
|
|
position: absolute; top: -2px; bottom: -2px; width: 1.5px; margin-left: -0.75px;
|
|
background: var(--text); transition: left var(--m-panel), width var(--m-line), top var(--m-line), bottom var(--m-line);
|
|
}
|
|
|
|
.ctxcapbar[data-live] > b {
|
|
top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px;
|
|
border-radius: 1.5px; transition: none;
|
|
}
|
|
.ctxcapbar:has(.ctxslide:focus-visible) > b {
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
|
|
}
|
|
|
|
.ctxslide {
|
|
position: absolute; left: -4px; right: -4px; top: -9px; height: 21px;
|
|
margin: 0; padding: 0; width: auto; appearance: none; background: none;
|
|
cursor: ew-resize;
|
|
}
|
|
.ctxslide:focus-visible { outline: none }
|
|
.ctxslide::-webkit-slider-runnable-track { height: 21px; background: none }
|
|
.ctxslide::-webkit-slider-thumb { appearance: none; width: 18px; height: 21px; background: none }
|
|
.ctxslide:disabled { cursor: default }
|
|
|
|
.ctxwhy { margin: 6px 0 0; font: var(--w-reg) var(--fs-micro)/1.5 var(--ui); color: var(--ghost) }
|
|
|
|
.ctxlg { display: grid; gap: 4px }
|
|
.ctxlg .r { display: flex; align-items: center; gap: 8px; font: var(--w-reg) var(--fs-ui) var(--ui); color: var(--muted) }
|
|
.ctxlg .r i { width: 8px; height: 8px; border-radius: 2px; flex: none }
|
|
.ctxlg .r i[data-p="system"] { background: var(--cat-1) }
|
|
.ctxlg .r i[data-p="tools"] { background: var(--cat-2) }
|
|
.ctxlg .r i[data-p="user"] { background: var(--cat-3) }
|
|
.ctxlg .r i[data-p="reply"] { background: var(--cat-4) }
|
|
.ctxlg .r i[data-p="output"] { background: var(--cat-5) }
|
|
.ctxlg .r em { font: var(--w-reg) var(--fs-micro) var(--mono); font-style: normal; color: var(--ghost) }
|
|
.ctxlg .r b { margin-left: auto; font: var(--w-med) var(--fs-meta) var(--mono); color: var(--text) }
|
|
|
|
.side .scroll .mtop .amt { font-size: var(--fs-lead) }
|
|
.side .scroll > *:first-child .mtop .amt { font-size: var(--fs-display) }
|
|
|
|
.mtop { display: flex; align-items: baseline; gap: 8px; min-height: 26px }
|
|
.mtop .amt {
|
|
font: var(--w-med) var(--fs-display)/1 var(--mono); color: var(--text);
|
|
letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums;
|
|
}
|
|
.mtop .msub { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--ghost) }
|
|
.mtop .delta { margin-left: auto; font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--ghost) }
|
|
|
|
.mtop[data-alt] .amt { font-size: var(--fs-lead); color: var(--muted) }
|
|
.mnote { margin: 2px 0 0; font: var(--w-reg) var(--fs-meta)/1.5 var(--ui); color: var(--ghost) }
|
|
|
|
.nums { display: flex; flex-wrap: wrap; gap: 4px 12px; font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--ghost) }
|
|
.nums b { margin-left: 4px; font-weight: var(--w-med); color: var(--muted) }
|
|
|
|
.ctxpop {
|
|
position: fixed; z-index: 60; width: 232px;
|
|
display: grid; gap: 5px; padding: 10px 11px 9px;
|
|
border-radius: var(--r-sm); background: var(--float);
|
|
border: 1px solid var(--border); box-shadow: var(--shadow-float);
|
|
pointer-events: none;
|
|
animation: card var(--m-line) both;
|
|
}
|
|
.ctxpop .hd { display: flex; align-items: baseline; font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.ctxpop .hd .n { margin-left: auto; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--muted) }
|
|
.ctxpop .row { display: flex; align-items: center; gap: 7px; font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--muted) }
|
|
.ctxpop .row > i { width: 7px; height: 7px; border-radius: var(--r-sm); flex: none }
|
|
.ctxpop .row > i[data-p="system"] { background: var(--cat-1) }
|
|
.ctxpop .row > i[data-p="tools"] { background: var(--cat-2) }
|
|
.ctxpop .row > i[data-p="user"] { background: var(--cat-3) }
|
|
.ctxpop .row > i[data-p="reply"] { background: var(--cat-4) }
|
|
.ctxpop .row > i[data-p="output"] { background: var(--cat-5) }
|
|
.ctxpop .row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
|
|
.ctxpop .row .v { font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--text); font-variant-numeric: tabular-nums }
|
|
.ctxpop .row .p { width: 30px; text-align: right; font: var(--w-reg) var(--fs-micro) var(--mono); color: var(--ghost) }
|
|
.ctxpop .foot { margin: 3px 0 0; font: var(--w-reg) var(--fs-micro)/1.5 var(--ui); color: var(--ghost) }
|
|
|
|
.storage .vol { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px }
|
|
.storage .vol .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px }
|
|
.storage .vol .nm { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.storage .vol .sz { font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--muted); font-variant-numeric: tabular-nums }
|
|
.storage .meter { height: 5px; border-radius: var(--r-xs); background: var(--hair); overflow: hidden }
|
|
.storage .meter > i { display: block; height: 100%; background: var(--accent-ink); transition: width var(--t-line) var(--ease-out) }
|
|
.storage .drives { margin: 10px 0 0 }
|
|
.storage .drives p { margin: 0; font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--muted); font-variant-numeric: tabular-nums }
|
|
|
|
.storage .item { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap;
|
|
padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: 8px }
|
|
.storage .item .l { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 12em }
|
|
.storage .item .l b { font: var(--w-semi) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.storage .item .hint { font: var(--w-reg) var(--fs-meta) var(--ui); color: var(--muted) }
|
|
.storage .item .p { font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--ghost); word-break: break-all }
|
|
|
|
.storage .item .held { font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--accent-ink) }
|
|
.storage .vol .note { margin: 3px 0 7px }
|
|
|
|
.storage .mover { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 4px }
|
|
.storage .mover input { width: 100%; padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--r-xs);
|
|
background: var(--surface); color: var(--text); font: var(--w-reg) var(--fs-meta) var(--mono) }
|
|
.storage .mover input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.storage .mover .acts { display: flex; gap: 8px; justify-content: flex-end }
|
|
.storage .refusals { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px }
|
|
.storage .refusals li { font: var(--w-reg) var(--fs-meta)/1.5 var(--ui); color: var(--err-ink) }
|
|
.storage .ready { margin: 0; font: var(--w-reg) var(--fs-meta)/1.5 var(--ui); color: var(--muted) }
|
|
.storage .moving .failed { margin: 0; font: var(--w-reg) var(--fs-meta)/1.5 var(--ui); color: var(--err-ink) }
|
|
.storage .moving .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px }
|
|
.storage .moving .nm { font: var(--w-med) var(--fs-ui) var(--ui); color: var(--text) }
|
|
.storage .moving .sz { font: var(--w-reg) var(--fs-meta) var(--mono); color: var(--muted); font-variant-numeric: tabular-nums }
|
|
|
|
.usage { --chart: #3555C4; display: flex; flex-direction: column; gap: 14px }
|
|
[data-theme="dark"] .usage { --chart: #6B87F0 }
|
|
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .usage { --chart: #6B87F0 } }
|
|
.uwait, .uerr { padding: 28px 4px; color: var(--muted); font: var(--w-reg) var(--fs-ui) var(--ui) }
|
|
.uerr { color: var(--err-ink) }
|
|
|
|
.uhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
|
|
.uranges { display: flex; gap: 3px; padding: 3px; background: var(--overlay); border-radius: var(--r-pill) }
|
|
.uranges button {
|
|
padding: 5px 13px; border: 0; background: none; cursor: pointer; border-radius: var(--r-pill);
|
|
flex: none; white-space: nowrap;
|
|
font: var(--w-med) var(--fs-ui) var(--ui); color: var(--muted);
|
|
transition: color var(--t-line) var(--ease), background var(--t-line) var(--ease);
|
|
}
|
|
.uranges button:hover { color: var(--text) }
|
|
.uranges button[aria-pressed="true"] { background: var(--raised); color: var(--text) }
|
|
.uspan { color: var(--muted); font: var(--w-reg) var(--fs-ui) var(--mono) }
|
|
.udates {
|
|
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 10px;
|
|
align-items: end; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--overlay);
|
|
}
|
|
.udates label, .umonth {
|
|
display: flex; flex-direction: column; gap: 5px;
|
|
color: var(--muted); font: var(--w-med) var(--fs-meta) var(--ui);
|
|
}
|
|
.udates input, .umonth input {
|
|
min-width: 0; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--r-sm);
|
|
background: var(--raised); color: var(--text); font: var(--w-reg) var(--fs-ui) var(--mono); color-scheme: light dark;
|
|
}
|
|
.udates button, .umonth button {
|
|
min-height: 34px; padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--r-sm);
|
|
background: var(--raised); color: var(--text); font: var(--w-med) var(--fs-ui) var(--ui); cursor: pointer;
|
|
}
|
|
.udates button:disabled { color: var(--faint); cursor: default }
|
|
.umonth { max-width: 260px; margin-top: -4px }
|
|
|
|
.uhero { padding: 22px 24px; background: var(--raised); border: 1px solid var(--border); border-radius: var(--r-md) }
|
|
.uhero-k { color: var(--muted); font: var(--w-med) var(--fs-meta) var(--ui); letter-spacing: var(--track-lead); text-transform: uppercase }
|
|
.uhero-fig { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 10px }
|
|
.uhero-v { font: var(--w-med) calc(38px * var(--fs-scale, 1))/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: var(--track-tight) }
|
|
.uhero-scope {
|
|
padding: 4px 10px; border-radius: var(--r-pill); background: var(--overlay);
|
|
color: var(--muted); font: var(--w-med) var(--fs-ui) var(--ui);
|
|
}
|
|
.uhero-note { margin: 11px 0 0; max-width: 62ch; color: var(--muted); font: var(--w-reg) var(--fs-ui)/1.6 var(--ui) }
|
|
|
|
.utiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); gap: 12px }
|
|
.utile { padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md) }
|
|
.utile .k { color: var(--muted); font: var(--w-med) var(--fs-meta) var(--ui); letter-spacing: var(--track-lead); text-transform: uppercase }
|
|
.utile .v { margin-top: 6px; font: var(--w-med) var(--fs-display)/1.1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: var(--track-tight) }
|
|
.utile .m { margin-top: 4px; color: var(--muted); font: var(--w-reg) var(--fs-meta) var(--ui) }
|
|
|
|
.ucard { min-width: 0; padding: 16px 18px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md) }
|
|
.uhero, .utile, .ucard, .storage .item {
|
|
transition: border-color var(--t-card) var(--ease-out), box-shadow var(--t-card) var(--ease-out);
|
|
}
|
|
@media (hover: hover) {
|
|
.uhero:hover, .utile:hover, .ucard:hover, .storage .item:hover {
|
|
border-color: color-mix(in srgb, var(--halo) 22%, var(--border));
|
|
box-shadow: var(--lit), 0 16px 34px -30px color-mix(in srgb, var(--halo) 30%, transparent);
|
|
}
|
|
}
|
|
.ucard-h { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap }
|
|
.ucard-h h3 { margin: 0; font: var(--w-med) var(--fs-ui) var(--ui) }
|
|
.ucard-h .hint { color: var(--muted); font: var(--w-reg) var(--fs-ui) var(--ui) }
|
|
.ucard-s { margin: 2px 0 12px; color: var(--muted); font: var(--w-reg) var(--fs-ui) var(--ui) }
|
|
.utwo { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px }
|
|
.unote { margin-top: 12px; padding: 10px 12px; background: var(--overlay); border-radius: var(--r-sm);
|
|
color: var(--muted); font: var(--w-reg) var(--fs-ui)/1.55 var(--ui) }
|
|
|
|
.uplot { position: relative; margin-top: 8px }
|
|
.uplot svg { display: block; width: 100%; overflow: visible }
|
|
.ugrid line { stroke: var(--hair) }
|
|
.uaxis text { fill: var(--muted); font: var(--fs-meta) var(--mono); font-variant-numeric: tabular-nums }
|
|
.uarea { fill: color-mix(in oklab, var(--chart) 14%, transparent) }
|
|
.uline { fill: none; stroke: var(--chart); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
|
|
.ucap, .umark { fill: var(--chart); stroke: var(--surface); stroke-width: 2 }
|
|
.ucross { stroke: color-mix(in oklab, var(--chart) 40%, transparent); stroke-width: 1; stroke-dasharray: 3 3 }
|
|
.uhit { fill: transparent; cursor: crosshair }
|
|
.utip {
|
|
position: absolute; pointer-events: none; transform: translate(-50%, -118%); z-index: 3;
|
|
padding: 6px 9px; white-space: nowrap; border-radius: var(--r-sm);
|
|
background: var(--float); border: 1px solid var(--border); box-shadow: var(--shadow-float);
|
|
}
|
|
.utip .d { color: var(--muted); font: var(--fs-meta) var(--mono) }
|
|
.utip .v { margin-top: 1px; font: var(--w-med) var(--fs-ui) var(--mono); font-variant-numeric: tabular-nums }
|
|
|
|
.udaily { padding-top: 14px }
|
|
.utable-wrap { max-height: 320px; margin-top: 8px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-sm) }
|
|
.utable { width: 100%; min-width: 460px; border-collapse: collapse; font: var(--w-reg) var(--fs-meta) var(--mono); font-variant-numeric: tabular-nums }
|
|
.utable th, .utable td { padding: 8px 10px; border-bottom: 1px solid var(--hair); text-align: right; white-space: nowrap }
|
|
.utable th:first-child, .utable td:first-child {
|
|
position: sticky; left: 0; z-index: 2; background: var(--surface);
|
|
box-shadow: 1px 0 0 var(--hair); text-align: left;
|
|
}
|
|
.utable th:first-child { z-index: 3 }
|
|
.utable th { position: sticky; top: 0; z-index: 1; background: var(--surface); color: var(--muted); font-weight: var(--w-med) }
|
|
.utable tr:last-child td { border-bottom: 0 }
|
|
.utable td:not(:first-child) { color: var(--muted) }
|
|
.utable .ud { color: var(--text) }
|
|
.utable-scroll-hint { display: none }
|
|
.utable-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
.urows, .urow, .urow-t { min-width: 0 }
|
|
.urows { display: flex; flex-direction: column; gap: 10px; margin-top: 8px }
|
|
.urow-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px }
|
|
.urow-t .n { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--fs-ui) var(--mono) }
|
|
.urow-t .v { flex: none; white-space: nowrap; color: var(--muted); font: var(--fs-ui) var(--mono); font-variant-numeric: tabular-nums }
|
|
.utrack { height: 6px; background: var(--hair); border-radius: var(--r-pill); overflow: hidden }
|
|
|
|
.ufill { display: block; height: 100%; background: var(--row-color, var(--chart)); border-radius: var(--r-pill);
|
|
transition: width var(--t-live) var(--ease-spring) }
|
|
|
|
@media (max-width: 560px) {
|
|
.uhead { align-items: stretch }
|
|
.uranges { width: 100%; overflow-x: auto }
|
|
.uspan { width: 100%; text-align: center }
|
|
.uhero { padding: 18px 16px }
|
|
.uhero-v { font-size: calc(30px * var(--fs-scale, 1)); overflow-wrap: anywhere }
|
|
.utiles { grid-template-columns: repeat(2, minmax(0, 1fr)) }
|
|
.ucard { padding: 14px 12px 10px }
|
|
.utwo { grid-template-columns: minmax(0, 1fr) }
|
|
.udates { grid-template-columns: 1fr }
|
|
.udates button { width: 100% }
|
|
.umonth { max-width: none }
|
|
.utable th, .utable td { padding: 7px 8px }
|
|
.utable-scroll-hint { display: inline }
|
|
.utable-scroll-hint::before { content: " · " }
|
|
}
|
|
|
|
.memedit { display: flex; flex-direction: column; gap: 10px }
|
|
.memedit label { display: flex; flex-direction: column; gap: 4px;
|
|
color: var(--muted); font: var(--w-med) var(--fs-meta) var(--ui); letter-spacing: var(--track-lead) }
|
|
.memedit input, .memedit textarea, .memedit select {
|
|
padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--r-sm);
|
|
background: var(--raised); color: var(--text); font: var(--w-reg) var(--fs-ui) var(--ui); outline: none;
|
|
}
|
|
.memedit textarea { resize: vertical; min-height: 120px; font-family: var(--mono); line-height: 1.6 }
|
|
.memedit input:focus-visible, .memedit textarea:focus-visible, .memedit select:focus-visible {
|
|
border-color: var(--focus); box-shadow: 0 0 0 2px color-mix(in oklab, var(--focus) 26%, transparent);
|
|
}
|
|
.memedit .when { max-width: 220px }
|
|
.memedit .row, .memedit .peek .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
|
|
.memedit .peek .row { margin-top: 8px }
|
|
.memedit .hint { color: var(--muted); font: var(--w-reg) var(--fs-meta) var(--ui) }
|
|
|
|
.dif-act {
|
|
padding: 3px 9px; cursor: pointer; border-radius: var(--r-sm);
|
|
border: 1px solid var(--border); background: var(--raised); color: var(--text);
|
|
font: var(--w-med) var(--fs-meta) var(--ui);
|
|
transition: border-color var(--t-line) var(--ease), color var(--t-line) var(--ease);
|
|
}
|
|
.dif-act:hover { border-color: var(--focus); color: var(--focus) }
|
|
.dif-act.ghost { background: none; border-color: transparent; color: var(--muted) }
|
|
.dif-act.ghost:hover { color: var(--text) }
|
|
.dif-act[disabled] { opacity: .5; cursor: default }
|
|
.dif-act:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px }
|
|
|
|
:is(button, summary, a[href], [role="button"], [role="tab"], [role="option"],
|
|
[role="menuitem"], [role="menuitemcheckbox"], [role="switch"],
|
|
[role="treeitem"]):active:not(:disabled, [aria-disabled="true"]) {
|
|
transform: var(--press);
|
|
background-image: linear-gradient(var(--press-wash), var(--press-wash));
|
|
transition-duration: var(--t-press);
|
|
}
|
|
|
|
:is([role="treeitem"], .acctrow, .srvrow, .memrow) { --press: translateY(1px) }
|
|
.dif-ask {
|
|
display: flex; flex-direction: column; gap: 7px;
|
|
padding: 9px 11px; border-bottom: 1px solid var(--hair); background: var(--overlay);
|
|
color: var(--text); font: var(--w-reg) var(--fs-ui)/1.5 var(--ui);
|
|
}
|
|
|
|
.dif-ask[data-clash] { background: color-mix(in oklab, var(--warn) 12%, var(--overlay)) }
|
|
.dif-ask .row { display: flex; gap: 7px; flex-wrap: wrap }
|
|
|
|
@supports (animation-delay: calc(sibling-index() * 1ms)) {
|
|
.compose .row > *,
|
|
.hits > *,
|
|
.steps > * {
|
|
animation-delay: calc((sibling-index() - 1) * var(--m-step));
|
|
}
|
|
.compose .row { --m-step: 30ms }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-delay: 0s !important;
|
|
animation-duration: .01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: .01ms !important;
|
|
}
|
|
}
|