@charset "UTF-8";
/* ==========================================================================
   The Sheth Family Collection — master.css
   Master tools dock (Field Console · live presence · exports) + the
   Privacy Policy & Terms of Use dialog + its footer opener.

   Izanami vocabulary only: ink + bone, 1px hairlines, 4px dots, opacity for
   hierarchy. No gradients, no shadows, no radius except circles, no
   letter-spacing. Every colour comes from the :root tokens in styles.css.

   Order mirrors styles.css: role gate → structural (un-sized) → PC media
   block (all desktop sizing) → hover → SP media block → reduced motion.
   ========================================================================== */

/* ==========================================================================
   § Role gate — belt and braces
   The master dock is emitted ONLY for an admin session (partials/master-tools.php
   returns early otherwise) and master.js refuses to build or wire anything
   without body.pieces-role-admin. These rules are the third, purely visual
   lock, mirroring styles.css:785/805 in the retired build: even if the markup
   somehow reached a viewer, it would never be visible.
   ========================================================================== */
.pieces-role-viewer #masterTools,
.pieces-role-viewer #fieldConsole,
.pieces-role-viewer #exportXlsx,
.pieces-role-viewer #exportCsv,
.pieces-role-viewer #exportData,
.pieces-role-viewer #mHideBar,
.pieces-role-viewer #hiddenDialog { display: none !important; }

/* ==========================================================================
   § Master dock — shell
   Fixed in the HUD layer (above .aside, below .nav) so the exports, which act
   on the CURRENT filter, stay reachable at any scroll depth of the infinite
   grid. Collapsed it is one word in the corner.
   ========================================================================== */
.mtools {
  position: fixed;
  z-index: 45; /* --aside-index 40 < this < --nav-index 50 */
  color: var(--color-white);
  pointer-events: none; /* the box may span the viewport width — only its own
                           controls take the pointer (same trick as .aside) */
}
.mtools_tab,
.mtools_panel { pointer-events: auto; }
.mtools_tab {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(var(--fg-rgb), .2);
  background-color: var(--color-black);
  color: var(--color-white);
  opacity: .75;
  transition: opacity .4s linear, border-color .4s linear;
}
.mtools_tabDot {
  flex: none;
  border-radius: 50%;
  background-color: var(--color-yellow);
}
.mtools.is-open .mtools_tab { display: none; }

.mtools_panel {
  display: block;
  border: 1px solid rgba(var(--fg-rgb), .2);
  background-color: var(--color-black);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* -- panel head -- */
.mtools_head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-block-end: 1px solid rgba(var(--fg-rgb), .12);
}
.mtools_title { opacity: .8; }
.mtools_close { flex: none; align-self: center; opacity: .6; transition: opacity .4s linear; }
.mtools_closeLines { display: grid; place-items: center; aspect-ratio: 1/1; }
.mtools_closeLine {
  grid-area: 1/1;
  width: 100%;
  height: 1px;
  background-color: var(--color-white);
}
.mtools_closeLine:first-of-type { rotate: 45deg; }
.mtools_closeLine:last-of-type { rotate: -45deg; }

/* -- sections -- */
.mtools_section { border-block-end: 1px solid rgba(var(--fg-rgb), .12); }
.mtools_label { display: block; opacity: .6; }
.mtools_labelHint { opacity: .65; }
.mtools_labelHint:before { content: "·"; display: inline-block; opacity: .55; }

.mtools_btns { display: flex; flex-wrap: wrap; }
.mtools_btn {
  border-block-end: 1px solid rgba(var(--fg-rgb), .2);
  color: var(--color-white);
  opacity: .85;
  transition: opacity .4s linear, border-color .4s linear;
}
.mtools_btn[disabled] { opacity: .3; cursor: default; }
.mtools_flash { min-height: 1em; opacity: .7; }

