/* The Styles page, for both apps (v4.1.1): the dashboard and the pod load this one file and
   draw the page with shared/loras-ui.js and shared/loras-view.js.

   It defines no tokens and reads the host's (--surface, --line-card, --t-13 ...), as
   library-ui.css does, and only tokens BOTH apps define. Everything the page's own markup
   needs is here under an st- name, because the two apps' own .panel, .sec, .banner and
   .switch are not the same thing. Buttons, chips and segmented controls are the hosts'. */
/* v4.1.3 (D6). The page's head: its two tabs, what a style is, and the Civitai sign-in's
   state at the far end. Then ONE strip for somebody not signed in, where a card used to be. */
.st-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:24px}
.st-head[hidden]{display:none}
.st-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:56px;margin-bottom:16px;padding:8px 16px;
          background:var(--surface);border:1px solid var(--line-card);border-radius:var(--r-tile);
          font-size:var(--t-14);font-weight:600;color:var(--ink)}
.st-strip[hidden]{display:none}
.st-strip .st-err{flex:1 1 100%;margin:0 0 8px}
.st-notice{margin:16px 0 0}
#stBrowse,#stPaneMine{margin-top:24px}
#stPaneMine .st-sec{margin-top:0}
.st-sec h2 .lib-info{margin:0 0 0 8px;vertical-align:middle}
.st-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.st-err{color:var(--clay);font-size:var(--t-13);margin:8px 0 0}
.st-err:empty{display:none}
.st-linked{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-size:var(--t-13);color:var(--ink-2)}
.st-banner{display:flex;align-items:flex-start;gap:16px;margin:24px 0 0;padding:16px 20px;
           background:var(--clay-wash);border:1px solid var(--clay);border-radius:var(--r-tile)}
.st-banner .st-tile{flex:0 0 auto;color:var(--clay);display:flex}
.st-banner b{display:block;font-family:var(--body);font-weight:600;font-size:var(--t-13);color:var(--ink);margin-bottom:4px}
.st-banner .btn{margin-top:12px}
.st-sec{margin:48px 0 16px;display:flex;align-items:flex-end;gap:16px}
.st-sec h2{font-size:var(--t-20);margin:0;letter-spacing:-.025em;line-height:1.15}
.st-sec p{margin:4px 0 0;font-size:var(--t-13);color:var(--ink-3)}
.st-grow{flex:1}
.st-switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:var(--t-14);font-weight:500;color:var(--ink)}
.st-switch input{appearance:none;-webkit-appearance:none;position:relative;width:40px;height:24px;flex:0 0 40px;margin:0;
                 border-radius:var(--r-pill);background:var(--ink-3);cursor:pointer;
                 transition:background var(--dur) var(--ease)}
.st-switch input::after{content:"";position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:50%;
                        background:var(--on-blue);transition:transform var(--dur) var(--ease)}
.st-switch input:checked{background:var(--blue)}
.st-switch input:checked::after{transform:translateX(16px)}
.st-switch input:disabled{opacity:.4;cursor:not-allowed}
.st-switch input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* The intro is the page's subtitle: one size down from the heading it sits under. */
.st-intro{margin:8px 0 0;max-width:72ch;font-size:var(--t-14);line-height:1.6;color:var(--ink-2)}
.st-intro .lib-info{margin:0 0 0 8px;vertical-align:middle}
.st-off,.st-line{margin:16px 0 0;font-size:var(--t-13);color:var(--ink-3);max-width:72ch}
.st-num{white-space:nowrap}

/* ---------------------------------------------------------------- My styles
   ONE grid, and every row is a row of it (subgrid): the name of the third style starts
   where the name of the first does, whatever is in the cells between. Each row was its own
   grid before, so nothing lined up and rows were 90 to 147 px tall. Six columns:

     thumbnail 48 · name and where it is from · badges · trigger words · status · Remove   */
/* (The first track is the thumbnail's 48 and the row's own 16 of padding: a subgrid's padding
   comes out of its first and last tracks.) */
.st-rows{display:grid;gap:8px 0;
         grid-template-columns:64px minmax(160px,2fr) max-content minmax(160px,1fr) minmax(160px,1.1fr) max-content}
.st-rows>.st-line{grid-column:1/-1;margin:0}
.st-row{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center;column-gap:16px;
        min-height:64px;padding:8px 16px;background:var(--surface);border:1px solid var(--line-card);border-radius:var(--r-tile)}
