/* ================================================ every button is a sigil ===
   The whole site presses the same shape now: the hexagon that turns in the
   Starmap sky, with a lit purple edge, a dark inside, and a six-pointed star
   that wakes up under the pointer.

   A button has only one box to work with, so the three layers are stacked
   inside it:
     - the button's own background is the lit edge,
     - ::before sits over it, inset by --rim, and paints the dark inside,
     - ::after carries the star, under the words.
   Both layers ride at z-index -1: an element that is clipped paints its
   negative children over its own background but under its contents, so the
   words and the little marks stay on top. The clip-path that cuts the shape is
   also what makes the button a stacking context, so shape and layering come
   from the same line.

   Two things are deliberately not cut, and they are named in the :not() chain
   below so that the rules underneath them are left exactly as they were
   written:
     .shot   the picture on every card - its background IS the picture
     .cr     the creator's name inside a sentence - it is a word in a line, and
             a sigil drawn around a word in a line would break the line
   The sort buttons draw their own arrow after the label, so the star steps
   aside for the one of them that is picked; they are cut like everything else.

   Everything else that can be pressed is cut: the name in the top bar, the
   profile's tabs, and the search field's two little keys included. Those last
   three are small, so they lean in less - a full 1em cut would eat them.

   The two switches (.vsw, .psw) are cut as one piece instead, so their
   segments still tile edge to edge - and being cut as a whole they need a face
   of their own, or the lit edge would shine straight through the segments.

   Two rules of this file are unusual on purpose:
     - the base rule carries a long :not() chain, which makes it far heavier
       than any pill rule it has to argue with, so it can stay clear of
       !important. Everything that has to beat it - a hover, an .on, a switch -
       says so with !important instead.
     - --ch and --rim are handed out by a small rule of their own, before the
       heavy one, so that a button can still set them for itself: whoever has
       the heavier selector wins, and the heavy rule would always win.
   ========================================================================== */

:root {
  --hx-light: #ffb8f4;      /* the sigil palette, shared with holdhex.css */
  --hx-main:  #c46bff;
  --hx-deep:  #7a34ff;
  --hx-track: #be82ff;
  --hx-star:  #d89cff;

  /* the lit edge runs from left to right - bright at the left, deep at the
     right - so every sigil on every tab is lit from the same side */
  --hx-edge:     linear-gradient(90deg, var(--hx-light), var(--hx-main) 48%, var(--hx-deep));
  --hx-edge-lit: linear-gradient(90deg, #ffe4fb, var(--hx-light) 28%, var(--hx-main) 70%, var(--hx-deep));
  --hx-face:     linear-gradient(180deg, rgba(18, 15, 38, .97), rgba(9, 8, 22, .98));
  --hx-face-lit: linear-gradient(180deg, rgba(46, 24, 66, .95), rgba(20, 12, 40, .97));
  --hx-rim: 1.2px;                          /* how thick the lit edge is */
  --hx-cut: 1em;                            /* how far the slanted sides lean in */
  --hx-halo: rgba(196, 107, 255, .42);
  --hx-halo-lit: rgba(255, 184, 244, .5);
  --hx-star-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' width='24' height='28'%3E%3Cg fill='none' stroke='%23d89cff' stroke-width='1.1' stroke-opacity='.9'%3E%3Cpath d='M12 2.6 21.1 18.3 2.9 18.3Z'/%3E%3Cpath d='M12 25.4 2.9 9.7 21.1 9.7Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* the two knobs, handed out cheaply so a single button can still overrule them */
button, .wacts a, .acts a { --ch: var(--hx-cut); --rim: var(--hx-rim); }

/* the small ones lean in less: what is a whole word wide takes the full cut,
   but a chip with a name in it, a tab, or a key of the search field would lose
   its own corners to a cut that size */
.prof-btn, .prof-tab { --ch: 8px; --rim: 1.2px; }
#q-go, #q-clear { --ch: 6px; --rim: 1px; }

/* ------------------------------------------------------------------ the cut */

button:not(.shot):not(.cr),
.wacts a, .acts a {
  position: relative;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--hx-edge);
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% 50%,
    calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 50%);
  transition: color .16s ease, filter .18s ease;
}

/* the dark inside, inset so only the lit edge is left showing */
button:not(.shot):not(.cr)::before,
.wacts a::before, .acts a::before {
  content: ""; position: absolute; inset: var(--rim); z-index: -1;
  pointer-events: none;
  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%);
  background: var(--hx-face);
}