/* ==========================================================================
   § Field Console
   Class names are carried over verbatim from the retired build so the ported
   buildConsole() markup generator is byte-for-byte the same.
   ========================================================================== */
.console { display: block; }
.console__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.console__title { opacity: .6; }
.console__title span { display: block; opacity: .7; }
.console__status { opacity: .7; }
.console__status.is-ok { opacity: 1; }
.console__status.is-err { color: var(--color-yellow); opacity: 1; }
.console__body { overflow-x: auto; }

.ctbl { width: 100%; border-collapse: collapse; }
.ctbl th {
  font-family: Cinzel, serif;
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  vertical-align: bottom;
  opacity: .55;
  border-block-end: 1px solid rgba(var(--fg-rgb), .2);
  white-space: nowrap;
}
.ctbl th.f { text-align: left; }
.ctbl td {
  text-align: center;
  vertical-align: middle;
  border-block-end: 1px solid rgba(var(--fg-rgb), .08);
}
.ctbl td.f { text-align: left; white-space: nowrap; }
.ctbl tr:last-child td { border-block-end: 0; }

/* group heads — "Public fields" / "Private fields — sensitive" */
.ctbl__grp td {
  font-family: Cinzel, serif;
  font-optical-sizing: auto;
  font-weight: 400;
  text-align: left;
  opacity: .45;
  border-block-end: 1px solid rgba(var(--fg-rgb), .2);
}

.fname { display: inline-block; }
/* master-only marker on a private field (admin view only) */
.mlock {
  display: inline-block;
  font-family: Cinzel, serif;
  color: var(--color-yellow);
  opacity: .85;
  vertical-align: baseline;
}
.tag--cat {
  display: inline-block;
  font-family: Cinzel, serif;
  opacity: .35;
  vertical-align: baseline;
}
.cat--adm { opacity: .5; }

/* live presence counts, in the "Show me" / "Show viewers" column heads */
.live-count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  color: var(--color-yellow);
  opacity: .9;
}

/* the four flags — a bone hairline square, filled bone when on */
.ctbl .cb {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  flex: none;
  border: 1px solid rgba(var(--fg-rgb), .35);
  background-color: transparent;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color .2s linear, border-color .2s linear;
}
.ctbl .cb:checked { background-color: var(--color-white); border-color: var(--color-white); }
.ctbl .cb:disabled { opacity: .22; cursor: default; }

/* ==========================================================================
   § Privacy Policy & Terms of Use (izanami voiceDialog pattern)
   ========================================================================== */
.legal {
  opacity: 0;
  display: grid;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--fg-rgb), .2);
  background-color: var(--color-black);
  color: var(--color-white);
  /* opacity-only — see the .filtersDialog note in styles.css; `all` stranded the
     closed dialog in the top layer, blocking the page after it was dismissed. */
  transition: opacity .4s, display .4s allow-discrete, overlay .4s allow-discrete;
}
.legal[open] { opacity: 1; }
/* fading-out dialog must not block the page */
.legal:not([open]),
.legal:not([open])::backdrop { pointer-events: none; }
@starting-style {
  .legal[open] { opacity: 0; }
}
.legal::backdrop {
  opacity: 0;
  background-color: rgba(var(--bg-rgb), .85);
  transition: opacity .4s, display .4s allow-discrete, overlay .4s allow-discrete;
}
.legal[open]::backdrop { opacity: 1; }
@starting-style {
  .legal[open]::backdrop { opacity: 0; }
}
.legal_inner { position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.legal_title { padding-inline-end: 3em; }
.legal_heading { display: block; opacity: .55; }
.legal_content p { opacity: .85; }
.legal_list li { position: relative; opacity: .85; }
.legal_list li:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: var(--color-yellow);
}
.legal_mark { opacity: .5; border-block-start: 1px solid rgba(var(--fg-rgb), .12); }
.legal_close { position: absolute; opacity: .6; transition: opacity .4s linear; }
.legal_closeLines { display: grid; place-items: center; aspect-ratio: 1/1; }
.legal_closeLine {
  grid-area: 1/1;
  width: 100%;
  height: 1px;
  background-color: var(--color-white);
}
.legal_closeLine:first-of-type { rotate: 45deg; }
.legal_closeLine:last-of-type { rotate: -45deg; }

