/* ═══════════════════════════════════════════════════════════════════════════
   Rava panel — the Pico bridge and the panel's own parts, editorial
   v1.0 · 2026-09-07
   ───────────────────────────────────────────────────────────────────────────
   The counterpart of rava.css v2.0, rewritten against rava-editorial.css.
   rava.css is NOT edited and NOT deleted: it is the Carbon bridge and it stays
   on disk, so reverting the panel is a two-line change in head_tags().

   This file has the same two jobs its predecessor had and no others:

     1. teach Pico the shared tokens, through --pico-* variables rather than
        !important, so Pico keeps supplying what it is good at — form-element
        behaviour, focus handling, the reset — while looking like the system;
     2. the parts Pico has no opinion about: the folders table, the tiers, the
        rename disclosure, the drag palette.

   WHAT CHANGED FROM THE CARBON BRIDGE. Almost nothing structural, and that is
   the point of having kept the class contract: the folders table is still the
   folders table. What changed is what the tokens now say — square became a
   radius scale, flat became glass, #FCFAF7 became ivory — plus the handful of
   rules below that hard-coded a Carbon decision instead of reading a token.

   ⚠ Load order: pico.min.css → rava-editorial.css → this file.
   ⚠ The @font-face blocks live in rava-editorial.css. They are NOT repeated
     here; a second declaration of the same family is how a page ends up
     downloading Abar twice.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Pico, retuned ───────────────────────────────────────────────────────
   Split into two blocks on purpose — see the ⚠ above the second one. */
:root{
  --pico-font-family:var(--r-fa);
  --pico-font-family-sans-serif:var(--r-fa);
  --pico-font-size:100%;
  --pico-line-height:1.75;
  --pico-border-radius:var(--r-radius);      /* 16px. not square, not a pill. */
  --pico-spacing:1rem;
  --pico-typography-spacing-vertical:1.15rem;
  --pico-form-element-spacing-vertical:.7rem;
  --pico-form-element-spacing-horizontal:1rem;
  --pico-outline-width:2px;
}
html[lang=en]{--pico-font-family:var(--r-en);--pico-font-family-sans-serif:var(--r-en);
  --pico-line-height:1.55}

/* ⚠ THE COLOURS NEED (0,2,0), NOT (0,1,0). This is the bug Stage 28 shipped and
   it is still live in the same place, so it is repeated here verbatim rather
   than trusted to memory. Pico's dark theme is
   `@media (prefers-color-scheme:dark){:root:not([data-theme]){…}}` — a
   two-class selector. A plain `:root` block here LOSES to it, so in dark mode
   every colour below silently reverts to Pico's own and the form fields come
   out Pico BLUE on a warm charcoal page. Visible only by opening the page in
   dark mode; the CSS reads correctly either way.

   `:root:root` matches at the same specificity and wins on source order, since
   this file loads after Pico. The geometry and the fonts stay in the plain
   block above, because Pico's dark theme does not touch them and because a
   bumped block here would beat the `html[lang=en]` font override.

   ⚠ AND THE SAME AGAIN FOR THE EXPLICIT SWITCH. Pico also ships a plain
   `[data-theme=dark]` block at (0,1,0). `:root:root` clears that too. Do not
   "simplify" either selector. */
:root:root{
  --pico-background-color:var(--r-bg);
  --pico-color:var(--r-t1);
  --pico-muted-color:var(--r-t2);
  --pico-muted-border-color:var(--r-line);
  --pico-card-background-color:var(--r-raise);
  --pico-card-border-color:var(--r-line);
  --pico-card-sectioning-background-color:var(--r-layer);
  --pico-form-element-background-color:var(--r-raise);
  --pico-form-element-border-color:var(--r-line-2);
  --pico-form-element-color:var(--r-t1);
  --pico-form-element-placeholder-color:var(--r-t3);
  --pico-form-element-focus-color:var(--r-act-text);
  --pico-form-element-active-border-color:var(--r-act-text);
  --pico-form-element-active-background-color:var(--r-raise);

  /* the action colour. Kian, 2026-09-06: "convert al C2A to Lajvard", kept on
     2026-09-07 against editorial-warm's own terracotta primary — so Pico's
     `primary`, which is what every unclassed <button> renders as, IS lajvard,
     and ajori is left to identity alone. */
  --pico-primary:var(--r-act-text);
  --pico-primary-background:var(--r-act);
  --pico-primary-border:var(--r-act-line);
  --pico-primary-underline:transparent;
  --pico-primary-hover:var(--r-act-hover);
  --pico-primary-hover-background:var(--r-act-hover);
  --pico-primary-hover-border:var(--r-act-hover);
  --pico-primary-focus:var(--r-act-text);
  --pico-primary-inverse:var(--r-act-ink);

  /* Pico derives heading colour per scheme and it is left alone deliberately:
     pinning it in a light block only is exactly how a previous pass shipped
     near-black headings on a charcoal ground. */
}

