/* ---------------------------------------------------------------------------
   /gop-y — the review page.

   Its own file, loaded only by that page, for the reason written into `PageMeta.styles`:
   `app.css` is inside doc 54's 30 KB first-screen budget and is downloaded by every
   reader of every Điều. A kilobyte of star ratings has no business in it.

   It borrows the site's tokens and its `.panel` treatment and adds only what has no
   equivalent anywhere else: a score block, a histogram, and a star control that is five
   radio inputs rather than a script.
   --------------------------------------------------------------------------- */

/* `.notice` is defined in panes.css, which a server-rendered page never loads — the
   trap already recorded once as a page that does not load its own stylesheet. Redefined
   here rather than moved, because moving it would put it in front of every reader of
   every document page to serve two lines on this one. */
.fb-write .notice{border:1px solid var(--line);border-left:3px solid currentColor;
  border-radius:12px;padding:12px 14px;margin:0 0 16px;color:var(--high)}
.fb-write .notice.bad{color:var(--low)}
.fb-write .notice p{margin:0}

/* --- the hero -----------------------------------------------------------

   `.dochero` and `.rail` are borrowed wholesale from doc.css rather than redrawn here,
   and that is the whole of this page's layout: the gradient wash over `banner.jpg`, the
   two-column grid above 1120px, the sticky aside. The mockup for this page is that band
   and that column, so the honest way to build it was to use the ones the document pages
   already wear — a second hero with its own measurements would have been the same design
   drawn twice, drifting from the next change to doc.css.

   Only the differences live below. */

/* The document hero caps its title at 62% so a long one stops before the photograph.
   This title is three words, so the cap is the wrong constraint — but the lead under it
   is prose and does need a measure. */
.doc-page .fb-hero h1{max-width:none;margin:0 0 10px}
.fb-hero .lead{font-size:15px;line-height:1.65;color:var(--muted);margin:0;max-width:52ch}
/* Two-tone, as the mockup draws it: the noun in ink, the qualifier in the site's red.
   One span, no second font, and it degrades to a single colour anywhere the variable is
   missing. */
.fb-h1-accent{color:var(--accent)}

.panel + .panel{margin-top:20px}

/* --- section headings with an icon tile ---------------------------------- */

/* The mockup marks every card with a round tinted tile. It is a heading decoration, so
   it goes inside the h2 and is laid out by it: no absolute positioning, and a heading
   that wraps takes the tile with it. */
.fb-top h2,.fb-write h2,.fb-list h2,.fb-side h2{display:flex;align-items:center;gap:10px}
.fb-ico{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;
  place-items:center;background:var(--accent-soft);color:var(--accent)}
.fb-ico svg{width:19px;height:19px}
.fb-side .fb-ico{width:28px;height:28px;border-radius:8px}
.fb-side .fb-ico svg{width:16px;height:16px}

/* --- the score block ---------------------------------------------------- */

/* Two columns where there is room, stacked below 640px. The number and the bars are one
   statement — an average with no distribution beside it is the number that hides four
   one-star reviews behind two fives. */
.fb-score{display:grid;grid-template-columns:minmax(160px,auto) 1fr;gap:24px 32px;
  align-items:center}
