/* 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; min-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%; min-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; min-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 { min-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; }
/* A word from us above the chat when something is wrong on our side (the server's lib/notice.mjs): what happened, in
   two lines, until it is dismissed or the server takes it down. It sits in the flow between the header and the
   messages, so it moves the chat down instead of covering anything, and never reaches the composer. */
#statusnote { flex:none; width:100%; max-width:var(--col); margin:0 auto; padding:14px 24px 0; }
#statusnote .in { display:flex; align-items:flex-start; gap:10px; padding:9px 10px 9px 12px; border:1px solid var(--line); border-radius:10px;
                  font-size:12.5px; line-height:1.55; color:var(--body); white-space:pre-line; }
#statusnote .in::before { content:""; width:6px; height:6px; margin-top:6px; border-radius:50%; background:var(--warn); flex:none; }
#statusnote span { flex:1; }
#statusnote .icon { width:22px; height:22px; margin-top:-1px; }
#statusnote.leaving { animation:fadeOut var(--t-out) var(--ease-in) forwards; }
#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 { max-width:100%; font-family:var(--serif); font-size:clamp(44px, 5.3vw, 80px); 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 .glyph { width:1.3em; height:1.3em; overflow:visible; user-select:none; }
/* a new chat: the name comes in as the pen lifts (mark.js) */
.hero.landing .mark span, .hero.landing .tag, .hero.landing .starters { animation:fadeUp .4s var(--ease-out) var(--land) backwards; }
.mark.person { font-size:clamp(40px, 5vw, 64px); }
.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); }
/* the empty chat's starter prompts: one tap sends a whole first message */
.starters { margin-top:22px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:560px; }
.starter { font:inherit; font-size:13.5px; line-height:1; color:var(--ink); background:var(--paper); border:1px solid var(--line);
           border-radius:999px; padding:9px 14px; cursor:pointer; transition:border-color .15s ease, transform .1s ease; }
.starter:hover { border-color:var(--faint); }
.starter:active { transform:scale(.97); }
.starter:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring); }
@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; }
/* a message's images above its words: small squares in a row, one alone larger in its own shape; a click shows one large */
.you .stack { display:flex; flex-direction:column; align-items:flex-end; gap:6px; max-width:78%; min-width:0; }
.you .stack span.msg { max-width:100%; }
.you .pics { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.you .pic { display:block; border-radius:12px; cursor:zoom-in; }
.you .pic img { display:block; width:96px; height:96px; object-fit:cover; border-radius:12px; border:1px solid var(--line); }
.you .pic:only-child img { width:auto; height:180px; min-width:64px; max-width:260px; }
.you .edit .tray { margin:6px 0 8px; }
.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; }
#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, a line is written and written again: the mark's pen, the one motion that repeats */
#phase .pen { width:21px; height:9px; flex:none; overflow:visible; fill:none; stroke:var(--acc); stroke-width:2; stroke-linecap:round; stroke-dasharray:1 2; animation:scribble 1.7s cubic-bezier(.45,0,.4,1) infinite; }
@keyframes scribble { from { stroke-dashoffset:1.02; } 50% { stroke-dashoffset:0; } to { stroke-dashoffset:-1.02; } }
#box { display:flex; flex-wrap:wrap; 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); }
#box.files, #box.files:focus-within { border-color:var(--acc); }   /* an image dragged over the chat or the composer: where it lands */
#input { flex:1; min-width:0; 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 { min-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); }
/* Hemmingway Wise, next to the thinking level: off it is as quiet as the rest of the composer, on it is plainly on. */
#wise { min-height:30px; padding:0 9px; border-radius:9px; flex:none; font-size:12.5px; color:var(--muted); white-space:nowrap; }
#wise:hover { background:var(--line-soft); color:var(--ink); }
#wise[aria-pressed="true"] { background:var(--ink); color:var(--paper); }
#wise[aria-pressed="true"]:hover { opacity:.9; }
#think svg { width:13px; height:13px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }
#attach { width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center; color:var(--muted); }
/* the use ring by the thinking level: fills with the fullest of the 5-hour allowance, the week's and the chat's room;
   the warning colour from 80%, and full once an allowance is used up */