/* footer opener — same hairline-underline voice as .filters_clear */
.footer_legal {
  justify-self: start;
  border-block-end: 1px solid rgba(var(--fg-rgb), .2);
  color: var(--color-white);
  opacity: .8;
  transition: opacity .4s linear, border-color .4s linear;
}

/* ==========================================================================
   § PC — all desktop sizing
   ========================================================================== */
@media (min-width: 768px) {
  /* -- dock -- */
  .mtools { left: 5vw; bottom: 4.5rem; }
  .mtools_tab { gap: .5rem; padding: .5rem .875rem; }
  .mtools_tabDot { width: 4px; height: 4px; }
  .mtools_panel {
    width: min(40rem, 62vw);
    max-height: min(66vh, 42rem);
  }
  .mtools_head { padding: 1rem 1.25rem; }
  .mtools_close { width: 1.5rem; height: 1.5rem; padding: .375rem; }
  .mtools_closeLines { width: .75rem; }

  .mtools_section { padding: 1rem 1.25rem 1.125rem; }
  .mtools_labelHint { margin-inline-start: .5em; }
  .mtools_labelHint:before { margin-inline-end: .5em; }
  .mtools_btns { gap: 1.25rem; margin-block-start: .875rem; }
  .mtools_btn { padding-block-end: .25rem; }
  .mtools_flash { margin-block-start: .75rem; }

  /* -- console -- */
  .console { padding: 1rem 1.25rem 1.25rem; }
  .console__head { gap: 1rem; margin-block-end: .875rem; }
  .console__title span { margin-block-start: .4rem; }
  .ctbl th { font-size: clamp(10.5px, .875vw, 15.75px); padding: 0 .5rem .5rem; }
  .ctbl td { font-size: 13px; padding: .4rem .5rem; }
  .ctbl__grp td { font-size: clamp(10.5px, .875vw, 15.75px); padding: 1rem .5rem .4rem; }
  .ctbl__grp:first-child td { padding-block-start: .5rem; }
  .mlock { font-size: 10px; margin-inline-start: .5em; }
  .tag--cat { font-size: 10px; margin-inline-start: .625em; }
  .live-count { font-size: 11px; margin-inline-start: .25em; }
  .ctbl .cb { width: 14px; height: 14px; }

  /* -- legal dialog -- */
  .legal { width: min(48rem, 84vw); max-height: min(86vh, 50rem); }
  .legal_inner { padding: 3vw; }
  .legal_title { margin-block-end: 1.875vw; }
  .legal_heading { margin-block: 1.875vw .625vw; }
  .legal_content > p + p { margin-block-start: .625vw; }
  .legal_list { margin-block-start: .625vw; }
  .legal_list li { padding-inline-start: 1.25rem; }
  .legal_list li:before { top: .95em; left: .25rem; width: 4px; height: 4px; }
  .legal_mark { margin-block-start: 2.5vw; padding-block-start: 1.25vw; }
  .legal_close { top: 1.25vw; right: 1.25vw; width: 2.5vw; height: 2.5vw; padding: .625vw; }
  .legal_closeLines { width: 1.25vw; }

  /* -- footer opener: TAKES OVER the slot the retired "Catalogue via Artwork
        Archive" credit held (14/24) in the 36-column .footer_foot grid, so
        the row keeps the original three-beat rhythm —
          ©2026 Sheth Family 1/7 · legal 14/24 · Page top 34/37
        Parked at 24/34 it left a dead run of seventeen columns (7→24, nearly
        half the row) between the copyright and the pill. justify-self:start
        (structural, above) still shrink-wraps the button so the hairline
        underline is exactly as wide as the words; nowrap keeps the label on
        one line at the 768px floor, where it still clears "Page top" by a
        wide margin. -- */
  .footer_legal { grid-column: 14/24; padding-block-end: .25rem; white-space: nowrap; }
}