/* one button is as tall as it is wide, and there the cut above is the wrong
   tool: the sigil at the top left of the map is a 44px square, so slicing a
   fixed 13.3px off each side leaves its slanted sides a third longer than the
   flat ones and the hexagon reads as squashed. A square box is written in
   percentages instead - the only way all six sides come out the same length:
   a quarter of the width in from either side, and 6.7% off the top and the
   bottom, where 6.7% is half of 1 - sqrt(3)/2, the height of a regular hexagon
   against its own width. */
#ctl-sig,
#ctl-sig::before {
  clip-path: polygon(
    25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
}

/* the small square sigils on a world card take that same square cut, so they
   are all one shape: the clock and the star in the Atlas, the "+", the clock
   and the bin in the Library. They used to lean in by a whole em instead, and
   on a 28px box an em is nearly half the width - the hexagon read as a
   diamond. Worse, an em follows the font size, so the 13px star and the
   12.5px clock leaned in by different amounts and the two never matched each
   other. A percentage cannot drift like that. */
button:not(.shot):not(.cr):is(.star-btn, .later-btn, .pl-btn, .drop),
button:not(.shot):not(.cr):is(.star-btn, .later-btn, .pl-btn, .drop)::before {
  clip-path: polygon(
    25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
}

/* the six-pointed star, waiting for the pointer - every button but the one
   sort button that wears its own arrow */
button:not(.shot):not(.cr):not([data-s].on)::after,
.wacts a::after, .acts a::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: var(--hx-star-ink) center center / auto 60% no-repeat;
  opacity: 0; transition: opacity .22s ease;
}

/* ------------------------------------------------------------ under the hand */

button:hover:not(.shot):not(.cr),
.wacts a:hover, .acts a:hover {
  filter: drop-shadow(0 0 9px var(--hx-halo));
}
button:hover:not(.shot):not(.cr)::after,
.wacts a:hover::after, .acts a:hover::after { opacity: .45; }
button:active:not(.shot):not(.cr) { filter: brightness(1.14); }
button:focus-visible:not(.shot):not(.cr) {
  outline: 0; filter: drop-shadow(0 0 10px var(--hx-halo-lit));
}

/* ------------------------------------------------------ what is lit is picked */

/* the lit edge and the tinted inside mean "this one is chosen" */
.sub button.on, .chips button.on, .glist button.on, .more button.on, .picks button.on,
.lat-foot button.on, .pl-pop-f button.on, #pages button.cur, .prof-act.on,
.rail-btn.on, .facet.on {
  background: var(--hx-edge-lit) !important;
  filter: drop-shadow(0 0 9px var(--hx-halo-lit));
}
.sub button.on::before, .chips button.on::before, .glist button.on::before, .more button.on::before,
.picks button.on::before, .lat-foot button.on::before, .pl-pop-f button.on::before,
#pages button.cur::before, .rail-btn.on::before, .facet.on::before {
  background: var(--hx-face-lit) !important;
}

/* the four world-page answers keep the colour they always had, only now the
   colour is the edge of the sigil instead of the frame of a pill */
.wacts button.big { background: var(--hx-edge-lit) !important;
  filter: drop-shadow(0 0 12px var(--hx-halo-lit)); }
.wacts button.big::before { background: var(--hx-face-lit) !important; }
.wacts button#save.on, .star-btn.on {
  background: linear-gradient(90deg, #ffe9a8, #ffd76a 48%, #e0a12a) !important;
  filter: drop-shadow(0 0 9px rgba(255, 215, 106, .42)); }
.wacts button#later.on, .later-btn.on {
  background: linear-gradient(90deg, #cfeaff, #5cb8ff 48%, #2f7fd0) !important;
  filter: drop-shadow(0 0 9px rgba(92, 184, 255, .42)); }
.wacts button#plbtn.on {
  background: linear-gradient(90deg, #e2d6ff, #b9a2ff 48%, #7d5cff) !important;
  filter: drop-shadow(0 0 9px rgba(185, 162, 255, .42)); }

