/* Reskins the ported DesignPro tool (css/design-pro-tw.css, css/design-pro.css)
   to match the 2026 site's design system without touching design-pro.js,
   which drives the tool via these exact Tailwind utility class names. Loaded
   last so these rules win the cascade over the generated Tailwind output. */

/* Login gate (see the inline script at the bottom of designpro.html):
   the tool is hidden by default — #workspace's ID specificity (1,0,0)
   beats its own Tailwind "flex" class (0,1,0) — and only revealed once
   designpro-status.php / designpro-verify-code.php confirm a valid
   dmg_designpro_access cookie and JS adds dp-unlocked to <html>.
   design-pro.js still builds the tool's DOM on load regardless; it's just
   not visible until then. */
#workspace {
  display: none;
}

html.dp-unlocked #workspace {
  display: flex;
}

/* .hidden (Tailwind, css/design-pro-tw.css) has equal specificity (0,1,0) to
   .canvas-wrapper's own display:inline-block (css/design-pro.css) — and
   since design-pro.css loads after design-pro-tw.css, .canvas-wrapper was
   silently winning the cascade, so toggling the hidden class on
   #canvas-wrapper never actually hid it. Compound selector (0,2,0) wins
   regardless of stylesheet order. */
.canvas-wrapper.hidden {
  display: none;
}

/* Site uses flat/sharp corners everywhere (--radius: 0 in css/style.css);
   the tool's Tailwind build rounds buttons/panels/inputs. rounded-full is
   left alone — it's used for genuinely circular dots (balance/true-center). */
.rounded-sm,
.rounded-l-sm,
.rounded-r-sm {
  border-radius: 0;
}

/* Tailwind bakes custom colors in as literal rgb(), not var() — these two
   don't pick up the :root edits in css/design-pro.css, so they're realigned
   here to the site's --surface-0 / --border-default values by hand. */
.bg-darkBg {
  background-color: #0D0D0D;
}

.border-borderDark {
  border-color: rgba(255, 255, 255, 0.12);
}

.bg-borderDark {
  background-color: rgba(255, 255, 255, 0.12);
}

/* "DesignPro" wordmark: bold two-tone brand mark ("Design" white, "Pro"
   gold) shared by the app header <h1> and the login modal <h2> (both carry
   .dp-word, with "Pro" wrapped in .dp-word-pro). Deliberately only sets
   weight/tracking/color, not font-size — each host keeps its own size
   (the header's text-sm, the modal's .modal-ttl 1.25rem). */
.dp-word {
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text-primary);
}

.dp-word-pro {
  color: var(--brand-accent);
}

/* Back-to-Solutions: icon-only arrow (kept minimal so it doesn't compete
   with the DesignPro wordmark next to it) instead of the ported tool's
   plain gray Tailwind text link. Points at /solutions — the only page
   DesignPro is ever launched from (solutions.json's buttonHref) — matching
   #mobile-wall-back's own "Back to Solutions" link below. The SVG uses
   stroke="currentColor", so this color + hover transition apply to the
   icon directly. */
.designpro-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-secondary);
  transition: color var(--motion-base) var(--ease-out);
}

.designpro-home-link:hover {
  color: var(--brand-accent);
}

/* "Report an issue" trigger — opens #dp-bug-modal. Kept understated (small,
   muted-until-hover) since most visits won't need it. */
.dp-bug-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--motion-base) var(--ease-out);
}

.dp-bug-trigger:hover {
  color: var(--brand-accent);
}

/* Bug-report modal: the textarea reads left-aligned (unlike .modal-inp's
   default center alignment, which only suits the short single-line inputs
   elsewhere in this modal family). */
.dp-bug-textarea {
  text-align: left;
  resize: vertical;
  margin-top: var(--space-2);
}

.dp-bug-ok {
  color: var(--signal-success);
}

/* Per-lens control-panel title (e.g. "LAYOUT GRID", injected once per
   lens switch by activateTool() in design-pro.js). #control-panel h2 is
   collision-free: design-pro.js contains exactly one <h2> in the whole
   file, always injected here. */
#control-panel h2 {
  color: var(--brand-accent);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.9375rem;
  line-height: 1.3;
  margin-bottom: 0.375rem;
}

/* Micro labels: unify the 8/9/10px Tailwind variants at a readable 10px.
   .text-xs is deliberately left unmapped — Tailwind's native 12px is the
   correct app label size. */
.text-\[10px\],
.text-\[9px\],
.text-\[8px\] {
  font-size: 10px;
}

/* The only 2 of .text-lg's 6 uses that are real text (drop-zone title,
   canvas ratio readout) — the other 4 are icon-glyph sizing. */
#drop-title,
#m-ratio {
  font-size: 0.875rem;
}

