/* The front page: a shelf of three catalogs, each a grid of big portrait
   cards (plans/front-page-shelf.md, games/index).

   The parchment itself, the nav, flash messages and buttons: pages/parchment.css.

   The shelf is sized in px, not rem. The root is 20px above 768px and 16px
   under (base.css), and a card is a picture with words on it, drawn to the
   same proportions at both. */

/* ── Layout ── */
/* Wider than the pages around it: three cards in a row want about 1040px,
   and .container stops at 900px under 1400px (base.css). */
@media (max-width: 1399.98px) {
  body:has(.dashboard) .container { max-width: 1100px; }
}
.dashboard {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 0 64px;
}
/* The container's own 0.6rem, made up to a 16px gutter. */
@media (max-width: 768px) {
  .dashboard { padding: 16px 6px 48px; }
}


/* ── The catalogs ──
   Running heads rather than tabs: a centred row of names, each with its count,
   a fleuron between them and a gilt rule under the row. The open one is in
   ink, with a bar laid on the rule. */
.shelf-catalogs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 14px;
  margin-bottom: 28px;
}
.shelf-catalogs::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, #a0895e 20%, #8a7354 50%, #a0895e 80%, transparent 100%);
  opacity: 0.6;
}
/* 44px tall, a thumb's size, on every screen. The names that are not open
   keep 5:1 on the parchment; the mockup's fainter ink read at 2.3:1. */
.shelf-catalog {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  font-family: 'Cinzel', 'Palatino Linotype', serif;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: #65523a;
}
/* Ornament, not words: the empty alternative keeps it out of the link's name
   where a browser reads generated content. The first line is for a browser
   that does not know that syntax. */
