/* The community's rooms share the app palette (one home: account.css tokens, re-stated
   here because these pages do not @import the auth stack). Navy, paper text, gold acts. */
:root{--void:#101725;--navy:#141d2e;--deep:#1c2740;--card:rgba(28,39,64,.6);
  --ink:#f2efed;--faint:rgba(242,239,237,.45);--hair:rgba(242,239,237,.14);
  --gold:#c9a05a;--gold-lit:#e6c98a;
  --sans:'Manrope','Assistant',-apple-system,sans-serif;--display:'Playfair Display',Georgia,serif}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(120% 90% at 50% 0%,var(--deep),var(--void) 70%);
  min-height:100vh;color:var(--ink);font-family:var(--sans);font-size:15.5px;line-height:1.6}
.shell{max-width:760px;margin:0 auto;padding:0 16px 90px}
.top{display:flex;align-items:center;gap:16px;padding:16px 0;
  /* Wrapping is not a small-screen rule: it is what a row does when its contents no longer
     fit, whatever the width. Every band I fixed by hand today opened another one (05/09). */
  flex-wrap:wrap;row-gap:10px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;margin-inline-end:auto}
.mark img{width:40px;height:40px;object-fit:contain}
.mark b{display:block;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase}
.mark span span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.top nav{display:flex;gap:4px}
.top nav button{min-width:42px;min-height:42px;border-radius:100px;border:1px solid transparent;
  background:none;color:var(--faint);font:inherit;font-size:.72rem;font-weight:800;cursor:pointer}
.top nav button[aria-pressed=true]{background:var(--gold);color:#231703}
.mybtn{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:100px;
  border:1px solid var(--hair);color:inherit;text-decoration:none;font-size:.84rem;font-weight:800}
.mybtn:hover{border-color:var(--gold)}

.hello{margin:26px 0 6px}
.eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lit)}
.hello h1{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,6vw,2.6rem);margin:.25em 0 .1em}
.hello p{color:var(--faint);margin:0;max-width:52ch}

.composer{margin-top:22px;border:1px solid var(--hair);border-radius:18px;padding:16px;background:var(--card)}
.composer textarea{width:100%;font:inherit;font-size:1rem;background:none;border:0;color:inherit;
  resize:vertical;line-height:1.55}
.composer textarea:focus{outline:none}
.c-row{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap}
/* Attaching a photo was a 22px line of text — the one control a member reaches for most in
   this room (04/09 design pass). It is a button now, the size of a thumb. */
.c-attach{cursor:pointer;font-size:.84rem;font-weight:700;color:var(--faint);
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;
  border:1px solid var(--hair,rgba(226,238,242,.14));border-radius:100px}
.c-attach:hover{color:var(--gold-lit);border-color:rgba(210,169,95,.45)}
.c-attach input{display:none}
.c-msg{flex:1;font-size:.8rem;color:var(--gold-lit)}
.c-send{padding:11px 24px;border-radius:100px;border:0;background:var(--gold);color:#231703;
  font:inherit;font-weight:800;font-size:.88rem;cursor:pointer}
