/* ═══════════════════════════════════════════════════════════════
   IA Mapper — UI Skin
   Tactile retro shell built around #A57865 (warm terracotta).
   Loaded after style.css; overrides --c-* tokens and adds
   surface treatments. Does NOT touch .pnav-*, .pmob-*, or
   any .site-header--* rules — the preview area is untouched.
   ═══════════════════════════════════════════════════════════════ */

/* ── Warm palette token overrides ───────────────────────────── */
:root {
  /* Core accent — terracotta */
  --c-accent:        #A57865;   /* borders, indicators, non-text accents */
  --c-accent-light:  #F3EBE6;   /* hover / active tint backgrounds */
  --c-accent-dark:   #7D5748;   /* button fills, pressed states (contrast-safe) */

  /* Warm neutrals */
  --c-bg:            #EDEBE7;   /* page / canvas background */
  --c-surface:       #F5F3EF;   /* cards, panels, inputs */
  --c-border:        #CFC5BB;   /* default borders */
  --c-border-strong: #A8998E;   /* emphasis borders */

  /* Warm text */
  --c-text:          #261D18;   /* primary text */
  --c-text-muted:    #5C3D2F;   /* secondary text — 7.3:1 on --c-bg, AAA */

  /* Nested element cards */
  --c-nested-bg:     #EDE5DF;

  /* Warm-tinted shadows (swap blue-gray shadow tint for brown) */
  --shadow-xs:   0 1px 2px rgba(80,45,25,.07);
  --shadow-sm:   0 2px 6px rgba(80,45,25,.10), 0 1px 2px rgba(80,45,25,.06);
  --shadow-md:   0 4px 16px rgba(80,45,25,.13), 0 2px 4px rgba(80,45,25,.07);
  --shadow-lift: 0 8px 24px rgba(80,45,25,.22);
}

/* ── App header — top rail ──────────────────────────────────── */
#app-header {
  background: #DDD8D2;
  border-bottom-color: var(--c-border-strong);
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, var(--shadow-xs);
}

/* App name: primary text — 11.7:1 on header bg, AAA */
.app-name { color: var(--c-text); }

/* ── Buttons ────────────────────────────────────────────────── */

/* Plain icon/text buttons */
.btn:hover:not(:disabled) {
  background: var(--c-accent-light);
  color: var(--c-text);
}

/* Primary — warm brown fill, tactile press.
   #5C3D2F gives 9.7:1 with white text — AAA. */
.btn--primary {
  background: #5C3D2F;
  color: #ffffff;
  border-color: #3D2317;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 2px 4px rgba(80,45,25,.22);
}
.btn--primary:hover:not(:disabled) {
  background: #3D2317;
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 1px 2px rgba(80,45,25,.18);
}
.btn--primary:active:not(:disabled) {
  box-shadow: 0 1px 3px rgba(80,45,25,.25) inset;
  transform: translateY(1px);
}

/* Ghost — clearly a surface, not a ghost */
.btn--ghost {
  background: var(--c-surface);
  border-color: var(--c-border-strong);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, var(--shadow-xs);
}
.btn--ghost:hover:not(:disabled) {
  background: var(--c-accent-light);
  border-color: var(--c-accent);
  color: #5C3D2F;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, var(--shadow-xs);
}
.btn--ghost:active:not(:disabled) {
  box-shadow: 0 1px 2px rgba(80,45,25,.18) inset;
  transform: translateY(1px);
}

/* ── Preview area — dark stage, white viewport ──────────────── */
#preview-section {
  background: #252120;
  border-bottom: none;
  padding-bottom: 28px;
}

.preview-bar {
  background: #252120;
  border-bottom-color: rgba(255,255,255,.08);
  padding-left: 24px;
  padding-right: 24px;
}

.preview-bar__sep { background: rgba(255,255,255,.15); }

/* White page card — nav renders on a realistic light background */
#preview-frame {
  margin: 0 24px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.22);
}

/* ── Theme + viewport toggle buttons (on dark bar) ───────────── */
/* Inactive: 75% white on #252120 = 9.5:1 — AAA
   Active:   #fff on #5C3D2F    = 9.7:1 — AAA  */
.theme-btn {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.75);
  box-shadow: none;
}
.theme-btn:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.30);
  color: #ffffff;
  box-shadow: none;
}
.theme-btn.active, .theme-btn[aria-pressed="true"] {
  background: #5C3D2F;
  border-color: #3D2317;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(80,45,25,.28) inset;
}

/* ── Preview option toggles (Utility bar) on dark bar ───────── */
.preview-opt-btn {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.60);
  box-shadow: none;
}
.preview-opt-btn:hover:not(:disabled) {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.30);
  color: rgba(255,255,255,.92);
}
.preview-opt-btn.active,
.preview-opt-btn[aria-pressed="true"] {
  background: rgba(165,120,101,.28);
  color: #E8C8B8;
  border-color: var(--c-accent);
  border-style: solid;
}

/* ── Site name input focus ring (in AM header, light bg) ─────── */
.preview-sitename__input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px rgba(165,120,101,.22);
}