.shelf-catalog + .shelf-catalog::before {
  content: '❧';
  content: '❧' / '';
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  letter-spacing: 0;
  color: #a0895e;
}
.shelf-catalog-count {
  font-family: 'Lora', Georgia, serif;
  font-size: 12px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.shelf-catalog[aria-current="page"] { color: #2a1d0e; font-weight: 700; }
/* Laid on the gilt rule: the row's 14px of padding below, and the rule's 1px. */
.shelf-catalog[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -15px;
  height: 2px;
  background: #3a2a14;
}
@media (hover: hover) {
  .shelf-catalog:hover { color: #2a1d0e; }
}
@media (max-width: 560px) {
  .shelf-catalog { gap: 5px; padding: 0 10px; font-size: 12px; letter-spacing: 0.12em; }
  .shelf-catalog + .shelf-catalog::before { left: -5px; font-size: 10px; }
  .shelf-catalog[aria-current="page"]::after { left: 10px; right: 10px; }
}
/* On a phone the row must stay one line: the open catalog's bar is laid on
   the nav's rule, so a second line would leave it hanging between the rows,
   and start that line with a fleuron. Three-digit counts (a long Archive) no
   longer fit at the widths above, so the names close up and shrink with the
   screen, each link still 44px tall. The fleuron is centred on the boundary
   between two links, since the offset above crowds the count before it once
   the padding is this narrow. */
@media (max-width: 420px) {
  .shelf-catalogs { flex-wrap: nowrap; }
  .shelf-catalog {
    padding: 0 clamp(8px, 2.6vw, 11px);
    font-size: clamp(10.5px, 3.3vw, 12px);
    letter-spacing: 0.06em;
  }
  .shelf-catalog + .shelf-catalog::before { left: 0; transform: translate(-50%, -50%); }
  .shelf-catalog[aria-current="page"]::after { left: clamp(8px, 2.6vw, 11px); right: clamp(8px, 2.6vw, 11px); }
}

/* ── The grid ──
   Three cards a row on a desktop, two on a tablet, one on a phone. */
.shelf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
@media (max-width: 900px) {
  .shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 559.98px) {
  .shelf-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
/* New Game alone (nothing else in Games yet) stands in the middle, at about
   the width it has in a row of three. */
.shelf-grid--lone { grid-template-columns: minmax(0, 340px); justify-content: center; }

/* Archive pages after the first arrive in frames (games/_shelf_archive_page),
   which must not be grid items themselves: their cards are. */
.shelf-frame { display: contents; }
.shelf-more {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 2px;
}
.shelf-more-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid #5a4a30;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: #3a2a14;
}
.shelf-frame[busy] .shelf-more-link { opacity: 0.5; cursor: progress; }
@media (hover: hover) {
  .shelf-more-link:hover { background: rgba(138, 115, 84, 0.12); }
}

/* ── A card ──
   A painting in a frame: a dark ground, an ink border, a gilt rule inside it.
   The face (a link, or a button where pressing posts) covers the whole card;
   the "⋯" menu sits over it in the corner, beside it rather than inside it.

   Each card is its own stacking context, so nothing inside one is drawn over
   the next, and the one with its menu open is raised above its neighbours so
   the menu can hang over the row below. overflow: hidden is on the art, not
   here, where it would cut off the focus ring and the menu. */
.shelf-card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  aspect-ratio: 3 / 4;
  background: #2b2014;
  border: 1px solid rgba(58, 42, 20, 0.55);
  box-shadow: 0 1px 0 rgba(255, 245, 220, 0.6), 0 6px 18px rgba(40, 25, 10, 0.22);
}
.shelf-card.is-menu-open { z-index: 1; }
.shelf-card::before {
  content: '';
  position: absolute;
  inset: 7px;
  z-index: 2;
  border: 1px solid rgba(232, 214, 176, 0.35);
  pointer-events: none;
}
@media (max-width: 559.98px) {
  .shelf-card { aspect-ratio: 4 / 5; }
}
/* Only a card whose face opens something lifts under the pointer. */
@media (hover: hover) {
  .shelf-card:not(.shelf-card--inert):hover { box-shadow: 0 1px 0 rgba(255, 245, 220, 0.6), 0 12px 26px rgba(40, 25, 10, 0.3); }
}

/* base.css makes every link teal, and a button wears the browser's look, so
   the face says its own. As a button it sits in a form of its own, which
   takes no box. */
.shelf-card-face-form { display: contents; }
.shelf-card-face {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: #efe3cd;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
/* A face that opens nothing (a legacy story with no hero, games/_shelf_card)
   is words, not a control. */
.shelf-card--inert .shelf-card-face { cursor: default; }

.shelf-card-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* The painting is 2:3 and the card 3:4: the crop keeps the head, which is in
   the top band of a full-length figure (Portraits::PromptBuilder::FRAMING). */
.shelf-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}

/* No picture — being written, a draft, a hero drawn without one — is a
   parchment plate with the hero's initial in a double-ruled square, until
   each theme has a placeholder picture of its own. */
.shelf-card-plate {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(90, 60, 30, 0.05) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse at 50% 38%, #e9dcc2 0%, #d8c6a2 60%, #c4ae86 100%);
}
/* The initial sits in the room the words leave, not at a fixed height: the
   words grow upward with a long title, a two-line reason or a German chip,
   and a square centred on the whole plate ended up under them. So on a plate
   the face is a column — the square's slot, then the words at the foot — and
   the slot takes whatever height is left. It starts below a chip of two
   lines (64px), and the words' scrim may fade in over its lower edge
   (margin-top: -50px) as it does over a painting. The square is 132px where
   there is room and shrinks with the slot where there is not (container
   units: 12px is its outer rule and the gap to it, 6px a side). */
.shelf-card--plate .shelf-card-face { display: flex; flex-direction: column; }
.shelf-card-initial-slot {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  margin-top: 64px;
  container-type: size;
  display: grid;
  place-items: center;
}
.shelf-card--plate .shelf-card-body { position: relative; flex: none; margin-top: -50px; }
.shelf-card-initial {
  display: grid;
  place-items: center;
  height: min(132px, 100cqh - 12px);
  width: auto;
  aspect-ratio: 1;
  border: 2px solid #3a2a14;
  outline: 1px solid #3a2a14;
  outline-offset: 5px;
  background: rgba(239, 227, 205, 0.6);
  font-family: 'Cinzel', serif;
  font-size: min(88px, 66cqh - 8px);
  font-weight: 700;
  line-height: 1;
  color: #3a2a14;
}
/* Too little room for a square that reads: none rather than a dot. */
@container (max-height: 44px) {
  .shelf-card-initial { display: none; }
}

/* The chip: what state the story is in, top left. Kept clear of the menu's
   corner, so a long one wraps rather than running under the ⋯. */
.shelf-card-chip {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  max-width: calc(100% - 94px);
  padding: 5px 9px;
  border: 1px solid rgba(58, 42, 20, 0.5);
  background: rgba(239, 227, 205, 0.92);
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2a1d0e;
}
.shelf-card-chip--red { background: var(--color-failure); border-color: #5e1c1c; color: #f6e7df; }
.shelf-card-chip--green { background: #4f6f58; border-color: #33503c; color: #eef2e6; }
.shelf-card-chip--quiet { background: rgba(20, 13, 5, 0.7); border-color: rgba(232, 214, 176, 0.35); color: #e8dcc2; }

/* The words at the foot, on a dark scrim so they read over any painting.
   It is dark from the top of the words down, and the fade lives only in the
   70px of padding above them. A fade across the words themselves left the
   theme's name, the smallest and faintest of them, at about 3.2:1 over a
   light painting under a three-line title, and at about 2:1 on a draft's
   pale paper; now it keeps 4.5:1 or more even over white. Plates, pale
   already, take a slightly lighter scrim and a lighter ink for the name. */
.shelf-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 70px 22px 22px;
  background: linear-gradient(to top, rgba(20, 13, 5, 0.94) 0%, rgba(20, 13, 5, 0.8) calc(100% - 70px), transparent 100%);
}
.shelf-card--plate .shelf-card-body {
  background: linear-gradient(to top, rgba(20, 13, 5, 0.88) 0%, rgba(20, 13, 5, 0.74) calc(100% - 70px), transparent 100%);
}
.shelf-card-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #cdb994;
}
.shelf-card--plate .shelf-card-eyebrow { color: #e3d3b3; }
/* Three lines at most: a long world name must not push the rest off the card.
   A single word wider than the card (a German compound, a Polish adjective)
   breaks rather than being cut off at the edge by the clamp's overflow. */
.shelf-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-family: 'Cinzel', serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: #f6ecd8;
  text-wrap: balance;
}
/* Items joined by a "·" that never starts a line. Each dot sits in the 24px
   gap before its item (absolutely placed, right: 100%), so an item that wraps
   to the start of a line pushes its dot outside the box on the left, where
   overflow: hidden cuts it off. Mid-line it reads as today: 10px, dot, 10px. */
.shelf-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  overflow: hidden;
  font-family: 'Lora', Georgia, serif;
  font-size: 13.5px;
  line-height: 1.4;
  color: #d9cbb0;
}
.shelf-card-meta:empty { display: none; }
.shelf-card-meta-item { position: relative; }
.shelf-card-meta-item + .shelf-card-meta-item::before {
  content: '·';
  content: '·' / '';
  position: absolute;
  right: 100%;
  width: 24px;
  text-align: center;
  color: #a8966f;
}
/* A draft's wizard: a segment a step, lit where the step is done. */
.shelf-card-steps { display: flex; gap: 5px; margin-top: 4px; }
.shelf-card-step { flex: 1; height: 3px; background: rgba(232, 214, 176, 0.3); }
.shelf-card-step.is-done { background: #e8d6b0; }
/* What a press does. Always there on a touch screen, where nothing hovers;
   where a pointer can hover it comes up with the hover, or with focus. */
.shelf-card-hint {
  margin-top: 8px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f1e6cf;
  opacity: 0.9;
}
@media (hover: hover) {
  .shelf-card-hint { opacity: 0; transform: translateY(4px); }
  .shelf-card:is(:hover, :focus-within) .shelf-card-hint { opacity: 0.9; transform: none; }
}

/* Being written: the initial in dashes, a slow sheen across the plate, and
   dots after "Writing the world". The motion itself is under Motion below. */
.shelf-card--writing .shelf-card-initial { border-style: dashed; outline-style: dashed; color: var(--ink-muted); }
.shelf-card--writing .shelf-card-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 248, 230, 0.45) 50%, transparent 70%);
  transform: translateX(-100%);
}
.shelf-card-dots { display: inline-block; width: 1em; overflow: hidden; vertical-align: bottom; }
@keyframes shelf-sheen { to { transform: translateX(100%); } }
@keyframes shelf-dots { from { width: 0; } to { width: 1em; } }