#gauge { width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center; }
#gauge:hover, #gauge.open { background:var(--line-soft); }
#gauge svg { width:17px; height:17px; transform:rotate(-90deg); overflow:visible; }
#gauge circle { fill:none; stroke-width:2.4; }
#gauge .track { stroke:var(--line); }
#gauge .fill { stroke:var(--muted); stroke-linecap:round; stroke-dasharray:0 100; transition:stroke-dasharray var(--t-in) var(--ease-out); }
#gauge:hover .fill, #gauge.open .fill { stroke:var(--ink); }
#gauge.high .fill { stroke:var(--warn); }
/* what it opens: each allowance with what is left, a bar, and when it refills; then the chat; then Upgrade */
.menu .use { width:250px; padding:4px 10px 8px; font-size:12.5px; color:var(--body); white-space:normal; }
.menu .use .u-row { display:flex; justify-content:space-between; gap:10px; margin-top:8px; }
.menu .use .u-row:first-child { margin-top:2px; }
.menu .use .u-row b { font-weight:500; color:var(--ink); }
.menu .use .u-row span { color:var(--muted); font-variant-numeric:tabular-nums; }
.menu .use .u-bar { height:4px; margin-top:5px; border-radius:2px; background:var(--line); overflow:hidden; }
.menu .use .u-bar i { display:block; height:100%; border-radius:2px; background:var(--acc); }
.menu .use .u-bar.high i { background:var(--warn); }
.menu .use .u-note { margin-top:4px; font-size:11.5px; color:var(--faint); }
.menu .use .u-up { margin-top:12px; width:100%; height:30px; display:grid; place-items:center; border-radius:8px; background:var(--ink); color:var(--paper); font-size:12.5px; font-weight:500; }
.menu .use .u-up:hover { opacity:.9; }
#attach:hover { background:var(--line-soft); color:var(--ink); }
#attach svg { width:16px; height:16px; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
/* the images going with the next message, a line of their own at the top of the box (#box wraps), each with its x */
.tray { display:flex; flex-wrap:wrap; gap:8px; }
#tray { flex-basis:100%; padding:2px 0 8px; }
.shot { position:relative; width:56px; height:56px; flex:none; }
.shot img { width:100%; height:100%; display:block; object-fit:cover; border-radius:9px; border:1px solid var(--line); cursor:zoom-in; }
.shot .x { position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:var(--paper); border:1px solid var(--line); color:var(--muted); }
.shot .x:hover { color:var(--ink); border-color:var(--faint); }
.shot .x svg { width:10px; height:10px; stroke-width:2; }
#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; }
#fine { margin:0; padding:7px 8px 0; font-size:11px; line-height:1.4; color:var(--faint); text-align:center; text-wrap:balance; }
#fine a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
#fine a:hover { color:var(--muted); }

/* --------------------------------------------------------- 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 .s { margin-left:auto; color:var(--faint); font-size:11.5px; padding-left:14px; text-align:right; }
.menu .mnote { padding:2px 10px 7px; font-size:12px; line-height:1.45; color:var(--muted); white-space:normal; width:230px; }
.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); } }
/* one image as large as the window allows, over the page's own ground; a click anywhere or Escape closes it */
#viewer { position:fixed; inset:0; z-index:35; display:flex; align-items:center; justify-content:center; padding:32px; cursor:zoom-out; outline:0;
          background:color-mix(in srgb, var(--paper) 94%, transparent); animation:fade var(--t-in) var(--ease-out); }
#viewer.leaving { animation:fadeOut var(--t-out) var(--ease-in) forwards; }
#viewer img { max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; border:1px solid var(--line); }

