/* statuses.org — single shared stylesheet (~6 KB). System fonts only: zero font requests. */
:root{
  --paper:#F7F6F2; --ink:#1F2430; --muted:#6D7280; --accent:#5346C9;
  --accent-ink:#3F35A8; --bubble:#FFFFFF; --line:#E7E5DE; --tint:#EEECFB;
  --radius:14px; --col:680px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a{color:var(--accent-ink)}
a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:4px}

.wrap{max-width:var(--col); margin:0 auto; padding:0 20px}

/* Header */
header{border-bottom:1px solid var(--line); background:var(--paper)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{font-weight:800; font-size:20px; letter-spacing:-.03em; color:var(--ink); text-decoration:none}
.logo b{color:var(--accent)}
.nav a.browse{font-size:14px; font-weight:600; text-decoration:none; background:var(--tint); color:var(--accent-ink); padding:8px 14px; border-radius:999px}

/* Breadcrumb / eyebrow — styled like a chat timestamp */
.crumb{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:28px 0 10px}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--accent-ink)}

h1{font-size:clamp(30px,6vw,44px); line-height:1.12; letter-spacing:-.035em; font-weight:800; margin:0 0 14px}
.lede{font-size:18px; color:var(--muted); margin:0 0 8px; max-width:60ch}
h2{font-size:clamp(21px,4vw,26px); letter-spacing:-.02em; margin:44px 0 6px}
.h2-sub{font-size:14px; color:var(--muted); margin:0 0 18px}
h3{font-size:18px; margin:28px 0 8px}
p{max-width:68ch}

/* The signature: status bubbles (chat thread) */
ul.thread{list-style:none; margin:18px 0 0; padding:0}
.thread li{
  position:relative; background:var(--bubble); border:1px solid var(--line);
  border-radius:var(--radius); border-bottom-left-radius:4px;
  padding:14px 52px 14px 16px; margin:0 24px 10px 0; max-width:100%;
}
.thread li:nth-child(even){border-bottom-left-radius:var(--radius); border-bottom-right-radius:4px; margin:0 0 10px 24px}
.thread li p{margin:0; font-size:17px}
.copy{
  position:absolute; top:8px; right:8px; border:0; cursor:pointer;
  background:var(--tint); color:var(--accent-ink); font:600 12px/1 inherit;
  padding:8px 10px; border-radius:8px;
}
.copy:hover{background:var(--accent); color:#fff}
.copy[data-done]{background:#DDF3E4; color:#166534}

/* Category directory (home) — contact-list style */
.dir{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; grid-template-columns:1fr 1fr}
@media(max-width:560px){.dir{grid-template-columns:1fr}}
.dir a{
  display:block; text-decoration:none; background:var(--bubble); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 16px; color:var(--ink);
}
.dir a:hover{border-color:var(--accent)}
.dir b{display:block; font-size:17px; letter-spacing:-.01em}
.dir span{font-size:13.5px; color:var(--muted)}

/* Subtopic links inside a category */
.subs{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; list-style:none}
.subs a{
  display:inline-block; text-decoration:none; font-size:14px; font-weight:600;
  background:var(--bubble); border:1px solid var(--line); color:var(--accent-ink);
  padding:8px 14px; border-radius:999px;
}
.subs a:hover{border-color:var(--accent); background:var(--tint)}

/* Tips + FAQ */
.faq dt{font-weight:700; margin:18px 0 4px}
.faq dd{margin:0; color:#3c4150; max-width:68ch}

/* Footer */
footer{border-top:1px solid var(--line); margin-top:64px; padding:28px 0 40px; font-size:14px; color:var(--muted)}
footer nav{display:flex; flex-wrap:wrap; gap:6px 18px; margin-bottom:14px}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--accent-ink)}

@media(prefers-reduced-motion:no-preference){
  .copy{transition:background .15s,color .15s}
}