/* ==========================================================================
   § Hover (pointer devices only)
   ========================================================================== */
@media (any-hover: hover) {
  .mtools_tab:hover { opacity: 1; border-color: rgba(var(--fg-rgb), .45); }
  .mtools_close:hover,
  .legal_close:hover { opacity: 1; }
  .mtools_btn:not([disabled]):hover { opacity: 1; border-color: var(--color-white); }
  .footer_legal:hover { opacity: 1; border-color: var(--color-white); }
  .ctbl .cb:not(:disabled):hover { border-color: rgba(var(--fg-rgb), .7); }
}

/* ==========================================================================
   § SP — phones
   The dock becomes a bottom sheet; the legal dialog a full-screen takeover.
   ========================================================================== */
@media (max-width: 767px) {
  .mtools { left: 0; right: 0; bottom: 0; }
  .mtools_tab {
    margin-inline-start: 10.1990049751vw;
    margin-block-end: 2.4875621891vw;
    gap: .5rem;
    padding: .5rem .75rem;
  }
  .mtools_tabDot { width: 4px; height: 4px; }
  .mtools_panel {
    width: 100%;
    max-height: 78dvh;
    border-inline: 0;
    border-block-end: 0;
    padding-block-end: env(safe-area-inset-bottom, 0px);
  }
  .mtools_head { padding: 1rem 5.9701492537vw; }
  .mtools_close { width: 2rem; height: 2rem; padding: .5rem; }
  .mtools_closeLines { width: 1rem; }

  .mtools_section { padding: 1rem 5.9701492537vw 1.125rem; }
  .mtools_labelHint { margin-inline-start: .5em; }
  .mtools_labelHint:before { margin-inline-end: .5em; }
  .mtools_btns { gap: 1.25rem; margin-block-start: .875rem; }
  .mtools_btn { padding-block: .25rem; }
  .mtools_flash { margin-block-start: .75rem; }

  /* -- console: the 5-column table scrolls sideways inside the sheet -- */
  .console { padding: 1rem 5.9701492537vw 1.25rem; }
  .console__head { gap: .75rem; margin-block-end: .875rem; }
  .console__title span { margin-block-start: .35rem; }
  .ctbl { min-width: 21rem; }
  .ctbl th { font-size: 2.7363184080vw; padding: 0 .35rem .45rem; }
  .ctbl td { font-size: 3.2vw; padding: .5rem .35rem; }
  .ctbl__grp td { font-size: 2.7363184080vw; padding: .9rem .35rem .35rem; }
  .mlock { font-size: 2.4vw; margin-inline-start: .5em; }
  .tag--cat { font-size: 2.4vw; margin-inline-start: .5em; }
  .live-count { font-size: 2.6vw; margin-inline-start: .25em; }
  .ctbl .cb { width: 18px; height: 18px; } /* comfortable touch target */

  /* -- footer opener: .footer_foot collapses to one 100% column with a
        row-gap, so the three items simply stack — ©2026 Sheth Family, the
        pill, then "Page top" (justify-self:end, from styles.css). No column
        maths applies here, so the desktop 14/24 slot is irrelevant; all the
        phone needs is the same breathing room under the hairline the PC
        block gives it, and the freedom to wrap if the label ever grows. -- */
  .footer_legal { padding-block-end: .25rem; white-space: normal; }

  /* -- legal dialog: full-screen takeover -- */
  .legal {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
  }
  .legal_inner { padding: 14.9253731343vw 10.1990049751vw 12.4378109453vw; }
  .legal_title { margin-block-end: 7.4626865672vw; }
  .legal_heading { margin-block: 7.4626865672vw 2.4875621891vw; }
  .legal_content > p + p { margin-block-start: 2.4875621891vw; }
  .legal_list { margin-block-start: 2.4875621891vw; }
  .legal_list li { padding-inline-start: 1.25rem; }
  .legal_list li:before { top: .95em; left: .25rem; width: 4px; height: 4px; }
  .legal_mark { margin-block-start: 9.9502487562vw; padding-block-start: 4.9751243781vw; }
  .legal_close { top: 4.9751243781vw; right: 6.9651741294vw; width: 2.5rem; height: 2.5rem; padding: .75rem; }
  .legal_closeLines { width: 1rem; }
}