/* the marks that mean "this one goes away" turn red only under the hand */
.picks button:hover, .lat-foot button:hover, .pl-pop-f button:hover {
  background: linear-gradient(90deg, #ffd0d6, #ff8f9c 48%, #c74a5e) !important;
  filter: drop-shadow(0 0 8px rgba(255, 143, 156, .42));
}

/* ------------------------------------------------------------------ switches */

/* the view switch, the platform picker and the panel's three doors are one
   hexagon each - the segments inside stay square so they still tile, and the
   picked one is painted in */
.vsw, .psw, .prof-tabs {
  --ch: 7px;
  position: relative;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--hx-edge) !important;
  padding: var(--hx-rim) !important;
  gap: 3px !important;
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% 50%,
    calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 50%);
}
/* the face of a switch, so the segments have something dark to sit on */
.vsw::before, .psw::before, .prof-tabs::before {
  content: ""; position: absolute; inset: var(--hx-rim); z-index: -1;
  pointer-events: none;
  background: var(--hx-face);
}
.vsw button, .psw button, .prof-tab {
  clip-path: none !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  filter: none !important;
}
.vsw button + button, .psw button + button { border-left: 0 !important; }
.vsw button::before, .vsw button::after,
.psw button::before, .psw button::after,
.prof-tab::before, .prof-tab::after { content: none !important; }
.vsw button:hover, .psw button:hover, .prof-tab:hover { background: rgba(255, 255, 255, .06) !important; }
.vsw button.on, .psw button.on, .prof-tab.on { color: #fff; background: var(--accent-soft) !important; }
.psw button.p-both.on, .psw button[data-p="both"].on { background: #6ce9a6 !important; }

/* -------------------------------------------------------------- the votes --- */

/* the three answer squares: the same sigil, cut tighter and framed thinner,
   because they live three-in-a-row on the corner of a picture */
.votes { display: flex; align-items: center; gap: 3px; }
.vt {
  --ch: 7px; --rim: .8px;
  width: 25.5px; height: 25.5px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
}
.vt + .vt { margin-left: 0; }
.vt::after { content: none !important; }        /* no star over the count */
.vt b { font-size: 8.5px; }
.vt i { width: 11px; height: 11px; }

/* a vote that has been cast is lit in its own colour, and the inside takes
   the same colour at a whisper */
.vt.up.on   { background: linear-gradient(90deg, #a8f5cb, #3ddc84 48%, #1f9c5c) !important;
  filter: drop-shadow(0 0 7px rgba(61, 220, 132, .38)); }
.vt.dn.on   { background: linear-gradient(90deg, #ffc2cc, #ff5f7a 48%, #c93a55) !important;
  filter: drop-shadow(0 0 7px rgba(255, 95, 122, .38)); }
.vt.md.on   { background: linear-gradient(90deg, #e2d6ff, #b9a2ff 48%, #7d5cff) !important;
  filter: drop-shadow(0 0 7px rgba(185, 162, 255, .38)); }
.vt.up.on::before { background: linear-gradient(180deg, rgba(14, 46, 32, .95), rgba(8, 26, 18, .97)) !important; }
.vt.dn.on::before { background: linear-gradient(180deg, rgba(52, 14, 22, .95), rgba(30, 8, 14, .97)) !important; }
.vt.md.on::before { background: linear-gradient(180deg, rgba(40, 26, 66, .95), rgba(22, 14, 44, .97)) !important; }

/* ---------------------------------------------------- the smallest furniture */

/* the little round keys - the cross on a library cell, the plus on a playlist,
   the picture tabs in the profile - are cut small so the glyph still fits */
.lat-x, .drop, .pl-btn, .lat-ico, .pl-pop-r, .pl-pop-x { --ch: 6px; }
.lat-x::after, .pl-btn::after { content: none !important; }

/* the rail's own rows - a genre, a tag, a creator in the Library's side panel -
   are sigils too, only cut shallower: a row is barely thirty pixels tall, so a
   deep cut would eat the words. The tag tree hangs from these rows, which is
   why they lean in a little less than the rest. */
.facet { --ch: 9px; --rim: 1px; }

/* ============================================ quiet until it is switched on ==

   An activation button - one that turns something on or off - is painted flat
   and quiet while it is off, and only wears the full sigil edge once it is on.
   The .on rules further up do the lit half; this is the quiet half, and it
   covers the whole sigil family: the rail's genre rows and creators, the sort
   buttons, the later-list buttons, the playlist filters, the library's panels
   and the three vote squares on a card.

   The base :hover rule is far heavier than this one, so under the hand the
   quiet paint is simply replaced by the sigil's own glow - the button comes
   back to life to show what a press would do. */
.chips button:not(.on),
.glist button:not(.on),
.fn:not(.on),
.sub button:not(.on),
.picks button:not(.on),
.lat-foot button:not(.on),
.pl-pop-f button:not(.on),
.pl-facet:not(.on),
.prof-act:not(.on),
.facet:not(.on),
.vt:not(.on) {
  filter: saturate(.45) brightness(.88);
}
/* the rail rows are not cut as sigils, so their quiet paint is a colour */
.facet:not(.on) { color: var(--ink-faint); }
.facet:not(.on) .sw { opacity: .5; }
.facet:not(.on):hover { color: var(--ink); }
.facet:not(.on):hover .sw { opacity: 1; }

/* ==================================================== turned the other way ==

   A genre button has three states, not two. Press it once and only that genre
   is searched for; press the same one again and the search turns around -
   everything but that genre - and the sigil goes red to say so; press it a
   third time and it is off again, a plain search word like it was before.
   Red here means "the opposite of what this button says". */
.chips button.on.neg,
.glist button.on.neg,
.facet.on.neg {
  background: linear-gradient(90deg, #ffd0d6, #ff8f9c 48%, #c74a5e) !important;
  filter: drop-shadow(0 0 9px rgba(255, 143, 156, .45)) !important;
  color: #fff;
}
.chips button.on.neg::before,
.glist button.on.neg::before {
  background: linear-gradient(180deg, rgba(52, 14, 22, .95), rgba(30, 8, 14, .97)) !important;
}
/* the little colour dot becomes the mark that says "not this one" */
.chips button.neg i,
.glist button.neg i,
.facet.neg .sw { background: #ff8f9c !important; box-shadow: none !important; }
.facet.on.neg .n { color: #fff; opacity: .8; }

/* ------------------------------------------------------- the small signs ---
   The signs that sit ON a picture - "PC only", "Top rated", the genre of a
   world, a tag you gave it - are sigils in miniature. They are cut shallow,
   because a sign is only twenty pixels tall and a deep cut would eat the
   words, and each keeps the colour it carries meaning with: the platform sign
   stays green when a Quest can come in, a genre sign keeps its genre. The one
   sign that is NOT a hexagon is the VRChat mark over on the right - that is
   its own logo, drawn as VRChat draws it, and it stays as it is. */

.thumb .badge, .thumb .plat, .shot .badge, .wchips .plat, .gchip,
.lib-row .tag:not(.rd) {
  --ch: 5px; --rim: 1px;
  position: relative; z-index: 0;
  border: 0; border-radius: 0;
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% 50%,
    calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 50%);
}
.thumb .badge::before, .thumb .plat::before, .shot .badge::before,
.wchips .plat::before, .gchip::before, .lib-row .tag:not(.rd)::before {
  content: ""; position: absolute; inset: var(--rim); z-index: -1;
  pointer-events: none;
  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%);
}
/* what each of them is lit with: the rim first, then the dark inside */
.thumb .badge, .shot .badge { background: var(--glow); }
.thumb .badge::before, .shot .badge::before { background: var(--accent-soft); }
/* over a picture the platform sign stands on its own dark ground so the words
   stay readable; in the world page's row of signs it sits on the page instead,
   so the rim is the plain hairline and the inside is the page's own tint */
.thumb .plat { background: rgba(215, 220, 255, .26); }
.thumb .plat::before { background: rgba(6, 8, 20, .66); }
.thumb .plat.p-both, .thumb .plat.p-quest { background: rgba(55, 214, 122, .55); }
.thumb .plat.p-both::before, .thumb .plat.p-quest::before { background: rgba(8, 34, 22, .62); }
.wchips .plat { background: var(--hair); }
.wchips .plat::before { background: rgba(255, 255, 255, .05); }
.wchips .plat.p-both, .wchips .plat.p-quest { background: rgba(55, 214, 122, .5); }
.wchips .plat.p-both::before, .wchips .plat.p-quest::before { background: rgba(55, 214, 122, .12); }
/* a genre sign is a world's colour written small - --hx-* is already the
   genre's own ramp wherever a card or a row has handed it down */
.gchip { background: var(--hx-edge); }
.gchip::before { background: var(--hx-face); }
.lib-row .tag:not(.rd) { background: var(--hx-edge); }
.lib-row .tag:not(.rd)::before { background: var(--accent-soft); }

/* ===========================================================================
   the windows - everything a page opens on top of itself
   ===========================================================================
   The cards lost their corners first and the windows kept them, so a round
   popup ended up sitting next to a cut card and looked like it came from
   another site. Every one of them now wears the card's own cut - 12px deep,
   the number the cards use - with the lit edge drawn 1.3px inside it: the same
   mask ring the cards already wear. A window keeps its own ground, only the
   border and the corner radius are taken away.

   Three of them scroll (the playlist popup, the world card, the profile
   dropdown) and an edge that is a plain child of a scroller rides up with the
   words inside it. Those three carry a transform, which makes each of them the
   frame its own fixed children are laid against - so the edge belongs to the
   box and stays where it was drawn, however far the words have scrolled. */
#card, #found, .pl-pop, .prof-pop, .tagsug, #star-note, .dock,
.starmap-filter-panel, #who, .rail-card, .whero, .wcard, .ft-card {
  --hx-card-cut: 12px;
  border: 0 !important;
  border-radius: 0 !important;
  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));
}
#card::after, #found::after, .pl-pop::after, .prof-pop::after, .tagsug::after,
#star-note::after, .dock::after, .starmap-filter-panel::after, #who::after, .rail-card::after,
.whero::after, .wcard::after, .ft-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  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;
}
.pl-pop, #card, .prof-pop { transform: translateZ(0); }
.pl-pop::after, #card::after, .prof-pop::after { position: fixed; }
/* the ones that had no frame of their own get one, for the edge to hang on */
.search, #who, .rail-card, .whero, .wcard { position: relative; }
/* #found is a fixed pill over the sky, not a box in the flow: it brings its
   own frame with it, and a relative here would drop it back into the page */

/* the search bar is a thing you type into, so it wears the button's shape:
   an elongated hexagon, the words in its straight middle, a point at each
   side. The field inside keeps its own quiet ground. */
.search {
  --ch: 11px;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--hx-face) !important;
  clip-path: polygon(
    var(--ch) 0,
    calc(100% - var(--ch)) 0,
    100% 50%,
    calc(100% - var(--ch)) 100%,
    var(--ch) 100%,
    0 50%);
}
.search::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  padding: var(--hx-rim);
  background: var(--hx-edge);
  clip-path: polygon(
    var(--ch) 0,
    calc(100% - var(--ch)) 0,
    100% 50%,
    calc(100% - var(--ch)) 100%,
    var(--ch) 100%,
    0 50%);
  -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;
}
/* the fields in the profile window are bars of the same cut. An input cannot
   carry a box of its own, so its lit edge is painted inside it instead. */