.st-prev{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--stage)}
.st-prev-small{width:48px;aspect-ratio:1/1;border-radius:var(--r-media)}
.st-pic{display:block;width:100%;height:100%}
/* v4.1.18 (G3b). The clip a hover makes, over its still, the same box. */
.st-pic:has(>.st-clip){position:relative}
.st-clip{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;pointer-events:none}
.st-media{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.st-ph{display:grid;place-items:center;width:100%;height:100%;background:var(--well);color:var(--ink-3)}
.st-main{display:grid;gap:4px;min-width:0}
.st-name{font-family:var(--display);font-weight:600;font-size:var(--t-14);letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.st-row .st-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* v4.1.3. The name of a Civitai style in My styles is a way into its details: the same words,
   in the same place, and it says so only under the pointer or the focus. */
.st-name-open{display:block;max-width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer}
.st-name-open:hover{text-decoration:underline;text-underline-offset:3px}
.st-name-open:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.st-ex-thumb .st-ph{display:grid;place-items:center;width:100%;height:100%}
.st-meta{font-size:var(--t-12);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-badges{display:flex;flex-wrap:wrap;gap:4px}
/* The trigger words: text, until the box is hovered or being typed in. */
.st-trigform{display:flex;align-items:center;gap:8px;min-width:0}
.st-trigform label{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.st-triglab{flex:0 0 auto;font-size:var(--t-12);color:var(--ink-2)}
.st-trigform input{flex:1 1 auto;min-width:0;width:0;height:32px;padding:0 8px;border:1px solid transparent;
                   border-radius:var(--r-input);background:transparent;color:var(--ink);font-size:var(--t-13);
                   overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.st-trigform input:hover{border-color:var(--line-2)}
.st-trigform input:focus{border-color:var(--line-2);background:var(--input)}
.st-trigform input::placeholder{color:var(--ink-3)}
/* The status: a dot and a word, and under it why (or where the file is). */
.st-status{display:grid;grid-template-columns:8px minmax(0,1fr);gap:0 8px;align-items:center;min-width:0;font-size:var(--t-13);color:var(--ink)}
.st-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.st-status[data-state="ok"] .st-dot{background:var(--good)}
.st-status[data-state="warning"] .st-dot,.st-status[data-state="refused"] .st-dot{background:var(--clay)}
.st-word{font-weight:600;min-width:0}
/* Two lines at most (its title has all of it): a row is 64 to 96 high whatever the font. */
.st-status .st-why{grid-column:2;margin:0;max-width:none;font-size:var(--t-12);line-height:1.45;color:var(--ink-2);
                   display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* ---------------------------------------------------------------- the upload zone: one row */
.st-drop{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-height:64px;margin-top:16px;padding:12px 16px;
         border:1px dashed var(--line-2);border-radius:var(--r-tile);background:var(--well)}
.st-drop{cursor:pointer}
.st-drop.over{background:var(--blue-wash)}
.st-drop p{margin:0;font-size:var(--t-13);color:var(--ink-2)}
.st-drop>#stDropHint{flex:1 1 320px;min-width:0}
.st-drop .st-line:empty{display:none}
.st-bar{flex:1 1 100%;height:8px;border-radius:var(--r-pill);background:var(--sunken);overflow:hidden}
.st-bar i{display:block;height:100%;background:var(--blue);transform-origin:left;transform:scaleX(0);
          transition:transform var(--dur) var(--ease)}

/* ---------------------------------------------------------------- Find a style */
.st-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.st-search{display:flex;gap:8px;flex:1 1 240px;max-width:400px}
.st-search input{flex:1 1 auto;min-width:0;height:40px;padding:0 12px;border:1px solid var(--line-2);
                 border-radius:var(--r-input);background:var(--input);color:var(--ink);font-size:var(--t-13)}
.st-search .btn{height:40px}
/* The NSFW switch is the last thing in the toolbar, at its far end. */
.st-nsfw{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
/* The sort and its (i) are one piece that never breaks: the mark is never alone on a line. */
.st-sortgroup{display:inline-flex;flex-wrap:nowrap;align-items:center;gap:8px;min-width:0;max-width:100%}
/* 190 at least: seven to a row in the 1600 the page gives (eight would be 186). */
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin-top:16px}
/* The line over the grid: 13, with its (i) beside it. */
/* A card is its picture (4:5) and ONE row of 48 under it. The name, who made it and its
   trigger words are ON the picture, over a dark gradient at its foot; a chip top left says
   what the creator allows, and the cautions are top right, one under the other. Nothing
   under the picture differs in height from card to card, so every card of a row is the same
   height. */
.st-card{display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--line-card);
         border-radius:var(--r-tile);overflow:hidden}
.st-card .st-prev{aspect-ratio:4/5;background:var(--stage)}
.st-card .st-ph{background:var(--stage);color:rgba(255,255,255,.6)}
.st-card .st-media{transition:transform 160ms var(--ease)}
/* ONE row of chips from the left: the licence first, then the cautions (v4.1.3 review; the
   cautions used to stand at the right, and two of them took the licence's place). A card too
   narrow for them on one line wraps the row: no chip is ever cut. */
.st-top{position:absolute;top:8px;left:8px;right:8px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;
        gap:4px;pointer-events:none}
.st-top .chip{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--t-12)}
/* On a picture, whatever the picture: a dark glass, white words (the lightbox's own pair). */
.st-lic{background:rgba(0,0,0,.6);color:#fff}
.st-top>.chip{flex:0 0 auto}
.st-caution{background:var(--clay-wash);color:var(--clay);pointer-events:auto}
.st-over{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:12px;
         background:linear-gradient(to top,rgba(0,0,0,.72),transparent 55%);pointer-events:none}
.st-card .st-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
                  font-size:var(--t-14);font-weight:600;line-height:1.3;color:#fff}
.st-card .st-by{font-size:var(--t-12);color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-card .st-trig{font-size:var(--t-12);color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-foot-row{display:flex;align-items:center;justify-content:space-between;gap:8px;height:48px;padding:0 8px 0 12px;min-width:0}
/* The facts: two pieces on ONE line of 16. They wrap, and the line shows only its first row:
   a piece there is no room for (the size, always the second) is on a row nobody sees. So the
   line is never cut in the middle of a number, whatever font the words came in. */
.st-facts{flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;height:16px;line-height:16px;
          overflow:hidden;font-size:var(--t-12);color:var(--ink-2)}
/* (A piece of no width comes first, so that even the FIRST fact wraps away, whole, where
   the action leaves it no room: a row's first piece would otherwise stay and be cut.) */
.st-facts::before{content:"";flex:0 0 auto;width:0;height:16px;margin-right:-8px}
.st-fact{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;height:16px;white-space:nowrap}
/* (v4.1.3 review: a dot between the facts. "4.3k 150 MB" read as one number.) */
.st-facts>*+*::before{content:"\00B7";color:var(--ink-3);margin-right:4px}
.st-fact svg{flex:0 0 auto}
/* Said, not shown: what the mark beside the number means. */
.st-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.st-act{flex:0 0 auto;display:flex;align-items:center;height:32px}
.st-have{gap:4px}
.st-refusal{margin:0;padding:0 12px 12px;font-size:var(--t-12);color:var(--clay);line-height:1.6}
/* The picture comes forward a little under a pointer or the focus. Only where a pointer
   hovers, and never for somebody who asked for less motion. */
@media (hover:hover) and (pointer:fine){
  .st-card:hover .st-media,.st-card:focus-within .st-media{transform:scale(1.02)}
}
@media (prefers-reduced-motion:reduce){
  .st-card .st-media{transition:none}
  .st-card:hover .st-media,.st-card:focus-within .st-media{transform:none}
}
.st-retry{margin-top:8px}
.st-have:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* The way in to a style's details: a button over the whole picture (a card) or thumbnail (a
   row). Under the chips, so a caution's own tooltip still shows. Not there at all where the
   host has no details to show (.st-can-open is set by loras-ui.js). */
.st-open{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;display:none}
.st-can-open .st-open{display:block}
.st-open:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:inherit}
.st-card .st-top{z-index:1}
.st-card .st-over{z-index:1}

/* ---------------------------------------------------------------- the details panel
   From the right, over a dimmed page: min(560px, the window). A full sheet on a phone. It
   slides 220 ms (never for somebody who asked for less motion). Under the dialogs (60), so
   "Remove this style?" opens over it. */
.st-sheet{position:fixed;inset:0;z-index:50}
.st-sheet[hidden]{display:none}
.st-sheet-scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity 220ms ease-out}
.st-sheet-panel{position:absolute;top:0;right:0;bottom:0;width:min(560px,100vw);display:flex;flex-direction:column;
                background:var(--surface);border-left:1px solid var(--line-card);box-shadow:var(--shadow-lift);
                transform:translateX(100%);transition:transform 220ms ease-out;outline:none}
.st-sheet.open .st-sheet-scrim{opacity:1}
.st-sheet.open .st-sheet-panel{transform:none}
@media (prefers-reduced-motion:reduce){
  .st-sheet-scrim,.st-sheet-panel{transition:none}
}
.st-sheet-head{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 16px 12px 24px}
.st-sheet-head .btn{flex:0 0 auto}
/* The page behind does not move under the panel: a scroll that reaches the text's end stays
   in it, and on a phone (where the panel is the whole screen) the page is held still. */
.st-sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 24px 24px;
               display:flex;flex-direction:column;gap:24px}
.st-sheet-scrim{overscroll-behavior:contain;touch-action:none}
.st-sheet-foot{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;
               padding:16px 24px;border-top:1px solid var(--line-card);background:var(--surface)}
.st-sheet-acts{display:flex;align-items:center;gap:8px}
.st-sheet-foot .st-refusal{flex:1 1 100%;padding:0}
.st-sheet-title{margin:0;min-width:0;font-size:var(--t-20);letter-spacing:-.025em;line-height:1.2;overflow-wrap:anywhere;
                display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.st-prompt-by{font-size:var(--t-12);font-weight:600;color:var(--ink-2)}
.st-sec2{display:flex;flex-direction:column;gap:8px;min-width:0}
.st-sec2 h3{margin:0;font-size:var(--t-13);font-weight:600;color:var(--ink)}
.st-quiet{margin:0;font-size:var(--t-13);color:var(--ink-2);overflow-wrap:anywhere}
.st-stats{margin:0;font-size:var(--t-13);color:var(--ink-2)}
.st-wordrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* (v4.1.3 review: a trigger word is as tall as the Copy button beside it, 32; it was 24.) */
.st-wordrow .chip.in-row{height:32px;padding:0 12px}
.st-wordrow:empty{display:none}
.st-caution-chip{background:var(--clay-wash);color:var(--clay)}
.st-suggest{margin:0;font-size:var(--t-14);font-weight:600;color:var(--ink)}
/* (A figure inside a sentence: the sentence's own face. In mono "0.7" read as "0 . 7".) */
.st-fig{font-variant-numeric:tabular-nums}
.st-sheet-trig{margin-top:8px}
.st-sheet-trig input{border-color:var(--line-2);background:var(--input)}
/* The examples: one large, on the stage's dark ground whatever its shape; the others under it. */
.st-ex{display:flex;flex-direction:column;gap:8px;margin:0 -24px}
.st-ex-stage{position:relative;height:min(56vh,480px);background:var(--stage);touch-action:pan-y;overflow:hidden}
.st-ex-slot{display:block;width:100%;height:100%}
.st-ex-media{display:block;width:100%;height:100%;object-fit:contain}
.st-ex-stage .st-ph{display:grid;place-items:center;width:100%;height:100%;background:none;color:rgba(255,255,255,.6)}
.st-ex-nav{position:absolute;top:50%;width:40px;height:40px;margin-top:-20px;display:grid;place-items:center;padding:0;border:0;
           border-radius:50%;background:rgba(0,0,0,.6);color:#fff;cursor:pointer}
.st-ex-prev{left:8px}
.st-ex-next{right:8px}
.st-ex-nav:focus-visible,.st-ex-thumb:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.st-ex-strip{display:flex;gap:8px;padding:0 24px;overflow-x:auto;scrollbar-width:thin}
.st-ex-thumb{flex:0 0 56px;width:56px;height:56px;padding:0;border:0;border-radius:var(--r-input);overflow:hidden;
             background:var(--stage);cursor:pointer;opacity:.6}
.st-ex-thumb[aria-pressed="true"]{opacity:1;box-shadow:0 0 0 2px var(--blue)}
.st-ex-thumb img,.st-ex-thumb video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* A prompt: the creator's own words, as text, with a way to take them. */
.st-prompt{display:flex;flex-direction:column;gap:8px;padding:12px 16px;border-radius:var(--r-tile);background:var(--well);min-width:0}
.st-prompt-text{margin:0;font-size:var(--t-13);line-height:1.6;color:var(--ink);overflow-wrap:anywhere;white-space:pre-wrap}
.st-prompt-acts{display:flex;align-items:center;gap:16px}
.st-neg{margin:0;font-size:var(--t-12);line-height:1.6;color:var(--ink-2);overflow-wrap:anywhere}
.st-neg[hidden]{display:none}
.st-about-text{font-size:var(--t-13);line-height:1.6;color:var(--ink-2);overflow-wrap:anywhere}
.st-about-text p{margin:0 0 8px}
.st-about .linkbtn{align-self:flex-start}

/* ---------------------------------------------------------------- narrower
   Under 1100 the grid has three columns (thumbnail, the rest, Remove) and a row is three
   lines: the name, then the badges and the trigger words, then the status. The rows still
   share the one grid, so they still line up. */
@media (max-width:1100px){
  .st-rows{grid-template-columns:64px minmax(0,1fr) max-content}
  .st-row{row-gap:8px;padding:12px 16px}
  .st-row>.st-prev{grid-row:1;grid-column:1}
  .st-row>.st-main{grid-row:1;grid-column:2}
  .st-row>.btn{grid-row:1;grid-column:3}
  .st-row>.st-badges,.st-row>.st-trigform,.st-row>.st-status{grid-column:2/-1}
  .st-row>.st-badges:empty{display:none}
}
/* v4.1.17 (B9). The host's phone (loras-ui's `phone`, the dashboard: .st-phone on the page). Find
   and My add-ons across the page with the (i) beside them; the search with a Sort button, the
   sort and the NSFW switch in its sheet (.st-sortsheet); the cards two to a row. Without
   .st-phone, and above 600 px, none of it applies: the Sort button is not drawn. */
.st-sortbtn{display:none}
@media (max-width:600px){
  .st-phone .st-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 8px}
  .st-phone .st-head[hidden]{display:none}
  .st-phone .st-tabs{display:flex;grid-column:1}
  .st-phone .st-tabs button{flex:1 1 0}
  .st-phone .st-head .st-grow{display:none}
  .st-phone .st-linked{grid-column:1/-1}
  .st-phone .st-tools{flex-wrap:nowrap;gap:8px}
  .st-phone .st-tools .st-search{flex:1 1 0;min-width:0;max-width:none}
  .st-phone .st-tools>.st-sortgroup,.st-phone .st-tools>.st-nsfw{display:none}
  .st-phone .st-sortbtn{display:inline-flex;flex:none;height:40px}
  .st-phone .st-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .st-sortsheet .st-sortgroup{display:flex;width:100%;align-items:flex-start;gap:8px}
  .st-sortsheet .pick{display:flex;flex:1 1 auto;flex-direction:column;align-items:stretch;border-radius:var(--r-tile)}
  .st-sortsheet .pick button{height:44px;justify-content:flex-start;padding:0 12px;border-radius:var(--r-input)}
  .st-sortsheet .st-nsfw{display:flex;align-items:center;gap:8px;min-height:52px;margin:12px 0 0}
}
@media (max-width:599px){
  /* The sort is three buttons across the page's width (fix round: as an inline row it was
     388 wide, and the page scrolled sideways). */
  .st-sortgroup{display:flex;width:100%}
  .st-tools .pick{display:flex;flex:1 1 0;min-width:0}
  .st-tools .pick button{flex:1 1 0;padding:0 8px}
  .st-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  /* Two to a row: the numbers give way to the action (the size goes first), never the action. */
  .st-foot-row{padding:0 8px}
  /* Beside a wide action ("Sign in to add", "In library") there is no room for a number at
     this width: the action alone. Beside "Add" the count stays. */
  .st-foot-row{gap:4px}
  .st-foot-row:has(.st-have) .st-facts{display:none}
  .st-foot-row:has(.st-have) .st-act{flex:1 1 auto;justify-content:center}
  .st-foot-row .btn.small{padding:0 12px}
  .st-row{padding:12px}
  .st-row>.st-badges,.st-row>.st-trigform,.st-row>.st-status{grid-column:1/-1}
  .st-nsfw{margin-left:0}
  .st-search{flex-basis:100%;max-width:none}
  /* The details panel is the whole screen here: the page under it is held still. */
  html.st-sheet-open,html.st-sheet-open body{overflow:hidden}
}