/* ===========================================================================
   world.css - the one-page-per-world view. Same colours as everywhere else,
   every one of them taken from theme.css. The world's genre colour arrives as
   --gcl / --gcla and is only borrowed here.
   =========================================================================== */

.whero {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 22px; margin: 14px 0 26px;
  background: var(--card); border: 1px solid var(--gcla, var(--hair-soft));
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 20px 60px -40px var(--gcl, var(--accent));
}
.wshot { position: relative; min-height: 250px; background: #0a0c1c center / cover no-repeat; }
.wshot .noimg { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: var(--ink-faint); font-size: 12px; }

.wmain { padding: 18px 20px 20px; min-width: 0; }
.wmain h1 { margin: 0 0 6px; font-size: 21px; font-weight: 650; color: var(--ink);
  line-height: 1.25; }
.wmain .by { font-size: 12.5px; color: var(--ink-faint); }
.wmain .by .cr { border: 0; background: transparent; padding: 0; cursor: pointer;
  color: var(--ink); font: inherit; font-weight: 600; }
.wmain .by .cr:hover { text-decoration: underline; color: var(--gcl, var(--ink)); }

.wchips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 12px 0 0; }
.wchips .gchip { font-size: 11px; }
.wchips .gchip.top { color: #fff; background: var(--accent-soft);
  border-color: var(--glow); }
/* the platform sign, same words as on the pictures in the Atlas */
.wchips .plat {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 10px; white-space: nowrap;
  color: var(--ink-soft); background: rgba(255, 255, 255, .05);
  border: 1px solid var(--hair);
}
.wchips .plat.p-both, .wchips .plat.p-quest {
  color: #cdfbe4; border-color: rgba(55, 214, 122, .5);
  background: rgba(55, 214, 122, .12);
}

.wstats { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0 0;
  font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.wstats b { color: var(--ink-soft); font-weight: 600; }

.wacts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 18px 0 0; }
.wacts button:not(.vt), .wacts a {
  height: 32px; padding: 0 14px; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--hair); background: transparent; color: var(--ink-soft);
  font: 12.5px "Segoe UI", system-ui, sans-serif; display: inline-flex;
  align-items: center; gap: 7px; text-decoration: none;
}
.wacts button:hover, .wacts a:hover { color: var(--ink); border-color: var(--accent); }
.wacts button.big, .wacts a.big { color: #fff; border-color: transparent;
  background: var(--accent-soft); box-shadow: 0 0 16px var(--glow); }
.wacts button.big:hover, .wacts a.big:hover { box-shadow: 0 0 24px var(--glow); }
.wacts button#save.on { color: #ffd76a; border-color: var(--glow);
  background: var(--accent-soft); }
.wacts button#later.on { color: #9fd9ff; border-color: #5cb8ff;
  background: rgba(16, 42, 66, .7); }
.wacts button#plbtn.on { color: #cbb6ff; border-color: #b9a2ff;
  background: rgba(38, 26, 66, .7); }

.wsmall { font-size: 11.5px; line-height: 1.6; color: var(--ink-faint);
  margin: 12px 0 0; }

.wbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 22px; align-items: start; }

.wcard {
  background: var(--card); border: 1px solid var(--hair-soft);
  border-radius: var(--radius); padding: 16px 18px 18px; margin: 0 0 20px;
}
/* A card that opens a page about the site itself carries its title in the same
   shape as a world's name in .wmain, so the companion's pages read like the
   pages around them. */
.wcard > h1 { margin: 0 0 10px; font-size: 21px; font-weight: 650;
  color: var(--ink); line-height: 1.25; }
