:root {
  --blueprint: #b9d6e6;
  --blueprint-light: #d9edf6;
  --navy: #0c2e4f;
  --navy-soft: #244f72;
  --accent: #1d4bbb;
  --accent-soft: #c0cdec;
  --paper: #f8fbfc;
  --white: #ffffff;
  --danger: #832b2b;
}

/* AppShell sets the document theme; retain the canvas-owned palette so its
   workspace, cards, leaders, and controls follow the same Light/Dark choice. */
[data-theme="dark"] {
  --blueprint: #142938;
  --blueprint-light: #0d1b27;
  --navy: #d8e9f5;
  --navy-soft: #aac8dc;
  --paper: #172b3a;
  --white: #eef7fc;
  --danger: #ffaaaa;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--navy);
  background: var(--blueprint-light);
  font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}

button,
input,
textarea {
  color: inherit;
  font: inherit;
}

button {
  border: 2px solid var(--navy);
  background: var(--paper);
  padding: 7px 10px;
  cursor: pointer;
}

button:hover {
  background: var(--white);
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button:disabled,
input:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: var(--blueprint-light);
  padding: 14px 18px;
}

.topbar {
  border-bottom: 3px solid var(--navy);
}

.status-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

h1,
p {
  margin: 0;
}

h1 {
  font-size: 26px;
  line-height: 1.1;
}

#revisionLabel {
  margin-top: 4px;
  font-size: 13px;
}

.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.quit-button {
  border-color: var(--navy-soft);
  color: var(--navy-soft);
  font-size: 14px;
  padding: 6px 9px;
}

.sheet {
  flex: 1 1 auto;
  min-height: 0;
}

.workspace {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background-color: var(--blueprint);
  background-image:
    linear-gradient(rgba(12, 46, 79, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 46, 79, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  overscroll-behavior: none;
  touch-action: none;
}

.workspace.selecting {
  cursor: crosshair;
}

/* Edit remains visibly distinct without reading as an error or taking space
   from the canvas. This status is shell text, never scene geometry. */
.edit-mode-indicator {
  position: absolute;
  z-index: 75;
  top: 14px;
  left: 18px;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--navy-soft) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--white) 88%, var(--navy-soft));
  color: var(--navy-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  pointer-events: none;
}

.hide-cards-hint {
  position: absolute;
  z-index: 70;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(12, 46, 79, .55);
}

.callio-editing .workspace::after {
  position: absolute;
  z-index: 80;
  inset: 3px;
  border: 2px solid color-mix(in srgb, var(--navy-soft) 48%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 72%, transparent);
  content: "";
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .edit-mode-indicator,
  .callio-editing .workspace::after {
    animation: none;
    transition: none;
  }
}

.workspace-svg,
.card-layer,
.workspace-composition {
  position: absolute;
  inset: 0;
}

.workspace-composition {
  width: 100%;
  height: 100%;
  z-index: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.workspace-zoom-controls {
  position: absolute;
  z-index: 200;
  top: 18px;
  right: 18px;
  display: grid;
  width: 50px;
  gap: 6px;
  /* This is an input layer, not a decorative wrapper.  Keeping its full
     footprint interactive makes native range/button events independent of
     canvas gesture handling beneath it. */
  pointer-events: auto;
  touch-action: manipulation;
  isolation: isolate;
}

.workspace-zoom-controls .shell-zoom-rail {
  position: relative;
  top: auto;
  right: auto;
  width: 50px;
  pointer-events: auto;
}

.group-filter-controls {
  position: relative;
  z-index: 1;
  top: auto;
  right: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  max-height: none;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: none;
  pointer-events: auto;
  container-type: inline-size;
}
.group-filter-controls::-webkit-scrollbar { display: none; }
.group-filter-button {
  flex: 0 0 auto;
  width: 100%;
  min-height: 16px;
  padding: 2px 4px;
  border-color: var(--group-color, var(--navy-soft));
  border-radius: 1px;
  background: var(--group-color, var(--accent));
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}
.group-filter-button.is-off {
  border-color: #7b8491;
  background: #7b8491;
  color: var(--white);
}

.print-scene-host {
  display: none;
}

.workspace-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

#drawingWorld,
#drawingLayer,
#anchorLayer {
  pointer-events: auto;
}

.drawing-frame {
  fill: rgba(248, 251, 252, 0.35);
  stroke: var(--navy);
  stroke-width: 2;
}

.drawing-selection-frame {
  fill: transparent;
  stroke: transparent;
  stroke-width: 6;
  vector-effect: non-scaling-stroke;
  cursor: grab;
}

.drawing-selection-frame.active {
  stroke: var(--accent);
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95));
  cursor: grab;
}

.leader-line {
  stroke: var(--group-color, var(--accent));
  stroke-width: 2;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}

.leader-line.selected {
  stroke: var(--accent);
  stroke-width: 5;
  filter: drop-shadow(0 0 3px var(--accent));
}

.anchor-point {
  fill: var(--group-color, var(--accent));
  stroke: none;
  cursor: move;
  vector-effect: non-scaling-stroke;
}

.anchor-point.selected {
  fill: var(--accent);
  stroke: var(--white);
  stroke-width: 4;
  /* Keep the selected dot unmistakable at every scene zoom. */
  r: 21px;
  filter: url(#selectedGlow);
}

.annotation-anchor.selected .anchor-number {
  font-weight: 850;
}

.anchor-number {
  fill: var(--primary-foreground, #fff);
  font-size: .75rem;
  font-weight: 750;
  pointer-events: none;
}

.card-layer {
  pointer-events: none;
}

.annotation-card {
  position: absolute;
  isolation: isolate;
  width: 336px;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-4);
  border: 1px solid rgba(12, 46, 79, 0.16);
  background: var(--paper);
  box-shadow: 0 8px 18px rgba(12, 46, 79, 0.18);
  pointer-events: auto;
  cursor: grab;
  user-select: none;
}

.annotation-card.temporarily-hidden {
  display: none;
}

/* Callio's scene transform has a meaningful default: the shared Slider
   remains the control, while this product-specific tick identifies the
   unscaled 1× canvas reference on its vertical rail. */
.workspace-zoom-controls .shell-zoom-slider-wrap {
  position: relative;
  display: block;
  width: 30px;
  height: 152px;
}

.workspace-zoom-controls .shell-zoom-slider-wrap input[type="range"] {
  display: block;
}

.workspace-zoom-controls .shell-zoom-reference {
  position: absolute;
  /* Temperature-scale treatment: the value sits left of the tube while its
     short tick lands at the tube's right edge. Both remain within the 50px
     zoom rail instead of spilling over the canvas. */
  right: calc(100% - 7px);
  bottom: calc(24.623% - 0.5em);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
  color: #374151;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
  background: transparent;
}

.workspace-zoom-controls .shell-zoom-reference::after {
  position: absolute;
  left: calc(100% + 10px);
  width: 9px;
  height: 2px;
  background: currentColor;
  content: "";
}

/* Semantic canvas zoom is product behavior, not a replacement card system:
   the full state remains the released APP-UI MediaCard. At intermediate zoom
   a title-only card stays legible; at overview it becomes a compact media
   tile with the same linked NumberBadge. */
.workspace-composition[data-card-presentation="compact"] .annotation-card {
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--space-3);
}

