/* The LinkedIn desk pages (RME-279). The first part is the look YT reviewed in design/game-look-mockup.html, carried
   over as it was, with one change she asked for on 12 Oct 2026: brand fonts only, so labels use the brand mono.
   The second part (after "the working pages") is what a real page needs that a drawing did not. */


:root{
  --paper:#f7f6f2; --paper-2:#efede6; --ink:#013b3b; --ink-2:#2b5151; --mute:#6b8282;
  --teal:#0f766e; --teal-hover:#0c5f58; --teal-art:#0d9488; --teal-tint:#dff1ee;
  --keep:#10B981; --monitor:#F59E0B; --suppress:#F43F5E;
  --keep-tint:#dcf7ec; --monitor-tint:#fdf0d5; --suppress-tint:#fde2e7;
  --line:#013b3b; --card:#ffffff; --shadow:#013b3b;
  --font-display:'Lora',Georgia,serif; --font-body:'Manrope',system-ui,sans-serif;
  --font-pixel:'JetBrains Mono',ui-monospace,monospace; --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --dot:rgba(1,59,59,.10);
  --yt:#0f766e; --vy:#c0569c;
  --star-ground:#1b2440; --star-gold:#ffd54a; --pat-ink:#013b3b; --pat-op:.12;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#0b2626; --paper-2:#0f2f2f; --ink:#eef5f3; --ink-2:#c4d8d4; --mute:#8fb0ab;
  --teal:#5fd3c6; --teal-hover:#8ae4da; --teal-art:#2dd4bf; --teal-tint:#123f3c;
  --keep-tint:#0f3b2d; --monitor-tint:#3d2e0c; --suppress-tint:#3f1620;
  --line:#eef5f3; --card:#143636; --shadow:#000000; --dot:rgba(238,245,243,.10); --yt:#5fd3c6; --vy:#e792c9;
  --star-ground:#0b1230; --star-gold:#ffe07a; --pat-ink:#eef5f3; --pat-op:.14; color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#0b2626; --paper-2:#0f2f2f; --ink:#eef5f3; --ink-2:#c4d8d4; --mute:#8fb0ab;
  --teal:#5fd3c6; --teal-hover:#8ae4da; --teal-art:#2dd4bf; --teal-tint:#123f3c;
  --keep-tint:#0f3b2d; --monitor-tint:#3d2e0c; --suppress-tint:#3f1620;
  --line:#eef5f3; --card:#143636; --shadow:#000000; --dot:rgba(238,245,243,.10); --yt:#5fd3c6; --vy:#e792c9;
  --star-ground:#0b1230; --star-gold:#ffe07a; --pat-ink:#eef5f3; --pat-op:.14; color-scheme:dark }

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.5;
  background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:14px 14px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:28px 64px}
h1,h2,h3{font-family:var(--font-display);font-weight:600;text-wrap:balance;margin:0}
h1{font-size:clamp(28px,4vw,42px);line-height:1.1}
h1 em,h2 em{font-style:italic;color:var(--teal)}
h2{font-size:24px;margin-bottom:6px}
p{margin:0}
.lede{max-width:62ch;color:var(--ink-2);margin-top:10px}
.eyebrow{font-family:var(--font-pixel);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--teal)}
section{margin-top:48px}
.sechead{display:flex;flex-direction:column;gap:4px;margin-bottom:18px}
.sechead p{color:var(--mute);max-width:70ch}

/* pixel chrome primitives */
.px{border:2px solid var(--line);box-shadow:4px 4px 0 var(--shadow);background:var(--card);border-radius:3px}
.px-sm{border:2px solid var(--line);box-shadow:2px 2px 0 var(--shadow);background:var(--card);border-radius:3px}
.hud{font-family:var(--font-pixel);font-size:10px;letter-spacing:.02em;text-transform:uppercase}
.num{font-family:var(--font-pixel);font-variant-numeric:tabular-nums}

/* phone frames */
.screens{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:40px;align-items:start}
.phone{width:min(390px,100%);margin:0 auto;background:var(--paper);border:3px solid var(--line);border-radius:28px;
  box-shadow:8px 8px 0 var(--shadow);padding:10px;position:relative}
