/* Account pages: AccountSecurity today, the rest of the account family as it
   ports. The card-form vocabulary itself (.card, .fld, .actions, .btn and
   .btn.ghostbtn, .msg, .pkempty, .pklist) lives in site.css; this sheet carries
   only the page-local helper-text and spacing rules the first edition wrote as
   inline style attributes on AccountSecurity.aspx, centralized under the
   no-inline-CSS rule. The values are the first edition's own, so the rendered
   page is unchanged.

   Loaded through the Head placeholder Literal, after site.css and before
   chrome.css, so anything here overrides site.css at equal specificity. */

/* Card helper prose. The first edition wrote these paragraphs as p.pkempty with
   an inline margin (0 0 14px); .prefhelp is the account family's name for the
   same thing (the AccountSettings vocabulary in the Wave B survey), and the
   bare empty-state look stays .pkempty in site.css. */
.adminwrap .prefhelp{color:var(--muted);font-size:.88rem;margin:0 0 14px}

/* In-label hint, the Register page's span.hint vocabulary: small and faint
   beside the uppercase micro-caps label. The first edition wrote it inline on
   the username field's label. Distinct from Contact's standalone p.hint, per
   the survey's note; this is the in-label form only. */
.adminwrap label .hint{color:var(--faint);font-size:.74rem}

/* The "also sign out my other devices" checkbox row: the first edition's
   inline flex label, verbatim. Only the properties v1 set inline are set here,
   so the computed style (including the uppercase transform the bare label rule
   contributes) is identical to v1's.

   The width:auto that used to sit on the input is gone, 2026-08-05. It was one of
   three private patches around the site for the same cause, the global field skin
   painting a background, a border and eleven pixels of padding onto a checkbox,
   and it only ever fixed the width. The skin now excludes checkboxes at source in
   site.css and sizes them in em so they follow the A-/A+ control; a width here
   would override that and re-break it. */
.adminwrap label.chkrow{display:flex;align-items:center;gap:8px;margin:4px 0 8px;font-size:.9rem;color:var(--muted)}
.adminwrap label.chkrow input{margin:0}

/* ==== The social-foundation account pages (wP-social1, 2026-08-02):
   Starred, Following, Collections, Notifications. Everything below is the
   first edition's own values, hoisted from the inline style attributes and
   head <style> blocks of AccountCollections.aspx and Notifications.aspx.vb
   under the no-inline-CSS rule; the rendered pages are unchanged (ruling
   112). rem and em throughout, no fixed-height box around text, every flex
   row wraps: the A-/A+ control reaches all of it and long names wrap rather
   than spill. ==== */