.prof-pop input[type="text"], .prof-pop input[type="password"] {
  --ch: 8px;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 1.2px var(--hx-main) !important;
  clip-path: polygon(
    var(--ch) 0,
    calc(100% - var(--ch)) 0,
    100% 50%,
    calc(100% - var(--ch)) 100%,
    var(--ch) 100%,
    0 50%);
}

/* the faces are hexagons as well: the six sides the buttons wear, cut from the
   picture itself, with a hairline of the lit edge standing in for the border
   the round ones had. The picture carries the cut a hair thinner, so the edge
   has something to sit on and the whole thing does not read as a sticker.
   Each of the three is as tall as it is wide - 26px beside the name, 46px in
   your own panel, 62px on the front of the site - so the shape is written in
   percentages, which is what a square hexagon needs to keep its six sides
   even. */
.prof-av, .prof-me .big, .site-face .prof-shot {
  --av-rim: 1.3px;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 0 !important;
  padding: var(--av-rim);
  background: var(--hx-edge);
  clip-path: polygon(
    25% 6.7%,
    75% 6.7%,
    100% 50%,
    75% 93.3%,
    25% 93.3%,
    0 50%);
}
.prof-av img, .prof-me .big img, .site-face .prof-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(
    25% 6.7%,
    75% 6.7%,
    100% 50%,
    75% 93.3%,
    25% 93.3%,
    0 50%);
}

