@import "./bord_lens_hover.css";

.bb_wrap,
.page-shell {
  --bb-glow-rgb: 255, 128, 32;
  --bb-glow-rest: rgba(var(--bb-glow-rgb), 0.24);
  --bb-glow-hover: rgba(var(--bb-glow-rgb), 0.42);
  --bb-glow-active: rgba(var(--bb-glow-rgb), 0.50);
  --bb-glow-root: rgba(var(--bb-glow-rgb), 0.58);
}

.bord {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--bb-shell-unit-mm) * var(--bb-shell-mm-scale));
  height: calc(var(--bb-shell-unit-mm) * var(--bb-shell-mm-scale));
  border-radius: var(--bb-r, 9px);
  overflow: hidden;
  cursor: pointer;
  --bb-surface-base: rgba(10, 8, 18, 0.10);
  --bb-surface-field: rgba(255, 255, 255, 0);
  --bb-surface-field-active: rgba(255, 255, 255, 0);
  --bb-surface-sheen: linear-gradient(135deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.035) 46%, rgba(255,255,255,0.00) 66%);
  --bb-surface-sheen-active: linear-gradient(135deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.05) 46%, rgba(255,255,255,0.00) 66%);
  --bb-overlay-tint: rgba(255, 255, 255, 0);
  --bb-overlay-vignette: radial-gradient(
    ellipse at 50% 50%,
    transparent 42%,
    rgba(0, 0, 0, 0.10) 68%,
    rgba(0, 0, 0, 0.28) 100%
  );
  --bb-outline-color: rgba(255, 255, 255, 0);
  --bord-outline-resolved-flag: 0;
  --bord-outline-width-mm: 0;
  --bord-outline-dash: 0;
  --bord-outline-opacity: 1;
  --bord-outline-style: solid;
  --bb-guide-color: rgba(255, 255, 255, 0);
  --bb-guide-alpha: 0;
  --bb-guide-shadow: none;
  --bb-artwork-opacity: 1;
  --bb-artwork-filter: none;
  --bb-artwork-blend-mode: normal;
  --bb-artwork-shadow: none;
  --bb-text-color: rgba(243, 232, 215, 0.88);
  --bb-text-blend-mode: normal;
  --bb-text-stroke: 0 transparent;
  --bb-glow-gain: 1;
  --bb-press-depth-px: 3;
  --bb-press-depth: calc(1px * var(--bb-press-depth-px, 3));
  --bb-press-scale: 0.992;
  --bb-glow-rest-alpha: calc(0.24 * var(--bb-glow-gain, 1));
  --bb-glow-hover-alpha: calc(0.42 * var(--bb-glow-gain, 1));
  --bb-glow-active-alpha: calc(0.50 * var(--bb-glow-gain, 1));
  --bb-glow-root-alpha: calc(0.58 * var(--bb-glow-gain, 1));
  --bb-type-heading-size: calc(var(--bb-shell-mm-scale) * 7);
  --bb-type-sub-size: calc(var(--bb-shell-mm-scale) * 3);
  --bb-type-body-size: calc(var(--bb-shell-mm-scale) * 2.5);
  --bb-type-kicker-size: calc(var(--bb-shell-mm-scale) * 2.5);
  --bb-type-meta-size: calc(var(--bb-shell-mm-scale) * 2);
  --bb-reveal-scale: 1;
  --bb-active-scale-bump: 1;
  --bb-reveal-z: 0px;
  background: var(--bb-surface-base);
  transform:
    translate(
      calc(var(--tx, 0px) + var(--bb-stage-offset-x, 0px) + var(--bb-slot-center-offset-x, 0px) + var(--bb-reveal-dx, 0px)),
      calc(var(--ty, 0px) + var(--bb-stage-offset-y, 0px) + var(--bb-slot-center-offset-y, 0px) + var(--bb-reveal-dy, 0px))
    )
    translateZ(var(--bb-reveal-z, 0px))
    scale(calc(0.88 * var(--bb-reveal-scale, 1) * var(--bb-active-scale-bump, 1)));
  opacity: 0;
  transition: transform var(--bb-dur, 0.42s) var(--bb-ease, cubic-bezier(0.16,1,0.3,1)), opacity 0.28s ease, box-shadow 0.2s ease, background 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  transform-style: preserve-3d;
  will-change: transform, opacity, box-shadow, filter;
}

.bord::before {
  content: "";
  position: absolute;
  inset: var(--bb-interaction-halo-inset, -10%);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s ease;
  background:
    var(--bb-interaction-halo-background,
      radial-gradient(circle at 50% 50%,
        rgba(var(--bb-glow-rgb), 0.00) 34%,
        rgba(var(--bb-glow-rgb), 0.14) 56%,
        rgba(var(--bb-glow-rgb), 0.26) 74%,
        rgba(var(--bb-glow-rgb), 0.00) 92%
      )
    );
}

.bord[data-mm-w="50"]  { width: calc(var(--bb-shell-mm-scale) * 50); }
.bord[data-mm-w="75"]  { width: calc(var(--bb-shell-mm-scale) * 75); }
.bord[data-mm-w="101"] { width: calc(var(--bb-shell-mm-scale) * 101); }
.bord[data-mm-w="151"] { width: calc(var(--bb-shell-mm-scale) * 151); }
.bord[data-mm-w="203"] { width: calc(var(--bb-shell-mm-scale) * 203); }
.bord[data-mm-h="50"]  { height: calc(var(--bb-shell-mm-scale) * 50); }
.bord[data-mm-h="75"]  { height: calc(var(--bb-shell-mm-scale) * 75); }
.bord[data-mm-h="101"] { height: calc(var(--bb-shell-mm-scale) * 101); }
.bord[data-mm-h="151"] { height: calc(var(--bb-shell-mm-scale) * 151); }
.bord[data-mm-h="203"] { height: calc(var(--bb-shell-mm-scale) * 203); }

.cell-primitive__text-input {
  color: var(--surface-text);
  caret-color: var(--surface-accent);
}

.cell-primitive__text-input::placeholder {
  color: var(--surface-muted);
  opacity: 0.72;
}

.cell-primitive__status-message {
  color: var(--surface-text);
}

.bord::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    var(--bb-surface-sheen),
    var(--bb-overlay-tint),
    var(--bb-surface-field);
  border-style: var(--bord-outline-style, solid);
  border-width: calc(
    (1 - var(--bord-outline-resolved-flag, 0)) * 1px +
    var(--bord-outline-resolved-flag, 0) *
    var(--bord-outline-width-mm, 0) *
    var(--bb-shell-mm-scale)
  );
  border-color: color-mix(
    in srgb,
    var(--bb-outline-color)
    calc(
      (
        (1 - var(--bord-outline-resolved-flag, 0)) +
        (var(--bord-outline-resolved-flag, 0) * var(--bord-outline-opacity, 1))
      ) * 100%
    ),
    transparent
  );
  box-shadow: var(--bb-guide-shadow);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    border-width 0.2s ease,
    box-shadow 0.2s ease;
}

.bord img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  opacity: var(--bb-artwork-opacity);
  filter: var(--bb-artwork-filter);
  mix-blend-mode: var(--bb-artwork-blend-mode, normal);
  box-shadow: var(--bb-artwork-shadow, none);
  transition: opacity 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.bord img.bord_render--selection {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition:
    opacity var(--bb-selection-surface-fade-ms, 300ms) ease,
    filter var(--bb-selection-surface-fade-ms, 300ms) ease;
}

.bord img.bord_render--bright {
  opacity: 0;
}

.bord img.bord_render--mute {
  opacity: 1;
}

.bord[data-bord-state="active"] img.bord_render--bright,
.bord[data-bord-state="hover"] img.bord_render--bright,
.bord[data-bord-state="selected"] img.bord_render--bright,
.bord[data-bord-state="focused"] img.bord_render--bright {
  opacity: 1;
}