/* Collections: the card grid (AccountCollections list view). */
.colgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:14px;margin:0 0 18px}
.colcard{border:1px solid var(--edge);border-radius:14px;background:var(--panel2);padding:16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.colcard h3{font-family:var(--serif);font-size:1.05rem;margin:0;line-height:1.3;overflow-wrap:anywhere}
.colcard h3 a{color:var(--ink);text-decoration:none}
.colcard h3 a:hover{color:var(--gold)}
.colmeta{color:var(--faint);font-size:.76rem;text-transform:uppercase;letter-spacing:.09em}
.coldesc{color:var(--muted);font-size:.88rem;line-height:1.45;margin:0;min-width:0}
.colacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
@media (max-width:520px){ .colgrid{grid-template-columns:1fr} }

/* The visibility pill, shared with the public Collection page. */
.vis{display:inline-block;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;padding:2px 8px;border:1px solid var(--edge2);border-radius:999px;color:var(--muted)}
.vis.public{color:var(--gold);border-color:var(--gold)}
.vis.hidden{color:#c56;border-color:#a4443a}

/* One item row in a collection. The checkbox is a real control with a real
   label, so Compare Selected is reachable by keyboard and announced. */
.itemrow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid var(--edge)}
.itemmain{flex:1 1 14rem;min-width:0}
.itemname{font-weight:600;overflow-wrap:anywhere}
.itemname a{color:var(--ink);text-decoration:none}
.itemname a:hover{color:var(--gold)}
.itemtype{color:var(--faint);font-size:.78rem}
.itemacts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* Field skins the v1 page set inline on its own inputs. Scoped under
   .adminwrap so nothing leaks into other surfaces. */
.adminwrap .notebox{width:100%;min-height:3.5em;line-height:1.5;background:var(--ground);border:1px solid var(--edge2);color:var(--ink);border-radius:9px;padding:8px 10px;font-size:.88rem;font-family:var(--sans);resize:vertical}
.adminwrap .rowform input[type=text],.adminwrap .rowform select,.adminwrap .itemacts select{background:var(--ground);border:1px solid var(--edge2);color:var(--ink);border-radius:9px;padding:8px 10px;font-size:.88rem;font-family:var(--sans)}
.adminwrap .rowform input:focus,.adminwrap .rowform select:focus,.adminwrap .notebox:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.rowform{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.rowform .growfld,.adminwrap .growfld{flex:1 1 14rem;min-width:0}
.fldstack{margin-top:10px}
.sflabel{color:var(--faint);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em}
.adminwrap p.hint{color:var(--faint);font-size:.84rem;line-height:1.5;margin:10px 0 0}
.adminwrap .hint.nogap{margin:0}

/* Notifications: the toolbar, the unread marking and the plain-text-shaped
   buttons, all hoisted from Notifications.aspx.vb's inline styles. */
.ntoolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.ntoolbar .selectall{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted)}
.pkitem.nrow{align-items:flex-start}
.pkitem.nrow.unread{border-left:3px solid var(--gold);padding-left:11px}
.pkitem.nrow .nsel{flex:0 0 auto;margin-top:6px;width:auto}
.ndot{flex:0 0 auto;width:8px;height:8px;margin-top:7px;border-radius:50%}
.ndot.on{background:var(--gold)}
.pkitem.nrow.unread .pkname{font-weight:700}
.nbody{color:var(--muted);font-size:.88rem;line-height:1.45;margin:2px 0 0}
/* The open and per-row delete controls are semantically buttons riding the
   one server form, styled as the text they replace (v1 set this inline). */
.nopen,.ndel{background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer;text-align:left;text-decoration:underline}
.nopen{color:inherit}
.ndel{color:var(--muted)}

/* The pager the account lists share (AccountRender.Pager) moved to site.css:
   this file and profile.css carried a byte-for-byte
   identical .acctpager block, and this file's own comment already flagged it
   for collapse. ReportItems.aspx's detail view also calls AccountRender.Pager
   (via a profile.css registration added the same day) making
   this a THREE-family class, so it now lives in the one sheet every one of
   those three families already loads without a registration change: site.css.
*/

/* ===== Your Atlas: the signed-in home feed (AccountHome.aspx) =============
   Hoisted from the first edition's inline <style> block in AccountHome.aspx
   (no inline styles, one canonical copy per behaviour). Every
   selector below was grepped across the whole of App_Themes/Divinity before
   it was written and NONE of them existed anywhere; .fcard's only near-match
   was profile.css's unrelated .prefcard, and the only .facts rule on the site
   is site.css's .dvpage .sec.facts .facts, which is scoped to an entity page
   this one is not.

   THE WHOLE FEED IS ONE GRID OF CARDS and it is built in rem so the A- / A+
   control reaches every part of it. There is no fixed-height box anywhere
   below: a card grows with its own text, which is the only way a two line
   title at 200 percent does not spill out of the thing drawing it. */
.feedsec{margin:0 0 26px}
.feedsec > h3{font-family:var(--serif);font-size:1.12rem;font-weight:600;margin:0 0 12px;color:var(--ink)}
.feedgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:14px}
.fcard{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--edge);
       border-radius:14px;padding:16px 16px 14px;box-shadow:var(--shadow);
       display:flex;flex-direction:column;gap:8px;min-width:0}
/* min-width:0 on every shrinkable member of a flex row, or a long single-word
   title becomes three characters and an ellipsis on a phone. */