/* ⚠ Pico's buttons are rectangles with --pico-border-radius. Every button in
   this system is a PILL, and --pico-border-radius cannot be a pill because the
   same variable also rounds inputs and selects, where 999px would turn a text
   field into a capsule. So the pill is applied to the buttons directly. */
:is(button,[type=submit],[type=button],[type=reset],[role=button]){
  font-family:var(--r-fa);font-variation-settings:var(--r-cntr-display);
  font-weight:600;min-height:40px;border-radius:var(--r-pill)}
html[lang=en] :is(button,[type=submit],[type=button],[type=reset],[role=button]){
  font-family:var(--r-en);font-variation-settings:normal;letter-spacing:.01em}
:is(input,select,textarea):focus-visible{outline:2px solid var(--r-act-text);outline-offset:1px}
/* the glass inset on the one filled button Pico draws for us */
button:not(.outline,.c-ghost,.c-remove,.c-danger,.secondary,.contrast){
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.22),0 1px 2px rgba(56,29,29,.10)}

/* ── 2 · the shell ───────────────────────────────────────────────────────────
   The header markup is `.r-head` from rava-editorial.css. What remains here is
   the panel's own page frame: Pico's .container is replaced by the shared
   .r-main so the body sits on the same 1100px measure. */
main.container{max-width:var(--r-max);margin:0 auto;padding:0}
hgroup{margin-bottom:24px}
hgroup > *:last-child{margin-bottom:0}

/* ── 3 · tiers ───────────────────────────────────────────────────────────────
   A person's tier is a fact about the row, so it is a tag and not a pill: the
   one that carries authority takes ajori — identity, not action — and every
   other one is a hairline outline. Suspension is the only red on the page
   besides delete-on-hover.
   ⚠ --r-radius-sm, deliberately NOT --r-pill. Every button on this page is a
   pill now; a pill-shaped tier chip would read as something you can press. */
.chip{display:inline-flex;align-items:center;gap:.3em;white-space:nowrap;
  font-family:var(--r-fa);font-variation-settings:var(--r-cntr-body);
  font-size:12px;font-weight:600;line-height:1.6;
  padding:4px 10px;border-radius:var(--r-radius-sm);
  background:var(--r-layer);border:1px solid var(--r-line);color:var(--r-t2)}
html[lang=en] .chip{font-family:var(--r-en);font-variation-settings:normal;
  font-size:11.5px;letter-spacing:.01em}
.chip.key{background:var(--r-ajori);border-color:var(--r-ajori);color:var(--r-ajori-ink)}
.chip.soft{background:transparent;border-color:var(--r-ajori);color:var(--r-ajori)}
.chip.warn{background:transparent;border-color:var(--r-danger);color:var(--r-danger)}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}

/* ── 4 · the folders table ───────────────────────────────────────────────────
   ⚠ border-collapse:separate + border-spacing:0, and the radius on the wrapper
   with overflow:hidden. A COLLAPSED table paints its cell borders outside the
   wrapper's border-box, so the top row's rule cuts straight across the corner
   and the card reads as a square box with rounded decoration stuck on. This is
   the one rule that breaks if --r-radius-lg is ever raised without re-checking.

   ⚠ Controls INSIDE the table still need their radius forced. Pico applies
   --pico-border-radius to inputs, selects and buttons; inside a dense row a
   16px field is too round for its 32px height, so they drop to --r-radius-sm
   while the buttons keep the pill. */
