benchgo-plugin 0.0.0-stage → 0.0.2

package/lib/link-web/app.css

@@ -0,0 +1,92 @@
+.link-settings, .link-mobile, .link-dialog-backdrop {
+  --link-ink: #142029;
+  --link-muted: #677177;
+  --link-faint: #edf0ed;
+  --link-paper: #fffdf8;
+  --link-panel: #f6f7f3;
+  --link-accent: #2c6ee8;
+  --link-accent-soft: #e7efff;
+  --link-danger: #b34845;
+  --link-radius: 14px;
+}
+@media (prefers-color-scheme: dark) {
+  .link-mobile { --link-ink: #edf2f0; --link-muted: #9da9aa; --link-faint: #2c3436; --link-paper: #171b1d; --link-panel: #202628; --link-accent: #8bb3ff; --link-accent-soft: #243653; --link-danger: #f0928d; }
+}
+body[data-ds-dark-theme] :is(.link-settings, .link-dialog-backdrop) { --link-ink: #edf2f0; --link-muted: #9da9aa; --link-faint: #2c3436; --link-paper: #171b1d; --link-panel: #202628; --link-accent: #8bb3ff; --link-accent-soft: #243653; --link-danger: #f0928d; }
+body[data-ds-dark-theme] :is(.link-settings, .link-dialog-backdrop) .link-button-primary { color: #10213e; }
+.link-settings, .link-mobile, .link-dialog-backdrop { font-family: inherit; color: var(--link-ink); }
+.link-settings { width: 100%; max-width: 760px; min-width: 0; box-sizing: border-box; padding: 12px 0 36px; }
+.link-settings .link-heading h2 { margin: 8px 0 10px; font-size: 25px; font-weight: 600; letter-spacing: -.035em; line-height: 1.25; }
+.link-settings .link-heading p { font-size: 13px; }
+.link-heading, .link-mobile-copy { max-width: 600px; }
+.link-kicker { display: block; color: var(--link-muted); font-size: 10px; font-weight: 700; letter-spacing: .16em; line-height: 1.3; }
+.link-heading h2, .link-mobile-copy h1 { margin: 13px 0 12px; font-size: clamp(32px, 5vw, 52px); font-weight: 500; letter-spacing: -.055em; line-height: .98; }
+.link-heading h2 em, .link-mobile-copy h1 em { color: var(--link-accent); font-style: normal; }
+.link-heading p, .link-mobile-copy p { max-width: 48ch; margin: 0; color: var(--link-muted); line-height: 1.65; }
+.link-form { display: grid; grid-template-columns: 1fr 145px; gap: 1px; margin-top: 44px; overflow: hidden; border: 1px solid var(--link-faint); border-radius: var(--link-radius); background: var(--link-faint); }
+.link-field { display: grid; gap: 8px; padding: 19px 18px; background: var(--link-paper); font-size: 13px; }
+.link-field span, .link-toggle-field label { font-weight: 650; }
+.link-field small, .link-toggle-field small { display: block; margin-top: 4px; color: var(--link-muted); font-size: 11px; font-weight: 400; }
+.link-field input { width: 100%; box-sizing: border-box; border: 0; outline: none; background: transparent; color: var(--link-ink); font: inherit; font-size: 15px; }
+.link-field-wide { grid-column: 1 / -1; }
+.link-toggle-field { display: flex; align-items: center; justify-content: space-between; grid-column: 1 / -1; }
+.link-toggle-field input { appearance: none; position: relative; width: 40px; height: 24px; margin: 0; border-radius: 99px; background: var(--link-faint); cursor: pointer; transition: background .2s ease; }
+.link-toggle-field input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--link-paper); box-shadow: 0 1px 3px #0002; transition: transform .2s ease; }
+.link-toggle-field input:checked { background: var(--link-accent); }.link-toggle-field input:checked::after { transform: translateX(16px); }
+.link-form-actions { display: flex; grid-column: 1 / -1; gap: 9px; padding: 14px; background: var(--link-paper); }
+.link-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 8px 13px; border: 1px solid var(--link-faint); border-radius: 9px; background: transparent; color: var(--link-ink); cursor: pointer; font: inherit; font-size: 12px; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
+.link-button:hover:not(:disabled) { border-color: var(--link-accent); transform: translateY(-1px); }.link-button:disabled { cursor: wait; opacity: .45; }.link-button-primary { border-color: var(--link-accent); background: var(--link-accent); color: white; }.link-button-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--link-accent), black 10%); }
+.link-error { margin: 14px 0; color: var(--link-danger); font-size: 12px; }
+.link-status-panel, .link-device-list { margin-top: 30px; padding: 22px; border: 1px solid var(--link-faint); border-radius: var(--link-radius); background: var(--link-panel); }
+.link-panel-head, .link-pair-row { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }.link-panel-head h3, .link-pair-row h3 { margin: 7px 0 5px; font-size: 17px; letter-spacing: -.025em; }.link-panel-head > span { color: var(--link-muted); font-size: 12px; }
+.link-online { display: flex; align-items: center; gap: 7px; padding-top: 2px; color: var(--link-muted); font-size: 12px; }.link-status-dot { display: inline-block; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--link-muted); }.link-status-running { background: #39ab7d; box-shadow: 0 0 0 3px #39ab7d22; }.link-status-waiting { background: #d89a3d; }.link-status-failed { background: var(--link-danger); }
+.link-addresses { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }.link-addresses code, .link-pair-code { padding: 7px 9px; border-radius: 7px; background: var(--link-paper); color: var(--link-muted); font: 11px ui-monospace, SFMono-Regular, monospace; }
+.link-pair-row { align-items: center; margin-top: 40px; padding: 2px 2px 22px; border-bottom: 1px solid var(--link-faint); }.link-pair-row p { max-width: 44ch; margin: 0; color: var(--link-muted); font-size: 12px; line-height: 1.6; }
+.link-device-list { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }.link-device { display: flex; align-items: center; gap: 11px; padding: 15px 0; border-top: 1px solid var(--link-faint); }.link-device > div:nth-child(2) { min-width: 0; flex: 1; }.link-device strong, .link-device small { display: block; }.link-device strong { font-size: 13px; }.link-device small { margin-top: 3px; color: var(--link-muted); font-size: 11px; }.link-empty { color: var(--link-muted); font-size: 12px; }
+.link-dialog-backdrop { position: fixed; z-index: 2100; inset: 0; display: grid; place-items: center; padding: 20px; background: #0c151899; backdrop-filter: blur(8px); }.link-dialog { position: relative; width: min(420px, 100%); min-width: 0; box-sizing: border-box; padding: 28px; border-radius: 18px; background: var(--link-paper); box-shadow: 0 25px 80px #0004; text-align: center; }.link-dialog h3 { margin: 10px 0 5px; font-size: 24px; letter-spacing: -.04em; }.link-dialog p { margin: 0 auto 19px; color: var(--link-muted); font-size: 12px; line-height: 1.6; }.link-dialog-close { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 8px; border: 0; border-radius: 9px; background: none; color: var(--link-muted); cursor: pointer; }.link-qr-surface { display: grid; place-items: center; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 0 auto 16px; padding: 10px; border: 1px solid #e6e9e7; border-radius: 16px; background: #fffdf8; }
+.link-qr { display: block; max-width: 100%; height: auto !important; aspect-ratio: 1; border-radius: 6px; }
+.link-qr-error { max-width: 220px; padding: 24px 8px; color: #b34845 !important; }.link-pair-code { display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; margin: 12px 0 0; padding: 12px; color: var(--link-ink); background: var(--link-panel); font-size: 12px; line-height: 1.5; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; text-align: left; }.link-expiry { display: block; margin-top: 8px; color: var(--link-muted); font-size: 11px; }.link-pending-list { margin-top: 20px; text-align: left; }.link-pending-list .link-device { padding: 11px 0; }.link-pending-list .link-device > div:last-child { display: flex; gap: 5px; }
+.link-mobile { min-height: 100dvh; box-sizing: border-box; padding: 28px clamp(20px, 7vw, 64px); background: var(--link-paper); }.link-mobile-pair, .link-mobile-home { display: flex; flex-direction: column; }.link-mobile-brand { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: -.02em; }.link-mark { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; background: var(--link-ink); color: var(--link-paper); font-size: 17px; }.link-mobile-copy { margin: auto 0 32px; }.link-mobile-copy h1 { font-size: clamp(42px, 11vw, 74px); }.link-mobile-actions { display: flex; flex-wrap: wrap; gap: 9px; }.link-pair-input { display: grid; gap: 8px; max-width: 500px; margin-bottom: 18px; }.link-pair-input label { margin-top: 7px; color: var(--link-muted); font-size: 11px; }.link-pair-input input, .link-pair-input textarea, .link-composer textarea { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid var(--link-faint); border-radius: 9px; outline: none; padding: 11px; background: var(--link-panel); color: var(--link-ink); font: 13px ui-monospace, monospace; }.link-pair-input input:focus, .link-pair-input textarea:focus, .link-composer textarea:focus { border-color: var(--link-accent); }.link-pair-status { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--link-muted); font-size: 12px; }
+.link-mobile-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.link-mobile-header > div:nth-child(2) { display: grid; flex: 1; text-align: center; }.link-mobile-header small { margin-top: 3px; color: var(--link-muted); font-size: 10px; }.link-mobile-home .link-mobile-copy { margin-top: clamp(80px, 18vh, 180px); }.link-projects { display: grid; gap: 7px; max-width: 650px; }.link-project, .link-session { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 15px; border: 1px solid var(--link-faint); border-radius: 10px; background: transparent; color: var(--link-ink); text-align: left; cursor: pointer; }.link-project:hover, .link-project.is-active { border-color: var(--link-accent); background: var(--link-accent-soft); }.link-project small { margin-left: auto; color: var(--link-muted); font: 10px ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; }.link-session-actions { display: grid; gap: 8px; max-width: 650px; margin-top: 26px; }.link-session { border: 0; border-top: 1px solid var(--link-faint); border-radius: 0; }.link-session small { margin-left: auto; color: var(--link-muted); }.link-mobile-chat { display: flex; flex-direction: column; }.link-messages { display: grid; align-content: start; gap: 20px; flex: 1; max-width: 720px; margin: 45px auto 25px; width: 100%; }.link-message span { color: var(--link-muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; }.link-message p { margin: 5px 0 0; white-space: pre-wrap; line-height: 1.65; }.link-message-user p { color: var(--link-accent); }.link-composer { display: flex; align-items: end; gap: 8px; max-width: 720px; width: 100%; margin: 0 auto; }.link-composer textarea { min-height: 40px; max-height: 150px; resize: none; }
+@media (prefers-reduced-motion: reduce) { .link-button, .link-toggle-field input, .link-toggle-field input::after { transition: none; } }
+@media (max-width: 580px) { .link-settings { padding: 26px 0 60px; }.link-form { grid-template-columns: 1fr; }.link-field-wide, .link-toggle-field, .link-form-actions { grid-column: auto; }.link-pair-row { align-items: flex-start; flex-direction: column; }.link-heading h2 { font-size: 38px; }.link-panel-head { gap: 10px; }.link-project small { display: none; } }
+
+.link-mobile { font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding-top: max(28px, env(safe-area-inset-top)); padding-bottom: max(28px, env(safe-area-inset-bottom)); }.link-mobile button, .link-mobile input, .link-mobile textarea, .link-mobile .dowork-select { font-family: inherit; }:is(.link-settings, .link-mobile, .link-dialog-backdrop) .cmd-ui-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; color: inherit; line-height: 0; vertical-align: middle; }
+:is(.link-settings, .link-mobile, .link-dialog-backdrop) .cmd-ui-icon > .cmd-ui-linear { display: inline-flex !important; width: 100%; height: 100%; }
+:is(.link-settings, .link-mobile, .link-dialog-backdrop) .cmd-ui-icon svg { display: block; width: 100%; height: 100%; }
+:is(.link-settings, .link-mobile, .link-dialog-backdrop) .cmd-ui-bold { display: none !important; }.link-mode-actions { display: grid; gap: 8px; min-width: 175px; }.link-mode-actions .dowork-select, .link-model-select .dowork-select { width: 100%; padding: 9px; background: var(--link-paper); border: 1px solid var(--link-faint); border-radius: 9px; color: var(--link-ink); font-size: 12px; }.link-pair-open { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 12px; color: var(--link-accent); font-size: 12px; }.link-pair-form { max-width: 500px; }.link-model-select { display: grid; gap: 7px; margin-bottom: 7px; font-size: 11px; color: var(--link-muted); }.link-composer-actions { display: flex; gap: 6px; }.link-send-pending { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 720px; margin: 0 auto 12px; color: var(--link-muted); font-size: 12px; }.link-interaction { padding: 17px; border: 1px solid var(--link-faint); border-radius: 12px; background: var(--link-panel); }.link-interaction h3 { margin: 9px 0 14px; font-size: 15px; }.link-interaction textarea { width: 100%; min-height: 60px; margin-bottom: 9px; border: 1px solid var(--link-faint); border-radius: 8px; background: var(--link-paper); color: var(--link-ink); }.link-interaction-options { display: flex; flex-wrap: wrap; gap: 7px; }.link-mobile-pair .link-mobile-copy { margin-top: max(70px, 13vh); }.link-mobile button:focus-visible, .link-settings button:focus-visible, .link-mobile .dowork-select:focus-visible, .link-settings .dowork-select:focus-visible { outline: 2px solid var(--link-accent); outline-offset: 3px; }
+@media (prefers-color-scheme: dark) { .link-mobile .link-button-primary { color: #10213e; } }
+@media (max-width: 580px) { .link-composer { align-items: stretch; flex-direction: column; }.link-composer-actions { justify-content: flex-end; }.link-heading h2 { line-height: 1.16; }.link-mobile-copy h1 { line-height: 1.1; } }
+.link-question { display: grid; gap: 9px; min-width: 0; padding: 14px 0; border: 0; }.link-question legend { padding: 0; font-size: 14px; }.link-question label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }.link-question label small { display: block; margin-top: 4px; color: var(--link-muted); font-size: 11px; }.link-question input { accent-color: var(--link-accent); }.link-question textarea { box-sizing: border-box; padding: 9px; }
+.link-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+.link-settings .link-status-panel { margin-top: 30px; }.link-settings .link-toggle-field { flex: none; padding-top: 5px; }.link-toggle-field input:disabled { cursor: wait; opacity: .45; }.link-status-note { margin: 15px 0 0; color: var(--link-muted); font-size: 12px; line-height: 1.6; }.link-connect-steps { margin: 12px 0; padding-left: 19px; color: var(--link-ink); font-size: 12px; line-height: 1.8; }.link-pair-row > .link-button { flex: none; min-width: 112px; }
+.link-advanced { margin: 24px 0; border: 1px solid var(--link-faint); border-radius: var(--link-radius); background: var(--link-paper); }.link-advanced > summary { padding: 17px 20px; font-size: 13px; font-weight: 650; cursor: pointer; }.link-advanced[open] > summary { border-bottom: 1px solid var(--link-faint); }.link-advanced-note, .link-mode-notice { margin: 16px 20px; color: var(--link-muted); font-size: 12px; line-height: 1.65; }.link-advanced .link-form { margin: 0 16px 16px; }.link-advanced-controls { display: grid; gap: 1px; margin: 0 16px 16px; overflow: hidden; border: 1px solid var(--link-faint); border-radius: 10px; background: var(--link-faint); }.link-advanced-controls .link-field { min-width: 0; }.link-advanced-controls .dowork-select { width: 100%; box-sizing: border-box; padding: 9px; border: 1px solid var(--link-faint); border-radius: 8px; background: var(--link-paper); color: var(--link-ink); font: inherit; font-size: 12px; }.link-diagnostics { padding: 0 20px 20px; }.link-diagnostics .link-panel-head { align-items: center; }.link-diagnostics h4 { margin: 0; font-size: 12px; }.link-diagnostics p, .link-diagnostics .link-addresses > span { margin: 12px 0 0; color: var(--link-muted); font-size: 11px; line-height: 1.7; }.link-addresses code { max-width: 100%; overflow-wrap: anywhere; }.link-settings .link-device-list { margin-top: 24px; border-radius: var(--link-radius); }
+.link-dialog { max-height: calc(100dvh - 40px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }.link-dialog .link-pair-warning { margin: 14px 0; font-size: 11px; }.link-pair-backup { min-width: 0; padding-top: 12px; border-top: 1px solid var(--link-faint); }.link-pair-backup summary { color: var(--link-muted); font-size: 11px; cursor: pointer; }.link-pair-backup-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
+.link-pair-backup-actions .link-button { flex: 1 1 auto; margin: 0; white-space: nowrap; }
+.link-dialog .link-pair-backup-note { margin: 12px 0 0; font-size: 11px; text-align: left; }
+.link-dialog .link-copy-feedback { margin: 10px 0 0; font-size: 11px; }
+.link-dialog .link-copy-feedback.link-error { color: var(--link-danger); }.link-settings summary:focus-visible, .link-toggle-field input:focus-visible { outline: 2px solid var(--link-accent); outline-offset: 3px; }
+
+.link-dialog-symbol { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 4px 0 8px; border-radius: 13px; color: var(--link-accent); background: var(--link-accent-soft); }
+.link-dialog-close:hover { background: var(--link-panel); color: var(--link-ink); }
+.link-dialog :is(button, a, summary):focus-visible { outline: 2px solid var(--link-accent); outline-offset: 3px; }
+.link-dialog .link-device { flex-wrap: wrap; text-align: left; }
+.link-dialog .link-device-info { flex: 1 1 110px; min-width: 0; }
+.link-dialog .link-device-actions { display: flex; flex: none; gap: 6px; }
+.link-dialog .link-device-actions .link-button { box-sizing: border-box; flex: none; min-width: 76px; white-space: nowrap; }
+.link-device strong { overflow-wrap: anywhere; }
+.link-settings :is(.link-panel-head, .link-pair-row) > div { min-width: 0; }
+.link-settings .link-button { white-space: nowrap; }
+@media (max-width: 580px) { .link-settings { padding: 8px 0 28px; }.link-settings .link-heading h2 { font-size: 24px; }.link-status-panel, .link-device-list { padding: 18px; }.link-settings .link-device { flex-wrap: wrap; }.link-settings .link-device > div { min-width: 0; } }
+@media (max-width: 380px) { .link-dialog-backdrop { padding: 12px; }.link-dialog { max-height: calc(100dvh - 24px); padding: 24px 18px; }.link-dialog h3 { font-size: 22px; }.link-qr-surface { padding: 6px; }.link-pair-backup-actions { flex-direction: column; } }
+.link-settings .link-status-panel { margin-top: 20px; }
+.link-settings .link-pair-row { margin-top: 22px; padding-bottom: 20px; }
+.link-host-actions { display: flex; align-items: center; gap: 10px; }
+.link-error-detail { margin: 10px 0; color: var(--link-muted); font-size: 11px; overflow-wrap: anywhere; }
+.link-error-detail summary { cursor: pointer; }
+.link-settings .link-toggle-field input:disabled { cursor: default; }
+
+@media (any-pointer: coarse) {
+  html { -webkit-tap-highlight-color: transparent; }
+  :is(button, a, summary, [role="button"], [tabindex]):not(input, textarea, .dowork-select, [contenteditable]):focus:not(:focus-visible) { outline: none; }
+}