/* jeff's design system, copied from jev-demo public/jeff.css so the site matches the extension.
   Keep it in sync by copying, not editing: landing-only styles live in site.css. */
@font-face{font-family:Geist;src:url(fonts/Geist-Variable.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(fonts/GeistMono-Variable.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Pixel';src:url(fonts/GeistPixel-Square.woff2) format('woff2');font-display:swap}
:root{
  --bg:#fff;--soft:#f5f5f5;--softer:#fafafa;--line:#ebebeb;--edge:#d9d9d9;
  --ink:#0a0a0a;--ink-2:#3d3d3d;--muted:#6f6f6f;--faint:#a1a1a1;
  --flag:#74bc9c;--warn:#8a6100;--danger:#d1242f;--danger-soft:#fff1f0;
  --sans:Geist,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --pixel:'Geist Pixel','Geist Mono',ui-monospace,monospace;
  --shadow:0 1px 2px #0000000a,0 8px 24px #0000000f;
  color-scheme:light
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans);font-feature-settings:'ss01'}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
[hidden]{display:none!important}
.muted{color:var(--muted)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Small labels in the pixel face, between hairlines that fade out. */
.label{font:11px/1 var(--pixel);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.divider{display:flex;align-items:center;gap:14px;margin:28px 0 16px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line) 30%,var(--line) 70%,transparent)}

/* The three actions as three shapes: hide fills the circle, fade half-fills it, flag rings it. */
.shape{display:inline-block;flex:none;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--ink)}
.shape.hide{background:var(--ink)}
.shape.fade{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}
.shape.flag{border:2.5px solid var(--flag-color,var(--flag))}

/* Status lines under things, like message receipts. */
.receipt{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;line-height:1.4}
.receipt .dot::before{content:'·';margin-right:6px}
.receipt.warn{color:var(--warn)}
.receipt.error{color:var(--danger)}
.icon{display:inline-block;flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.icon.check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E")}
.icon.clock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath d='M8 4.8V8l2 1.4'/%3E%3C/svg%3E")}
.icon.pause{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M6 4.5v7M10 4.5v7'/%3E%3C/svg%3E")}
.icon.alert{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='black'/%3E%3Cpath d='M8 4.5v4.2' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.3' r='.95' fill='white'/%3E%3C/svg%3E")}
.icon.arrow{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 13V3.5M4 7.5l4-4 4 4'/%3E%3C/svg%3E")}
.icon.close{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E")}
.icon.chevron{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5L8 10l3.5-3.5'/%3E%3C/svg%3E")}
.icon.external{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h6v6M12 4l-7.5 7.5'/%3E%3C/svg%3E")}

/* The composer: one line in, a round black button out. */
.composer{position:relative;border:1px solid var(--edge);border-radius:22px;background:linear-gradient(var(--bg),var(--softer));box-shadow:0 1px 2px #0000000a,inset 0 1px 0 #fff;transition:border-color .15s,box-shadow .15s}
.composer:focus-within{border-color:#bdbdbd;box-shadow:0 0 0 4px #0000000a}
.composer textarea,.composer input{display:block;width:100%;border:0;background:none;resize:none;padding:16px 18px 0;font-size:16px;line-height:1.45;outline:none}
.composer textarea{height:74px}
.composer input{padding-bottom:16px;padding-right:64px}
.composer ::placeholder{color:var(--faint)}
.composer .send{position:absolute;right:10px;bottom:10px}
.round{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--ink);color:#fff;transition:transform .1s,opacity .15s}
.round:hover{transform:scale(1.04)}
.round:disabled{opacity:.25;transform:none}
.round .icon{width:16px;height:16px}
.round.busy .icon{display:none}
.round.busy::after{content:'';width:14px;height:14px;border-radius:50%;border:2px solid #ffffff55;border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Pills and soft surfaces. */
.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-size:13px;white-space:nowrap}
.bubble{padding:10px 14px;border-radius:16px;background:var(--soft);color:var(--ink-2);font-size:14px}
.bubble.error{background:var(--danger-soft);color:var(--danger)}
.text-button{border:0;padding:0;background:none;color:var(--muted);font-size:13px}
.text-button:hover{color:var(--ink)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;border:1px solid var(--edge);border-radius:999px;background:var(--bg);font-size:14px;font-weight:500}
.button:hover{background:var(--softer)}
.button.primary{border-color:var(--ink);background:var(--ink);color:#fff}
.button.primary:hover{background:#262626}
.button:disabled{opacity:.4}

/* On/off. */
.switch{appearance:none;position:relative;display:block;flex:none;width:36px;height:22px;margin:0;border-radius:11px;background:#e2e2e2;cursor:pointer;transition:background .15s}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:transform .15s}
.switch:checked{background:var(--ink)}
.switch:checked::after{transform:translateX(14px)}
.switch:disabled{opacity:.4;cursor:default}

/* Segmented choice. */
.segments{display:flex;padding:3px;border-radius:999px;background:var(--soft)}
.segments button{flex:1;height:30px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--muted);font-size:13px}
.segments button[aria-pressed=true]{background:var(--bg);color:var(--ink);box-shadow:0 1px 2px #0000001a}
.segments button:disabled{opacity:.5}

/* Today's usage: a ring and its number, neutral, then amber, then red. */
.usage{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 10px;border:0;border-radius:999px;background:none;color:var(--muted);font:12px/1 var(--pixel);letter-spacing:.04em}
.usage:hover,.usage:focus-visible{background:var(--soft)}
.usage svg{width:18px;height:18px;transform:rotate(-90deg)}
.usage .track{stroke:#e5e5e5}
.usage .fill{stroke:var(--ink);transition:stroke-dasharray .3s}
.usage.warn{color:var(--warn)}.usage.warn .fill{stroke:var(--warn)}
.usage.full{color:var(--danger)}.usage.full .fill{stroke:var(--danger)}
.card{border:1px solid var(--edge);border-radius:16px;background:var(--bg);box-shadow:var(--shadow);overflow:hidden}
.card .rows{padding:14px 16px}
.card .row{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:14px;line-height:1.7}
.card .row b{font-weight:400;color:var(--ink)}
.card .row .sep{color:var(--faint);margin:0 6px}
.card .foot{display:flex;justify-content:space-between;padding:12px 16px;background:var(--softer);border-top:1px solid var(--line);font-size:14px;font-weight:500}
.meter{height:10px;margin:10px 0 12px;background:radial-gradient(circle,#d6d6d6 .6px,transparent .8px) 0 0/3px 3px}
.meter i{display:block;height:100%;background:var(--ink)}
.meter.warn i{background:var(--warn)}.meter.full i{background:var(--danger)}