.fcard .fmeta{color:var(--faint);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;min-width:0}
.fcard .ftitle{font-family:var(--serif);font-size:1.02rem;font-weight:600;line-height:1.3;margin:0;min-width:0;overflow-wrap:anywhere}
.fcard .ftitle a{color:var(--ink);text-decoration:none}
.fcard .ftitle a:hover{color:var(--gold)}
/* The reason is the point of the card, not decoration. It stays readable
   rather than being shrunk to fit more cards on a screen. */
.fcard .freason{color:var(--muted);font-size:.88rem;line-height:1.45;margin:0;min-width:0}
.fcard .facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
.fcard .facts .btn{font-size:.84rem}
/* v1 set this margin inline on the element; no-inline-CSS puts it here. */
.feedempty{color:var(--muted);margin-top:16px}
/* The new-member panel. Numbered so the order reads as a sequence, which is
   what it is: follow, quiz, join, star, compare. */
.startlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:14px}
.startlist li{background:var(--ground);border:1px solid var(--edge);border-radius:14px;padding:16px;min-width:0}
.startlist h4{font-family:var(--serif);font-size:1rem;margin:0 0 6px;color:var(--ink)}
.startlist p{color:var(--muted);font-size:.88rem;line-height:1.45;margin:0 0 12px}
@media (max-width:520px){
  .feedgrid,.startlist{grid-template-columns:1fr}
}

/* ---- the rating trigger, IN the action row, not below it -------------------
   w2211-ratingspeek, 2026-08-17, owner correction superseding the ruling 430
   layout below it: "I wanted Rate your Purchase as a button just like the
   others so the row is not so long." A <details class="ratepurchase"> whose
   <summary class="btn ghostbtn"> lives INSIDE .frbtns (site.css), the exact
   flex row Read Report, Download and Order a Printed Copy already share, so
   the CLOSED row is one line of buttons and nothing taller. .pkratings (the
   separate right-aligned block this rule used to describe) is GONE from the
   markup; ReportRowHtml no longer emits it.

   THE OPEN PANEL DROPS BELOW THE WHOLE ROW, BY CSS ALONE, no script. .frbtns
   already carries flex-wrap:wrap (site.css); giving the OPEN details a
   flex-basis of 100% is what forces the wrap, since a 100%-wide item cannot
   share a line with anything before it. Nothing after it in DOM order
   ("Rate Your Purchase" is always the row's last control, see
   AccountReports.aspx.vb's ReportRowHtml) so nothing is pushed further than
   this one item's own new line. The CLOSED details has no such rule and
   sizes to its <summary> alone, matching every plain <a class="btn"> beside
   it: a closed <details> renders only its <summary>, by the HTML5 spec, so
   there is nothing here forcing that -- the browser already does it.

   THE SUMMARY STAYS BUTTON-SIZED EVEN WHEN OPEN. A <summary> is a block
   element and would otherwise inherit its 100%-wide parent's width once
   open, reading as one giant button; width:max-content keeps it exactly the
   size "Rate Your Purchase" needs, sitting at the top of the now-full-width
   details, with the panel's own content below it in ordinary block flow. */
.frbtns>details.ratepurchase{min-width:0}
.frbtns>details.ratepurchase>summary{cursor:pointer;list-style:none;
  width:max-content;max-width:100%}
.frbtns>details.ratepurchase>summary::-webkit-details-marker{display:none}
.frbtns>details.ratepurchase>summary::marker{content:""}
.frbtns>details.ratepurchase[open]{flex-basis:100%;margin-top:2px}
.frbtns>details.ratepurchase[open]>summary{margin-bottom:8px}
/* w2211-ratingspeek: "Use This Purchase" (AccountReports.aspx.vb
   UseThisPurchaseButton) is a plain anchor, already .btn.ghostbtn, and needs
   no rule of its own here: it is exactly the button family every other
   .frbtns control already is. The short fact beside it (NoActionNote,
   .pkrownote) is prose, not a button, so it gets the same full-line
   treatment the open rating panel gets, for the identical reason: a
   sentence squeezed between button-sized flex items reads as a stray
   fragment rather than as a line of its own. */
.frbtns>p.pkrownote{flex-basis:100%;margin:2px 0 0}

