/* Lisa × Tonkaow — shared design system (lisa.slertp.com)
   Single source of truth. Pages link this, then add page-specific rules only. */
:root{
    --bg:#0e1116; --surface:#151a21; --surface2:#1b222c;
    --ink:#e6e9ee; --muted:#8b95a3; --faint:#5b6572;
    --border:#242c38; --accent:#7ab8c9; --accent-dim:#3d6572;
    --ok:#7fb98a; --warn:#d4a94e; --err:#d47d7d;
    --mono:'JetBrains Mono','Fira Code',ui-monospace,monospace;
    --sans:'Avenir Next','Segoe UI',system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6}
  ::selection{background:var(--accent-dim);color:#fff}

  .layout{display:grid;grid-template-columns:230px 1fr;max-width:1150px;margin:0 auto;min-height:100vh}
  nav{border-right:1px solid var(--border);padding:32px 20px;position:sticky;top:0;height:100vh;overflow-y:auto}
  nav .brand{font-weight:700;font-size:17px;letter-spacing:.2px;margin-bottom:4px}
  nav .brand small{display:block;font-weight:400;color:var(--muted);font-size:11px;margin-top:2px}
  nav ul{list-style:none;margin-top:28px}
  nav li{margin:2px 0}
  nav a{display:block;color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:6px;font-size:13.5px}
  nav a:hover{color:var(--ink);background:var(--surface2)}
  nav a.active{color:var(--accent);background:var(--surface2)}
  nav .foot{margin-top:36px;color:var(--faint);font-size:11px;line-height:1.5}

  main{padding:44px 52px 90px;max-width:860px}

  header.hero{margin-bottom:54px}
  .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
  h1{font-size:31px;font-weight:700;margin:10px 0 12px;letter-spacing:-.3px}
  .lede{color:var(--muted);font-size:15.5px;max-width:560px}
  .meta-line{margin-top:18px;font-family:var(--mono);font-size:11.5px;color:var(--faint)}

  section{margin:50px 0}
  h2{font-size:19px;font-weight:700;margin-bottom:6px;display:flex;align-items:baseline;gap:10px}
  h2 .idx{font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:400}
  .sub{color:var(--muted);font-size:13.5px;margin-bottom:22px}
  p{margin:10px 0;color:#c6ccd6}
  p b,li b{color:var(--ink);font-weight:600}
  code{font-family:var(--mono);font-size:12.5px;background:var(--surface2);padding:1.5px 6px;border-radius:4px;color:var(--accent)}

  ul.plain{list-style:none;margin:12px 0}
  ul.plain li{padding:7px 0 7px 22px;position:relative;color:#c6ccd6;border-bottom:1px solid #1a2029}
  ul.plain li:last-child{border-bottom:0}
  ul.plain li::before{content:'—';position:absolute;left:0;color:var(--accent-dim)}

  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
  .cell{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:15px 17px}
  .cell h4{font-size:13px;font-weight:600;margin-bottom:3px}
  .cell .v{font-family:var(--mono);font-size:12px;color:var(--muted);word-break:break-word}
  .cell .big{font-size:22px;color:var(--ink);font-weight:700;font-family:var(--mono)}
  .cell .tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:2px 7px;border-radius:99px;margin-top:8px}
  .t-live{background:#1d3328;color:var(--ok)} .t-planned{background:#33301d;color:var(--warn)}
  .t-off{background:#332020;color:var(--err)} .t-base{background:#1d2a33;color:var(--accent)}

  table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px}
  th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-align:left;padding:8px 10px;border-bottom:1px solid var(--border)}
  td{padding:9px 10px;border-bottom:1px solid #1a2029;vertical-align:top;color:#c6ccd6}
  tr:hover td{background:var(--surface)}
  td .m{font-family:var(--mono);font-size:11.5px;color:var(--accent)}

  .thread{padding:13px 0;border-bottom:1px solid #1a2029}
  .thread:last-child{border-bottom:0}
  .thread h4{font-size:14px;font-weight:600;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .thread .where{font-family:var(--mono);font-size:10px;color:var(--faint);font-weight:400}
  .thread p{font-size:13px;color:var(--muted);margin:4px 0 0}

  .log{border-left:1px solid var(--border);margin:22px 0 0 8px}
  .log-entry{position:relative;padding:0 0 26px 26px}
  .log-entry::before{content:'';position:absolute;left:-4.5px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--accent-dim);border:2px solid var(--bg)}
  .log-entry.major::before{background:var(--accent)}
  .log-entry .date{font-family:var(--mono);font-size:11px;color:var(--accent)}
  .log-entry h4{font-size:14px;font-weight:600;margin:4px 0 3px}
  .log-entry p{font-size:13.5px;color:var(--muted);margin:2px 0}
  .log-entry code{font-size:11px}

  footer{border-top:1px solid var(--border);margin-top:70px;padding-top:22px;font-family:var(--mono);font-size:11px;color:var(--faint);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

  @media(max-width:860px){
    .layout{grid-template-columns:1fr}
    nav{position:static;height:auto;border-right:0;border-bottom:1px solid var(--border);padding:20px}
    main{padding:30px 22px 60px}
    .grid2{grid-template-columns:1fr}
  }