/* ------------------------------------------------------------- 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); }
.rule[data-socials] > a { font-size:13px; color:var(--ink); }   /* Settings' Community line: the place, the size of its label */
.rule[data-socials] { flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 14px; }   /* several places: side by side, wrapping under the label on a phone */
@media (max-width: 720px) { .rule[data-socials] .n { flex:0 0 100%; } }
.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 .here-rule { margin-top:12px; align-items:center; }   /* Account: where new chats live, then what that means */
#sheet .here-rule:hover { background:none; }
#sheet .here-note { margin:0 0 6px; }
#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); }
/* 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 .q { margin-bottom:8px; font-size:13.5px; line-height:1.45; color:var(--ink); }
.reply-box.compact .q { flex:0 0 100%; margin:2px 0 0; }
.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; flex-wrap:wrap; 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-code { display:flex; align-items:center; gap:10px; margin-top:12px; min-height:32px; font-size:13px; color:var(--body); }
.pl-code-link { font-size:13px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line); }
.pl-code-link:hover { color:var(--ink); }
.pl-code-form { display:flex; gap:8px; }
.pl-code-form input { width:180px; font:inherit; font-size:13px; letter-spacing:.04em; text-transform:uppercase; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); }
.pl-code-form button { font-size:12.5px; font-weight:500; color:var(--ink); padding:5px 12px; border-radius:8px; border:1px solid var(--line); }
.pl-code-form button:hover { background:var(--line-soft); }
.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.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; }
/* who the plan is for, then its lines; a plan with neither (an older server's Free) leaves no gap */
.pl-says:empty { display:none; }
.pl-blurb { margin-top:18px; font-size:13px; line-height:1.45; color:var(--body); text-wrap:pretty; }
.pl-blurb + .pl-facts { margin-top:12px; }
.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; }
.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-legal { margin-top:12px; font-size:12px; line-height:1.5; color:var(--faint); }
.co-legal a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.co-legal a:hover { 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 mark written in, 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; }
  #phase .pen { animation:none; }   /* the written line stays written */
}

/* ---------------------------------------------------------------- phone */
/* A phone, or a window as narrow (the Android app shows the web version): the sidebar is a drawer over the page, drawn
   only while .open so it never flashes open before app.js closes it, with a dim area under it that closes it; what the
   pointer would bring up shows always; anything you press has 40px to land on, drawn nowhere; and heights follow the
   screen as it is (dvh), so the keyboard and the browser's bars never push the composer off. */