/* ⚠ overflow-x:auto, NOT overflow:hidden — and this cost a squeezed table.
   The radius needs the wrapper to clip, and `overflow:hidden` clips, so it
   looked correct. But it also REMOVED the horizontal scroll this table has
   always had, so at 800px the columns stopped scrolling and started
   compressing: names and addresses collapsed to one character per line while
   the action cell kept its 11rem select. Setting overflow-x:auto computes
   overflow-y to auto as well, so the corners still clip — the scroll container
   clips to its padding box, which respects border-radius. Clipping and
   scrolling are the same declaration here; do not split them again. */
.c-wrap{border:1px solid var(--r-line);border-radius:var(--r-radius-lg);
  overflow-x:auto;background:var(--r-raise);box-shadow:var(--r-shadow)}
.c-table{width:100%;border-collapse:separate;border-spacing:0;margin:0;font-size:14px}
html[lang=en] .c-table{font-size:13px}
.c-table :is(input,select){border-radius:var(--r-radius-sm)}
.c-table button{border-radius:var(--r-pill)}

.c-table thead th{
  background:var(--r-layer);color:var(--r-t2);
  font-family:var(--r-mono);font-variation-settings:normal;
  font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  text-align:start;white-space:nowrap;
  padding:12px 15px;border-bottom:1px solid var(--r-line)}
/* Farsi cannot be uppercased or tracked, and Abar is the only face with the
   glyphs — so the FA side keeps Abar and drops both. */
html[lang=fa] .c-table thead th{font-family:var(--r-fa);
  font-variation-settings:var(--r-cntr-display);font-size:12.5px;font-weight:600;
  letter-spacing:0;text-transform:none}
.c-table :is(td,tbody th){
  padding:10px 15px;text-align:start;vertical-align:middle;
  border-bottom:1px solid var(--r-line);background:var(--r-raise);font-weight:400}
.c-table tbody tr:last-child :is(td,th){border-bottom:0}
.c-table td.mono,.c-table th.mono{text-align:start;color:var(--r-t2)}
@media (hover:hover) and (pointer:fine){
  .c-table tbody tr:hover :is(td,th){background:var(--r-hover)}
}

/* the folder cell spans its group rows — Carbon's row-group header, kept
   because it is what makes one folder read as one block without using a colour.
   ⚠ On dark, --r-layer and --r-raise must stay APART or this cell disappears;
   the two are 1.10:1 apart by construction in rava-editorial.css §2. */
.c-folder{vertical-align:top!important;width:1%;white-space:nowrap;
  border-inline-start:1px solid var(--r-line);
  background:var(--r-layer)!important;padding-block:13px!important}
.c-name{display:block;font-family:var(--r-fa);
  font-variation-settings:var(--r-cntr-display);font-weight:600;font-size:15px;
  line-height:1.5}
html[lang=en] .c-name{font-family:var(--r-serif);font-variation-settings:normal}
.c-sub{display:block;font-size:12px;color:var(--r-t3);line-height:1.8}
.c-sub.mono{color:var(--r-t3)}
.c-group{font-family:var(--r-mono);font-variation-settings:normal;
  font-size:12.5px;font-weight:500;white-space:nowrap;
  direction:ltr;unicode-bidi:isolate;color:var(--r-t1)}