.wcard h2 { margin: 0 0 10px; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.wtext { font-size: 13.5px; line-height: 1.75; color: var(--ink-soft);
  white-space: pre-wrap; margin: 0; }
.wside .wcard:last-child { margin-bottom: 0; }

.wcard textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: rgba(0, 0, 0, .22); color: var(--ink);
  border: 1px solid var(--hair-soft); border-radius: 10px; padding: 10px 12px;
  font: 12.5px/1.6 "Segoe UI", system-ui, sans-serif; outline: none;
}
.wcard textarea:focus { border-color: var(--accent); }
.wsaved { font-size: 11px; color: var(--ink-faint); margin: 8px 0 0; min-height: 14px; }
.wcard .tagbox { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wcard input.tag-in {
  height: 26px; width: 140px; padding: 0 9px; border-radius: 10px;
  border: 1px dashed var(--hair); background: transparent; color: var(--ink);
  font: 11.5px "Segoe UI", system-ui, sans-serif; outline: none;
}
.wcard input.tag-in:focus { border-style: solid; border-color: var(--accent); }

.wdl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px;
  margin: 0; font-size: 12px; }
.wdl dt { color: var(--ink-faint); }
.wdl dd { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.wdl code { font-size: 11px; color: var(--ink-faint); }
.wdl a { color: var(--accent); text-decoration: none; }
.wdl a:hover { text-decoration: underline; }

/* ------------------------------------------------ the policy page's body --
   /companion/privacy renders its words from the package's own PRIVACY.md
   (app/privacy_page.py). Every '##' of that file arrives as one .wcard, the
   shape the companion page already gives each of its sections, so the policy
   needs almost nothing of its own: only the shapes a section can hold - the
   site's body copy, the labelled rows above, and a plain bullet for a sentence
   that names nothing of its own. */
#privacy-body p.wtext + p.wtext,
#privacy-body p.wtext + .wdl,
#privacy-body p.wtext + ul,
#privacy-body .wdl + p.wtext,
#privacy-body .wdl + ul,
#privacy-body ul + p.wtext,
#privacy-body ul + .wdl { margin-top: 11px; }
#privacy-body ul { margin: 11px 0 0; padding-left: 19px; font-size: 12.5px;
  line-height: 1.7; color: var(--ink-soft); }
#privacy-body ul li { margin-top: 6px; }
#privacy-body ul li:first-child { margin-top: 0; }

.wmore { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.wmore .mini { display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; }
.wmore .mshot { aspect-ratio: 16 / 10; --ch: 6px; border-radius: 0;
  background: #0a0c1c center / cover no-repeat;
  border: 1px solid var(--hair-soft);
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% 50%,
    calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 50%); }
.wmore .mnm { font-size: 12.5px; font-weight: 600; color: var(--ink);
  line-height: 1.35; }