.bord[data-bord-state="active"] img.bord_render--mute,
.bord[data-bord-state="hover"] img.bord_render--mute,
.bord[data-bord-state="selected"] img.bord_render--mute,
.bord[data-bord-state="focused"] img.bord_render--mute {
  opacity: 0;
}

.bord_image_base {
  filter: saturate(0.92) brightness(0.92);
}

.bord_image_overlay {
  position: absolute !important;
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0.30 !important;
  filter: grayscale(0.08) saturate(0.34) brightness(0.88);
}

.bord[data-id="root"],
.bord--root,
.bord--visible,
.bord--shell {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}

/* Authoring panel containers extend over the full stage height.
   Let clicks pass through to placed bords underneath.
   Only .bord elements within panels should capture pointer events. */
.bb_wrap[data-authoring-mode] .bb_stage,
.bb_wrap[data-authoring-mode] .bb_viewport,
.bb_wrap[data-authoring-mode] .bbt {
  pointer-events: none;
}
.bb_wrap[data-authoring-mode] .bord.bord--visible,
.bb_wrap[data-authoring-mode] .bord.bord--root,
.bb_wrap[data-authoring-mode] .bord.bord--shell {
  pointer-events: auto;
}
.bb_wrap[data-authoring-mode] .bord:not(.bord--visible):not(.bord--root):not(.bord--shell),
.bb_wrap[data-authoring-mode] .bord:not(.bord--visible):not(.bord--root):not(.bord--shell) * {
  pointer-events: none;
}

.bord[data-authoring-mode].authoring-active::after {
  border-color: var(--surface-accent-cool);
  box-shadow:
    0 0 0 1px var(--surface-accent-cool),
    0 0 14px color-mix(in srgb, var(--surface-accent-cool) 36%, transparent);
}

.bord[data-authoring-mode].authoring-dimmed {
  opacity: 0.72;
  filter: saturate(0.82);
}

.bord--authoring-selected::after {
  border-color: var(--surface-accent);
  box-shadow:
    0 0 0 1px var(--surface-accent),
    0 0 16px color-mix(in srgb, var(--surface-accent) 28%, transparent);
}

/* Textbox affordance — applied by authoring_mode_manager when the main
   edit menu is showing bord_editor AND a bord is selected. Dashed
   outline = pickable, solid accent = currently narrowed. P10: scoped by
   requiring the authoring-outline class on the enclosing bord. */
.bord--authoring-textbox-outline .bord_text_box--authoring-outline {
  outline: 1.5px dashed color-mix(in srgb, var(--surface-accent-cool) 82%, transparent);
  outline-offset: 2px;
  cursor: pointer;
  transition: outline-color 0.12s ease;
  /* Base .bord_text_box has pointer-events: none so text doesn't intercept
     bord-level clicks. When the textbox-narrow affordance is active, restore
     hit-testing so single-click can narrow selection to this textbox. */
  pointer-events: auto;
}

.bord--authoring-textbox-outline .bord_text_box--authoring-outline:hover {
  outline-color: var(--surface-accent-cool);
}

.bord--authoring-textbox-outline .bord_text_box--authoring-textbox-selected {
  outline: 2px solid var(--surface-accent);
  outline-offset: 2px;
}

.bord--dragging {
  --bb-artwork-opacity: 0.82;
  --bb-active-scale-bump: 1.02;
  z-index: 32;
}

.bord--dragging::after {
  border-color: var(--surface-accent-cool);
  box-shadow:
    0 0 0 1px var(--surface-accent-cool),
    0 0 18px color-mix(in srgb, var(--surface-accent-cool) 30%, transparent);
}

.authoring-acrostic-layer {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}

.authoring-acrostic-layer .bord {
  pointer-events: auto;
}

.bord--authoring-acrostic {
  overflow: visible;
  background: transparent;
}

.bord--authoring-acrostic::before,
.bord--authoring-acrostic::after {
  display: none;
}

.authoring-acrostic-inner {
  position: absolute;
  inset: 0;
}

.authoring-acrostic-cell {
  position: absolute;
  display: grid;
  place-items: center;
  border-style: solid;
  border-radius: 0;
  font-family: var(--surface-font-display);
  color: var(--surface-text);
}

.authoring-acrostic-letter {
  line-height: 1;
  font-family: var(--surface-font-display);
}

.bord--authoring-preview {
  opacity: 0.86;
  outline: 1.5px dashed var(--surface-accent-cool);
  outline-offset: 0;
}

.bord--authoring-acrostic .authoring-acrostic-inner {
  outline: 1px solid transparent;
  outline-offset: 0;
  transition: outline-color 0.15s ease, filter 0.15s ease;
}

.letterbox-host--selected,
.acrostic-word--selected {
  border: 1px dashed rgba(180, 210, 255, 0.9);
  border-radius: 0;
}

.bord--authoring-acrostic[data-acrostic-selected="true"] .authoring-acrostic-inner {
  outline-style: dashed;
  outline-color: rgba(180, 210, 255, 0.9);
}

.bord--authoring-acrostic:hover .authoring-acrostic-inner {
  outline-style: dashed;
  outline-color: color-mix(in srgb, var(--surface-text) 72%, transparent);
}

/* ── Contract-driven panel presentation ──────────────────────────
   These rules are keyed to data attributes set from presentation_defaults
   in the compiled structure contract.  No hard-coded values — each rule
   activates only when the contract specifies the relevant field.
   ────────────────────────────────────────────────────────────────── */

/* title_position: top — panel titles become activation buttons at top */
.bord[data-title-position="top"] .bord_title {
  cursor: pointer;
  pointer-events: auto;
  color: var(--surface-accent-cool);
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  font-size: var(--bb-type-sub-size);
  line-height: 1.2;
}
/* Hide duplicate cell-label text and meta when title is repositioned */
.bord[data-title-position="top"] > .bord_cell_binding_layer > .bord_cell_label,
.bord[data-title-position="top"] .bord_meta {
  display: none;
}

/* control_label_style: authoring_blue — readable control labels on wood */
.bb_wrap[data-control-label-style="authoring_blue"] .bord_cell_control .bord_cell_text {
  color: var(--surface-accent-cool);
  text-transform: uppercase;
  font-weight: 600;
}

/* body_visible: false — hide body text in panel bords */
.bb_wrap[data-body-visible="false"] .bord_body {
  display: none;
}

/* chrome_variant: authoring_bar — centered bottom expand bar */
.bord[data-chrome-variant="authoring_bar"] .bord_comment_trigger,
.bord[data-chrome-variant="authoring_bar"] .bord_corner,
.bord[data-chrome-variant="authoring_bar"] .bord_indicator:not(.bord_action_indicator--expand) {
  display: none;
}
.bord[data-chrome-variant="authoring_bar"] .bord_chrome {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}
.bord[data-chrome-variant="authoring_bar"] .bord_action_indicator--expand {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 14px;
  cursor: pointer;
  pointer-events: auto;
  color: var(--surface-accent-cool, rgba(108, 180, 255, 0.92));
  font-size: 10px;
  opacity: 0.6;
  border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--surface-bg, #1e283c) 50%, transparent);
}
.bord[data-chrome-variant="authoring_bar"] .bord_action_indicator--expand::after {
  content: "\25BC";
  font-size: 8px;
}
.bord[data-chrome-variant="authoring_bar"].bord--expanded .bord_action_indicator--expand::after {
  content: "\25B2";
}
.bord[data-chrome-variant="authoring_bar"] .bord_action_indicator--expand:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--surface-bg, #1e283c) 75%, transparent);
}

.authoring-cell-grid,
.authoring-cell-badges,
.authoring-cell-selection {
  position: absolute;
  inset: 0;
}

.authoring-cell-grid,
.authoring-cell-selection,
.authoring-cell-badge {
  pointer-events: none;
}

.authoring-cell-grid {
  display: none;
  z-index: 9;
  background-image:
    linear-gradient(var(--surface-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--surface-line) 1px, transparent 1px);
}