/* ---- the panel itself, opened -----------------------------------------------
   ONE GROUP, EVOLVING SHAPE. First pass, 2026-08-17, the owner's own words:
   "1 button, Rate Your Purchase... combine into one list with rate your
   purchase on the top and an expandable rate individual sections". Fourth
   pass, same evening, after the first shape reached dev and did not survive
   contact: the overall row now collapses once rated rather than staying an
   open fieldset, its sub-scores and review moved behind "Add Detail", and
   the readings list is flat, one line each, no nested disclosure of its own
   any more (see the comment block below this one for the full account).
   .ratephd is still the one heading the whole panel is built around.

   .ratephd is the panel's own heading (ReportRatingMarkup.PurchasePanel),
   naming the purchase the moment the panel opens rather than on the
   trigger button every row shares (owner: "the speak aloud should not be
   part of the button... put it when the panel opens"). tabindex="-1" in
   the markup makes it a script-focus target, never a tab stop; outline
   removed only where :focus-visible would otherwise draw one on a target
   no pointer ever lands on, matching the site's #appmain skip-target
   idiom in site.css.

   .pkgrate is the OLD layer-one modifier (ReportRatingMarkup.PackageRatingForm,
   kept on that file, unused on this page since the merge above); its own
   .rateboxgroup.pkgrate rule two blocks below is untouched so that function
   still renders correctly for any future caller. max-width lives on the
   pre-existing ".ratepanel{display:flex...}" rule further down this file
   (grep it rather than trust this line number, the same discipline every
   other cited line number in this codebase gets asked for), not repeated
   here. */
.ratephd{margin:0 0 10px;font-size:.95rem;font-weight:600;color:var(--ink)}
.ratephd:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* The overall-purchase block, PurchasePanel's own .ratepanel child: same
   flex-column-with-gap shape as .ratepanel itself, needed because this is a
   nested div rather than .ratepanel's own direct children. */
.ratepkgblock{display:flex;flex-direction:column;gap:10px;min-width:0}

/* ---- w2211-ratingspeek, 2026-08-17, owner's FOURTH correction, after --------
   ---- watching the panel on dev -----------------------------------------------
   "The main rating should collapse when it is done. Also the ones below are
   wrapping making the scroll longer than it needs to be. When I submit a
   report rating the whole thing collapses and I have to re-open... I am
   thinking we should probably get rid of spelling out the star rating and
   just allow a reader to pick it up. We can just display the stars
   themselves." Four rules follow from that, in order.

   ONE: no word sits beside a star option any more (App_Code/View/
   ReportRatingMarkup.vb StarPicker); the label text is still real markup,
   sr-only. .staropt's own padding and .staropt .stico's own size, both
   further down this file (grep them; a second declaration of either
   selector here would only be silently shadowed by the one that already
   exists, equal specificity and later in the cascade, which is exactly what
   the first version of this rule did before this file was reread), are
   edited in place instead: the icon is the whole visible control now, sized
   up slightly and padded a touch tighter since it is no longer sharing a
   pill with text. */

/* TWO: the overall row collapses to a line once rated
   (.ratepkgdone/.ratedonename, StarRow's read-only filled stars, then a
   small "Change" disclosure, .ratechangewrap/.ratechange, reopening the
   SAME editable picker). Unlike .ratepurchase and .rateaddbtl below,
   .ratechangewrap carries NO data-preserve-open: re-collapsing the instant
   a change is saved is the correct confirmation that it landed, since the
   fresh markup for an ALREADY-rated overall star is always this same
   collapsed shape regardless of which value was just saved. That is a
   different case from the bug this pass fixes, not a second instance of it. */
