/* help.unlint.com   unlint's own look (sky paper, storm-slate ink, halo gold for the hen), laid out like any help site:
 * search along the top, topics down the left, the page in the middle, the helper hen on the right (on a phone: a button that opens her). */
@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:"Courier Prime"; src:url(/fonts/CourierPrime-Regular.ttf) format("truetype"); font-weight:400; font-display:swap; }

:root {
  color-scheme: light dark;
  --paper:#ECF1F4; --card:#FAFCFD; --ink:#1D2932; --mut:#5A6A75; --line:#C8D3DA; --edge:#8FA0AB;
  --halo:#D19E1A; --halo-soft:#F6EBC9; --ember:#B63A22; --plum:#7A3E9D; --focus:#1F6FB5;
  --sky-glass:rgba(250,252,253,.9);
  --sans:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  --typed:"Courier Prime", "Courier New", ui-monospace, monospace;
  --r:8px;
}
@media (prefers-color-scheme: dark) { :root {
  --paper:#0F161C; --card:#17212A; --ink:#E4EBEF; --mut:#94A3AD; --line:#2B3944; --edge:#556672;
  --halo:#EBC04B; --halo-soft:#3A3219; --ember:#E0573E; --plum:#B98AE0; --focus:#6AB0F0;
  --sky-glass:rgba(23,33,42,.9);
} }

* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
button { font:inherit; color:inherit; cursor:pointer; }
button.link { background:none; border:0; padding:0; text-decoration:underline; text-underline-offset:3px; }

/* the top: who we are, the search, the way back */
.top { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px; padding:10px 24px; background:var(--sky-glass);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:8px; text-decoration:none; flex:none; }
.brand img { border-radius:50%; background:var(--halo-soft); }
.brand .word { font-weight:700; font-size:22px; letter-spacing:.5px; }
.brand .sub { font-size:22px; color:var(--mut); }
.find { flex:1; display:flex; max-width:620px; margin:0 auto; }
.find input { flex:1; min-width:0; font:inherit; font-size:16px; padding:9px 14px; border:1px solid var(--edge); border-right:0; border-radius:999px 0 0 999px; background:var(--card); color:var(--ink); }
.find button { padding:9px 18px; border:1px solid var(--ink); border-radius:0 999px 999px 0; background:var(--ink); color:var(--paper); font-weight:700; }
.out { flex:none; font-size:15px; color:var(--mut); }

/* three columns */
.shell { display:grid; grid-template-columns:260px minmax(0, 1fr) 340px; gap:0; max-width:1440px; margin:0 auto; min-height:calc(100vh - 60px); }
.topics { border-right:1px solid var(--line); padding:20px 0; }
.topicmenu > summary { display:none; }
.tlist, .tlist ul { list-style:none; margin:0; padding:0; }
.tlist > li > a.tname { display:block; padding:7px 20px 7px 24px; text-decoration:none; font-weight:700; font-size:15px; border-left:3px solid transparent; }
.tlist > li.here > a.tname { border-left-color:var(--halo); }
.tlist ul { padding:2px 0 10px; }
.tlist ul a { display:block; padding:4px 20px 4px 40px; font-size:15px; color:var(--mut); text-decoration:none; line-height:1.4; }
.tlist a:hover { color:var(--ink); text-decoration:underline; }
.tlist a[aria-current] { color:var(--ink); font-weight:700; }

main { padding:32px 48px 80px; max-width:820px; }
h1 { font-size:34px; line-height:1.2; margin:0 0 10px; letter-spacing:-.3px; }
h2 { font-size:22px; line-height:1.3; margin:34px 0 8px; }
.lead { font-size:19px; color:var(--mut); margin:0 0 24px; max-width:62ch; }
.crumb { margin:0 0 8px; font-size:15px; color:var(--mut); }
.body p, .body li { max-width:68ch; }
.body ol, .body ul { padding-left:1.4em; }
.body li { margin:4px 0; }
.body .ui { font-weight:700; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:0 6px; white-space:nowrap; }
.stuck { margin-top:48px; padding-top:16px; border-top:1px solid var(--line); color:var(--mut); }
.trbar[hidden] { display:none; }
.trbar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:15px; color:var(--mut); background:var(--halo-soft); border-radius:var(--r); padding:8px 12px; margin:0 0 16px; }

/* the start page: the topics as a two-column index, not boxes */
.hello { padding:12px 0 8px; }
.hello h1 { font-size:42px; }
.index { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:40px; }
.ti { padding:18px 0; border-top:1px solid var(--line); }
.ti h2 { margin:0 0 2px; font-size:20px; }
.ti h2 a { text-decoration:none; } .ti h2 a:hover { text-decoration:underline; }
.ti p { margin:0 0 6px; color:var(--mut); font-size:15px; }
.ti ul { margin:0; padding:0; list-style:none; font-size:15px; }
.ti li { padding:2px 0; }
.alist { list-style:none; padding:0; margin:0; }
.alist li { padding:14px 0; border-top:1px solid var(--line); }
.alist li > a { font-weight:700; font-size:18px; }
.alist p { margin:4px 0 0; color:var(--mut); font-size:15px; }
.alist .in { font-size:13px; color:var(--mut); margin-left:6px; }
mark { background:var(--halo-soft); color:inherit; border-radius:3px; padding:0 2px; }