.authoring-cell-badges {
  z-index: 10;
}

.authoring-cell-badge {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid var(--surface-accent-cool);
  color: var(--surface-text);
  font-family: var(--surface-font-body);
  font-size: calc(var(--bb-type-meta-size) * 0.9);
  background: color-mix(in srgb, var(--surface-accent-cool) 18%, transparent);
}

.authoring-cell-badge.is-selected {
  border-color: var(--surface-accent);
  background: color-mix(in srgb, var(--surface-accent) 18%, transparent);
}

.authoring-cell-selection {
  z-index: 11;
  border: 1px solid var(--surface-accent);
  background: color-mix(in srgb, var(--surface-accent) 22%, transparent);
}

.bord--cell-grid-active .authoring-cell-grid {
  display: block;
}

.bord--visible {
  transform:
    translate(
      calc(var(--tx, 0px) + var(--bb-stage-offset-x, 0px) + var(--bb-slot-center-offset-x, 0px) + var(--bb-reveal-dx, 0px)),
      calc(var(--ty, 0px) + var(--bb-stage-offset-y, 0px) + var(--bb-slot-center-offset-y, 0px) + var(--bb-reveal-dy, 0px))
    )
    translateZ(var(--bb-reveal-z, 0px))
    scale(calc(var(--bb-reveal-scale, 1) * var(--bb-active-scale-bump, 1)));
}

.bord[data-id="root"],
.bord--root {
  transform:
    translate(
      calc(var(--tx, 0px) + var(--bb-stage-offset-x, 0px) + var(--bb-slot-center-offset-x, 0px) + var(--bb-reveal-dx, 0px)),
      calc(var(--ty, 0px) + var(--bb-stage-offset-y, 0px) + var(--bb-slot-center-offset-y, 0px) + var(--bb-reveal-dy, 0px))
    )
    translateZ(var(--bb-reveal-z, 0px))
    scale(calc(var(--bb-reveal-scale, 1) * var(--bb-active-scale-bump, 1)));
  z-index: 20;
}

.bord--active,
.bord--shell.is-active {
  --bb-active-scale-bump: 1.01;
}

.bord--shell {
  transform: none;
  translate: none;
}

.bord[data-level="2"].bord--visible::before,
.bord--comment::before {
  opacity: 0.72;
  transform: scale(1.01);
}

.bord:hover {
  box-shadow:
    0 0 9px 3px rgba(var(--bb-glow-rgb), var(--bb-glow-hover-alpha, 0.42)),
    inset 0 0 8px 2px rgba(0, 0, 0, 0.24);
  z-index: 30;
}

.bord:hover::before,
.bord--active::before,
.bord--path-anchor::before,
.bord--shell.is-active::before,
.bord--shell:hover::before,
.bord--shell.is-comment-burned::before {
  opacity: var(--bb-interaction-halo-hover-opacity, 0.94);
  transform: scale(var(--bb-interaction-halo-hover-scale, 1.04));
}

.bord--active::before,
.bord--l2-focus::before,
.bord--shell.is-active::before,
.bord--shell.is-comment-burned::before {
  opacity: var(--bb-interaction-halo-active-opacity, 1);
  transform: scale(var(--bb-interaction-halo-active-scale, 1.05));
}

.bord--active::after,
.bord--l2-focus::after,
.bord--shell.is-active::after {
  box-shadow: var(--bb-interaction-active-box-shadow, 0 0 6px 2px rgba(var(--bb-glow-rgb), var(--bb-glow-active-alpha, 0.50)), inset 0 0 10px 3px rgba(0,0,0,0.30));
}

.bord--active::after,
.bord--l2-focus::after,
.bord:hover::after {
  background:
    var(--bb-surface-sheen-active),
    var(--bb-overlay-tint),
    var(--bb-surface-field-active);
}

.bord:active {
  transform:
    translate(
      calc(var(--tx, 0px) + var(--bb-stage-offset-x, 0px) + var(--bb-reveal-dx, 0px)),
      calc(var(--ty, 0px) + var(--bb-stage-offset-y, 0px) + var(--bb-reveal-dy, 0px) + var(--bb-press-depth, 3px))
    )
    translateZ(var(--bb-reveal-z, 0px))
    scale(calc(var(--bb-reveal-scale, 1) * var(--bb-press-scale, 0.992)));
  box-shadow:
    0 0 7px 2px rgba(var(--bb-glow-rgb), var(--bb-glow-active-alpha, 0.50)),
    inset 0 0 12px 4px rgba(0, 0, 0, 0.28);
}

.bord--shell:active {
  transform: translateY(var(--bb-press-depth, 3px));
}

.bord[data-id="root"]:hover,
.bord--root:hover {
  box-shadow:
    0 0 11px 4px rgba(var(--bb-glow-rgb), var(--bb-glow-root-alpha, 0.58)),
    inset 0 0 10px 3px rgba(0, 0, 0, 0.28);
}

.bord[data-id="root"]:hover::before,
.bord--root:hover::before {
  opacity: 1;
  transform: scale(1.05);
}

.bord--press-pulse::before {
  animation: var(--bb-interaction-halo-pulse-animation, bbt-press-underglow 0.28s ease-out);
}

.bb_wrap[data-presentation-mode="idealized"] .bord,
.page-shell[data-presentation-mode="idealized"] .bord {
  --bb-glow-rest-alpha: calc(0.16 * var(--bb-glow-gain, 1));
  --bb-glow-hover-alpha: calc(0.26 * var(--bb-glow-gain, 1));
  --bb-glow-active-alpha: calc(0.34 * var(--bb-glow-gain, 1));
  --bb-glow-root-alpha: calc(0.42 * var(--bb-glow-gain, 1));
}

.bb_wrap[data-presentation-mode="physical"] .bord,
.page-shell[data-presentation-mode="physical"] .bord {
  --bb-glow-rest-alpha: calc(0.22 * var(--bb-glow-gain, 1));
  --bb-glow-hover-alpha: calc(0.34 * var(--bb-glow-gain, 1));
  --bb-glow-active-alpha: calc(0.42 * var(--bb-glow-gain, 1));
  --bb-glow-root-alpha: calc(0.48 * var(--bb-glow-gain, 1));
}

.bb_wrap[data-presentation-mode="expressive"] .bord,
.page-shell[data-presentation-mode="expressive"] .bord {
  --bb-glow-rest-alpha: calc(0.28 * var(--bb-glow-gain, 1));
  --bb-glow-hover-alpha: calc(0.46 * var(--bb-glow-gain, 1));
  --bb-glow-active-alpha: calc(0.54 * var(--bb-glow-gain, 1));
  --bb-glow-root-alpha: calc(0.62 * var(--bb-glow-gain, 1));
}

.bord_surface {
  position: absolute;
  inset: 0;
  background: transparent;
  overflow: hidden;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 12% 12% 12%;
  color: var(--bb-text-color, rgba(243, 232, 215, 0.88));
  mix-blend-mode: var(--bb-text-blend-mode, normal);
  transition: transform 200ms ease-out;
}

.bord[data-pressed="true"] .bord_surface,
.bord:active .bord_surface {
  transform: translateY(var(--bb-press-depth, 3px));
  transition-duration: 120ms;
}

.bord[data-mode="template"] .bord_surface {
  display: block;
  overflow: hidden;
}

.bord_letter,
.bord_kicker {
  color: var(--bb-text-color, var(--surface-muted));
  font-family: var(--bb-shell-display-font, var(--surface-font-display));
  font-size: var(--bb-type-kicker-size);
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-transform: uppercase;
  mix-blend-mode: var(--bb-text-blend-mode, normal);
  text-shadow: var(--bb-overlay-text-shadow, none);
}