.c-who{color:var(--r-t2);font-size:12.5px;
  max-width:22rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-act{width:1%;white-space:nowrap}
.c-empty{color:var(--r-t3);font-size:13px}
.c-add :is(td,th){background:var(--r-layer)}

/* controls sit inline in a cell and must not inherit Pico's block form rhythm */
.c-table form.inline,form.inline{display:inline-flex;gap:.4rem;align-items:center;margin:0}
/* ⚠ min-width is sized for the LONGEST label in EITHER language — English
   "— choose a group —" is wider than the Farsi equivalent and was clipping. */
.c-table form.inline select{margin:0;width:auto;min-width:11rem;height:auto;
  padding-block:.3rem;font-size:13px;background-size:.65rem auto;text-overflow:ellipsis}
.c-table form.inline button{margin:0;min-height:32px;padding:0 13px;font-size:12.5px}

/* ── 5 · the three buttons, in their table-sized form ───────────────────────
   Named for what they do to the system, not for how they look:
     .c-ghost  a real secondary action  → outline in the action colour
     .c-remove takes access away        → quiet until hovered, then red
     .c-danger destroys a folder        → same, and it is the only one that
                                           can end a thing that holds files */
.c-ghost{background:transparent;border:1px solid var(--r-act-line);
  color:var(--r-act-text);box-shadow:none}
.c-remove{background:transparent;border:1px solid var(--r-line-2);
  color:var(--r-t2);box-shadow:none}
.c-danger{background:transparent;border:1px solid var(--r-line-2);color:var(--r-t2);
  font-size:11.5px;min-height:0;padding:4px 11px;border-radius:var(--r-pill);
  margin-top:8px;display:inline-block;font-weight:600;cursor:pointer;box-shadow:none}
@media (hover:hover) and (pointer:fine){
  .c-ghost:hover{background:var(--r-act);border-color:var(--r-act);color:var(--r-act-ink)}
  .c-remove:hover{background:var(--r-danger);border-color:var(--r-danger);color:#fff}
  .c-danger:hover{background:var(--r-danger);border-color:var(--r-danger);color:#fff}
}

/* a folder no group can reach is not an ordinary row — it is a fault, and it
   should not look like a quiet empty state */
.c-sub.orphan{color:var(--r-danger);font-weight:600}

/* rename hides behind a disclosure so the row stays quiet until you want it —
   <details> is native, so this needs no script */
.c-ren{margin-top:8px;font-size:12px}
.c-ren summary{cursor:pointer;color:var(--r-t2);list-style:none;display:inline-block;
  border-bottom:1px dotted var(--r-line-2)}
.c-ren summary::-webkit-details-marker{display:none}
.c-ren form{margin-top:8px;display:flex;gap:.3rem;flex-wrap:wrap}
.c-ren input{margin:0;padding:.25rem .6rem;font-size:12.5px;height:auto;width:8.5rem}
.c-ren button{margin:0;min-height:30px;padding:0 12px;font-size:12px;white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .c-ren summary:hover{color:var(--r-act-text);border-color:var(--r-act-text)}
}

/* ── 6 · messages ──────────────────────────────────────────────────────────── */
.flash{border:1px solid var(--r-line);border-radius:var(--r-radius);
  background:var(--r-raise);box-shadow:var(--r-shadow);
  padding:13px 16px;font-size:14px;margin:0 0 20px}
.flash.soft{border-inline-start:3px solid var(--r-act-text)}
.flash.warn{border-inline-start:3px solid var(--r-danger)}

/* ── 7 · forms ─────────────────────────────────────────────────────────────── */
/* two fields side by side, stacking on a phone — the add-person form is the
   only place in the panel with enough inputs to need it */
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:640px){.two{grid-template-columns:1fr}}
label{font-size:13.5px;color:var(--r-t2)}
small.muted{display:block;margin-top:-.5rem;margin-bottom:.9rem;font-size:12.5px}
input[dir=ltr],input[type=password]{direction:ltr;text-align:left;
  font-family:var(--r-mono);font-variation-settings:normal;font-size:13px}

/* ── 8 · the English side ────────────────────────────────────────────────────
   ⚠ Abar FaNum draws digits as PERSIAN numerals. Correct in Farsi prose, wrong
   on an English page where "8773" must read as 8773 — so the English side does
   not use Abar at all. Its body face is IBM Plex Sans and its display face is
   Fraunces, both self-hosted. */
.muted{color:var(--r-t2)}
.tiny{font-size:12.5px}
footer.note{max-width:var(--r-max);margin:40px auto 0;padding:18px var(--r-pad) 44px;
  font-size:13px;color:var(--r-t3);border-top:1px solid var(--r-line)}

/* ── 9 · RTL — the corrections Pico does not ship ────────────────────────────
   ⚠ Pico v2 has NO rtl build. It is mostly written in logical properties and
   even carries a few [dir=rtl] rules of its own, but ~8 physical declarations
   survive and they all land on things this panel uses. Verified by extracting
   every rule in pico.min.css using a physical horizontal property. Carried over
   unchanged — none of this is a Carbon or an editorial decision, it is Pico. */
[dir=rtl] select:not([multiple],[size]){
  background-position:left .75rem center;
  padding-inline-start:calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
  padding-inline-end:var(--pico-form-element-spacing-horizontal);
}
[dir=rtl] nav ol:first-of-type,[dir=rtl] nav ul:first-of-type{
  margin-left:0;margin-right:calc(var(--pico-nav-element-spacing-horizontal) * -1)}
[dir=rtl] nav ol:last-of-type,[dir=rtl] nav ul:last-of-type{
  margin-right:0;margin-left:calc(var(--pico-nav-element-spacing-horizontal) * -1)}
[dir=rtl] [role=group] > *:not(:first-child){
  margin-left:0;margin-right:calc(var(--pico-border-width) * -1)}
[dir=rtl] dialog>article>footer{text-align:left}

/* ── 10 · phone ──────────────────────────────────────────────────────────────
   ⚠ SCOPED TO `.c-folders`, and that is a bug fix, not tidiness. This rule was
   written for the folders table, where the 4th column is MEMBERS and its cells
   carry .c-who — but it once selected `.c-table`, which the PEOPLE table also
   is. Below 820px the people table therefore lost its 4th header (جایگاه /
   ROLE) while keeping the column, so every heading from there leftward sat over
   the wrong column. Present since the table was written; invisible on a
   desktop. Do not widen this selector. */
@media (max-width:820px){
  .c-folders .c-who{display:none}
  .c-folders thead th:nth-child(4){display:none}
}

/* ── 11 · sign-in ────────────────────────────────────────────────────────────
   One card, one action, nothing else on the page. It keeps the header off
   entirely — there is nowhere to navigate to until you are in.
   ⚠ The card is the one place the full glass treatment earns its keep: it is a
   single surface on a wide empty ground, which is exactly the composition
   editorial-warm is drawn for. */
.r-login{max-width:23rem;margin:0 auto;padding:12vh var(--r-pad) 6rem}
.r-login .r-brand{border:0;padding:0;margin-bottom:2rem;font-size:18px}
.r-login .r-mark{height:26px}
/* ⚠ SCOPED TO THE DIRECT CHILD FORM, and that is a defect fix. `.r-login form`
   also matched the theme switch's little GET form in the preferences row, so
   the switch was painted as a SECOND 24px card with a 1.6rem pad sitting
   under the sign-in card — and `.r-login button` then stretched its button to
   the full 283px of the submit. Both were live on the deployed page. The
   screenshot only showed 'a box'; getBoundingClientRect named it. */
.r-login > form{border:1px solid var(--r-line);border-radius:var(--r-radius-lg);
  background:var(--r-raise);box-shadow:var(--r-shadow-lift);padding:1.6rem}
.r-login > form button{width:100%}
/* ⚠ The sign-in page has no .r-head, so the theme button is NOT in the cell
   grammar here and must not keep the cell's hairline — outside the header that
   border is a stray rule floating under the language link. */
.r-signin-prefs{display:flex;align-items:center;gap:16px;margin-top:1.4rem}
.r-signin-prefs .r-themef{margin:0}
.r-signin-prefs .r-theme{border:0;padding:0;font-size:12px;width:auto;
  min-height:0;background:transparent;box-shadow:none}
.r-signin-prefs .r-theme:focus-visible{outline-offset:2px}

.c-quota{margin-top:.3rem;display:block}
.c-quota select{width:auto;min-width:6.5rem;padding:.18rem 1.6rem .18rem .4rem;
  font-size:.74rem;height:auto;margin:0;border-radius:var(--r-radius-sm);
  background-size:.55rem auto}

/* ── 12 · people as initials, groups as a drag palette ───────────────────────
   Kian, 2026-09-06: "see the people inside the groups as circle chips with
   initials, hover tooltip shows user" and "the groups in a small panel so the
   authorizer drags them to any folder".
   ⚠ The tooltip is the browser's own `title`, not a scripted popover — it works
   on keyboard focus and on a screen reader, which a div-with-JS does not.
   ⚠ The var() fallbacks below are Carbon-era literals and several were WRONG
   (.c-folder.dropping fell back to ajori for an ACTION outline). They are all
   corrected here, but every one of these tokens is defined in
   rava-editorial.css, so no fallback should ever be reached. */
.avs{display:inline-flex;flex-wrap:wrap;gap:3px}
.av{width:26px;height:26px;flex:none;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--r-mono);font-variation-settings:normal;direction:ltr;
  font-size:10.5px;font-weight:600;letter-spacing:.02em;
  background:var(--r-layer);border:1px solid var(--r-line);
  color:var(--r-t2);cursor:default;user-select:none}
@media (hover:hover) and (pointer:fine){
  .av:hover{border-color:var(--r-ajori);color:var(--r-ajori)}
}
.av:focus-visible{border-color:var(--r-ajori);color:var(--r-ajori);
  outline:2px solid var(--r-act-text);outline-offset:1px}

.palette{border:1px solid var(--r-line);border-radius:var(--r-radius-lg);
  background:var(--r-glass);box-shadow:var(--r-shadow);
  padding:14px 16px;margin-bottom:18px}
/* ⚠ THE SELECTOR HAS TO CARRY html[lang=en], and that is specificity, not
   style. rava-editorial.css §8 sets the display face with
   `html[lang=en] :is(h1,h2,h3,h4)` — (0,1,2) — and a bare `.palette h3`
   is (0,1,1), so it LOST: this label rendered as 11px UPPERCASE FRAUNCES,
   a serif doing a mono label's job. Caught by reading the computed
   font-family on the rendered English page, not from the source. */
.palette h3,html[lang=en] .palette h3{margin:0 0 9px;font-family:var(--r-mono);
  font-variation-settings:normal;font-size:11px;font-weight:500;
  text-transform:uppercase;color:var(--r-t2);letter-spacing:.06em}
html[lang=fa] .palette h3{font-family:var(--r-fa);
  font-variation-settings:var(--r-cntr-display);font-size:12.5px;font-weight:600;
  text-transform:none;letter-spacing:0}
.pal-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.pal-chip{display:inline-flex;align-items:center;gap:6px;cursor:grab;
  padding:5px 12px;font-size:12.5px;font-weight:600;border-radius:var(--r-pill);
  background:var(--r-raise);border:1px solid var(--r-line-2);
  color:var(--r-t1);user-select:none}
.pal-chip b{font-family:var(--r-mono);font-variation-settings:normal;direction:ltr;
  font-size:10.5px;font-weight:600;color:var(--r-t3)}
.pal-chip.dragging{opacity:.45;cursor:grabbing}
@media (hover:hover) and (pointer:fine){
  .pal-chip:hover{border-color:var(--r-ajori);color:var(--r-ajori)}
}
/* ⚠ the drop target is an ACTION affordance, so it outlines in lajvard. The
   Carbon sheet's fallback here read #A54324 — ajori — which would have made a
   drop target look like identity if the token had ever failed to load. */
.c-folder.dropping{outline:2px solid var(--r-act-text);outline-offset:-2px}
.palette p{margin:0}

.c-acl{display:inline-block;margin-top:.45rem;font-size:.74rem;
  color:var(--r-t2);border-bottom:1px dotted var(--r-line-2);text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .c-acl:hover{color:var(--r-act-text);border-bottom-color:currentColor}
}

/* group membership — a name beside the initials, because on this page you are
   choosing people, not scanning them */
.mems{display:flex;flex-wrap:wrap;gap:6px}
.mem{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 2px;
  border:1px solid var(--r-line);border-radius:var(--r-pill);
  background:var(--r-raise);font-size:12.5px}
.mem .av{width:22px;height:22px;font-size:9.5px}
.mem-n{white-space:nowrap}
.mem form{display:inline;margin:0}
.mem button{all:unset;cursor:pointer;opacity:.55;padding-inline:3px;line-height:1}
.mem button:focus-visible{outline:2px solid var(--r-act-text);outline-offset:1px}
@media (hover:hover) and (pointer:fine){
  .mem button:hover{opacity:1;color:var(--r-danger)}
}
.rowacts{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}