:root{--cream:#F7F2E6;--forest:#1E3328;--gold:#C9A24A;--sage:#4F6B4F;--ink:#2B2A24;--line:#E2D9C4;--card:#FFFDF8;--muted:#5E5B50;--err:#9B2C1F;--ok:#2F5D3A}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:1.0625rem/1.6 Karla,system-ui,sans-serif}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;color:var(--forest);line-height:1.2}
h1{font-size:2.4rem;margin:.25rem 0 .5rem}
h2{font-size:1.8rem;margin:2.5rem 0 .75rem;padding-bottom:.35rem;border-bottom:1px solid var(--gold)}
h3{font-size:1.45rem;margin:0 0 .35rem}
p{max-width:46rem}
a{color:var(--sage)}
.muted{color:var(--muted)}
header.desk{background:var(--forest);color:var(--cream);padding:.75rem 1rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;position:sticky;top:0;z-index:5}
header.desk .brand{color:var(--cream);text-decoration:none;display:flex;flex-direction:column;line-height:1.1}
header.desk .brand b{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.45rem;font-weight:600;letter-spacing:.02em}
header.desk .brand small{color:var(--gold);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
nav.tabs{display:flex;gap:.25rem;margin-left:auto;flex-wrap:wrap;align-items:center}
nav.tabs a,nav.tabs button{color:var(--cream);text-decoration:none;padding:.55rem .9rem;border-radius:.4rem;font:inherit;font-weight:700;background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;min-height:2.75rem}
nav.tabs a[aria-current]{border-bottom-color:var(--gold)}
nav.tabs a:hover,nav.tabs button:hover{background:#2A4536}
nav.tabs .me{color:#CFC6AE;font-size:.95rem;padding:0 .4rem}
main{max-width:56rem;margin:0 auto;padding:2rem 1rem 4rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:.75rem;padding:1rem 1.15rem;margin:1rem 0}
.card .ctx{color:var(--muted);margin:.25rem 0 .6rem}
.card .ask{font-weight:700;margin:.25rem 0 .75rem}
.tag{display:inline-block;background:#EFE6CF;color:var(--forest);font-size:.8rem;font-weight:700;border-radius:.35rem;padding:.1rem .5rem;margin-right:.35rem;vertical-align:middle}
.tag.gold{background:var(--gold);color:var(--forest)}
.tag.draft{background:#F3D9D3;color:var(--err)}
textarea,select,input[type=text],input[type=password]{width:100%;font:inherit;color:var(--ink);background:#fff;padding:.6rem .7rem;border:1px solid #C9BFA6;border-radius:.5rem}
textarea{min-height:7rem;resize:vertical}
textarea:focus,select:focus,input:focus{outline:2px solid var(--gold);border-color:var(--forest)}
label{font-weight:700}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.6rem}
button.btn,label.btn{background:var(--forest);color:var(--cream);border:0;border-radius:.5rem;padding:.65rem 1.15rem;font:inherit;font-weight:700;min-height:2.75rem;cursor:pointer}
button.btn.ghost,label.btn.ghost{background:transparent;color:var(--forest);border:1px solid var(--forest)}
button.btn.rec{background:var(--gold);color:var(--forest)}
button.btn.rec.on{background:var(--err);color:#fff}
button.btn:disabled{opacity:.5;cursor:default}
button.link{background:none;border:0;color:var(--sage);font:inherit;text-decoration:underline;cursor:pointer;padding:.4rem 0;min-height:2.75rem}
.status{color:var(--muted)}.status.ok{color:var(--ok)}.status.err{color:var(--err);font-weight:700}
.recorder{margin-top:.6rem;padding:.6rem .75rem;border:1px dashed #C9BFA6;border-radius:.5rem;background:#FBF7EC}
.recorder .time{font-variant-numeric:tabular-nums;font-weight:700;color:var(--err)}
.recorder .dot{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;background:var(--err);margin-right:.35rem;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.recorder label.upload{display:inline-flex;align-items:center;cursor:pointer}
.recorder input[type=file]:focus-visible+*,.recorder label.upload:focus-within{outline:2px solid var(--gold)}
.recorder input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
audio{width:100%;max-width:28rem;margin-top:.4rem}
.answer-view{border-left:3px solid var(--gold);padding:.25rem 0 .25rem .75rem;margin:.6rem 0}
.answer-view .who{font-weight:700;color:var(--forest)}
.answer-view .text{white-space:pre-wrap}
details.tx{margin-top:.35rem}details.tx summary{cursor:pointer;color:var(--sage);min-height:2.25rem}
details.tx div{white-space:pre-wrap;color:var(--muted);font-size:.95rem}
details.group{background:var(--card);border:1px solid var(--line);border-radius:.75rem;padding:.4rem 1rem;margin:.75rem 0}
details.group>summary{cursor:pointer;font-weight:700;padding:.6rem 0;min-height:2.75rem}
.filter{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0}
.filter button{background:#fff;border:1px solid #C9BFA6;border-radius:2rem;padding:.4rem .9rem;font:inherit;cursor:pointer;min-height:2.5rem;color:var(--forest)}
.filter button[aria-pressed=true]{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.note .meta{color:var(--muted);font-size:.95rem;margin-bottom:.35rem}
.note .text{white-space:pre-wrap}
.empty{color:var(--muted);font-style:italic}
.login{max-width:24rem;margin:10vh auto 0;padding:0 1rem}
.login .card{padding:1.5rem}
.login h1{text-align:center;margin-bottom:.1rem}
.login .tagline{text-align:center;color:var(--sage);font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:1.2rem;margin:0 0 1.25rem}
.login label{display:block;margin:.75rem 0 .3rem}
.login button{width:100%;margin-top:1.1rem}
@media (max-width:40rem){header.desk{position:static}h1{font-size:2rem}nav.tabs{margin-left:0;width:100%}header.desk{gap:.25rem}}
.file{margin:.6rem 0}
.file img{display:block;max-width:100%;max-height:22rem;border-radius:.5rem;border:1px solid var(--line);margin-bottom:.3rem}
.file video{display:block;width:100%;max-width:36rem;border-radius:.5rem;margin-bottom:.3rem}
.file a{overflow-wrap:anywhere}
.pending{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .75rem;margin-top:.4rem}
.card .body{white-space:pre-wrap;margin:.25rem 0 .75rem}
ol.points{padding-left:1.4rem;margin:.5rem 0 1rem}
li.point{margin:0 0 1rem;padding-bottom:.75rem;border-bottom:1px solid var(--line)}
label.check{display:flex;gap:.7rem;align-items:flex-start;font-weight:400;cursor:pointer;min-height:2.75rem}
label.check input{width:1.5rem;height:1.5rem;margin-top:.15rem;accent-color:var(--forest);flex:none}
details.edit summary{cursor:pointer;color:var(--sage);text-decoration:underline;min-height:2.5rem;padding-top:.4rem}
.progress{font-weight:700;color:var(--forest)}