.wmore .mini:hover .mnm { color: var(--gcl, #fff); }
.wmore .mby { font-size: 11px; color: var(--ink-faint); }

/* ---------------------------------------------------------------------------
   THE TWO-CARD ROW ON A PERSON'S PAGE
   A profile answers two questions, and they read best across one row: what
   this person MADE on the left ("Worlds by this creator"), what this person
   SAID on the right ("Reviews by ..."). Two equal columns, each one free to
   be quiet - a person with no reviews simply has no second column.
   Narrow screens stack them, because half a screen of review text is no
   longer something a person can read.
--------------------------------------------------------------------------- */
.wcols { display: grid; gap: 20px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wcols > .wcard { margin: 0; min-width: 0; }
/* The left column is a plain wrapper holding more than one card: the worlds a
   person made, and under them the shelves they hand out. It stacks them with
   the same 20px the row itself uses, so the two still read as one column, and
   the row still holds exactly two cards - narrow screens still stack them. */
.wcols > .wcol { min-width: 0; display: grid; gap: 20px; align-content: start; }
.wcols > .wcol > .wcard { margin: 0; }
@media (max-width: 900px) { .wcols { grid-template-columns: minmax(0, 1fr); } }

.wcols.one { grid-template-columns: minmax(0, 1fr); }

/* --- one review in that column ---------------------------------------------
   The same shape a review has everywhere else on the site, and the shape the
   entry is *for*: the world it judges on top - a small picture, its name, its
   author - and the writing underneath. The world's name is the link to the
   world, the author's name is the link to the author.
   It is cut, not rounded, like everything else: the block wears the same
   sliced window every card wears, with the hairline drawn inside the cut as a
   ring (a real border cannot follow a sliced corner), and the near edge of
   that ring takes the review's own colour - the level it recommends - so a
   column of reviews can be read down the side. */
.wrev { display: grid; gap: 12px; }
.rvi {
  --hx-card-cut: 12px;
  position: relative;
  border: 0; border-radius: 0; padding: 12px 13px 13px;
  background: rgba(0, 0, 0, .16);
  clip-path: polygon(
    var(--hx-card-cut) 0, calc(100% - var(--hx-card-cut)) 0,
    100% var(--hx-card-cut), 100% calc(100% - var(--hx-card-cut)),
    calc(100% - var(--hx-card-cut)) 100%, var(--hx-card-cut) 100%,
    0 calc(100% - var(--hx-card-cut)), 0 var(--hx-card-cut));
}
.rvi::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  padding: 1.3px;
  background: linear-gradient(90deg, var(--lvc, var(--hx-main)) 0, transparent 42%),
    var(--hx-edge);
  clip-path: polygon(
    var(--hx-card-cut) 0, calc(100% - var(--hx-card-cut)) 0,
    100% var(--hx-card-cut), 100% calc(100% - var(--hx-card-cut)),
    calc(100% - var(--hx-card-cut)) 100%, var(--hx-card-cut) 100%,
    0 calc(100% - var(--hx-card-cut)), 0 var(--hx-card-cut));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.rvi.lv-2 { --lvc: #4fd18b; }
.rvi.lv-1 { --lvc: #6ec9a0; }
.rvi.lv-0 { --lvc: rgba(182, 190, 222, .5); }
.rvi.lv--1 { --lvc: #ff9a6e; }
.rvi.lv--2 { --lvc: #f56e88; }
.rvi-top { display: flex; align-items: center; gap: 11px; }
.rvi-shot { flex: 0 0 auto; width: 78px; aspect-ratio: 16 / 10;
  --ch: 6px; border-radius: 0; background: #0a0c1c center / cover no-repeat;
  border: 1px solid var(--hair-soft);
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% 50%,
    calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 50%); }
.rvi-nm { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rvi-wn { font-size: 12.5px; font-weight: 600; color: var(--ink);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
a.rvi-wn:hover { color: var(--gcl, var(--accent)); }
.rvi-by { font-size: 11px; color: var(--ink-faint); }
.rvi-by a { color: var(--ink-soft); text-decoration: none; }
.rvi-by a:hover { color: var(--gcl, var(--accent)); text-decoration: underline; }
.rvi-body { margin: 10px 0 0; font-size: 12.5px; line-height: 1.65;
  color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.rvi-foot { margin: 8px 0 0; font-size: 11px; color: var(--ink-faint); }
.rvi-foot b { color: var(--ink-soft); font-weight: 600; }
.rvi-mod { font-style: italic; }

/* --- the playlists a person hands out --------------------------------------
   A shelf of shelves: one block per shared list, and inside it the same tiles
   the library's own shelves use, so a world reads the same here as it does on
   your side. Every block is cut like every other card - sliced window, hairline
   ring inside the cut - and the tiles' pictures wear the shallow pointed cut
   the small signs elsewhere wear. */
.wpl-wrap { margin-top: 0; }
.wpl { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.wp {
  --hx-card-cut: 12px;
  position: relative;
  border: 0; border-radius: 0; padding: 12px 13px 6px;
  background: rgba(0, 0, 0, .16); min-width: 0;
  clip-path: polygon(
    var(--hx-card-cut) 0, calc(100% - var(--hx-card-cut)) 0,
    100% var(--hx-card-cut), 100% calc(100% - var(--hx-card-cut)),
    calc(100% - var(--hx-card-cut)) 100%, var(--hx-card-cut) 100%,
    0 calc(100% - var(--hx-card-cut)), 0 var(--hx-card-cut));
}
.wp::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  padding: 1.3px;
  background: var(--hx-edge);
  clip-path: polygon(
    var(--hx-card-cut) 0, calc(100% - var(--hx-card-cut)) 0,
    100% var(--hx-card-cut), 100% calc(100% - var(--hx-card-cut)),
    calc(100% - var(--hx-card-cut)) 100%, var(--hx-card-cut) 100%,
    0 calc(100% - var(--hx-card-cut)), 0 var(--hx-card-cut));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.wp-top { display: flex; align-items: baseline; gap: 9px; margin-bottom: 6px; }
.wp-nm { font-size: 12.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-n { margin-left: auto; flex: none; font-size: 11px; color: var(--ink-faint); }

/* --- close to this world ----------------------------------------------------
   The card in the right column, under Details, that asks the site's own search
   which worlds are nearest to this one. It is a card like any other, so it
   already wears the house corners and the width of the column; what is left
   here is only what is inside it. One line per world: its picture, its name,
   who made it, and the tags it actually shares with this one, so the
   suggestion can be read back to what this world is.
   Every shape below is cut rather than rounded, like everything else: the line
   wears the shallow four-corner cut, the picture and the tags wear the same
   shallow pointed cut the small signs elsewhere wear. */
.wnear { display: grid; gap: 3px; }
.wnear .near {
  --hx-card-cut: 8px;
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px;
  align-items: center; padding: 7px 9px; text-decoration: none;
  border-radius: 0;
  clip-path: polygon(
    var(--hx-card-cut) 0, calc(100% - var(--hx-card-cut)) 0,
    100% var(--hx-card-cut), 100% calc(100% - var(--hx-card-cut)),
    calc(100% - var(--hx-card-cut)) 100%, var(--hx-card-cut) 100%,
    0 calc(100% - var(--hx-card-cut)), 0 var(--hx-card-cut));
}
.wnear .near:hover { background: rgba(255, 255, 255, .055); }
.wnear .nshot { width: 74px; aspect-ratio: 16 / 10; --ch: 6px;
  border-radius: 0; border: 1px solid var(--hair-soft);
  background: #0a0c1c center / cover no-repeat;
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% 50%,
    calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 50%); }
.wnear .nname { display: block; font-size: 12.5px; font-weight: 600;
  color: var(--ink); line-height: 1.35; }
.wnear .near:hover .nname { color: var(--gcl, #fff); }
.wnear .nby { display: block; font-size: 11px; color: var(--ink-faint);
  margin-top: 1px; }
/* both names in a row here are links now - the world's name and, under it, the
   person's; neither wears an underline until it is pointed at */
.wnear .nname, .wnear .nby { text-decoration: none; cursor: pointer; }
.wnear .nby:hover { color: var(--ink-soft); text-decoration: underline; }
.wnear .ntags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.wnear .ntag { --ch: 6px; border-radius: 0; padding: 2px 9px;
  font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); background: rgba(255, 255, 255, .05);
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% 50%,
    calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 50%); }

@media (max-width: 900px) {
  .whero { grid-template-columns: minmax(0, 1fr); }
  .wshot { min-height: 190px; }
  .wbody { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------- tag suggestions --
   The small list that opens under the tag field: the words you already use on
   other worlds ("yours") and the tags the world itself carries ("from
   VRChat"). Picking one keeps the spelling you used before.

   It hangs over the card's own words, so unlike a panel of the page it cannot
   be a see-through sheet: what it covers would read straight through it. It
   gets the solid popup colour instead - the same one the dropdown lists take -
   and the row under the mouse takes the accent, the way a picked tab does. */
.tagwrap { position: relative; display: inline-flex; }
.wcard .tagsug {
  position: absolute; z-index: 40; top: 30px; left: 0;
  min-width: 200px; max-width: 290px; padding: 5px; margin: 0;
  border: 1px solid var(--hair); border-radius: 12px;
  background: var(--popup); box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
.wcard .tagsug[hidden] { display: none; }
.wcard .tagsug .ts {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 6px 9px; border-radius: 8px; cursor: pointer;
  font: 400 11.5px "Segoe UI", system-ui, sans-serif;
}
.wcard .tagsug .ts:hover,
.wcard .tagsug .ts.pick { background: var(--accent); }
.wcard .tagsug .ts-t { color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.wcard .tagsug .ts-n { color: var(--ink-faint); font-size: 10px; white-space: nowrap; }
.wcard .tagsug .ts:hover .ts-t,
.wcard .tagsug .ts.pick .ts-t { color: #fff; }
.wcard .tagsug .ts:hover .ts-n,
.wcard .tagsug .ts.pick .ts-n { color: rgba(255, 255, 255, .8); }

/* the line under the button that says what just happened */
.wsmall.good { color: #7ee0a8; }
.wsmall.bad { color: #ff8fa3; }

/* ------------------------------------------------ translated descriptions --
   The hint above the text: which language it came from, and the reminder
   that names are never translated. The original words are not offered. */
.wcard .trnote {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin: 0 0 10px; padding: 7px 11px; border-radius: 10px;
  border: 1px solid var(--hair); background: rgba(143, 123, 255, .08);
  font: 400 11.5px "Segoe UI", system-ui, sans-serif; color: var(--ink-soft);
}
.wcard .trnote[hidden] { display: none; }
.wcard .trnote .trwhy { color: var(--ink-faint); }

/* The line under the action row: what the invitation is doing on the left,
   your take on the world on the right, both on the same line as the buttons
   above them. */
.wready { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

/* ------------------------------------------------ what this world is ----
   The rows the classifier read out of a world's own words and its picture:
   one line per axis, the words that fit it after it. On a phone the label
   sits above its words so neither gets squeezed. */
#wfacets { display: grid; gap: 9px; }
.frow { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px;
  align-items: start; }
.fkey { font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); padding-top: 3px; }
.fvals { display: flex; flex-wrap: wrap; gap: 5px; }
/* Every facet word is a sigil in miniature, cut shallow: a chip is only a word
   tall and the full cut would eat the letters. It is built like a button - the
   lit edge is the chip's own background, the dark inside is its ::before. */
.fchip { font-size: 11.5px; line-height: 1.45; padding: 3px 12px;
  --ch: 6px; --rim: 1px;
  position: relative; z-index: 0; border: 0; border-radius: 0;
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--hair); color: var(--ink-soft); white-space: nowrap;
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% 50%,
    calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 50%); }
.fchip::before { content: ""; position: absolute; inset: var(--rim); z-index: -1;
  pointer-events: none; background: rgba(255, 255, 255, .05);
  clip-path: polygon(
    calc(var(--ch) - var(--rim)) 0, calc(100% - var(--ch) + var(--rim)) 0, 100% 50%,
    calc(100% - var(--ch) + var(--rim)) 100%, calc(var(--ch) - var(--rim)) 100%, 0 50%); }

/* ------------------------------------------------- the community layer --- */
/* A tag the AI first said is gold. Gold marks where a word CAME FROM, not how
   sure anyone is - it stays gold after a hundred votes, so the machine's word
   never quietly becomes the crowd's word. The thin bar under the word and the
   number beside it are the living confidence; the two thumbs are the vote. */
.fchip[data-tag-f] { padding-right: 6px; }
.fchip.gold { background: rgba(214, 178, 86, .5); color: #e3c778; }
.fchip.gold::before { background: rgba(214, 178, 86, .12); }
/* the diamond leads the word: it is a flex child like the word itself, so it
   is ordered back to the head of the row */
.fchip.gold::after { content: "\25c6"; font-size: 8px; color: #d6b256;
  line-height: 1; order: -1; }
.fchip .fconf { display: block; position: absolute; left: 0; bottom: 0;
  height: 2px; background: var(--ink-faint);
  opacity: .55; transition: width .25s ease; }
/* the vote tray: a second sigil, one size down, dark inside so the thumbs read
   against whatever chip they are sitting on */
.fchip[data-tag-f] > .fvotes { display: inline-flex; align-items: center;
  gap: 2px; margin-left: 3px; padding: 0 3px;
  --ch: 5px; --rim: 1px;
  position: relative; z-index: 0; border: 0; border-radius: 0;
  background: var(--hair);
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% 50%,
    calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 50%); }
.fchip[data-tag-f] > .fvotes::before { content: ""; position: absolute;
  inset: var(--rim); z-index: -1; pointer-events: none;
  background: rgba(6, 8, 20, .72);
  clip-path: polygon(
    calc(var(--ch) - var(--rim)) 0, calc(100% - var(--ch) + var(--rim)) 0, 100% 50%,
    calc(100% - var(--ch) + var(--rim)) 100%, calc(var(--ch) - var(--rim)) 100%, 0 50%); }
.fchip .fnum { font-size: 9.5px; font-weight: 600; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; padding: 0 2px 0 3px; }
.fchip .fnum[hidden] { display: none; }
/* The two thumbs. They are buttons, so hex.css has already cut them into
   sigils - a cut this small would eat a thumb, and a lit hexagon behind one
   would shout. So the tray behind them is their ground: the sigil is switched
   off here (no cut, no inner face, no star) and the thumb is just a line
   figure in the button's own ink. The star is the one piece that has to be
   forced - hex.css writes it with four classes' worth of :not() and a later
   sheet, so nothing shorter than this rule reaches it. */
.fchip .fvotes .fv { --ch: 4px; border: 0; box-shadow: none; background: none;
  clip-path: none; color: var(--ink-soft); font: inherit; line-height: 1;
  padding: 3px 4px; cursor: pointer; opacity: .7;
  display: inline-flex; align-items: center; justify-content: center; }
.fchip .fvotes .fv::before { content: none; }
.fchip .fvotes .fv::after { content: none !important; }
.fchip .fvotes .fv svg { width: 11px; height: 11px; display: block; }
.fchip .fvotes .fv:hover { color: #fff; background: rgba(255, 255, 255, .18);
  opacity: 1; }
.fchip .fvotes .fv.bad { color: #e08a8a; }
.fchip .fvyes.mine { color: #7fd18f; opacity: 1; }
.fchip .fvyes.mine:hover { background: rgba(127, 209, 143, .22); }
.fchip .fvno.mine { color: #e08a8a; opacity: 1; }
.fchip .fvno.mine:hover { background: rgba(224, 138, 138, .22); }
@media (max-width: 620px) {
  .frow { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}
/* the card must really be gone even when a rule later
   sets display */
.wcard[hidden] { display: none; }

/* --------------------------------------------------- the note counter --- */
.wsaved { display: flex; justify-content: space-between; gap: 10px;
  align-items: baseline; }
.wsaved .wcount { font-size: 11px; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; flex: none; }

/* A pill whose votes are closed to this visitor. The number stays readable -
   reading was never the thing being guarded - but the three buttons look
   and behave inert, and the whole row opens the sign-in panel instead. */
.fchip[data-tag-f] > .fvotes.off { cursor: pointer; }
.fchip[data-tag-f] > .fvotes.off .fv {
  opacity: .4; filter: grayscale(1); cursor: pointer;
}
.fchip[data-tag-f] > .fvotes.off .fv:hover { background: none; color: inherit; }