.workspace-composition[data-card-presentation="compact"] .image-frame {
  min-height: 5rem;
}

.workspace-composition[data-card-presentation="compact"] .card-description {
  display: none;
}

.workspace-composition[data-card-presentation="compact"] .description-row {
  display: none;
}

.workspace-composition[data-card-presentation="compact"] .annotation-card[data-has-description="true"] .description-row {
  display: block;
  min-width: 0;
  margin-top: .125rem;
}

.workspace-composition[data-card-presentation="compact"] .annotation-card[data-has-description="true"] .description-row::before {
  display: block;
  width: min(100%, 12rem);
  height: 1.35rem;
  content: "";
  opacity: .22;
  background:
    linear-gradient(var(--muted-foreground, var(--navy-soft)), var(--muted-foreground, var(--navy-soft))) top left / 100% .24rem no-repeat,
    linear-gradient(var(--muted-foreground, var(--navy-soft)), var(--muted-foreground, var(--navy-soft))) center left / 64% .24rem no-repeat,
    linear-gradient(var(--muted-foreground, var(--navy-soft)), var(--muted-foreground, var(--navy-soft))) bottom left / 86% .24rem no-repeat;
  border-radius: .25rem;
}

.workspace-composition[data-card-presentation="overview"] .annotation-card {
  display: block;
  width: var(--overview-card-size);
  height: var(--overview-card-size);
  min-height: 0;
  padding: var(--space-1);
  overflow: visible;
}

.workspace-composition[data-card-presentation="overview"] .image-stack {
  position: absolute;
  inset: var(--space-1);
}

.workspace-composition[data-card-presentation="overview"] .image-frame {
  min-height: 0;
  height: 100%;
}

.workspace-composition[data-card-presentation="overview"] .card-text {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 4;
  pointer-events: none;
}

.workspace-composition[data-card-presentation="overview"] .title-row {
  display: block;
}

.workspace-composition[data-card-presentation="overview"] .card-title,
.workspace-composition[data-card-presentation="overview"] .card-description {
  display: none;
}

.workspace-composition[data-card-presentation="overview"] .callout-number-badge {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-20%, -20%) scale(var(--overview-badge-scale, 1));
  transform-origin: center;
}

.shell-zoom-reset.is-set-default svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-spreadsheet-workspace[hidden] {
  display: none;
}

.card-spreadsheet-workspace {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  background: var(--surface-solid);
  color: var(--foreground);
}

/* APP-UI's pinned vanilla DataGrid is light by default. Map its semantic
   surface tokens to the active APP-SHELL theme for this listing workspace. */
[data-theme="dark"] .card-spreadsheet-workspace {
  --background: var(--bg-canvas);
  --surface-solid: var(--bg-surface);
  --surface-elevated: color-mix(in srgb, var(--bg-surface), white 5%);
  --surface-border: var(--border-color);
  --surface-border-strong: color-mix(in srgb, var(--border-color), white 8%);
  --foreground: var(--text-main);
  --muted-foreground: var(--text-muted);
  --secondary: var(--active-bg);
  --secondary-foreground: var(--text-main);
  --primary: var(--accent);
  --ring: var(--accent);
  --tile-shadow: var(--shadow-island);
  color-scheme: dark;
}

.project-report-workspace[hidden] { display: none; }

.project-report-workspace {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: #fff;
  color: var(--ink);
}