.ratepkgdone{display:flex;align-items:center;flex-wrap:wrap;gap:.4em .6em;margin:0}
.ratedonename{font-weight:600;color:var(--ink);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.ratechangewrap{display:block}
/* .ratechange styles a <summary> as a small link rather than a bordered
   button: "Add Detail" reuses the identical class two rules down for the
   same reason, both are secondary, low-stakes disclosures next to a row of
   stars that is the actual point of the panel. */
.ratechange{cursor:pointer;list-style:none;color:var(--gold-soft);
  font-size:.8rem;text-decoration:underline;display:inline-block}
.ratechange::-webkit-details-marker{display:none}
.ratechange::marker{content:""}
.ratechange:hover{color:var(--gold)}
.ratechangewrap[open]>.ratechange{margin-bottom:6px}

/* THREE: Accuracy, Insight, Writing and the written review move behind
   "Add Detail" (.rateaddbtl), collapsed by default, data-preserve-open so a
   star tapped INSIDE it (js/account-forms.js redraws the whole purchase row
   on every save) does not close the very disclosure that star lives in;
   same mechanism as .ratepurchase itself, see ReportRatingMarkup.vb's own
   comment on PurchasePanel for why a name rather than a DOM reference has
   to be what survives the redraw. */
/* .ratectl: the two secondary controls, Change Overall Rating and Add
   Comment, on ONE compact line (Codex QA Fixes on SiteUpdate 50: the two
   read as unrelated with a large gap between them; the gap was a p element
   illegally wrapping a details, fixed in ReportRatingMarkup.vb). Flex wrap
   so an OPEN disclosure's body takes its own full-width line under the pair
   without pushing the other control sideways. */
.ratectl{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35em 1.1em;margin-top:.5em}
.ratectl>details{display:block}
.ratectl>details[open]{flex-basis:100%}
.ratectl>details[open]>.ratechange{margin-bottom:6px}
.rateaddbtl{margin-top:0}
.rateaddbtlbody{display:flex;flex-direction:column;gap:10px;margin-top:8px;min-width:0}

/* FOUR: the reading list is FLAT, one line each, no disclosure at all
   (App_Code/View/ReportRatingMarkup.vb RatingItem) -- the disclosure-per-
   reading shape itself was the defect ("the whole thing collapses and I
   have to re-open to submit another"), not merely its symptom, so nothing
   here reopens one; there is nothing left to reopen. NOTHING WRAPS AT
   ORDINARY WIDTH OR AT 150% TEXT: flex-wrap:nowrap on the row, the star
   fieldset flex:none so it never shrinks below its five icons, and the name
   alone absorbs any width pressure via ellipsis. This is a deliberate,
   narrow exception to the site's general flex-row rule against
   white-space:nowrap on primary content (see the mobile query below for
   where that general rule reasserts itself): a reading's name is short,
   catalogue-controlled text ("Numerology Overview"), not a person's own
   name, and the alternative the owner measured and rejected on dev was a
   much worse cost, an ever-growing scrollbar from a list that wraps at
   every row. */
.ratereading{display:flex;align-items:center;flex-wrap:nowrap;gap:.5em;
  padding:4px 0;min-width:0}
.ratereadingname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:.86rem;color:var(--ink)}
.ratereading .starpick{flex:0 0 auto}
.ratereading .starrow{flex-wrap:nowrap}
.ratesaved{flex:0 0 auto;color:var(--muted);font-size:.74rem;white-space:nowrap}
/* .ratesavebtn is the package-level Save button: NEVER hidden by script,
   the written review needs it regardless. .ratesavebtn-auto is a reading's
   own: js/account-forms.js hides it the moment it confirms the tap-to-save
   path can run (point 6 of the approved design), and it stays the only way
   to save a reading with no script at all. flex:0 0 auto so it never
   competes with the name or the stars for the row's width while it is
   still visible (no-script only, in practice). */
.ratesavebtn-auto{flex:0 0 auto;font-size:.72rem;padding:4px 8px}
@media(max-width:640px){
  /* The one place this row IS allowed to wrap: a phone genuinely cannot
     hold a name and five stars on one line at a comfortable touch size, and
     the site's general rule (min-width:0 plus wrap, never nowrap, on
     primary content) reasserts itself here rather than truncating a
     reading's name to three characters and an ellipsis on the smallest
     screens. */
  .ratereading{flex-wrap:wrap}
  .ratereadingname{white-space:normal;overflow:visible;text-overflow:clip;
    flex-basis:100%}
}

