/* Demo-only additions. The main interface is styled by the real Proofello app stylesheet. */
.proofello-brand-mark { overflow:hidden; background:transparent !important; }
.proofello-brand-mark img { width:100%; height:100%; border-radius:inherit; object-fit:cover; background:transparent !important; }
.public-proofello-brand{display:grid;justify-items:center;gap:7px;margin:28px -4px -4px;padding:22px 18px 4px;border-top:1px solid var(--line-soft);color:#667085;text-align:center}.public-proofello-brand a{display:inline-flex;align-items:center;gap:9px;color:#344054;font-size:14px;text-decoration:none}.public-proofello-brand img{width:28px;height:28px;border-radius:9px}.public-proofello-brand small{color:#98a2b3;font-size:11px}
.topbar-actions a { text-decoration: none; }
.demo-mode-pill { display:inline-flex; padding:6px 10px; border-radius:999px; background:#fff7ed; color:#b45309; font-size:11px; font-weight:900; }
.sidebar-card > small { display:block; line-height:1.45; }

.proofello-shell.customer-mode { display:block; min-height:100vh; }
.proofello-shell.customer-mode > .sidebar,
.proofello-shell.customer-mode > .main > .topbar { display:none; }
.proofello-shell.customer-mode > .main { padding:0; }
.public-header-actions { display:flex; align-items:center; gap:10px; }
.public-proof-watermark { display:none; }
.proof-magnifier-hint { position:absolute; left:14px; bottom:14px; z-index:3; padding:7px 10px; border:1px solid rgba(16,24,40,.08); border-radius:999px; background:rgba(255,255,255,.84); color:#667085; font-size:11px; font-weight:850; }
.decision-closed-panel.changes { border-color:rgba(217,119,6,.18); background:#fff7ed; color:#92400e; }
.customer-decision-actions { margin-top:14px; }
.attachment-item { padding:7px 9px; border-radius:9px; background:#f2f4f7; color:#344054; font-size:11px; font-weight:750; }

.revision-reference-panel .demo-reference-image { width:100%; height:150px; object-fit:contain; border-radius:12px; background:#fff; }
.revision-reference-panel .empty-reference-card { min-height:210px; align-content:center; }
.item-page-pill img { width:34px; height:34px; object-fit:contain; border-radius:9px; background:#f2f4f7; }
.item-page-pill { grid-template-columns:34px minmax(90px,1fr); }
.status-icon.sent,.status-icon.awaiting_proof { background:#98a2b3; }
.status-icon.viewed { background:var(--accent); }
.layer-inline-controls { display:grid; gap:8px; margin:-2px 0 2px; padding:10px; border:1px solid var(--line-soft); border-radius:13px; background:#fff; }
.layer-color-control { display:grid; grid-template-columns:42px minmax(0,1fr); gap:8px; }
.layer-color-control input[type=color] { width:42px; height:42px; padding:2px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.rgb-control-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.rgb-control-grid label span { display:block; color:var(--muted); font-size:10px; font-weight:850; }
.rgb-control-grid .field { min-height:36px; padding:6px 8px; }
.layer-grip { width:8px; height:18px; opacity:.55; background:radial-gradient(circle,#98a2b3 1.3px,transparent 1.4px); background-size:4px 4px; }
.canvas-frame canvas { background:#fff; }
.color-picker-lens { position:absolute; z-index:20; display:none; grid-template-columns:22px auto; align-items:center; gap:7px; padding:7px; border-radius:999px; background:#fff; box-shadow:0 14px 32px rgba(16,24,40,.18); pointer-events:none; }
.color-picker-lens.is-visible { display:grid; }
.color-picker-lens span { width:22px; height:22px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(16,24,40,.2); }
.color-picker-lens strong { font-size:11px; }
.picked-color-card { grid-template-columns:34px minmax(0,1fr) auto; }

.demo-billing-heading { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:24px; }
.demo-billing-heading h2 { margin-bottom:6px; }
.demo-billing-heading p { margin:0; color:#667085; }
.demo-billing-toggle { display:flex; flex:0 0 auto; gap:4px; padding:4px; border-radius:999px; background:#eaf0fb; }
.demo-billing-toggle button { border:0; border-radius:999px; padding:10px 14px; background:transparent; color:#667085; font:800 12px/1 Inter,sans-serif; cursor:pointer; }
.demo-billing-toggle button.is-active { background:#fff; color:#101828; box-shadow:0 4px 12px rgba(16,24,40,.12); }
.demo-billing-toggle button span { margin-left:4px; color:#07884a; font-size:9px; }
.demo-plan-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.demo-annual-equivalent { display:block; min-height:16px; margin-top:5px; color:#07884a; font-weight:800; }
.demo-billing-note { margin-top:18px; text-align:center; }

@media (max-width: 980px) {
  .demo-billing-heading { flex-direction:column; }
  .demo-plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .demo-plan-grid { grid-template-columns:1fr; }
}
.remove-color { width:28px; height:28px; border:0; border-radius:50%; background:#f2f4f7; color:#667085; }
.customer-preview-button { margin-top:9px; }
.compact-copy { margin:4px 0 0; color:#475467; font-size:12px; }
.activity-icon.approval { background:#ecfdf3; color:var(--green); }
.activity-icon.changes { background:#fff7ed; color:var(--amber); }
.activity-panel { min-height:620px; }
.palette-label { display:inline-flex; width:max-content; padding:5px 8px; border-radius:999px; background:#f2f4f7; color:#667085; font-size:10px; font-weight:850; }
.proof-table.is-compact td { padding-block:8px; }

@media (max-width:720px) {
  .public-header-actions { align-items:stretch; flex-direction:column; }
  .proofello-shell.customer-mode .public-page { padding:10px; }
  .proofello-shell.customer-mode .public-card { padding:16px; }
}

/* Keep the interactive proof canvas inside narrow mobile viewports. */
@media (max-width: 720px) {
  .full-composer-stage {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .full-composer-stage .canvas-workspace,
  .full-composer-stage .canvas-frame {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .full-composer-stage .canvas-frame {
    overflow: hidden;
  }

  .full-composer-stage #proofCanvas {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
  }
}

/* Responsive coverage for every interactive demo view. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
canvas {
  max-width: 100%;
}

.settings-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}

.settings-layout > * {
  min-width: 0;
}

.table-wrap,
.status-tabs,
.public-item-nav {
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1100px) {
  .composer-grid,
  .settings-layout,
  .public-proof-grid {
    grid-template-columns: 1fr;
  }

  .composer-grid,
  .composer-grid > .composer-panel,
  .composer-grid > .canvas-stage,
  .settings-layout,
  .settings-layout > *,
  .public-proof-grid,
  .public-proof-grid > *,
  .activity-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .composer-grid > .composer-panel,
  .composer-grid > .canvas-stage {
    justify-self: stretch;
  }

  .composer-panel > *,
  .canvas-stage > *,
  .canvas-workspace > *,
  .settings-content > *,
  .layer-stack,
  .layer-inline-controls,
  .ordered-item-card,
  .picked-color-card,
  .proof-version-card {
    max-width: 100%;
    min-width: 0;
  }

  .composer-panel .field,
  .composer-panel input,
  .composer-panel select,
  .composer-panel textarea,
  .canvas-stage input,
  .canvas-stage select,
  .canvas-stage textarea,
  .settings-content input,
  .settings-content select,
  .settings-content textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .settings-menu {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .settings-option {
    flex: 0 0 min(220px, 72vw);
  }
}

@media (max-width: 720px) {
  .sidebar {
    gap: 12px;
    padding: 12px;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .sidebar .brand {
    flex: 0 0 auto;
  }

  .nav-item {
    min-height: 44px;
    white-space: nowrap;
  }

  .topbar-actions,
  .composer-actions,
  .button-row,
  .customer-decision-actions {
    width: 100%;
  }

  .topbar-actions > *,
  .composer-actions > *,
  .customer-decision-actions > * {
    flex: 1 1 160px;
    justify-content: center;
  }

  .canvas-toolbar {
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .rgb-control-grid {
    grid-template-columns: 1fr;
  }

  .public-card,
  .public-proof-grid,
  .public-proof-grid > *,
  .public-proof-grid aside {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .public-header .brand {
    min-width: 0;
  }

  .public-header .brand > span:last-child,
  .public-header .brand strong,
  .public-header .brand small,
  .detail-row,
  .status-track-row,
  .attachment-list {
    overflow-wrap: anywhere;
  }

  .public-item-nav {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .comment-box,
  .attachment-upload-box,
  .attachment-upload-box input,
  input,
  select,
  textarea {
    min-width: 0;
    max-width: 100%;
  }

  .proofello-shell.customer-mode .proof-preview {
    min-height: clamp(300px, 92vw, 420px);
  }
}

.revision-reference-card.approved { border-color:rgba(22,163,74,.24); background:#f0fdf4; }
.revision-reference-card.approved .revision-reference-meta strong { color:#15803d; }