/* =============================================== the last of the round ones ==
   A sweep of every page found the few things that had kept the old round
   corner while everything around them was cut: the field where a tag is
   written, the note kept about a world, the picker that says "every world /
   only my later list", the naming box in the playlist picker, the little discs
   and colour dots that sit inside a chip or a vote square, the presence dot by
   your own name, and the small pictures under a world. None of these is a
   window or a full button, so each is cut as much as its size can afford and
   no more.

   A dot that glowed keeps its glow: a clip-path cuts a box-shadow off with the
   corner, so the glow is hung as a drop-shadow instead, which is drawn after
   the cut and so follows whatever shape is left.
   ========================================================================== */

input.tag-in, textarea, .pl-pop-new input {
  --ch: 8px;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 1.2px var(--hx-main) !important;
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% 50%,
    calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 50%);
}
input.tag-in:focus, textarea:focus, .pl-pop-new input:focus {
  box-shadow: inset 0 0 0 1.2px var(--hx-light) !important;
}
/* the picker is a bar of the same cut; its own arrow sits at the middle of the
   right side, where the wedge is still at its full width, so it stays whole */
select {
  --ch: 5px;
  border-radius: 0 !important;
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% 50%,
    calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 50%);
}
/* the smallest sigils there are: the disc inside a vote square, the genre's own
   colour dot in a rail row or a chip, the swatch beside a genre in the
   Library's rail, the tick in the playlist picker, the presence dot by your own
   name */
