/* justin.town - mobile first. Assume a phone, one hand, poor light, and a man
   who is not looking forward to this. Big targets, high contrast, no clutter. */
:root{
  --bg:#12151a; --card:#1a1f27; --card2:#212832; --line:#2c3440;
  --ink:#e8edf4; --dim:#9aa7b8; --accent:#5aa9e6; --accent-ink:#0b1420;
  --warn:#e6b45a; --ok:#6fcf8b; --danger:#e07a7a;
  --radius:14px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f5f7fa; --card:#fff; --card2:#eef2f7; --line:#d9e0ea;
         --ink:#16202c; --dim:#5a6875; --accent:#1e6fb8; --accent-ink:#fff; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding-bottom:3rem;
}
main{max-width:46rem; margin:0 auto; padding:1rem 1rem 0}
h1{font-size:1.6rem; line-height:1.25; margin:1rem 0 .5rem}
h2{font-size:1.15rem; margin:0 0 .5rem}
h3{font-size:1.05rem; margin:0 0 .35rem; line-height:1.35}
p{margin:0 0 .75rem}
a{color:var(--accent)}

/* top bar -------------------------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:10; background:var(--card);
  border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.25rem; padding:.4rem .75rem; padding-top:max(.4rem, env(safe-area-inset-top));
}
.topbar nav{display:flex; gap:.15rem; flex-wrap:wrap}
.topbar nav a{
  color:var(--dim); text-decoration:none; padding:.55rem .7rem; border-radius:10px;
  font-weight:600; font-size:.95rem; display:inline-flex; align-items:center; gap:.35rem;
}
.topbar nav a.on{background:var(--card2); color:var(--ink)}
.topbar .who{display:flex; gap:.6rem; align-items:center; font-size:.8rem}
.topbar .who a{color:var(--dim); text-decoration:none}
.ro{background:var(--card2); color:var(--dim); padding:.15rem .45rem;
    border-radius:99px; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em}
.badge{background:var(--warn); color:#1a1200; border-radius:99px;
  font-size:.75rem; font-weight:700; padding:0 .4rem; min-width:1.2rem; text-align:center}

/* blocks --------------------------------------------------------------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem; margin:0 0 1rem}
.card.narrow{max-width:24rem; margin:3rem auto}
.card.accent{border-color:var(--accent)}
.card.callout{background:var(--card2); border-left:4px solid var(--warn)}
.section{margin:0 0 .5rem}
.section>h2{margin-top:1.5rem}
.lede{color:var(--dim); margin-bottom:1rem}
.muted{color:var(--dim)}
.help{color:var(--dim); font-size:.92rem; margin-bottom:.75rem}
time{color:var(--dim); font-size:.8rem; display:block; margin-top:.25rem}
footer{max-width:46rem; margin:2rem auto; padding:0 1rem; color:var(--dim); font-size:.8rem}

.flash{padding:.7rem .9rem; border-radius:10px; margin:0 0 1rem; font-weight:600}
.flash.ok{background:rgba(111,207,139,.15); color:var(--ok); border:1px solid var(--ok)}
.flash.error{background:rgba(224,122,122,.15); color:var(--danger); border:1px solid var(--danger)}

/* questions ------------------------------------------------------------ */
.card.q.answered{border-color:var(--line); opacity:.92}
.dot{display:inline-block; width:.5rem; height:.5rem; border-radius:99px;
  background:var(--warn); margin-left:.4rem; vertical-align:middle}
.saved{background:var(--card2); border-radius:10px; padding:.7rem .85rem; margin-bottom:.5rem}
.saved p{margin:0 0 .25rem; white-space:pre-wrap}
details summary{cursor:pointer; color:var(--dim); font-size:.9rem; padding:.4rem 0}

/* forms ---------------------------------------------------------------- */
label{display:block; margin:0 0 .75rem; font-weight:600; font-size:.95rem}
input,textarea,select{
  width:100%; margin-top:.3rem; padding:.7rem .75rem; font:inherit; font-weight:400;
  color:var(--ink); background:var(--bg); border:1px solid var(--line);
  border-radius:10px; -webkit-appearance:none; appearance:none;
}
textarea{resize:vertical; min-height:5.5rem}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent); outline-offset:1px}
label.radio{
  display:flex; align-items:flex-start; gap:.6rem; font-weight:400;
  background:var(--card2); border:1px solid var(--line); border-radius:10px;
  padding:.7rem .8rem; margin-bottom:.4rem; cursor:pointer;
}
label.radio input{width:auto; margin:.25rem 0 0; flex:none; -webkit-appearance:radio; appearance:auto}
label.radio:has(input:checked){border-color:var(--accent)}
label.notelabel{margin-top:.75rem; font-weight:400; color:var(--dim); font-size:.9rem}

button{
  font:inherit; font-weight:700; padding:.75rem 1.1rem; border-radius:10px;
  border:1px solid var(--line); background:var(--card2); color:var(--ink);
  cursor:pointer; min-height:2.9rem;
}
button.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
button.ghost{background:transparent; color:var(--dim); font-weight:600}
button.ghost.danger{color:var(--danger)}
button.small{padding:.45rem .8rem; min-height:2.2rem; font-size:.9rem}
.row{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem}
.q-form{margin-top:.25rem}

.filebox{
  display:block; border:2px dashed var(--line); border-radius:12px;
  padding:1.1rem .9rem; text-align:center; color:var(--dim); font-weight:600;
  background:var(--card2);
}
.filebox input{position:absolute; width:1px; height:1px; opacity:0}
.filebox span{display:block}
.filebox.audio{border-style:solid; border-color:var(--accent); color:var(--accent)}

/* lists ---------------------------------------------------------------- */
.task{display:flex; gap:.75rem; align-items:flex-start; justify-content:space-between;
  padding:.65rem 0; border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:0}
.task p{margin:.2rem 0 0; font-size:.92rem}
.task form{flex:none}
.update{padding:.75rem 0; border-bottom:1px solid var(--line)}
.update:last-child{border-bottom:0}
.update.pinned{border-left:3px solid var(--accent); padding-left:.75rem}
.update .body{margin-top:.4rem}
ul.docs,ul.notes,ul.done{list-style:none; margin:0; padding:0}
ul.docs li,ul.notes li{padding:.6rem 0; border-bottom:1px solid var(--line)}
ul.docs li:last-child,ul.notes li:last-child{border-bottom:0}
.meta{display:block; color:var(--dim); font-size:.82rem}
.meta.note{font-style:italic}
ul.notes p{margin:.3rem 0 0; white-space:pre-wrap}
audio{width:100%; margin:.4rem 0}
table.act{width:100%; border-collapse:collapse; font-size:.82rem}
table.act th,table.act td{text-align:left; padding:.35rem .5rem; border-bottom:1px solid var(--line)}
table.act th{color:var(--dim); font-weight:600}

@media (max-width:30rem){
  main{padding:.75rem .75rem 0}
  h1{font-size:1.4rem}
  .topbar nav a{padding:.5rem .55rem; font-size:.9rem}
}