/* unlint, css/unlint.css   The site's one look (Mike, 24 Oct 2026: restyled with the frontend-design skill).
 * Sky by day, sky by night: pale sky paper, storm-slate ink, and the devil-to-angel colours (ember, ash, halo gold) that the
 * flick stage already uses. Atkinson Hyperlegible for everything around; Courier Prime for what people wrote, so a thought
 * still looks typed. Fonts are served from this box (fonts/, OFL). Every page links this first; its own <style> follows.
 * Names kept for the older pages: --ink/--paper (and unlint_sky.js reads --paper), --bg/--fg/--mut/--card/--line/--acc. */
@font-face { font-family:"Atkinson Hyperlegible"; src:url(/fonts/AtkinsonHyperlegible-Regular.ttf) format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Atkinson Hyperlegible"; src:url(/fonts/AtkinsonHyperlegible-Bold.ttf) format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Noto Sans Thai"; src:url(/fonts/NotoSansThai-Regular.ttf) format("truetype"); font-weight:400; font-display:swap; unicode-range:U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family:"Noto Sans Thai"; src:url(/fonts/NotoSansThai-Bold.ttf) format("truetype"); font-weight:700; font-display:swap; unicode-range:U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family:"Courier Prime"; src:url(/fonts/CourierPrime-Regular.ttf) format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Courier Prime"; src:url(/fonts/CourierPrime-Bold.ttf) format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Courier Prime"; src:url(/fonts/CourierPrime-Italic.ttf) format("truetype"); font-style:italic; font-weight:400; font-display:swap; }

:root {
  color-scheme: light dark;
  --paper:#ECF1F4; --card:#FAFCFD; --ink:#1D2932; --mut:#5A6A75; --line:#C8D3DA; --edge:#8FA0AB;
  --ember:#B63A22; --ash:#8E959C; --halo:#D19E1A; --plum:#7A3E9D; --agree:#1F9A8E; --disagree:#D9822B; --wrong:#B63A22; --right:#2F7D4F;
  --sky-glass:rgba(250,252,253,.86);
  --mood:linear-gradient(90deg, var(--ember), var(--ash) 50%, var(--halo));
  --emoji:"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --sans:"Atkinson Hyperlegible", "Noto Sans Thai", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  --typed:"Courier Prime", "Courier New", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", ui-monospace, system-ui, monospace;
  --r:8px;
  /* the card pages' names */
  --bg:var(--paper); --fg:var(--ink); --acc:var(--ink);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) {
  --paper:#0F161C; --card:#17212A; --ink:#E4EBEF; --mut:#94A3AD; --line:#2B3944; --edge:#556672;
  --ember:#E0573E; --ash:#8E959C; --halo:#EBC04B; --plum:#B98AE0; --agree:#3FC2B4; --disagree:#E8963F; --wrong:#F07A62; --right:#6CC08F;
  --sky-glass:rgba(23,33,42,.86);
} }
:root[data-theme=dark] {
  --paper:#0F161C; --card:#17212A; --ink:#E4EBEF; --mut:#94A3AD; --line:#2B3944; --edge:#556672;
  --ember:#E0573E; --ash:#8E959C; --halo:#EBC04B; --plum:#B98AE0; --agree:#3FC2B4; --disagree:#E8963F; --wrong:#F07A62; --right:#6CC08F;
  --sky-glass:rgba(23,33,42,.86);
}
:root[data-theme=light] { color-scheme:light; } :root[data-theme=dark] { color-scheme:dark; }

body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.5 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:3px; text-decoration-thickness:1px; }
:focus-visible { outline:3px solid var(--halo); outline-offset:2px; }
::selection { background:color-mix(in srgb, var(--halo) 40%, transparent); }

/* the "count me once" question (js/unlint_consent.js draws it with its own inline look; here it joins the site's) */
[aria-labelledby=unl-consent-t] > div { background:var(--card) !important; color:var(--ink) !important; border:1px solid var(--line) !important;
  border-radius:14px !important; font:16px/1.5 var(--sans) !important; box-shadow:0 18px 48px rgba(10,20,30,.28); }
[aria-labelledby=unl-consent-t] button { font:700 15px/1.2 var(--sans) !important; border:1.5px solid var(--ink) !important; }
[aria-labelledby=unl-consent-t] button:first-child { background:var(--ink) !important; color:var(--paper) !important; }

