:root {
  --bar-bg: #f6f1e7;
  --bar-edge: #d8d0bf;
  --ink: #3a352c;
  --ink-soft: #7a7263;
  --accent: #a66622; /* logo marigold */
  --card: #fffdf8;
  --shadow: 0 4px 18px rgba(20, 16, 8, 0.28);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Our #id display rules would otherwise beat the UA's [hidden] rule. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #28251f;
  font-family: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

/* ---------- brand wordmark behind the canvas ----------
   Visible twice: full-color and animated while the page loads (the canvas
   hasn't painted yet), then calm and dim behind the transparent backdrop,
   peeking out when the page is shrunk, rotated, or slid aside. */
#brand-splash {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05em;
  pointer-events: none;
  font-weight: 800;
  font-size: clamp(40px, 9vw, 92px);
  letter-spacing: 0.04em;
  line-height: 1.04;
  opacity: 0.4;
  transition: opacity 900ms ease;
}
#brand-splash span {
  background: linear-gradient(100deg,
    #d98a3a 0%, #c15b5b 28%, #8a6aa1 55%, #4a8f6f 80%, #d98a3a 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#brand-splash.loading {
  opacity: 1;
  animation: splash-breathe 2.4s ease-in-out infinite;
}
#brand-splash.loading span {
  animation: splash-slide 3.2s linear infinite;
}
@keyframes splash-slide {
  from { background-position: 0% 0; }
  to { background-position: 300% 0; }
}
@keyframes splash-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  #brand-splash.loading, #brand-splash.loading span { animation: none; }
}

/* ---------- top palette bar ---------- */
#palette-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(26px, 40px));
  justify-content: center;
  gap: 5px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 9px;
  background: var(--bar-bg);
  border-bottom: 1px solid var(--bar-edge);
  box-shadow: 0 2px 10px rgba(20, 16, 8, 0.18);
  z-index: 10;
}

.family {
  aspect-ratio: 1;
  width: 100%;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14), 0 1px 2px rgba(20,16,8,0.15);
  transition: transform 80ms ease;
}
.family:active { transform: scale(0.92); }
/* The family the current color came from — a glance-back beacon. */
.family.current {
  outline: 2.5px solid #6b4a2f;
  outline-offset: 1.5px;
}

/* ---------- shade popup ---------- */
#shade-popup {
  position: absolute;
  z-index: 40;
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px;
  width: min(92vw, 340px);
}
#shade-popup h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 9px;
}
.shade-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.shade {
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  border-radius: 9px;
}
.shade .chip {
  width: 100%;
  height: 42px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
.shade.selected .chip { outline: 3px solid var(--accent); outline-offset: 1px; }
.shade .shade-name {
  font-size: 10.5px;
  color: var(--ink-soft);
  line-height: 1.15;
  text-align: center;
}
.shade.selected .shade-name { color: var(--ink); font-weight: 600; }

/* ---------- bottom toolbar ---------- */
#toolbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 8px);
  background: var(--bar-bg);
  border-top: 1px solid var(--bar-edge);
  box-shadow: 0 -2px 10px rgba(20, 16, 8, 0.18);
  z-index: 10;
}

.tb-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

#current-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 118px;
}
#current-chip {
  width: 34px; height: 34px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
  flex: none;
}
#current-name {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  max-width: 86px;
}

.tb-btn {
  height: 38px;
  min-width: 38px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 100ms ease;
}
.tb-btn:active { background: rgba(0,0,0,0.08); }
.tb-btn.active { background: #e8e0cf; box-shadow: inset 0 0 0 1.5px var(--accent); }
.tb-btn:disabled { opacity: 0.32; cursor: default; }
.tb-btn svg { display: block; }

.size-dot { border-radius: 50%; background: var(--ink); }

.pressure-btn { padding: 2px; min-width: 38px; }
.pressure-btn canvas { border-radius: 7px; display: block; }
.erase-btn.active { background: #fbe9ee; box-shadow: inset 0 0 0 1.5px #e77b96; }

/* Trash: an ACTION living beside the mode buttons — gapped so an eraser
   miss lands on the harmless side, quietly danger-ringed, never .active. */
.trash-btn { margin-left: 10px; box-shadow: inset 0 0 0 1.5px rgba(179, 69, 47, 0.35); color: #9a5544; }
.trash-btn:active { background: #f7e5e0; }

/* The print-only image IS the printed document; on screen it never shows.
   Sized in real inches, not width:100% — a fluid image re-fits itself to
   whatever page box the print dialog makes, so Custom Scale appears dead
   (found on an HP dialog 2026-09-13). A fixed 7in square centers on letter
   and A4 with fair margins, scales when asked, and the max-width guard
   only re-fits on paper smaller than the image. */
#print-img { display: none; }
@media print {
  @page { margin: 0.5in; }
  body > :not(#print-img) { display: none !important; }
  /* 0.5in sheet margin + 1.5in offset = 2in above the 7in square, which
     is dead center on letter (11 - 7 = 4in of air, split evenly) and a
     pleasing optical-center on A4. The offset lives on the image, not
     the page, so it survives whatever margins a printer dialog imposes. */
  #print-img { display: block; width: 7in; max-width: 100%; margin: 1.5in auto 0; }
}

.tb-sep {
  width: 1px;
  height: 26px;
  background: var(--bar-edge);
}

.tray-square {
  background: #fff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.tray-square svg { width: 60%; height: 60%; display: block; }

.popup-note {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.35;
  margin: -4px 0 9px;
}

.shade .chip { position: relative; }
.x-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  line-height: 19px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(20, 16, 8, 0.35);
  pointer-events: none;
}

/* ---------- modal ---------- */
#modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(24, 20, 12, 0.5);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}
#modal {
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 20px;
  width: min(86vw, 320px);
}
#modal-text { font-size: 14.5px; line-height: 1.45; margin-bottom: 16px; }
.modal-buttons { display: flex; gap: 10px; justify-content: flex-end; }
.modal-buttons button {
  border: none;
  border-radius: 9px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  background: #ece5d6;
  color: var(--ink);
}
.modal-buttons button.danger { background: var(--accent); color: #fff; }

/* ---------- tuning panel ---------- */
#tune-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(88vw, 320px);
  background: rgba(24, 22, 16, 0.93);
  color: #e8e2d2;
  z-index: 50;
  overflow-y: auto;
  padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 20px);
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: 12px;
  -webkit-user-select: text;
  user-select: text;
}
#tune-panel h2 { font-size: 13px; margin: 4px 0 10px; color: #f0c9a8; }
#tune-panel details { margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.09); padding-bottom: 8px; }
#tune-panel summary { cursor: pointer; font-weight: 600; padding: 4px 0; color: #d9cfb8; }
.tune-row { display: grid; grid-template-columns: 1fr 46px; align-items: center; gap: 8px; margin: 6px 0; }
.tune-row label { display: block; color: #a89f8c; margin-bottom: 2px; }
.tune-row input[type=range] { width: 100%; }
.tune-row .val { text-align: right; color: #fff; }
#tune-panel textarea {
  width: 100%;
  height: 110px;
  background: #14120d;
  color: #cfe3c8;
  border: 1px solid #444;
  border-radius: 6px;
  font-family: inherit;
  font-size: 11px;
  padding: 6px;
}
#tune-panel .tune-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
#tune-panel .tune-actions button {
  background: #3a352a;
  color: #e8e2d2;
  border: 1px solid #565040;
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 11.5px;
  cursor: pointer;
}

#fatal {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: #28251f;
  color: #f6f1e7;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-size: 15px;
  line-height: 1.5;
}