/* Everything that renders a rating: the star display, the star input, the
 * distribution histogram, the three CommentCard variants and the three
 * PrivacyBanner severities (UX_SPEC.md §7 #1, #4, #14).
 *
 * ★ The anonymous and revealed cards are styled here as two separate rules
 *   because they are two separate templates fed by two separate service calls.
 *   There is no rule in this file that hides an identity — if a role may not
 *   see a name, the name is absent from the response (UX_SPEC.md §0.6).
 */

/* ——— StarRating · display ————————————————————————————————— */
.stars{position:relative;display:inline-block;line-height:var(--lh-flat);white-space:nowrap}
.stars .bg{color:var(--color-star-empty);letter-spacing:var(--track-star)}
/* Absolutely positioned — see the D1 note in table.css for why every scroll
   container these appear inside must be position:relative. */
.stars .fg{
  position:absolute;left:var(--sp-0);top:var(--sp-0);
  overflow:hidden;color:var(--color-star);letter-spacing:var(--track-star);white-space:nowrap;
}
.stars.s{font-size:var(--sz-star-s)}
.stars.m{font-size:var(--sz-star-m)}
.stars.l{font-size:var(--sz-star-l)}
.stars.xl{font-size:var(--sz-star-xl)}

.rating{display:inline-flex;align-items:baseline;gap:var(--sp-2);white-space:nowrap}
.rating .val{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:var(--fs-3);font-weight:var(--fw-med)}
.rating .cnt{color:var(--ink-3);font-size:var(--fs-1)}
/* "No ratings yet" — never "0.0" (view.RatingSummary.HasRatings). */
.norating{color:var(--ink-3);font-size:var(--fs-1);font-style:italic}

/* ——— StarRating · input. DOM order 5→1, reversed visually, so the CSS
   sibling combinator can light up every star up to the checked one. ——— */
.starfield{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:var(--sp-1)}
.starfield input{position:absolute;opacity:0;width:var(--bw-1);height:var(--bw-1)}
.starfield label{
  cursor:pointer;font-size:var(--sz-star-xl);line-height:var(--lh-flat);
  color:var(--color-star-empty);padding:var(--sp-0) var(--sp-1);border-radius:var(--r-1);
}
.starfield input:checked ~ label{color:var(--color-star)}
.starfield:hover input:checked ~ label{color:var(--color-star-empty)}
.starfield label:hover,.starfield label:hover ~ label{color:var(--color-star)}
.starfield input:focus-visible + label{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-off)}
.starfield-row{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.starfield-row .hint{color:var(--ink-3);font-size:var(--fs-1)}

/* ——— Distribution bars (5→1) ——————————————————————————— */
.dist{display:grid;gap:var(--sp-2);min-width:0}
.distrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp-3);font-size:var(--fs-1)}
.distrow .lb{font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.distrow .track{height:var(--h-dist);background:var(--paper-inset);border:var(--bw-1) solid var(--rule)}
.distrow .fillbar{display:block;height:100%;background:var(--color-star);width:var(--w,0%)}
.distrow .ct{font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--ink-3);min-width:var(--min-ct);text-align:right}

.bigscore{text-align:center;flex:0 0 auto}
.bigscore .v{font-family:var(--font-display);font-size:var(--fs-9);line-height:var(--lh-tight)}
.scorecard{display:flex;gap:var(--sp-6);flex-wrap:wrap;align-items:center}
.scorecard .dist{flex:1 1 var(--fx-dist)}

/* ——— PrivacyBanner: one component, three severities ————————— */
.banner{display:flex;gap:var(--sp-4);padding:var(--sp-4);border:var(--bw-1) solid;border-left-width:var(--bw-4)}
.banner svg{width:var(--sz-icon-lg);height:var(--sz-icon-lg);flex:0 0 auto;margin-top:var(--sp-1)}
.banner .bt{font-size:var(--fs-2);line-height:var(--lh-body)}
.banner .bt strong{font-weight:var(--fw-bold)}
.banner .bt small{display:block;margin-top:var(--sp-3);font-size:var(--fs-0);opacity:var(--op-soft);line-height:var(--lh-snug)}
.banner-anon{background:var(--color-info-tint);border-color:var(--color-info-rule);border-left-color:var(--color-info);color:var(--color-info)}
.banner-anon .bt{color:var(--ink)}
.banner-private{background:var(--color-private-tint);border-color:var(--color-private);border-left-color:var(--color-private);color:var(--color-private)}
.banner-private .bt{color:var(--ink)}
.banner-admin{background:var(--color-admin-tint);border-color:var(--color-admin-rule);border-left-color:var(--color-admin);color:var(--color-admin-ink)}
.banner-admin .bt{color:var(--color-admin-ink)}

/* ——— CommentCard — three variants, three completely different reads ——— */
.cmtlist{display:grid;gap:var(--sp-4)}
.cmt{
  background:var(--paper-2);
  border:var(--bw-1) solid var(--rule);border-left:var(--bw-3) solid var(--rule-strong);
  padding:var(--sp-4) var(--sp-5);
}
.cmt-top{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.cmt-top .when{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-0);color:var(--ink-3);white-space:nowrap}
.cmt-body{font-family:var(--font-display);font-size:var(--fs-4);line-height:var(--lh-snug);color:var(--ink);max-width:var(--w-cmt)}
.cmt-meta{
  margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:var(--bw-1) solid var(--rule);
  font-size:var(--fs-1);color:var(--ink-3);display:flex;gap:var(--sp-4);flex-wrap:wrap;
}
.cmt-meta .k{letter-spacing:var(--track-caps);text-transform:uppercase;font-size:var(--fs-00);font-weight:var(--fw-bold)}