/* the helper hen: her own column, her words typed like a thought on unlint */
.hen { position:sticky; top:61px; align-self:start; height:calc(100vh - 61px); display:flex; flex-direction:column; border-left:1px solid var(--line); background:var(--card); }
.henhead { display:flex; gap:12px; align-items:flex-start; padding:18px 18px 12px; border-bottom:1px solid var(--line); }
.henhead img { flex:none; border-radius:50%; background:var(--halo-soft); box-shadow:0 0 0 3px var(--halo); }
.henhead h2 { margin:2px 0 2px; font-size:18px; }
.henhead p { margin:0; font-size:14px; color:var(--mut); line-height:1.45; }
.henclose { display:none; margin-left:auto; background:none; border:0; font-size:28px; line-height:1; padding:0 4px; }
.chat { list-style:none; margin:0; padding:14px 18px; flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.chat .me { align-self:flex-end; max-width:88%; background:var(--ink); color:var(--paper); padding:8px 12px; border-radius:14px 14px 4px 14px; font-size:15px; white-space:pre-wrap; }
.chat .she { align-self:flex-start; max-width:96%; font:16px/1.55 var(--typed); white-space:pre-wrap; border-left:3px solid var(--halo); padding:2px 0 2px 12px; }
.chat .she.wait { color:var(--mut); }
.chat .she.err { border-left-color:var(--ember); font-family:var(--sans); font-size:15px; }
.chat .she a { font-family:var(--sans); }
.tries[hidden] { display:none; }
.tries { margin:0; padding:0 18px 14px; list-style:none; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.tries p { margin:0 0 2px; font-size:14px; color:var(--mut); }
.tries button { text-align:left; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:15px; }
.tries button:hover { border-color:var(--halo); }
.chat .src { font:14px/1.5 var(--sans); color:var(--mut); padding-left:15px; }
.askf { padding:12px 18px 14px; border-top:1px solid var(--line); }
.askf textarea { width:100%; resize:none; font:inherit; font-size:16px; padding:9px 12px; border:1px solid var(--edge); border-radius:var(--r); background:var(--paper); color:var(--ink); }
.askrow { display:flex; justify-content:flex-end; align-items:center; gap:14px; margin-top:8px; }
.askrow .anew { font-size:14px; color:var(--mut); margin-right:auto; }
.askrow button[type=submit] { padding:8px 22px; border:0; border-radius:999px; background:var(--halo); color:#1D2932; font-weight:700; }
.askrow button[disabled] { opacity:.5; cursor:wait; }
.priv { margin:8px 0 0; font-size:12.5px; color:var(--mut); line-height:1.4; }
.henfab { display:none; }

/* a narrower screen: the hen opens from a button */
@media (max-width:1180px) {
  .shell { grid-template-columns:240px minmax(0, 1fr); }
  .hen { position:fixed; top:auto; right:16px; bottom:16px; height:min(640px, calc(100vh - 100px)); width:min(380px, calc(100vw - 32px)); border:1px solid var(--line);
    border-radius:14px; box-shadow:0 10px 40px rgba(20,30,40,.25); z-index:30; display:none; }
  .hen.open { display:flex; }
  .henclose { display:block; }
  .henfab { display:flex; align-items:center; gap:8px; position:fixed; right:16px; bottom:16px; z-index:25; padding:8px 18px 8px 8px; border:0; border-radius:999px;
    background:var(--ink); color:var(--paper); font-weight:700; box-shadow:0 6px 24px rgba(20,30,40,.3); }
  .henfab img { border-radius:50%; background:var(--halo-soft); box-shadow:0 0 0 2px var(--halo); }
  .hen.open ~ .henfab, body.henon .henfab { display:none; }
}
/* a phone: topics fold into a menu under the search, the page takes the width, the hen fills the screen */
@media (max-width:760px) {
  body { font-size:16px; }
  .top { flex-wrap:wrap; gap:8px 12px; padding:10px 16px; }
  .brand .word, .brand .sub { font-size:19px; }
  .out { margin-left:auto; font-size:14px; }
  .find { order:3; flex-basis:100%; max-width:none; }
  .shell { display:block; }
  .topics { border-right:0; border-bottom:1px solid var(--line); padding:0; }
  .topicmenu > summary { display:block; padding:12px 16px; font-weight:700; cursor:pointer; }
  .tlist { padding-bottom:10px; }
  .tlist > li > a.tname { padding-left:16px; }
  .tlist ul a { padding-left:32px; }
  main { padding:24px 16px 96px; }
  h1, .hello h1 { font-size:28px; }
  .lead { font-size:17px; }
  .index { grid-template-columns:1fr; }
  .hen { inset:0; width:100%; height:100vh; height:100dvh; border-radius:0; border:0; }
  .chat .she { font-size:15px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hen.open { animation:rise .18s ease-out; }
  @keyframes rise { from { transform:translateY(12px); opacity:0; } to { transform:none; opacity:1; } }
}