/* buttons and fields every page shares */
.btn { display:inline-block; border:1.5px solid var(--ink); border-radius:999px; background:var(--card); color:var(--ink); padding:7px 16px;
       font:700 15px/1.25 var(--sans); cursor:pointer; text-decoration:none; }
.btn:hover { background:var(--ink); color:var(--paper); }
.btn:disabled { opacity:.45; cursor:default; } .btn:disabled:hover { background:var(--card); color:var(--ink); }
.btn.on { background:var(--ink); color:var(--paper); }
input[type=text], input[type=url], input[type=date], input[type=search], input[type=email], select, textarea {
  font:inherit; border:1.5px solid var(--edge); border-radius:6px; background:var(--card); color:var(--ink); }
input[type=text]:focus, input[type=url]:focus, input[type=date]:focus, input[type=search]:focus, input[type=email]:focus, select:focus, textarea:focus { border-color:var(--ink); }

/* a thought: the same card on the feed, a profile and the offline page; the mood strip along its top edge */
article.post { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; margin:14px 0; overflow:hidden; }
.grad { position:relative; height:6px; margin:-12px -14px 3px; background:var(--mood); }
.nice { position:relative; height:3px; margin:0 -14px 12px; background:linear-gradient(90deg,var(--line),color-mix(in srgb,var(--plum) 45%,var(--card)) 50%,var(--plum)); }
.grad i, .nice i { position:absolute; margin-left:-3px; border-radius:3px; background:var(--ink); border:1.5px solid var(--card); }
.grad i { top:-2px; width:3px; height:10px; } .nice i { top:-3px; width:3px; height:9px; }
.react { display:flex; align-items:center; gap:6px 8px; font-size:14px; margin:0 0 10px; flex-wrap:wrap; }
.react b { font-variant-numeric:tabular-nums; }
.split { position:relative; flex:0 0 72px; height:6px; border-radius:3px; overflow:hidden; background:var(--disagree); }
.split i { position:absolute; right:0; top:0; bottom:0; background:var(--agree); }
.tier img.tierart { width:1em; height:1em; display:inline-block; vertical-align:top; }
.tier { font-size:4em; line-height:1; float:left; margin:0 12px 0 0; font-family:var(--emoji), sans-serif; }   /* 4x letter height */
.said { font:17px/1.45 var(--typed); overflow-wrap:break-word; }
.weblink { display:inline-flex; vertical-align:-.3em; padding:1px 3px; margin:0 1px; border:1px dashed var(--mut); border-radius:6px; background:none; cursor:pointer; line-height:0; } .weblink img { width:1.3em; height:1.3em; } .weblink:hover, .weblink:focus-visible { border-style:solid; border-color:var(--ink); }
.meta { display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; font-size:13px; color:var(--mut); margin-top:10px; clear:both; }
.voices { clear:both; font-size:14px; margin-top:8px; } .voices summary { cursor:pointer; color:var(--mut); } .voices p { margin:4px 0; }
.media { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; } .media img { max-width:100%; height:auto; max-height:420px; object-fit:contain; border-radius:6px; border:1px solid var(--line); }
.avatar { width:24px; height:24px; border-radius:50%; object-fit:cover; vertical-align:middle; border:1px solid var(--line); }
.avatar.ini { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; font-size:12px; font-weight:bold; color:var(--ink); background:color-mix(in srgb,var(--halo) 22%,var(--card)); }
a.apfp { color:inherit; text-decoration:none; display:inline-flex; }
.editednote { font-size:13px; background:color-mix(in srgb,var(--halo) 12%,transparent); border-radius:6px; padding:6px 10px; margin:0 0 8px; }
blockquote.quote { margin:10px 0 0; padding:8px 12px; border-left:3px solid var(--edge); border-radius:0 6px 6px 0; background:color-mix(in srgb,var(--ink) 5%,transparent); font-size:.92em; }
blockquote.quote.gone { opacity:.65; font-style:italic; }
.feather { white-space:nowrap; }