/* variant 1 — ANONYMOUS. The default render for every role, admin included.
   The markup this styles carries no name, no id and no data- attribute from
   which one could be recovered: view.RatingCardAnonymous has no author field. */
.badge-anon{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-1) var(--sp-3);
  background:var(--paper-3);border:var(--bw-1) solid var(--rule-strong);border-radius:var(--r-pill);
  color:var(--ink-3);
  font-size:var(--fs-0);letter-spacing:var(--track-caps);text-transform:uppercase;font-weight:var(--fw-bold);
  cursor:help;
}
.badge-anon svg{width:var(--sz-star-m);height:var(--sz-star-m)}

/* The comment-language chip (task #36). It sits under the comment on ALL THREE
   card variants — anonymous, revealed and private — because it describes the
   text, not the audience.

   Deliberately quieter than .badge-anon: that badge is a promise about a
   person, this one is a fact about a string. It must be legible and must not
   compete with the comment it labels. No text-transform: it renders Malayalam,
   which has no case to transform. */
.cmt-lang{margin-top:var(--sp-2)}
.badge-lang{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-1) var(--sp-3);
  background:var(--paper-2);border:var(--bw-1) solid var(--rule);border-radius:var(--r-pill);
  color:var(--ink-3);
  font-size:var(--fs-0);font-weight:var(--fw-med);
  cursor:help;
}
.badge-lang svg{width:var(--sz-star-m);height:var(--sz-star-m);flex:0 0 auto}

/* variant 2 — REVEALED. Admin only, separate template, deliberately loud. */
.panel-admin{
  border:var(--bw-1) solid var(--color-admin-rule);
  border-left:var(--bw-4) solid var(--color-admin);
  background:var(--color-admin-tint);
}
.adm-strip{
  display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;
  background:var(--color-admin);color:var(--ink-invert);
  padding:var(--sp-3) var(--sp-5);
}
:root[data-theme="night"] .adm-strip{color:var(--paper-3)}
.adm-strip svg{width:var(--sz-icon-lg);height:var(--sz-icon-lg);flex:0 0 auto}
.adm-strip .t{font-size:var(--fs-1);letter-spacing:var(--track-wide);font-weight:var(--fw-bold);text-transform:uppercase}
.adm-strip .s{font-size:var(--fs-1);opacity:var(--op-strip)}
.adm-guard{
  padding:var(--sp-2) var(--sp-5);background:var(--color-admin-tint);
  border-bottom:var(--bw-1) solid var(--color-admin-rule);
  color:var(--color-admin-ink);font-size:var(--fs-1);font-weight:var(--fw-med);
}
.panel-admin .cmtlist{padding:var(--sp-5);background:var(--paper-2)}
.panel-admin .tablewrap{border:0}
.cmt-revealed{border-left-color:var(--color-admin);background:var(--paper-2)}
.pill-revealed{
  display:inline-flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-1) var(--sp-3);
  background:var(--color-admin-tint);border:var(--bw-1) solid var(--color-admin);border-radius:var(--r-1);
  color:var(--color-admin-ink);
}
.pill-revealed svg{width:var(--sz-star-m);height:var(--sz-star-m);flex:0 0 auto}
.pill-revealed .nm{font-weight:var(--fw-bold);font-size:var(--fs-2)}
.pill-revealed .id{font-family:var(--font-mono);font-size:var(--fs-0);opacity:var(--op-soft)}

.btn-admin{background:var(--color-admin-tint);border-color:var(--color-admin);color:var(--color-admin-ink);font-weight:var(--fw-bold)}
.btn-admin:hover{background:var(--color-admin);color:var(--ink-invert);border-color:var(--color-admin)}
.reveal-bar{
  display:flex;gap:var(--sp-4);align-items:center;flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);
  border:var(--bw-1) dashed var(--color-admin-rule);background:var(--color-admin-tint);
  margin-bottom:var(--sp-4);
}
.reveal-bar .t{font-size:var(--fs-1);color:var(--color-admin-ink);flex:1 1 var(--fx-reveal)}
.reveal-bar > svg{width:var(--sz-icon-lg);height:var(--sz-icon-lg);color:var(--color-admin);flex:0 0 auto}

/* variant 3 — PRIVATE. Signed, locked, never public (UX_SPEC.md §4A). */
.cmt-private{border-left-color:var(--color-private);background:var(--color-private-tint)}
.sig{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--color-private);font-size:var(--fs-1);font-weight:var(--fw-med)}
.sig svg{width:var(--sz-star-m);height:var(--sz-star-m)}

.disclose{border:var(--bw-1) solid var(--color-private);background:var(--color-private-tint)}
.disclose > summary{
  cursor:pointer;list-style:none;padding:var(--sp-3) var(--sp-4);
  display:flex;align-items:center;gap:var(--sp-3);
  color:var(--color-private);font-weight:var(--fw-med);font-size:var(--fs-2);
}
.disclose > summary::-webkit-details-marker{display:none}
.disclose > summary svg{width:var(--sz-icon);height:var(--sz-icon);flex:0 0 auto}
.disclose > summary .caret{margin-left:auto;width:var(--sz-icon);height:var(--sz-icon);transition:transform var(--dur) var(--ease)}
.disclose[open] > summary .caret{transform:rotate(90deg)}
.disclose .dbody{padding:var(--sp-0) var(--sp-4) var(--sp-4);background:var(--paper-2);border-top:var(--bw-1) solid var(--color-private)}

/* Rating progress — the instructor's "Rated 12 / 20", ticked by hx-swap-oob. */
.progress-inline{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-1);color:var(--ink-2)}
.progress-inline .track{width:var(--sp-9);height:var(--h-progress);background:var(--paper-inset);border:var(--bw-1) solid var(--rule)}
.progress-inline .fillbar{display:block;height:100%;background:var(--accent);width:var(--w,0%)}