/* A draft is a sketch, not a painting: ruled paper. */
.shelf-card--draft { background: #e2d3b8; }
.shelf-card--draft .shelf-card-plate {
  background:
    repeating-linear-gradient(0deg, rgba(90, 60, 30, 0.08) 0 1px, transparent 1px 26px),
    radial-gradient(ellipse at 50% 38%, #efe4cf 0%, #e0cfae 100%);
}

/* A story that is over fades to sepia, and warms again under the pointer. */
.shelf-card--archived .shelf-card-img { filter: sepia(0.55) saturate(0.7) brightness(0.92); }
@media (hover: hover) {
  .shelf-card--archived:hover .shelf-card-img { filter: sepia(0.2) saturate(0.9); }
}

/* ── The ⋯ menu ──
   Over the face in the top-right corner. 44px square on a touch screen, a
   square it owns whole: the face is under every other point of the card. */
.shelf-card-menu {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
}
.shelf-card-menu-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(58, 42, 20, 0.45);
  border-radius: 50%;
  background: rgba(239, 227, 205, 0.9);
  font-family: 'Lora', Georgia, serif;
  font-size: 18px;
  line-height: 1;
  color: #2a1d0e;
  cursor: pointer;
}
/* The toggle sits on a painting of any colour, where the app's ink ring,
   drawn off its edge, vanished on a dark portrait (about 2:1). So it takes
   the ring the lightbox gives controls over pictures (access.css): light,
   with a dark halo that carries it on a light painting or a plate. Under
   forced colours the halo drops and the outline stays. */
.shelf-card-menu-toggle { --focus-ring: #efe3cd; }
.shelf-card-menu-toggle:focus-visible { box-shadow: 0 0 0 6px rgba(20, 13, 5, 0.6); }
.shelf-card-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 170px;
  padding: 4px 0;
  border: 1px solid rgba(58, 42, 20, 0.5);
  background: #efe3cd;
  box-shadow: 0 8px 22px rgba(30, 18, 6, 0.35);
}
.shelf-card-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  background: none;
  font-family: 'Lora', Georgia, serif;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  color: #3a2a14;
  cursor: pointer;
}
/* Inside the item: drawn outside, the ring would stray over the card behind. */
.shelf-card-menu-item:focus-visible { outline-offset: -3px; }
.shelf-card-menu-item--danger { border-top: 1px solid rgba(160, 137, 94, 0.4); color: var(--color-failure); }
@media (pointer: coarse) {
  .shelf-card-menu { top: 10px; right: 10px; }
  .shelf-card-menu-toggle { position: relative; width: 44px; height: 44px; }
  /* The circle is only what shows: a touch counts inside its border, so the
     square's corners would fall through to the face and open the card. */
  .shelf-card-menu-toggle::before { content: ''; position: absolute; inset: -1px; }
  .shelf-card-menu-item { min-height: 44px; }
}
@media (hover: hover) {
  .shelf-card-menu-toggle:hover { background: #efe3cd; }
  .shelf-card-menu-item:hover { background: rgba(160, 137, 94, 0.2); }
}

/* ── New Game ──
   The last card of Games: a dashed space on the parchment with an ink seal. */
.shelf-new {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 24px;
  border: 1.5px dashed rgba(58, 42, 20, 0.5);
  background: rgba(239, 227, 205, 0.35);
  font: inherit;
  text-align: center;
  text-decoration: none;
  color: #3a2a14;
  cursor: pointer;
}
.shelf-new::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(58, 42, 20, 0.18);
  pointer-events: none;
}
@media (max-width: 559.98px) {
  .shelf-new { aspect-ratio: 4 / 5; }
}
.shelf-new-seal {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 1px solid #1c130a;
  border-radius: 50%;
  background: #3a2a14;
  box-shadow: 0 1px 0 rgba(255, 240, 210, 0.4) inset, 0 3px 8px rgba(40, 25, 10, 0.3);
  font-family: 'Cinzel', serif;
  font-size: 44px;
  line-height: 1;
  color: #f1e6cf;
}
.shelf-new-title {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3a2a14;
}
/* Waiting for the tick: dimmed, and nothing lights up under the pointer. */
.shelf-new:disabled { opacity: 0.45; cursor: not-allowed; }
@media (hover: hover) {
  .shelf-new:not(:disabled):hover { background: rgba(239, 227, 205, 0.6); box-shadow: 0 8px 22px rgba(40, 25, 10, 0.15); }
}