.bord_title {
  color: var(--bb-text-color, var(--surface-text));
  font-family: var(--bb-shell-display-font, var(--surface-font-display));
  font-size: var(--bb-type-heading-size);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  mix-blend-mode: var(--bb-text-blend-mode, normal);
  -webkit-text-stroke: var(--bb-text-stroke, 0 transparent);
  text-shadow: var(--bb-overlay-text-shadow, none);
}

.bord_body,
.bord_meta {
  color: var(--bb-text-color, var(--surface-text));
  font-family: var(--bb-shell-body-font, var(--surface-font-body));
  font-size: var(--bb-type-body-size);
  line-height: 1.28;
  mix-blend-mode: var(--bb-text-blend-mode, normal);
  text-shadow: var(--bb-overlay-text-shadow, none);
}

.bord_meta {
  color: var(--bb-text-color, var(--surface-muted));
  font-size: var(--bb-type-meta-size);
  line-height: 1.2;
}

.bord_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.bord_tag {
  color: var(--bb-shell-tag-color, var(--surface-muted));
  font-family: var(--bb-shell-mono-font, var(--surface-font-body));
  font-size: var(--bb-type-meta-size);
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: var(--bb-overlay-text-shadow, none);
}

.bord_notes {
  display: contents;
}

.bord_notes_line {
  font-family: "P22 Typewriter", "American Typewriter", "Courier Prime", "Courier New", monospace;
  font-size: 0.83rem;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.025em;
  color: #151020;
  mix-blend-mode: multiply;
  text-shadow: 0 0 1px rgba(10,8,18,0.55), 0 1px 1px rgba(10,8,18,0.22);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bord[data-surface-profile="blue_schematic"] .bord_surface {
  text-shadow: 0 1px 2px rgba(5, 4, 8, 0.52);
}

/* --- Quiet surface profiles ---
   Reduced visual weight for supporting/reference bords.
   These profiles are defined in the interaction contract's surface_profiles
   and apply across all consumers (chuckHead, chuckSmyth.com, dearGrandmas, etc.). */

.bord.bord--visible[data-surface-profile="quiet_gMap"],
.bord--shell[data-surface-profile="quiet_gMap"] {
  opacity: 0.85;
}

.bord[data-surface-profile="quiet_gMap"] {
  filter: saturate(0.7);
}

.bord.bord--visible[data-surface-profile="quiet_gMap"],
.bord--shell[data-surface-profile="quiet_gMap"] {
  opacity: 0.9;
}

.bord_surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: var(--bb-overlay-vignette);
}

.bord_text_overlay_layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.bord_text_box,
.bord_image_overlay {
  position: absolute;
  display: block;
}

.bord_text_box {
  color: var(--bb-text-color, var(--surface-text));
  mix-blend-mode: var(--bb-text-blend-mode, normal);
  overflow: hidden;
  text-shadow: var(--bb-overlay-text-shadow, none);
}

.bord_image_overlay {
  border-radius: calc(var(--bb-shell-mm-scale) * 0.4);
}

.bord_cell_binding_layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.bord_cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--bb-shell-mm-scale) * 0.4);
  padding:
    calc(var(--bb-shell-mm-scale) * 0.5)
    calc(var(--bb-shell-mm-scale) * 0.75);
  overflow: hidden;
  text-align: center;
  border-radius: calc(var(--bb-shell-mm-scale) * 0.75);
  border: 1px solid color-mix(in srgb, var(--bb-outline-color, var(--surface-line)) 84%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bb-surface-field-active, var(--surface-panel-soft)) 94%, transparent),
      color-mix(in srgb, var(--bb-surface-field, var(--surface-panel)) 94%, transparent)
    );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--bb-surface-base, var(--surface-bg)) 38%, transparent),
    0 0 0 1px color-mix(in srgb, var(--surface-shadow) 20%, transparent);
  color: var(--bb-text-color, var(--surface-text));
  font-family: var(--surface-font-body);
  font-size: var(--bb-type-body-size);
  line-height: 1.12;
  text-shadow: var(--bb-overlay-text-shadow, none);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.bord_cell_text {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bord_cell[data-typography-role="heading"] {
  font-family: var(--surface-font-display);
  font-size: var(--bb-type-heading-size);
  line-height: 0.92;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bord_cell[data-typography-role="sub"] {
  font-family: var(--surface-font-display);
  font-size: var(--bb-type-sub-size);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bord_cell[data-typography-role="kicker"] {
  font-family: var(--surface-font-display);
  font-size: var(--bb-type-kicker-size);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bord_cell[data-typography-role="meta"],
.bord_cell[data-typography-role="tags"] {
  font-size: var(--bb-type-meta-size);
  line-height: 1.08;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bord_cell[data-typography-role="control_word"] {
  font-family: var(--surface-font-display);
  font-size: calc(var(--bb-shell-mm-scale) * 3.6);
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.bord_cell_label,
.bord_cell_letterbox,
.bord_cell_graphic,
.bord_cell_empty {
  pointer-events: none;
}

.bord_cell_label {
  background: color-mix(in srgb, var(--bb-surface-field, transparent) 42%, transparent);
  border-color: color-mix(in srgb, var(--bb-outline-color, var(--surface-line)) 54%, transparent);
}

.bord_cell_letterbox {
  font-family: var(--surface-font-display);
  font-size: var(--bb-type-sub-size);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bord_cell_graphic {
  padding: calc(var(--bb-shell-mm-scale) * 0.25);
}

.bord_cell_graphic_asset {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1 !important;
  filter: none !important;
}

.bord_cell_control {
  pointer-events: auto;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: -2px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bb-surface-field-active, var(--surface-panel-soft)) 98%, transparent),
      color-mix(in srgb, var(--bb-surface-field, var(--surface-panel)) 96%, transparent)
    );
  transition:
    outline-color 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease,
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}


.bord_cell_control:hover,
.bord_cell_control:focus-visible {
  border-color: color-mix(in srgb, var(--surface-accent) 54%, var(--surface-line));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-accent-cool) 18%, var(--bb-surface-field-active, var(--surface-panel-soft))),
      color-mix(in srgb, var(--surface-accent) 12%, var(--bb-surface-field, var(--surface-panel)))
    );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--surface-accent-cool) 18%, transparent),
    0 0 0 1px color-mix(in srgb, var(--surface-accent) 20%, transparent),
    0 0 18px color-mix(in srgb, var(--surface-accent-cool) 14%, transparent);
  transform: translateY(calc(var(--bb-press-depth, 3px) * -0.15));
}

.bord[data-pressed="true"] .bord_cell_control,
.bord:active .bord_cell_control {
  transform: translateY(var(--bb-press-depth, 3px));
}

.bord_cell_empty {
  opacity: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

@keyframes bb-control-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.92);
  }
  100% {
    transform: scale(1);
  }
}

.bord_cell_control.bb-control-clicked {
  animation: bb-control-pulse 0.2s ease;
}

.bb-control-host {
  width: 100%;
  height: 100%;
}

.bb-control-color-picker {
  position: relative;
}

.bb-control-color-dot {
  position: absolute;
  width: 38%;
  height: 38%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--surface-line);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--surface-shadow) 20%, transparent),
    0 0 0 1px color-mix(in srgb, var(--surface-shadow) 12%, transparent);
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.bb-control-color-dot:hover,
.bb-control-color-dot:focus-visible {
  opacity: 0.85;
}

.cp-dot--active {
  outline: 2px solid var(--surface-accent);
  outline-offset: 1px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--surface-accent) 28%, transparent),
    0 0 calc(var(--bb-shell-mm-scale) * 1.6)
    color-mix(in srgb, var(--surface-accent-cool) 22%, transparent);
}

