/* ── FIRST THING ───────────────────────────────────────────────────────────── Light by default. Dark is the original and lives in settings. Same ramp as every other page: names say WHERE a value sits, never what colour it is. */ :root{ --s0:#EFEDE6; --s1:#E8E5DC; --s2:#E1DDD2; --s3:#D9D5C8; --edge:#D8D4C7; --edge2:#C6C1B1; --edge3:#B0AA98; --dim1:#63604F; --dim2:#767261; --dim3:#8A8474; --txt1:#191913; --txt2:#3A382F; --txt3:#565248; --lime:#C8E840; --lime-hi:#B7DC00; --lime-txt:#5A7300; --lime-edge:#C3D97A; --ember:#D4441C; --amber:#A9761A; --sky:#1668A8; --on-accent:#101008; --card:#f4f1e8; --card2:#e9e4d6; --ink:#16150f; --sub:#5f5c50; --line:#D8D4C7; --muted:#767261; --cobalt:#1668A8; /* tinted chips. Pale on paper, deep on night, so the text on them never has to change colour to stay legible. */ --tint:#F1EFE8; --tint2:#E9E6DD; --tint-warm:#FBF3E4; --tint-warm2:#F0E2C6; --tint-lime:#F7FADF; --tint-hot:#FCE9E9; --tint-hot2:#F4D2D2; --tint-cool:#EAF8F0; --tint-cool2:#CFE9DA; --tint-violet:#EFE9F8; --ok-txt:#14532d; --hot-txt:#8a2b2b; color-scheme:light; } :root[data-theme="dark"]{ --s0:#08080b; --s1:#0d0d13; --s2:#15151d; --s3:#1a1a24; --edge:#22222c; --edge2:#2e2e3b; --edge3:#3a3a48; --dim1:#8d8da0; --dim2:#76748a; --dim3:#4a4959; --txt1:#e8e6f0; --txt2:#c9c7d6; --txt3:#a9a7b8; --lime:#caf000; --lime-hi:#e0ff4d; --lime-txt:#caf000; --lime-edge:#3a4a1c; --ember:#ff6a45; --amber:#e0a02a; --sky:#7ad0ff; --on-accent:#101008; --card:#f4f1e8; --card2:#e9e4d6; --ink:#16150f; --sub:#5f5c50; --line:#22222c; --muted:#76748a; --cobalt:#7ad0ff; --tint:#15151d; --tint2:#1a1a24; --tint-warm:#241d12; --tint-warm2:#3a2f1a; --tint-lime:#1d2410; --tint-hot:#2a1618; --tint-hot2:#3d2024; --tint-cool:#12261c; --tint-cool2:#1d3d2c; --tint-violet:#221c3a; --ok-txt:#7fd6a0; --hot-txt:#ff9b9b; color-scheme:dark; } #view-auth #ptr{position:fixed;top:0;left:0;right:0;height:0;overflow:hidden;z-index:60; display:flex;align-items:flex-end;justify-content:center;pointer-events:none; transition:height .18s ease} #view-auth #ptr.drag{transition:none} #view-auth #ptr i{display:block;width:26px;height:26px;margin-bottom:7px;border-radius:50%; border:2px solid var(--line);border-top-color:var(--cobalt); transform:rotate(0deg);transition:transform .1s linear} #view-auth #ptr.go i{animation:ptrspin .7s linear infinite;border-top-color:var(--cobalt)} @keyframes ptrspin{to{transform:rotate(360deg)}} #view-auth .rfr{background:none;border:0;cursor:pointer;color:var(--muted);font-size:13px; padding:2px 5px;line-height:1;border-radius:100px} #view-auth .rfr:hover{color:var(--ink)} #view-auth .rfr.spin{animation:ptrspin .7s linear infinite} #view-auth *{box-sizing:border-box;margin:0;padding:0} html.v-auth{-webkit-text-size-adjust:100%} body.v-auth{background:var(--s0);color:var(--txt1); font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; padding:34px 22px 120px;line-height:1.45} #view-auth a{color:inherit} #view-auth .wrap{max-width:1180px;margin:0 auto} #view-auth header{margin-bottom:26px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} #view-auth h1{font-size:30px;letter-spacing:-.03em;font-weight:700} #view-auth h1 em{font-style:normal;background:var(--lime);color:var(--on-accent);padding:0 8px;border-radius:3px} #view-auth .sub{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;color:var(--dim)} #view-auth .back{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:11px; text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px} #view-auth h2{font-size:13px;font-family:"JetBrains Mono",monospace;font-weight:400;color:var(--dim); text-transform:uppercase;letter-spacing:.14em;margin:38px 0 14px; display:flex;align-items:center;gap:10px} #view-auth h2 b{color:var(--ink);font-weight:700} #view-auth h2 .ln{flex:1;height:1px;background:var(--line)} #view-auth .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px} #view-auth .it{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px; padding:0 0 14px;overflow:hidden;display:flex;flex-direction:column; transition:box-shadow .18s,transform .18s} #view-auth .it:hover{box-shadow:0 14px 30px -18px rgba(14,13,9,.5);transform:translateY(-2px)} #view-auth .band{height:5px;background:var(--c)} #view-auth .img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--tint)} #view-auth .noimg{width:100%;aspect-ratio:16/10;background: repeating-linear-gradient(135deg,var(--tint) 0 9px,var(--tint2) 9px 18px); display:flex;align-items:center;justify-content:center; font-family:"JetBrains Mono",monospace;font-size:9.5px;color:var(--dim1);letter-spacing:.1em} #view-auth .pad{padding:13px 15px 0;display:flex;flex-direction:column;flex:1} #view-auth .cat{font-family:"JetBrains Mono",monospace;font-size:8.5px;text-transform:uppercase; letter-spacing:.13em;color:var(--c);font-weight:700} #view-auth .ttl{font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.28;margin:5px 0 0} #view-auth .q{font-size:12.5px;line-height:1.5;color:var(--dim2);margin-top:8px;font-style:italic; border-left:2px solid var(--c);padding-left:9px} #view-auth .why{font-size:12.5px;line-height:1.5;color:var(--dim2);margin-top:8px} #view-auth .note{font-size:11.5px;line-height:1.5;color:var(--dim);margin-top:7px} #view-auth .foot{margin-top:auto;padding-top:11px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} #view-auth .lnk{font-family:"JetBrains Mono",monospace;font-size:10px;text-decoration:none; border:1px solid var(--line);border-radius:100px;padding:4px 10px;color:var(--dim)} #view-auth .lnk:hover{border-color:var(--c);color:var(--c)} #view-auth .tag{font-family:"JetBrains Mono",monospace;font-size:8.5px;letter-spacing:.09em; text-transform:uppercase;padding:3px 8px;border-radius:100px;background:var(--tint);color:var(--dim)} #view-auth .tag.cap{background:var(--lime);color:var(--on-accent);font-weight:700} #view-auth .tag.t3{background:var(--tint-violet);color:#7a44ff} /* ---- filters and collapse ---- Coloured chips that match the card bands, a count on each, and a section head that folds. Nothing here changes the data — it only decides what is on screen, so there is no state worth persisting beyond convenience. */ #view-auth .bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 8px} #view-auth .chip{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.04em; border:1px solid var(--line);background:var(--card);color:var(--dim);border-radius:100px; padding:5px 11px;cursor:pointer;transition:.14s;display:inline-flex;gap:6px;align-items:center} #view-auth .chip b{font-weight:700} /* every pill wears the colour of the thing it filters for — the same colour as that category's band on the card */ #view-auth .chip{border-left:3px solid var(--cc,var(--line))} #view-auth .chip b{color:var(--cc,var(--dim))} #view-auth .chip:hover{border-color:var(--cc,var(--on-accent));color:var(--cc,var(--on-accent))} #view-auth .chip.on{background:var(--cc,var(--txt1));border-color:var(--cc,var(--txt1));color:var(--s0)} #view-auth .chip.on b{color:var(--on-accent)} #view-auth .chip.on b{color:var(--on-accent)} #view-auth .chip.flag.on{background:var(--lime);border-color:var(--lime-hi);color:var(--on-accent)} /* the read pills carry the same colour they mean on the card, so the bar reads at a glance rather than as seven identical grey lozenges */ #view-auth .chip.r-warm{--cc:#0f9d58} #view-auth .chip.r-tight{--cc:var(--ember)} #view-auth .chip.r-flat{--cc:var(--dim2)} #view-auth .chip.r-boring{--cc:var(--sky)} #view-auth .chip.r-unread{--cc:#9a9486} #view-auth .chip.r-cand{--cc:var(--on-accent)} #view-auth .chip.r-wild{--cc:#7c3aed} #view-auth .chip.r-cap{--cc:#b8860b} #view-auth .chip.flag{border-left:3px solid var(--cc,var(--line))} #view-auth .chip.flag.on{background:var(--cc,var(--txt1));border-color:var(--cc,var(--txt1));color:var(--s0)} #view-auth .chip.flag.on b{color:var(--on-accent)} #view-auth .bar .sp{flex:1} #view-auth .tool{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--dim); background:none;border:0;cursor:pointer;padding:5px 8px;border-bottom:1px solid var(--line)} #view-auth .tool:hover{color:var(--ink);border-color:var(--ink)} #view-auth h2{cursor:pointer;user-select:none} #view-auth h2 .cv{display:inline-block;font-size:9px;transition:transform .18s;color:var(--dim)} #view-auth h2.shut .cv{transform:rotate(-90deg)} #view-auth .grid.shut{display:none} #view-auth .nores{padding:40px 0;text-align:center;color:var(--dim); font-family:"JetBrains Mono",monospace;font-size:12px} #view-auth .reads{display:flex;gap:5px;margin-top:11px;flex-wrap:wrap} #view-auth .reads button{flex:1;min-width:58px;font-family:"JetBrains Mono",monospace;font-size:9.5px; padding:6px 3px;border:1px solid var(--line);border-radius:8px;background:var(--card); color:var(--dim);cursor:pointer;transition:.14s} #view-auth .reads button:hover{border-color:var(--c);color:var(--c)} #view-auth .reads button.on{background:var(--lime);border-color:var(--ink);color:var(--on-accent);font-weight:700} #view-auth .said{font-family:"JetBrains Mono",monospace;font-size:9px;color:var(--dim);margin-top:7px} /* The comment button sits ON the card, not in the kebab menu. Learned the hard way on the board this came from: 43 comments left in one morning through a two-tap menu, which meant the box used most was the hardest one to reach. Same panel as edit, opened straight onto the textarea. */ #view-auth .say{margin-top:8px;display:flex} #view-auth .say button{flex:1;font-family:"JetBrains Mono",monospace;font-size:10px;padding:7px 6px; border:1px dashed var(--line);border-radius:8px;background:transparent;color:var(--dim); cursor:pointer;transition:.14s;letter-spacing:.04em} #view-auth .say button:hover{border-style:solid;border-color:var(--c);color:var(--c);background:var(--card)} #view-auth .ed.only input{display:none} #view-auth .gen-wrap{margin-left:auto} #view-auth .gen{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.04em; padding:7px 14px;border-radius:100px;border:1.5px solid var(--ink); background:var(--ink);color:var(--paper);cursor:pointer;transition:.14s} #view-auth .gen:hover{background:var(--lime);color:var(--ink)} #view-auth .gen.off{background:transparent;color:var(--dim);border-color:var(--line);cursor:default} #view-auth .gen.busy{background:transparent;color:var(--dim);border-style:dashed;cursor:default} #view-auth .gen-wrap{display:flex;align-items:center;gap:9px} #view-auth .nudge{font-family:"JetBrains Mono",monospace;font-size:11.5px;line-height:1.65; background:var(--tint-lime);border:1px solid var(--txt2);border-radius:12px; padding:12px 15px;margin:0 0 18px;color:var(--txt3);display:flex;gap:12px; align-items:flex-start} #view-auth .nudge b{color:#2c2b14;font-weight:400} #view-auth .nudge code{background:var(--card);border:1px solid var(--txt2);border-radius:4px;padding:1px 6px} #view-auth .nudge button{margin-left:auto;background:none;border:0;color:var(--dim1);font-size:16px; cursor:pointer;line-height:1;padding:0 2px} #view-auth .nudge button:hover{color:var(--dim3)} #view-auth .nudge .go{margin-left:0;background:var(--ink);color:var(--paper);border-radius:100px; padding:5px 13px;font-size:11px;font-family:inherit} #view-auth .nudge .go:hover{background:var(--lime);color:var(--ink)} /* the feedback panel */ #view-auth #fbwrap{position:fixed;inset:0;background:rgba(14,13,9,.42);z-index:80; display:none;align-items:flex-start;justify-content:center;padding:40px 20px; overflow-y:auto} #view-auth #fbwrap.on{display:flex} #view-auth #fb{background:var(--paper);border-radius:18px;max-width:680px;width:100%; padding:30px 32px 26px;box-shadow:0 30px 70px -30px rgba(14,13,9,.7)} #view-auth #fb h3{font-size:22px;letter-spacing:-.025em;margin-bottom:7px} #view-auth #fb .lede{font-size:13.5px;color:var(--dim);line-height:1.55;margin-bottom:8px} #view-auth #fb .promise{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--txt3); background:var(--tint-lime);border:1px solid var(--txt2);border-radius:9px;padding:9px 12px; margin-bottom:20px;line-height:1.6} #view-auth #fb .fq{font-size:14.5px;font-weight:600;margin:19px 0 7px;line-height:1.35} #view-auth #fb textarea{width:100%;padding:11px 13px;font-size:14px;font-family:inherit; line-height:1.5;border:1px solid var(--line);border-radius:11px;background:var(--card); min-height:74px;resize:vertical} #view-auth #fb textarea:focus{outline:none;border-color:var(--ink)} #view-auth #fb .opt{margin-top:20px;font-size:12.5px;color:var(--dim);display:flex;gap:9px; align-items:flex-start;line-height:1.5} #view-auth #fb .opt input{margin-top:3px} #view-auth #fb .btns{margin-top:20px;display:flex;gap:9px;align-items:center} #view-auth #fb .btns button{font-family:"JetBrains Mono",monospace;font-size:12px;padding:11px 20px; border-radius:100px;border:1.5px solid var(--ink);background:var(--ink); color:var(--paper);cursor:pointer} #view-auth #fb .btns button:hover{background:var(--lime);color:var(--ink)} #view-auth #fb .btns button.ghost{background:transparent;color:var(--dim);border-color:var(--line)} #view-auth #fb pre{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px; font-size:11.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word; max-height:340px;overflow-y:auto;margin-top:16px} #view-auth .who{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--dim); display:flex;align-items:center;gap:5px} #view-auth .ag{font-family:"JetBrains Mono",monospace;font-size:10px;padding:4px 9px; border-radius:100px;border:1px solid var(--line);background:var(--card);color:var(--dim); cursor:pointer;transition:.14s} #view-auth .ag:hover{border-color:var(--ink);color:var(--ink)} #view-auth .ag.on{background:var(--ink);border-color:var(--ink);color:var(--paper)} #view-auth .yn{display:flex;gap:7px;margin-top:12px} #view-auth .yn button{flex:1;font-family:"JetBrains Mono",monospace;font-size:11px;padding:9px 6px; border-radius:9px;cursor:pointer;border:1.5px solid var(--ink);transition:.14s} #view-auth .yn .yes{background:var(--ink);color:var(--paper)} #view-auth .rsn.yes .go{background:var(--ink);color:var(--paper);border-color:var(--ink)} #view-auth .yn .yes:hover{background:var(--sky);border-color:var(--sky)} #view-auth .yn .no{background:transparent;color:var(--dim);border-color:var(--line)} #view-auth .yn .no:hover{border-color:var(--ember);color:var(--ember)} #view-auth .it.gone{opacity:.32} /* the smaller version. the rule for tight: the answer is not a lesser want, it is a first move in the same direction. */ #view-auth .step{margin-top:9px;padding:8px 10px;border-radius:9px;background:var(--tint-cool); border:1px solid var(--tint-cool2);font-size:12.5px;line-height:1.45;color:var(--ok-txt)} #view-auth .step b{display:block;font-family:"JetBrains Mono",monospace;font-size:8.5px; letter-spacing:.1em;text-transform:uppercase;opacity:.65;margin-bottom:3px} #view-auth .step a{color:var(--ok-txt)} /* a body read asks WHY, the same as a decline does. tight is the one that matters — the answer to tight is something SMALLER in the same direction, and only you can say which direction. */ #view-auth .rwhy{margin-top:8px;display:none} #view-auth .rwhy.on{display:block} #view-auth .rwhy textarea{width:100%;font-family:"Inter",sans-serif;font-size:13px;padding:7px 9px; border:1.5px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink); resize:vertical;min-height:32px} #view-auth .rwhy textarea:focus{outline:0;border-color:var(--c)} #view-auth .rwhy .rb{display:flex;gap:6px;margin-top:5px} #view-auth .rwhy button{flex:1;font-family:"JetBrains Mono",monospace;font-size:10px;padding:6px 5px; border-radius:8px;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--dim)} #view-auth .rwhy .go{background:var(--c);border-color:var(--c);color:var(--on-accent)} #view-auth .rwhy .hint{font-family:"JetBrains Mono",monospace;font-size:9.5px;color:var(--dim); margin-bottom:4px;display:block} /* ---- card styles ---- The canvas view was scrapped: it was not liked, and a spatial layout of 110 things is a picture of nothing anyway. These are the same list, at three densities. GALLERY is the one closest to an actual vision board — pictures big, words out of the way, because that is what a vision board is for. */ body.v-auth.compact .grid{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:10px} body.v-auth.compact .it{border-radius:11px} body.v-auth.compact .img, body.v-auth.compact .noimg{aspect-ratio:3/2} body.v-auth.compact .pad{padding:9px 10px 0} body.v-auth.compact .ttl{font-size:13px;line-height:1.25} body.v-auth.compact .cat{font-size:8px} body.v-auth.compact .q, body.v-auth.compact .why, body.v-auth.compact .note, body.v-auth.compact .said, body.v-auth.compact .fac, body.v-auth.compact .rel, body.v-auth.compact .repl, body.v-auth.compact .cmts, body.v-auth.compact .lnk{display:none} body.v-auth.compact .reads button{font-size:8.5px;min-width:0;padding:5px 2px} body.v-auth.compact .foot{padding-top:8px} /* a card that folded several in keeps every sentence, as qualities of the one thing */ #view-auth .fac{margin-top:9px;padding-left:11px;border-left:2px solid var(--c); font-size:12.5px;line-height:1.5;color:var(--dim2)} #view-auth .fac div{margin-bottom:5px} #view-auth .fac div:last-child{margin-bottom:0} /* superseded. kept and shown, because WHICH thing replaced WHICH is the most useful history this board has — the Jimny is the precedent. dimmed, small, and out of the way, but never deleted. */ #view-auth #retired .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:11px} #view-auth #retired .it{opacity:.5} #view-auth #retired .it:hover{opacity:1} #view-auth #retired .img, #view-auth #retired .noimg{aspect-ratio:16/7} #view-auth #retired .ttl{font-size:13.5px;text-decoration:line-through;text-decoration-thickness:1px} #view-auth .repl{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--amber); background:var(--tint-warm);border-radius:7px;padding:5px 8px;margin-top:7px;line-height:1.45} #view-auth .repl a{color:var(--amber)} #view-auth .lad{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.08em; text-transform:uppercase;color:#5b6478;background:var(--tint);border-radius:100px; padding:2px 8px} /* overlaps. surfaced rather than merged, because which of two near-identical wants survives is your call and not the board's. */ #view-auth .rel{margin-top:9px;font-size:11.5px;line-height:1.45;color:var(--amber); background:var(--tint-warm);border:1px solid var(--tint-warm2);border-radius:9px;padding:7px 9px} #view-auth .rel b{color:#5c3608} #view-auth .rel a{color:var(--amber);text-decoration:underline;text-decoration-color:var(--tint-warm2)} #view-auth .rel.dupe{background:var(--tint-hot);border-color:var(--tint-hot2);color:var(--hot-txt)} #view-auth .rel.dupe b, #view-auth .rel.dupe a{color:var(--hot-txt)} /* scrapping something already on the board — same reason box as a decline */ #view-auth .scr{margin-top:10px;display:none} #view-auth .scr.on{display:block} #view-auth .scr textarea{width:100%;font-family:"Inter",sans-serif;font-size:13px;padding:8px 10px; border:1.5px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink); resize:vertical;min-height:34px} #view-auth .scr textarea:focus{outline:0;border-color:var(--ember)} #view-auth .scr .rb{display:flex;gap:6px;margin-top:6px} #view-auth .scr button{flex:1;font-family:"JetBrains Mono",monospace;font-size:10.5px;padding:7px 6px; border-radius:8px;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--dim)} #view-auth .scr .go{background:var(--ember);border-color:var(--ember);color:var(--on-accent)} /* "not mine" asks why. one line, skippable, and it is the only thing that can stop the same shape of item being proposed at you again. */ #view-auth .rsn{margin-top:10px;display:none} #view-auth .rsn.on{display:block} #view-auth .rsn textarea{width:100%;font-family:"Inter",sans-serif;font-size:13px;padding:8px 10px; border:1.5px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink); resize:vertical;min-height:34px} #view-auth .rsn textarea:focus{outline:0;border-color:var(--ember)} #view-auth .rsn .rb{display:flex;gap:6px;margin-top:6px} #view-auth .rsn button{flex:1;font-family:"JetBrains Mono",monospace;font-size:10.5px;padding:7px 6px; border-radius:8px;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--dim)} #view-auth .rsn .go{background:var(--ember);border-color:var(--ember);color:var(--on-accent)} /* the quiet control. the page is to be looked at, not operated, so the dots sit faint on the card and only come up under the cursor. */ #view-auth .dots{position:absolute;top:13px;right:11px;z-index:3;width:27px;height:27px;padding:0; border-radius:100px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#57534a;font-size:14px; line-height:1;cursor:pointer;opacity:.5;transition:.15s;display:flex; align-items:center;justify-content:center} #view-auth .it:hover .dots{opacity:1} #view-auth .dots:hover{background:var(--card);color:var(--ink)} #view-auth .pop{position:absolute;top:44px;right:11px;z-index:6;display:none;min-width:136px; background:var(--card);border:1px solid var(--line);border-radius:11px;padding:5px; box-shadow:0 16px 34px -14px rgba(14,13,9,.45)} #view-auth .pop.on{display:block} #view-auth .pop button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer; font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--dim2); padding:7px 9px;border-radius:7px} #view-auth .pop button:hover{background:var(--tint);color:var(--txt1)} #view-auth .pop button.dec:hover{color:var(--ember)} #view-auth .ed{margin-top:11px;display:none;flex-direction:column;gap:7px} #view-auth .ed.on{display:flex} #view-auth .ed input, #view-auth .ed textarea{width:100%;font-family:inherit;font-size:13px;color:var(--ink); background:var(--card);border:1px solid var(--line);border-radius:9px;padding:8px 9px} #view-auth .ed textarea{font-size:12.5px;min-height:64px;line-height:1.45;resize:vertical} #view-auth .ed input:focus, #view-auth .ed textarea:focus{outline:none;border-color:var(--c)} #view-auth .edb{display:flex;gap:7px} #view-auth .edb button{flex:1;font-family:"JetBrains Mono",monospace;font-size:10.5px;padding:8px 6px; border-radius:9px;cursor:pointer;border:1.5px solid var(--ink)} #view-auth .edb .sv{background:var(--ink);color:var(--paper)} #view-auth .edb .sv:hover{background:var(--sky);border-color:var(--sky)} #view-auth .edb .cn{background:transparent;color:var(--dim);border-color:var(--line)} /* what you said about the item, waiting for a session to act on it */ #view-auth .cmt{font-size:12px;line-height:1.5;color:var(--dim2);margin-top:8px; background:var(--tint);border-radius:9px;padding:8px 10px} #view-auth .cmt b{display:block;margin-bottom:3px;font-family:"JetBrains Mono",monospace;font-size:8.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:400} /* landed. achieved, not removed — full colour, full picture, nothing dimmed, and nothing anywhere counts them. */ #view-auth .tag.done{background:var(--lime);color:var(--on-accent);font-weight:700} #view-auth .it.done .band{height:9px} #view-auth .it.done .ttl::before{content:"\2713\00a0";color:#0f9d58} #view-auth #landed{display:none} #view-auth #landed.on{display:block} #view-auth .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%); background:var(--ink);color:var(--paper);font-family:"JetBrains Mono",monospace; font-size:11.5px;padding:10px 16px;border-radius:100px;opacity:0; transition:opacity .2s;pointer-events:none;z-index:50} #view-auth .toast.on{opacity:1} #view-auth .ro{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ember); background:var(--tint-warm);border:1px solid var(--tint-warm2);border-radius:10px;padding:9px 13px;margin-bottom:18px} @media(max-width:640px){body.v-auth{padding:22px 14px 90px}#view-auth h1{font-size:24px}#view-auth .grid{gap:12px}} /* ─── the interview ─── */ body.v-auth{background:var(--s0);color:var(--txt1);min-height:100dvh; font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; line-height:1.45;display:flex;flex-direction:column} /* the thin progress line, top of the window. deliberately not a percentage and not a "6 of 33" badge in the corner — a number that big, that early, reads as a chore. the line just quietly fills. */ #view-auth #bar{position:fixed;top:0;left:0;height:2px;background:var(--lime);width:0; transition:width .3s ease;z-index:50} #view-auth .hd{padding:26px 30px 0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} #view-auth h1{font-size:19px;letter-spacing:-.03em;font-weight:700} #view-auth h1 em{font-style:normal;background:var(--lime);color:var(--on-accent);padding:0 7px;border-radius:3px} #view-auth .sec{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--dim); text-transform:uppercase;letter-spacing:.14em;margin-left:auto} #view-auth main{flex:1;display:flex;align-items:center;justify-content:center;padding:30px 24px 40px} #view-auth .card{width:100%;max-width:660px} #view-auth .blurb{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--dim); letter-spacing:.03em;margin-bottom:22px;padding-bottom:14px; border-bottom:1px solid var(--line)} #view-auth .q{font-size:27px;font-weight:600;letter-spacing:-.025em;line-height:1.25} #view-auth .hint{font-size:13.5px;color:var(--dim);margin-top:11px;line-height:1.5} #view-auth textarea, #view-auth input.one{width:100%;margin-top:20px;padding:15px 17px;font-size:16px; font-family:inherit;line-height:1.5;border:1px solid var(--line);border-radius:13px; background:var(--card);color:var(--ink);resize:vertical} #view-auth textarea:focus, #view-auth input.one:focus{outline:none;border-color:var(--ink)} #view-auth textarea{min-height:150px} #view-auth textarea.big{min-height:230px} #view-auth .row{margin-top:16px;display:flex;align-items:center;gap:10px} #view-auth button{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.04em; padding:11px 20px;border-radius:100px;cursor:pointer;border:1.5px solid var(--ink); background:var(--ink);color:var(--paper);transition:.14s} #view-auth button:hover{background:var(--lime);color:var(--ink)} #view-auth button.ghost{background:transparent;color:var(--dim);border-color:var(--line)} #view-auth button.ghost:hover{background:transparent;color:var(--ink);border-color:var(--ink)} #view-auth .count{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--dim)} #view-auth .kbd{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--dim); margin-top:16px;letter-spacing:.03em} #view-auth .kbd b{color:var(--ink);font-weight:400;border:1px solid var(--line);border-radius:4px; padding:1px 5px;background:var(--card)} /* the last screen */ #view-auth .done .q{font-size:31px} #view-auth .done .hint{font-size:15px;margin-top:16px} #view-auth .big-btn{margin-top:26px;font-size:14px;padding:15px 28px} #view-auth .warn{margin-top:20px;font-family:"JetBrains Mono",monospace;font-size:11px; color:var(--ember);background:var(--tint-warm);border:1px solid var(--tint-warm2);border-radius:11px; padding:13px 15px;line-height:1.6} #view-auth .warn code{background:var(--card);padding:1px 6px;border-radius:4px;border:1px solid var(--tint-warm2)} #view-auth .stage{margin-top:22px;font-family:"JetBrains Mono",monospace;font-size:12px; color:var(--dim)} #view-auth .stage b{color:var(--ink);font-weight:400} #view-auth .who{margin-top:22px;font-family:"JetBrains Mono",monospace;font-size:11px; color:var(--dim);display:flex;align-items:center;gap:7px;flex-wrap:wrap} #view-auth .who b{color:var(--ink);font-weight:400} #view-auth .ag{font-family:"JetBrains Mono",monospace;font-size:11px;padding:5px 12px; border-radius:100px;border:1px solid var(--line);background:var(--card);color:var(--dim)} #view-auth .ag:hover{border-color:var(--ink);color:var(--ink);background:var(--card)} #view-auth .ag.on{background:var(--ink);border-color:var(--ink);color:var(--paper)} /* ─── auth ─── */ #view-auth .auth{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px} #view-auth .authbox{width:100%;max-width:360px} #view-auth .authbox h1{font-size:28px;margin-bottom:6px} #view-auth .authbox .sub2{font-size:13.5px;color:var(--dim);margin-bottom:24px;line-height:1.5} #view-auth .authbox label{display:block;font-family:"JetBrains Mono",monospace;font-size:10.5px; text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin:14px 0 5px} #view-auth .authbox input{width:100%;padding:12px 14px;font-size:16px;font-family:inherit; border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--ink)} #view-auth .authbox input:focus{outline:none;border-color:var(--ink)} #view-auth .authbox button.primary{width:100%;margin-top:20px;padding:13px;font-size:15px; font-weight:600;border:0;border-radius:11px;background:var(--ink);color:var(--paper); cursor:pointer;font-family:inherit} #view-auth .authbox button.primary:hover{background:var(--lime);color:var(--ink)} #view-auth .authbox button.primary:disabled{opacity:.5;cursor:default} #view-auth .authbox .swap{margin-top:16px;font-size:13px;color:var(--dim);text-align:center} #view-auth .authbox .swap a{cursor:pointer;border-bottom:1px solid var(--line)} #view-auth .authbox .err{margin-top:14px;font-size:13px;color:var(--ember);background:var(--tint-warm); border:1px solid var(--tint-warm2);border-radius:10px;padding:11px 13px;line-height:1.5} #view-auth .hide{display:none!important} /* the category picker and the per-day dial */ #view-auth .catgrid{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} #view-auth .cat{font-family:"JetBrains Mono",monospace;font-size:12px;padding:8px 14px; border-radius:100px;border:1px solid var(--line);background:var(--card);color:var(--dim); cursor:pointer;transition:.14s;border-left:3px solid var(--cc,var(--line))} #view-auth .cat:hover{border-color:var(--ink);color:var(--ink)} #view-auth .cat.on{background:var(--cc,var(--txt1));border-color:var(--cc,var(--txt1));color:var(--s0)} #view-auth .cat.add{border-style:dashed;border-left-style:dashed} #view-auth .dial{display:flex;gap:6px;margin-top:24px;flex-wrap:wrap} #view-auth .pip{width:44px;height:44px;border-radius:12px;border:1px solid var(--line); background:var(--card);color:var(--dim);font-family:"JetBrains Mono",monospace; font-size:14px;cursor:pointer;transition:.14s} #view-auth .pip:hover{border-color:var(--ink);color:var(--ink)} #view-auth .pip.on{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:700} #view-auth .dialnote{margin-top:12px;font-size:13px;color:var(--dim);min-height:20px} /* ═══ THE INTERVIEW, reskinned to the deck ═══════════════════════════════ */ /* ⛔ WAS `--edge2:var(--edge2)`, which is a custom property referring to itself. That is invalid at computed-value time: the declaration is thrown away and the property falls back to whatever it inherits, silently. The tokenising sweep produced it by rewriting a hex INSIDE the block that defines the token. Only --void needs aliasing here. */ :root{--void:var(--s0)} #view-auth #screen-interview{background:var(--void);color:var(--txt1);min-height:100dvh; display:flex;flex-direction:column; font-family:"JetBrains Mono",ui-monospace,monospace} #view-auth #screen-interview::before{content:"";position:fixed;inset:0;pointer-events:none; z-index:0;background:radial-gradient(120% 70% at 50% -8%,var(--s3) 0%,rgba(27,27,36,0) 62%)} #view-auth #screen-interview > *{position:relative;z-index:1} #view-auth #bar{position:fixed;top:0;left:0;height:2px;background:var(--lime);width:0; transition:width .35s ease;z-index:50} #view-auth #screen-interview .hd{padding:24px 28px 0;display:flex;align-items:baseline;gap:14px} #view-auth #screen-interview .hd h1{font-family:Fraunces,Georgia,serif;font-size:18px;font-weight:600; letter-spacing:-.015em;font-variation-settings:"SOFT" 40,"WONK" 1;color:var(--txt1)} #view-auth #screen-interview .hd h1 em{font-style:normal;background:none;color:var(--lime-txt);padding:0} #view-auth #screen-interview .sec{margin-left:auto;font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--dim2)} #view-auth #screen-interview main{flex:1;display:flex;align-items:center;justify-content:center; padding:28px 22px 44px} /* the question, on a card */ #view-auth #screen-interview .card{width:100%;max-width:560px;background:linear-gradient(180deg,var(--s2),var(--s1)); border:1px solid var(--edge2);border-radius:22px;padding:26px 26px 24px; box-shadow:0 30px 70px -34px #000} #view-auth #screen-interview .card.done{background:none;border:0;box-shadow:none;text-align:center} #view-auth #screen-interview .blurb{font-size:10.5px;letter-spacing:.05em;color:var(--dim2); margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--edge)} #view-auth #screen-interview .q{font-family:Fraunces,Georgia,serif;font-size:25px;line-height:1.22; letter-spacing:-.02em;font-weight:500;color:var(--txt1); font-variation-settings:"SOFT" 30,"WONK" 1;text-wrap:balance} #view-auth #screen-interview .hint{font-size:12.5px;color:var(--dim2);margin-top:11px;line-height:1.6} #view-auth #screen-interview textarea, #view-auth #screen-interview input.one{width:100%;margin-top:18px; padding:14px 16px;font-size:15px;font-family:"JetBrains Mono",monospace;line-height:1.55; border:1px solid var(--edge2);border-radius:13px;background:var(--s0);color:var(--txt1);resize:vertical} #view-auth #screen-interview textarea:focus, #view-auth #screen-interview input.one:focus{outline:none; border-color:var(--lime-txt)} #view-auth #screen-interview textarea{min-height:130px} #view-auth #screen-interview textarea.big{min-height:190px} #view-auth #screen-interview .row{margin-top:16px;display:flex;align-items:center;gap:9px} #view-auth #screen-interview .row button{font-family:"JetBrains Mono",monospace;font-size:12px; letter-spacing:.05em;padding:11px 20px;border-radius:100px;cursor:pointer; border:1.5px solid var(--lime);background:var(--lime);color:var(--on-accent);font-weight:700; transition:.14s} #view-auth #screen-interview .row button:hover{background:var(--lime-hi);border-color:var(--lime-hi)} #view-auth #screen-interview .row button.ghost{background:transparent;color:var(--dim2); border:1px solid var(--edge2);font-weight:400} #view-auth #screen-interview .row button.ghost:hover{border-color:var(--dim3);color:var(--txt2)} #view-auth #screen-interview .count{margin-left:auto;font-size:11px;color:var(--dim2); font-variant-numeric:tabular-nums} #view-auth #screen-interview .kbd{margin-top:14px;font-size:10px;color:var(--dim3);letter-spacing:.04em} #view-auth #screen-interview .kbd b{color:var(--dim1);font-weight:400;border:1px solid var(--edge2); border-radius:4px;padding:1px 5px;background:var(--s2)} /* the pickers */ #view-auth #screen-interview .catgrid{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px} #view-auth #screen-interview .cat{font-family:"JetBrains Mono",monospace;font-size:11.5px; padding:8px 14px;border-radius:100px;border:1px solid var(--edge2);background:var(--s2); color:var(--txt3);cursor:pointer;transition:.14s;border-left:3px solid var(--cc,var(--edge2))} #view-auth #screen-interview .cat:hover{border-color:var(--dim3);color:var(--txt1)} #view-auth #screen-interview .cat.on{background:var(--cc,var(--lime));border-color:var(--cc,var(--lime)); color:var(--on-accent);font-weight:700} #view-auth #screen-interview .cat.add{border-style:dashed;border-left-style:dashed} #view-auth #screen-interview .dial{display:flex;gap:6px;margin-top:22px;flex-wrap:wrap} #view-auth #screen-interview .pip{width:42px;height:42px;border-radius:12px;border:1px solid var(--edge2); background:var(--s2);color:var(--dim2);font-family:"JetBrains Mono",monospace;font-size:13px; cursor:pointer;transition:.14s} #view-auth #screen-interview .pip:hover{border-color:var(--dim3);color:var(--txt1)} #view-auth #screen-interview .pip.on{background:var(--lime);border-color:var(--lime-txt);color:var(--on-accent); font-weight:700} #view-auth #screen-interview .dialnote{margin-top:12px;font-size:12px;color:var(--dim2);min-height:19px} /* the last screen */ #view-auth #screen-interview .done .q{font-size:29px} #view-auth #screen-interview .big-btn{margin-top:24px;padding:15px 30px;border-radius:100px; background:var(--lime);border:0;color:var(--on-accent);font-family:"JetBrains Mono",monospace; font-size:14px;font-weight:700;cursor:pointer} #view-auth #screen-interview .big-btn:disabled{background:var(--s3);color:var(--dim2);cursor:default} #view-auth #screen-interview .stage{margin-top:14px;font-size:12px;color:var(--dim2); font-variant-numeric:tabular-nums} /* ═══ ONE PALETTE, EVERYWHERE ════════════════════════════════════════════ */ :root{--void:var(--s0)} html.v-auth, body.v-auth{background:var(--s0)} body.v-auth{background:var(--s0);color:var(--txt1); font-family:"JetBrains Mono",ui-monospace,monospace} /* ─── sign in / sign up ─── */ #view-auth .auth{min-height:100dvh;display:flex;align-items:center;justify-content:center; padding:26px;background:var(--s0);position:relative} #view-auth .auth::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background:radial-gradient(120% 70% at 50% -8%,var(--s3) 0%,rgba(27,27,36,0) 62%)} #view-auth .authbox{width:100%;max-width:390px;position:relative;z-index:1; background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--edge2); border-radius:22px;padding:30px 28px 26px;box-shadow:0 30px 70px -34px #000} #view-auth .authbox h1{font-family:Fraunces,Georgia,serif;font-size:25px;font-weight:600; letter-spacing:-.02em;font-variation-settings:"SOFT" 40,"WONK" 1;color:var(--txt1); margin-bottom:7px} #view-auth .authbox h1 em{font-style:normal;background:none;padding:0;color:var(--lime-txt)} #view-auth .authbox .sub2{font-size:12.5px;color:var(--dim2);margin-bottom:22px;line-height:1.6} #view-auth .authbox label{display:block;font-family:"JetBrains Mono",monospace;font-size:9.5px; text-transform:uppercase;letter-spacing:.16em;color:var(--dim2);margin:15px 0 6px} #view-auth .authbox input{width:100%;padding:12px 15px;font-size:15px; font-family:"JetBrains Mono",monospace;border:1px solid var(--edge2);border-radius:12px; background:var(--s0);color:var(--txt1)} #view-auth .authbox input:focus{outline:none;border-color:var(--lime-txt)} #view-auth .authbox button.primary{width:100%;margin-top:22px;padding:14px;font-size:14px; font-weight:700;border:0;border-radius:100px;background:var(--lime);color:var(--on-accent); cursor:pointer;font-family:"JetBrains Mono",monospace;letter-spacing:.04em; transition:.14s} #view-auth .authbox button.primary:hover{background:var(--lime-hi)} #view-auth .authbox button.primary:disabled{background:var(--s3);color:var(--dim2);cursor:default} #view-auth .authbox .swap{margin-top:18px;font-size:12px;color:var(--dim2);text-align:center} #view-auth .authbox .swap a{cursor:pointer;color:var(--txt2);border-bottom:1px solid var(--edge2)} #view-auth .authbox .swap a:hover{color:var(--lime-txt);border-color:var(--lime-txt)} #view-auth .authbox .err{margin-top:16px;font-size:12px;color:#ff9a7d;background:#1d1216; border:1px solid #3a2029;border-radius:11px;padding:11px 13px;line-height:1.55} #view-auth #livenote{font-size:11.5px} /* ⛔ LAST WORD ON THE GROUND. The old light palette was still on html and body and showed as a pale frame around every screen. */ html.v-auth, body.v-auth{background:var(--s0) !important;color:var(--txt1);overflow-x:clip;max-width:100%} /* the day counters, actually centred in their boxes */ #view-auth #screen-interview .pip{display:inline-flex;align-items:center;justify-content:center; padding:0;line-height:1;font-variant-numeric:tabular-nums} #view-auth .pip{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1} /* the foil. Sits over the panel, never intercepts a click, and is invisible until the pointer is actually on the card. */ #view-auth .cardgloss{position:absolute;inset:0;border-radius:inherit;pointer-events:none; mix-blend-mode:overlay;opacity:0;transition:opacity 300ms ease-out;z-index:3} #view-auth .authbox, #view-auth #screen-interview .card{position:relative;isolation:isolate} /* the fields sit above the foil so typing never looks washed out */ #view-auth .authbox > *, #view-auth #screen-interview .card > *{position:relative;z-index:4} /* ⛔ NEXT WAS A LIME PILL IN A FIELD OF COLOURED PILLS, so it read as one more category and got missed three times running. The fix is not a different colour, it is a different SHAPE and a rule above it: this control leaves the screen, and nothing else on it does. */ #view-auth #screen-interview .catgrid + .row, #view-auth #screen-interview .dial ~ .row{ margin-top:22px;padding-top:18px;border-top:1px solid var(--edge)} #view-auth #screen-interview .catgrid + .row button, #view-auth #screen-interview .dial ~ .row button{ border-radius:10px; /* square-ish: the pills are all round */ padding:12px 26px; display:inline-flex;align-items:center;gap:9px; box-shadow:0 0 0 1px rgba(202,240,0,.25), 0 10px 26px -14px rgba(202,240,0,.6)} #view-auth #screen-interview .catgrid + .row button::after, #view-auth #screen-interview .dial ~ .row button::after{content:"→";font-size:13px;opacity:.8} #view-auth #screen-interview .catgrid + .row button.ghost::after{content:""} /* ═══ PHONES ═════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { #view-auth .auth{padding:16px;min-height:100dvh} #view-auth .authbox{padding:24px 20px 22px;border-radius:18px} #view-auth .authbox h1{font-size:22px} #view-auth #screen-interview .hd{padding:16px 16px 0} #view-auth #screen-interview main{padding:16px 14px 30px;min-height:calc(100dvh - 60px)} #view-auth #screen-interview .card{padding:20px 18px 18px;border-radius:18px} #view-auth #screen-interview .q{font-size:21px} #view-auth #screen-interview textarea{min-height:110px;font-size:16px} #view-auth #screen-interview textarea.big{min-height:150px} #view-auth #screen-interview .catgrid{gap:6px} #view-auth #screen-interview .cat{font-size:10.5px;padding:7px 12px} #view-auth #screen-interview .pip{width:38px;height:38px} /* 16px on inputs or iOS zooms the whole page when you focus one */ #view-auth .authbox input{font-size:16px} } /* ⛔ THE TYPE IN EVERY BOX WAS TOO BIG — his note, and it is the whole product's worst habit: an onboarding made of essay questions rendered at headline size makes the box look like it expects a headline's worth of words. Typing size is now a step below reading size. Zoom is disabled on this product so there is no need for the 16px iOS floor. */ #view-auth input.one, #view-auth textarea, #view-auth .mod textarea, #view-auth .mod input, #view-auth input[type=date], #view-auth input[type=time]{ font-size:14px; line-height:1.5} #view-auth textarea.big{font-size:14px} #view-auth .bornrow{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 4px} #view-auth .bornrow label{flex:1;min-width:132px;display:flex;flex-direction:column;gap:6px; font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px; letter-spacing:.14em;text-transform:uppercase;opacity:.55} #view-auth .bornrow input{font-family:inherit;padding:9px 11px;border-radius:9px} /* the demo card. It has to LOOK like a card, or the lesson does not transfer. */ #view-auth .card.demo{max-width:520px} #view-auth .democard{background:var(--card);border:1px solid var(--edge2);border-radius:18px; padding:20px 22px;margin:16px 0 4px;box-shadow:0 18px 40px -28px rgba(0,0,0,.55)} #view-auth .dcat{font:700 9px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.2em; text-transform:uppercase;color:var(--sub);margin-bottom:9px} #view-auth .dt{font-family:"Fraunces",Georgia,serif;font-size:23px;line-height:1.22; color:var(--ink);letter-spacing:-.01em;text-wrap:balance} #view-auth .dwhy{font:400 12.5px/1.6 "JetBrains Mono",ui-monospace,monospace;color:var(--sub); margin-top:11px}