/* ==========================================================================
   § Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mtools_tab,
  .mtools_btn,
  .mtools_close,
  .legal_close,
  .footer_legal,
  .ctbl .cb { transition: none; }
  .legal,
  .legal::backdrop { transition: none; }
}

/* ==========================================================================
   § Hide works from viewers (master-only)
   Card badge + dimming, the per-card selection overlay, the fixed selection
   bar, and the "Show hidden" manager <dialog>. Izanami vocabulary: ink + bone,
   1px hairlines, gold accent, no radius. Every colour is a :root token so the
   whole surface flips with the live day/night theme. The dialog mirrors the
   .legal pattern above (opacity fade + backdrop wash, Esc/backdrop close).
   ========================================================================== */

/* -- master grid: "Hidden" badge + dimming, and the selection overlay ----- */
/* the article becomes the positioning context for its badge/overlay (admin only) */
.pieces-role-admin .piece { position: relative; }

.sfcHide_badge {
  position: absolute;
  z-index: 3;
  top: .5rem;
  left: .5rem;
  padding: .2em .55em;
  background-color: var(--color-yellow);
  color: var(--color-black);
  font-family: Cinzel, serif;
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
}
.is-sfcHidden .piece_media { opacity: .5; transition: opacity .3s linear; }

/* selection overlay — present ONLY while selecting (master.js adds/removes it) */
.sfcHide_pick {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}
.sfcHide_box {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: block;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-white);
  background-color: rgba(var(--bg-rgb), .55);
  transition: background-color .15s linear, border-color .15s linear;
}
.sfcHide_box::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid var(--color-black);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
  opacity: 0;
}
.is-sfcPicked .sfcHide_box { background-color: var(--color-yellow); border-color: var(--color-yellow); }
.is-sfcPicked .sfcHide_box::after { opacity: 1; }
.is-sfcPicked .piece_media { outline: 2px solid var(--color-yellow); outline-offset: -2px; }

/* -- fixed selection bar -------------------------------------------------- */
.mHideBar {
  position: fixed;
  z-index: 60; /* above .nav (50) and the master dock (45) so it stays reachable */
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid rgba(var(--fg-rgb), .2);
  background-color: var(--color-black);
  color: var(--color-white);
}
/* author display:flex would beat the [hidden] UA rule — pin it back explicitly */
.mHideBar[hidden] { display: none; }
.mHideBar_title { opacity: .85; }
.mHideBar_hint { opacity: .6; }
.mHideBar_hint:not(:empty)::before { content: "·"; display: inline-block; opacity: .55; margin: 0 .4em; }
.mHideBar_actions { display: flex; align-items: center; gap: .875rem; margin-inline-start: auto; }
.mHideBar_btn {
  border-block-end: 1px solid rgba(var(--fg-rgb), .2);
  color: var(--color-white);
  opacity: .85;
  cursor: pointer;
  transition: opacity .4s linear, border-color .4s linear;
}
.mHideBar_btn[disabled] { opacity: .3; cursor: default; }
.mHideBar_btn.-primary {
  border: 1px solid var(--color-yellow);
  background-color: var(--color-yellow);
  color: var(--color-black);
  opacity: 1;
}
.mHideBar_btn.-primary[disabled] { opacity: .4; }

