/* Threads, the connection board (board.js): one canvas on a cloth, with the search box, hint, legend, zoom and
   full-screen buttons, trail bar and heading card laid over it. Day: a felt wall with depth and a kesri thread (mockup C);
   night: dark fabric, brass and kesri (mockup A). Every colour, radius, shadow and duration comes from
   the shared tokens in theme.css; the fallbacks here only keep the page usable if that file is missing.
   The reader's own wall (/mine/, mine.js on Cytoscape) borrows the same cloth and card at the end. */

.board-page .page-main { max-width: none; padding: 1.4rem clamp(1rem, 3vw, 2rem) 3rem; }
/* type on a kesri button or badge: dark in both themes (--accent-ink is the accent as text, not text on it) */
.bd-stage { --bd-on-accent: var(--bg, #15171a); --bd-glass: color-mix(in srgb, var(--surface, #1f2226) 82%, transparent); }
:root[data-theme="day"] .bd-stage { --bd-on-accent: var(--ink, #1a1512); }
.bd-stage, .bd-stage button, .bd-stage input { font-family: var(--font-sans, inherit); }
:lang(pa) .bd-stage, :lang(pa) .bd-stage button, :lang(pa) .bd-stage input { font-family: var(--font-gurmukhi-sans, var(--font-sans, inherit)); }
.bd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.4rem; margin-bottom: 1rem; }
.bd-head h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.bd-head .lede { margin: 0; max-width: 48rem; font-size: 1rem; }

/* ---------- the stage and its cloth ---------- */
.bd-stage {
  position: relative; isolation: isolate; overflow: hidden;
  height: clamp(26rem, calc(100svh - var(--bar, var(--bar-h, 3.75rem)) - 11rem), 60rem);   /* --bar: the top bar's real height (theme.js) */
  border-radius: var(--r-l, 20px);
  background: var(--surface-2, #292d32);
  box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0, 0, 0, .7)), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.bd-cloth { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; }
/* night: a dark woven fabric, lit from above, dark at the edges */
.bd-cloth {
  background-image:
    radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, .04), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 2px);
  box-shadow: inset 0 0 140px rgba(0, 0, 0, .75), inset 0 2px 4px rgba(0, 0, 0, .8);
}
.bd-cloth::after { content: ""; position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay; background-image: var(--bg-texture, none); }
/* day: felt, a lit corner, a soft vignette, the fibres of the cloth */
:root[data-theme="day"] .bd-cloth {
  background-image:
    radial-gradient(120% 95% at 16% -12%, rgba(255, 240, 215, .45), transparent 58%),
    radial-gradient(80% 70% at 104% 108%, rgba(60, 40, 20, .28), transparent 62%);
  box-shadow: inset 0 0 160px rgba(60, 40, 20, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
:root[data-theme="day"] .bd-cloth::before {
  content: ""; position: absolute; inset: 0; opacity: .45; mix-blend-mode: soft-light; background-size: 900px 900px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='4' seed='9' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
}
:root[data-theme="day"] .bd-cloth::after {
  opacity: .18; mix-blend-mode: multiply; background-size: 600px 300px, 200px 200px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='300'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.55' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"), var(--bg-texture, none);
}
#board-canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline: none; border-radius: inherit; }
#board-canvas.is-dragging { cursor: grabbing; }
#board-canvas.on-node { cursor: pointer; }
#board-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--accent, #ea8a2c); }

/* ---------- controls on the stage ---------- */
.bd-stage > :not(.bd-cloth):not(#board-canvas) { z-index: 2; }
.bd-tools { position: absolute; left: 1rem; top: 1rem; width: min(22rem, calc(100% - 2rem)); }
#board-q {
  width: 100%; min-height: var(--tap, 2.75rem); padding: 0 1.1rem; font: 400 1rem/1 var(--font-body, inherit); color: var(--ink, #ece7dd);
  background: var(--bd-glass); border: 1px solid var(--line, rgba(236, 231, 221, .14));
  border-radius: var(--r-pill, 999px); box-shadow: var(--shadow-1, 0 2px 6px rgba(0, 0, 0, .35)); backdrop-filter: blur(8px);
  transition: border-color var(--dur-1, 160ms) var(--ease, ease);
}
#board-q::placeholder { color: var(--ink-3, #7d838b); }
#board-q:hover { border-color: var(--line-2, rgba(236, 231, 221, .2)); }
#board-q:focus-visible { outline: 2px solid var(--accent, #ea8a2c); outline-offset: 2px; }
.bd-suggest { margin: .35rem 0 0; padding: .3rem; list-style: none; background: var(--surface, #1f2226); border: 1px solid var(--line, rgba(236, 231, 221, .14));
  border-radius: var(--r-m, 14px); box-shadow: var(--shadow-lift, 0 20px 40px rgba(0, 0, 0, .45)); overflow: hidden; }
.bd-suggest li { display: flex; align-items: center; gap: .6rem; min-height: var(--tap, 2.75rem); padding: .3rem .8rem; border-radius: var(--r-s, 8px); cursor: pointer; color: var(--ink, #ece7dd);
  transition: background var(--dur-1, 160ms) var(--ease, ease); }
.bd-suggest li[aria-selected="true"], .bd-suggest li:hover { background: var(--accent-soft, rgba(234, 138, 44, .16)); }
.bd-suggest li.bd-none { color: var(--ink-3, #7d838b); cursor: default; }
.bd-suggest .bd-s-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-suggest .bd-s-kind { font: 500 .72rem/1 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3, #7d838b); }

/* the hint: one line beside the search box, in its own place; it fades after the first tap (board.js) */
.bd-hint { position: absolute; left: 50%; top: 1rem; translate: -50% 0; display: flex; align-items: center; min-height: var(--tap, 2.75rem); max-width: calc(100% - 46rem);
  margin: 0; padding: .5rem 1.1rem; font: 500 .68rem/1.5 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--ink-2, #b9bec5);
  background: var(--bd-glass); border: 1px solid var(--line, rgba(236, 231, 221, .14)); border-radius: var(--r-pill, 999px); backdrop-filter: blur(8px); pointer-events: none;
  transition: opacity var(--dur-3, 560ms) var(--ease, ease), visibility 0s linear var(--dur-3, 560ms); }
.bd-hint.gone { opacity: 0; visibility: hidden; }
:lang(pa) .bd-hint { letter-spacing: 0; font: 500 .85rem/1.5 var(--font-gurmukhi-sans, sans-serif); text-transform: none; }
@media (max-width: 1180px) { .bd-hint { left: 1rem; top: 4.4rem; translate: none; max-width: min(22rem, calc(100% - 2rem)); text-align: left; } }

/* the legend: a quiet pill in the bottom-left corner, out of the zoom buttons' way */
.bd-legend { position: absolute; left: 1rem; bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; max-width: calc(100% - 16rem); padding: .55rem .95rem;
  font: 500 .66rem/1 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2, #b9bec5);
  background: var(--bd-glass); border: 1px solid var(--line, rgba(236, 231, 221, .14)); border-radius: var(--r-pill, 999px); backdrop-filter: blur(8px); pointer-events: none; }
:lang(pa) .bd-legend { letter-spacing: 0; font: 500 .82rem/1 var(--font-gurmukhi-sans, sans-serif); text-transform: none; }
.bd-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.bd-legend i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
:root[data-theme="day"] .bd-legend i { box-shadow: 0 1px 1px rgba(0, 0, 0, .4); }
.bd-legend .k-events i { border-radius: 2px; }
.bd-legend .k-debates i { rotate: 45deg; border-radius: 2px; }
.k-people { color: var(--k-people, #ea8a2c); } .k-orgs { color: var(--k-orgs, #c9a461); } .k-places { color: var(--k-places, #8db6da); }
.k-events { color: var(--k-events, #ece7dd); } .k-debates { color: var(--k-debates, #b48ead); }

.bd-zoom { position: absolute; right: calc(1rem + var(--tap, 2.75rem) + .5rem); bottom: 1rem; display: flex; align-items: center; gap: .4rem; }
.bd-zoom button { min-width: var(--tap, 2.75rem); min-height: var(--tap, 2.75rem); padding: 0; display: grid; place-items: center; font: 600 1.1rem/1 var(--font-body, inherit); color: var(--ink, #ece7dd);
  background: var(--bd-glass); border: 1px solid var(--line, rgba(236, 231, 221, .14)); border-radius: var(--r-pill, 999px); cursor: pointer; backdrop-filter: blur(8px);
  box-shadow: var(--shadow-1, 0 2px 6px rgba(0, 0, 0, .35)); transition: border-color var(--dur-1, 160ms) var(--ease, ease), color var(--dur-1, 160ms) var(--ease, ease), translate var(--dur-1, 160ms) var(--ease, ease); }
.bd-zoom button:hover { border-color: var(--accent, #ea8a2c); color: var(--accent-ink, #f2a35a); translate: 0 -1px; }
.bd-zoom button:focus-visible { outline: 2px solid var(--accent, #ea8a2c); outline-offset: 2px; }
.bd-zoom .bd-fit { padding: 0 1.1rem; font-size: .9rem; }
:lang(pa) .bd-zoom .bd-fit { font-family: var(--font-gurmukhi-sans, sans-serif); font-weight: 700; }

/* the full-screen button: beside the zoom buttons on a computer, top-right on a phone (board.js toggles aria-pressed) */
.bd-full { position: absolute; right: 1rem; bottom: 1rem; width: var(--tap, 2.75rem); height: var(--tap, 2.75rem); display: grid; place-items: center; padding: 0;
  color: var(--ink, #ece7dd); background: var(--bd-glass); border: 1px solid var(--line, rgba(236, 231, 221, .14)); border-radius: var(--r-pill, 999px); cursor: pointer; backdrop-filter: blur(8px);
  box-shadow: var(--shadow-1, 0 2px 6px rgba(0, 0, 0, .35)); transition: border-color var(--dur-1, 160ms) var(--ease, ease), color var(--dur-1, 160ms) var(--ease, ease), translate var(--dur-1, 160ms) var(--ease, ease); }
.bd-full:hover { border-color: var(--accent, #ea8a2c); color: var(--accent-ink, #f2a35a); translate: 0 -1px; }
.bd-full:focus-visible { outline: 2px solid var(--accent, #ea8a2c); outline-offset: 2px; }
.bd-full svg { grid-area: 1 / 1; width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity var(--dur-2, 320ms) var(--ease, ease), transform var(--dur-2, 320ms) var(--ease, ease); }
.bd-full[aria-pressed="true"] .ico-full, .bd-full[aria-pressed="false"] .ico-unfull { opacity: 0; transform: scale(.6); }
/* full screen (the Fullscreen API, or the fixed fallback): the stage over everything, square corners, the same controls */
.bd-stage.is-full { position: fixed; inset: 0; z-index: 200; height: auto; border-radius: 0; box-shadow: none; background: var(--surface-2, #292d32); }
.bd-stage.is-full .bd-cloth, .bd-stage.is-full #board-canvas { border-radius: 0; }
.bd-stage.is-full .bd-zoom, .bd-stage.is-full .bd-full, .bd-stage.is-full .bd-legend { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
html.bd-fullscreen, html.bd-fullscreen body { overflow: hidden; }

/* ---------- the dock: heading card and trail ---------- */
.bd-dock { position: absolute; right: 1rem; top: 1rem; display: flex; flex-direction: column; gap: .6rem; width: min(19rem, calc(100% - 2rem)); pointer-events: none; }
.bd-dock > * { pointer-events: auto; }
.bd-card, .bd-trail {
  background: var(--surface, #1f2226); color: var(--ink, #ece7dd); border: 1px solid var(--line, rgba(236, 231, 221, .14));
  border-radius: var(--r-m, 14px); box-shadow: var(--shadow-lift, 0 20px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06));
  transition: opacity var(--dur-2, 320ms) var(--ease, ease), translate var(--dur-2, 320ms) var(--ease, ease);
}
@starting-style { .bd-card, .bd-trail { opacity: 0; translate: 0 -6px; } }   /* the card settles in, never pops */
.bd-card { padding: .85rem 1rem .9rem; }
.bd-card[hidden], .bd-trail[hidden] { display: none; }
.bd-kind { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; font: 500 .66rem/1 var(--font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3, #7d838b); }
:lang(pa) .bd-kind { letter-spacing: 0; font: 500 .82rem/1 var(--font-gurmukhi-sans, sans-serif); text-transform: none; }
.bd-kind i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
:root[data-theme="day"] .bd-kind i { box-shadow: 0 1px 1px rgba(0, 0, 0, .4); }
.bd-kind .k-events i { border-radius: 2px; } .bd-kind .k-debates i { rotate: 45deg; border-radius: 2px; }
.bd-kind .bd-step { margin-left: auto; color: var(--accent-ink, #f2a35a); white-space: nowrap; }
.bd-card h2 { margin: 0; font: 500 1.15rem/1.2 var(--font-display, inherit); text-wrap: balance; }
:lang(pa) .bd-card h2 { font: 700 1.1rem/1.4 var(--font-gurmukhi, serif); }
.bd-line { margin: .3rem 0 0; font-size: .85rem; line-height: 1.4; color: var(--ink-2, #b9bec5); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.bd-more { margin: .2rem 0 0; font-size: .78rem; color: var(--ink-3, #7d838b); }
.bd-actions { display: flex; align-items: center; gap: .45rem; margin: .75rem 0 0; }
.bd-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: var(--tap, 2.75rem); padding: 0 1rem; font: 700 .85rem/1 var(--font-sans, inherit); white-space: nowrap;
  color: var(--ink, #ece7dd); text-decoration: none; background: none; border: 1px solid var(--line-2, rgba(236, 231, 221, .18)); border-radius: var(--r-pill, 999px); cursor: pointer;
  transition: border-color var(--dur-1, 160ms) var(--ease, ease), color var(--dur-1, 160ms) var(--ease, ease), background var(--dur-1, 160ms) var(--ease, ease), translate var(--dur-1, 160ms) var(--ease, ease); }
:lang(pa) .bd-btn { font-family: var(--font-gurmukhi-sans, sans-serif); }
.bd-btn:hover { border-color: var(--accent, #ea8a2c); color: var(--accent-ink, #f2a35a); translate: 0 -1px; }
.bd-btn:focus-visible { outline: 2px solid var(--accent, #ea8a2c); outline-offset: 2px; }
.bd-btn-main { background: var(--accent, #ea8a2c); border-color: var(--accent, #ea8a2c); color: var(--bd-on-accent); box-shadow: var(--shadow-1, 0 2px 6px rgba(0, 0, 0, .35)); }
.bd-btn-main:hover { color: var(--bd-on-accent); background: color-mix(in srgb, var(--accent, #ea8a2c) 85%, #fff); }
.bd-btn-clear { margin-left: auto; min-width: var(--tap, 2.75rem); padding: 0; font-size: 1.25rem; font-weight: 500; }

/* on a computer the trail is a numbered list down the card's side; on a phone, a strip above the sheet */
.bd-trail { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; padding: .5rem .5rem .5rem .9rem; }
.bd-trail-lbl { flex: 1; font: 500 .66rem/1 var(--font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3, #7d838b); white-space: nowrap; }
:lang(pa) .bd-trail-lbl { letter-spacing: 0; font: 500 .82rem/1 var(--font-gurmukhi-sans, sans-serif); text-transform: none; }
.bd-steps { display: flex; flex-direction: column; flex-basis: 100%; gap: .1rem; min-width: 0; max-height: 12rem; margin: 0; padding: 0; list-style: none; overflow: auto; scrollbar-width: none; }
.bd-steps::-webkit-scrollbar { display: none; }
.bd-steps li { display: flex; align-items: center; gap: .2rem; flex: none; min-width: 0; }
.bd-steps button { display: inline-flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; min-height: 2.25rem; padding: 0 .6rem 0 .3rem; font: 500 .82rem/1.2 var(--font-body, inherit); text-align: left;
  color: var(--ink-2, #b9bec5); background: none; border: 1px solid transparent; border-radius: var(--r-pill, 999px); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color var(--dur-1, 160ms) var(--ease, ease), color var(--dur-1, 160ms) var(--ease, ease), background var(--dur-1, 160ms) var(--ease, ease); }
:lang(pa) .bd-steps button { font-family: var(--font-gurmukhi-sans, sans-serif); }
.bd-steps button b { display: grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--accent, #ea8a2c); color: var(--bd-on-accent); font: 700 .68rem/1 var(--font-sans, inherit); }
.bd-steps button span { overflow: hidden; text-overflow: ellipsis; }
.bd-steps button:hover { border-color: var(--line, rgba(236, 231, 221, .14)); color: var(--ink, #ece7dd); }
.bd-steps button[aria-current="step"] { color: var(--ink, #ece7dd); background: var(--accent-soft, rgba(234, 138, 44, .16)); }
.bd-steps button:focus-visible { outline: 2px solid var(--accent, #ea8a2c); outline-offset: -2px; }
.bd-trail .bd-btn { min-height: 2.25rem; padding: 0 .75rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
:lang(pa) .bd-trail .bd-btn { letter-spacing: 0; text-transform: none; font-size: .85rem; }
/* under the steps: the trail's case files side by side (cases.js), and Clear */
.bd-trail-acts { display: flex; align-items: center; gap: .4rem; flex-basis: 100%; margin: .25rem 0 0; }
.bd-trail-cases { flex: 1; min-height: var(--tap, 2.75rem); }

/* the warm-up: the stage shows a thread drawing across the bottom while the layout settles (board.js) */
.bd-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--accent, #ea8a2c); transform-origin: 0 50%; transform: scaleX(0); transition: transform var(--dur-2, 320ms) var(--ease, ease); }
.bd-progress.done { opacity: 0; transition: opacity var(--dur-3, 560ms) var(--ease, ease); }

/* ---------- phone: the board fills the screen, the card is a sheet at the bottom ---------- */
@media (max-width: 760px) {
  .board-page .page-main { padding: 0; }
  .bd-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bd-stage { height: calc(100svh - var(--bar, var(--bar-h, 3.75rem))); border-radius: 0; box-shadow: none; }
  .bd-cloth, #board-canvas { border-radius: 0; }
  .bd-tools { left: .75rem; top: .75rem; width: calc(100% - 1.5rem - var(--tap, 2.75rem) - .5rem); }   /* room for the full-screen button */
  .bd-full { right: .75rem; top: .75rem; bottom: auto; }
  .bd-stage.is-full .bd-full { top: calc(.75rem + env(safe-area-inset-top, 0px)); bottom: auto; }
  .bd-hint { left: .75rem; right: .75rem; top: 4.1rem; translate: none; max-width: none; min-height: 0; justify-content: center; padding: .55rem 1rem; font-size: .62rem; letter-spacing: .08em; text-align: center; }
  :lang(pa) .bd-hint { font-size: .8rem; }
  .bd-legend { display: none; }
  .bd-zoom { right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }
  .bd-zoom button:not(.bd-fit) { display: none; }
  .bd-stage.has-trail .bd-zoom { display: none; }
  .bd-trail-acts { flex: none; flex-basis: auto; margin: 0; }
  .bd-trail-cases { display: none; }   /* the sheet's Open case opens the trail's cases on a phone */
  .bd-dock { left: 0; right: 0; top: auto; bottom: 0; width: auto; gap: 0; }
  @starting-style { .bd-card, .bd-trail { translate: 0 8px; } }
  .bd-card, .bd-trail { border-radius: var(--r-l, 20px) var(--r-l, 20px) 0 0; border-bottom: 0; box-shadow: var(--shadow-lift, 0 -10px 40px rgba(0, 0, 0, .45)); }
  .bd-trail { flex-wrap: nowrap; margin-bottom: -1px; padding: .3rem .5rem .3rem .85rem; }
  .bd-trail-lbl { flex: none; }
  .bd-steps { flex-direction: row; flex: 1; flex-basis: auto; align-items: center; gap: .2rem; max-height: none; }
  .bd-steps li + li::before { content: "→"; color: var(--ink-3, #7d838b); font-size: .8rem; }
  .bd-steps button { flex: none; max-width: 11rem; min-height: var(--tap, 2.75rem); }
  .bd-trail .bd-btn { min-height: var(--tap, 2.75rem); }
  .bd-trail + .bd-card { border-radius: 0; box-shadow: none; }
  .bd-card { display: grid; grid-template-columns: 1fr auto; column-gap: .7rem; align-items: center; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px)) 1rem; }
  .bd-kind { margin: 0; grid-column: 1; }
  .bd-card h2 { grid-column: 1; font-size: 1rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-wrap: initial; }
  .bd-line { grid-column: 1; margin-top: .1rem; font-size: .8rem; }
  .bd-more { display: none; }
  .bd-actions { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .bd-btn { padding: 0 .75rem; font-size: .8rem; }
  .bd-btn-clear { margin-left: 0; }
  .bd-trail:not([hidden]) + .bd-card .bd-btn-clear { display: none; }   /* the strip above already offers Clear trail; the sheet keeps Open case and Back */
}

/* ---------- the reader's own wall (/mine/, Cytoscape): the same cloth and card ---------- */
.mine-page .board { position: relative; height: min(68svh, 46rem); border-radius: var(--r-l, 20px); border: 0; overflow: hidden;
  background: var(--surface-2, #292d32); box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0, 0, 0, .7)), inset 0 0 140px rgba(0, 0, 0, .6); }
:root[data-theme="day"] .mine-page .board { box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0, 0, 0, .4)), inset 0 0 160px rgba(60, 40, 20, .35); }
.mine-page .board-card { background: var(--surface, #1f2226); color: var(--ink, #ece7dd); border: 1px solid var(--line, rgba(236, 231, 221, .14));
  border-radius: var(--r-m, 14px); box-shadow: var(--shadow-lift, 0 20px 40px rgba(0, 0, 0, .45)); }
.mine-page .board-card h2 { font-family: var(--font-display, inherit); font-weight: 500; }
.mine-page .mine-legend, .mine-page .mine-account, .mine-page .mine-banner { border-radius: var(--r-m, 14px); }