.google-report-workspace[hidden] { display: none; }
.google-report-workspace { flex: 1 1 auto; min-width: 0; min-height: 0; background: #fff; }
.google-report-workspace iframe { display: block; width: 100%; height: 100%; min-height: 0; border: 0; background: #fff; }
.google-report-diagnostic { max-width: 620px; margin: 64px auto; padding: 24px; border: 1px solid #f2b8b5; border-radius: 8px; background: #fff8f7; color: #8a1c16; font: 500 16px/1.55 system-ui, sans-serif; }
.report-settings { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid rgba(12, 46, 79, .14); }
.report-settings p { margin: 0; color: var(--muted); font-size: 13px; }

/* The banner and standalone factories consume one Callio heading contract.
   In the shared banner, the intrinsic grid track reserves every registered
   module's wrapped heading/help without a desktop-only height. */
.callio-module-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--surface-solid);
}
.callio-module-heading { min-width: 0; flex: 1 1 auto; }
.callio-module-heading h2,
.callio-module-heading p { margin: 0; }
.callio-module-help { min-height: 1.4em; margin-top: 4px !important; line-height: 1.4; overflow-wrap: anywhere; }
.project-report-google-feedback {
  min-width: 0;
  max-width: 48ch;
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.project-report-google-feedback.is-error { color: #a22d25; }

/* Released APP-UI owns report button geometry, neutral faces and states. */
.project-report-download-icon { font: 800 17px/1 Arial, sans-serif; letter-spacing: -1px; }
.project-report-html-download-icon { font: 800 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -1px; }
.project-report-publish-icon,
.project-report-google-export-icon { display: block; width: 18px; height: 18px; }
.project-report-publish-icon svg,
.project-report-google-export-icon svg { display: block; width: 100%; height: 100%; }
.project-report-unpublish-icon { font: 500 22px/1 Arial, sans-serif; }

.project-report-document {
  flex: 0 0 auto;
  align-self: center;
  box-sizing: border-box;
  width: min(calc(100% - 32px), 8.5in);
  max-width: 8.5in;
  min-height: 100%;
  margin: 0 auto;
  padding: .55in .55in .75in;
  background-color: #fff !important;
  box-shadow: 0 1px 3px rgba(12, 46, 79, .12);
  color: var(--ink);
  /* Keep the in-app reading experience aligned with the portable HTML
     report: this is a document, not the compact canvas UI. */
  font: 20px/1.5 Arial, sans-serif;
}

.project-report-document input,
.project-report-document textarea {
  appearance: none;
  -webkit-appearance: none;
  color: inherit;
  outline: 0;
}

.project-report-title {
  display: block;
  width: 100%;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: 700 clamp(24px, 4vw, 36px)/1.15 system-ui, sans-serif;
}

.project-report-title:focus,
.project-report-card-title:focus,
.project-report-card-description:focus {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.project-report-toc {
  margin: 0 0 34px;
  padding: 0;
  border: 0;
  background: transparent;
}

.project-report-toc h2 { margin: 0 0 8px; font-size: 17px; }
.project-report-toc ul { margin: 0; padding: 0; list-style: none; }
.project-report-toc a { color: var(--accent); }

.project-report-section { margin: 0 0 44px; }
.project-report-section h2 { margin: 0 0 14px; font-size: 22px; }
.project-report-diagram-frame { position: relative; width: fit-content; max-width: 100%; margin: 18px auto; }
.project-report-diagram { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; }
.project-report-anchor { position: absolute; width: 0; height: 0; color: var(--group-color, var(--accent)); pointer-events: none; }
.project-report-anchor-dot { position: absolute; width: 16px; height: 16px; transform: translate(-50%, -50%); border-radius: 50%; background: currentColor; }
.project-report-anchor-label { position: absolute; left: 10px; top: -18px; color: currentColor; font: 700 13px/1 Arial, sans-serif; white-space: nowrap; }
.project-report-card-section { padding-top: 20px; border-top: 1px solid rgba(12, 46, 79, .14); }
.project-report-card-heading { display: flex; align-items: baseline; gap: 8px; font: 700 22px/1.25 Arial, sans-serif; }
.project-report-card-number { flex: 0 0 auto; margin: 0; color: #64748b; font: inherit; }
.project-report-card-title { min-width: 0; flex: 1 1 auto; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; }
.project-report-card-description { display: block; width: 100%; min-height: 0; margin: 12px 0 0; padding: 0; border: 0; background: transparent; font: inherit; resize: none; }
.project-report-back-to-contents { display: flex; justify-content: flex-end; margin: 18px 0 0; font-size: 20px; line-height: 1; }
.project-report-back-to-contents a { color: var(--accent); text-decoration: none; }
.project-report-back-to-contents a:hover { text-decoration: underline; }
.project-report-images { display: grid; gap: 18px; margin-top: 18px; }
.project-report-image-figure { width: 80%; margin: 0 auto; text-align: center; }
.project-report-image { display: block; width: 100%; height: auto; margin: 0 auto; }
.project-report-image-status, .project-report-diagram-status { color: var(--muted); }

body.callio-report-mode .workspace-zoom-controls { display: none; }
body.callio-report-mode #addCalloutButton,
body.callio-report-mode #fitDrawingButton,
body.callio-report-mode #arrangeCardsButton { display: none; }
body.callio-report-mode #workspace[hidden] { display: none !important; }
body.callio-report-mode .sheet { overflow: hidden; }

.ui-datagrid-table tr.is-dragging { opacity: .45; }
.ui-datagrid-table tr.is-drop-target > td { box-shadow: inset 0 2px 0 var(--accent); }

@media (max-width: 600px) {
  .project-report-google-feedback { max-width: 28ch; }
  .project-report-document { width: 100%; padding: 18px 16px 32px; box-shadow: none; }
  .project-report-image-figure { width: 100%; }
}

.card-spreadsheet-panel {
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--surface-solid);
}

.app-ui .card-spreadsheet-panel .ui-datagrid {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--surface-solid);
  box-shadow: none;
}

.card-spreadsheet-panel .ui-datagrid-scroll {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.card-spreadsheet-panel .ui-datagrid-scroll::-webkit-scrollbar { display: none; }
.app-ui .card-spreadsheet-panel .ui-datagrid-table th { background: var(--surface-solid); }

/* The first control begins at the table edge. Its 32px column still keeps a
   keyboard-visible focus ring around the standard drag handle. */
.app-ui .card-spreadsheet-panel .ui-datagrid-table tr > :first-child.ui-datagrid-control {
  padding-inline: 0;
}

.card-spreadsheet-panel--shared-header { grid-template-rows: minmax(0, 1fr) auto; }
.card-spreadsheet-help { margin: 0; padding: 8px 16px; line-height: 1.4; }

.card-spreadsheet-font-size {
  flex: 0 0 auto;
  margin-left: auto;
}

.card-spreadsheet-font-size-value {
  cursor: default;
  user-select: none;
}


.card-spreadsheet-panel .ui-datagrid-table td {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.card-spreadsheet-panel .ui-datagrid-table :is(th, td).card-spreadsheet-number-cell {
  white-space: nowrap;
  overflow-wrap: normal;
}

.card-spreadsheet-panel .ui-datagrid-table td:focus {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

/* Keep row controls visually unchanged for mouse hover/press; keyboard focus
   remains the only local decoration. The row itself owns selected/hover state. */
.app-ui .card-spreadsheet-panel :is(.ui-datagrid-drag-handle, .ui-datagrid-action-trigger):is(:hover, :active):not(:focus-visible) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--muted-foreground) !important;
  outline: none !important;
  filter: none !important;
  transform: none !important;
}

.app-ui .card-spreadsheet-panel :is(.ui-datagrid-drag-handle, .ui-datagrid-action-trigger):focus-visible {
  background: transparent;
  box-shadow: none;
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}

.app-ui .card-spreadsheet-panel .ui-datagrid-table tbody tr.is-search-match > td {
  background: color-mix(in srgb, var(--primary) 5%, var(--surface-solid));
}

.app-ui .card-spreadsheet-panel .ui-datagrid-table tbody td.is-search-match {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface-solid));
}

.app-ui .card-spreadsheet-panel .ui-datagrid-table tbody td.is-search-current {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--primary) 27%, var(--surface-solid));
}

.card-spreadsheet-panel .ui-datagrid-table td.is-editable {
  cursor: text;
}

.card-spreadsheet-panel .ui-datagrid-table td.card-spreadsheet-images-cell {
  padding: 6px 8px;
  white-space: nowrap;
}

.card-spreadsheet-images {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.card-spreadsheet-images::-webkit-scrollbar { display: none; }

.card-spreadsheet-image {
  flex: 0 0 auto;
  width: 44px;
  height: 32px;
  max-height: 2.7em;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(12, 46, 79, .2);
  border-radius: 2px;
  background: var(--blueprint-light);
  color: var(--muted);
  cursor: pointer;
}

.card-spreadsheet-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-spreadsheet-image:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.card-spreadsheet-image[draggable="true"] {
  cursor: grab;
}

.card-spreadsheet-image.is-dragging {
  opacity: .45;
}

.card-spreadsheet-image-insertion-cue {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-1px);
  background: var(--accent);
  pointer-events: none;
}

.card-spreadsheet-panel .ui-datagrid-table td.card-spreadsheet-tags {
  vertical-align: top;
  text-align: left;
}

.card-spreadsheet-editor {
  width: 100%;
  min-height: 30px;
  margin: -4px;
  padding: 4px;
  border: 1px solid var(--ring);
  border-radius: 3px;
  background: var(--surface-solid);
  color: var(--foreground);
  font: inherit;
  resize: vertical;
}

textarea.card-spreadsheet-editor {
  min-height: 72px;
}

.annotation-card.selected {
  background: var(--white);
  border-color: var(--accent);
  /* Keep the measured card box unchanged while making selection unmistakable.
     The outer ring does not consume content space or cover card controls. */
  box-shadow: 0 10px 22px rgba(12, 46, 79, 0.24), 0 0 0 5px var(--accent);
}