/* ---- .rateboxgroup, the OLDER standalone-block shape ------------------------
   Still used by ReportRatingMarkup.PackageRatingForm and RatingGroup, both
   kept unused on this page since the w2211-ratingspeek merge, for any
   future caller that wants either layer as its own disclosure again. NOT
   used by PurchasePanel above, which is styled entirely by the
   .frbtns>details.ratepurchase rules instead. */
.rateboxgroup{min-width:0;max-width:100%}
.rateboxgroup>summary{cursor:pointer;list-style:none}
.rateboxgroup>summary::-webkit-details-marker{display:none}
.rateboxgroup>summary::marker{content:""}
.rateboxgroup.pkgrate{max-width:34rem}
.rateboxgroup.pkgrate[open]>summary{margin-bottom:8px}
/* A buyer with dozens of readings has to find the one they want without
   scrolling past every other one, so unrated ones lead (ReportRatingMarkup's
   own sort) and the list caps its own height rather than the whole account
   page running away underneath it. The cap is REM, so it grows with the A-/
   A+ control exactly as the rest of the page does; it is a ceiling on an
   internal scroller, never a fixed box a reader's own text size could
   overflow silently, because overflow-y:auto still shows a scrollbar here. */
.rategrouplist{display:flex;flex-direction:column;gap:8px;margin-top:10px;
  max-width:34rem;min-width:0;max-height:26rem;overflow-y:auto}
.ratebox{border:1px solid var(--edge2);border-radius:10px;padding:8px 10px;
  background:var(--panel);min-width:0}
.ratebox+.ratebox{margin-top:0}
.ratebox>.ratesum{display:block;cursor:pointer;list-style:none;font-size:.86rem;
  color:var(--ink);overflow-wrap:anywhere}
.ratebox>.ratesum::-webkit-details-marker{display:none}
.ratebox>.ratesum::marker{content:""}
.ratebox[open]>.ratesum{margin-bottom:8px}
.ratepanel{display:flex;flex-direction:column;gap:10px;min-width:0;max-width:34rem}
.ratenote{color:var(--muted);font-size:.86rem;line-height:1.45;margin:0;
  border-left:2px solid var(--edge2);padding-left:.6em}
.starpick{border:none;margin:0;padding:0;min-width:0}
.starpick legend{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);
  padding:0;margin-bottom:4px}
.starpick .starreq{text-transform:none;letter-spacing:0;color:var(--muted)}
/* The row wraps at narrow widths and at large text (150/200%), and every star
   pill can shrink to make room for its neighbour rather than forcing the row
   wider than its container. */
.starrow{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
/* Visually hidden, never display:none or visibility:hidden: the input stays
   in the accessibility tree and in the tab order, and its OWN label (the
   pill beside it, joined by for/id) carries the accessible name and the
   visible focus ring. This is the one native radio per star; nothing here is
   simulated in CSS alone. */
.staropt-input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0}
/* w2211-ratingspeek, 2026-08-17: padding .4em and the icon's own 1.15em size
   below both changed from the wider, text-shaped pill this control used to
   be (padding .35em .6em, a 1em icon) now that no word sits beside the icon
   any more (StarPicker's own label text is sr-only): the icon is the whole
   visible control, so it is what carries the touch target and reads clearly
   at a glance, rather than a narrow icon inside a pill sized for text that
   is no longer there. */
.staropt{display:inline-flex;align-items:center;gap:.3em;padding:.4em;min-width:0;
  border:1px solid var(--edge2);border-radius:999px;background:var(--panel);color:var(--muted);
  cursor:pointer;font-size:.84rem}
.staropt .stico{width:1.15em;height:1.15em;flex:none;color:var(--faint)}
.staropt-input:checked+.staropt{border-color:var(--gold);color:var(--gold)}
.staropt-input:checked+.staropt .stico{color:var(--gold)}
.staropt-input:focus-visible+.staropt{outline:2px solid var(--gold);outline-offset:2px}
.starlbl{min-width:0}
.starnone{color:var(--faint);font-size:.78rem;margin:2px 0 0}
.ratelabel{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint)}
.ratehint{color:var(--faint);font-size:.78rem;line-height:1.4;margin:0}