.c-send:disabled{opacity:.5}
.c-media{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.c-media img{width:64px;height:64px;object-fit:cover;border-radius:10px}
.c-chip{padding:6px 12px;border:1px solid var(--hair);border-radius:100px;font-size:.74rem;font-weight:800}
.composer-door{margin-top:22px;text-align:center}
.composer-door a{color:var(--gold-lit);text-decoration:none;font-weight:700}
.composer-door[hidden]{display:none}

.feed{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.fempty{text-align:center;color:var(--faint);padding:40px 0}
.post{border:1px solid var(--hair);border-radius:18px;padding:16px 18px;background:var(--card)}
.post header{display:flex;align-items:flex-start;gap:12px}
.post header > div{flex:1;min-width:0}
.post header b{font-size:.95rem}
.post header b a{color:inherit;text-decoration:none}
.post header b a:hover{color:var(--gold-lit)}
.psh{display:block;font-style:normal;font-size:.76rem;color:var(--faint)}
.post time{display:block;font-size:.74rem;color:var(--faint)}
.pb{font-style:normal;font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-lit);margin-inline-start:6px}
.pb-a{color:#8fd8cf}
.padm{display:flex;gap:6px}
.padm button{border:1px solid var(--hair);background:none;color:var(--faint);border-radius:9px;
  font:inherit;font-size:.7rem;font-weight:700;padding:5px 10px;cursor:pointer}
.padm button:hover{color:var(--ink);border-color:var(--faint)}
.pav{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.pav-e{display:inline-flex;align-items:center;justify-content:center;background:var(--deep);
  border:1px solid var(--hair);font-weight:800;text-transform:uppercase}
.ptext{margin-top:10px;white-space:pre-wrap;overflow-wrap:anywhere}
.pm{display:block;width:100%;max-height:520px;object-fit:cover;border-radius:12px;margin-top:12px}
video.pm{object-fit:contain;background:#000}
.pm-a{display:block;width:100%;margin-top:12px}
.pq{margin:12px 0 0;border-inline-start:3px solid var(--gold);padding:10px 14px;border-radius:8px;
  background:rgba(16,23,37,.5)}
.pq-by{display:block;font-weight:800;font-size:.84rem}
.pq-by a{color:inherit;text-decoration:none}
.pq-t{display:block;font-size:.9rem;color:var(--faint)}
.post footer{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.post footer button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;
  border-radius:100px;border:1px solid var(--hair);background:none;color:var(--faint);
  font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.post footer button:hover{color:var(--ink);border-color:var(--faint)}
.plike.on{color:#ff9a8a;border-color:rgba(255,154,138,.5)}
.cbox{margin-top:12px;border-top:1px solid var(--hair);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.cbox[hidden]{display:none}
.cmt{display:flex;gap:10px;align-items:flex-start}
.cmt .pav{width:30px;height:30px}
.cmt b{font-size:.82rem;display:block}
.cmt b a{color:inherit;text-decoration:none}
.cmt span{font-size:.9rem;overflow-wrap:anywhere}
.cform{display:flex;gap:8px}
.cform input{flex:1;min-width:0;font:inherit;font-size:.9rem;padding:10px 14px;border-radius:100px;
  border:1px solid var(--hair);background:none;color:inherit}
.cform button{padding:0 18px;border-radius:100px;border:0;background:var(--gold);color:#231703;
  font:inherit;font-weight:800;font-size:.82rem;cursor:pointer}
.feed-more{text-align:center;margin:20px 0}
#more{min-height:44px;padding:0 26px;border-radius:100px;border:1px solid var(--hair);background:none;
  color:inherit;font:inherit;font-weight:800;cursor:pointer}
#more[hidden]{display:none}

.whois{display:flex;gap:18px;align-items:flex-start;margin-top:26px;border:1px solid var(--hair);
  border-radius:20px;padding:20px;background:var(--card)}
.w-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:2px solid var(--gold)}
.w-txt h1{font-family:var(--display);font-weight:400;font-size:1.8rem;margin:0}
.w-hand{margin:2px 0 8px;font-size:.8rem;color:var(--gold-lit)}
.w-bio{margin:0 0 8px;overflow-wrap:anywhere}
.w-since{margin:0;font-size:.8rem;color:var(--faint)}
.w-badge{margin-inline-start:8px;font-size:.64rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-lit)}
.sharewall{margin-top:12px}
.sharewall button{min-height:42px;padding:0 18px;border-radius:100px;border:1px solid var(--hair);
  background:none;color:inherit;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.sharewall button:hover{border-color:var(--gold)}
.sharewall i{font-style:normal;margin-inline-start:10px;font-size:.8rem;color:var(--gold-lit)}

.owner{margin-top:16px;border:1px dashed var(--hair);border-radius:18px;padding:18px;background:rgba(16,23,37,.4)}
.owner h2{margin:0 0 12px;font-size:1rem}
.owner form{display:flex;flex-direction:column;gap:12px}
.owner label{display:flex;flex-direction:column;gap:6px;font-size:.72rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.owner input:not([type=checkbox]):not([type=file]),.owner textarea{font:inherit;font-size:.95rem;
  letter-spacing:0;text-transform:none;color:var(--ink);padding:11px 13px;border-radius:11px;
  border:1px solid var(--hair);background:rgba(16,23,37,.6)}
.owner .o-pub{flex-direction:row;align-items:center;gap:10px;font-size:.86rem;letter-spacing:0;
  text-transform:none;color:var(--ink);font-weight:700;cursor:pointer}
.owner .o-pub input{width:18px;height:18px;accent-color:var(--gold)}
.state{text-align:center;margin-top:60px}
.state a{color:var(--gold-lit)}
[hidden]{display:none!important}
@media(max-width:560px){.whois{flex-direction:column;align-items:center;text-align:center}
  .post header{flex-wrap:wrap}.padm{width:100%;justify-content:flex-end}}

/* 31/08 night polish: the composer wears its author's face; attachments can be taken back;
   times speak like a feed; a translated post offers the original in one tap. */
.c-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.c-head b{font-size:.9rem}
.c-head i{margin-inline-start:auto;font-style:normal;font-size:.78rem;color:#ff9a8a}
.c-th{position:relative;display:inline-block}
.c-th img{width:72px;height:72px;object-fit:cover;border-radius:12px;display:block}
.c-th button,.c-chip button{border:0;background:rgba(16,23,37,.85);color:var(--ink);width:22px;height:22px;
  border-radius:50%;font-size:.7rem;cursor:pointer;line-height:1}
.c-th button{position:absolute;top:-7px;inset-inline-end:-7px}
.ptr{border:0;background:none;color:var(--gold-lit);font:inherit;font-size:.76rem;cursor:pointer;
  padding:0;margin-inline-start:8px;text-decoration:underline dotted;text-underline-offset:3px}
.cin{display:block;text-align:center;color:var(--gold-lit);font-size:.86rem;text-decoration:none;padding:6px 0}
.post{transition:border-color .25s}
.post:hover{border-color:rgba(242,239,237,.28)}

/* 01/09 audit: at 390px the header's right-hand button pushed past the edge -- the row
   never allowed itself to shrink. Measured (.mybtn right=417..425), not guessed. */
@media(max-width:480px){
  .top{flex-wrap:wrap;gap:10px}
  .mark{flex:1 1 auto;min-width:0}
  .mark b{font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top nav{order:3}
  .mybtn{padding:0 13px;font-size:.78rem;flex:0 0 auto}
  .shell{padding-inline:12px}
}

/* the flag and the bell (01/09) */
.prep{opacity:.55}
.bell{position:relative;min-width:42px;min-height:42px;border-radius:50%;border:1px solid var(--hair);
  background:none;color:inherit;font-size:1rem;cursor:pointer}
.bell b{position:absolute;top:-4px;inset-inline-end:-4px;min-width:18px;height:18px;border-radius:9px;
  background:#ff5a45;color:#fff;font-size:.64rem;font-weight:800;display:inline-flex;
  align-items:center;justify-content:center;padding:0 4px}
.bellbox{position:absolute;top:64px;inset-inline-end:16px;z-index:50;width:min(92vw,360px);
  max-height:60vh;overflow:auto;background:var(--deep);border:1px solid var(--hair);
  border-radius:16px;padding:10px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.belli{display:flex;gap:10px;padding:10px;border-radius:10px;align-items:flex-start}
.belli.unread{background:rgba(201,160,90,.1)}
.belli .pav{width:32px;height:32px}
.belli span{font-size:.86rem;line-height:1.45;min-width:0}
.belli i{display:block;font-style:normal;color:var(--faint);font-size:.8rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.belli time{display:block;font-size:.72rem;color:var(--faint)}
.belle{margin:8px;color:var(--faint);font-size:.88rem}
.top{position:relative}

/* follows (the night build) */
.ftabs{display:flex;gap:6px;margin-top:22px}
.ftabs button{min-height:42px;padding:0 20px;border-radius:100px;border:1px solid var(--hair);
  background:none;color:var(--faint);font:inherit;font-size:.84rem;font-weight:800;cursor:pointer}
.ftabs button.on{background:var(--gold);border-color:var(--gold);color:#231703}
.wfbtn{min-height:42px;padding:0 20px;border-radius:100px;border:1px solid var(--gold);
  background:var(--gold);color:#231703;font:inherit;font-size:.84rem;font-weight:800;cursor:pointer;
  margin-inline-end:10px}
.wfbtn.on{background:none;color:var(--gold-lit)}
.w-flw{margin:6px 0 0;font-size:.8rem;color:var(--gold-lit);font-weight:700}

/* a teacher's material inside a post: content is the shop's front door */
.c-workpick{font:inherit;font-size:.84rem;font-weight:700;color:var(--faint);background:none;
  border:1px solid var(--hair);border-radius:100px;padding:8px 12px;max-width:220px}
.pwork{display:flex;gap:14px;align-items:center;margin-top:12px;border:1px solid var(--hair);
  border-radius:14px;padding:12px 14px;text-decoration:none;color:inherit;transition:border-color .2s}
.pwork:hover{border-color:var(--gold)}
.pwork img{width:64px;height:64px;border-radius:10px;object-fit:cover}
.pwork b{display:block;font-size:.95rem}
.pwork i{font-style:normal;color:var(--gold-lit);font-weight:800;font-size:.86rem}

/* audit 03 H3 / 01: a finger needs 44px; on coarse pointers the language buttons grow, on a mouse they keep their size */
@media(pointer:coarse){ .top nav button{min-height:44px;min-width:44px} }


/* ---------- the hand (04/09) ----------
   The acts on a post — lock, delete, "show original", the comment form's own send — were all
   under 32px on a phone, in a room read almost entirely on phones. */
.padm button,.cmt button,.cform button,.ptr,.wfbtn{min-height:38px;padding:0 12px}
.cform{display:flex;gap:8px;align-items:center;margin-top:10px}
.cform input{flex:1;min-height:40px;padding:0 12px}
@media(pointer:coarse){
  .padm button,.cform button,.cform input,.post footer button,.c-attach,.ptr{min-height:44px}
}
@media(max-width:560px){
  .post footer{gap:6px}
  .post footer button{padding:0 12px;font-size:.8rem}
  .padm{display:flex;gap:6px;flex-wrap:wrap}
}

/* One row, on a phone (04/09). The wordmark plus three language chips plus the way back needed
   more than 390px, so the header broke onto two and three lines in every room. The logo already
   links home; the words are what can go. */
@media(max-width:560px){
  /* Two tidy rows, not one clipped one — the same law the other rooms keep. When the way back
     to the dashboard joined this header (05/09) the language chips were pushed off the edge
     and the page grew a sideways scroll; nothing here may leave the screen. */
  .top{gap:8px;row-gap:10px;flex-wrap:wrap}
  .mark > span{display:none}
  .mark img{width:36px;height:36px}
  .top > *{flex:0 0 auto}
  .top nav{margin-inline-start:auto}
  .top nav button{min-width:38px;min-height:40px;font-size:.72rem}
  .top::after{content:"";flex-basis:100%;height:0;order:2}
  .top nav{order:2}
  .mybtn,#bell{order:3}
  .mybtn:first-of-type{margin-inline-start:auto}
}
/* A member who has not named themselves showed as "—" above their own post. */
.post header b a,.post header b{min-width:0}

/* The picture a member chooses for their wall was the browser's raw "Choose File" control. */
.o-file{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  border:1px solid var(--hair,rgba(226,238,242,.14));border-radius:100px;cursor:pointer;
  font-weight:700;font-size:.84rem;color:var(--faint)}
.o-file:hover{color:var(--gold-lit);border-color:rgba(210,169,95,.45)}
.o-file input{display:none}


/* ---------- the type floor (04/09) ----------
   A phone is held at arm's length and often in the sun. Eyebrows, badges and field labels sat
   at nine and ten pixels across these rooms — decoration, not writing. Nothing that carries
   meaning goes below twelve on a small screen; the letter-spacing comes down with it so the
   words stay one shape. */
@media(max-width:560px){
  .eyebrow,.lbl,.k,.pb,.w-badge,.onair,.playlist h2,.playlist li time,
  .mark span span,.panel h2,.block > h2,.owner label,.roles legend,.session .lbl,
  .earn .k,.top nav button,.tiers .you,label > span:first-child{
    font-size:.78rem;letter-spacing:.1em}
}