/* ==========================================================================
   theme-zhihu — plugin pages: links, photos, douban, bangumi, equipments.
   ========================================================================== */

/* ---------- links ---------- */

/* Same body card as the bangumi/douban/steam pages: one surface card holds the
   grouped wall and the apply panel, so the tiles inside step down to --surface-2
   instead of floating on the page background. */
.links-page {
  margin-bottom: 10px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

/* The empty state already sits inside the page card, so it drops its own. */
.links-page .empty-state {
  padding: 24px 0 8px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* A section is the group strip plus its own grid. The rule that follows the
   title is what stops the heading from reading as a stray sentence above the
   cards, so the count pill has to sit before it. */
.link-group + .link-group {
  margin-top: 20px;
}

.link-group__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 600;
}

.link-group__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--divider);
}

.link-group__count {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* One height for every card: the wall reads as a wall only when the rows line
   up, and a missing description must not shrink its card. */
.link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
  transition: background-color 0.18s ease;
}

.link-card:hover {
  background: var(--surface-3-hover);
}

.link-card__logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface);
}

.link-card__initial {
  color: var(--muted-strong);
  font-size: 16px;
  font-weight: 600;
}

.link-card__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface-2);
}

.link-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.link-card__name {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-card:hover .link-card__name {
  color: var(--accent);
}

.link-card__description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---------- 友链申请 ---------- */

/* A section inside the page card, separated from the wall by a hairline: the
   fields keep the same --surface-2 ladder they use everywhere else, which works
   in both schemes without a dark override for the panel. */
.link-apply {
  margin-top: 20px;
  border-top: 1px solid var(--divider);
}

.link-apply__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Text stays on the wall's left edge while the hover fill runs to the card's
     inner edge, so the row reads as one band instead of a floating chip. */
  margin: 0 -20px;
  padding: 14px 20px;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s ease;
}

.link-apply__summary::-webkit-details-marker {
  display: none;
}

.link-apply__summary:hover {
  background: var(--surface-3-hover);
}

.link-apply__title {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}

.link-apply__hint {
  color: var(--muted);
  font-size: 12.5px;
}

.link-apply__chevron {
  margin-left: auto;
  color: var(--muted);
  font-size: 14px;
  transition: transform 0.2s ease;
}

.link-apply[open] .link-apply__chevron {
  transform: rotate(180deg);
}

.link-apply__body {
  margin: 0 -20px;
  padding: 4px 20px 16px;
  border-top: 1px solid var(--divider);
}

.apply-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
}

.apply-note--ok {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

.apply-note--error {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
}

.apply-note--off {
  background: var(--surface-3);
  color: var(--muted-strong);
}

.apply-intro {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.apply-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  margin-top: 14px;
}

.apply-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.apply-field--wide {
  grid-column: 1 / -1;
}

.apply-field label {
  color: var(--muted-strong);
  font-size: 12.5px;
}

.apply-required {
  margin-left: 2px;
  color: var(--accent);
  font-style: normal;
}

.apply-field input,
.apply-field textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.apply-field input:hover,
.apply-field textarea:hover {
  border-color: var(--border-strong);
}

.apply-field input:focus,
.apply-field textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
  background: var(--surface);
  outline: none;
}

.apply-field textarea {
  min-height: 56px;
  resize: vertical;
}

.apply-field .is-invalid {
  border-color: var(--md-on-error-container);
}

.apply-captcha {
  display: flex;
  align-items: center;
  gap: 10px;
}

.apply-captcha input {
  flex: 0 0 160px;
}

.apply-captcha__img {
  width: 104px;
  height: 36px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  object-fit: contain;
  cursor: pointer;
}

.apply-captcha__tip {
  color: var(--muted);
  font-size: 12px;
}

.apply-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

.apply-footnote {
  color: var(--muted);
  font-size: 12px;
}

.apply-footnote em {
  color: var(--accent);
  font-style: normal;
}

/* ---------- photo grid ---------- */

.photo-grid {
  column-count: 3;
  column-gap: 8px;
}