@media (max-width: 720px) {
  * { -webkit-tap-highlight-color:transparent; }
  /* Autopilot's title row: the state and its switch go on their own line under the name */
  .orbit-head { flex-wrap:wrap; row-gap:6px; }
  .pilot-state { flex-basis:100%; margin-left:0; }
  .pilot-state .words { white-space:normal; }
  /* the app's height: the visual viewport, which shrinks when iOS's keyboard opens (app.js), and the window otherwise */
  body, #rail { height:var(--app-h, 100dvh); }
  #rail:not(.open) { width:0; opacity:0; border-right:0; overflow:hidden; }
  #rail > * { min-width:236px; }   /* closing, the drawer's lines are cut off rather than folded */
  #scrim { position:fixed; inset:0; z-index:9; background:rgba(0,0,0,.16); animation:fade var(--t-in) var(--ease-out); }
  .find kbd, .nav-item kbd { display:none; }
  /* 40px to land on: rows and fields that tall, and every smaller button a 40px square round it */
  .icon { width:40px; height:40px; }
  .nav-item, #tree .row, .s-nav button, .menu .mi, .pick, .seg button { min-height:40px; }
  :where(#rail, #main, .modal) :where(input:not([type=checkbox], [type=range]), select) { min-height:40px; }
  .find svg { top:18px; }
  :where(button:not(.ob-switch), #title, .step .h, .meta .cp, .chip, .orbit .node) { position:relative; }
  :where(button:not(.ob-switch), #title, .step .h, .meta .cp, .chip, .orbit .node)::after { content:""; position:absolute; left:50%; top:50%; width:max(100%, 40px); height:max(100%, 40px); transform:translate(-50%, -50%); }
  .chip .x { z-index:1; }
  .item .t.ed { padding-block:8px; margin-block:-8px; }   /* a memory's line, 40px to tap and change, in the same room */
  .swatches { gap:18px; }
  /* what the pointer brings up elsewhere: the time and Edit by your message, Copy and Try again, a chat's menu, Forget */
  .you .tools, .acts, .row .more, .sec .add, .item .x, .item .more, .reply pre .cp, .chip .x, .rule .x { opacity:1; }
  .you .when { white-space:nowrap; }
  /* names and menus inside the width */
  .mark, .pl-done .mark { font-size:clamp(28px, 8.5vw, 38px); }
  .mark.person { font-size:clamp(26px, 8.5vw, 36px); }
  #titleedit { min-width:0; flex:1; }
  #input { scrollbar-width:none; }   /* growing a line at a time, it never needs one */
  #viewer { padding:12px; }
  .menu { max-width:calc(100vw - 16px); }
  .menu .mi span:not([class]) { min-width:0; overflow:hidden; text-overflow:ellipsis; }
  /* heights by the screen as it is */
  .hero { padding-bottom:8dvh; }
  .orbit { height:calc(100dvh - 190px); }
  .modal .card { max-height:calc(100dvh - 60px); }
  #sheet .card { height:min(620px, calc(100dvh - 60px)); }
  .picks { max-height:44dvh; }
  .pl-done { min-height:calc(100dvh - 170px); padding-bottom:6dvh; }
  /* Settings in one column: a row's name above its choices */
  #sheet .rule { flex-direction:column; align-items:flex-start; gap:6px; }
  #sheet .rule[data-socials] { flex-direction:row; align-items:baseline; gap:4px 14px; }   /* the places side by side under their label, not a line each */
  /* fields at 16px, so a phone's browser never zooms in on the one you tap */
  input:not(.ob-code input), textarea, select { font-size:16px !important; }
}
/* a touch screen has nothing to drag with: no drag hint in the sidebar */
@media (hover: none), (pointer: coarse) { #tree .quiet { display:none; } }

/* the mic button, as the image button's twin; while a voice note is on: red and pulsing (app.js, the mic wiring) */
#mic { width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center; color:var(--muted); }
#mic:hover { background:var(--line-soft); color:var(--ink); }
#mic svg { width:16px; height:16px; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
#mic.rec { color:var(--warn); }
#mic.rec svg { animation:recpulse 1.3s ease-in-out infinite; }
@keyframes recpulse { 50% { opacity:.3; } }

/* ------------------------------------------------------------------ files with a message, and a reply saved
   (files.js; app.js docEl, savePdf). A file is its name over its kind and length: in the tray beside the pictures, with
   an x, and above the words in your message's bubble. */
.doc { position:relative; display:flex; align-items:center; gap:9px; min-width:0; max-width:260px; padding:7px 11px; border:1px solid var(--line); border-radius:10px; background:var(--paper); text-align:left; }
.doc > .ico { width:15px; height:15px; flex:none; color:var(--muted); }
.doc .w { display:flex; flex-direction:column; min-width:0; line-height:1.35; }
.doc .n { font-size:12.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc .k { font-size:11.5px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc.reading .n, .doc.reading > .ico { color:var(--faint); }
.tray .doc { min-height:56px; }   /* as tall as a picture beside it */
.doc .x { position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:var(--paper); border:1px solid var(--line); color:var(--muted); }
.doc .x:hover { color:var(--ink); border-color:var(--faint); }
.doc .x svg { width:10px; height:10px; stroke-width:2; }
.you .docs { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; max-width:100%; min-width:0; }
.you .docs .doc { max-width:100%; }
/* Save as PDF: the print dialog over the reply alone, black on white in the serif, whatever the theme. #print holds
   it and shows on paper only, and only while html.printing, so printing the window any other way is left as it was. */
#print { display:none; }
@media print {
  html.printing, html.printing body { height:auto !important; overflow:visible !important; background:#fff !important; }
  html.printing body > :not(#print) { display:none !important; }
  html.printing #print { display:block; font-family:var(--serif); font-size:11.5pt; line-height:1.55; color:#000; max-width:none; }
  html.printing #print h1, html.printing #print h2, html.printing #print h3 { font-family:var(--serif); color:#000; break-after:avoid; }
  html.printing #print h1 { font-size:19pt; font-weight:400; margin:0 0 10pt; } html.printing #print h2 { font-size:14.5pt; font-weight:400; margin:16pt 0 6pt; } html.printing #print h3 { font-size:12pt; margin:12pt 0 4pt; }
  html.printing #print p, html.printing #print li { orphans:3; widows:3; }
  html.printing #print pre, html.printing #print code { background:none; border:1px solid #ccc; color:#000; white-space:pre-wrap; }
  html.printing #print code { border:0; padding:0; }
  html.printing #print table { display:table; font-size:10pt; break-inside:auto; } html.printing #print tr { break-inside:avoid; }
  html.printing #print th, html.printing #print td { border-color:#999; }
  html.printing #print blockquote { color:#333; border-color:#999; }
  html.printing #print a { color:#000; text-decoration:underline; }
  html.printing #print .cp { display:none; }
  @page { margin:22mm 20mm; }
}

/* ================================================================ how Hemmingway works (guide.js) ==================
   The way home, the short guide, the first-time notes, the page that keeps them, and the lighter New person form.
   One block, so it merges in one piece. */

/* the way home: in a browser tab, the mark and the name at the top of the sidebar are a link to the home page */
.home { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 8px 0 4px; border-radius:8px; color:var(--ink); text-decoration:none;
        font-family:var(--serif); font-size:17px; letter-spacing:-.01em; line-height:1; -webkit-app-region:no-drag; transition:background .12s; }
.home:hover { background:var(--line-soft); }
.home .glyph { width:22px; height:22px; flex:none; overflow:visible; }
.home span { padding-top:1px; }
html.web .rail-top { padding-left:8px; }   /* a browser on a Mac has no window buttons to leave room for */

/* the guide: a ring round the real thing, the rest of the window a shade darker, and a card beside it */
#guide { position:fixed; inset:0; z-index:16; animation:fade var(--t-in) var(--ease-out); }
#guide.leaving { animation:fadeOut var(--t-out) var(--ease-in) forwards; }
.g-hole { position:absolute; border-radius:12px; box-shadow:0 0 0 1.5px var(--acc), 0 0 0 200vmax rgba(0,0,0,.14); pointer-events:none;
          transition:left var(--t-in) var(--ease-out), top var(--t-in) var(--ease-out), width var(--t-in) var(--ease-out), height var(--t-in) var(--ease-out); }
html[data-theme="dark"] .g-hole { box-shadow:0 0 0 1.5px var(--acc), 0 0 0 200vmax rgba(0,0,0,.32); }
.g-card { position:absolute; outline:0; width:340px; max-width:calc(100vw - 24px); padding:16px 18px 14px; border-radius:14px; background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow); }
.g-card.in { animation:rise8 var(--t-in) var(--ease-out); }
.g-top { display:flex; align-items:baseline; gap:12px; }
.g-card h2 { flex:1; margin:0; font-family:var(--serif); font-size:21px; font-weight:400; letter-spacing:-.01em; line-height:1.2; text-transform:none; color:var(--ink); }
.g-skip { font-size:13px; color:var(--muted); padding:2px 4px; border-radius:6px; }
.g-skip:hover { color:var(--ink); }
.g-card p { margin-top:8px; font-size:14px; line-height:1.55; color:var(--body); user-select:text; -webkit-user-select:text; }
.g-card p a, .help a { color:var(--acc-ink); text-underline-offset:2px; }
.g-foot { display:flex; align-items:center; gap:4px; margin-top:14px; }
.g-foot .ob-btn { height:34px; padding:0 14px; font-size:13.5px; }
.g-foot .ob-btn.text { padding:0 8px; }
.g-dashes { display:flex; gap:4px; }
.g-dashes i { display:block; width:16px; height:3px; border-radius:2px; background:var(--line); }
.g-dashes i.on { background:var(--acc); }
#guide :is(.ob-btn, .g-skip):focus-visible { outline:2px solid var(--faint); outline-offset:2px; border-radius:10px; }

/* a line or two in place, the first time a part of the app is met; "Got it" and it is gone for good */
.g-note { display:flex; align-items:flex-start; gap:14px; max-width:720px; margin:14px 0 4px; padding:11px 12px 11px 14px; border-radius:10px; background:var(--raise); animation:fadeUp .22s var(--ease-out); }
.g-note p { flex:1; min-width:0; font-size:13.5px; line-height:1.5; color:var(--body); }
.g-ok { flex:none; font-size:13px; font-weight:500; color:var(--acc-ink); padding:1px 4px; border-radius:6px; white-space:nowrap; }
.g-ok:hover { text-decoration:underline; text-underline-offset:2px; }
.turn .g-note { margin:10px 0 6px; }
#composer .g-note { margin:0 2px 10px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); }

/* the page */
#pad.help { padding-bottom:48px; }
.help p { font-size:14.5px; line-height:1.6; color:var(--body); max-width:600px; user-select:text; -webkit-user-select:text; }
.help p + p { margin-top:8px; }
.help p.lead { margin-top:16px; font-size:16px; color:var(--ink); }
.help .reopen { margin-top:14px; }
.help .levels { display:grid; grid-template-columns:max-content 1fr; gap:4px 18px; margin-top:10px; font-size:14px; max-width:600px; }
.help .levels dt { color:var(--ink); font-weight:500; }
.help .levels dd { color:var(--muted); }

/* New person: what a person is for, and the rest of the form behind one line */
.modal .about { margin:6px 0 4px; font-size:13px; line-height:1.5; color:var(--muted); }
.modal .more-open { display:flex; align-items:center; gap:6px; margin-top:14px; font-size:12.5px; color:var(--acc-ink); text-align:left; border-radius:6px; }
.modal .more-open:hover span { text-decoration:underline; text-underline-offset:2px; }
.modal .more-open svg { width:12px; height:12px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; flex:none; }
.modal .more:not([hidden]) { animation:fadeUp .22s var(--ease-out); }

/* People with nobody in it: the page, and the sidebar's line that adds someone */
.orbit .none.nobody { position:absolute; left:50%; top:calc(50% + 78px); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; padding:0; white-space:nowrap; }
.row.link.addp .t { color:var(--acc-ink); }

@media (max-width: 720px) {
  .g-card { padding:14px 16px 12px; }
  .g-note { flex-direction:column; gap:6px; }
  .g-ok { align-self:flex-end; }
  .help .levels { grid-template-columns:1fr; gap:0; } .help .levels dd { margin-bottom:8px; }
}
/* ================================================================ end of how Hemmingway works ===================== */
/* ===== the composer: voice notes, failures and toasts (fb/composer, 2026-09-18). One block, at the end. ===== */
/* a toast that is a sentence or two wraps; it used to be cut at the edge with "…" */
#toast { white-space:normal; text-align:center; line-height:1.4; border-radius:16px; width:max-content; max-width:min(440px, calc(100vw - 32px)); }
/* a failed turn's buttons stay on one line beside two sentences of text */
.fail button { white-space:nowrap; }
@media (max-width: 480px) { .fail { flex-wrap:wrap; } .fail span { flex-basis:calc(100% - 24px); } .fail button:first-of-type { margin-left:22px; } }

/* voice (voice.js): while a note is on, the box is the recording and holds nothing else: what is being said (a red dot,
   "Listening", the time), the level meter, Cancel and Done. Then "Writing it out…", or what went wrong, in the same place.
   The only thing that moves is the meter, and under reduce motion it steps instead of sliding (voice.js, draw). */
#box[data-voice] > :not(#voice) { display:none !important; }
#box[data-voice] { padding-left:12px; }
#voice { --v-on:var(--acc); --v-off:var(--line); flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; min-height:30px; }
#voice .v-state { order:-1; display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:500; color:var(--ink); white-space:nowrap; }
#voice .v-dot { width:8px; height:8px; border-radius:50%; background:var(--warn); flex:none; }
#voice .v-time { font-weight:400; color:var(--muted); font-variant-numeric:tabular-nums; min-width:2.3em; }
#voice .v-time.last { color:var(--warn); font-weight:500; }
#voice .v-meter { flex:1 1 110px; min-width:0; height:30px; display:block; }
#voice .v-msg { flex:1 1 200px; min-width:0; font-size:13.5px; line-height:1.45; color:var(--body); padding:4px 0; user-select:text; -webkit-user-select:text; }
#voice.v-error .v-msg { color:var(--ink); }
#voice .v-btn { flex:none; height:30px; padding:0 12px; border:1px solid var(--line); border-radius:9px; font-size:13px; font-weight:500; color:var(--body); background:var(--paper); transition:background .12s, opacity .12s; }
#voice .v-btn:not([hidden]) { margin-left:auto; } #voice .v-btn:not([hidden]) ~ .v-btn { margin-left:0; }   /* wrapped under the meter on a phone, the buttons keep to the right */
#voice .v-btn:hover { background:var(--line-soft); }
#voice .v-btn.v-go { background:var(--ink); color:var(--paper); border-color:var(--ink); }
#voice .v-btn.v-go:hover { opacity:.88; }
#voice .v-btn:focus-visible { outline:2px solid var(--acc); outline-offset:2px; border-radius:9px; }
#mic[aria-pressed="true"] { color:var(--warn); }
.v-live { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (prefers-reduced-motion: reduce) { #voice .v-btn { transition:none; } }
/* ------------------------------------------------ the quiet thinking line (thinking.js) */
/* While a reply is made its thinking is not shown. One row of a fixed height stands in for it: the mark and a word,
   pulsing slowly as one (thinking.js keeps their clock), then what it is doing. The word and the phrase are there
   twice, one copy showing, and change by a slow crossfade in place. Nothing else moves. The row is a button; opened,
   the whole thinking is under it at a size that reads (a tester: the font is "very small"). */
.think .h { display:flex; max-width:100%; height:28px; padding:0 6px; white-space:nowrap; text-align:left; }
.think .h > .ico { flex:none; }
.think .h .tk-mark, .think.open .h .tk-mark { width:15px; height:15px; flex:none; color:var(--body); transform:none; transition:none; }   /* the chevron turns; the mark does not */
.tk-line { display:grid; grid-template-columns:minmax(0, 1fr); flex:0 1 auto; min-width:0; }
.tk-copy { grid-area:1 / 1; display:flex; gap:9px; min-width:0; opacity:0; transition:opacity .5s ease; }
.tk-copy.on { opacity:1; }
.tk-word { flex:none; font-weight:500; color:var(--body); }
.tk-ph { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.tk-ph .d { color:var(--faint); margin-left:2px; }
.think:not(.live) .tk-mark, .think:not(.live) .tk-line, .think.live .tk-done { display:none; }
.think .t { font-size:14px; line-height:1.65; max-height:min(320px, 45vh); overscroll-behavior:contain; }
/* the edit pen is on every turn and hidden while a reply is made, so the reply's end draws one turn again, not all */
#main.busy .you .pen { visibility:hidden; }
@media (prefers-reduced-motion: reduce) { .tk-copy { transition:none; } }   /* and no pulse (thinking.js): the word and the phrase simply change */

/* ------------------------------------------------------ phone: the room above the keyboard (2026-09-18) */
/* app.js keeps --app-h at the room above an iPhone's keyboard and the page at the top of it. Whatever is laid over the
   page fits that room too, so a field in Settings or the welcome is never left under the keys, and a toast shows
   above them. --app-top is the little iOS sometimes holds the visible part down by; everything goes down with it. */
@media (max-width: 720px) {
  body { position:relative; top:var(--app-top, 0px); }
  .modal, body > #onboard { top:var(--app-top, 0px); bottom:auto; height:var(--app-h, 100dvh); }
  .modal .card { max-height:calc(var(--app-h, 100dvh) - 60px); }
  #sheet .card { height:min(620px, calc(var(--app-h, 100dvh) - 60px)); }
  #toast { bottom:calc(100% - var(--app-h, 100%) - var(--app-top, 0px) + 28px); }
  /* the keyboard up with little room over it (app.js, kb-short): what is being typed comes first */
  .kb-short #bar { min-height:40px; }
  .kb-short #with { display:none; }
  .kb-short #composer { padding-block:4px 8px; }
  .kb-short #fine { display:none; }   /* the keyboard up with little room: the words being typed come first */
}

/* ------------------------------------------------------------ phone: a very narrow screen (2026-09-18) */
/* Safari's page zoom at 175% leaves a 375pt iPhone 214px of width (150%: 250, 200%: 188), and the message box gave
   its words what the buttons left over: a letter a line ("W / ri / t / e", a tester with large text, 2026-09-16). Up
   to 480px the words have the box's whole width and the buttons a row of their own under them (#box wraps): the image
   and the mic to the left, the thinking level and Send to the right. Under 360px the side margins give way and
   nothing keeps a width the screen does not have; under 250px the buttons draw closer so their row stays one row. */
@media (max-width: 720px) {
  .say input { min-width:0; }
  #sheet .row:not(.s-foot) { flex-wrap:wrap; height:auto; }   /* Settings' buttons: a second line rather than past the edge */
}
@media (max-width: 480px) {
  #box { justify-content:flex-end; }
  #input { flex-basis:100%; }
  /* the first of the three that is there pushes the row to the right; the ones after it sit against it. ~ and not +,
     because any of them can be hidden and they are no longer next to each other. */
  #gauge, #wise, #think { margin-left:auto; }
  #gauge:not([hidden]) ~ #wise, #gauge:not([hidden]) ~ #think, #wise:not([hidden]) ~ #think { margin-left:0; }
}
@media (max-width: 359px) {
  #bar { padding:0 6px; }
  #pad { padding-inline:14px; }
  #composer { padding:6px 10px 12px; }
  #box { padding:6px 6px 6px 10px; gap:4px; }
  #think { padding:0 2px 0 6px; }
  #wise { padding:0 6px; }
  /* a page's name folds inside the width, even one long word */
  h1 { min-width:0; overflow-wrap:anywhere; gap:8px; }
  h1 > * { min-width:0; }
  .mark.person { font-size:clamp(20px, 8.5vw, 36px); }
  /* the drawer, never wider than the screen */
  #rail.open { width:min(236px, 100vw); }
  #rail > * { min-width:min(236px, 100vw); }
  /* a field and its button: the button under the field when both will not fit */
  .say { flex-wrap:wrap; }
  .say input { flex:1 1 9em; }
  /* menus: their words fold instead of setting the width, and what a choice is for goes under its name */
  .menu { min-width:0; }
  .menu .mnote { width:auto; max-width:230px; }
  .menu .mi { white-space:normal; flex-wrap:wrap; row-gap:0; }
  .menu .mi .s { order:3; flex-basis:100%; margin-left:0; padding-left:0; text-align:left; }
  /* Settings: choices and buttons fold onto more lines */
  .s-pane { padding-inline:14px; overflow-wrap:anywhere; }
  #sheet .row.s-foot { padding-inline:14px; }
  .seg, .acc { flex-wrap:wrap; }
  .acc .b { flex-basis:7em; }
  #sheet .row > .btn, #sheet .btn { height:auto; min-height:32px; white-space:normal; flex-shrink:1; }
}
@media (max-width: 250px) {
  #composer { padding-inline:6px; }
  #box { padding:6px; gap:2px; }
  #attach, #mic, #send, #gauge { width:28px; height:28px; }
  #think { min-height:28px; padding:0 4px; }
  #wise { min-height:28px; padding:0 4px; }
  #think svg { display:none; }
}

/* ------------------------------------------------------------ an iPhone on its side (2026-09-18) */
/* On its side an iPhone is wider than 720px, so it has the desktop's 14.5px fields: iOS zooms the page in on a field
   under 16px and leaves it zoomed, cut off at the right, after the phone is turned back. Fields are 16px on every
   touch screen. And Safari doubled the chat's words by itself there; the sizes are the page's own. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (hover: none), (pointer: coarse) { input:not(.ob-code input), textarea, select { font-size:16px !important; } }