/* ── An empty catalog ── */
.shelf-empty {
  max-width: 520px;
  margin: 10px auto 0;
  padding: 34px 26px;
  border: 1px solid rgba(138, 115, 84, 0.35);
  background: rgba(239, 227, 205, 0.4);
  text-align: center;
}
/* An empty Blueprints catalog keeps New Blueprint under its note, a grid's
   gap below it. */
.shelf-empty + .shelf-grid { margin-top: 28px; }
.shelf-empty-heading {
  margin-bottom: 10px;
  font-family: 'Cinzel', serif;
  font-size: 17px;
  letter-spacing: 0.1em;
  color: #3a2a14;
}
.shelf-empty p {
  font-family: 'Lora', Georgia, serif;
  font-size: 15px;
  line-height: 1.6;
  color: #5a4a30;
}

/* ── Motion ──
   All of it waits for a reader who has not asked for less: the reveal, the
   lift, the sheen, the fades. */
@media (prefers-reduced-motion: no-preference) {
  .dashboard { animation: riseIn 0.8s ease-out both; }
  .shelf-catalog { transition: color 0.2s ease; }
  .shelf-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .shelf-card-img { transition: transform 0.6s ease, filter 0.3s ease; }
  .shelf-card-hint { transition: opacity 0.25s ease, transform 0.25s ease; }
  .shelf-new, .shelf-new-seal { transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; }
  .shelf-card--writing .shelf-card-plate::after { animation: shelf-sheen 2.4s linear infinite; }
  .shelf-card-dots { animation: shelf-dots 1.5s steps(4, end) infinite; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .shelf-card:not(.shelf-card--inert):hover { transform: translateY(-3px); }
  .shelf-card:hover .shelf-card-img { transform: scale(1.03); }
  .shelf-new:not(:disabled):hover .shelf-new-seal { transform: scale(1.06); }
}

/* ── AI content notice ──
   The welcome over a new player's first New Game, and before the account has
   agreed to the Terms, the form with the tick in it, above the catalogs. */
.dashboard-notice {
  max-width: 600px;
  border: 1px solid rgba(138, 115, 84, 0.3);
  background: rgba(239, 227, 205, 0.35);
  padding: 1.5rem 1.5rem;
  margin: 0 auto 28px;
  text-align: center;
}
.dashboard-notice p {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #5a4a30;
  margin: 0 0 0.75rem;
}
.dashboard-notice p:last-child { margin-bottom: 0; }
.dashboard-notice-heading {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #3a2a14;
  margin-bottom: 1rem;
}
/* The paragraph's ink, not a fainter one: the line says what agreeing to
   the Terms means, and #8a7354 read at about 3:1 on the notice. */
.dashboard-notice-consent {
  font-style: italic;
  font-size: 0.72rem;
  color: #5a4a30;
}
.dashboard-notice-consent a {
  color: #5a4a30;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (hover: hover) {
  .dashboard-notice-consent a:hover {
    color: #3a2a14;
  }
}
/* As a checkbox the consent stops being a footnote and becomes the control, so
   it drops the italic and sits on the baseline of its own box. */
.dashboard-notice-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-style: normal;
  font-size: 0.78rem;
  cursor: pointer;
  margin: 0.9rem 0 0.4rem;
}
.dashboard-notice-check input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  accent-color: #5a4a30;
  width: 0.95rem;
  height: 0.95rem;
  cursor: pointer;
}