/* -- "Show hidden" manager dialog (mirrors .legal / .filtersDialog) -------- */
.hiddenDialog {
  opacity: 0;
  display: flex;
  flex-direction: column;
  margin: auto;
  padding: 0;
  overflow: clip;
  border: 1px solid rgba(var(--fg-rgb), .2);
  background-color: var(--color-black);
  color: var(--color-white);
  transition: opacity .4s, display .4s allow-discrete, overlay .4s allow-discrete;
}
.hiddenDialog[open] { opacity: 1; }
.hiddenDialog:not([open]),
.hiddenDialog:not([open])::backdrop { pointer-events: none; }
@starting-style { .hiddenDialog[open] { opacity: 0; } }
.hiddenDialog::backdrop {
  opacity: 0;
  background-color: rgba(var(--bg-rgb), .85);
  transition: opacity .4s, display .4s allow-discrete, overlay .4s allow-discrete;
}
.hiddenDialog[open]::backdrop { opacity: 1; }
@starting-style { .hiddenDialog[open]::backdrop { opacity: 0; } }

.hiddenDialog_head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-block-end: 1px solid rgba(var(--fg-rgb), .12);
}
.hiddenDialog_title { min-width: 0; opacity: 1; }
.hiddenDialog_x { flex: none; opacity: .6; cursor: pointer; transition: opacity .4s linear; }
.hiddenDialog_xLines { display: grid; place-items: center; aspect-ratio: 1/1; }
.hiddenDialog_xLine { grid-area: 1/1; width: 100%; height: 1px; background-color: var(--color-white); }
.hiddenDialog_xLine:first-of-type { rotate: 45deg; }
.hiddenDialog_xLine:last-of-type { rotate: -45deg; }

.hiddenDialog_body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.hiddenDialog_tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-block-end: 1px solid rgba(var(--fg-rgb), .12);
}
.hiddenDialog_selall {
  border-block-end: 1px solid rgba(var(--fg-rgb), .2);
  color: var(--color-white);
  opacity: .8;
  cursor: pointer;
  transition: opacity .4s linear, border-color .4s linear;
}
.hiddenDialog_selall[disabled] { opacity: .3; cursor: default; }
.hiddenDialog_note { opacity: .6; }
.hiddenDialog_empty { opacity: .7; text-align: center; }

.hiddenList { display: block; margin: 0; padding: 0; list-style: none; }
.hiddenRow { display: block; border-block-end: 1px solid rgba(var(--fg-rgb), .08); }
.hiddenRow:last-child { border-block-end: 0; }
.hiddenRow_pick { display: flex; align-items: center; gap: 1rem; cursor: pointer; }
.hiddenRow_cb {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(var(--fg-rgb), .5);
  background-color: transparent;
  cursor: pointer;
  transition: background-color .15s linear, border-color .15s linear;
}
.hiddenRow_cb:checked { background-color: var(--color-yellow); border-color: var(--color-yellow); }
.hiddenRow_thumb {
  flex: none;
  display: block;
  overflow: hidden;
  background-color: rgba(var(--fg-rgb), .08);
}
.hiddenRow_thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hiddenRow_thumb.-noimg { border: 1px solid rgba(var(--fg-rgb), .15); }
.hiddenRow_meta { min-width: 0; }
.hiddenRow_title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hiddenRow_artist { display: block; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hiddenDialog_foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  border-block-start: 1px solid rgba(var(--fg-rgb), .12);
}
.hiddenDialog_unhide {
  flex: none;
  border: 1px solid var(--color-yellow);
  background-color: var(--color-yellow);
  color: var(--color-black);
  cursor: pointer;
  transition: opacity .4s;
}
.hiddenDialog_unhide[disabled] { opacity: .4; cursor: default; }