.phone .inner{border:2px solid var(--line);border-radius:20px;overflow:hidden;background:var(--paper);
  background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:12px 12px}
.caption{text-align:center;margin-top:16px;color:var(--mute);font-size:13px}

/* status bar + header */
.sb{display:flex;justify-content:space-between;padding:8px 16px 0;font-family:var(--font-pixel);font-size:10px;color:var(--mute)}
.top{display:flex;align-items:center;gap:10px;padding:10px 14px 12px;border-bottom:2px solid var(--line);background:var(--card)}
.top h3{font-size:20px;flex:1;min-width:0}
.top h3 em{font-style:italic;color:var(--teal)}
.coin{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;background:var(--monitor-tint);border:2px solid var(--line);border-radius:999px;font-family:var(--font-pixel);font-size:10px}
.coin i{width:10px;height:10px;background:var(--monitor);border:1.5px solid var(--line);border-radius:50%;display:inline-block}
.bell{position:relative;width:30px;height:30px;display:grid;place-items:center;border:2px solid var(--line);border-radius:8px;background:var(--card)}
.bell b{position:absolute;top:-7px;right:-7px;background:var(--suppress);color:#fff;font-family:var(--font-pixel);font-size:9px;padding:1px 5px;border:2px solid var(--line);border-radius:999px;line-height:1.2}
.scr{padding:14px 14px 18px;display:flex;flex-direction:column;gap:14px}

/* egg sprites */
.egg{display:inline-block;image-rendering:pixelated;flex:none}
.avatar{width:44px;height:52px}
.avatar.lg{width:60px;height:72px}
.photo{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:52px;
  border:2px solid var(--line);border-radius:6px;box-shadow:2px 2px 0 var(--shadow);
  font-family:var(--font-pixel);font-size:13px;color:var(--ink);background:var(--p-bg,var(--paper-2))}
.photo.sm{width:30px;height:36px;font-size:9px}
.photo.amber{--p-bg:#F5C77A} .photo.sand{--p-bg:#E8D5B5} .photo.pink{--p-bg:#F5B7C4} .photo.mint{--p-bg:#BFE8D8}
.photo.sky{--p-bg:#BFD9F2} .photo.lilac{--p-bg:#D9C8F0}


/* speech bubble (mascot) */
.mascot{display:flex;gap:10px;align-items:flex-end}
.bubble{position:relative;flex:1;min-width:0;padding:10px 12px;background:var(--card);border:2px solid var(--line);border-radius:10px;font-size:14px;box-shadow:3px 3px 0 var(--shadow)}
.bubble:before{content:"";position:absolute;left:-10px;bottom:12px;width:10px;height:10px;background:var(--card);border-left:2px solid var(--line);border-bottom:2px solid var(--line);transform:rotate(45deg) translate(3px,-3px)}
.bubble .hud{color:var(--teal);display:block;margin-bottom:3px}

/* compose */
.field{padding:10px 12px;background:var(--card);border:2px solid var(--line);border-radius:6px;font-size:14px;color:var(--ink-2);box-shadow:3px 3px 0 var(--shadow)}
.field .hud{color:var(--mute);display:block;margin-bottom:4px}
.field.wide{min-height:70px}
.field .lh{display:flex;gap:8px;align-items:center;color:var(--ink)}
.field .lh .tag{margin-left:auto}
.tag{font-family:var(--font-pixel);font-size:9px;padding:2px 6px;border:2px solid var(--line);border-radius:4px;background:var(--teal-tint);color:var(--ink);white-space:nowrap}
.tag.keep{background:var(--keep-tint)} .tag.mon{background:var(--monitor-tint)} .tag.sup{background:var(--suppress-tint)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border:2px solid var(--line);border-radius:8px;
  box-shadow:3px 3px 0 var(--shadow);font-weight:800;font-size:14px;background:var(--card);color:var(--ink)}
.btn.primary{background:var(--teal);color:#fff}
:root[data-theme="dark"] .btn.primary{color:var(--paper)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.primary{color:var(--paper)}}
.btn.ghost{box-shadow:none}
.btn .hud{font-size:9px;opacity:.85}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row .btn{flex:1;min-width:0}

/* draft cards */
.drafts{display:flex;flex-direction:column;gap:12px}
.draft{position:relative;padding:12px 12px 12px 14px;background:var(--card);border:2px solid var(--line);border-radius:8px;box-shadow:3px 3px 0 var(--shadow);font-size:14px}
.draft .slot{position:absolute;top:-10px;left:10px;background:var(--paper);border:2px solid var(--line);border-radius:4px;padding:1px 7px;font-family:var(--font-pixel);font-size:9px}
.draft .meta{display:flex;gap:6px;align-items:center;margin-top:8px;font-family:var(--font-pixel);font-size:9px;color:var(--mute);flex-wrap:wrap}
.draft.pick{border-width:3px;background:var(--teal-tint);box-shadow:4px 4px 0 var(--teal)}
.draft.pick .slot{background:var(--teal);color:#fff;border-color:var(--teal)}
.draft.dim{opacity:.55}
.hearts{display:inline-flex;gap:2px}
.hearts i{width:10px;height:10px;display:inline-block;background:var(--suppress);clip-path:polygon(50% 100%,0 40%,0 15%,20% 0,50% 25%,80% 0,100% 15%,100% 40%);}
.hearts i.off{background:var(--mute);opacity:.35}

/* waiting state */
.wait{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 12px;background:var(--card);border:2px dashed var(--line);border-radius:8px;text-align:center}
.bar{width:100%;height:14px;border:2px solid var(--line);background:var(--paper-2);border-radius:3px;overflow:hidden;position:relative}
.bar i{position:absolute;inset:0;width:62%;background:repeating-linear-gradient(90deg,var(--teal) 0 10px,var(--teal-art) 10px 20px)}
.dots span{display:inline-block;width:6px;height:6px;background:var(--teal);margin:0 2px;animation:blink 1.2s infinite}
.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.dots span{animation:none;opacity:1}.bob{animation:none}}
.bob{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* queue strip */
.queue{display:flex;gap:8px;align-items:center;overflow:hidden}
.queue .q{display:flex;flex-direction:column;align-items:center;gap:3px;font-family:var(--font-pixel);font-size:8px;color:var(--mute)}
.queue .q .avatar{width:30px;height:36px}
.queue .q.done{color:var(--teal)}

/* toast */
.toast{display:flex;gap:10px;align-items:center;padding:10px 12px;background:var(--ink);color:var(--paper);border:2px solid var(--line);border-radius:8px;box-shadow:3px 3px 0 var(--teal);font-size:13px}
:root[data-theme="dark"] .toast{background:var(--teal-tint);color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .toast{background:var(--teal-tint);color:var(--ink)}}
.toast .hud{color:var(--teal-art)}

/* rolodex */
.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chip{flex:none;padding:6px 10px;border:2px solid var(--line);border-radius:999px;background:var(--card);font-family:var(--font-pixel);font-size:9px;white-space:nowrap}
.chip.on{background:var(--ink);color:var(--paper)}
:root[data-theme="dark"] .chip.on{background:var(--teal);color:var(--paper)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chip.on{background:var(--teal);color:var(--paper)}}
.group{display:flex;align-items:center;gap:8px;font-family:var(--font-pixel);font-size:10px;color:var(--mute);text-transform:uppercase}
.group:after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 4px,transparent 4px 8px);opacity:.5}
.cards{display:flex;flex-direction:column;gap:10px}
.card{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px;background:var(--card);border:2px solid var(--line);border-radius:8px;box-shadow:3px 3px 0 var(--shadow);position:relative}
.card.owe{box-shadow:3px 3px 0 var(--suppress)}
.card.new{box-shadow:3px 3px 0 var(--teal-art)}
.card .who{min-width:0}
.card .name{font-weight:800;font-size:15px;line-height:1.2;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.card .role{font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .last{font-size:12.5px;color:var(--ink-2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .side{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.card .ago{font-family:var(--font-pixel);font-size:9px;color:var(--mute)}
.warm{display:flex;gap:2px}
.warm i{width:7px;height:12px;border:1.5px solid var(--line);background:var(--paper-2)}
.warm.w3 i:nth-child(-n+3){background:var(--keep)}
.warm.w2 i:nth-child(-n+2){background:var(--monitor)}
.warm.w1 i:nth-child(1){background:var(--suppress)}
.warm.w4 i{background:var(--keep)}
.badge{position:absolute;top:-9px;right:10px;font-family:var(--font-pixel);font-size:8px;padding:1px 6px;border:2px solid var(--line);border-radius:4px;background:var(--suppress);color:#fff}
.badge.n{background:var(--teal-art);color:var(--ink)}
.fab{position:sticky;bottom:10px;align-self:flex-end;margin-top:4px}
.star{position:absolute;top:8px;right:8px;width:18px;height:18px;cursor:pointer}
.star.off{opacity:.3}
.star svg{width:100%;height:100%}
.ptag{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-pixel);font-size:8px;padding:2px 6px;
  border:1.5px solid var(--line);border-radius:3px;background:var(--teal-tint);color:var(--ink);margin-top:4px}
.ptag.suggested{background:var(--paper-2);border-style:dashed;color:var(--mute)}

/* wallpapers: one repeating pixel pattern per contact category, like a themed chat in WhatsApp.
   Each pattern is a tiny SVG used as a CSS mask, so it is coloured by a token and works in both
   themes. The pattern sits behind the content; text always lands on a solid plate (card or field),
   so the wallpaper lives in the margins and never under a letter. */
[data-pat]{position:relative;isolation:isolate}
[data-pat]::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:5px;pointer-events:none;
  background:var(--pat-ink);opacity:var(--pat-op);
  -webkit-mask:var(--pat) 0 0/var(--pat-size) repeat;mask:var(--pat) 0 0/var(--pat-size) repeat}
[data-pat="star"]{--pat-size:48px 48px;
  --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'%3E%3Cpath d='M4 2h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM20 3h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM2 6h1v1h-1zM6 6h1v1h-1zM13 7h1v1h-1zM15 13h1v1h-1zM14 14h1v1h-1zM15 14h1v1h-1zM16 14h1v1h-1zM15 15h1v1h-1zM8 19h1v1h-1zM20 21h1v1h-1z'/%3E%3C/svg%3E")}
[data-pat="star"]{background:var(--star-ground)}
[data-pat="star"]::after{background:var(--star-gold);opacity:1}
[data-pat="agency"]{--pat-size:40px 24px;
  --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' shape-rendering='crispEdges'%3E%3Cpath d='M3 1h1v1h-1zM4 1h1v1h-1zM12 1h1v1h-1zM13 1h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM12 2h1v1h-1zM13 2h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM8 3h1v1h-1zM11 3h1v1h-1zM12 3h1v1h-1zM13 3h1v1h-1zM14 3h1v1h-1zM16 3h1v1h-1zM17 3h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM8 4h1v1h-1zM11 4h1v1h-1zM12 4h1v1h-1zM13 4h1v1h-1zM14 4h1v1h-1zM16 4h1v1h-1zM17 4h1v1h-1zM1 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM8 5h1v1h-1zM9 5h1v1h-1zM10 5h1v1h-1zM11 5h1v1h-1zM12 5h1v1h-1zM13 5h1v1h-1zM14 5h1v1h-1zM15 5h1v1h-1zM16 5h1v1h-1zM17 5h1v1h-1zM18 5h1v1h-1zM1 6h1v1h-1zM18 6h1v1h-1zM1 7h1v1h-1zM18 7h1v1h-1z'/%3E%3C/svg%3E")}
[data-pat="reseller"]{--pat-size:40px 28px;
  --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' shape-rendering='crispEdges'%3E%3Cpath d='M3 1h1v1h-1zM4 1h1v1h-1zM5 1h1v1h-1zM6 1h1v1h-1zM7 1h1v1h-1zM8 1h1v1h-1zM2 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM8 2h1v1h-1zM9 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM2 4h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM8 4h1v1h-1zM9 4h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM8 5h1v1h-1zM13 8h1v1h-1zM14 8h1v1h-1zM15 8h1v1h-1zM16 8h1v1h-1zM17 8h1v1h-1zM18 8h1v1h-1zM12 9h1v1h-1zM16 9h1v1h-1zM17 9h1v1h-1zM18 9h1v1h-1zM19 9h1v1h-1zM11 10h1v1h-1zM13 10h1v1h-1zM16 10h1v1h-1zM17 10h1v1h-1zM18 10h1v1h-1zM19 10h1v1h-1zM12 11h1v1h-1zM16 11h1v1h-1zM17 11h1v1h-1zM18 11h1v1h-1zM19 11h1v1h-1zM13 12h1v1h-1zM14 12h1v1h-1zM15 12h1v1h-1zM16 12h1v1h-1zM17 12h1v1h-1zM18 12h1v1h-1z'/%3E%3C/svg%3E")}
[data-pat="specialist"]{--pat-size:32px 32px;
  --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM3 3h1v1h-1zM7 3h1v1h-1zM3 4h1v1h-1zM7 4h1v1h-1zM3 5h1v1h-1zM7 5h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM8 6h1v1h-1zM8 7h1v1h-1zM9 7h1v1h-1zM9 8h1v1h-1z'/%3E%3C/svg%3E")}
[data-pat="client"]{--pat-size:32px 32px;
  --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM2 4h1v1h-1zM2 5h1v1h-1zM0 6h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM9 9h1v1h-1zM11 9h1v1h-1zM8 10h1v1h-1zM9 10h1v1h-1zM11 10h1v1h-1zM12 10h1v1h-1zM9 11h1v1h-1zM10 11h1v1h-1zM11 11h1v1h-1zM10 12h1v1h-1zM10 13h1v1h-1zM8 14h1v1h-1zM9 14h1v1h-1zM10 14h1v1h-1zM11 14h1v1h-1zM12 14h1v1h-1zM12 14h1v1h-1z'/%3E%3C/svg%3E")}
[data-pat="new"]{--pat-size:100% 10px;
  --pat:linear-gradient(to bottom,transparent 0 8px,#000 8px 10px)}
/* a tag Claude only suggested shows its wallpaper faintly until you confirm it */
[data-pat].unconfirmed::after{opacity:calc(var(--pat-op) * .45)}
/* on a card the text columns sit on plates, so the wallpaper shows in the gutters */
.card[data-pat]{padding:12px 10px}
.card[data-pat] .who,.card[data-pat] .side{background:var(--card);border-radius:6px;padding:5px 8px;margin:-5px -4px}
.card[data-pat] .side{padding:5px 6px;margin:-5px -3px}
.card[data-pat="star"] .star{--line:var(--star-gold)}
.card[data-pat="star"] .photo{box-shadow:2px 2px 0 var(--star-gold)}
/* on Compose the thread area is the wallpaper, every field is a solid bubble on it */
.ground{display:flex;flex-direction:column;gap:14px;padding:16px 10px 12px;border:2px solid var(--line);border-radius:10px;background:var(--paper-2)}
.ground .wtag{position:absolute;top:-10px;right:10px;background:var(--paper);border:2px solid var(--line);border-radius:4px;padding:1px 7px;font-family:var(--font-pixel);font-size:9px;z-index:1}
.ground[data-pat="star"] .wtag{color:var(--star-gold);background:var(--star-ground);border-color:var(--star-gold)}
/* legend swatches */
.legend{display:flex;flex-direction:column;gap:8px}
.legend .lg{display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:center}
.legend .lg i{display:block;height:44px;border:2px solid var(--line);border-radius:5px;background:var(--card)}
.legend .lg b{display:block;font-family:var(--font-pixel);font-size:9px;color:var(--teal)}
.legend .lg span{font-size:12.5px;color:var(--ink-2);line-height:1.35}
.legend .lg i[data-pat="star"]{border-color:var(--star-ground)}


.login{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.login .field{width:100%;text-align:left}
.idbtn{position:relative;padding-left:26px!important}
.idbtn i{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:10px;height:10px;border:1.5px solid var(--line);border-radius:50%;display:inline-block}
.idbtn.yt i{background:var(--yt)} .idbtn.vy i{background:var(--vy)}
.whose{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-pixel);font-size:9px;padding:3px 8px 3px 6px;border:2px solid var(--line);border-radius:999px;background:var(--card)}
.whose i{width:8px;height:8px;border:1.5px solid var(--line);border-radius:50%;display:inline-block}
.whose.yt i{background:var(--yt)} .whose.vy i{background:var(--vy)}

footer{margin-top:56px;color:var(--mute);font-size:12.5px;border-top:2px solid var(--line);padding-top:14px}

/* ================= the working pages ================= */
html{-webkit-text-size-adjust:100%}
body{min-height:100vh}
.app{max-width:540px;margin:0 auto;padding:0 0 96px}
.top{position:sticky;top:0;z-index:5}
.top a{color:inherit;text-decoration:none}
.scr{padding:14px 14px 18px}
.hidden{display:none!important}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
button.btn,a.btn{text-decoration:none;line-height:1.2}
button.btn:disabled{opacity:.5;cursor:default;box-shadow:none}
button.btn:active:not(:disabled),a.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}
button.chip,button.ptag,button.star,button.whose,button.coin,button.bell{cursor:pointer}
button.star{background:none;border:0;padding:0}
:focus-visible{outline:3px solid var(--teal-art);outline-offset:2px}
/* labels are the brand mono now, a size up from the drawing so they read on a phone */
.hud{font-size:11px;letter-spacing:.05em}
.chip,.tag,.ptag,.badge,.coin,.whose,.draft .slot,.draft .meta,.card .ago,.queue .q,.group,.ground .wtag,.photo{letter-spacing:.04em;text-transform:uppercase}
.chip{font-size:11px;padding:7px 11px}
.tag,.ptag,.badge,.draft .slot,.ground .wtag{font-size:10px}
.coin,.whose,.draft .meta,.card .ago,.group{font-size:11px}
.photo{font-size:13px;font-weight:500}
.photo.sm{font-size:11px;width:36px;height:42px}
.chip b{font-weight:500;opacity:.7;margin-left:4px}
/* fields you can type in */
.field textarea,.field input[type=text],.field input[type=password],.field input[type=search]{display:block;width:100%;border:0;background:transparent;
  color:var(--ink);outline:none;resize:vertical;padding:0;font-size:15px;line-height:1.45}
.field textarea{min-height:64px}
.field textarea.tall{min-height:110px}
.field textarea.mono{font-family:var(--font-mono);font-size:13px}
.field ::placeholder{color:var(--mute);opacity:1;font-style:italic}
.field.dashed{border-style:dashed}
.field .hint{display:block;font-size:12.5px;color:var(--mute);margin-top:4px}
/* a card is a button that opens the person */
.card{cursor:pointer;text-align:left;width:100%}
.card .last{white-space:normal}
.card .dots{display:inline-flex;gap:3px;margin-left:2px}
.card .dots i,.who-line .dots i{width:8px;height:8px;border:1.5px solid var(--line);border-radius:50%;display:inline-block}
i.d-yt{background:var(--yt)} i.d-vy{background:var(--vy)}
.card .star{top:7px;right:7px;width:18px;height:18px}
.star.off{opacity:.28}
.card .side{margin-right:20px}
.photo.c0{--p-bg:#F5C77A}.photo.c1{--p-bg:#E8D5B5}.photo.c2{--p-bg:#F5B7C4}.photo.c3{--p-bg:#BFE8D8}.photo.c4{--p-bg:#B9D8F2}.photo.c5{--p-bg:#D9C8F0}
.photo{color:#013b3b}
.empty{padding:22px 12px;text-align:center;color:var(--mute);border:2px dashed var(--line);border-radius:8px;background:var(--card)}
.more{align-self:center}
/* the person at the top of Compose */
#who{display:flex;flex-direction:column;gap:10px;padding:10px;background:var(--card);border:2px solid var(--line);border-radius:8px;box-shadow:3px 3px 0 var(--shadow)}
#who .field{box-shadow:none}
.who-head{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;position:relative}
.who-head .star{position:static;width:22px;height:22px}
.ground[data-pat="star"]{background:var(--star-ground)}
.who-head .name{font-weight:800;font-size:16px;line-height:1.2}
.who-head .role{font-size:13px;color:var(--mute)}
.who-line{font-size:13px;color:var(--ink-2);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ptags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ptags .ptag{margin-top:0}
.ptag.on{background:var(--teal);color:#fff;border-color:var(--teal)}
:root[data-theme="dark"] .ptag.on{color:var(--paper)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ptag.on{color:var(--paper)}}
.results{display:flex;flex-direction:column;gap:6px}
.results button{display:flex;gap:8px;align-items:center;text-align:left;padding:8px 10px;background:var(--card);border:2px solid var(--line);border-radius:6px;width:100%}
.results small{color:var(--mute)}
/* what waits on her */
.item{display:flex;flex-direction:column;gap:12px;padding:14px 10px 12px;border:2px solid var(--line);border-radius:10px;background:var(--paper-2);position:relative}
.item>.head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-weight:800}
.item>.head .sub{font-weight:500;font-size:13px;color:var(--mute)}
.item .read{font-size:13.5px;color:var(--ink-2)}
.draft{cursor:pointer;text-align:left;width:100%;white-space:pre-wrap;line-height:1.45}
.draft textarea{display:block;width:100%;min-height:120px;border:0;background:transparent;color:var(--ink);outline:none;resize:vertical;font-size:14.5px;line-height:1.45;padding:0}
.draft .flags{margin-top:8px;font-size:12.5px;color:var(--suppress);font-weight:600;white-space:normal}
.draft .field{margin-top:10px;padding:8px 10px;box-shadow:none;white-space:normal}
.est{padding:10px 12px;background:var(--monitor-tint);border:2px solid var(--line);border-radius:8px;font-size:13.5px}
.est .row{margin-top:10px}
.sent-line{display:flex;flex-direction:column;gap:6px;padding:10px;background:var(--card);border:2px solid var(--line);border-radius:8px;font-size:13.5px}
.outs{display:flex;gap:6px;flex-wrap:wrap}
.prompt{white-space:pre-wrap;font-family:var(--font-mono);font-size:12px;line-height:1.5;max-height:none;overflow-wrap:anywhere}
select.pick{width:100%;padding:8px;border:2px solid var(--line);border-radius:6px;background:var(--card)}
.toasts{position:fixed;left:0;right:0;bottom:70px;display:flex;flex-direction:column;gap:8px;align-items:center;z-index:9;pointer-events:none;padding:0 14px}
.toasts .toast{max-width:500px;width:100%;pointer-events:auto}
.toast.bad{box-shadow:3px 3px 0 var(--suppress)}
/* two pages, one bar */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:center;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--card);border-top:2px solid var(--line)}
.tabs a{flex:1;max-width:250px;text-align:center}
.tabs a.on{background:var(--ink);color:var(--paper)}
:root[data-theme="dark"] .tabs a.on{background:var(--teal);color:var(--paper)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tabs a.on{background:var(--teal);color:var(--paper)}}
.login-wrap{max-width:420px;margin:0 auto;padding:48px 16px}
.login .row{width:100%}
.idbtn.on{background:var(--teal-tint);border-width:3px}
.err{color:var(--suppress);font-weight:700;font-size:14px;min-height:20px}
.mascot .egg.avatar{width:38px;height:45px}

/* the buttons under a set of drafts wrap onto two lines on a phone instead of squeezing */
.item>.row{flex-wrap:wrap}
.item>.row .btn{flex:1 1 138px}
.item .field .row{margin-top:8px}
.item .field select.pick{margin:6px 0}