/* Card Detail keeps the selected canvas identity visible behind the sheet. */
.card-detail-panel-open .annotation-card.selected {
  border-width: 2px;
  box-shadow: 0 12px 26px rgba(12, 46, 79, 0.28), 0 0 0 6px var(--accent), 0 0 0 9px rgba(200, 79, 47, 0.2);
}

.annotation-card.drag-over {
  border-color: var(--accent);
  box-shadow: 0 10px 22px rgba(12, 46, 79, 0.22), 0 0 0 4px rgba(200, 79, 47, 0.18);
}

/* APP-UI's standard focus ring communicates a transient shell-search match
   without changing a card's geometry, group color, or persisted state. */
.annotation-card.is-canvas-search-match {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

.annotation-card:focus-visible {
  outline: 2px solid var(--group-color, var(--accent));
  outline-offset: 3px;
}

.card-delete-confirm {
  position: fixed;
  /* Keep image/card deletion confirmation above either overlay. */
  z-index: 105;
  width: auto;
  max-width: calc(100vw - 2rem);
}

/* APP-UI's generic dialog selector is loaded after app.css and otherwise
   restores its 32rem default. Scope this consumer's AlertDialog one level
   higher so the standard small (max-w-xs / 20rem) size owns the surface. */
.app-ui.card-delete-confirm .ui-dialog {
  width: min(20rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  overflow: auto;
}

.card-delete-confirm .ui-dialog-content {
  display: grid;
  gap: var(--space-2);
}

.card-delete-confirm .ui-helper {
  margin: 0;
  line-height: 1.45;
}

.card-delete-confirm .card-delete-confirm-actions {
  margin-top: 0;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--surface-border);
}

.image-stack {
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  min-width: 0;
  align-items: stretch;
}

.image-frame {
  width: 100%;
  min-height: 7rem;
  aspect-ratio: 1;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  background: var(--blueprint-light);
}

.image-frame {
  position: relative;
  z-index: 3;
  overflow: hidden;
  cursor: pointer;
}

.image-frame.image-switching .reference-image {
  animation: image-switch 180ms ease-out;
}

@keyframes image-switch {
  from {
    opacity: 0.35;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.image-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--navy-soft);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.image-placeholder[hidden] {
  display: none;
}

.reference-image {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-user-drag: none;
  user-select: none;
}

.reference-image.has-image {
  display: block;
}

.image-count,
.image-nav-group,
.image-trash-button {
  position: absolute;
  z-index: 2;
  border: 0;
  background: rgba(248, 251, 252, 0.84);
  color: var(--navy);
}

.image-count[hidden],
.image-nav-group[hidden],
.image-trash-button[hidden] {
  display: none;
}

.image-count {
  display: none !important;
}

.image-nav-group {
  right: 5px;
  bottom: 5px;
  display: inline-flex;
  gap: 4px;
  overflow: visible;
  border: 0;
  background: transparent;
}

.image-nav {
  width: 24px;
  min-height: 24px;
  height: 24px;
  border: 1px solid rgba(12, 46, 79, 0.2);
  border-radius: 3px;
  background: rgba(248, 251, 252, 0.84);
  padding: 0;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.image-trash-button {
  left: 5px;
  top: 5px;
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  color: #000;
  display: none;
  align-items: center;
  justify-content: center;
}

.trash-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.annotation-card.editing .image-trash-button:not([hidden]) {
  display: flex;
}

.image-nav:hover,
.image-nav:focus-visible,
.image-trash-button:hover,
.image-trash-button:focus-visible {
  background: var(--white);
}

.image-indicators {
  position: absolute;
  z-index: 2;
  left: 50%;
  right: auto;
  bottom: 6px;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: max-content;
  max-width: calc(100% - 16px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  padding: 3px 5px;
  border-radius: 10px;
  background: rgba(248, 251, 252, 0.84);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.image-indicators::-webkit-scrollbar {
  display: none;
}

.image-indicators:not(:empty) {
  display: inline-flex;
}

.image-indicators[hidden] {
  display: none;
}

.image-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  min-width: 7px;
  min-height: 7px;
  border: 1px solid var(--navy);
  border-radius: 50%;
  background: transparent;
  padding: 0;
  line-height: 0;
  font-size: 0;
  box-shadow: none;
  cursor: pointer;
}

.image-dot.active,
.image-dot[aria-current="true"] {
  border-color: var(--group-color, var(--accent));
  background: var(--group-color, var(--accent));
}

.image-dot:hover,
.image-dot:focus-visible {
  border-color: var(--group-color, var(--accent));
  box-shadow: 0 0 0 3px rgba(12, 46, 79, 0.24);
  outline: none;
}

.add-image-button {
  position: absolute;
  z-index: 3;
  right: 5px;
  top: 5px;
  display: block;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  border: 0;
  border-radius: 0;
  background: rgba(248, 251, 252, 0.84);
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

/* Image-source controls mutate card media, so they appear only on the card
   actively being edited; View mode has no editing card. */
.annotation-card:not(.editing) .add-image-button,
.annotation-card:not(.editing) .image-source-chooser {
  display: none !important;
}

.image-source-chooser {
  position: absolute;
  z-index: 5;
  right: 5px;
  bottom: 34px;
  display: grid;
  gap: 4px;
  width: 145px;
  border: 1px solid rgba(12, 46, 79, 0.3);
  background: var(--paper);
  box-shadow: 0 5px 12px rgba(12, 46, 79, 0.2);
  padding: 5px;
}

/* Empty holders expose both source choices without an extra + click. */
.image-frame:not(:has(.reference-image.has-image)) .image-source-chooser[hidden] {
  display: grid;
}

.image-frame:not(:has(.reference-image.has-image)) .image-source-chooser {
  top: 38px;
  right: 5px;
  bottom: auto;
  left: 5px;
  width: auto;
}

/* URL mode contains four controls, so start it closer to the image area's
   top edge.  This keeps the Cancel button inside compact empty holders while
   leaving the add control available at the top-right. */
.image-frame:not(:has(.reference-image.has-image)) .image-source-chooser.url-entry-active {
  top: 18px;
}

.image-frame:not(:has(.reference-image.has-image)):has(.image-source-chooser.url-entry-active) .add-image-button {
  z-index: 6;
}

.image-source-chooser[hidden],
.image-url-form[hidden] {
  display: none;
}

.image-source-chooser button {
  min-height: 24px;
  border: 1px solid var(--navy-soft);
  background: var(--white);
  padding: 3px 5px;
  font-size: 11px;
  text-align: left;
}

.image-source-chooser.url-entry-active > .upload-image-button,
.image-source-chooser.url-entry-active > .url-image-button {
  display: none;
}

.image-url-form {
  display: grid;
  gap: 4px;
}

.image-url-form label {
  display: grid;
  gap: 2px;
  font-size: 10px;
}

.image-url-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--navy-soft);
  padding: 3px;
  font-size: 11px;
}

.card-text {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: var(--space-2);
  padding: 0;
}

.title-row,
.description-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.description-row {
  grid-template-columns: minmax(0, 1fr);
}

.card-title,
.title-input {
  font-size: calc(16px * var(--card-type-scale, 1));
  line-height: 1.2;
}

.card-title {
  color: var(--group-color, var(--accent));
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.image-count {
  color: var(--group-color, var(--accent));
  font-weight: 700;
}

/* APP-UI owns the NumberBadge geometry and numeral treatment. Callio supplies
   only the persisted Before/After group color to make linked cards and anchors
   unambiguous. */
.callout-number-badge {
  flex: 0 0 auto;
  background: var(--group-color, var(--primary));
}

.image-viewer {
  position: fixed;
  inset: 0;
  /* The viewer is opened from the deck and must remain above its scrim. */
  z-index: 104;
  display: grid;
  place-items: center;
  overscroll-behavior: contain;
  touch-action: none;
}

.image-viewer[hidden] {
  display: none;
}

.image-viewer-backdrop,
.card-deck-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 46, 79, 0.78);
}

.image-viewer-panel {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  max-width: min(80vw, 1024px);
  max-height: 80vh;
  border: 2px solid var(--white);
  background: var(--blueprint-light);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.38);
}

.image-viewer-image {
  display: block;
  max-width: min(80vw, 1024px);
  max-height: 80vh;
  object-fit: contain;
  transform-origin: 0 0;
  will-change: transform;
}

.image-viewer-preparing {
  display: grid;
  min-width: min(80vw, 704px);
  min-height: min(60vh, 468px);
  margin: 0;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}

.image-viewer-preparing[hidden] {
  display: none;
}

.image-viewer-image[hidden] {
  display: none;
}

.image-viewer-trash[hidden] {
  display: none !important;
}

.image-viewer-close,
.image-viewer-trash {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(12, 46, 79, 0.2);
  border-radius: 3px;
  background: rgba(248, 251, 252, 0.84);
  color: var(--navy);
}

.card-deck {
  position: fixed;
  inset: 0;
  z-index: 102;
  display: grid;
  place-items: center;
  overscroll-behavior: contain;
  touch-action: none;
}

.card-deck[hidden] {
  display: none;
}

.card-deck-panel {
  position: relative;
  z-index: 1;
  width: min(90dvw, 351px);
  max-height: min(88dvh, 640px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.card-deck-stack {
  position: relative;
  min-height: 0;
  width: 100%;
  height: auto;
  /* Standard physical poker cards are 2.5 × 3.5 inches (5:7). */
  aspect-ratio: 5 / 7;
}

.card-deck-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(180px, 1fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(12, 46, 79, 0.2);
  background: var(--paper);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.36);
  will-change: transform, opacity;
}

.card-deck-stack.is-transitioning {
  pointer-events: none;
}

.card-deck-card.is-current {
  z-index: 2;
}

/* The edit footer finishes the card: spare stack height belongs to the image,
   never to a blank region below the Before/After and delete controls. */
.card-deck-card:has(.card-deck-editor) {
  grid-template-rows: minmax(180px, 1fr) auto;
}

.card-deck-card.is-backing {
  z-index: 1;
  transform: translate(8px, 8px) scale(.975);
  opacity: .76;
}

.card-deck-card.is-leaving-next {
  animation: card-deck-slide-top-next 680ms linear both;
}

.card-deck-card.is-leaving-prev {
  animation: card-deck-slide-top-prev 680ms linear both;
}

.card-deck-card.is-promoting-next {
  animation: card-deck-reveal-next 680ms linear both;
}

.card-deck-card.is-promoting-prev {
  animation: card-deck-reveal-prev 680ms linear both;
}

.card-deck-image {
  position: relative;
  display: grid;
  min-height: 180px;
  place-items: center;
  overflow: hidden;
  background: var(--blueprint-light);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  touch-action: pan-y;
  margin: 8px 8px 0;
  border: 1px solid var(--white);
}

.card-deck-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-deck-image.is-current {
  cursor: grab;
}

.card-deck-image.is-current:focus-visible {
  outline: 3px solid var(--group-color, var(--accent));
  outline-offset: -3px;
}

/* Task #86: the deck editor keeps media controls in the image region and
   leaves the text region at the same geometry as its read-only counterpart. */
.card-deck-image.is-editing {
  align-items: stretch;
  justify-items: stretch;
}

.card-deck-image.is-editing > img {
  position: absolute;
  inset: 0;
}

/* The deck carousel is intentionally image-first: it never reserves room for
   a thumbnail strip. When the synthetic final slot is present it replaces the
   current image for the entire image pane. */
.card-deck-image .deck-image-editor,
.card-deck-image .deck-image-order-item {
  display: none;
}

.card-deck-image.is-editing:has(.deck-image-add-slot) > img {
  visibility: hidden;
}

.deck-image-editor {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 8px;
  left: 8px;
  display: flex;
  align-items: stretch;
  gap: 6px;
  max-width: calc(100% - 16px);
  overflow-x: auto;
  padding: 6px;
  border: 1px solid rgba(12, 46, 79, .28);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
  overscroll-behavior: contain;
  touch-action: pan-x;
}

.deck-image-order-item,
.deck-image-add-slot {
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
  height: 58px;
  min-height: 58px;
  padding: 3px;
  border: 1px solid var(--navy-soft);
  background: var(--white);
}

.deck-image-order-item {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.deck-image-order-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.deck-image-add-slot {
  flex-basis: 186px;
  width: 186px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  align-items: center;
  padding: 4px;
  border-style: dashed;
  color: var(--navy);
}

.card-deck-image.is-editing > .deck-image-add-slot {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  max-width: none;
  grid-template-columns: minmax(0, 270px);
  grid-template-rows: repeat(3, auto) auto;
  align-content: center;
  justify-content: center;
  justify-items: stretch;
  gap: 9px;
  padding: 12px;
  border: 2px dashed var(--navy-soft);
  background: var(--blueprint-light);
  box-shadow: none;
}

.deck-image-import-method {
  display: grid;
  min-width: 0;
  min-height: 36px;
  place-items: center;
  margin: 0;
  border: 1px solid var(--navy-soft);
  border-radius: 3px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
}

.deck-image-drop-method { border-style: dashed; }

.deck-image-add-file { padding: 6px; cursor: pointer; }

.deck-image-url-method {
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 5px;
  padding: 6px;
}

.deck-image-url-method span { font: inherit; }
.deck-image-url-controls { display: flex; min-width: 0; }
.deck-image-url-method .deck-image-add-url { min-width: 0; min-height: 25px; flex: 1 1 auto; border-radius: 3px 0 0 3px; }
.deck-image-url-method .deck-image-add-url-button { min-height: 25px; border-left: 0; border-radius: 0 3px 3px 0; }

.deck-image-format-help {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--navy-soft);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}

.deck-image-add-slot.is-drag-over {
  border-color: var(--group-color, var(--accent));
  background: var(--accent-soft);
  outline: 2px solid var(--group-color, var(--accent));
  outline-offset: -2px;
}

.deck-image-add-slot button {
  min-height: 22px;
  padding: 2px 5px;
  border-width: 1px;
  font-size: 11px;
  white-space: nowrap;
}

.deck-image-add-url {
  min-height: 22px;
  padding: 2px 4px;
  border: 1px solid var(--navy-soft);
  background: var(--white);
  font-size: 11px;
}


.deck-image-trash {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: 8px;
  display: grid;
  width: 30px;
  height: 30px;
  min-height: 30px;
  place-items: center;
  padding: 0 0 2px;
  border: 1px solid rgba(12, 46, 79, .28);
  border-radius: 3px;
  background: rgba(248, 251, 252, .9);
  color: var(--danger);
  font-size: inherit;
  line-height: 1;
}

/* Keep deck and full-screen image deletion visually identical. */
.card-deck-image .deck-image-trash.image-viewer-trash {
  top: 8px;
  left: 8px;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid rgba(12, 46, 79, 0.2);
  border-radius: 3px;
  background: rgba(248, 251, 252, 0.84);
  color: var(--navy);
  font-size: inherit;
}

.card-deck-image .deck-image-trash .trash-icon {
  width: 16px;
  height: 16px;
}

.deck-image-trash:hover,
.deck-image-trash:focus-visible {
  background: var(--white);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.card-deck-text {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 8px;
  border: 1px solid var(--white);
}

.card-deck-text h2,
.card-deck-text p {
  margin: 0;
}

.card-deck-text h2 {
  color: var(--group-color, var(--accent));
  font-size: 19px;
  line-height: 1.15;
}

.card-deck-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.card-deck-title-row h2 { min-width: 0; }

.card-deck-title-row .card-deck-id {
  flex: 0 0 auto;
  margin: 0 !important;
  text-align: right;
}

.card-deck-id {
  margin-top: 4px !important;
  color: var(--group-color, var(--accent));
  font-size: 12px;
  font-weight: 700;
}

.card-deck-description {
  min-height: 3em;
  margin-top: 4px !important;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.42;
  white-space: pre-wrap;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Task #83: card-content mutation lives only in an explicitly opened deck. */
.card-deck-editor {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--white);
  background: var(--paper);
}

.deck-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.deck-title-input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 19px;
  line-height: 1.15;
}

.deck-title-row .card-deck-id {
  flex: 0 0 auto;
  margin: 0 !important;
  text-align: right;
}

.deck-group-buttons {
  flex: 0 1 auto;
  align-items: stretch;
  justify-content: flex-start;
  max-width: none;
}

.deck-group-buttons .card-group-button {
  min-height: 22px;
  padding: 3px 5px;
  border-width: 1px;
  font-size: 10px;
  line-height: 1.1;
}

.card-deck-editor.is-drag-over {
  outline: 3px solid var(--group-color, var(--accent));
  outline-offset: -3px;
}

.deck-title-input,
.deck-description-input,
.deck-media-editor input[type="url"] {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.deck-title-input:focus,
.deck-description-input:focus,
.deck-media-editor input[type="url"]:focus {
  outline: none;
  box-shadow: none;
  caret-color: #b45f08;
}

.deck-title-input {
  color: var(--group-color, var(--accent));
  font-weight: 700;
}
.deck-description-input {
  resize: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.deck-description-input {
  min-height: 3em;
  margin-top: 4px;
  color: var(--ink, var(--navy));
  font-size: 15px;
  line-height: 1.42;
}

.deck-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 0;
  margin-bottom: 0;
}

.deck-editor-footer .deck-group-buttons {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  min-width: 76px;
}

.deck-editor-footer .card-group-button {
  width: 100%;
  min-width: 38px;
  margin: 0;
  padding-inline: 4px;
}

.deck-delete-card {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 3px 7px;
  border-color: var(--danger);
  background: transparent;
  color: var(--danger);
  font-size: 11px;
}

.deck-media-editor,
.deck-group-buttons,
.deck-image-order,
.deck-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.deck-image-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.deck-image-order-item.is-active {
  border-color: var(--group-color, var(--accent));
  background: var(--group-color, var(--accent));
  color: var(--white);
}

.deck-editor-actions {
  justify-content: flex-end;
  padding-top: 3px;
}

.card-deck-close {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 8px;
  display: grid;
  width: 32px;
  height: 32px;
  min-height: 32px;
  place-items: center;
  padding: 0 0 2px;
  border: 1px solid rgba(12, 46, 79, .2);
  border-radius: 3px;
  background: rgba(248, 251, 252, .9);
  color: var(--navy);
  font-size: 24px;
  line-height: 0;
}

.card-deck-controls {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

.card-deck-controls button {
  min-height: 34px;
}

.card-deck-card-navigation {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
  /* This is a panel-level sibling, directly below (and outside) the card. */
  position: relative;
  z-index: 1;
}

.card-deck-card-nav {
  display: grid;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(12, 46, 79, .24);
  border-radius: 3px;
  background: rgba(248, 251, 252, .94);
  color: var(--navy);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.card-deck-card-nav:focus-visible {
  outline: 3px solid var(--group-color, var(--accent));
  outline-offset: 2px;
}

.card-deck-image-dots {
  position: absolute;
  z-index: 1;
  right: 50%;
  bottom: 8px;
  display: flex;
  gap: 5px;
  transform: translateX(50%);
}

.card-deck-image-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(248, 251, 252, .5);
  box-shadow: 0 1px 2px rgba(12, 46, 79, .48);
}

.card-deck-image-dot.is-active {
  background: var(--group-color, var(--accent));
  box-shadow: 0 0 0 1px rgba(248, 251, 252, .82), 0 1px 2px rgba(12, 46, 79, .48);
}

/* Flat, staged deck motion: the top card slides off to expose the card below. */
@keyframes card-deck-slide-top-next {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  20% { transform: translate3d(9%, 0, 0) scale(1); opacity: 1; }
  40% { transform: translate3d(18%, 0, 0) scale(.998); opacity: 1; }
  60% { transform: translate3d(27%, 0, 0) scale(.996); opacity: .99; }
  80% { transform: translate3d(45%, 0, 0) scale(.994); opacity: .98; }
  100% { transform: translate3d(108%, 0, 0) scale(.99); opacity: .96; }
}

@keyframes card-deck-slide-top-prev {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  20% { transform: translate3d(-9%, 0, 0) scale(1); opacity: 1; }
  40% { transform: translate3d(-18%, 0, 0) scale(.998); opacity: 1; }
  60% { transform: translate3d(-27%, 0, 0) scale(.996); opacity: .99; }
  80% { transform: translate3d(-45%, 0, 0) scale(.994); opacity: .98; }
  100% { transform: translate3d(-108%, 0, 0) scale(.99); opacity: .96; }
}

@keyframes card-deck-reveal-next {
  0% { transform: translate3d(8px, 8px, 0) scale(.975); opacity: .76; }
  16% { transform: translate3d(7px, 7px, 0) scale(.979); opacity: .79; }
  32% { transform: translate3d(5px, 5px, 0) scale(.985); opacity: .85; }
  50% { transform: translate3d(3px, 3px, 0) scale(.991); opacity: .92; }
  70% { transform: translate3d(1px, 1px, 0) scale(.997); opacity: .98; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}

@keyframes card-deck-reveal-prev {
  0% { transform: translate3d(8px, 8px, 0) scale(.975); opacity: .76; }
  16% { transform: translate3d(7px, 7px, 0) scale(.979); opacity: .79; }
  32% { transform: translate3d(5px, 5px, 0) scale(.985); opacity: .85; }
  50% { transform: translate3d(3px, 3px, 0) scale(.991); opacity: .92; }
  70% { transform: translate3d(1px, 1px, 0) scale(.997); opacity: .98; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .card-deck-card.is-leaving-next,
  .card-deck-card.is-leaving-prev,
  .card-deck-card.is-promoting-next,
  .card-deck-card.is-promoting-prev {
    animation: none;
  }
}

.image-viewer-close {
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0 0 2px;
  font-size: 24px;
  line-height: 0;
  display: grid;
  place-items: center;
}

.image-viewer-trash {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  display: grid;
  width: 30px;
  height: 30px;
  min-height: 30px;
  place-items: center;
  padding: 0;
}

.image-viewer-thumbnails {
  position: absolute;
  z-index: 2;
  bottom: 8px;
  left: 8px;
  display: flex;
  max-width: calc(100% - 96px);
  gap: 4px;
  overflow-x: auto;
  padding: 4px;
  background: rgba(248, 251, 252, 0.88);
  scrollbar-width: thin;
}

.image-viewer-thumbnails[hidden] {
  display: none;
}

.image-viewer-thumbnail {
  flex: 0 0 auto;
  width: 36px;
  height: 26px;
  min-height: 26px;
  border: 2px solid transparent;
  border-radius: 0;
  background: var(--white);
  padding: 0;
  cursor: grab;
}

.image-viewer-thumbnail[draggable="true"] { cursor: grab; }

.image-viewer-thumbnail.is-active {
  border-color: var(--group-color, var(--accent));
}

.image-viewer-thumbnail.is-drag-over {
  border-color: var(--navy);
}

.image-viewer-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.image-viewer-thumbnail-preparing {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--muted);
}

.card-description {
  display: -webkit-box;
  min-height: 2.3em;
  margin: 0;
  overflow: hidden;
  color: var(--muted-foreground, var(--navy-soft));
  font-size: calc(.875rem * var(--card-type-scale, 1));
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.annotation-card.editing {
  cursor: default;
}

.title-input,
.description-input {
  display: none;
  width: 100%;
  border: 1px solid var(--navy-soft);
  background: var(--white);
  padding: 3px 4px;
  resize: vertical;
}

.annotation-card.editing .description-input {
  font-size: calc(.875rem * var(--card-type-scale, 1));
}

.annotation-card.editing .card-title,
.annotation-card.editing .card-description {
  display: none;
}

.annotation-card.editing .title-input,
.annotation-card.editing .description-input {
  display: block;
}

.card-group-control {
  display: none;
  min-width: 0;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
}

.annotation-card.editing .card-group-control {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  white-space: nowrap;
}

.card-group-control legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.card-group-buttons {
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 2px;
}

.card-group-button,
.new-group-button {
  min-height: 16px;
  padding: 2px 4px;
  border-radius: 1px;
  font-size: 9px;
  line-height: 1;
}

.card-group-button {
  border-color: #7b8491;
  background: #7b8491;
  color: var(--white);
}

.card-group-button.selected {
  background: var(--group-color, var(--accent));
  color: var(--white);
}

.group-color-settings {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--shell-border);
  border-radius: 10px;
  background: var(--shell-surface);
}
.group-color-settings > strong {
  color: var(--shell-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}
.group-color-settings > div { display: grid; gap: 5px; }
.group-color-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--shell-text);
  font-size: 12px;
}
.group-color-setting input[type="color"] {
  width: 28px;
  min-width: 28px;
  height: 25px;
  padding: 2px;
  border: 1px solid var(--shell-border);
  border-radius: 5px;
  background: var(--shell-surface);
  cursor: pointer;
}

.new-group-button {
  flex: 0 0 auto;
  border-color: var(--navy-soft);
  background: transparent;
  color: var(--navy-soft);
}

.title-input {
  min-width: 0;
  font-weight: 700;
}

.description-input {
  min-height: 42px;
  max-height: 96px;
  color: var(--navy-soft);
  font-size: 13px;
  line-height: 1.15;
}

.annotation-card.editing .title-input:focus-visible,
.annotation-card.editing .description-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.image-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.delete-button {
  display: none;
  justify-self: end;
  min-height: 26px;
  border-color: var(--danger);
  background: transparent;
  color: var(--danger);
  padding: 3px 7px;
  font-size: 11px;
}

.card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.save-button {
  display: none;
  min-height: 26px;
  border-color: var(--group-color, var(--accent));
  background: var(--group-color, var(--accent));
  color: var(--white);
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 700;
}

.annotation-card.editing .delete-button {
  display: inline-block;
}

.annotation-card.editing .save-button {
  display: inline-block;
}

.stopped-state {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(217, 237, 246, 0.94);
  pointer-events: auto;
}

.stopped-state[hidden] {
  display: none;
}

.stopped-state > div {
  max-width: min(420px, calc(100% - 32px));
  border: 3px solid var(--navy);
  background: var(--paper);
  padding: 22px;
  text-align: center;
}

.stopped-state h2 {
  margin: 0 0 12px;
  font-size: 22px;
}

.stopped-state p {
  margin: 6px 0 0;
  font-size: 15px;
}

.portal-stopped .workspace-svg,
.portal-stopped .card-layer {
  pointer-events: none;
}

/* The in-app phone preview narrows the body without narrowing the browser
   viewport, so it needs an explicit preview-state equivalent of the media
   query below. */
html[data-preview-size="phone"] .annotation-card {
  width: 96px;
  display: block;
}

html[data-preview-size="phone"] .workspace-composition[data-card-presentation] .annotation-card {
  width: 96px;
  height: auto;
  min-height: 0;
  padding: var(--space-2);
  overflow: visible;
}

html[data-preview-size="phone"] .workspace-composition[data-card-presentation] .image-stack,
html[data-preview-size="phone"] .workspace-composition[data-card-presentation] .card-text,
html[data-preview-size="phone"] .workspace-composition[data-card-presentation] .title-row {
  position: static;
  display: block;
}

html[data-preview-size="phone"] .workspace-composition[data-card-presentation] .card-title,
html[data-preview-size="phone"] .workspace-composition[data-card-presentation] .card-description {
  display: -webkit-box;
}

html[data-preview-size="phone"] .image-stack {
  margin: 4px 4px 0;
}

html[data-preview-size="phone"] .add-image-button {
  display: none;
  right: 3px;
  top: 3px;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  font-size: 14px;
}

html[data-preview-size="phone"] .image-frame:not(:has(.reference-image.has-image)) .image-source-chooser {
  top: 19px;
  right: 3px;
  left: 3px;
  gap: 2px;
  padding: 3px;
}

html[data-preview-size="phone"] .image-source-chooser button {
  min-height: 16px;
  padding: 1px 3px;
  font-size: 7px;
  line-height: 1;
}

html[data-preview-size="phone"] .card-text {
  gap: 2px;
  padding: 3px 5px 5px;
  min-width: 0;
}

html[data-preview-size="phone"] .title-row {
  gap: 3px;
}

html[data-preview-size="phone"] .card-title,
html[data-preview-size="phone"] .title-input {
  font-size: calc(9px * var(--card-type-scale, 1));
}

html[data-preview-size="phone"] .card-description {
  min-height: 2.2em;
  font-size: calc(8px * var(--card-type-scale, 1));
}

/* Compact cards have no spare horizontal space for form controls.  Keep the
   editor inside the same measured card box used by responsive arrangement. */
html[data-preview-size="phone"] .annotation-card.editing .title-row,
html[data-preview-size="phone"] .annotation-card.editing .description-row {
  width: 100%;
  min-width: 0;
}

html[data-preview-size="phone"] .annotation-card.editing .title-input,
html[data-preview-size="phone"] .annotation-card.editing .description-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 2px 3px;
  font-size: calc(9px * var(--card-type-scale, 1));
  line-height: 1.1;
}

html[data-preview-size="phone"] .card-group-button,
html[data-preview-size="phone"] .new-group-button {
  min-height: 16px;
  padding: 2px 3px;
  font-size: 9px;
}

html[data-preview-size="phone"] .annotation-card.editing .description-input {
  min-height: 34px;
  max-height: 42px;
  font-size: calc(8px * var(--card-type-scale, 1));
  resize: none;
}

html[data-preview-size="phone"] .annotation-card.editing .card-actions {
  gap: 4px;
  margin-top: 4px;
}

html[data-preview-size="phone"] .annotation-card.editing .card-actions button {
  min-height: 22px;
  padding: 2px 4px;
  font-size: 9px;
}

html[data-preview-size="phone"] .image-nav-group {
  display: none !important;
}

html[data-preview-size="phone"] .image-viewer-trash {
  display: none !important;
}

/* Phone Edit keeps its scope inside the deck. Its panel is the scroll region
   and sizes itself from the keyboard-aware dynamic viewport, not a fixed
   device height. The fixed close control remains reachable while scrolling. */
html[data-preview-size="phone"] .card-deck {
  height: 100dvh;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

html[data-preview-size="phone"] .card-deck-panel {
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

html[data-preview-size="phone"] .card-deck-close {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
}

html[data-preview-size="phone"] .image-indicators {
  bottom: 3px;
  gap: 2px;
  padding: 2px 3px;
}

html[data-preview-size="phone"] .image-dot {
  width: 5px;
  height: 5px;
  min-width: 5px;
  min-height: 5px;
}

/* Foreground project-file transfer progress. */
.project-import-progress-backdrop,
.project-transfer-progress-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 0.28);
  backdrop-filter: blur(2px);
}
.project-import-progress,
.project-transfer-progress {
  width: min(440px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  padding: 20px;
  border-radius: 12px;
  background: var(--surface, #fff);
  color: var(--text, #1f2937);
  box-shadow: 0 18px 60px rgb(0 0 0 / 0.22);
}
.project-import-progress strong,
.project-transfer-progress strong { font-size: 16px; }
.project-import-file,
.project-import-bytes,
.project-transfer-file,
.project-transfer-bytes { font-size: 12px; opacity: 0.7; overflow-wrap: anywhere; }
.project-import-stage,
.project-transfer-stage { font-size: 14px; font-weight: 600; }
.project-import-progress progress,
.project-transfer-progress progress { width: 100%; height: 10px; }
.project-import-progress button,
.project-transfer-progress button { justify-self: end; }
.callio-demo-warning {
  margin: 0;
  color: var(--accent);
  font: 650 11px/1.25 system-ui, sans-serif;
  pointer-events: none;
}

/* Demo status shares the canvas corner with the edit-state message, instead
 * of competing with the project title and drawing controls. */
.workspace-status-notices {
  position: absolute;
  z-index: 75;
  top: 5px;
  left: 5px;
  display: grid;
  gap: 3px;
  max-width: min(360px, calc(100% - 10px));
  padding: 5px;
  border: 1px solid rgb(255 255 255 / 62%);
  border-radius: 8px;
  background: rgb(226 232 240 / 72%);
  box-shadow: 0 3px 12px rgb(15 23 42 / 14%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

.workspace-status-notices .edit-mode-indicator {
  position: static;
  margin: 0;
  color: var(--navy-soft);
}

.callio-demo-sign-in {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(15 23 42 / 76%);
}

.callio-demo-sign-in[hidden] { display: none !important; }

.callio-demo-sign-in > div {
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  padding: 28px;
  border-radius: 16px;
  background: #fff;
  color: #172033;
  box-shadow: 0 24px 60px rgb(0 0 0 / 30%);
}

.callio-demo-sign-in h1,
.callio-demo-sign-in p { margin: 0; }
.callio-demo-progress { height: 8px; overflow: hidden; border-radius: 999px; background: #e2e8f0; }
.callio-demo-progress span { display: block; width: 42%; height: 100%; border-radius: inherit; background: #c84f2f; animation: callio-demo-progress 1.25s ease-in-out infinite alternate; }
.callio-demo-progress ~ p { color: #526077; font-size: 14px; }
@keyframes callio-demo-progress { from { transform: translateX(-45%); } to { transform: translateX(150%); } }
.callio-demo-sign-in-error { min-height: 1.2em; color: #b42318; }

/* A disposable-demo session is created before project hydration.  Keep the
 * empty Callio workspace visible during that round trip rather than hiding
 * the entire document under the standard first-paint guard. */
body.callio-booting.callio-demo-booting { visibility: visible; }
body.callio-booting.callio-demo-booting #appWorkspace { opacity: .56; pointer-events: none; }
body.callio-booting.callio-demo-booting .callio-demo-sign-in {
  inset: auto 20px 20px auto;
  display: block;
  width: min(360px, calc(100vw - 40px));
  padding: 0;
  background: transparent;
}
body.callio-booting.callio-demo-booting .callio-demo-sign-in > div {
  gap: 10px;
  padding: 18px;
  border: 1px solid rgb(148 163 184 / 75%);
  box-shadow: 0 12px 32px rgb(15 23 42 / 24%);
}