.bb-control-font {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bb-control-font-select,
.bb-control-cycle-button,
.bb-control-action-button {
  width: 100%;
  min-height: 100%;
  border: 1px solid var(--surface-line);
  border-radius: calc(var(--bb-shell-mm-scale) * 0.6);
  background: var(--surface-panel);
  color: var(--surface-text);
  font-family: var(--surface-font-body);
}

.bb-control-font-select {
  appearance: none;
  padding:
    calc(var(--bb-shell-mm-scale) * 0.35)
    calc(var(--bb-shell-mm-scale) * 0.6);
}

.bb-control-cycle-button,
.bb-control-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(var(--bb-shell-mm-scale) * 0.35)
    calc(var(--bb-shell-mm-scale) * 0.6);
  text-align: center;
}

.bb-control-stepper {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  row-gap: calc(var(--bb-shell-mm-scale) * 0.2);
  column-gap: calc(var(--bb-shell-mm-scale) * 0.25);
}

.bb-control-stepper__button {
  width: 100%;
  border: 1px solid var(--surface-line);
  border-radius: calc(var(--bb-shell-mm-scale) * 0.45);
  background: var(--surface-panel);
  color: var(--surface-text);
  font-family: var(--surface-font-body);
}

.bb-control-stepper__button:hover,
.bb-control-stepper__button:focus-visible {
  background: var(--surface-accent);
}

.bb-control-stepper__button.is-disabled {
  background: var(--surface-panel);
  color: var(--surface-muted);
  cursor: default;
}

.bb-control-stepper__value {
  min-width: 100%;
  color: var(--surface-text);
  font-family: var(--surface-font-body);
  font-size: var(--bb-type-body-size);
}

.bb-control-stepper__label {
  grid-column: 1 / span 3;
  color: var(--surface-muted);
  font-family: var(--surface-font-body);
  font-size: var(--bb-type-meta-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-control-toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: calc(var(--bb-shell-mm-scale) * 0.45);
}

.bb-control-toggle__label {
  color: var(--surface-text);
  font-family: var(--surface-font-body);
  font-size: var(--bb-type-body-size);
}

.bb-control-toggle__pill {
  position: relative;
  width: calc(var(--bb-shell-mm-scale) * 7);
  height: calc(var(--bb-shell-mm-scale) * 3.2);
  border: 1px solid var(--surface-line);
  border-radius: 999px;
  background: var(--surface-muted);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.bb-control-toggle__pill::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--bb-shell-mm-scale) * 1.2);
  width: calc(var(--bb-shell-mm-scale) * 2);
  height: calc(var(--bb-shell-mm-scale) * 2);
  border-radius: 999px;
  background: var(--surface-text);
  transform: translateY(-50%);
  transition: left 0.15s ease;
}

.bb-control-toggle__pill.is-on {
  background: var(--surface-accent);
}

.bb-control-toggle__pill.is-on::after {
  left: calc(100% - (var(--bb-shell-mm-scale) * 3.2));
}

.bb-control-action-button {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--surface-shadow) 12%, transparent),
    0 calc(var(--bb-shell-mm-scale) * 0.5)
    calc(var(--bb-shell-mm-scale) * 1.2)
    color-mix(in srgb, var(--surface-shadow) 16%, transparent);
  transition: box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.bb-control-action-button.is-danger {
  background: var(--surface-danger);
}

.bb-control-action-button:hover,
.bb-control-action-button:focus-visible {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--surface-shadow) 16%, transparent),
    0 calc(var(--bb-shell-mm-scale) * 0.9)
    calc(var(--bb-shell-mm-scale) * 1.8)
    color-mix(in srgb, var(--surface-shadow) 22%, transparent);
  transform: translateY(calc(var(--bb-shell-mm-scale) * -0.15));
}

.bb-control-branch-selector {
  display: flex;
  gap: calc(var(--bb-shell-mm-scale) * 0.2);
}