.photo-card {
  position: relative;
  margin: 0 0 8px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.photo-card__media {
  display: block;
  overflow: hidden;
  background: var(--surface-2);
}

.photo-card__media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.35s ease;
}

.photo-card:hover .photo-card__media img {
  transform: scale(1.04);
}

.photo-card__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 30px 12px 10px;
  background: linear-gradient(
    180deg,
    rgba(10, 9, 12, 0) 0%,
    rgba(10, 9, 12, 0.55) 55%,
    rgba(10, 9, 12, 0.85) 100%
  );
}

.photo-card__title {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.photo-card__title:hover {
  color: #fff;
  text-decoration: underline;
}

.photo-card__description {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: max-height 0.24s ease, margin-top 0.24s ease, opacity 0.2s ease;
}

/* On pointer devices the caption starts as a title-only strip; the description
   slides in and pushes the title up, mirroring the Douban grid. */
@media (hover: hover) and (pointer: fine) {
  .photo-card__description {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
  }

  .photo-card:hover .photo-card__description,
  .photo-card:focus-within .photo-card__description {
    max-height: 3em;
    margin-top: 2px;
    opacity: 1;
  }
}

/* ---------- photo detail ---------- */

.photo-detail {
  padding: 20px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.photo-detail__figure {
  margin: 0;
}

.photo-detail__figure > a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}

.photo-detail__image {
  display: block;
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
}

.photo-detail__caption {
  margin-top: 14px;
}

.photo-detail__title {
  font-size: 20px;
  font-weight: 600;
}

.photo-detail__description {
  margin-top: 6px;
  color: var(--muted-strong);
  font-size: 14px;
  line-height: 1.7;
}

.photo-detail__position {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.photo-detail__position strong {
  color: var(--text-2);
  font-weight: 600;
}

.photo-detail__tags {
  margin-top: 12px;
  list-style: none;
}

.photo-detail__tags .chip {
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 400;
}

.info-panel {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
}

.info-panel .section-title {
  margin-bottom: 12px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 0;
}

.info-grid dt {
  color: var(--muted);
  font-size: 12px;
}

.info-grid dd {
  margin: 2px 0 0;
  color: var(--text-2);
  font-size: 14px;
}

.photo-detail__nav {
  margin-top: 22px;
}

.photo-neighbors {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
}

.photo-neighbors .section-title {
  margin-bottom: 12px;
}

.neighbor-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.neighbor-thumb {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}

.neighbor-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.neighbor-thumb.is-current {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---------- equipments ---------- */

.equipment-group {
  padding: 18px 20px 6px;
  margin-bottom: 10px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.equipment-group[hidden] {
  display: none;
}

.equipment-group__head {
  margin-bottom: 12px;
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  padding-bottom: 12px;
}

.equipment-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}

.equipment-card__cover {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-3);
}

.equipment-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.equipment-card:hover .equipment-card__cover img {
  transform: scale(1.03);
}

.equipment-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 12px 14px 14px;
}

.equipment-card__name {
  font-size: 15px;
  font-weight: 600;
}

.equipment-card__spec {
  margin-top: 2px;
  font-size: 12px;
}

.equipment-card__description {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.6;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.equipment-card .text-link {
  margin-top: 8px;
}

.equipment-group__empty {
  padding-bottom: 12px;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- global image effects ----------
   The admin picks off / zoom / follow; main.js writes the follow offsets into
   the standalone translate property so it composes with any hover scale. */

[data-image-effect="off"] .post-card__cover img,
[data-image-effect="off"] .media-tile img,
[data-image-effect="off"] .media-tile video,
[data-image-effect="off"] .prose .lightbox-link img,
[data-image-effect="off"] .prose .lightbox-video video,
[data-image-effect="off"] .photo-card__media img,
[data-image-effect="off"] .photo-detail__figure img,
[data-image-effect="off"] .neighbor-thumb img,
[data-image-effect="off"] .equipment-card__cover img,
[data-image-effect="off"] .bangumi-card__cover img,
[data-image-effect="off"] .steam-game__cover img,
[data-image-effect="off"] .douban-page .db--image,
[data-image-effect="off"] .bw-card__media img,
[data-image-effect="off"] .bw-today__media img {
  transform: none !important;
  translate: none !important;
}

[data-image-effect="zoom"] .post-card__cover img,
[data-image-effect="zoom"] .media-tile img,
[data-image-effect="zoom"] .media-tile video,
[data-image-effect="zoom"] .prose .lightbox-link img,
[data-image-effect="zoom"] .prose .lightbox-video video,
[data-image-effect="zoom"] .photo-card__media img,
[data-image-effect="zoom"] .photo-detail__figure img,
[data-image-effect="zoom"] .neighbor-thumb img,
[data-image-effect="zoom"] .equipment-card__cover img,
[data-image-effect="zoom"] .bangumi-card__cover img,
[data-image-effect="zoom"] .steam-game__cover img,
[data-image-effect="zoom"] .douban-page .db--image,
[data-image-effect="zoom"] .bw-card__media img,
[data-image-effect="zoom"] .bw-today__media img {
  transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
  [data-image-effect="zoom"] .post-card:hover .post-card__cover img,
  [data-image-effect="zoom"] .moment-card .media-tile:hover img,
  [data-image-effect="zoom"] .moment-card .media-tile:hover video,
  [data-image-effect="zoom"] .prose .lightbox-link:hover img,
  [data-image-effect="zoom"] .prose .lightbox-video:hover video,
  [data-image-effect="zoom"] .photo-card__media:hover img,
  [data-image-effect="zoom"] .photo-detail__figure > a:hover img,
  [data-image-effect="zoom"] .neighbor-thumb:hover img,
  [data-image-effect="zoom"] .equipment-card:hover .equipment-card__cover img,
  [data-image-effect="zoom"] .bangumi-card:hover .bangumi-card__cover img,
  [data-image-effect="zoom"] .steam-game:hover .steam-game__cover img,
  [data-image-effect="zoom"] .douban-page .db--item:hover .db--image,
  [data-image-effect="zoom"] .bw-card:hover .bw-card__media img,
  [data-image-effect="zoom"] .bw-today:hover .bw-today__media img {
    transform: scale(1.04);
  }
}

[data-image-effect="follow"] .prose .lightbox-link img,
[data-image-effect="follow"] .prose .lightbox-video video,
[data-image-effect="follow"] .media-tile img,
[data-image-effect="follow"] .media-tile video,
[data-image-effect="follow"] .photo-card__media img,
[data-image-effect="follow"] .photo-detail__figure img,
[data-image-effect="follow"] .neighbor-thumb img,
[data-image-effect="follow"] .equipment-card__cover img,
[data-image-effect="follow"] .bangumi-card__cover img,
[data-image-effect="follow"] .steam-game__cover img,
[data-image-effect="follow"] .douban-page .db--image,
[data-image-effect="follow"] .bw-card__media img,
[data-image-effect="follow"] .bw-today__media img {
  translate: 0 0;
  transition: transform 0.45s cubic-bezier(0.2, 0, 0, 1),
    translate 0.35s cubic-bezier(0.2, 1.35, 0.3, 1);
}

/* The pointer shift would uncover a strip of the box, so profile media grows a
   hair while it trails the cursor. */
@media (hover: hover) and (pointer: fine) {
  [data-image-effect="follow"] .prose .lightbox-link:hover img,
  [data-image-effect="follow"] .prose .lightbox-video:hover video,
  [data-image-effect="follow"] .moment-card .media-tile:hover img,
  [data-image-effect="follow"] .moment-card .media-tile:hover video,
  [data-image-effect="follow"] .bw-card:hover .bw-card__media img,
  [data-image-effect="follow"] .bw-today:hover .bw-today__media img {
    transform: scale(1.035);
  }
}

/* ---------- lightbox hover cursor ----------
   A previewable tile is one thing in the DOM: a link carrying data-fancybox,
   which is what Fancybox binds and what the scripts drop when a poster fails
   to load. The cursor therefore covers prose images and galleries, moment
   media, 图库, 装备, 追番, Steam and the douban wall without drawing anything
   over the picture. */
a[data-fancybox] {
  cursor: zoom-in;
}

/* Placeholder for images that failed to load; main.js swaps the source and
   keeps the box's proportions instead of showing a broken glyph. */
img.is-broken {
  background: var(--surface-2);
  object-fit: contain;
}

/* ---------- editor hyperlink card → Zhihu LinkCard ----------
   editor-hyperlink-card renders open shadow DOM, so the page can only set the
   host box and let custom properties inherit into the shadow tree. linkcard.js
   injects geometry per theme attribute into each card's shadowRoot: regular =
   frosted plate tinted by the card's own cover (the plate keeps its own
   luminance, the cover lends hue and chroma), full-width row with a 60px thumb
   left and title / one-line description / hostname meta to its right; grid =
   16:9 cover on top with title, description and hostname meta below; small =
   40px icon left of a title and description column. --zhihu-linkcard-plate and
   --zhihu-linkcard-sat are the two numbers that set how much colour comes
   through and need a per-scheme value; title, meta and accent ride the theme
   tokens, which inherit through the host and flip with the scheme. The
   html[...] prefix outranks the plugin's own `.dark hyperlink-card` rule. */
html[data-color-scheme] hyperlink-card {
  display: block;
  width: 100%;
  /* The editor serializes inline `margin-top:0.75em;margin-bottom:0` onto every
     card, which collapses against paragraph margins into a different gap above
     vs below and between types. Override the inline style and join the prose
     paragraph rhythm (1.1em) on both sides so all card types space alike. */
  margin: 1.1em 0 !important;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface-2);
  font-family: var(--font-sans);
  /* Light has to spend luminance to buy chroma: sRGB at 246 only fits chroma 8,
     which reads as no tint at all, so the plate sits at the luminance of the
     next step down (241, five levels under the column) and saturate is pushed
     to the gamut edge there — measured chroma 15, uniform across the card.
     The plate is deliberately NEUTRAL, not var(--surface-3): saturate() acts on
     the whole plate, and #eff1f3 carries a 4-level cool spread of its own, which
     480% would turn into a visible blue cast on any grey or monochrome cover.
     Same luminance as the token, no colour it did not ask for. */
  --zhihu-linkcard-plate: rgb(241, 241, 241);
  --zhihu-linkcard-sat: 480%;
  --zhihu-linkcard-blur: 60px;
  --zhihu-linkcard-scale: 1.4;
  --zhihu-linkcard-meta: #999;
  --halo-hyperlink-card-bg-color: transparent;
  --halo-hyperlink-card-border-color: transparent;
  --halo-hyperlink-card-border-hover-color: transparent;
  --halo-hyperlink-card-title-color: var(--text);
  --halo-hyperlink-card-description-color: var(--muted);
  --halo-hyperlink-card-link-color: var(--muted);
  --halo-hyperlink-card-skeleton-color: var(--surface-3);
}

/* Dark is the mirror problem: at 37 the gamut swallows anything, so the same
   saturate that barely reaches the visible in light paints a slab here (420%
   measured chroma 107, 90% still 7-30 with the red channel at 56 — read as
   「太亮」 even though Y709 never passed the token). The plate stays exactly
   where the accepted version had it, --surface-2, one step above the --surface
   column, no lift and no border, and the chroma is dialled down to 30%:
   measured 38-41 with chroma 2-9, i.e. the quiet plate from before with only a
   whisper of the cover left in it. The bound is a worst case, not an average —
   a pure yellow cover (yellow is the hue that lifts luma most) still only
   reaches 39/39/32, so no cover can make the card glow again. */
html[data-color-scheme="dark"] hyperlink-card {
  background: var(--surface-2);
  --zhihu-linkcard-plate: var(--surface-2);
  --zhihu-linkcard-sat: 30%;
}

/* 全局磨砂玻璃关掉时，封面那层不参与绘制，卡片只剩 --zhihu-linkcard-plate 的纯色平面。 */
html[data-glass="off"] hyperlink-card {
  --zhihu-linkcard-cover: none !important;
}

html[data-color-scheme] .prose > hyperlink-card:first-child {
  margin-top: 0 !important;
}

html[data-color-scheme] .prose > hyperlink-card:last-child {
  margin-bottom: 0 !important;
}

/* No host focus ring: a mouse click focuses the inner anchor and :focus-within
   would paint an outer blue box around the whole card. The keyboard-only ring
   lives inside the shadow tree instead (linkcard.js, a:focus-visible, inset). */

/* The inline variant stays a tonal chip; linkcard.js only restyles the block card. */
html[data-color-scheme] hyperlink-inline-card {
  --halo-hyperlink-card-inline-bg-color: var(--surface-3);
  --halo-hyperlink-card-inline-hover-bg-color: var(--surface-3-hover);
  --halo-hyperlink-card-inline-title-color: var(--text);
}

@media (hover: hover) {
  html[data-color-scheme] hyperlink-inline-card:hover {
    --halo-hyperlink-card-inline-title-color: var(--accent);
  }
}

/* No focus rule here on purpose. The chip's anchor lives in its own shadow
   tree, so :focus-within on the host also fired for a plain mouse click and
   painted an accent box around the chip, while :has(a:focus-visible) can never
   match across the boundary. The keyboard-only inset ring is injected into that
   tree by linkcard.js instead. */

/* ---------- drawing space (plugin: drawing-board) ---------- */

/* The whole app sits in an open shadow tree whose :host block re-declares
   --accent, --text, --surface, --bg and --muted on the host element itself, so
   those names cannot be borrowed from the theme: a document rule that sets
   --drawing-button: var(--accent) while :host sets --accent:
   var(--drawing-accent, …) closes a var() cycle, and every property in it is
   dropped as invalid at computed-value time — the component then silently keeps
   its own palette. The aliases below are read on <html>, where nothing competes,
   and only inherit down, so the substitution can never loop back.
   What the plugin does read is a --drawing-* group:
   var(--drawing-X, var(--drawing-config-X, 内置青绿)). That is the only door.
   Filling it behind --drawing-config-X keeps both routes alive, so a color
   typed into the plugin's own 前台外观 still wins and the theme's palette takes
   over when it is not. No light/dark branch: these tokens already flip, and
   the component follows the data-color-scheme the theme puts on <html>.

   The canvas is deliberately missing from this list. --drawing-surface and
   --drawing-background are the plugin's own 画布底色: it shades them per light
   and dark scheme and lets the author set them in its own backend, so
   borrowing --surface for them swapped a chosen palette for a near neighbour
   (#25292a became #252525, #fff became the theme's card tone). Those two stay
   with the plugin; only the surrounding chrome keeps following the theme. */
:root {
  --ds-accent: var(--accent);
  --ds-on-accent: var(--accent-on);
  --ds-text: var(--text);
  --ds-font: var(--font-sans);
}

html[data-color-scheme] drawing-space {
  --drawing-accent: var(--drawing-config-accent, var(--ds-accent));
  --drawing-color: var(--drawing-config-color, var(--ds-text));
  --drawing-button: var(--drawing-config-button, var(--ds-accent));
  --drawing-button-text: var(--drawing-config-button-text, var(--ds-on-accent));
  --drawing-font: var(--ds-font);
}

/* The plugin styles only its own demo page, so a front-end instance arrives
   with no box of its own and the container is left to the theme. */
drawing-space {
  display: block;
}

/* Same component inside an article or a page body: it becomes a block of the
   prose, with the prose's own rhythm instead of the page-length margin the
   template gets by standing alone. */
.prose drawing-space {
  margin: 16px 0;
}

/* One card behind the whole app, the way the 豆瓣 and 追番 pages take a single
   surface: the component paints nothing at all outside its shadow tree, so
   without this the gallery floats straight onto the page ground and the page
   reads as raw plugin output. Inside the card its own panels have to step up a
   tone or they disappear into it — the same fix the bangumi page applies to the
   blocks it hosts. The card itself is theme chrome; the canvas inside it keeps
   the plugin's own palette, which is the one the plugin backend edits. */
body.page-drawing .drawing-stage {
  margin-bottom: 10px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}