.fb-score.empty{grid-template-columns:1fr;gap:4px}
.fb-score-head{text-align:center}
.fb-avg{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.fb-avg strong{font-size:44px;line-height:1;font-family:var(--serif);color:var(--head)}
/* The "not enough yet" line sits where the number would, at text size: it is a sentence,
   not a score, and setting it at 44px would make the absence of a rating look like one. */
.fb-avg-none{margin:0 0 4px;font-size:14px;color:var(--muted);max-width:24ch}
.fb-none{margin:0;font-size:16px;color:var(--ink)}
.fb-score-head .quiet{margin:4px 0 0}

.fb-bars{display:grid;gap:6px}
.fb-bar{display:grid;grid-template-columns:34px 1fr 28px;align-items:center;gap:10px;
  font-size:13px;color:var(--muted)}
.fb-bar-track{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.fb-bar-fill{display:block;height:100%;background:var(--accent-solid);border-radius:99px}
.fb-bar-n{text-align:right;font-variant-numeric:tabular-nums}

/* --- stars ------------------------------------------------------------------ */

.stars{color:var(--medium);letter-spacing:1px;white-space:nowrap}

/* The input. Five real radios, hidden but focusable — `display:none` would take them out
   of the tab order and off every screen reader, which is the usual way a star widget
   stops working for the people who most need a keyboard. */
.fb-stars-input{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.fb-stars-input input{position:absolute;opacity:0;width:1px;height:1px}
.fb-stars-input label{cursor:pointer;font-size:30px;line-height:1;color:var(--line);
  padding:2px}
.fb-stars-input label::before{content:"★"}
/* The DOM is 5→1, so "this one and everything after it" in source order is "this one and
   everything to its left" on screen. That is what lets hover and checked light the right
   stars with no script at all. */
.fb-stars-input input:checked ~ label,
.fb-stars-input label:hover,
.fb-stars-input label:hover ~ label{color:var(--medium)}
.fb-stars-input input:focus-visible + label{outline:2px solid var(--accent);
  outline-offset:2px;border-radius:4px}

/* --- the form ----------------------------------------------------------- */

/* `app.css` sets `form{display:flex}` globally, for the search pill and the footer's
   subscription row — both of which are one line of controls. This form is a stack of
   labelled fields, and inherited flex laid it out as a single row with the comment box
   crushed to a quarter of the card. Stated rather than fought field by field. */
.fb-form{display:block;padding-bottom:0;gap:0}

.fb-rating{border:0;padding:0;margin:0 0 16px;min-width:0}
.fb-rating legend{padding:0;margin:0 0 6px;font-size:14px;color:var(--muted)}
.fb-field{display:block;margin:0 0 16px}
.fb-field > span{display:block;font-size:14px;margin:0 0 6px}
.fb-field em{font-style:normal;color:var(--muted)}
.fb-field textarea,.fb-field input{width:100%;box-sizing:border-box;font:inherit;
  font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);color:var(--ink)}
.fb-field textarea{resize:vertical;min-height:110px;line-height:1.6}
.fb-field textarea:focus,.fb-field input:focus{outline:2px solid var(--accent);
  outline-offset:-1px;border-color:transparent}
.fb-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fb-note{margin:14px 0 0;max-width:62ch}

.fb-own-status{margin:0 0 14px;font-size:14px}
.fb-own-status.pending{color:var(--medium)}
.fb-own-status.published{color:var(--high)}
.fb-own-status.rejected{color:var(--low)}

/* --- the list ----------------------------------------------------------- */

.fb-item{padding:18px 0;border-top:1px solid var(--line)}
.fb-item:first-of-type{border-top:0;padding-top:6px}
.fb-item-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.fb-who{font-weight:600}
.fb-when{font-size:13px}
.fb-body{margin:0;line-height:1.65;white-space:pre-wrap}

/* The team's reply, indented under the review it answers — the app store shape, and the
   reason it reads as a reply rather than as a second review. */
.fb-reply{margin:12px 0 0;padding:10px 14px;border-left:3px solid var(--accent);
  background:var(--accent-soft);border-radius:0 8px 8px 0}
.fb-reply p{margin:0;font-size:14px;line-height:1.6}
.fb-reply-who{font-weight:600;color:var(--accent);margin:0 0 2px!important;font-size:13px!important}

/* --- the right-hand column ----------------------------------------------- */

/* `.rail` brings its own grid placement, stickiness and padding from doc.css. What it
   does not bring is anything about lists, because the rail it was written for holds
   relation rows rather than prose. */
.fb-side h2{font-size:16px;margin:0 0 12px}
.fb-steps,.fb-links{margin:0;padding:0;list-style:none}
.fb-steps li{position:relative;padding:0 0 0 22px;margin:0 0 10px;font-size:13px;
  line-height:1.55;color:var(--muted);counter-increment:fbstep}
.fb-steps{counter-reset:fbstep}
/* Numbered by CSS rather than by <ol>, so the marker can be a tinted disc that sits on
   the text's own baseline; an <ol> marker cannot be styled into one without the same
   amount of CSS and loses the numbering to the list when a step wraps. */
.fb-steps li::before{content:counter(fbstep);position:absolute;left:0;top:1px;
  width:16px;height:16px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent);font-size:10px;font-weight:700;display:grid;place-items:center}
.fb-steps li:last-child{margin-bottom:0}
.fb-links li{margin:0 0 2px}
/* Colour and underline are set explicitly. The site styles links inside its own blocks
   and these sit in a rail nothing had styled before, so without this they fall back to
   the browser's blue underline — which on a page of red and ink reads as a different
   site's markup pasted in. Measured on the first render. */
.fb-links a{display:block;padding:8px 0;font-size:13px;line-height:1.45;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.fb-links a:hover{color:var(--accent)}
.fb-links li:last-child a{border-bottom:0}

/* The sign-in button is disabled because the route does not exist yet, not because
   something is loading — and `cursor:progress`, which app.css gives every disabled
   button, says the second. A reader waiting for a spinner that will never arrive is a
   worse answer than a plain "not available". */
.fb-write button[disabled]{cursor:not-allowed}

@media (max-width:640px){
  .fb-score{grid-template-columns:1fr}
  .fb-avg strong{font-size:36px}
}

/* The sign-in call to action. An `<a>`, not a button: it is a navigation, so it must be
   openable in a new tab and reachable with scripting off. Painted like the site's primary
   button because that is what it does — `button` styling in app.css is bound to the
   element rather than to a class, so it has to be restated rather than borrowed. */
.fb-signin{display:inline-block;padding:12px 16px;border-radius:8px;
  background:var(--accent-solid);color:var(--on-accent);text-decoration:none;
  font-weight:600;font-size:15px}
.fb-signin:hover{filter:brightness(1.08);color:var(--on-accent)}