.bb-control-branch {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--bb-shell-mm-scale) * 0.2);
  border: 1px solid var(--surface-line);
  border-radius: calc(var(--bb-shell-mm-scale) * 0.45);
  background: var(--surface-panel);
  color: var(--surface-muted);
  font-family: var(--surface-font-body);
  font-size: var(--bb-type-meta-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bb-control-branch.branch-active {
  background: var(--surface-accent);
  color: var(--surface-text);
}

.bb-authoring-breadcrumb {
  position: fixed;
  left: calc(var(--bb-shell-mm-scale) * 3);
  bottom: calc(var(--bb-shell-mm-scale) * 3);
  z-index: 2000;
  padding:
    calc(var(--bb-shell-mm-scale) * 1)
    calc(var(--bb-shell-mm-scale) * 2);
  border: 1px solid color-mix(in srgb, var(--surface-line) 84%, transparent);
  border-radius: calc(var(--bb-shell-mm-scale) * 0.9);
  background: color-mix(in srgb, var(--surface-bg) 78%, transparent);
  box-shadow:
    0 calc(var(--bb-shell-mm-scale) * 1.2)
    calc(var(--bb-shell-mm-scale) * 3.2)
    color-mix(in srgb, var(--surface-shadow) 34%, transparent);
  color: var(--surface-text);
  font-family: var(--surface-font-body);
  font-size: var(--bb-type-kicker-size);
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

[data-authoring-cursor="default"] {
  cursor: default;
}

[data-authoring-cursor="crosshair"] {
  cursor: crosshair;
}

[data-authoring-cursor="grab"] {
  cursor: grab;
}

[data-authoring-cursor="grabbing"] {
  cursor: grabbing;
}

[data-authoring-cursor="text"] {
  cursor: text;
}

[data-authoring-cursor="cell"] {
  cursor: cell;
}

[data-authoring-cursor="not-allowed"] {
  cursor: not-allowed;
}

.bord[data-board="ether"] .bord_surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(
      ellipse at 50% 50%,
      transparent 25%,
      rgba(3, 1, 0, 0.38) 65%,
      rgba(2, 0, 0, 0.58) 100%
    ),
    rgba(4, 2, 1, 0.22);
}

.bord[data-board="ether"] .bord_surface::after {
  display: none;
}

.bord[data-tone="dark"] {
  --bb-text-color: rgba(205,196,238,1.0);
  --bb-text-blend-mode: normal;
  --bb-text-stroke: 1px rgba(16,12,28,0.88);
  --bb-overlay-text-shadow: none;
}

.bord:not([data-tone="dark"]) {
  --bb-text-color: rgba(18,7,2,0.90);
  --bb-text-blend-mode: multiply;
  --bb-text-stroke: 0 transparent;
  --bb-overlay-text-shadow:
    0 0 1px rgba(0,0,0,0.95),
    0 0 3px rgba(0,0,0,0.55),
    0 1px 2px rgba(0,0,0,0.30);
}

.bord[data-tone="dark"] .bord_notes_line {
  color: rgba(205,196,238,1.0);
  mix-blend-mode: normal;
  text-shadow: 0 0 1px rgba(80,70,110,0.50), 0 1px 1px rgba(80,70,110,0.22);
}

.bord[data-ink="gold2"] .bord_notes_line {
  color: #bb6030;
  mix-blend-mode: normal;
  text-shadow: 0 0 1px rgba(128,64,32,0.65), 0 1px 1px rgba(128,64,32,0.30);
}

.bord[data-ink="frost"] .bord_title,
.bord[data-ink="frost"] .bord_notes_line {
  color: #bbbbdd;
  mix-blend-mode: normal;
  text-shadow: 0 0 1px rgba(90,90,130,0.55), 0 1px 1px rgba(90,90,130,0.25);
}

.bord[data-ink="indigo"] .bord_title,
.bord[data-ink="indigo"] .bord_notes_line {
  color: #404080;
  mix-blend-mode: normal;
  text-shadow: 0 0 1px rgba(22,18,50,0.55), 0 1px 1px rgba(22,18,50,0.25);
}

.bord[data-ink="electric"] .bord_title,
.bord[data-ink="electric"] .bord_notes_line {
  color: #6060bb;
  mix-blend-mode: normal;
  text-shadow: 0 0 1px rgba(48,48,100,0.65), 0 1px 1px rgba(48,48,100,0.28);
}

.bord_chrome {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.bord_indicator {
  position: absolute;
  width: var(--bb-corner-size, 1.16rem);
  height: var(--bb-corner-size, 1.16rem);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bb-corner-radius, 999px);
  border: var(--bb-corner-border, 1px solid rgba(255,249,232,0.18));
  background: var(--bb-corner-background, radial-gradient(circle at 50% 42%, rgba(255,255,255,0.14), rgba(255,255,255,0) 58%), rgba(10, 8, 18, 0.26));
  color: var(--bb-corner-color, rgba(255,249,232,0.72));
  font-family: var(--bb-corner-font-family, "P22 Typewriter", "Courier Prime", "Courier New", monospace);
  font-size: var(--bb-corner-font-size, 0.55rem);
  line-height: var(--bb-corner-line-height, 1);
  letter-spacing: 0;
  box-shadow: var(--bb-corner-box-shadow, 0 0 0 1px rgba(0,0,0,0.12));
  opacity: var(--bb-corner-opacity, 0.56);
  pointer-events: auto;
  cursor: pointer;
  transform: scale(var(--bb-corner-scale, 0.94));
  transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.bord_indicator img {
  pointer-events: none;
  filter: var(--bb-corner-img-filter, none);
}

.bord_indicator:hover,
.bord:hover .bord_indicator,
.bord--active .bord_indicator,
.bord--shell.is-active .bord_indicator {
  opacity: 0.94;
  transform: scale(1);
  box-shadow: var(--bb-corner-hover-box-shadow, 0 0 0 2px rgba(var(--bb-glow-rgb),0.10), 0 0 12px rgba(var(--bb-glow-rgb),0.18));
  border-color: var(--bb-corner-hover-border-color, rgba(var(--bb-glow-rgb),0.42));
  color: var(--bb-corner-hover-color, rgba(255,249,232,0.96));
}

.bord_indicator--top-left { top: var(--bb-corner-offset, 7px); left: var(--bb-corner-offset, 7px); }
.bord_indicator--top-right { top: var(--bb-corner-offset, 7px); right: var(--bb-corner-offset, 7px); }
.bord_indicator--bottom-left { bottom: var(--bb-corner-offset, 7px); left: var(--bb-corner-offset, 7px); }
.bord_indicator--bottom-right { bottom: var(--bb-corner-offset, 7px); right: var(--bb-corner-offset, 7px); }
.bord_indicator--mid-top { top: var(--bb-corner-offset, 7px); left: 50%; transform: translateX(-50%) scale(var(--bb-corner-scale, 0.94)); }
.bord_indicator--mid-right { top: 50%; right: var(--bb-corner-offset, 7px); transform: translateY(-50%) scale(var(--bb-corner-scale, 0.94)); }
.bord_indicator--mid-bottom { bottom: var(--bb-corner-offset, 7px); left: 50%; transform: translateX(-50%) scale(var(--bb-corner-scale, 0.94)); }
.bord_indicator--mid-left { top: 50%; left: var(--bb-corner-offset, 7px); transform: translateY(-50%) scale(var(--bb-corner-scale, 0.94)); }

.bord_indicator--mid-top:hover,
.bord:hover .bord_indicator--mid-top,
.bord--active .bord_indicator--mid-top,
.bord--shell.is-active .bord_indicator--mid-top { transform: translateX(-50%) scale(1); }
.bord_indicator--mid-right:hover,
.bord:hover .bord_indicator--mid-right,
.bord--active .bord_indicator--mid-right,
.bord--shell.is-active .bord_indicator--mid-right { transform: translateY(-50%) scale(1); }
.bord_indicator--mid-bottom:hover,
.bord:hover .bord_indicator--mid-bottom,
.bord--active .bord_indicator--mid-bottom,
.bord--shell.is-active .bord_indicator--mid-bottom { transform: translateX(-50%) scale(1); }
.bord_indicator--mid-left:hover,
.bord:hover .bord_indicator--mid-left,
.bord--active .bord_indicator--mid-left,
.bord--shell.is-active .bord_indicator--mid-left { transform: translateY(-50%) scale(1); }

.bord_indicator[data-action-id="expand_primary"] {
  border-color: var(--bb-corner-expand-primary-border-color, rgba(var(--bb-glow-rgb),0.34));
  box-shadow: var(--bb-corner-expand-primary-box-shadow, 0 0 0 1px rgba(var(--bb-glow-rgb),0.12));
}

.bord_indicator[data-action-id="expand_alternate"] { opacity: var(--bb-corner-expand-alternate-opacity, 0.42); }
.bord_indicator[data-action-id="route_direct"] { color: var(--bb-corner-route-color, rgba(188, 200, 255, 0.9)); }
.bord_indicator[data-action-id="context_meta"] { color: var(--bb-corner-context-color, rgba(164, 168, 214, 0.82)); }

.bord_action_indicator {
  width: 1rem;
  height: 1rem;
  font-size: 0.7rem;
  opacity: 0.78;
}

.bord_action_indicator--route {
  color: var(--bb-text-color, rgba(255, 244, 226, 0.92));
}

.bord_action_indicator--expand {
  color: var(--bb-text-color, rgba(255, 244, 226, 0.92));
  transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.bord_action_indicator[data-expanded="true"] {
  transform: rotate(90deg) scale(1);
}

.bord_corner {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  color: rgba(21,16,32,0.80);
}

.bord[data-tone="dark"] .bord_corner { color: rgba(205,196,238,0.90); }
.bord[data-ink="gold2"] .bord_corner { color: #bb6030; }
.bord[data-ink="electric"] .bord_corner { color: #6060bb; }
.bord[data-ink="frost"] .bord_corner { color: #bbbbdd; }
.bord[data-ink="indigo"] .bord_corner { color: #404080; }

.bord_comment_trigger {
  position: absolute;
  left: 50%;
  bottom: var(--bb-comment-trigger-bottom, 7px);
  width: var(--bb-comment-trigger-size, 1.42rem);
  height: var(--bb-comment-trigger-size, 1.42rem);
  font-family: var(--bb-comment-trigger-font-family, "Cormorant Garamond", "Garamond", "Georgia", serif);
  font-size: var(--bb-comment-trigger-font-size, 0.74rem);
  line-height: var(--bb-comment-trigger-line-height, 1);
  background: var(--bb-comment-trigger-background, radial-gradient(circle at 50% 45%, rgba(255,255,255,0.14), rgba(255,255,255,0) 58%), rgba(10, 8, 18, 0.12));
  border: var(--bb-comment-trigger-border, 1px solid color-mix(in srgb, currentColor 38%, transparent));
  border-radius: var(--bb-comment-trigger-radius, 999px);
  padding: 0;
  cursor: pointer;
  pointer-events: all;
  opacity: var(--bb-comment-trigger-opacity, 0.44);
  color: currentColor;
  transform: var(--bb-comment-trigger-transform-rest, translateX(-50%) translateY(2px) scale(0.94));
  text-shadow: var(--bb-comment-trigger-text-shadow, 0 0 2px rgba(255,249,232,0.18), 0 1px 2px rgba(10,8,18,0.28));
  box-shadow: var(--bb-comment-trigger-box-shadow-rest, 0 0 0 0 rgba(var(--cs-accent-rgb, 255, 128, 32), 0));
  transition: opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  user-select: none;
}

.bord_comment_trigger:hover {
  opacity: 0.96;
  transform: var(--bb-comment-trigger-transform-hover, translateX(-50%) translateY(0) scale(1.08));
  filter: var(--bb-comment-trigger-hover-filter, brightness(1.18) saturate(1.08));
  box-shadow: var(--bb-comment-trigger-box-shadow-hover, 0 0 0 3px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.12), 0 0 14px 1px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.34));
  animation: var(--bb-comment-trigger-hover-animation, bb-comment-submit-pulse 1.4s ease-in-out infinite);
}

.bord:hover .bord_comment_trigger,
.bord:focus-within .bord_comment_trigger,
.bord.is-comment-burned .bord_comment_trigger,
.bord--shell.is-active .bord_comment_trigger {
  opacity: 0.88;
  transform: var(--bb-comment-trigger-transform-active, translateX(-50%) translateY(0) scale(1));
  filter: var(--bb-comment-trigger-active-filter, brightness(1.12) saturate(1.05));
  box-shadow: var(--bb-comment-trigger-box-shadow-active, 0 0 0 2px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.10), 0 0 10px 1px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.26));
  animation: var(--bb-comment-trigger-active-animation, bb-comment-submit-pulse 1.55s ease-in-out infinite);
}

.bord,
.bord--comment {
  --bb-comment-live-color: rgba(21,16,32,0.90);
  --bb-comment-final-color: rgba(21,16,32,0.88);
  --bb-comment-submit-color: rgba(21,16,32,0.98);
  --bb-comment-submit-stroke: 0px transparent;
  --bb-comment-submit-shadow: 0 1px 2px rgba(255,249,232,0.12), 0 1px 2px rgba(10,8,18,0.24);
  --bb-comment-placeholder: rgba(18,7,2,0.18);
  --bb-comment-caret: rgba(18,7,2,0.72);
  --bb-comment-stroke-live: 0px transparent;
  --bb-comment-stroke-final: 0px transparent;
  --bb-comment-blend: multiply;
  --bb-comment-shadow-live: 0 1px 2px rgba(10,8,18,0.18);
  --bb-comment-shadow-final: 0 1px 2px rgba(10,8,18,0.12);
}

.bord[data-tone="dark"],
.bord--comment[data-tone="dark"] {
  --bb-comment-live-color: rgba(205,196,238,1.0);
  --bb-comment-final-color: rgba(205,196,238,1.0);
  --bb-comment-submit-color: rgba(236,230,255,1.0);
  --bb-comment-submit-stroke: 0.75px rgba(16,12,28,0.88);
  --bb-comment-submit-shadow: 0 0 2px rgba(248,244,255,0.22), 0 0 8px rgba(32,22,56,0.22);
  --bb-comment-placeholder: rgba(205,196,238,0.22);
  --bb-comment-caret: rgba(205,196,238,0.88);
  --bb-comment-stroke-live: 0.75px rgba(16,12,28,0.85);
  --bb-comment-stroke-final: 0.75px rgba(16,12,28,0.85);
  --bb-comment-blend: normal;
  --bb-comment-shadow-live: none;
  --bb-comment-shadow-final: none;
}

.bord[data-ink="gold2"],
.bord--comment[data-ink="gold2"] {
  --bb-comment-live-color: #bb6030;
  --bb-comment-final-color: #bb6030;
  --bb-comment-submit-color: #cf713d;
  --bb-comment-submit-stroke: 0px transparent;
  --bb-comment-submit-shadow: 0 0 1px rgba(255,232,214,0.20), 0 1px 2px rgba(110,48,20,0.30);
  --bb-comment-placeholder: rgba(187,96,48,0.24);
  --bb-comment-stroke-live: 0px transparent;
  --bb-comment-stroke-final: 0px transparent;
  --bb-comment-blend: normal;
  --bb-comment-shadow-live: 0 1px 1px rgba(128,64,32,0.28);
  --bb-comment-shadow-final: 0 1px 1px rgba(128,64,32,0.22);
}

.bord[data-ink="electric"],
.bord--comment[data-ink="electric"] {
  --bb-comment-live-color: #6060bb;
  --bb-comment-final-color: #6060bb;
  --bb-comment-submit-color: #7a7ad8;
  --bb-comment-submit-stroke: 0px transparent;
  --bb-comment-submit-shadow: 0 0 1px rgba(238,240,255,0.18), 0 1px 2px rgba(34,32,96,0.34);
  --bb-comment-placeholder: rgba(96,96,187,0.22);
  --bb-comment-stroke-live: 0px transparent;
  --bb-comment-stroke-final: 0px transparent;
  --bb-comment-blend: normal;
  --bb-comment-shadow-live: 0 1px 1px rgba(48,48,100,0.30);
  --bb-comment-shadow-final: 0 1px 1px rgba(48,48,100,0.24);
}

.bord[data-ink="frost"],
.bord--comment[data-ink="frost"] {
  --bb-comment-live-color: #bbbbdd;
  --bb-comment-final-color: #bbbbdd;
  --bb-comment-submit-color: #e0e2ff;
  --bb-comment-submit-stroke: 0.45px rgba(38,34,64,0.52);
  --bb-comment-submit-shadow: 0 0 2px rgba(248,250,255,0.20), 0 1px 2px rgba(64,66,110,0.26);
  --bb-comment-placeholder: rgba(187,187,221,0.22);
  --bb-comment-stroke-live: 0px transparent;
  --bb-comment-stroke-final: 0px transparent;
  --bb-comment-blend: normal;
  --bb-comment-shadow-live: 0 1px 1px rgba(90,90,130,0.26);
  --bb-comment-shadow-final: 0 1px 1px rgba(90,90,130,0.22);
}

.bord[data-ink="indigo"],
.bord--comment[data-ink="indigo"] {
  --bb-comment-live-color: #404080;
  --bb-comment-final-color: #404080;
  --bb-comment-submit-color: #5c5cb4;
  --bb-comment-submit-stroke: 0px transparent;
  --bb-comment-submit-shadow: 0 0 1px rgba(232,234,255,0.16), 0 1px 2px rgba(22,18,50,0.34);
  --bb-comment-placeholder: rgba(64,64,128,0.22);
  --bb-comment-stroke-live: 0px transparent;
  --bb-comment-stroke-final: 0px transparent;
  --bb-comment-blend: normal;
  --bb-comment-shadow-live: 0 1px 1px rgba(22,18,50,0.28);
  --bb-comment-shadow-final: 0 1px 1px rgba(22,18,50,0.22);
}

.bord_comment_engrave {
  position: absolute;
  inset: var(--bb-comment-engrave-inset, 10px 10px 32px);
  z-index: 4;
  display: block;
  padding: var(--bb-comment-engrave-padding, 10px 8px 8px);
  font-family: var(--bb-comment-engrave-font-family, "Helvetica Neue", "Arial Narrow", Arial, sans-serif);
  font-weight: var(--bb-comment-engrave-font-weight, 700);
  font-size: var(--bb-comment-engrave-font-size, 0.95rem);
  line-height: var(--bb-comment-engrave-line-height, 1.04);
  letter-spacing: var(--bb-comment-engrave-letter-spacing, 0.01em);
  color: rgba(21,16,32,0.0);
  mix-blend-mode: var(--bb-comment-blend);
  text-align: var(--bb-comment-engrave-text-align, center);
  word-break: break-word;
  overflow: hidden;
  pointer-events: none;
  white-space: pre-wrap;
  background: none;
  border: 0;
  box-shadow: none;
  outline: none;
  -webkit-text-stroke: 0px transparent;
  transition: color 0.15s ease;
}

.bord--comment .bord_surface {
  pointer-events: none;
}

.bord_comment_engrave[contenteditable] {
  pointer-events: auto;
  cursor: text;
  outline: none;
  background: none;
  border: 0;
  box-shadow: none;
  caret-color: var(--bb-comment-caret);
}

.bord--editing .bord_comment_engrave[contenteditable] {
  color: var(--bb-comment-live-color);
  -webkit-text-stroke: var(--bb-comment-stroke-live);
  text-shadow: var(--bb-comment-shadow-live);
}

.bord_comment_engrave[contenteditable]:empty::before {
  content: var(--bb-comment-placeholder-text, "leave a note…");
  color: var(--bb-comment-placeholder);
  pointer-events: none;
}

.bord--editing::after {
  content: var(--bb-comment-edit-hint-content, "↵ burn  ·  esc cancel");
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--bb-comment-edit-hint-font-size, 0.36rem);
  letter-spacing: var(--bb-comment-edit-hint-letter-spacing, 0.11em);
  color: var(--bb-comment-edit-hint-color, rgba(255,255,255,0.22));
  pointer-events: none;
}

.bord_comment_submit {
  position: absolute;
  left: 50%;
  bottom: 7px;
  z-index: 10;
  width: 1.42rem;
  height: 1.42rem;
  border: 1px solid color-mix(in srgb, var(--bb-comment-live-color) 42%, transparent);
  border-radius: 999px;
  padding: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,0.18), rgba(255,255,255,0) 58%),
    rgba(10, 8, 18, 0.12);
  color: var(--bb-comment-submit-color);
  font-family: "Cormorant Garamond", "Garamond", "Georgia", serif;
  font-size: 0.74rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px) scale(0.92);
  -webkit-text-stroke: var(--bb-comment-submit-stroke);
  text-shadow: var(--bb-comment-submit-shadow);
  mix-blend-mode: normal;
  filter: brightness(1) saturate(1);
  box-shadow: 0 0 0 0 rgba(var(--cs-accent-rgb, 255, 128, 32), 0);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background-color 0.22s ease;
}

