/* Community Hub: ratings, comments, report dialog, home, author, /me and sign-in page styles
   (chunk 11). Loaded on every page after site.css; uses its tokens only. No inline styles:
   dynamic widths are site.css .w-N classes. */

/* ---------- rating ---------- */
.social{margin:var(--s-6) 0 0}
.rating{max-width:640px}
.rating h2,.comments h2{border:0;padding:0;margin:0 0 var(--s-3);font-size:1.35rem}
.rating-summary{margin:0 0 var(--s-2)}
.stars.big{font-size:1rem}
.stars.big .star-bar{font-size:1.5rem;width:5.2em}
.stars.big .avg{font-size:1.3rem}
.rating .histo{max-width:360px}
.rate-cta{margin:var(--s-3) 0 0}
.rate fieldset{border:0;margin:var(--s-3) 0 0;padding:0}
.rate legend{font-weight:600;font-size:.92rem;padding:0;margin:0 0 var(--s-1)}
.rate legend .mine{font-weight:400;color:var(--ink-soft)}
.rate fieldset:focus-within{outline:2px solid var(--focus);outline-offset:4px;border-radius:4px}
.rate-stars{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.rate-stars input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.rate-stars label{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--star-off);font-weight:400}
.rate-stars svg{width:32px;height:32px;fill:currentColor;transition:transform .1s ease,color .1s ease}
.rate-stars input:checked~label,.rate-stars label:hover,.rate-stars label:hover~label{color:var(--star)}
.rate-stars input:focus-visible+label svg{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px}
.rate-stars label:hover svg{transform:scale(1.08)}
.rate.busy{opacity:.7}
.rate-status{min-height:1.4em;margin:var(--s-1) 0 0;color:var(--ink-soft)}
@media (max-width:560px){.rate-stars label{min-width:48px;min-height:48px}}

/* ---------- comments ---------- */
.comments{margin:var(--s-6) 0 0;max-width:760px}
.comment-form .field{margin-bottom:var(--s-2)}
.comment-form .counter{margin-left:.4em;font-variant-numeric:tabular-nums}
.comment-form .counter.low{color:var(--bad)}
.comment-form .btn-row{margin-top:0}
.comment-status{margin:0;color:var(--ink-soft)}
.comment-list{list-style:none;margin:var(--s-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-3)}
.comment{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-3) var(--s-4)}
.comment.is-hidden{border-style:dashed;opacity:.9}
.comment article{margin:0}
.comment-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;margin:0 0 .3em;font-size:.9rem}
.comment-head time{font-family:var(--f-mono);font-size:.74rem;color:var(--ink-soft)}
.comment-author{font-weight:700;color:var(--ink)}
.comment-body{white-space:pre-wrap;overflow-wrap:anywhere;margin:.2em 0}
.comment-actions{display:flex;gap:var(--s-3);margin-top:.3em}
.comment-actions .linkbtn,.comment-actions a{min-height:32px;display:inline-flex;align-items:center}
.report-item{margin-top:var(--s-4)}

/* ---------- report dialog ---------- */
.report-dialog{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink);
  padding:var(--s-4) var(--s-5);max-width:min(520px,calc(100vw - 32px));width:100%;box-shadow:var(--shadow)}
.report-dialog::backdrop{background:#0009}
.report-dialog h2{border:0;padding:0;margin:0 0 var(--s-2);font-size:1.3rem}
.report-dialog select,.report-dialog textarea{width:100%}
.report-status{min-height:1.4em;margin:var(--s-2) 0 0;color:var(--ink-soft)}
.report-page select{width:100%}

/* ---------- home ---------- */
.hub-hero.no-img{background:radial-gradient(ellipse at 70% 20%,#4a3a22 0%,#221a11 55%,#120e0a 100%);min-height:280px}
.hub-hero.no-img .hero-text{position:relative;right:auto;top:auto;width:auto;min-width:0;margin:0;padding:var(--s-7) var(--s-6);text-align:left;max-width:640px}
.hero-actions{margin-top:var(--s-4)}
.btn-quiet.on-dark{color:var(--hero-ink);border-color:#eadfc466}
.btn-quiet.on-dark:hover{background:#eadfc41f;border-color:var(--hero-ink)}
.home-stats{margin-top:var(--s-3)}
.home-block{margin:var(--s-6) 0 0}
.home-block h2.spread{display:flex}
.home-block h2 .small{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.how-steps{list-style:none;counter-reset:how;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);padding:0;margin:var(--s-3) 0}
@media (min-width:760px){.how-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.how-steps li{counter-increment:how;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-4)}
.how-steps li::before{content:counter(how);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:var(--accent-strong);color:var(--btn-ink);font-family:var(--f-brand);font-weight:700}
.how-steps h3{margin:.5em 0 .2em}
.how-steps p{margin:0;color:var(--ink-soft);font-size:.95rem}

/* ---------- item tiles (home, author) ---------- */
.item-tile .mini-stage{margin:-14px -16px .5em;border-radius:5px 5px 0 0;overflow:hidden}
.item-tile .byline a{position:relative;z-index:1}
.glyph-strip{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 .4em;min-height:44px;padding:8px;background:var(--gw-bg);border-radius:4px}
.glyph-strip img{width:40px;height:40px;border-radius:4px;border:1px solid var(--gw-line)}

/* ---------- author page ---------- */
.author-head h1{margin-bottom:.1em}
.meta-line{font-family:var(--f-mono);font-size:.8rem;color:var(--ink-soft);letter-spacing:.04em;margin:0}
.kind-tabs{display:flex;gap:var(--s-1);border-bottom:1px solid var(--line);margin:var(--s-4) 0 var(--s-4)}
.kind-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-4);font-family:var(--f-mono);font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);border-bottom:2px solid transparent;margin-bottom:-1px}
.kind-tabs a:hover{color:var(--ink);text-decoration:none}
.kind-tabs a[aria-current="page"]{color:var(--accent-strong);border-bottom-color:var(--accent)}

/* ---------- /me ---------- */
.me-head{align-items:flex-start}
.me-head h1{margin-bottom:.1em}
.me-list{list-style:none;padding:0;margin:var(--s-3) 0;display:flex;flex-direction:column;gap:var(--s-3)}
.me-item{margin:0}
.me-item h3{margin:0;font-size:1.1rem}
.me-item .meta{margin:.3em 0}
.me-item .stars{font-size:.8rem}
.plain-list{list-style:none;padding:0;margin:var(--s-3) 0;display:flex;flex-direction:column;gap:var(--s-2)}
.stars-text{font-family:var(--f-mono);font-size:.8rem;color:var(--accent-strong);margin-left:.4em}
.center-card.wide{max-width:760px}

/* ---------- sign-in pages ---------- */
.steps{padding-left:1.3em;margin:var(--s-3) 0}
.steps li{margin:.3em 0}
.pair-wait{color:var(--ink-soft)}
.pair-clock{font-variant-numeric:tabular-nums}

/* ---------- fixes from the chunk-11 browser pass ---------- */
.rating .histo li{grid-template-columns:4.2em minmax(0,1fr) 2.5em}
.rating .histo li>span:first-child{white-space:nowrap}
.hub-hero:not(.no-img)::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#0000 20%,#120e0acc 62%,#120e0ae6 100%)}
.hub-hero .hero-text{z-index:1}
@media (max-width:700px){.hub-hero:not(.no-img)::after{display:none}}