/* ============================================================
   Damage Code Tool - Desktop Shell
   This tool is a phone tool: the whole flow (part -> zone -> type
   -> hours) is built for one-handed use while QC'ing a part. On a
   desktop browser we say so up front and then run the real thing
   at phone width inside a same-origin iframe.

   Why an iframe and not a width-capped column: every mobile rule in
   damage-code.css (and the shared nav) is a `@media (max-width:768px)`
   query, and media queries read the VIEWPORT, not the container. A
   430px-wide div on a 1440px screen still gets desktop layout. The
   iframe gives the mobile stylesheet a genuinely 430px viewport, so
   the phone flow renders exactly as it does on a phone with zero
   changes to the load-bearing mobile CSS/JS.

   Visibility is media-query driven (>=769px only), so resizing the
   window swaps between shell and real page with no reload.
   ============================================================ */

:root {
  /* Frame width. 430px = iPhone 16 Pro Max logical width, the widest
     common phone. Raise toward 768px (the mobile breakpoint) if you
     want the tool to fill more of the desktop screen. */
  --dc-frame-width: 430px;
}

.dc-desktop-shell { display: none; }

/* Never show the shell when this page is itself inside a frame:
   soldaudit and locationaudit both embed ?embedded=1 in a modal, and
   dc-embedded is set by the head script when window.self !== window.top. */
.dc-embedded .dc-desktop-shell { display: none !important; }

@media (min-width: 769px) {
  /* Hide the real (desktop-layout) app behind the shell. It stays in the
     DOM so that shrinking the window back below 769px restores it. */
  html:not(.dc-embedded) body.dc-shell-active .app { display: none; }
  html:not(.dc-embedded) body.dc-shell-active .dc-desktop-shell { display: block; }
}

/* ---------- Shell frame area ---------- */
.dc-shell-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 20px 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Persistent slim reminder above the phone, so the message survives
   dismissing the overlay. */
.dc-shell-banner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--brand-header-gradient);
  border: 1px solid var(--border);
  border-bottom: 2px solid var(--brand-red);
  box-sizing: border-box;
}

.dc-shell-banner-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.8);
}

.dc-shell-banner-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.45;
}

.dc-shell-banner-text strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1px;
}

.dc-shell-banner-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.dc-shell-btn {
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-family: inherit;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.dc-shell-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.34);
}

.dc-shell-btn-primary {
  background: var(--brand-red);
  border-color: var(--brand-red);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.dc-shell-btn-primary:hover {
  background: var(--brand-red-deep, #991B1B);
  border-color: var(--brand-red-deep, #991B1B);
}

/* ---------- Phone ---------- */
.dc-phone {
  width: var(--dc-frame-width);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-medium);
}

.dc-phone-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: var(--row-alt);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.dc-phone-chrome::before {
  content: '';
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  flex-shrink: 0;
}

.dc-phone-width {
  margin-left: auto;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--muted);
  opacity: 0.75;
}

.dc-phone-frame {
  display: block;
  width: 100%;
  /* Leave room for the topbar, banner and phone chrome; cap so the frame
     stays a plausible phone on very tall monitors. */
  height: min(880px, calc(100vh - 190px));
  min-height: 460px;
  border: 0;
  background: var(--bg);
}

/* ---------- Overlay message ---------- */
.dc-shell-overlay {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 13, 29, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.dc-shell-overlay[hidden] { display: none; }

.dc-shell-card {
  width: 100%;
  max-width: 460px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.dc-shell-card-header {
  padding: 14px 20px;
  background: var(--brand-header-gradient);
  border-bottom: 2px solid var(--brand-red);
}

.dc-shell-card-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 3px;
}

.dc-shell-card-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
}

.dc-shell-card-body {
  padding: 18px 20px;
}

.dc-shell-card-body p {
  margin: 0 0 12px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}

.dc-shell-card-body p:last-child { margin-bottom: 0; }

.dc-shell-card-note {
  color: var(--muted) !important;
  font-size: 12px !important;
}

.dc-shell-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 20px 18px;
}

.dc-shell-card-actions .dc-shell-btn {
  color: var(--text);
  background: transparent;
  border-color: var(--border);
}

.dc-shell-card-actions .dc-shell-btn:hover {
  background: var(--row-hover);
  border-color: var(--muted);
}

.dc-shell-card-actions .dc-shell-btn-primary,
.dc-shell-card-actions .dc-shell-btn-primary:hover {
  color: #fff;
  background: var(--brand-red);
  border-color: var(--brand-red);
}

.dc-shell-card-actions .dc-shell-btn-primary:hover {
  background: var(--brand-red-deep, #991B1B);
  border-color: var(--brand-red-deep, #991B1B);
}

/* Copy-link confirmation swap */
.dc-shell-btn.is-copied {
  background: var(--success, #16a34a) !important;
  border-color: var(--success, #16a34a) !important;
  color: #fff !important;
}