.bord--editing .bord_comment_submit {
  opacity: 0.42;
  pointer-events: auto;
}

.bord--editing.is-dirty .bord_comment_submit {
  opacity: 0.9;
  transform: translateX(-50%) translateY(0) scale(1);
  animation: bb-comment-submit-pulse 1.65s ease-in-out infinite;
}

.bord_comment_submit:hover {
  transform: translateX(-50%) translateY(0) scale(1.08);
  opacity: 1;
  filter: brightness(1.24) saturate(1.12);
  box-shadow:
    0 0 0 3px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.12),
    0 0 16px 2px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.42);
  animation-duration: 0.92s;
}

.bord_comment_submit:focus-visible {
  opacity: 1;
  outline: none;
  transform: translateX(-50%) translateY(0) scale(1.08);
  filter: brightness(1.24) saturate(1.12);
  box-shadow:
    0 0 0 3px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.16),
    0 0 16px 2px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.46);
}

.bord--editing:not(.is-dirty) .bord_comment_submit {
  animation: none;
}

.bord--editing .bord_corner {
  opacity: 0;
  pointer-events: none;
}

.bord_comment_engrave--live {
  color: var(--bb-comment-live-color) !important;
  -webkit-text-stroke: var(--bb-comment-stroke-live) !important;
  text-shadow: var(--bb-comment-shadow-live);
}