/* -- PC sizing -- */
@media (min-width: 768px) {
  .sfcHide_badge { font-size: 11px; }

  .mHideBar {
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: .625rem 1.125rem;
    max-width: min(38rem, 82vw);
  }
  .mHideBar_btn { padding-block-end: .2rem; }
  .mHideBar_btn.-primary { padding: .4rem 1rem; }

  .hiddenDialog { width: min(42rem, 84vw); max-height: min(84vh, 46rem); }
  .hiddenDialog_head { padding: 1.25rem 1.5rem; }
  .hiddenDialog_x { width: 1.75rem; height: 1.75rem; padding: .4rem; }
  .hiddenDialog_xLines { width: .9rem; }
  .hiddenDialog_body { padding: 0 1.5rem; }
  .hiddenDialog_tools { padding: 1rem 0; }
  .hiddenDialog_selall { padding-block-end: .25rem; }
  .hiddenRow_pick { padding: .75rem 0; }
  .hiddenRow_thumb { width: 3rem; height: 3rem; }
  .hiddenDialog_empty { padding: 2.5rem 0; }
  .hiddenDialog_foot { padding: 1rem 1.5rem; }
  .hiddenDialog_unhide { padding: .5rem 1.25rem; }
}

/* -- hover (pointer devices) -- */
@media (any-hover: hover) {
  .hiddenDialog_x:hover { opacity: 1; }
  .mHideBar_btn:not([disabled]):not(.-primary):hover { opacity: 1; border-color: var(--color-white); }
  .mHideBar_btn.-primary:not([disabled]):hover { opacity: .88; }
  .hiddenDialog_selall:not([disabled]):hover { opacity: 1; border-color: var(--color-white); }
  .hiddenDialog_unhide:not([disabled]):hover { opacity: .88; }
  .sfcHide_pick:hover .sfcHide_box { border-color: var(--color-yellow); }
  .hiddenRow_cb:not(:checked):hover { border-color: rgba(var(--fg-rgb), .8); }
}

/* -- SP / phones -- */
@media (max-width: 767px) {
  .sfcHide_badge { font-size: 3vw; }
  .sfcHide_box { width: 26px; height: 26px; } /* comfortable touch target */
  .sfcHide_box::after { left: 9px; top: 4px; width: 7px; height: 13px; }

  .mHideBar {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem 5.9701492537vw calc(.75rem + env(safe-area-inset-bottom, 0px));
    border-inline: 0;
    border-block-end: 0;
  }
  .mHideBar_actions { width: 100%; justify-content: space-between; gap: .5rem; margin-inline-start: 0; }
  .mHideBar_btn { padding-block-end: .2rem; }
  .mHideBar_btn.-primary { padding: .45rem .9rem; }

  .hiddenDialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
  }
  .hiddenDialog_head { padding: 1rem 5.9701492537vw; }
  .hiddenDialog_x { width: 2rem; height: 2rem; padding: .5rem; }
  .hiddenDialog_xLines { width: 1rem; }
  .hiddenDialog_body { padding: 0 5.9701492537vw; }
  .hiddenDialog_tools { padding: 1rem 0; }
  .hiddenDialog_selall { padding-block-end: .25rem; }
  .hiddenRow_pick { padding: .875rem 0; }
  .hiddenRow_thumb { width: 3.25rem; height: 3.25rem; }
  .hiddenDialog_empty { padding: 2.5rem 0; }
  .hiddenDialog_foot { padding: 1rem 5.9701492537vw calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .hiddenDialog_unhide { padding: .6rem 1.25rem; }
}

/* -- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .sfcHide_box,
  .is-sfcHidden .piece_media,
  .mHideBar_btn,
  .hiddenDialog_x,
  .hiddenDialog_selall,
  .hiddenDialog_unhide,
  .hiddenRow_cb { transition: none; }
  .hiddenDialog,
  .hiddenDialog::backdrop { transition: none; }
}