/* Hemmingway. One face, one weight of line, and room to read. */
:root {
  /* Altworld: warm paper, brown-black ink, slate for anything you can press, a little gold */
  --acc:#46738c; --acc-rgb:70,115,140; --acc-ink:#3b6478; --acc-soft:rgba(70,115,140,.13); --gold:#d8ab69; --wash:.09;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --paper:#fdfcfa; --rail:#f8f6f2; --raise:#f3f0ea;
  --ink:#221d19; --body:#4a433c; --muted:#7a7169; --faint:#aca397;
  --line:#e9e4dc; --line-soft:#f1ede6;
  --warn:#b4453a; --good:#4a8a5c;
  --h0:#7a7169; --h1:#6f8f6e; --h2:#b07a5c; --h3:#b8973f; --h4:#7c6f9c; --h5:#46738c;
  --col:680px; --ring:rgba(34,29,25,.10); --shadow:0 10px 30px rgba(40,30,20,.09), 0 1px 3px rgba(40,30,20,.05);
  --font:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* motion: things arrive in --t-in and leave in --t-out; reduce motion sets both to zero */
  --t-in:180ms; --t-out:120ms; --ease-out:cubic-bezier(.2,.7,.2,1); --ease-in:cubic-bezier(.4,0,1,1);
}
html[data-theme="dark"] {
  --acc:#7fa6bd; --acc-rgb:127,166,189; --acc-ink:#9dbfd2; --acc-soft:rgba(127,166,189,.18); --gold:#e2bd85; --wash:.12;
  --paper:#171512; --rail:#13110f; --raise:#1f1c18;
  --ink:#f3efe8; --body:#d3cdc4; --muted:#8f877d; --faint:#5f5850;
  --line:#2a2622; --line-soft:#211e1a; --ring:rgba(243,239,232,.12);
  --shadow:0 12px 34px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; overflow:hidden; }
body { font-family:var(--font); font-size:14.5px; line-height:1.55; color:var(--body); background:var(--paper);
       display:flex; -webkit-font-smoothing:antialiased; user-select:none; -webkit-user-select:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; text-align:left; }
::selection { background:var(--acc-soft); }
input, textarea, select { font:inherit; color:var(--ink); }
a { color:var(--ink); }
kbd { font:inherit; font-size:11px; color:var(--faint); border:1px solid var(--line); border-radius:4px; padding:0 4px; line-height:16px; background:var(--paper); }
.spacer { flex:1; }
[hidden] { display:none !important; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:var(--line); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:var(--faint); background-clip:padding-box; }
:focus-visible { outline:2px solid var(--faint); outline-offset:2px; border-radius:6px; }
input:focus-visible, textarea:focus-visible { outline:0; }
.sel, .reply, .you span, .think .b, .step .b, .ask .b, .item .t, .item .s, .fail span { user-select:text; -webkit-user-select:text; }

.icon { width:28px; height:28px; border-radius:7px; display:grid; place-items:center; color:var(--muted); flex:none; }
.icon:hover { background:var(--line-soft); color:var(--ink); }
.icon svg, .ico { width:15px; height:15px; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ava { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none; font-size:11px; font-weight:600; letter-spacing:.02em;
       color:var(--hue, var(--h0)); background:color-mix(in srgb, var(--hue, var(--h0)) 16%, transparent); }
.ava.big { width:40px; height:40px; font-size:15px; }

/* ----------------------------------------------------------------- rail */
#rail { width:236px; flex:none; background:var(--rail); border-right:1px solid var(--line);
        display:flex; flex-direction:column; transition:width .15s ease, opacity .15s ease; }
#rail.collapsed { width:0; opacity:0; border-right:0; overflow:hidden; }
.rail-top { height:52px; flex:none; display:flex; align-items:center; gap:4px; padding:0 10px; -webkit-app-region:drag; }
.mac .rail-top { padding-left:76px; }
/* the Mac-only parts: the command that starts a model server on this machine (MLX); app.js leaves Messages out of
   Connected accounts elsewhere */
html:not(.mac) #s-cmd, html:not(.mac) #sheet label[for="s-cmd"] { display:none; }
.rail-top button { -webkit-app-region:no-drag; }
.nav { padding:0 8px 6px; display:flex; flex-direction:column; gap:1px; }
.nav-item { display:flex; align-items:center; gap:10px; height:32px; padding:0 8px; border-radius:8px; font-size:13.5px; color:var(--body);
            transition:background .12s, color .12s; }
.nav-item svg { width:16px; height:16px; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; color:var(--muted); transition:color .12s; flex:none; }
.nav-item:hover { background:var(--line-soft); color:var(--ink); }
.nav-item.on { background:var(--line); color:var(--ink); font-weight:500; }
.nav-item.on svg { color:var(--acc); }
.nav-item kbd { margin-left:auto; opacity:0; transition:opacity .12s; background:none; border-color:transparent; }
.nav-item:hover kbd { opacity:1; }

.find { position:relative; padding:4px 10px 6px; display:flex; align-items:center; }
.find svg { position:absolute; left:19px; top:13px; width:13px; height:13px; stroke:var(--faint); stroke-width:1.8; fill:none; stroke-linecap:round; pointer-events:none; }
.find input { width:100%; height:30px; border:0; border-radius:8px; background:var(--line-soft); padding:0 36px 0 28px;
              font-size:13px; outline:0; user-select:text; -webkit-user-select:text; transition:background .12s, box-shadow .12s; }
.find input::placeholder { color:var(--faint); }
.find input:focus { background:var(--paper); box-shadow:0 0 0 1px var(--line), 0 0 0 4px var(--acc-soft); }
.find kbd { position:absolute; right:18px; top:11px; pointer-events:none; background:none; border-color:transparent; }
.find input:focus ~ kbd, .find input:not(:placeholder-shown) ~ kbd { display:none; }

#tree { flex:1; overflow-y:auto; padding:2px 8px 8px; }
.sec { display:flex; align-items:center; height:26px; padding:0 8px; margin-top:12px;
       font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); }
.sec:first-child { margin-top:2px; }
.sec .add { opacity:0; margin-left:auto; width:20px; height:20px; border-radius:5px; display:grid; place-items:center; color:var(--faint); }
.sec:hover .add, .sec .add:focus-visible { opacity:1; }
.sec .add:hover { background:var(--line); color:var(--ink); }
.sec .add svg { width:12px; height:12px; }