.bord_comment_engrave--burning {
  color: var(--bb-comment-final-color) !important;
  -webkit-text-stroke: var(--bb-comment-stroke-final) !important;
  animation: bbt-burn 1.4s ease-out forwards;
}

.bord[data-tone="dark"] .bord_comment_engrave--burning {
  animation: bbt-burn-dark 1.4s ease-out forwards;
}

.bord_comment_engrave--burned {
  opacity: 1 !important;
  color: var(--bb-comment-final-color) !important;
  -webkit-text-stroke: var(--bb-comment-stroke-final) !important;
  text-shadow: var(--bb-comment-shadow-final);
  filter: none;
}

.bord_comment_engrave--fading {
  transition: color 1.4s ease, opacity 1.4s ease !important;
  color: rgba(18,7,2,0.0) !important;
  opacity: 0 !important;
}

.bord[data-tone="dark"] .bord_comment_engrave--fading {
  color: rgba(205,196,238,0.0) !important;
}

.bord--comment {
  box-shadow: 0 4px 18px rgba(0,0,0,0.52), 0 0 10px 2px var(--bb-glow-rest), inset 0 0 8px 2px rgba(0,0,0,0.20);
  cursor: pointer;
  z-index: 35 !important;
}

.bord--comment:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.52), 0 0 12px 3px var(--bb-glow-hover), inset 0 0 8px 2px rgba(0,0,0,0.24) !important;
}

/* Surface profile visuals are token-driven from bordSpecs.
   bitbord_bord_surface.js reads the interaction contract, applies the
   profile's CSS tokens to the host, and this stylesheet consumes them
   generically. Do not hardcode per-profile fills or vignettes here. */

@keyframes bbt-press-underglow {
  0% {
    opacity: 0.42;
    transform: scale(0.98);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes bb-comment-submit-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(var(--cs-accent-rgb, 255, 128, 32), 0.0);
    border-color: color-mix(in srgb, var(--bb-comment-live-color) 42%, transparent);
    filter: brightness(1) saturate(1);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.18), 0 0 12px 1px rgba(var(--cs-accent-rgb, 255, 128, 32), 0.30);
    border-color: color-mix(in srgb, var(--bb-comment-live-color) 72%, transparent);
    filter: brightness(1.2) saturate(1.08);
  }
}

@keyframes bbt-burn {
  0% {
    color: rgba(235,102,8,0.85);
    filter: blur(0.9px);
    text-shadow: 0 0 6px rgba(255,145,5,0.95), 0 0 14px rgba(255,82,0,0.68), 0 0 26px rgba(200,52,0,0.32);
  }
  20% {
    color: rgba(145,48,5,0.94);
    filter: blur(0.2px);
    text-shadow: 0 0 4px rgba(195,68,5,0.58), 0 0 9px rgba(165,42,0,0.28);
  }
  58% {
    color: rgba(30,10,2,0.96);
    filter: none;
    text-shadow: none;
  }
  100% {
    color: rgba(21,16,32,0.88);
    filter: none;
    text-shadow: none;
  }
}

@keyframes bbt-burn-dark {
  0% {
    color: rgba(255,255,252,0.88);
    filter: blur(0.9px);
    text-shadow: 0 0 8px rgba(255,252,232,0.98), 0 0 18px rgba(255,222,120,0.72), 0 0 32px rgba(220,162,62,0.42);
  }
  20% {
    color: rgba(235,228,255,0.97);
    filter: blur(0.2px);
    text-shadow: 0 0 5px rgba(225,218,252,0.62), 0 0 11px rgba(212,202,248,0.32);
  }
  100% {
    color: rgba(205,196,238,1.0);
    filter: none;
    text-shadow: none;
  }
}

.slot--letterbox .bord_body,
.slot--letterbox .bord-viewer-body {
  display: grid;
  place-items: center;
  text-align: center;
}

.slot--letterbox .letterbox-glyph {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  min-height: 1.4em;
  padding: 0.08em 0.18em;
  font-family: var(--bb-shell-display-font, "IBM Plex Mono", monospace);
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bb-text-color, rgba(255, 244, 226, 0.92)) 92%, white);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.22);
}

.letterbox-overlay-stack {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  z-index: 2;
}

.letterbox-overlay-stack__layer {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.letterbox-overlay-stack__marker {
  position: absolute;
  width: 42%;
  height: 42%;
  border: 1px solid color-mix(in srgb, var(--bb-outline-color, rgba(255, 255, 255, 0.2)) 70%, transparent);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.08);
}

/* --- Control-dark host context ---
   Flat dark host, no grain/image/overlay, white text.
   Host applies .bord_slot--control-dark; bord surface
   rules here are the single authority for .bord_* / .bb_* overrides. */

.bord_slot--control-dark .bb_grain,
.bord_slot--control-dark .bb_image_layer {
  display: none;
}
.bord_slot--control-dark .bord_surface::after {
  display: none;
}
.bord_slot--control-dark .bord::after {
  background: none;
}
.bord_slot--control-dark .bord_title,
.bord_slot--control-dark .bord_meta,
.bord_slot--control-dark .bord_body,
.bord_slot--control-dark .bord_notes_line {
  color: #fff;
  mix-blend-mode: normal;
  text-shadow: none;
  -webkit-text-stroke: 0 transparent;
}
.bord_slot--control-dark .bord_title {
  font-family: var(--font-heading, 'Jost', sans-serif);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}