:root { --ink:#1a1714; --paper:#f4efe6; --card:#fffdf8; --line:#e4d9c8; --accent:#c45c26; --muted:#6f675c; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.45 "Georgia", serif; background:var(--paper); color:var(--ink); }
a { color:inherit; }
.top { display:flex; justify-content:space-between; align-items:center; padding:1.1rem 1.5rem; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.logo { display:inline-flex; align-items:center; gap:0.5rem; text-decoration:none; color:#1a1714; }
.logo img { height:2.85rem; width:auto; display:block; background:transparent; border:0; padding:0; box-shadow:none; }
.logo span { font-family:Georgia, serif; font-size:1.65rem; font-weight:600; white-space:nowrap; line-height:1; }
nav { display:flex; gap:1rem; align-items:center; font-family:system-ui,sans-serif; font-size:.92rem; flex-wrap:wrap; }
nav a { text-decoration:none; color:var(--muted); }
.btn { background:var(--ink); color:var(--paper) !important; padding:.45rem .8rem; border-radius:999px; }
main { max-width:860px; margin:0 auto; padding:2.5rem 1.25rem 4rem; }
h1 { font-size:2.4rem; font-weight:500; line-height:1.15; margin:0 0 1rem; }
.lede { font-size:1.15rem; color:var(--muted); max-width:36rem; }
.doors { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:2rem 0; }
.door { background:var(--card); border:1px solid var(--line); padding:1.4rem; text-decoration:none; min-height:8rem; }
.door strong { display:block; font-size:1.2rem; margin-bottom:.4rem; }
.door span { color:var(--muted); font-family:system-ui,sans-serif; font-size:.92rem; }
.row { display:flex; gap:.6rem; margin:1rem 0 1.5rem; }
input, textarea, select { width:100%; padding:.7rem .8rem; border:1px solid var(--line); background:var(--card); font:inherit; }
textarea { min-height:5.5rem; }
label { display:block; font-family:system-ui,sans-serif; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:1rem 0 .35rem; }
button { font:inherit; font-family:system-ui,sans-serif; background:var(--accent); color:white; border:0; padding:.7rem 1.1rem; cursor:pointer; }
.card { background:var(--card); border:1px solid var(--line); padding:1.1rem 1.2rem; margin:0 0 .8rem; }
.card:hover { border-color: var(--muted); }
.card h3 { margin:0 0 .3rem; font-size:1.2rem; }
.meta { font-family:system-ui,sans-serif; font-size:.85rem; color:var(--muted); }
.example { font-family:system-ui,sans-serif; font-size:.72rem; color:var(--accent); letter-spacing:.04em; text-transform:uppercase; }
.err { color:#9b1c1c; font-family:system-ui,sans-serif; }
.ok { background:#eaf3e4; padding:.8rem 1rem; margin:1rem 0; }
h2 { font-size:1.35rem; font-weight:500; margin:2rem 0 .8rem; }
.matches { margin-top:2.2rem; }
@media (max-width:640px) { .doors { grid-template-columns:1fr; } h1 { font-size:1.8rem; } }

#auth-nav { display:flex; gap:1rem; align-items:center; }
.nav-name { color:var(--ink); max-width:8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; font-weight:600; }
.unpublished { font-family:system-ui,sans-serif; font-size:.72rem; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; }
.card.dim { opacity:.72; }
.card-actions { font-family:system-ui,sans-serif; font-size:.9rem; }
.card-actions a { color:var(--accent); text-decoration:none; }
.note { background:var(--card); border:1px solid var(--line); padding:1rem 1.1rem; }
input[readonly] { color:var(--muted); }


.filters { display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0 1.5rem; align-items:center; }
.filters input, .filters select { width:auto; flex:1 1 8rem; }
.filters button { flex:0 0 auto; }

/* Terms is a plain nav link like the others; accent + weight only when it is the current page (SSR sets aria-current on /terms, app.js on #/terms). */
nav a.terms-link[aria-current="page"] { color:var(--accent); font-weight:600; }
.risk { font-family:system-ui,sans-serif; font-size:1rem; color:var(--ink); background:var(--card); border:1px solid var(--accent); padding:.9rem 1.05rem; margin:1.4rem 0 0; max-width:36rem; }
.risk a { color:var(--accent); font-weight:600; }
.terms p { font-size:1.15rem; max-width:36rem; margin:0 0 .9rem; }
/* Checkbox sits in the left gutter; the label text and the Terms link flow as ONE inline run that wraps naturally (a flex row split the text nodes and the link into columns). */
label.accept { display:block; position:relative; padding-left:1.85rem; text-transform:none; letter-spacing:0; font-size:.98rem; color:var(--ink); margin:1.2rem 0 .4rem; line-height:1.4; }
label.accept input { position:absolute; left:0; top:0; width:auto; margin-top:.2rem; }
label.accept a { color:var(--accent); font-weight:600; }

.peer-label { font-family:system-ui,sans-serif; font-size:.82rem; color:var(--muted); margin:.35rem 0 .5rem; }
.peer-ratings { margin:.6rem 0 0; }
.rate-row { font-family:system-ui,sans-serif; font-size:.92rem; margin:.2rem 0; }
.rate-form { margin:1rem 0 0; }
.rate-form select { width:auto; max-width:8rem; }
.rate-msg { margin:.5rem 0 0; }

.card-link { display:block; text-decoration:none; color:inherit; }
.card-link .card { margin-bottom:.8rem; }
.msg-body { margin:.35rem 0 0; }
.thread-compose { margin-top:1.4rem; }
.terms h2 { font-size:1.2rem; margin:1.6rem 0 .6rem; }
.card-link .preview { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Account page — clarity only, same look */
.account-section { margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); max-width: 28rem; }
.account-section h2 { margin-top: 0; }
.card > h2:first-child{margin-top:0}
.account-pw-form { margin-top: .8rem; }
.btn-quiet { background: transparent; color: var(--muted); border: 1px solid var(--line); margin-left: .4rem; }
.btn-logout { display: inline-block; font-family: system-ui, sans-serif; text-decoration: none; color: var(--paper); background: var(--ink); padding: .55rem 1rem; border-radius: 4px; }

.avatar-row { display:flex; gap:1rem; align-items:flex-start; margin:0 0 1.2rem; }
.avatar-preview { width:4.5rem; height:4.5rem; border-radius:999px; overflow:hidden; background:var(--line); border:1px solid var(--line); flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.avatar-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.avatar-fallback { font-family:system-ui,sans-serif; font-size:1.6rem; color:var(--muted); font-weight:600; }
.avatar-controls { flex:1 1 auto; min-width:0; }
.avatar-controls input[type=file] { font-family:system-ui,sans-serif; font-size:.9rem; padding:.35rem 0; border:0; background:transparent; }


/* Avatar display placement — Design v1 */
.avatar {
  border-radius: 999px;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-sm { width: 2rem; height: 2rem; }
.avatar-md { width: 2.5rem; height: 2.5rem; }
.avatar-lg { width: 4.5rem; height: 4.5rem; }
.avatar-nav { width: 1.5rem; height: 1.5rem; }
.avatar .avatar-fallback {
  font-family: system-ui, sans-serif;
  color: var(--muted);
  font-weight: 600;
  line-height: 1;
}
.avatar-sm .avatar-fallback { font-size: 0.85rem; }
.avatar-md .avatar-fallback { font-size: 1rem; }
.avatar-lg .avatar-fallback { font-size: 1.6rem; }
.avatar-nav .avatar-fallback { font-size: 0.7rem; }

.meta-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.meta-row .meta { margin: 0; }

.inbox-card {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.inbox-card .inbox-body { flex: 1 1 auto; min-width: 0; }
.inbox-card .inbox-body h3 { margin: 0 0 0.3rem; }

.thread-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
.thread-head h1 { margin: 0; }

.nav-account {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: inherit;
  max-width: 10rem;
}
.nav-account .nav-name {
  max-width: 7rem;
}

/* Terms + 18+ acceptance */
label.accept + label.accept { margin-top: .7rem; }
label.accept + .meta { margin: .15rem 0 0 1.85rem; max-width: 32rem; }

/* Site footer — SPEC-about-contact-2026-10-08 §7 (minimal footer, meta style) */
.site-footer { border-top:1px solid var(--line); }
.site-footer-inner { max-width:860px; margin:0 auto; padding:2rem 1.25rem 3rem; }
.site-footer a { color:var(--muted); text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }

/* About & contact — SPEC-about-contact-2026-10-08 */
.about > * { max-width:36rem; }
.about .lede { max-width:36rem; }
.about-risk { margin:2rem 0 0; }
.about-risk h2 { font-family:Georgia, serif; color:var(--ink); margin:0 0 .5rem; }
.about-risk p { margin:0; }
.about-divider { border:0; border-top:1px solid var(--line); margin:2rem 0 1.2rem; }
.about-divider + h2 { margin-top:0; }
.contact-form textarea { resize:vertical; min-height:9.5rem; }
.contact-form button { min-height:44px; margin-top:1rem; }

/* Shared form feedback — guardrails §7 (Design amend 2026-10-08), used by contact form */
.field-help, .field-count { margin:6px 0 0; }
.field-count { text-align:right; }
.field-count.at-limit { color:#9b1c1c; }
.field-err { color:#9b1c1c; font-family:system-ui,sans-serif; font-size:.9rem; margin:6px 0 0; }
.form-msg { color:#9b1c1c; font-family:system-ui,sans-serif; font-size:.9rem; margin:1rem 0 0; }
.form-msg:empty { display:none; }
.form-msg + button { margin-top:.5rem; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color:#9b1c1c; }
/* Design call 2026-10-08 (QA fix 4:07 PM): an errored field keeps its red 1px edge while focused.
   Explicit 2px --ink ring, offset 2px OUTSIDE the border (Chrome's default "auto" ring sits on the border). */
input[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus, select[aria-invalid="true"]:focus { border-color:#9b1c1c; outline:2px solid var(--ink, #1a1714); outline-offset:2px; }
button[aria-busy="true"] { opacity:.7; cursor:default; }
.contact-privacy { margin:8px 0 0; max-width:36rem; }
.hp-field { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.contact-ok:focus { outline:none; }
.contact-ok { color:var(--ink); font-family:Georgia, serif; font-size:16px; }

/* Messaging unread state — SPEC-messaging-unread-2026-10-08 */
/* Logged-in only: logged-out Log in / Sign up stay exactly as before. */
#auth-nav.is-authed { flex-wrap:wrap; row-gap:0; }
#auth-nav.is-authed a { display:inline-flex; align-items:center; min-height:44px; }
.nav-inbox { white-space:nowrap; }
.badge-count { display:inline-block; margin-left:5px; height:18px; min-width:18px; padding:0 5px; border-radius:9px; background:#1a1714; color:#fffdf8; font-family:system-ui,sans-serif; font-size:11px; font-weight:700; line-height:18px; text-align:center; font-variant-numeric:tabular-nums; box-sizing:border-box; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#c45c26; margin-right:6px; vertical-align:middle; flex:0 0 auto; }
.unread-count { color:var(--ink); font-weight:600; }
.account-inbox-meta { display:flex; align-items:center; }
a.btn-quiet-link { display:inline-flex; align-items:center; min-height:44px; padding:0 1.1rem; margin-left:0; font-family:system-ui,sans-serif; text-decoration:none; }
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.inbox-title-row { display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; }
.inbox-title-row h3 { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inbox-time { flex:0 0 auto; display:inline-flex; align-items:center; font-family:system-ui,sans-serif; font-size:.8rem; color:var(--muted); white-space:nowrap; }
.inbox-card.is-unread h3 { font-weight:700; }
.inbox-card.is-unread .inbox-name, .inbox-card.is-unread .preview { color:var(--ink); font-weight:600; }
.inbox-card.is-read h3 { font-weight:500; }
.inbox-card.is-read .inbox-name, .inbox-card.is-read .preview { color:var(--muted); font-weight:400; }
.card-link .preview { margin:0; }
.inbox-body .meta { margin:0 0 .2rem; }
.open-thread { margin-top:1.8rem; }
.open-thread .meta { margin:0 0 4px; display:flex; align-items:center; }
.open-thread-action { margin:.8rem 0 0; }
a.button-link { display:inline-flex; align-items:center; min-height:44px; font-family:system-ui,sans-serif; background:var(--accent); color:white; border:0; padding:.7rem 1.1rem; text-decoration:none; }
.msg-body { overflow-wrap:anywhere; }

/* Listing forms — SPEC-post-teacher-error-busy-2026-10-08 (uses shared feedback rules above) */
#f .field-count + label, #f .field-err + label { margin-top:1rem; }
#f .form-msg { margin:1rem 0 0; }
#f .form-msg + .form-action { margin-top:.5rem; }