/* Chrome density: header 64px -> 48px toolbar. The workspace and canvas
   height calcs hardcode the old 4rem header, so all three must move
   together. #workspace (ID, 1,0,0) beats Tailwind's h-[calc(100vh-4rem)]
   class; #main-canvas wins over design-pro.css's identical-specificity
   rule purely on source order — keep this file loaded last. */
header.h-16 {
  height: 3rem;
}

header.h-16 .h-6 {
  height: 1rem;
}

/* Footer strip added below #workspace — its natural padding-driven height
   (fine on the scrolling marketing pages) would make the 100vh budget
   below unpredictable, so it's pinned to a known, compact value instead,
   matching the header's own 4rem->3rem density override above. Selector
   scoped to this page's structure (#workspace's sibling) so the shared
   .site-footer class keeps its normal look everywhere else. */
#workspace + .site-footer {
  height: 2.25rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* #workspace (ID, 1,0,0) beats Tailwind's h-[calc(100vh-4rem)] class;
   #main-canvas wins over design-pro.css's identical-specificity rule
   purely on source order — keep this file loaded last. Both figures must
   move together with the header height above and the footer height
   below: design-pro.js applies no JS-computed sizing of its own (see
   drawOriginalToCanvas() in js/design-pro.js, which clears any inline
   max-height so this exact calc() takes over as a plain CSS constraint). */
#workspace {
  height: calc(100vh - 3rem - 2.25rem);
}

#main-canvas {
  max-height: calc(100vh - 3rem - 2.25rem);
}

/* Panel widths. w-72/w-96 appear only in the static HTML (verified not
   used by design-pro.js), so resizing via ID scope is safe. */
#workspace > nav {
  width: 15rem;
}

#control-panel {
  width: 20rem;
}

/* Density inside the panels — scoped by ID so JS-injected class combos
   elsewhere are untouched. */
#nav-container > button {
  padding: 0.5rem 0.75rem;
}

#nav-container .gap-4 {
  gap: var(--space-3);
}

#workspace nav > div.font-black.text-gray-500 {
  padding: 0.75rem 1rem;
}

#control-panel .p-8 {
  padding: 1.25rem;
}

#control-panel .space-y-8 > * + * {
  margin-top: 1.25rem;
}

#control-panel button.py-4 {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

#control-panel input.p-3 {
  padding: var(--space-2) var(--space-3);
}

/* Drop-zone sizing: the viewer's empty state (was a small card slab inside
   the old #upload-screen; now sized generously within the flex-centered
   #viewer-container instead of a fixed 9rem card height). */
#drop-zone {
  width: min(32rem, 70%);
  min-height: 60%;
  padding: 2rem;
}

/* Real mono stack for data readouts — the 'JetBrains Mono' named in
   design-pro.css is never actually loaded by any font request. */
.font-mono,
.guide-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Version badge in the app header ("Design Pro v1.0"). */
.dp-version {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 0.5rem;
}

/* ---- Homepage interaction language ---------------------------------- */

/* Focus rings: the site's shared keyboard-focus treatment (.text-btn,
   .back-home-link, .nav-toggle all use outline:none + --focus-ring). */
.designpro-home-link:focus-visible,
#btn-new:focus-visible,
#control-panel button:focus-visible,
#control-panel input:focus-visible,
#control-panel select:focus-visible,
#nav-container > button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* The drop zone is a <label> wrapping a hidden file input — surface the
   ring on the visible label when the input has keyboard focus. */
#drop-zone:focus-within {
  box-shadow: var(--focus-ring);
}

/* Input focus language, mirroring the site's .modal-inp: border warms to
   gold on focus. (Most tool inputs already carry Tailwind's focus:border-dmg;
   this makes it universal and gives it the site's timing curve.) */
#control-panel input,
#control-panel select {
  transition: border-color var(--motion-fast) var(--ease-out);
}

#control-panel input:focus,
#control-panel select:focus {
  border-color: var(--brand-accent);
}

#control-panel input[type="range"] {
  accent-color: var(--brand-accent);
}

/* Buttons: site motion tokens instead of Tailwind's stock transition-colors
   timing, so state changes feel like the rest of the site. */
#btn-new,
#control-panel button,
#nav-container > button {
  transition: background-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}

/* "Lenses (10)" nav kicker: match the gold .text-dmg kicker language used
   elsewhere in the panel. Scoped (not a bare .font-black.text-gray-500)
   because design-pro.js injects 3 more elements with this exact class combo
   into #control-panel for per-lens kickers, which must stay untouched
   (out of scope: workspace layout internals). */
#workspace nav > div.font-black.text-gray-500 {
  /* Same slightly-dimmed gold as the homepage's .section-eyebrow. */
  color: color-mix(in srgb, var(--brand-accent) 80%, black 20%);
}