/* ── Element box input focus ring ───────────────────────────── */
#eb-input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(165,120,101,.20);
}

/* ── Element box card — raised tile ─────────────────────────── */
.eb-card {
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  border-color: var(--c-border);
}
.eb-card:hover {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-md);
}
.eb-card:focus-within {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(165,120,101,.22);
}
.eb-card[draggable="true"]:active {
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

/* Drag handle: warm when visible */
.drag-handle { color: var(--c-border-strong); }
.eb-card:hover .drag-handle,
.am-card:hover .drag-handle { color: var(--c-accent); }

/* ── Architecture map canvas ────────────────────────────────── */
#architecture-map { background: var(--c-bg); }

/* Drag canvas background — warm tint during drag */
body.is-dragging #am-canvas,
body.is-kb-moving #am-canvas { background: var(--c-accent-light); }

/* ── AM card ────────────────────────────────────────────────── */
.am-card:focus-within {
  box-shadow: 0 0 0 3px rgba(165,120,101,.22);
}
.am-card.kb-selected {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(165,120,101,.28);
  background: var(--c-accent-light);
}
/* Nested card: warm border instead of hardcoded blue */
.am-card.is-nested { border-color: var(--c-border); }

/* Drop nest target */
.am-card.drop-nest-target {
  outline-color: var(--c-accent);
  background: var(--c-accent-light) !important;
}

/* ── Drop line ──────────────────────────────────────────────── */
.am-drop-line            { background: var(--c-accent-dark); }
.am-drop-line::before    { background: var(--c-accent-dark); }

/* ── Drop zone (empty root target) ─────────────────────────── */
.drop-zone--root.drag-over,
.drop-zone--root.kb-highlight {
  background: var(--c-accent-light);
  border-color: var(--c-accent);
}

/* ── AM status line ─────────────────────────────────────────── */
.am-status { color: var(--c-text-muted); }

/* ── Tree children connector line ───────────────────────────── */
.tree-children { border-left-color: var(--c-border); }
.tree-node:hover > .tree-children { border-left-color: var(--c-accent); }

/* ── Utility zone dashed divider ────────────────────────────── */
.am-col--utility { border-left-color: var(--c-border); }

/* ── Collapsed badge ────────────────────────────────────────── */
.collapsed-badge {
  background: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text-muted);
}

/* ── Dialogs ────────────────────────────────────────────────── */
dialog { background: var(--c-surface); }
dialog::backdrop { background: rgba(38,29,24,.52); }

/* ── kbd shortcuts ──────────────────────────────────────────── */
kbd {
  background: var(--c-surface);
  border-color: var(--c-border-strong);
  box-shadow: 0 1px 0 var(--c-border-strong);
}

/* ── Scrollbars ─────────────────────────────────────────────── */
::-webkit-scrollbar-thumb { background: var(--c-border-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--c-text-muted); }

/* ── Default preview nav: warm hover tint ───────────────────── */
/* The default (non-themed) nav uses --c-accent for hover color
   and a hardcoded #EBF4FF for hover background — replace the
   background with our warm equivalent so nothing looks out of place. */
.pnav-sub li:hover > .pnav-item,
.pmob-nav li:hover > .pmob-item { background: var(--c-accent-light); }

/* ── Edit mode button — active state ───────────────────────── */
/* #fff on #5C3D2F = 9.7:1 — AAA */
#am-controls-btn[aria-pressed="true"] {
  background: #5C3D2F;
  border-color: #3D2317;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(80,45,25,.28) inset;
}
#am-controls-btn[aria-pressed="true"]:hover {
  background: #3D2317;
  color: #ffffff;
}

/* ── Card controls: hidden by default, revealed via toggle ──── */
/* Keyboard shortcuts (B, Del, E) remain fully functional regardless.
   Action buttons are tabindex="-1" so display:none has no a11y impact. */
.am-card-actions { display: none; }

#am-canvas.am-show-controls .am-card-actions {
  display: flex;
}
/* In show-controls mode, make icons always visible (not hover-only) */
#am-canvas.am-show-controls .am-action-btn {
  color: var(--c-text-muted);
}
/* Danger hover must beat the high-specificity always-visible rule above */
#am-canvas.am-show-controls .am-action-btn--danger:hover {
  background: var(--c-danger-light);
  color: var(--c-danger);
}


/* ── Panel / zone label sizes — nudge smallest text up ──────── */
.panel-title        { font-size: .8rem; }
.preview-control-label { font-size: .8rem; }
.am-zone-label      { font-size: .78rem; }
.shortcut-section-title { font-size: .78rem; }
.preview-empty      { font-size: .88rem; }
.hint-text          { font-size: .8rem; }
.kb-hint            { font-size: .85rem; }

/* ── Theme buttons: slightly larger tap targets ───── */
.theme-btn { font-size: .8rem; }

/* ── Focus ring ─────────────────────────────────────────────── */
:focus-visible { outline-color: var(--c-accent-dark); }