.row { display:flex; align-items:center; gap:8px; height:31px; padding:0 4px 0 8px; border-radius:7px; cursor:pointer; color:var(--body); transition:background .12s; }
.row:hover, .row:focus-visible { background:var(--line-soft); outline:0; }
.row.on { background:var(--line); color:var(--ink); }
.row .t { flex:1; min-width:0; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row.on .t { font-weight:500; }
.row.ws .t { font-weight:500; color:var(--ink); }
.row.person { padding-left:6px; }
.row.person.nested { padding-left:16px; }
.row .ava.mini { width:18px; height:18px; font-size:8px; }
.row[draggable="true"], .card[draggable="true"] { cursor:grab; }
.dragging { opacity:.45; }
.drop { box-shadow:inset 0 0 0 2px var(--acc); background:var(--acc-soft) !important; border-radius:8px; }
h2.drop { padding:4px 6px; margin-left:-6px; }
.row .dot { width:7px; height:7px; border-radius:50%; flex:none; }
.row .live { width:6px; height:6px; border-radius:50%; flex:none; background:var(--acc); animation:pulse 1.2s ease-in-out infinite; }
.row .live.need { background:var(--gold); animation:none; box-shadow:0 0 0 3px rgba(216,171,105,.25); }
.row .more { opacity:0; width:22px; height:22px; border-radius:5px; display:grid; place-items:center; color:var(--faint); flex:none; }
.row:hover .more, .row .more:focus-visible, .row .more.open { opacity:1; }
.row .more:hover { background:var(--line); color:var(--ink); }
.row .more svg { width:13px; height:13px; }
.row.link .t { color:var(--muted); font-size:12.5px; }
.quiet { font-size:12.5px; color:var(--faint); padding:8px 8px 4px; line-height:1.5; }

.rail-foot { flex:none; display:flex; flex-direction:column; gap:4px; padding:6px 8px 10px; }
/* "Restart to update": there only once an update has downloaded, just above the account */
.update { align-self:flex-start; margin-left:4px; font-size:13px; font-weight:500; color:var(--acc); padding:5px 8px; border-radius:8px; animation:fade var(--t-in) var(--ease-out); transition:background .12s; }
.update:hover { background:var(--acc-soft); }
.update:disabled { opacity:.6; cursor:default; }
/* the account: its picture or the name's first letter, the name, the plan; it opens the account menu upwards */
.profile { display:flex; align-items:center; gap:10px; width:100%; padding:6px 8px; border-radius:9px; transition:background .12s; }
.profile:hover { background:var(--line-soft); }
.profile.open { background:var(--line); }
.profile .pic { width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; overflow:hidden;
                font-size:13px; font-weight:600; color:var(--acc-ink); background:var(--acc-soft); }
.profile .pic img { width:100%; height:100%; object-fit:cover; display:block; }
.profile .pic.none { background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); }
.profile .b { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.profile .n { font-size:13.5px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile .p { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile .p:empty { display:none; }
/* Upgrade, for a Free account: just above the account, its gold star turning under the pointer */
.upcta { display:flex; align-items:center; gap:8px; width:100%; height:34px; padding:0 12px; border-radius:9px; font-size:13px; font-weight:500;
         color:var(--acc-ink); background:var(--acc-soft); transition:transform .18s var(--ease-out); animation:fadeUp var(--t-in) var(--ease-out); }
.upcta:hover { transform:translateY(-1px); }
.upcta:active { transform:scale(.98); }
.upcta .star { width:12px; height:12px; flex:none; fill:var(--gold); transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.upcta:hover .star { transform:rotate(90deg) scale(1.15); }

/* ----------------------------------------------------------------- main */
#main { flex:1; min-width:0; display:flex; flex-direction:column; position:relative; }
#main > * { position:relative; z-index:1; }
#wash { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:0; transition:opacity .6s ease; }
#main.empty #wash { opacity:1; }
#wash i { position:absolute; border-radius:50%; background:var(--acc); opacity:var(--wash); filter:blur(90px); }
#wash i:first-child { background:var(--gold); }
#wash i:first-child { width:46vw; height:46vw; left:-8vw; top:-14vw; }
#wash i:last-child { width:40vw; height:40vw; right:-12vw; bottom:-12vw; }
#bar { height:52px; flex:none; display:flex; align-items:center; gap:6px; padding:0 14px 0 16px; -webkit-app-region:drag; }
.mac #bar.padded { padding-left:76px; }
#bar button, #bar input, #bar #title, #bar #crumbs { -webkit-app-region:no-drag; }
#crumbs { display:flex; align-items:center; gap:4px; font-size:13px; color:var(--muted); white-space:nowrap; }
#crumbs button { color:var(--muted); padding:3px 5px; border-radius:5px; }
#crumbs button:hover { color:var(--ink); background:var(--line-soft); }
#crumbs .sep { color:var(--faint); }
#title { font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:3px 5px; border-radius:5px; cursor:text; max-width:46vw; }
#title:hover { background:var(--line-soft); }
#title:empty { display:none; }
#titleedit { font-size:13px; height:26px; min-width:260px; border:1px solid var(--line); border-radius:6px; padding:0 7px; background:var(--paper); outline:0; user-select:text; -webkit-user-select:text; }
#titleedit:focus { border-color:var(--faint); box-shadow:0 0 0 3px var(--ring); }

#view { flex:1; overflow-y:auto; overscroll-behavior:contain; }
#view.hero-view { display:flex; flex-direction:column; }
#view.hero-view #pad { flex:1; width:100%; display:flex; }
#pad { max-width:var(--col); margin:0 auto; padding:20px 24px 12px; }
#jump { position:absolute; left:50%; bottom:104px; transform:translateX(-50%); width:30px; height:30px; border-radius:50%;
        background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow); display:grid; place-items:center; color:var(--muted); }
#jump:hover { color:var(--ink); }
#jump svg { width:14px; height:14px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* an empty chat: the name, and room */
#main.empty #jump { display:none; }
.hero { flex:1; width:100%; min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-bottom:8vh; }
.mark { font-family:var(--serif); font-size:clamp(56px, 7.5vw, 88px); line-height:1; color:var(--ink); letter-spacing:-.015em;
        display:flex; align-items:baseline; gap:.18em; }
.mark.home { flex-direction:column; align-items:center; gap:.1em; }
.mark .dragon { width:1.55em; height:1.55em; overflow:visible; -webkit-user-drag:none; user-select:none; }
/* a new chat: the name comes in as the dragon lands (dragon.js), so its head never swims over the letters */
.hero.landing .mark span, .hero.landing .tag { animation:fadeUp .4s var(--ease-out) var(--land) backwards; }
.mark.person { font-size:clamp(44px, 6vw, 72px); }
.tag { margin-top:14px; font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); }
.tag.plain { font-size:15px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--muted); }
@keyframes fadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes popIn { from { opacity:0; transform:scale(.98) translateY(-3px); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes fadeOut { to { opacity:0; } }

/* pages: person, workspace, chats, memory, activity, forms */
.page { padding-top:8px; animation:fadeUp .22s ease-out; }
#pad.wide { max-width:1080px; }
.orbit-head { display:flex; align-items:center; gap:10px; }
.orbit-head .btn { height:30px; padding:0 11px; font-size:12.5px; }
.orbit-head .btn svg { width:13px; height:13px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.orbit { position:relative; height:calc(100vh - 190px); min-height:440px; margin-top:6px; overflow:hidden; }
.orbit svg { position:absolute; inset:0; width:100%; height:100%; }
.orbit .ring { fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:2 6; opacity:.7; }
.orbit .blob { opacity:.26; mix-blend-mode:multiply; transition:opacity .15s; }
html[data-theme="dark"] .orbit .blob { opacity:.42; mix-blend-mode:screen; }
.orbit .blob.drop { opacity:.5; box-shadow:none; background:none !important; }
.orbit .blob .bridge { transition:r .22s cubic-bezier(.2,.7,.2,1); }
.orbit .node { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:4px; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
               transition:transform .16s ease; animation:nodeIn .5s ease-out; }
/* a node fades in around its own centre; no fill mode, so the resting transform (and hover, drop, held) is the rule's, not the last frame's */
@keyframes nodeIn { from { opacity:0; transform:translate(-50%, calc(-50% + 6px)); } to { opacity:1; transform:translate(-50%,-50%); } }
.orbit .node.glide { transition:left .9s cubic-bezier(.2,.7,.2,1), top .9s cubic-bezier(.2,.7,.2,1), transform .16s ease; }
.orbit .node.home { transition:left 1.4s cubic-bezier(.3,.6,.2,1), top 1.4s cubic-bezier(.3,.6,.2,1), transform .16s ease; }
.orbit .node.held { transition:none; z-index:3; cursor:grabbing; }
.orbit .node.away { opacity:.35; }
.ghost { position:fixed; z-index:50; transform:translate(-50%,-50%) scale(1.05); pointer-events:none; }
.ghost .ring { border-radius:50%; padding:2px; display:block; box-shadow:0 8px 24px rgba(0,0,0,.16); }
.orbit .node.held .ring { box-shadow:0 8px 24px rgba(0,0,0,.14); }
.orbit .node:hover { transform:translate(-50%,-50%) scale(1.07); z-index:2; }
.orbit .blob.in { animation:fade .5s ease-out; }
.orbit .node.me { cursor:default; } .orbit .node.me:hover { transform:translate(-50%,-50%); }
.orbit .node .ring { border-radius:50%; padding:2px; display:block; }
.orbit .node .ava { font-weight:600; letter-spacing:.02em; }
/* the name hangs below the disc without counting toward the node's box, so the disc itself sits on the point */
.orbit .node .lbl { position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:4px; font-size:11.5px; color:var(--muted); white-space:nowrap; max-width:96px; overflow:hidden; text-overflow:ellipsis; }
.orbit .node.drop { transform:translate(-50%,-50%) scale(1.1); box-shadow:none; background:none !important; }
.orbit .ws { position:absolute; transform:translate(-50%,-50%); padding:2px 4px; border-radius:4px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; transition:color .12s, background .12s; }
.orbit .ws:hover { color:var(--ink) !important; }
.orbit .ws.drop { background:var(--acc-soft) !important; color:var(--ink) !important; box-shadow:none; }
h1 { font-family:var(--serif); font-size:32px; font-weight:400; letter-spacing:-.01em; color:var(--ink); line-height:1.15; display:flex; align-items:center; gap:12px; }
.meta { font-size:13px; color:var(--muted); margin-top:6px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.meta .dot { width:7px; height:7px; border-radius:50%; }
.meta .edit { color:var(--faint); font-size:12px; padding:1px 5px; border-radius:4px; }
.meta .edit:hover { color:var(--ink); background:var(--line-soft); }
h2 { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin:28px 0 8px; }
h2:first-of-type { margin-top:22px; }
.list { display:flex; flex-direction:column; }
.item { display:flex; align-items:center; gap:10px; padding:9px 8px; margin:0 -8px; border-radius:8px; cursor:pointer; transition:background .12s; }
.item:hover, .item:focus-visible { background:var(--line-soft); outline:0; }
.item .b { flex:1; min-width:0; }
.item .t { font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item .s { font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.item .w { font-size:12px; color:var(--faint); flex:none; }
.item .ava { width:24px; height:24px; font-size:10px; }
.item .x, .item .more { opacity:0; width:22px; height:22px; border-radius:5px; display:grid; place-items:center; color:var(--faint); flex:none; }
.item:hover .x, .item:hover .more, .item .more.open, .item .x:focus-visible, .item .more:focus-visible { opacity:1; }
.item .x:hover { color:var(--warn); background:var(--line); }
.item .more:hover { color:var(--ink); background:var(--line); }
.item .x svg { width:11px; height:11px; } .item .more svg { width:13px; height:13px; }
.item.static { cursor:default; }
.item.static:hover { background:none; }
.item.gone .t, .item.gone .s { color:var(--faint); text-decoration:line-through; }
.item.bad .t { color:var(--warn); }
.item .undo { font-size:12px; color:var(--muted); padding:2px 6px; border-radius:5px; }
.item .undo:hover { color:var(--ink); background:var(--line); }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:8px; }
.card { padding:12px 13px; border:1px solid var(--line); border-radius:10px; cursor:pointer; display:flex; align-items:center; gap:10px; transition:border-color .12s, transform .12s, box-shadow .12s; }
.card:hover, .card:focus-visible { border-color:var(--faint); outline:0; transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.05); }
.card .b { min-width:0; }
.card .t { font-size:14px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .s { font-size:12.5px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card.ghost { border-style:dashed; color:var(--faint); justify-content:center; font-size:13px; min-height:52px; }
.card.ghost:hover { color:var(--ink); }
.none { font-size:13px; color:var(--faint); padding:6px 0; }
.tools-row { display:flex; gap:6px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.tools-row .btn { height:30px; padding:0 11px; font-size:12.5px; }
.tools-row .btn svg { width:13px; height:13px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.filter { position:relative; flex:1; min-width:160px; max-width:260px; }
.filter svg { position:absolute; left:9px; top:9px; width:12px; height:12px; stroke:var(--faint); stroke-width:1.8; fill:none; stroke-linecap:round; pointer-events:none; }
.filter input { width:100%; height:30px; border:1px solid var(--line); border-radius:8px; background:var(--paper); padding:0 10px 0 26px; font-size:13px; outline:0; user-select:text; -webkit-user-select:text; }
.filter input:focus { border-color:var(--faint); box-shadow:0 0 0 4px var(--acc-soft); }
.filter input::placeholder { color:var(--faint); }
.mail { display:flex; flex-direction:column; gap:2px; }
.mail .m { padding:9px 8px; margin:0 -8px; border-radius:8px; }
.mail .m:hover { background:var(--line-soft); }
.mail .m .t { font-size:14px; color:var(--ink); display:flex; gap:8px; align-items:baseline; }
.mail .m .t span:first-child { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mail .m .t .w { font-size:12px; color:var(--faint); flex:none; }
.mail .m .s { font-size:12.5px; color:var(--muted); margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.45; user-select:text; -webkit-user-select:text; }
.mail .m .s b { font-weight:500; color:var(--body); }
.item .t.ed { cursor:text; border-radius:5px; padding:1px 4px; margin-left:-4px; }
.item .t.ed:hover { background:var(--line-soft); }
.item input.ed { width:100%; height:28px; border:1px solid var(--faint); border-radius:6px; padding:0 8px; font-size:14px; background:var(--paper); outline:0; box-shadow:0 0 0 4px var(--acc-soft); user-select:text; -webkit-user-select:text; }
.item .s a, .item .s button.lnk { color:var(--muted); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:2px; }
.item .s button.lnk:hover { color:var(--ink); }
.meta .cp { cursor:pointer; border-radius:4px; padding:0 3px; margin:0 -3px; }
.meta .cp:hover { background:var(--line-soft); color:var(--ink); }
.reads { margin-top:6px; padding:10px 12px; border-left:2px solid var(--line); font-size:12.5px; line-height:1.6; color:var(--muted); white-space:pre-wrap; user-select:text; -webkit-user-select:text; }
.hint { font-size:12.5px; color:var(--faint); margin-top:6px; }
/* memory: every line says who it is about; the chip moves it */
.item.fact .who { font-size:11.5px; color:var(--muted); padding:2px 8px; border-radius:99px; border:1px solid var(--line); background:var(--paper); flex:none; white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis; }
.item.fact .who:hover { color:var(--ink); border-color:var(--faint); }
.item.fact { cursor:grab; }
.item.fact.dragging { opacity:.5; }
.say.mem { margin-top:14px; align-items:center; }
.say.mem .who { height:38px; font-size:12.5px; padding:0 12px; border-radius:99px; border:1px solid var(--line); color:var(--muted); flex:none; }
.say.mem .who:hover { color:var(--ink); border-color:var(--faint); }
.inline { display:flex; gap:6px; margin-top:6px; }
.inline input { flex:1; height:32px; border:1px solid var(--line); border-radius:8px; background:var(--paper); padding:0 10px; font-size:13px; outline:0; user-select:text; -webkit-user-select:text; }
.inline input:focus { border-color:var(--faint); box-shadow:0 0 0 4px var(--acc-soft); }
.inline input::placeholder { color:var(--faint); }

.form { max-width:440px; }
.form label { display:block; font-size:12px; color:var(--muted); margin:14px 0 5px; }
.form input, .form select, .form textarea { width:100%; height:34px; border:1px solid var(--line); border-radius:8px; background:var(--paper);
  padding:0 10px; font-size:14px; outline:0; user-select:text; -webkit-user-select:text; }
.form textarea { height:auto; min-height:70px; padding:8px 10px; resize:vertical; line-height:1.5; }
.form input:focus, .form select:focus, .form textarea:focus { border-color:var(--faint); box-shadow:0 0 0 4px var(--acc-soft); }
.form .row { margin-top:22px; }
.form .err { font-size:12.5px; color:var(--warn); margin-top:8px; }
.row { display:flex; gap:8px; align-items:center; }
.row.wrap { flex-wrap:wrap; row-gap:8px; height:auto; }   /* the sidebar's .row is 31px high; a wrapping row grows with its lines */
.row.end { justify-content:flex-end; }
.btn { height:32px; padding:0 14px; border:1px solid var(--line); border-radius:8px; font-size:13px; font-weight:500; color:var(--body); background:var(--paper); display:inline-flex; align-items:center; gap:6px; }
.btn:hover { background:var(--line-soft); }
.btn { transition:background .12s, opacity .12s, transform .1s; } .btn:active { transform:scale(.98); }
.btn.primary { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn.primary:hover { opacity:.88; }
.btn.primary:disabled { opacity:.35; cursor:default; }
.btn.danger { color:var(--warn); }
.btn.danger:hover { background:var(--line-soft); }
.mini { font-size:12px; color:var(--muted); padding:2px 8px; border-radius:6px; border:1px solid var(--line); height:26px; flex:none; }
.mini:hover { color:var(--ink); background:var(--line-soft); }

/* ----------------------------------------------------------------- chat */
.day { text-align:center; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin:8px 0 22px; }
.turn { margin-bottom:30px; }
.turn.in { animation:fadeUp var(--t-in) var(--ease-out); }
.you { display:flex; justify-content:flex-end; align-items:flex-end; gap:6px; margin-bottom:16px; }
.you .tools { display:flex; align-items:center; gap:2px; opacity:0; transition:opacity .1s; padding-bottom:6px; }
.you:hover .tools, .you .tools:focus-within { opacity:1; }
.you .when { font-size:11.5px; color:var(--faint); padding:0 6px; }
.you .pen { width:24px; height:24px; border-radius:6px; display:grid; place-items:center; color:var(--faint); }
.you .pen:hover { color:var(--ink); background:var(--line-soft); }
.you .pen svg { width:13px; height:13px; }
.you span.msg { background:var(--raise); color:var(--ink); padding:8px 13px; border-radius:14px 14px 4px 14px; max-width:78%;
            font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.you.editing { display:block; }
.you .edit { border:1px solid var(--faint); border-radius:13px; padding:8px 8px 8px 13px; background:var(--paper); box-shadow:0 0 0 3px var(--ring); }
.you .edit textarea { width:100%; border:0; outline:0; resize:none; background:none; font-size:14px; line-height:1.5; color:var(--ink); max-height:240px; user-select:text; -webkit-user-select:text; }
.you .edit .row { justify-content:flex-end; margin-top:6px; }
.reply { font-size:15px; line-height:1.65; color:var(--ink); overflow-wrap:anywhere; }
.reply p { margin:0 0 12px; } .reply > :last-child { margin-bottom:0; }
.reply h1, .reply h2, .reply h3 { display:block; font-family:var(--font); text-transform:none; letter-spacing:0; margin:18px 0 6px; color:var(--ink); }
.reply h1 { font-size:18px; font-weight:600; } .reply h2 { font-size:16px; font-weight:600; } .reply h3 { font-size:15px; font-weight:600; }
.reply ul, .reply ol { margin:0 0 12px; padding-left:20px; } .reply li { margin:2px 0; }
.reply code { font-family:var(--mono); font-size:12.5px; background:var(--raise); padding:1px 5px; border-radius:4px; }
.reply pre { position:relative; background:var(--raise); border-radius:9px; padding:11px 13px; overflow-x:auto; margin:0 0 12px; }
.reply pre code { background:none; padding:0; font-size:12.5px; line-height:1.5; }
.reply pre .cp { position:absolute; top:6px; right:6px; font-size:11px; color:var(--faint); padding:3px 7px; border-radius:5px; background:var(--raise); opacity:0; }
.reply pre:hover .cp { opacity:1; } .reply pre .cp:hover { color:var(--ink); background:var(--line); }
.reply table { border-collapse:collapse; margin:0 0 12px; font-size:13.5px; display:block; overflow-x:auto; max-width:100%; }
.reply th, .reply td { border:1px solid var(--line); padding:5px 9px; text-align:left; }
.reply blockquote { border-left:2px solid var(--line); padding-left:11px; color:var(--muted); margin:0 0 12px; }
.reply hr { border:0; border-top:1px solid var(--line); margin:14px 0; }
.reply a { color:var(--acc-ink); text-decoration:underline; text-decoration-color:var(--acc-soft); text-underline-offset:2px; transition:text-decoration-color .12s; }
.reply a:hover { text-decoration-color:var(--acc-ink); }
.reply img { max-width:100%; border-radius:8px; }
.caret { display:inline-block; width:2px; height:16px; background:var(--acc); vertical-align:-3px; margin-left:1px; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.wait { display:inline-flex; gap:4px; height:22px; align-items:center; }
.wait i { width:5px; height:5px; border-radius:50%; background:var(--faint); animation:pulse 1.2s ease-in-out infinite; }
.wait i:nth-child(2) { animation-delay:.15s; } .wait i:nth-child(3) { animation-delay:.3s; }
@keyframes pulse { 0%, 80%, 100% { opacity:.3; transform:scale(.9); } 40% { opacity:1; transform:scale(1); } }

.think { margin:0 0 12px; }
.think .h { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); padding:3px 6px; margin-left:-6px; border-radius:5px; }
.think .h:hover { color:var(--ink); background:var(--line-soft); }
.think .h svg { width:11px; height:11px; transition:transform .12s; }
.think.open .h svg { transform:rotate(90deg); }
.think .w { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-in) var(--ease-out); }
.think.open .w { grid-template-rows:1fr; }
.think .b { min-height:0; overflow:hidden; }
.think .t { margin-top:6px; padding:10px 12px; border-left:2px solid var(--line); font-size:12.5px; line-height:1.6;
            color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; max-height:220px; overflow-y:auto; user-select:text; -webkit-user-select:text; }

.steps { margin:0 0 12px; display:flex; flex-direction:column; }
.step .h { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); padding:4px 6px; margin-left:-6px; border-radius:5px; cursor:pointer; }
.step .h:hover { color:var(--ink); background:var(--line-soft); }
.step .h .ico { width:13px; height:13px; }
.step .h .d { color:var(--faint); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:50%; }
.step.bad .h { color:var(--warn); }
.step .w { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-in) var(--ease-out); }
.step.open .w { grid-template-rows:1fr; }
.step .b { min-height:0; overflow:hidden; }
.step .t { margin:2px 0 6px 13px; padding:8px 11px; border-left:2px solid var(--line); font-family:var(--mono);
           font-size:11.5px; color:var(--muted); white-space:pre-wrap; word-break:break-word; max-height:220px; overflow:auto; user-select:text; -webkit-user-select:text; }
.step .t .k { display:block; color:var(--faint); margin-top:6px; } .step .t .k:first-child { margin-top:0; }

.fail { animation:fadeUp .2s ease-out; display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--muted); padding:10px 12px; border:1px solid var(--line); border-radius:10px; }
.fail .ico { width:14px; height:14px; color:var(--warn); flex:none; margin-top:2px; }
.fail.quiet { border-style:dashed; } .fail.quiet .ico { color:var(--faint); }
.fail span { flex:1; }
.fail button { font-size:12.5px; color:var(--ink); padding:2px 8px; border-radius:5px; border:1px solid var(--line); flex:none; }
.fail button:hover { background:var(--line-soft); }

.acts { display:flex; align-items:center; gap:2px; margin-top:8px; opacity:0; transition:opacity .1s; }
.turn:hover .acts, .acts:focus-within { opacity:1; }
.turn:last-child .acts { opacity:1; }
.act { font-size:12px; color:var(--faint); padding:3px 7px; border-radius:5px; display:inline-flex; align-items:center; gap:5px; }
.act:hover { color:var(--ink); background:var(--line-soft); }
.act svg { width:12px; height:12px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.tag { font-size:11.5px; color:var(--faint); padding:3px 7px; }

.ask { border:1px solid var(--line); border-radius:11px; margin:0 0 12px; overflow:hidden; box-shadow:var(--shadow); animation:popIn .2s ease-out; }
.ask.done { box-shadow:none; }
.ask.done .h { background:none; }
.ask .h { padding:9px 13px; font-size:12.5px; color:var(--muted); background:var(--raise); border-bottom:1px solid var(--line); display:flex; gap:8px; align-items:center; }
.ask .h b { color:var(--ink); font-weight:500; }
.ask .h .ico { width:13px; height:13px; flex:none; }
.ask .b { padding:12px 13px; font-size:14px; color:var(--ink); white-space:pre-wrap; line-height:1.55; }
.ask .b.mono { font-family:var(--mono); font-size:12px; color:var(--muted); }
.ask textarea { display:block; width:100%; border:0; outline:0; resize:none; background:none; padding:12px 13px; font-size:14px; line-height:1.55; color:var(--ink); min-height:80px; max-height:360px; user-select:text; -webkit-user-select:text; }
.ask .f { display:flex; gap:6px; padding:0 13px 12px; align-items:center; }
.ask .f .note { font-size:12px; color:var(--faint); margin-left:auto; }

/* two answers, pick one: the pair a little wider than the column where there is room (app.js sets --ab-room and
   data-ab), side by side or stacked; the vote under them once both are written. The pick keeps one card, the other
   folds away, by transform and opacity */
.ab { --ab-w:max(100%, min(1040px, var(--ab-room, 100%))); width:var(--ab-w); margin-left:calc((100% - var(--ab-w)) / 2); }
#pad[data-ab="stack"] .ab { --ab-w:100%; }
.ab-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; align-items:stretch; }
#pad[data-ab="stack"] .ab-grid { grid-template-columns:minmax(0, 1fr); }
.ab-card { display:flex; flex-direction:column; gap:10px; min-width:0; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--paper);
           transition:opacity var(--t-in) var(--ease-out), transform var(--t-in) var(--ease-out); }
.ab-label { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); }
.ab-card .reply { flex:1; }
.ab-pick { align-self:flex-start; }
.ab-foot { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 12px; margin-top:12px; font-size:13px; color:var(--muted); }
.ab-pick, .ab-foot { transition:opacity var(--t-in) var(--ease-out), transform var(--t-in) var(--ease-out), background .12s; }
.ab:not(.ready) .ab-pick, .ab:not(.ready) .ab-foot { opacity:0; }
.ab.in .ab-pick, .ab.in .ab-foot { animation:fadeUp var(--t-in) var(--ease-out) var(--ab-ago, 0ms) backwards; }
.ab-card .btn:disabled, .ab-foot .btn:disabled { cursor:default; }
.ab.picking .ab-pick, .ab.picking .ab-foot, .ab.picking .ab-label { opacity:0; }
.ab.picking[data-keep="left"] .ab-card[data-side="right"], .ab.picking[data-keep="right"] .ab-card[data-side="left"] { opacity:0; transform:scale(.97) translateY(4px); }

.blank { height:100%; }

/* ------------------------------------------------------------- composer */
#composer { flex:none; padding:8px 24px 18px; }
#composer .wrap { max-width:var(--col); margin:0 auto; position:relative; }
#notice { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted); padding:8px 12px; margin-bottom:8px; border:1px solid var(--line); border-radius:10px; }
#notice::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--warn); flex:none; }
#notice span { flex:1; }
#notice button { font-size:12.5px; color:var(--ink); font-weight:500; padding:3px 9px; border-radius:6px; border:1px solid var(--line); }
#notice button:hover { background:var(--line-soft); }
#notice button:empty { display:none; }
/* from 80% of the 5-hour allowance, a plain line above the composer: how much, and when it refills */
#allowance { font-size:12.5px; color:var(--muted); padding:0 12px 8px; }
#allowance.out { color:var(--ink); }
#phase { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); padding:0 4px 8px; }
#with { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:0 2px 8px; }
.chip { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 9px 0 4px; border-radius:99px; border:1px solid var(--line); background:var(--paper); font-size:12.5px; color:var(--body); cursor:pointer; transition:border-color .12s, background .12s; }
.chip:hover { border-color:var(--faint); }
.chip .ava { width:18px; height:18px; font-size:8px; }
.chip .dot { width:8px; height:8px; border-radius:50%; margin-left:4px; }
.chip .x { width:16px; height:16px; border-radius:50%; display:grid; place-items:center; color:var(--faint); margin:0 -4px 0 0; opacity:0; transition:opacity .12s; }
.chip:hover .x { opacity:1; } .chip .x:hover { color:var(--ink); background:var(--line); }
.chip .x svg { width:10px; height:10px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; }
.chip.add { border-style:dashed; color:var(--muted); padding:0 9px; }
.chip.add:hover { color:var(--ink); }
.chip.add svg { width:13px; height:13px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
#mention { position:absolute; left:0; bottom:100%; margin-bottom:6px; z-index:15; min-width:220px; }
#mention .mi.on { background:var(--line-soft); color:var(--ink); }
#mention .mi .ava { width:20px; height:20px; font-size:9px; }
#mention .mi .dot { width:8px; height:8px; border-radius:50%; margin:0 6px; }
#mention .mi .s { color:var(--faint); font-size:12px; margin-left:auto; padding-left:12px; }
.menu .mi .chk { width:14px; height:14px; margin-left:auto; padding-left:10px; color:var(--acc); flex:none; }
.menu .mi .chk svg { width:14px; height:14px; }
.meta .ws { display:inline-flex; align-items:center; gap:5px; }
#phase { animation:fadeUp var(--t-in) var(--ease-out); }
/* while Hemmingway thinks, the dragon's star glows: the one mark that repeats */
#phase .star { width:11px; height:11px; fill:var(--gold); flex:none; animation:glow 1.6s ease-in-out infinite; }
@keyframes glow { 50% { opacity:.45; transform:scale(.86); } }
#box { display:flex; align-items:flex-end; gap:6px; border:1px solid var(--line); border-radius:14px; padding:8px 8px 8px 14px; background:var(--paper);
       transition:border-color .12s, box-shadow .12s; }
#box:focus-within { border-color:var(--faint); box-shadow:0 0 0 4px var(--acc-soft); }
#input { flex:1; border:0; outline:0; resize:none; background:none; font-size:14.5px; line-height:1.5; max-height:200px; padding:5px 0; user-select:text; -webkit-user-select:text; }
#input::placeholder { color:var(--faint); }
#send { width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center; background:var(--acc); color:#fff; opacity:.22; pointer-events:none;
        transition:opacity .15s, background .2s, transform .15s; }
#send.live { opacity:1; pointer-events:auto; }
#send:hover { opacity:.88; transform:scale(1.04); } #send:active { transform:scale(.96); }
#main.busy #send { background:var(--ink); }
#send svg { width:14px; height:14px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
#send .sq { display:none; }
#think { height:30px; padding:0 5px 0 9px; border-radius:9px; flex:none; display:inline-flex; align-items:center; gap:2px; font-size:12.5px; color:var(--muted); white-space:nowrap; }
#think:hover, #think.open { background:var(--line-soft); color:var(--ink); }
#think svg { width:13px; height:13px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
#main.busy #send .up { display:none; } #main.busy #send .sq { display:block; }
#main.busy #send .sq rect { fill:currentColor; stroke:none; }
#hint { font-size:11.5px; color:var(--faint); text-align:center; padding-top:8px; min-height:14px; }
#hint:empty { display:none; }

/* --------------------------------------------------------- menus, toasts */
.menu { animation:popIn var(--t-in) var(--ease-out); transform-origin:top left; position:fixed; z-index:30; min-width:168px; padding:4px; background:var(--paper); border:1px solid var(--line); border-radius:9px; box-shadow:var(--shadow); }
.menu .mi { display:flex; align-items:center; gap:8px; width:100%; padding:6px 10px; border-radius:6px; font-size:13px; color:var(--body); white-space:nowrap; }
.menu .mi:hover, .menu .mi:focus-visible { background:var(--line-soft); color:var(--ink); outline:0; }
.menu .mi.danger { color:var(--warn); } .menu .mi.danger:hover { color:var(--warn); }
.menu .mi.armed, .menu .mi.armed:hover { background:var(--warn); color:#fff; }
.menu .mi .k { margin-left:auto; color:var(--faint); font-size:11.5px; padding-left:12px; }
.menu .mi svg { width:13px; height:13px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.menu .mi.back { color:var(--muted); font-size:12.5px; }
.menu .sep { height:1px; background:var(--line-soft); margin:4px 6px; }
.menu .head { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); padding:6px 10px 3px; }
/* the account menu: the address, then which model answers and where, above the Settings sections */
.menu .who { font-size:12px; color:var(--muted); padding:6px 10px 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.menu .state { display:flex; align-items:center; gap:8px; min-width:0; font-size:12px; color:var(--muted); padding:4px 10px 5px; white-space:nowrap; }
.menu .state span { overflow:hidden; text-overflow:ellipsis; }
.menu .state i { width:6px; height:6px; border-radius:50%; flex:none; background:var(--good); box-shadow:0 0 0 3px rgba(74,138,92,.15); }
.menu .state.off i { background:var(--warn); box-shadow:0 0 0 3px rgba(180,69,58,.15); }
.menu .state.wait i { background:var(--faint); box-shadow:none; }
#toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:40; background:var(--ink); color:var(--paper); font-size:12.5px; padding:7px 13px; border-radius:99px; box-shadow:var(--shadow); animation:rise var(--t-in) var(--ease-out); max-width:70vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@keyframes rise { from { opacity:0; transform:translate(-50%, 6px); } to { opacity:1; transform:translate(-50%, 0); } }

/* ------------------------------------------------------------- settings */
.modal { position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.16); display:flex; align-items:center; justify-content:center; animation:fade var(--t-in) var(--ease-out); backdrop-filter:blur(2px); }
.modal .card { animation:rise8 var(--t-in) var(--ease-out); transform:none; box-shadow:var(--shadow) !important; width:460px; max-width:calc(100vw - 40px); max-height:calc(100vh - 60px); overflow-y:auto; background:var(--paper);
               border:1px solid var(--line); border-radius:14px; padding:16px 22px 18px; box-shadow:var(--shadow); cursor:default; display:block; }
.modal .card:hover { border-color:var(--line); }
.modal h2 { font-size:15px; font-weight:600; color:var(--ink); text-transform:none; letter-spacing:0; margin:0; }
.modal label { display:block; font-size:12px; color:var(--muted); margin:10px 0 4px; }
.modal label .opt { color:var(--faint); margin-left:4px; }
.modal input, .modal select, .modal textarea { width:100%; height:32px; border:1px solid var(--line); border-radius:8px; background:var(--paper); padding:0 10px; font-size:13.5px; outline:0; user-select:text; -webkit-user-select:text; }
.modal textarea { height:auto; min-height:64px; padding:8px 10px; resize:vertical; line-height:1.5; }
.modal input:focus, .modal select:focus, .modal textarea:focus { border-color:var(--faint); box-shadow:0 0 0 4px var(--acc-soft); }
.modal .row { margin-top:12px; } .modal .row.end { margin-top:18px; }
.modal .err { font-size:12.5px; color:var(--warn); margin-top:8px; min-height:16px; }
.modal .two { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; }
.swatches { display:flex; gap:8px; padding:4px 0; }
.swatches button { width:22px; height:22px; border-radius:50%; border:2px solid transparent; transition:transform .12s; }
.swatches button:hover { transform:scale(1.1); }
.swatches button.on { border-color:var(--ink); }
.picks { max-height:44vh; overflow-y:auto; margin:8px -8px 0; }
.modal label.pick, .pick { display:flex; align-items:center; gap:10px; padding:7px 8px; margin:0; border-radius:8px; cursor:pointer; font-size:inherit; color:inherit; }
.pick:hover { background:var(--line-soft); }
.pick input[type=checkbox] { width:15px; height:15px; margin:0; accent-color:var(--acc); flex:none; }
.pick .b { flex:1; min-width:0; } .pick .t { font-size:13.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pick .s { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pick .w { font-size:12px; color:var(--faint); flex:none; }
.pick.all { border-bottom:1px solid var(--line-soft); border-radius:8px 8px 0 0; margin:6px -8px 2px; }
.pick.all .t { font-weight:500; }
.modal .filter { max-width:none; margin-top:10px; }
.sheet-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
#sheet h2 { font-size:15px; font-weight:600; color:var(--ink); text-transform:none; letter-spacing:0; margin:0; }
/* Settings: the sections down the left, as the sidebar lists the app's; one section at a time on the right, Save under it */
#sheet .card { position:relative; width:780px; height:min(620px, calc(100vh - 60px)); padding:0; display:flex; align-items:stretch; gap:0; overflow:hidden; }
.s-side { width:204px; flex:none; display:flex; flex-direction:column; background:var(--rail); border-right:1px solid var(--line); }
#sheet .s-side h2 { padding:18px 20px 12px; }
.s-nav { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:1px; padding:0 8px 12px; }
.s-nav button { display:flex; align-items:center; gap:10px; height:32px; flex:none; padding:0 8px; border-radius:8px; font-size:13.5px; color:var(--body); white-space:nowrap; transition:background .12s, color .12s; }
.s-nav button svg { width:16px; height:16px; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; color:var(--muted); flex:none; transition:color .12s; }
.s-nav button:hover { background:var(--line-soft); color:var(--ink); }
.s-nav button.on { background:var(--line); color:var(--ink); font-weight:500; }
.s-nav button.on svg { color:var(--acc); }
.s-main { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
#s-close { position:absolute; top:12px; right:12px; z-index:1; }
.s-pane { flex:1; min-height:0; overflow-y:auto; padding:16px 26px 8px; }
#sheet .row.s-foot { flex:none; margin:0; padding:12px 26px 16px; }
#sheet .grp { display:none; }
#sheet .grp.on { display:block; animation:fade var(--t-in) var(--ease-out); }
#sheet .grp-h { font-size:15px; font-weight:600; line-height:1.4; color:var(--ink); margin:2px 40px 12px 0; }
#sheet h3 { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin:22px 0 6px; }
@media (max-width: 640px) {
  #sheet .card { flex-direction:column; }
  .s-side { width:auto; border-right:0; border-bottom:1px solid var(--line); }
  #sheet .s-side h2 { padding:14px 18px 8px; }
  .s-nav { flex:none; flex-direction:row; overflow-x:auto; overflow-y:hidden; padding:0 8px 8px; }
  .s-pane { padding:14px 18px 8px; }
  #sheet .row.s-foot { padding:10px 18px 14px; }
}
#sheet label { display:block; font-size:12px; color:var(--muted); margin:10px 0 4px; }
#sheet label .opt { color:var(--faint); margin-left:4px; }
#sheet input { width:100%; height:32px; border:1px solid var(--line); border-radius:8px; background:var(--paper); padding:0 10px; font-size:13.5px; outline:0; user-select:text; -webkit-user-select:text; }
#sheet input:focus { border-color:var(--faint); box-shadow:0 0 0 4px var(--acc-soft); }
#sheet .pick { display:flex; gap:6px; align-items:center; }
#sheet .note { font-size:12.5px; color:var(--muted); line-height:1.5; margin:0 0 4px; }
#sheet .row { margin-top:12px; }
#sheet .row:not(.s-foot) { padding:0; cursor:default; }   /* a row of buttons, not the sidebar's pressable row */
#sheet .row:hover { background:none; }
#sheet .row > .btn { flex:none; white-space:nowrap; }   /* a button next to a field keeps its words on one line */
#sheet .row.end { margin-top:16px; }
.version { font-size:12px; color:var(--faint); }
.teststate { font-size:12px; color:var(--muted); }
.teststate.good { color:var(--good); } .teststate.bad { color:var(--warn); }
.rule { display:flex; align-items:center; gap:10px; padding:5px 0; }
.rule .n { flex:1; font-size:13px; color:var(--body); }
.seg { display:flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.seg button { font-size:11.5px; padding:3px 9px; color:var(--muted); }
.seg button { transition:background .12s, color .12s; }
.seg button.on { background:var(--ink); color:var(--paper); }
.seg button:not(.on):hover { background:var(--line-soft); color:var(--ink); }
.keys { display:grid; grid-template-columns:1fr auto; gap:5px 12px; font-size:12.5px; color:var(--body); align-items:center; }
.keys kbd { justify-self:end; }
/* Settings, Account: the address, the last sync, and the 5-hour allowance's meter, which slides to its new value */
#sheet .acct-mail { font-size:13.5px; font-weight:500; color:var(--ink); margin:2px 0 0; }
#sheet .acct-sync { font-size:12px; color:var(--muted); margin-top:1px; }
#sheet .acct-sync.bad { color:var(--warn); }
#sheet .meter-h { font-size:12px; color:var(--muted); margin:12px 0 6px; }
#sheet .meter { height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
#sheet .meter i { display:block; height:100%; background:var(--acc); transform-origin:left center; transition:transform var(--t-in) var(--ease-out); }
#sheet .meter-t { font-size:12px; color:var(--muted); margin-top:6px; }
/* Autopilot on a Free account: where the switch would be, the plans that have it, and Upgrade */
.pilot-state .up { font-size:13.5px; color:var(--acc); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.pilot-state .up:hover { color:var(--ink); }
#allowance button { margin-left:8px; font-size:12px; color:var(--ink); padding:1px 8px; border-radius:5px; border:1px solid var(--line); }
#allowance button:hover { background:var(--line-soft); }
/* the switch under Developer is the onboarding's, on a button */
#sheet .ob-switch { padding:0; }
#sheet .ob-switch:focus-visible { border-radius:11px; }

@media (max-width: 720px) { #rail { position:absolute; z-index:10; height:100%; box-shadow:var(--shadow); } }

/* inbox */
.nav-item .badge { margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--acc); color:#fff; font-size:10.5px; font-weight:600; display:grid; place-items:center; font-style:normal; }
/* the sources as tabs under the title: the one you are in carries the ink */
.tabs { display:flex; gap:22px; margin-top:10px; border-bottom:1px solid var(--line); }
.tab { display:inline-flex; align-items:center; gap:7px; padding:10px 0 9px; margin-bottom:-1px; border-bottom:2px solid transparent; font-size:13px; color:var(--muted); transition:color .12s; }
.tab:hover { color:var(--ink); }
.tab.on { color:var(--ink); border-color:var(--ink); }
.tab .dot { width:7px; height:7px; border-radius:50%; }
.tab .n { font-size:11.5px; color:var(--faint); }
.tab.on .n { color:var(--muted); }
.item.inbx .t .n { font-size:11.5px; color:var(--faint); flex:none; }
/* the source's mark: the logo where the coloured dot used to be */
.src { width:15px; height:15px; flex:none; display:inline-grid; place-items:center; color:var(--muted); }
.src svg { width:15px; height:15px; display:block; }
.tab .src, .tab .src svg { width:13px; height:13px; }
.acc .src, .acc .src svg { width:16px; height:16px; }
.meta .src { vertical-align:-2px; margin-right:2px; }
.item.inbx .src { margin-right:1px; }
.item.inbx.urgent .who { color:var(--warn); }
.item.inbx .t { display:flex; gap:8px; align-items:baseline; }
.item.inbx .t .who { flex:none; max-width:190px; overflow:hidden; text-overflow:ellipsis; color:var(--body); }
.item.inbx .t .subj { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item.inbx.unread .t .who, .item.inbx.unread .t .subj { font-weight:600; color:var(--ink); }
.item.inbx .clip { color:var(--faint); display:grid; place-items:center; flex:none; }
.item.inbx .clip svg { width:13px; height:13px; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.hint.warn { color:var(--warn); cursor:pointer; }
.thread { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.msg { padding:14px 16px; border:1px solid var(--line); border-radius:10px; }
.msg.this { border-color:var(--faint); }
.msg.mine { background:var(--line-soft); }
.msg .h { display:flex; gap:8px; align-items:baseline; font-size:13px; color:var(--muted); min-width:0; }
.msg .h b { color:var(--ink); font-weight:500; flex:none; }
.msg .h .to { font-size:12px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.msg .h .w { margin-left:auto; font-size:12px; color:var(--faint); flex:none; }
.msg .b { margin-top:8px; font-size:14px; line-height:1.55; white-space:pre-wrap; word-break:break-word; color:var(--body); user-select:text; -webkit-user-select:text; }
.atts { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.att { display:inline-flex; gap:6px; align-items:center; height:28px; padding:0 10px; border:1px solid var(--line); border-radius:8px; font-size:12.5px; color:var(--body); transition:border-color .12s; }
.att:hover { border-color:var(--faint); color:var(--ink); }
.att svg { width:12px; height:12px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.att .sz { color:var(--faint); }
.tools-row .btn.primary { background:var(--acc); color:#fff; border-color:var(--acc); }
.acc { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-soft); }
.acc:last-child { border-bottom:0; }
.acc .dot { width:8px; height:8px; border-radius:50%; flex:none; }
.acc .b { flex:1; min-width:0; }
.acc .t { font-size:13.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acc .s { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acc .s.bad { color:var(--warn); }
.acc.off .t { color:var(--body); }
/* Appearance: each theme and style drawn as a small window in its own tokens (look.js), the pick ringed in the accent */
.lk-opts { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin:4px 0 16px; }
.lk-styles { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.lk-opt { display:flex; flex-direction:column; gap:7px; min-width:0; text-align:left; font-size:12.5px; color:var(--muted); }
.lk-opt.on { color:var(--ink); }
.lk-frame { position:relative; display:block; aspect-ratio:16/10; border-radius:10px; overflow:hidden; border:1px solid var(--line); transition:border-color .15s, box-shadow .15s; }
.lk-opt:hover .lk-frame { border-color:var(--faint); }
.lk-opt.on .lk-frame { border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft); }
.lk-opt:focus-visible .lk-frame { box-shadow:0 0 0 3px var(--acc-soft); }
.lk-win { position:absolute; inset:0; display:flex; background:var(--paper); }
.lk-win.half { clip-path:polygon(58% 0, 100% 0, 100% 100%, 42% 100%); }
.lk-win .r { width:27%; background:var(--rail); border-right:1px solid var(--line); padding:12% 6%; display:flex; flex-direction:column; gap:5px; }
.lk-win .m { position:relative; flex:1; padding:14% 10% 10%; display:flex; flex-direction:column; gap:5px; }
.lk-win i { display:block; height:3px; border-radius:2px; }
.lk-win .r i { background:var(--faint); opacity:.55; width:80%; }
.lk-win .m i { background:var(--body); opacity:.45; }
.lk-win .m i.h { background:var(--ink); opacity:1; height:5px; width:52%; margin-bottom:2px; }
.lk-win .m i.s { width:70%; }
.lk-win .pill { margin-top:auto; align-self:flex-end; width:32%; height:10px; border-radius:6px; background:var(--acc); }
.lk-win .star { position:absolute; top:12%; right:10%; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.lk-bright { display:flex; align-items:center; gap:12px; margin:6px 0 8px; font-size:12px; color:var(--muted); }
.lk-track { flex:1; display:flex; }
.lk-track input { width:100%; accent-color:var(--acc); }
@media (max-width:560px) { .lk-styles { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
details.adv, details.dev { margin-top:10px; font-size:12.5px; color:var(--muted); }
details.adv summary, details.dev summary { cursor:pointer; user-select:none; -webkit-user-select:none; }
details.adv label { margin-top:8px; }
.fromrow { display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--muted); margin:8px 0 4px; }
.fromrow select { height:26px; border:1px solid var(--line); border-radius:6px; background:var(--paper); font-size:12.5px; color:var(--ink); max-width:100%; }
button.lnk { font-size:12px; color:var(--muted); text-decoration:underline; text-underline-offset:2px; margin-top:6px; display:block; }
button.lnk:hover { color:var(--ink); }
.chip.re { max-width:280px; }
.chip.re > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip.re svg { width:13px; height:13px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.quiet { color:var(--faint); font-weight:400; }
#dialog.modal { z-index:22; }

/* autopilot */
.item.inbx .tag { font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:1px 6px; border-radius:4px; background:var(--line-soft); color:var(--muted); flex:none; }
.item.inbx .tag.gold { background:color-mix(in srgb, var(--gold) 22%, transparent); color:color-mix(in srgb, var(--gold) 60%, var(--ink)); }
.item.inbx .tag.flagged { background:var(--acc-soft); color:var(--acc); }

.verdict { margin-top:14px; font-size:13px; color:var(--muted); display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.verdict b { color:var(--ink); font-weight:500; }
.verdict .lnk { margin:0; display:inline; }
.ask.held { margin-top:16px; }
/* automations */
.say { display:flex; gap:8px; margin-top:18px; }
.say input { flex:1; height:38px; border:1px solid var(--line); border-radius:10px; background:var(--paper); padding:0 14px; font-size:14px; outline:0; user-select:text; -webkit-user-select:text; }
.say input:focus { border-color:var(--faint); box-shadow:0 0 0 4px var(--acc-soft); }
.say input::placeholder { color:var(--faint); }
.say .btn { height:38px; padding:0 16px; }
.rules-list { display:flex; flex-direction:column; gap:2px; margin-top:8px; }
.rule { display:flex; align-items:flex-start; gap:12px; padding:9px 8px; margin:0 -8px; border-radius:8px; transition:background .12s; }
.rule:hover { background:var(--line-soft); }
.rule .switch { flex:none; margin-top:2px; }
.rule .b { flex:1; min-width:0; }
.rule .t { display:block; width:100%; text-align:left; font-size:14.5px; line-height:1.5; color:var(--ink); padding:0; cursor:text; }
.rule .t:hover { text-decoration:underline; text-decoration-color:var(--faint); text-underline-offset:3px; }
.rule.off .t { color:var(--muted); }
.rule .uses { font-size:12px; color:var(--faint); margin-top:1px; }
.rule .uses:empty { display:none; }
.rule .edit { width:100%; font:inherit; font-size:14.5px; height:30px; border:1px solid var(--faint); border-radius:7px; padding:0 8px; background:var(--paper); color:var(--ink); outline:0; box-shadow:0 0 0 4px var(--acc-soft); user-select:text; -webkit-user-select:text; }
.rule .x { width:24px; height:24px; border-radius:6px; display:grid; place-items:center; color:var(--faint); opacity:0; transition:opacity .12s; flex:none; margin-top:1px; }
.rule:hover .x, .rule .x:focus-visible { opacity:1; } .rule .x:hover { color:var(--warn); background:var(--line); }
.rule .x svg { width:12px; height:12px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; }
.rule.flash { animation:flash 1.6s ease-out; }
.switch { position:relative; width:34px; height:20px; display:inline-block; }
.switch input { opacity:0; width:0; height:0; position:absolute; }
.switch i { position:absolute; inset:0; border-radius:10px; background:var(--line); transition:background .15s; }
.switch i::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--paper); box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .15s; }
.switch input:checked + i { background:var(--acc); } .switch input:checked + i::after { transform:translateX(14px); }
/* autopilot: a title row with one real switch, then the work */
#pad.pilot { max-width:740px; }
.pilot-state { display:flex; align-items:center; gap:14px; margin-left:auto; }
.pilot-state .words { font-size:13.5px; color:var(--muted); white-space:nowrap; }
/* the planet: Altworld's mark; the moon only moves while autopilot is on */
.planet { display:inline-block; width:20px; height:14px; flex:none; opacity:.4; transition:opacity .3s; margin-right:-4px; }
.planet.on { opacity:1; }
.planet svg { display:block; overflow:visible; }
.planet .disc { fill:var(--acc); }
.planet .ring { fill:none; stroke:var(--ink); stroke-width:.9; stroke-opacity:.5; }
.planet .moon { fill:var(--ink); }
/* the switch: an object with weight; the ink fills the track once the knob has landed */
.bigswitch { position:relative; width:64px; height:34px; display:inline-block; flex:none; cursor:pointer; }
.bigswitch input { opacity:0; width:0; height:0; position:absolute; }
.bigswitch i { position:absolute; inset:0; border-radius:17px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--faint), inset 0 1px 2px rgba(0,0,0,.05); transition:background .18s, box-shadow .18s; }
.bigswitch i::after { content:""; position:absolute; top:3px; left:3px; width:28px; height:28px; border-radius:50%; background:var(--paper); box-shadow:0 0 0 1px var(--faint), 0 1px 2px rgba(0,0,0,.12);
                      transition:transform .32s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; }
.bigswitch input:checked + i { background:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); transition:background .18s ease .2s, box-shadow .18s ease .2s; }
.bigswitch input:checked + i::after { transform:translateX(30px); box-shadow:0 1px 2px rgba(0,0,0,.25); }
.bigswitch.moved input:checked + i::after { animation:knobOn .4s cubic-bezier(.2,.7,.2,1); }
.bigswitch.moved input:not(:checked) + i::after { animation:knobOff .4s cubic-bezier(.2,.7,.2,1); }
@keyframes knobOn { 0% { transform:translateX(0) scale(1); } 45% { transform:translateX(14px) scale(1.16, .9); box-shadow:0 0 0 1px var(--faint), 0 4px 7px rgba(0,0,0,.2); } 100% { transform:translateX(30px) scale(1); } }
@keyframes knobOff { 0% { transform:translateX(30px) scale(1); } 45% { transform:translateX(16px) scale(1.16, .9); box-shadow:0 0 0 1px var(--faint), 0 4px 7px rgba(0,0,0,.2); } 100% { transform:translateX(0) scale(1); } }
.bigswitch input:focus-visible + i { outline:2px solid var(--faint); outline-offset:2px; }
html[data-theme="dark"] .bigswitch input:checked + i::after { background:var(--paper); }
.pilot .sect:first-of-type { margin-top:0; }
.pilot .sect.in { animation:fadeUp .35s ease-out backwards; }
.pilot .sect { margin-top:8px; }
.pilot.wake .sect { animation:fadeUp .4s ease-out; }
.pilot .sect h2 { margin-top:26px; }
.hold { padding:12px 14px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; }
.hold .t { font-size:13.5px; color:var(--ink); font-weight:500; }
.hold .s { margin-top:6px; font-size:13.5px; line-height:1.5; color:var(--body); white-space:pre-wrap; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hold .h, .need .h { display:flex; align-items:flex-start; gap:8px; }
.hold .h .t, .need .h .t { flex:1; min-width:0; }
.hold .n { margin-top:2px; font-size:12.5px; color:var(--faint); }
.hold .x, .need .x { width:22px; height:22px; border-radius:6px; display:grid; place-items:center; color:var(--faint); flex:none; margin:-3px -6px 0 0; transition:color .12s, background .12s; }
.hold .x:hover, .need .x:hover, .hold .x:focus-visible, .need .x:focus-visible { color:var(--ink); background:var(--line); outline:0; }
.hold .x svg, .need .x svg { width:11px; height:11px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; }
.cards { display:flex; flex-direction:column; }
.hold .f { display:flex; gap:6px; margin-top:10px; }
.hold .f .btn { height:28px; padding:0 12px; font-size:12.5px; }
/* a message that needs you: who and what, why, and the reply line right there */
.need { padding:12px 14px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; }
.need .t { display:block; width:100%; text-align:left; font-size:13.5px; color:var(--body); padding:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.need .t b { font-weight:500; color:var(--ink); }
.need .t:hover b { text-decoration:underline; text-underline-offset:3px; }
.need .s { margin-top:4px; font-size:13px; color:var(--muted); line-height:1.45; }
.reply-box { margin-top:10px; }
.reply-box input { width:100%; height:34px; border:1px solid var(--line); border-radius:8px; background:var(--paper); padding:0 12px; font-size:13.5px; color:var(--ink); outline:0; user-select:text; -webkit-user-select:text; }
.reply-box input:focus { border-color:var(--faint); box-shadow:0 0 0 4px var(--acc-soft); }
.reply-box input::placeholder { color:var(--faint); }
.reply-box.needs input::placeholder { color:var(--body); }
.reply-box .f { display:flex; gap:6px; align-items:center; margin-top:8px; }
.reply-box .f .btn { height:28px; padding:0 12px; font-size:12.5px; }
.reply-box .f .lnk { margin:0 0 0 auto; font-size:12.5px; }
.reply-box.compact { display:flex; gap:6px; align-items:center; margin-top:8px; }
.reply-box.compact input { flex:1; min-width:0; height:30px; font-size:13px; padding:0 10px; }
.reply-box.compact .f { margin:0; flex:none; }
.page > .reply-box { margin:14px 0 4px; }
.page > .reply-box input { height:38px; font-size:14px; }
.page > .reply-box .f .btn { height:32px; font-size:13px; }
.hold textarea { width:100%; min-height:90px; margin-top:6px; font:inherit; font-size:13.5px; line-height:1.5; border:1px solid var(--faint); border-radius:8px; padding:8px 10px; background:var(--paper); color:var(--ink); outline:0; resize:none; box-shadow:0 0 0 4px var(--acc-soft); user-select:text; -webkit-user-select:text; }
.flag { display:flex; gap:10px; align-items:baseline; padding:8px 8px; margin:0 -8px; border-radius:8px; font-size:13.5px; cursor:pointer; min-width:0; }
.flag:hover { background:var(--line-soft); }
.flag b { font-weight:500; color:var(--ink); flex:none; }
.flag span { color:var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.flag em { font-style:normal; color:var(--faint); margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:45%; flex:none; }
.pilot .rules-list { margin-top:10px; }
.pilot .say { margin-top:14px; }
.pilot .more { margin-top:8px; }
.pilot .lnk { margin-top:10px; }

/* ----------------------------------------------------------------- plans */
/* The plans: a page of their own, four across when there is room (app.js fits them: #pad's data-cols), the price rolling
   between monthly and yearly, a lift under the pointer, and the chosen card carried into the order. Transform and opacity
   only; reduce motion shows every end state at once (the rule at the bottom). */
#pad.plans { max-width:1120px; padding-top:26px; padding-bottom:48px; animation:none; }
#main.wash-on #wash { opacity:.55; }
.pl-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pl-head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px 20px; flex-wrap:wrap; }
.pl-head h1 { font-size:40px; }
.pl-per-row { display:flex; align-items:center; gap:10px; }
.pl-period { position:relative; display:grid; grid-template-columns:1fr 1fr; padding:3px; border:1px solid var(--line); border-radius:99px; background:var(--paper); }
.pl-period .thumb { position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); border-radius:99px; background:var(--ink); transition:transform .36s cubic-bezier(.34,1.3,.64,1); }
.pl.yearly .pl-period .thumb { transform:translateX(100%); }
.pl-period button { position:relative; min-width:86px; height:30px; padding:0 14px; border-radius:99px; font-size:13px; font-weight:500; color:var(--muted); text-align:center; }
.pl-period button:hover { color:var(--ink); }
.pl:not(.yearly) .pl-period button:nth-of-type(1), .pl.yearly .pl-period button:nth-of-type(2) { color:var(--paper); }
.pl-yeartag { font-size:12px; font-weight:500; color:var(--acc-ink); background:var(--acc-soft); padding:3px 10px; border-radius:99px; white-space:nowrap; }
.pl-err { display:flex; align-items:center; gap:10px; margin-top:18px; padding:9px 12px; border:1px solid var(--line); border-radius:12px; background:var(--paper); font-size:13px; color:var(--ink); }
.pl-err::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--warn); flex:none; }
.pl-err span { flex:1; }
.pl-err button { font-size:12.5px; font-weight:500; color:var(--ink); padding:3px 10px; border-radius:6px; border:1px solid var(--line); flex:none; }
.pl-err button:hover { background:var(--line-soft); }
.pl-err.in { animation:fadeUp var(--t-in) var(--ease-out); }
.pl-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin-top:24px; }
#pad[data-cols="2"] .pl-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
#pad[data-cols="1"] .pl-grid { grid-template-columns:minmax(0, 1fr); }
/* one card per row lines up with nothing, so a card without a button or a saving keeps no room for them */
#pad[data-cols="1"] .pl-cta-space, #pad[data-cols="1"] .pl-save:empty { display:none; }
.pl-card { position:relative; display:flex; flex-direction:column; min-width:0; padding:20px 18px; border:1px solid var(--line); border-radius:16px; background:var(--paper);
           transition:transform .3s var(--ease-out), opacity .25s var(--ease-out); }
.pl-card::after { content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s var(--ease-out);
                  box-shadow:0 18px 40px rgba(40,30,20,.12), 0 2px 6px rgba(40,30,20,.06); }
html[data-theme="dark"] .pl-card::after { box-shadow:0 20px 44px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35); }
@media (hover:hover) { .pl-grid:not(.choosing) .pl-card:hover { transform:translateY(-4px); } .pl-grid:not(.choosing) .pl-card:hover::after { opacity:1; } }
.pl-card.feature { background:color-mix(in srgb, var(--acc) 6%, var(--paper)); border-color:color-mix(in srgb, var(--acc) 32%, var(--line)); }
.pl-card.now { border-color:var(--ink); }
.pl-grid.choosing .pl-card:not(.chosen) { opacity:.3; transform:scale(.97); }
.pl-top { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:30px; }
.pl-name { font-family:var(--serif); font-size:25px; font-weight:400; line-height:1.1; color:var(--ink); letter-spacing:-.005em; }
.pl-tag { min-width:0; font-size:11.5px; font-weight:500; line-height:1.4; padding:2px 9px; border-radius:99px; color:var(--acc-ink); background:var(--acc-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-tag.now { color:var(--paper); background:var(--ink); }
/* each period is one layer (the figures and "a month" or "a year"), both in the same cell, so each reads tight */
.pl-price { position:relative; display:grid; margin-top:16px; }
.pl-price > span:not(.sr) { grid-area:1 / 1; display:flex; align-items:baseline; gap:7px; white-space:nowrap; }
.pl-num { font-family:var(--serif); font-size:42px; line-height:1; color:var(--ink); letter-spacing:-.015em; }
.pl-num i { display:inline-block; font-style:normal; transition:transform .44s var(--ease-out), opacity .32s var(--ease-out); transition-delay:calc(var(--d, 0ms) + var(--k, 0) * 26ms); }
.pl-per { font-size:13px; color:var(--muted); transition:transform .4s var(--ease-out) var(--d, 0ms), opacity .3s var(--ease-out) var(--d, 0ms); }
.pl-price .yr i, .pl-price .yr .pl-per { opacity:0; transform:translateY(.55em); }
.pl.yearly .pl-price .mo i, .pl.yearly .pl-price .mo .pl-per { opacity:0; transform:translateY(-.55em); }
.pl.yearly .pl-price .yr i, .pl.yearly .pl-price .yr .pl-per { opacity:1; transform:none; }
.pl-save { min-height:19px; margin-top:6px; font-size:12.5px; color:var(--acc-ink); opacity:0; transform:translateY(4px);
           transition:opacity .3s var(--ease-out) var(--d, 0ms), transform .3s var(--ease-out) var(--d, 0ms); }
.pl.yearly .pl-save, .pl-save.on { opacity:1; transform:none; }
.pl-cta { position:relative; display:grid; place-items:center; margin-top:14px; height:40px; border-radius:10px; font-size:14px; font-weight:600; text-align:center;
          color:#fff; background:var(--acc); transition:transform .18s var(--ease-out), opacity .18s; }
html[data-theme="dark"] .pl-cta { color:#12161a; }
.pl-cta:hover { transform:translateY(-1px); opacity:.94; }
.pl-cta:active { transform:scale(.98); }
.pl-cta.quiet { color:var(--ink); background:none; box-shadow:inset 0 0 0 1px var(--line); font-weight:500; }
.pl-cta.quiet:hover { box-shadow:inset 0 0 0 1px var(--faint); opacity:1; }
.pl-cta:disabled { cursor:default; transform:none; opacity:1; }
.pl-cta .wait i { background:currentColor; }
.pl-cta-space { height:40px; margin-top:14px; }
.pl-facts { list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:9px; font-size:13px; line-height:1.4; color:var(--body); }
.pl-facts li { display:flex; gap:8px; align-items:flex-start; }
/* a line that has to wrap breaks between its halves ("~1,500 replies" / "per 5 hours"), never inside one */
.pl-facts li > span > span { white-space:nowrap; }
.pl-facts .ico { width:14px; height:14px; margin-top:1px; stroke:var(--acc); stroke-width:2; }
/* the entrance: the head, then each card, then the comparison, rising in turn; once per opening */
.pl.enter .pl-head, .pl.enter .pl-card, .pl.enter .pl-compare { animation:plIn .56s var(--ease-out) backwards; animation-delay:calc(var(--i, 0) * 70ms); }
@keyframes plIn { from { opacity:0; transform:translateY(18px) scale(.985); } }
.pl.back { animation:fade var(--t-in) var(--ease-out); }
.pl-compare { margin-top:44px; }
.pl-compare h2 { margin:0 0 8px; }
.pl-tablewrap { overflow-x:auto; margin:0 -8px; padding:0 8px; }
.pl-table { width:100%; min-width:520px; border-collapse:collapse; font-size:13px; }
.pl-table th, .pl-table td { padding:11px 10px; border-bottom:1px solid var(--line-soft); text-align:center; font-weight:400; color:var(--body); white-space:nowrap; }
.pl-table thead th { font-family:var(--serif); font-size:17px; color:var(--ink); padding-top:6px; }
.pl-table tbody th { text-align:left; color:var(--muted); white-space:normal; }
.pl-table .now { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.pl-table .ico { width:15px; height:15px; stroke:var(--acc); stroke-width:2; vertical-align:-3px; }
.pl-table .no { display:inline-block; width:10px; height:1.5px; border-radius:1px; background:var(--faint); vertical-align:middle; }
/* the checkout: the chosen card as the order, Stripe's form or the window's state beside it, or under it when narrow */
.co { display:grid; grid-template-columns:minmax(260px, 340px) minmax(0, 1fr); gap:18px 28px; align-items:start; }
#pad[data-co="stack"] .co { grid-template-columns:minmax(0, 1fr); }
.co-back { grid-column:1 / -1; justify-self:start; display:inline-flex; align-items:center; gap:4px; font-size:13px; color:var(--muted); padding:4px 10px 4px 4px; margin-left:-4px; border-radius:7px; }
.co-back:hover { color:var(--ink); background:var(--line-soft); }
.co-back .ico { width:14px; height:14px; }
.co-order { position:sticky; top:0; z-index:1; }
.co-order.flipping { transition:transform .52s cubic-bezier(.2,.8,.2,1); }
.co-due { display:flex; justify-content:space-between; align-items:baseline; margin-top:20px; padding-top:14px; border-top:1px solid var(--line); font-size:14px; color:var(--ink); }
.co-due b { font-weight:600; }
.co-renew { margin-top:3px; font-size:12.5px; color:var(--muted); }
.co-pane { min-width:0; animation:coIn .42s var(--ease-out) .14s backwards; }
@keyframes coIn { from { opacity:0; transform:translateX(20px); } }
#pad[data-co="stack"] .co-pane { animation-name:fadeUp; }
.co-stripe { position:relative; min-height:560px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px var(--line); overflow:hidden; }
.co-skel { position:absolute; inset:0; padding:28px 26px; display:flex; flex-direction:column; gap:14px; pointer-events:none; transition:opacity .4s ease .8s; }
.co-skel i { height:42px; border-radius:8px; background:#f1eee8; position:relative; overflow:hidden; }
.co-skel i:first-child { width:45%; height:22px; }
.co-skel i::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); transform:translateX(-100%); animation:skel 1.4s ease-in-out infinite; }
@keyframes skel { to { transform:translateX(100%); } }
.co-stripe.mounted .co-skel { opacity:0; }
.co-mount { position:relative; }   /* Stripe's form, over the fading skeleton */
.co-state { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:14px; min-height:240px; padding:28px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.co-line { font-size:15px; color:var(--ink); }
/* the plan's moment: the dragon's lap round the star, then the plan's name and the way on */
.pl-done { min-height:calc(100vh - 170px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding-bottom:6vh; }
.pl-done .mark { font-size:clamp(70px, 9vw, 104px); }
.pl-done h1 { font-size:34px; justify-content:center; margin-top:6px; }
.pl-done .pl-row { margin-top:14px; justify-content:center; }
.pl-done.landing h1, .pl-done.landing .pl-row { animation:fadeUp .4s var(--ease-out) var(--land) backwards; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* --------------------------------------------------------------- motion */
/* a reply fades in as it starts; rows that leave a list fold away; toasts, dialogs and Settings leave in --t-out */
.reply.in { animation:fade var(--t-in) var(--ease-out); }
.item.folding { overflow:hidden; opacity:0; padding-top:0; padding-bottom:0; transition:height var(--t-in) var(--ease-out), opacity var(--t-in) var(--ease-out), padding var(--t-in) var(--ease-out); }
#toast.leaving { animation:toastOut var(--t-out) var(--ease-in) forwards; }
.modal.leaving { animation:fadeOut var(--t-out) var(--ease-in) forwards; }
.modal.leaving .card { animation:sink8 var(--t-out) var(--ease-in) forwards; }
@keyframes rise8 { from { opacity:0; transform:translateY(8px); } }
@keyframes sink8 { to { opacity:0; transform:translateY(8px); } }
@keyframes toastOut { to { opacity:0; transform:translate(-50%, 4px); } }
/* views picked in the sidebar crossfade, the view alone, where the web view has view transitions */
#view { view-transition-name:view; }
::view-transition-old(root), ::view-transition-new(root) { animation:none; }
::view-transition-old(view), ::view-transition-new(view) { animation-duration:var(--t-in); animation-timing-function:var(--ease-out); }
/* the Autopilot moment (pilot-fx.js): the whole window for a moment when Autopilot goes on or off, the planet by the
   switch drawn large; the founder's own ask (2026-09-14), past the plain rules. Reduce motion never draws it. */
.pilot-fx { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; cursor:default; -webkit-app-region:no-drag; }
.pfx-bg { position:absolute; inset:0; background:radial-gradient(58% 52% at 50% 45%, rgba(var(--acc-rgb), var(--wash)), transparent 72%), color-mix(in srgb, var(--paper) 88%, transparent);
          -webkit-backdrop-filter:blur(18px) saturate(.85); backdrop-filter:blur(18px) saturate(.85); }
.pfx-planet { position:relative; width:280px; height:196px; transform-origin:50% 50%; }
.pfx-planet svg { display:block; width:100%; height:100%; overflow:visible; }
.pfx-disc { fill:var(--acc); }
.pfx-ring { fill:none; stroke:var(--ink); stroke-opacity:.5; stroke-width:1.3; stroke-linecap:round; stroke-dasharray:1 1; stroke-dashoffset:1; }
.pfx-echoes { transform-box:view-box; transform-origin:50% 50%; }
.pfx-echoes ellipse { fill:none; stroke:var(--ink); stroke-opacity:.16; stroke-width:1; stroke-dasharray:2 7; vector-effect:non-scaling-stroke; }
.pfx-moon, .pfx-trail { fill:var(--ink); }
.pfx-halo { fill:none; stroke:var(--acc); stroke-width:1.4; opacity:0; transform-box:fill-box; transform-origin:center; }
.pfx-words { position:relative; font-family:var(--serif); font-size:30px; line-height:1.2; color:var(--ink); letter-spacing:-.005em; }
/* the system's reduce-motion setting: everything instant, nothing repeats */
@media (prefers-reduced-motion: reduce) {
  :root { --t-in:0ms; --t-out:0ms; }
  *, *::before, *::after { animation-duration:1ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:1ms !important; transition-delay:0s !important; }
}