/*
  Linnet Postal Workshop — canonical marketing design system.
  The previous homepage is preserved underneath this additive layer.
  Open the homepage with ?design=legacy to review or restore it.
*/

html[data-design="postal-workshop"] {
  --paper: #dfe2df;
  --raised: #f8f7f2;
  --deep: #d2d2ca;
  --ink: #222521;
  --persona-active: #222521;
  --soft: #5b5f5a;
  --line: #aeb3af;
  --signal: #df654a;
  --signal-dark: #ad3d2c;
  --success: #3f7250;
  --desk: #c49a58;
  --radius-control: .5rem;
  --radius-panel: .625rem;
  --radius-window: .75rem;
}

html[data-design="postal-workshop"] body {
  background:
    radial-gradient(circle at 82% 6%, rgba(255, 255, 255, .42), transparent 30rem),
    var(--paper);
}

html[data-design="postal-workshop"] .site-header {
  background: color-mix(in srgb, var(--raised) 92%, transparent);
}

html[data-design="postal-workshop"] .manifesto-notice {
  border-bottom-color: var(--ink);
}

html[data-design="postal-workshop"] .persona-switch,
html[data-design="postal-workshop"] .toast {
  border-radius: var(--radius-panel);
  box-shadow: 3px 3px 0 var(--ink);
}

html[data-design="postal-workshop"] .persona-switch button,
html[data-design="postal-workshop"] .persona-switch button[aria-pressed="true"],
html[data-design="postal-workshop"] .persona-switch button[aria-pressed="true"] img {
  border-radius: calc(var(--radius-control) - .125rem);
}

html[data-design="postal-workshop"] .button,
html[data-design="postal-workshop"] .site-import > button,
html[data-design="postal-workshop"] .lab-run {
  border-radius: var(--radius-panel);
  box-shadow: 3px 3px 0 var(--ink);
}

html[data-design="postal-workshop"] .button:hover {
  box-shadow: 5px 5px 0 var(--ink);
}

html[data-design="postal-workshop"] .stage-shadow,
html[data-design="postal-workshop"] .stage-window,
html[data-design="postal-workshop"] .hero-email-proof,
html[data-design="postal-workshop"] .hero-sidecar,
html[data-design="postal-workshop"] .dev-workbench,
html[data-design="postal-workshop"] .brief-card,
html[data-design="postal-workshop"] .campaign-screen,
html[data-design="postal-workshop"] .campaign-track,
html[data-design="postal-workshop"] .product-screen,
html[data-design="postal-workshop"] .authority-map,
html[data-design="postal-workshop"] .receipt,
html[data-design="postal-workshop"] .developer-studio,
html[data-design="postal-workshop"] .brand-studio,
html[data-design="postal-workshop"] .send-lab,
html[data-design="postal-workshop"] .lab-code-result,
html[data-design="postal-workshop"] .lab-email-preview,
html[data-design="postal-workshop"] .lab-agent-note,
html[data-design="postal-workshop"] .screen-story figure {
  border-radius: var(--radius-window);
}

html[data-design="postal-workshop"] .stage-window,
html[data-design="postal-workshop"] .campaign-screen,
html[data-design="postal-workshop"] .product-screen,
html[data-design="postal-workshop"] .screen-story figure,
html[data-design="postal-workshop"] .developer-studio,
html[data-design="postal-workshop"] .brand-studio,
html[data-design="postal-workshop"] .send-lab {
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--ink) 82%, transparent);
}

html[data-design="postal-workshop"] .stage-shadow {
  background: var(--signal);
}

html[data-design="postal-workshop"] .stage-screen,
html[data-design="postal-workshop"] .send-lab-output,
html[data-design="postal-workshop"] .email-preview-wrap {
  background: var(--deep);
}

html[data-design="postal-workshop"] .brand-controls input[type="text"],
html[data-design="postal-workshop"] .brand-controls input[type="url"],
html[data-design="postal-workshop"] .brand-controls input[type="color"],
html[data-design="postal-workshop"] .brand-controls select,
html[data-design="postal-workshop"] .send-lab-input textarea,
html[data-design="postal-workshop"] .copy-code,
html[data-design="postal-workshop"] .lab-mode-tabs button,
html[data-design="postal-workshop"] .lab-stack-tabs button,
html[data-design="postal-workshop"] .lab-output-head button {
  border-radius: var(--radius-control);
}

html[data-design="postal-workshop"] .logo-drop,
html[data-design="postal-workshop"] .brand-findings,
html[data-design="postal-workshop"] .agent-preflight {
  border-radius: var(--radius-control);
}

html[data-design="postal-workshop"] .capability-grid,
html[data-design="postal-workshop"] .agent-roster {
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: var(--radius-window);
}

html[data-design="postal-workshop"] .capability-grid {
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

html[data-design="postal-workshop"] .agent-roster {
  border-block: 1px solid var(--ink);
}

html[data-design="postal-workshop"] .product-section,
html[data-design="postal-workshop"] .screens-section {
  background: var(--deep);
}

html[data-design="postal-workshop"] .control-section {
  background: var(--ink);
}

html[data-design="postal-workshop"] .authority-map article.linnet-role {
  background: var(--signal);
}

/* Customer previews retain the detected customer's own shape language. */
html[data-design="postal-workshop"] .brand-studio .email-paper,
html[data-design="postal-workshop"] .brand-studio .email-fallback,
html[data-design="postal-workshop"] .brand-studio .email-signal {
  border-radius: var(--preview-radius, 0);
}

html[data-design="postal-workshop"] .brand-studio .email-content > a {
  border-radius: var(--preview-button-radius, 0);
}

@media (max-width: 860px) {
  html[data-design="postal-workshop"] .persona-switch {
    box-shadow: none;
  }
}

/*
  Keep actions feeling like buttons as layouts collapse. The base layout makes
  several controls stretch with their grid/flex parent; that reads as a form
  bar on tablets. Only the narrowest phones benefit from full-width actions.
*/
@media (max-width: 980px) {
  html[data-design="postal-workshop"] .lab-run {
    display: inline-flex;
    width: fit-content;
    min-width: min(16rem, calc(100% - 2rem));
    align-items: center;
    justify-content: center;
    justify-self: start;
    text-align: center;
  }
}

@media (max-width: 590px) {
  html[data-design="postal-workshop"] .hero-actions {
    align-items: flex-start;
  }

  html[data-design="postal-workshop"] .hero-actions .button,
  html[data-design="postal-workshop"] .site-import > button,
  html[data-design="postal-workshop"] .brand-controls > .button {
    width: fit-content;
    max-width: 100%;
  }

  html[data-design="postal-workshop"] .site-import > button {
    justify-self: start;
  }
}

@media (max-width: 390px) {
  html[data-design="postal-workshop"] .lab-run {
    width: calc(100% - 2rem);
    min-width: 0;
    justify-self: stretch;
  }

  html[data-design="postal-workshop"] .hero-actions .button,
  html[data-design="postal-workshop"] .site-import > button,
  html[data-design="postal-workshop"] .brand-controls > .button {
    width: 100%;
  }
}