.vt i, .legend i, .facet .sw, .glist button i, .chips button i, .prof-dot,
.pl-pop-r .bx, .facet .tick {
  --ch: 2.5px;
  border-radius: 0 !important;
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% 50%,
    calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 50%);
}
.vt i, .facet .sw, .pl-pop-r .bx { border: 0 !important; }
.legend i, .facet .sw, .glist button i, .chips button i, .prof-dot {
  box-shadow: none !important;
  filter: drop-shadow(0 0 6px currentColor);
}
.facet .sw, .glist button i { filter: drop-shadow(0 0 6px var(--gcl, currentColor)); }
.prof-dot { filter: drop-shadow(0 0 5px #4ad07a); }
/* a genre button that has been turned around wears a red dot - its glow turns
   with it */
.glist button.neg i, .chips button.neg i { filter: drop-shadow(0 0 6px #ff8f9c); }

/* the small pictures - the picture on a library row, the shelf of a playlist,
   the extra shots under a world - are cut like the cards, only shallower */
.lib-row img, .lib-row .ph, .lat-row img, .lat-row .ph, .mshot {
  --ch: 6px;
  border-radius: 0 !important;
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% 50%,
    calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 50%);
}

/* the signs that ride inside a library row and inside the tag list under the
   tag field wear the same shallow cut as the signs on a picture */
.lib-row .gi, .wcard .tagsug .ts {
  --ch: 5px; --rim: 1px;
  position: relative; z-index: 0;
  border-radius: 0 !important;
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% 50%,
    calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 50%);
}
.wcard .tagsug .ts { --ch: 6px; }

/* a library row is a window like a card, and it carries the genre of the world
   in it: the row's own left bar is gone, and that colour is the lit edge of the
   row instead - the same edge the card wears, tinted with the world's genre */
.lib-row {
  --hx-card-cut: 12px;
  border: 0 !important;
  border-radius: 0 !important;
  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));
}
/* the genre tint is a layer of its own laid over the house edge, not a stop
   inside it: a gradient is an image, and an image cannot be a colour
   stop, so the two written as one line made the whole line invalid and
   left the row with no edge at all. */
.lib-row::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  padding: 1.3px;
  background:
    linear-gradient(90deg, var(--gcl, 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;
}
.lib-row:hover::after { filter: drop-shadow(0 0 8px var(--hx-halo)); }

/* a tag you did not give - the tags a world carries, read-only - loses its
   round corner like everything else. Its outline was dashed, and a dashed line
   cannot follow a cut corner, so the outline is now a faint hairline drawn
   inside the sign; the faint colour is what says "this one is not a control",
   and it still says it. */
.tag.rd {
  --ch: 5px;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px var(--hair-soft) !important;
  clip-path: polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% 50%,
    calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 50%);
}

/* the hint above a translated description and the error line in the profile
   panel are small windows of their own */
.wcard .trnote, .prof-err {
  --hx-card-cut: 7px;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 1.2px var(--hair) !important;
  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));
}
.prof-err { box-shadow: inset 0 0 0 1.2px rgba(255, 90, 120, .45) !important; }