/* memes (api/meme_lib.php, js/unlint_meme.js): the words over the picture, top and bottom, classic white with a black edge */
@font-face { font-family:"Anton"; src:url("/fonts/Anton-Regular.ttf") format("truetype"); font-display:swap; }
.said.meme { position:relative; display:flex; flex-direction:column; justify-content:flex-end; box-sizing:border-box; width:100%; max-width:480px; aspect-ratio:1/1;
  margin:8px 0 4px; padding:10px 12px; border-radius:10px; overflow:hidden; background-color:var(--mbg,#2d3a4a); background-image:var(--mpic,none);
  background-repeat:no-repeat; background-position:center; background-size:62%; color:#fff; text-align:center; text-transform:uppercase;
  font:400 clamp(20px, 7.4vw, 34px)/1.08 "Anton", Impact, "Arial Narrow Bold", sans-serif; letter-spacing:.01em; overflow-wrap:anywhere;
  -webkit-text-stroke:1.6px #000; paint-order:stroke fill;
  text-shadow:2px 2px 0 #000,-2px 2px 0 #000,2px -2px 0 #000,-2px -2px 0 #000,0 2px 0 #000,0 -2px 0 #000,2px 0 0 #000,-2px 0 0 #000; }
.said.meme.meme-cover { background-size:cover; }
.said.meme .mt { margin-bottom:auto; }
.said.meme .mt, .said.meme .mb { display:block; }
.said.meme img.thumbart { height:1em !important; vertical-align:-.1em !important; }
.said.meme .weblink { -webkit-text-stroke:0; text-shadow:none; background:rgba(255,255,255,.85); }
.said.meme.memewait .mb { font-size:.6em; opacity:.85; }
.memeby { display:block; font:12px/1.3 var(--sans); color:var(--mut); margin:0 0 4px; }
#memebox { margin:6px 0 10px; }
.memehow { margin:0 0 8px; }
.memepics { display:flex; gap:8px; overflow-x:auto; padding:4px 2px 8px; scroll-snap-type:x proximity; }
.memepic { flex:0 0 auto; width:64px; height:64px; padding:0; border:2px solid transparent; border-radius:10px; cursor:pointer; overflow:hidden; position:relative; scroll-snap-align:start; }
.memepic img { width:100%; height:100%; object-fit:contain; display:block; }
.memepic span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:28px; }
.memepic[aria-checked="true"] { border-color:var(--ink); box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.memeown { margin:4px 0 8px; font-size:14px; } .memeown button { font:inherit; padding:4px 12px; border-radius:999px; border:1px solid var(--ink); background:var(--card); color:var(--ink); cursor:pointer; }
.memeshare { border:1px solid var(--line); border-radius:10px; margin:6px 0; padding:6px 10px; } .memeshare label { margin-right:14px; white-space:nowrap; }

/* The ring around a person's picture (api/ring_lib.php, migration 071): they choose the bevel in Account, its colour (--ring) says what they
   are doing: green in a call, purple podcasting, gold active, orange popular, red when their thoughts are flicked evil, blue good.
   Drawn as shadows outside the picture, so nothing around it moves; --rw is the ring's width (smaller pictures set less). */
.unl-ring { --rw:3px; --rhi:color-mix(in srgb, var(--ring) 45%, #fff); --rlo:color-mix(in srgb, var(--ring) 55%, #000); }
.unl-ring-flat   { box-shadow:0 0 0 var(--rw) var(--ring) !important; }
.unl-ring-raised { box-shadow:0 0 0 var(--rw) var(--ring), -1.5px -1.5px 0 calc(var(--rw) + .5px) var(--rhi), 1.5px 1.5px 0 calc(var(--rw) + .5px) var(--rlo) !important; }
.unl-ring-sunken { box-shadow:0 0 0 var(--rw) var(--ring), -1.5px -1.5px 0 calc(var(--rw) + .5px) var(--rlo), 1.5px 1.5px 0 calc(var(--rw) + .5px) var(--rhi) !important; }
.unl-ring-double { box-shadow:0 0 0 calc(var(--rw) * .6) var(--ring), 0 0 0 calc(var(--rw) * 1.2) var(--paper), 0 0 0 calc(var(--rw) * 1.8) var(--ring) !important; }
.unl-ring-glow   { box-shadow:0 0 0 calc(var(--rw) * .7) var(--ring), 0 0 calc(var(--rw) * 3) calc(var(--rw) * .8) var(--ring) !important; }
img.avatar.unl-ring, .avatar.unl-ring { --rw:2px; }