/* ============================================================================
RESPONSIVE BREAKPOINT SCALE - apply these five widths consistently.
Media queries can't read CSS vars, so treat these as the canonical set:
xs <=480 phone (single column, drawer nav)
sm 640 large phone (2-up metrics/cards)
md 768 tablet portrait (tables -> cards below this)
lg 1024 small laptop (fixed sidebar returns at >=1024)
xl 1280 desktop (max content width cap)
New rules should use max-width:1023 / 767 / 639 / 480 and min-width:768 /
1024. Legacy one-off widths are being migrated onto this scale.
============================================================================ */
:root {
--bg: #ffffff;
--panel: #ffffff;
--panel-subtle: #fafafa;
--sidebar: #ffffff;
--sidebar-muted: #6b6b6b;
--text: #0a0a0a;
--muted: #6b6b6b;
--faint: #9a9a9a;
--line: #e6e6e6;
--line-soft: #efefef;
--line-strong: #1a1a1a;
--hover: #f6f6f6;
--accent: #147c64;
--accent-weak: #e7f4ef;
--blue: #5b6b80;
--blue-weak: #eef1f5;
--amber: #9a7415;
--amber-weak: #fdf8ec;
--red: #b42318;
--red-weak: #fdf1ef;
--green: #1f7a4d;
--green-weak: #f3faf6;
--shadow: none;
--radius: 8px;
--radius-sm: 6px;
--shadow-pop: 0 8px 24px -12px rgba(10, 10, 10, 0.18);
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--dur-slow: 0.24s;
--z-modal: 100;
--z-toast: 120;
--sidebar-width: 224px;
/* Horizontal inset between the app frame and page content. Every element that
has to line up with the page content derives its inset from this, so
changing it here moves the whole app together.
8px is deliberate: it keeps the near-full-bleed width without cards butting
into the sidebar's border and the scrollbar, which is what 0 looked like. */
--page-gutter: 8px;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
}
body {
color: var(--text);
background: var(--bg);
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 13px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
}
/* Thin, minimal scrollbars */
* {
scrollbar-width: thin;
scrollbar-color: #d0d0d0 transparent;
}
*::-webkit-scrollbar {
width: 7px;
height: 7px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: #d4d4d4;
border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
background: #b8b8b8;
}
*::-webkit-scrollbar-corner {
background: transparent;
}
h1,
h2,
h3,
h4,
p {
margin: 0;
}
h1,
h2,
h3,
h4 {
letter-spacing: 0;
line-height: 1.2;
}
a {
color: inherit;
text-decoration: none;
}
/* Inline "Upgrade" links inside body/hint text - accent + underline so they
read as clickable (base is color:inherit). */
.upgrade-link {
color: var(--accent);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.upgrade-link:hover { text-decoration: none; }
button,
input,
select,
textarea {
font: inherit;
}
.page-noise {
display: none;
}
.app-frame {
display: grid;
grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
min-height: 100vh;
transition: grid-template-columns 0.18s ease;
}
.sidebar {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
padding: 18px 14px;
color: var(--text);
background: var(--sidebar);
border-right: 1px solid var(--line);
}
.brand {
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 4px 8px 14px;
border-bottom: 1px solid var(--line);
}
.brand strong,
.brand small {
display: block;
}
.brand strong {
font-size: 14px;
font-weight: 700;
}
.brand small {
margin-top: 2px;
color: var(--faint);
font-size: 12px;
}
.brand-mark {
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 6px;
color: var(--accent);
background: transparent;
border: 1px solid var(--line-strong);
}
.brand-mark svg {
width: 16px;
height: 16px;
display: block;
}
.nav-stack {
display: grid;
gap: 2px;
margin-top: 14px;
}
.nav-link {
display: flex;
align-items: center;
gap: 11px;
min-height: 36px;
padding: 0 10px;
border-radius: 5px;
color: var(--muted);
font-size: 13px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
}
.nav-icon {
flex: none;
}
/* Sidebar collapse toggle */
.sidebar-toggle {
position: absolute;
top: 15px;
right: 11px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: var(--muted);
background: var(--panel);
border: 1px solid transparent;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-toggle:hover {
color: var(--text);
background: var(--hover);
}
.sidebar-toggle:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--accent-weak);
}
/* Collapsed icon-rail state */
html.nav-rail {
--sidebar-width: 64px;
}
html.nav-rail .brand-text,
html.nav-rail .nav-stack + .eyebrow,
html.nav-rail .sidebar .eyebrow,
html.nav-rail .nav-label {
display: none;
}
/* Collapsed rail: keep the profile as an avatar-only marker. */
html.nav-rail .sidebar-footnote {
padding: 10px 0;
}
html.nav-rail .sidebar-profile {
justify-content: center;
gap: 0;
padding: 0;
}
html.nav-rail .sidebar-profile:hover {
background: transparent;
}
html.nav-rail .sidebar-profile-text {
display: none;
}
html.nav-rail .brand {
justify-content: center;
padding-left: 0;
padding-right: 0;
margin-top: 38px;
border-bottom-color: transparent;
}
html.nav-rail .nav-link {
justify-content: center;
padding: 0;
gap: 0;
}
html.nav-rail .sidebar-toggle {
right: 50%;
transform: translateX(50%);
}
.nav-link:hover {
color: var(--text);
background: var(--hover);
}
.nav-link.is-active {
color: var(--accent);
background: var(--accent-weak);
font-weight: 550;
}
.sidebar-footnote {
margin-top: auto;
padding: 10px 8px;
border-top: 1px solid var(--line);
}
.sidebar-profile {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
border-radius: 10px;
transition: background .15s ease;
}
.sidebar-profile:hover {
background: var(--hover);
}
.sidebar-profile-avatar {
flex: none;
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--text);
color: #fff;
display: grid;
place-items: center;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .02em;
}
.sidebar-profile-text {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.3;
}
.sidebar-profile-text strong {
color: var(--text);
font-size: 13px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-profile-owner {
color: var(--muted);
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-profile-domain {
color: var(--faint);
font-size: 11.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.workspace {
min-width: 0;
padding: 0;
}
/* ---- Mobile top bar + drawer scrim. Both hidden on desktop; the <=1023px
media query below turns the sidebar into a slide-in drawer and reveals these. */
.app-topbar {
display: none;
position: sticky;
top: 0;
z-index: 40;
align-items: center;
gap: 12px;
min-height: 56px;
padding: 10px 16px;
background: var(--panel);
border-bottom: 1px solid var(--line);
}
.topbar-burger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-left: -6px;
color: var(--text);
background: transparent;
border: 1px solid transparent;
border-radius: 9px;
cursor: pointer;
}
.topbar-burger:hover {
background: var(--hover);
}
.topbar-burger:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--accent-weak);
}
.app-topbar-title {
flex: 1;
min-width: 0;
font-size: 16px;
font-weight: 680;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-topbar-avatar {
flex: none;
width: 32px;
height: 32px;
border-radius: 9px;
display: grid;
place-items: center;
font-size: 11.5px;
font-weight: 700;
color: #082e25;
background: linear-gradient(140deg, #7cf0c6, #147c64);
}
.nav-scrim {
display: none;
}
.eyebrow {
color: var(--muted);
font-size: 11px;
font-weight: 760;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.page-content {
display: grid;
gap: 16px;
/* Vertical padding stays: at 0 the first heading on a page would touch the top
of the window, which is a typography problem rather than wasted space. */
padding: 14px var(--page-gutter) 40px;
}
/* Bare page furniture - titles, section labels and loose action rows - carries no
card padding of its own, so at --page-gutter: 0 it would sit hard against the
sidebar and the window edge. This floor holds it clear of both and cancels
itself once the gutter is wide enough to do the job on its own.
Cards, heroes and tables are deliberately NOT in this list: bleeding those to
the edge is the whole point of a 0 gutter.
A new page with bare furniture of its own should join this list. */
.dhead,
.dash2 .section-head,
.dashboard .section-head,
.orders-head,
.support-head,
.auto-inv-head,
.set-sec-label,
.ntf-sec-label,
.brnd-sec-label,
.notif-actions {
padding-left: max(0px, calc(14px - var(--page-gutter)));
padding-right: max(0px, calc(14px - var(--page-gutter)));
}
.public-shell {
max-width: 720px;
margin: 0 auto;
padding: 24px 20px 48px;
}
.public-brand {
margin-bottom: 18px;
}
.public-content {
display: grid;
gap: 16px;
}
.pill,
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 22px;
padding: 0 8px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
white-space: nowrap;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--muted);
background: transparent;
}
.pill {
color: var(--accent);
background: var(--accent-weak);
border-color: #cce7dd;
}
.pill-muted {
color: var(--muted);
background: #ffffff;
border-color: var(--line);
}
.badge-success {
color: var(--green);
background: var(--green-weak);
border-color: #cfe8d8;
}
.badge-warn {
color: var(--amber);
background: var(--amber-weak);
border-color: #f0e0bf;
}
.badge-danger {
color: var(--red);
background: var(--red-weak);
border-color: #f1c9c3;
}
.badge-muted {
color: var(--muted);
background: #ffffff;
border-color: var(--line);
}
.trial-banner,
.sync-banner {
display: flex;
align-items: center;
gap: 12px;
min-height: 42px;
/* These bars span the full width and inset their own text to line up with the
edge of the page's cards. The floor keeps that text off the frame once the
gutter reaches 0. */
padding: 8px max(var(--page-gutter), 16px);
border-bottom: 1px solid var(--line);
font-size: 13px;
overflow: hidden;
transition: opacity 0.35s ease, min-height 0.35s ease, padding 0.35s ease;
}
.trial-banner {
justify-content: space-between;
color: #553300;
background: var(--amber-weak);
}
.trial-banner a {
color: #553300;
font-weight: 760;
text-decoration: underline;
text-underline-offset: 3px;
}
.reauth-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 12px max(var(--page-gutter), 16px);
color: var(--red);
background: var(--red-weak);
border-bottom: 1px solid #f1c9c3;
font-size: 13px;
font-weight: 550;
}
.reauth-banner .button {
background: var(--red);
border-color: var(--red);
color: #fff;
}
.reauth-banner .button:hover {
background: #fff;
color: var(--red);
}
/* Pinned to the top of the content column and kept visible (while a sync is
active) as the page scrolls, so import progress is never lost. */
.sync-banner {
position: sticky;
top: 0;
z-index: 60;
flex-direction: column;
align-items: stretch;
gap: 9px;
background: var(--panel);
box-shadow: 0 6px 18px -12px rgba(8, 20, 16, 0.4);
}
.sync-banner.is-hidden {
display: none;
}
/* Top row: status label + count on the left, % readout on the right. */
.sync-banner-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
/* The progress track - a full-width bar under the copy. */
.sync-loader {
position: relative;
width: 100%;
height: 6px;
border-radius: 5px;
overflow: hidden;
background: var(--line-soft);
}
.sync-loader-fill {
position: relative;
display: block;
height: 100%;
width: 0%;
border-radius: 5px;
overflow: hidden;
background: var(--accent);
transition: width 0.3s ease;
}
/* Indeterminate shimmer sweeps across the filled portion while running. */
.sync-banner[data-status="running"] .sync-loader-fill::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
transform: translateX(-100%);
animation: sync-shimmer 1.4s linear infinite;
}
@keyframes sync-shimmer {
to { transform: translateX(100%); }
}
.sync-copy {
min-width: 0;
flex: 1;
}
.sync-copy strong,
.sync-copy span {
display: block;
}
.sync-copy span {
color: var(--muted);
font-size: 12px;
}
/* Status dot precedes the label. Pseudo-element survives JS textContent updates. */
.sync-banner[data-status="running"] [data-role="status-label"],
.sync-banner[data-status="queued"] [data-role="status-label"],
.sync-banner[data-status="failed"] [data-role="status-label"] {
position: relative;
padding-left: 16px;
}
.sync-banner[data-status="running"] [data-role="status-label"]::before,
.sync-banner[data-status="queued"] [data-role="status-label"]::before,
.sync-banner[data-status="failed"] [data-role="status-label"]::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 7px;
height: 7px;
margin-top: -3.5px;
border-radius: 50%;
background: var(--accent);
}
.sync-banner[data-status="running"] [data-role="status-label"]::before,
.sync-banner[data-status="queued"] [data-role="status-label"]::before {
animation: sync-pulse 1.2s ease-in-out infinite;
}
.sync-banner[data-status="failed"] [data-role="status-label"]::before {
background: var(--red);
}
@keyframes sync-pulse {
50% { opacity: 0.3; transform: scale(0.8); }
}
.sync-progress-value {
min-width: 40px;
color: var(--accent);
font-size: 15px;
font-weight: 800;
font-variant-numeric: tabular-nums;
text-align: right;
}
/* The % readout is only meaningful while a determinate sync is running. */
.sync-banner:not([data-status="running"]) .sync-progress-value {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.sync-banner[data-status="running"] .sync-loader-fill::after,
.sync-banner[data-status="running"] [data-role="status-label"]::before,
.sync-banner[data-status="queued"] [data-role="status-label"]::before,
/* The export banner borrows this loader, so it has to be listed here too. */
.export-banner[data-status="running"] .sync-loader-fill::after {
animation: none;
}
}
.sync-banner-note {
width: 100%;
margin: 0;
color: var(--muted);
font-size: 12px;
}
.sync-request-meta,
.sync-request-error {
color: var(--muted);
font-size: 12px;
}
.sync-request-card {
display: grid;
gap: 6px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--panel-subtle);
}
.sync-request-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.sync-request-title {
font-size: 13px;
font-weight: 720;
}
.sync-request-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.sync-request-error {
line-height: 1.4;
display: block;
padding: 5px 7px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
background: #fff;
border: 1px solid var(--line-soft);
border-radius: 6px;
overflow-wrap: anywhere;
}
.sync-request-confirm {
color: var(--red);
font-size: 12px;
font-weight: 600;
}
.sync-request-actions {
display: flex;
align-items: center;
gap: 8px;
}
.sync-request-button {
min-height: 28px;
padding: 0 10px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--text);
background: #ffffff;
cursor: pointer;
font-size: 12px;
font-weight: 720;
}
.sync-request-button:hover {
background: var(--line-soft);
}
.sync-request-button.is-danger {
color: var(--red);
border-color: #f1c3bc;
background: var(--red-weak);
}
.sync-request-button:disabled {
opacity: 0.6;
cursor: wait;
}
.section-card,
.table-shell,
.template-preview,
.preview-card,
.hero-card,
.print-sheet {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.section-card,
.hero-card {
padding: 16px;
}
.hero-card {
max-width: 640px;
}
.hero-card h1,
.section-card h2 {
font-size: 18px;
font-weight: 760;
}
.hero-card p,
.section-note,
.muted {
color: var(--muted);
}
.hero-card p {
margin-top: 8px;
}
.hero-card code {
display: inline-block;
margin-top: 12px;
padding: 6px 8px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--panel-subtle);
font-size: 12px;
}
.toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.back-link {
display: inline-flex;
align-items: center;
gap: 5px;
margin-bottom: 10px;
color: var(--muted);
font-size: 13px;
font-weight: 600;
transition: color 0.15s ease;
}
.back-link:hover {
color: var(--accent);
}
.back-link svg {
transition: transform 0.15s ease;
}
.back-link:hover svg {
transform: translateX(-2px);
}
.toolbar h2 {
margin-top: 2px;
}
.button-inline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
/* Bottom-align filter buttons with the inputs (whose labels add height above). */
.filter-actions {
align-self: end;
}
.orders-filters {
display: grid;
grid-template-columns: minmax(180px, 1.5fr) minmax(180px, 1.2fr) minmax(140px, 1fr) minmax(140px, 1fr) auto;
gap: 12px;
align-items: end;
}
@media (max-width: 1040px) {
.orders-filters {
grid-template-columns: 1fr 1fr;
}
.orders-filters .filter-actions {
grid-column: 1 / -1;
}
}
@media (max-width: 560px) {
.orders-filters {
grid-template-columns: 1fr;
}
}
.stack {
display: grid;
gap: 12px;
}
.grid-two {
display: grid;
gap: 12px;
}
.grid-two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Vendor payout summary: net-payable hero + calculation breakdown. */
.payout-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
margin-top: 16px;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.payout-net {
display: flex;
flex-direction: column;
gap: 6px;
padding: 22px;
background: var(--accent);
color: #ffffff;
}
.payout-net-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.85;
}
.payout-net-value {
font-size: 32px;
font-weight: 770;
font-variant-numeric: tabular-nums;
}
.payout-net-note {
font-size: 12px;
opacity: 0.85;
}
.payout-breakdown {
padding: 6px 20px;
}
.payout-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 11px 0;
border-bottom: 1px solid var(--line-soft);
font-size: 14px;
}
.payout-row:last-child {
border-bottom: 0;
}
.payout-row .k small {
margin-left: 6px;
font-size: 12px;
color: var(--muted);
}
.payout-row .amt {
font-weight: 640;
font-variant-numeric: tabular-nums;
}
.payout-row .amt.neg {
color: #b23b3b;
}
.payout-row-total {
margin-top: 2px;
border-top: 1px solid var(--line);
}
.payout-row-total .k {
font-weight: 720;
}
.payout-row-total .amt {
font-weight: 760;
color: var(--accent);
}
@media (max-width: 640px) {
.payout-hero {
grid-template-columns: 1fr;
}
}
/* Inline notice for plan-limited views (e.g. Free plan data window). */
.window-note {
margin-top: 14px;
padding: 10px 12px;
background: var(--accent-weak);
border-radius: 8px;
font-size: 13px;
color: var(--accent);
}
/* Plan cards: a name band on top (filled green on the current plan) keeps the
plan names highlighted and the prices aligned across cards. Flex column so
the action can be pinned to the bottom. */
.plan-card {
overflow: hidden;
display: flex;
flex-direction: column;
}
.plan-band {
display: flex;
align-items: center;
gap: 8px;
height: 52px;
margin: -16px -16px 0;
padding: 0 16px;
border-bottom: 1px solid var(--line-soft);
}
.plan-band .plan-name {
font-size: 17px;
font-weight: 760;
}
.plan-band .plan-tag {
margin-left: auto;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--accent);
}
.plan-tagline {
margin-top: 16px;
}
.plan-price {
margin-top: 12px;
font-size: 30px;
font-weight: 780;
letter-spacing: -0.02em;
color: var(--text);
font-variant-numeric: tabular-nums;
}
/* The "/mo" suffix stays small and muted beside the big price. */
.plan-price small {
font-size: 13px;
font-weight: 600;
color: var(--muted);
letter-spacing: 0;
}
.plan-features {
margin-top: 16px;
padding-left: 18px;
}
/* Recommended is a suggestion, so it gets a thin ring and nothing more. The
plan the merchant is actually on has to read louder than the one we're
nudging them towards - otherwise the two compete and neither wins. */
.plan-card.is-recommended {
border-color: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent);
}
/* The current plan: tinted panel, plus a solid accent rail down the leading
edge. The rail is drawn as an inset shadow rather than a border so the card
keeps the same geometry as its neighbours and nothing shifts by a pixel. */
.plan-card.is-active {
border-color: var(--accent);
background: var(--accent-weak);
box-shadow: inset 4px 0 0 0 var(--accent);
}
/* The current plan's band fills green with white text. */
.plan-card.is-active .plan-band {
background: var(--accent);
border-bottom-color: var(--accent);
}
.plan-card.is-active .plan-band .plan-name,
.plan-card.is-active .plan-band .plan-tag {
color: #fff;
}
/* On the tint, the muted tagline and the "/mo" suffix lose too much contrast
against their white-card values, so both step up a shade. */
.plan-card.is-active .plan-tagline,
.plan-card.is-active .plan-price small {
color: var(--text);
opacity: 0.72;
}
/* Action pinned to the bottom (aligned across cards) and full width. */
.plan-card .button-inline {
width: 100%;
margin-top: auto;
padding-top: 20px;
}
.plan-card .button-inline form,
.plan-card .button-inline .button {
width: 100%;
}
/* Selected plan's bottom action: a solid, non-interactive "Current plan" bar. */
.plan-card .button-inline .button.is-current,
.plan-card .button-inline .button.is-current:hover {
background: var(--accent);
color: #ffffff;
cursor: default;
}
.value {
margin-top: 6px;
font-size: 28px;
font-weight: 780;
line-height: 1.05;
}
.field {
display: grid;
gap: 6px;
}
.field label {
color: var(--muted);
font-size: 12px;
font-weight: 720;
}
.field small {
color: var(--faint);
font-size: 12px;
}
/* .field-hint only ever inherited its look from `.field small` above, so a hint used
OUTSIDE a .field - the destination notes in the schedule wizard and on /delivery, for
instance - fell back to default paragraph size and the body text colour, and out-weighed
the row it was annotating. The class now carries its own style wherever it's used. */
.field-hint {
color: var(--faint);
font-size: 12px;
line-height: 1.5;
}
.field input,
.field select,
.field textarea,
.data-table input {
width: 100%;
min-height: 36px;
padding: 7px 9px;
color: var(--text);
background: #ffffff;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
}
.field textarea {
min-height: 96px;
resize: vertical;
}
/* Normalize native selects so they match the inputs/buttons (uniform 36px row). */
.field select {
height: 36px;
appearance: none;
-webkit-appearance: none;
padding-right: 30px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236b6b6b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
cursor: pointer;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.data-table input:focus {
outline: 2px solid rgba(20, 124, 100, 0.16);
border-color: var(--accent);
}
.checkbox-row {
display: flex;
align-items: center;
gap: 8px;
}
.checkbox-row input {
width: 16px;
height: 16px;
accent-color: var(--accent);
}
.button,
.button-secondary,
.button-ghost,
.button-danger {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 36px;
padding: 0 15px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
box-shadow 0.15s ease, transform 0.04s ease;
}
.button:active,
.button-secondary:active,
.button-ghost:active,
.button-danger:active {
transform: translateY(1px);
}
.button:focus-visible,
.button-secondary:focus-visible,
.button-ghost:focus-visible,
.button-danger:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--accent-weak);
}
/* Primary: green outline at rest, fills green on hover. */
.button {
color: var(--accent);
background: #ffffff;
border-color: var(--accent);
}
.button:hover {
color: #ffffff;
background: var(--accent);
}
/* Disabled (e.g. Next: Delivery before a trigger is chosen): muted + inert,
and it must not fill green on hover. */
.button:disabled,
.button[disabled] {
opacity: .45;
cursor: not-allowed;
}
.button:disabled:hover,
.button[disabled]:hover {
color: var(--accent);
background: #ffffff;
}
/* Primary: solid brand green - the single loudest accent on a screen. */
.button-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 36px;
padding: 0 15px;
border: 1px solid var(--accent);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 13px;
font-weight: 640;
white-space: nowrap;
color: #ffffff;
background: var(--accent);
transition: background 0.15s ease, border-color 0.15s ease;
}
.button-primary:hover {
background: #106b56;
border-color: #106b56;
}
.button-primary:disabled {
opacity: 0.6;
cursor: default;
}
/* Secondary: ink outline at rest, fills ink on hover. */
.button-secondary {
color: var(--text);
background: #ffffff;
border-color: var(--line-strong);
}
.button-secondary:hover {
color: #ffffff;
background: var(--text);
border-color: var(--text);
}
/* Ghost: quiet hairline; darkens on hover. */
.button-ghost {
color: var(--muted);
background: #ffffff;
border-color: var(--line);
}
.button-ghost:hover {
color: var(--text);
border-color: #cfcfcf;
}
/* Danger: red outline at rest, fills red on hover. */
.button-danger {
color: var(--red);
background: #ffffff;
border-color: #f1c9c3;
}
.button-danger:hover {
color: #ffffff;
background: var(--red);
border-color: var(--red);
}
.button-danger:focus-visible {
box-shadow: 0 0 0 3px var(--red-weak);
}
.table-shell {
overflow: auto;
}
/* The orders table carries many columns; give it room and let the shell scroll
horizontally rather than cramming. */
.orders-table {
min-width: 1240px;
}
/* Freeze the first (Order) column: it stays pinned to the left edge while the
rest of the wide table scrolls underneath. The header row is already
sticky-top (z-index:1), so layering is:
header first cell (top+left) z-index 3 - top-left corner, above both
body first cells (left) z-index 2 - above the scrolling body cells
Each frozen cell needs an opaque background so scrolling content can't show
through, and a hairline right divider marks the freeze boundary. */
.orders-table th:first-child,
.orders-table td:first-child {
position: sticky;
left: 0;
background: var(--panel);
box-shadow: 1px 0 0 var(--line-soft);
}
.orders-table td:first-child {
z-index: 2;
}
.orders-table th:first-child {
z-index: 3;
/* Matches the rest of the header row, which is now the plain panel surface. */
background: var(--panel);
}
/* Keep the pinned cell's background in step with the row's hover/selected
states, otherwise it would stay white while the rest of the row highlights. */
.orders-table tbody tr:hover td:first-child {
background: var(--hover);
}
.orders-table tbody tr.is-selected td:first-child {
background: var(--accent-weak);
}
.data-table td.nowrap {
white-space: nowrap;
}
/* Sortable column header (Date) - label + a small arrow, Shopify-style. */
.th-sort {
display: inline-flex;
align-items: center;
gap: 4px;
color: inherit;
text-decoration: none;
}
.th-sort:hover {
color: var(--text);
}
/* Arrow is hidden until you hover the header, and stays visible on the column
currently sorted so the sort state is always clear. */
.th-sort-arrow {
display: inline-flex;
color: var(--muted);
opacity: 0;
transition: opacity 0.12s ease;
}
.th-sort:hover .th-sort-arrow,
.th-sort.is-active .th-sort-arrow {
opacity: 1;
}
.th-sort-arrow.is-asc svg {
transform: rotate(180deg);
}
/* Tags can be long - cap the column and clip so it doesn't blow out the row. */
.order-tags-cell {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Summary footer under the orders table: count + current page range. */
.table-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 16px;
border-top: 1px solid var(--line);
background: #fcfcfc;
font-size: 12.5px;
color: var(--muted);
}
.table-footer strong {
color: var(--text);
}
.table-footer-nav {
display: flex;
align-items: center;
gap: 12px;
}
.table-footer-nav .button-ghost {
min-height: 30px;
padding: 0 12px;
}
.data-table {
width: 100%;
min-width: 860px;
border-collapse: separate;
border-spacing: 0;
}
/* ---- md breakpoint: list tables flatten into stacked cards on phones.
A table opts in with .table-cards; each is named via data-label and
secondary cells carry .t-sec to drop out of the compact card. Above md the
table renders normally (min-width scroll fallback intact). ---- */
@media (max-width: 767px) {
.table-cards {
min-width: 0;
border-collapse: collapse;
}
/* Hide the header visually - each cell's data-label carries the column name. */
.table-cards thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.table-cards tbody tr {
display: block;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
}
.table-cards tbody tr + tr {
margin-top: 10px;
}
.table-cards tbody td {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 5px 0;
border: 0;
text-align: right;
}
.table-cards tbody td::before {
content: attr(data-label);
flex: none;
color: var(--muted);
font-size: 11.5px;
font-weight: 650;
text-align: left;
}
/* Secondary columns are dropped from the compact card. */
.table-cards .t-sec {
display: none !important;
}
/* Frozen first column / sticky header don't apply in card mode. */
.table-cards th:first-child,
.table-cards td:first-child {
position: static;
}
/* Lead cell (order #/name) reads as the card title. */
.table-cards tbody td:first-child {
padding-top: 0;
font-size: 14px;
font-weight: 680;
}
.table-cards tbody td:first-child::before,
.table-cards tbody td.row-actions-cell::before {
content: none;
}
/* Actions cell: buttons align to the right, no label. */
.table-cards tbody td.row-actions-cell {
justify-content: flex-end;
padding-top: 10px;
}
}
.row-actions {
display: inline-flex;
gap: 8px;
white-space: nowrap;
}
.row-actions .button-ghost {
min-height: 30px;
padding: 0 10px;
font-size: 12px;
}
/* Square icon actions (preview / download) used in the orders + draft-orders tables. */
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--line);
border-radius: 10px;
background: #ffffff;
color: var(--muted);
cursor: pointer;
transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.icon-button svg {
width: 18px;
height: 18px;
}
.icon-button:hover {
color: var(--accent, var(--text));
border-color: var(--accent, #cfcfcf);
background: var(--accent-weak, #f7f9f7);
}
.icon-button:focus-visible {
outline: 2px solid var(--accent, #4b5563);
outline-offset: 2px;
}
.data-table th,
.data-table td {
padding: 10px 12px;
border-bottom: 1px solid var(--line-soft);
text-align: left;
vertical-align: middle;
}
/* The header separates from the rows by contrast alone: same white surface, but
the labels at full text colour over a firm 2px rule. The old --panel-subtle
grey was a neutral the green-tinted pages never redefined, so it landed within
a hair of the white rows - invisible once the header became sticky and rows
started passing beneath it. */
.data-table th {
position: sticky;
top: 0;
z-index: 1;
color: var(--text);
background: var(--panel);
border-bottom: 2px solid var(--text);
font-size: 11px;
font-weight: 760;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Keep the orders / draft-orders column headers on a single line - the shell
scrolls horizontally if they don't all fit, rather than wrapping to two rows. */
.orders-table thead th,
.draft-orders-table thead th { white-space: nowrap; }
/* --- Compact rows for the two list tables ------------------------------------
These are for scanning a page of orders, so rows should cost as little height
as they can while staying readable. A row was 55px: 10px padding top and
bottom around a 34px icon button, which was the tallest thing in it and set
the floor no matter how small the text got. Shrinking the buttons and the
padding together takes a row to ~37px - about 17 rows in a 900px viewport
instead of 11.
Only above the card breakpoint: below 768px these tables become stacked cards
where the same buttons are the primary touch targets and must stay big. */
@media (min-width: 768px) {
.orders-table tbody td,
.draft-orders-table tbody td { padding-top: 5px; padding-bottom: 5px; }
.orders-table thead th,
.draft-orders-table thead th { padding-top: 7px; padding-bottom: 7px; }
.orders-table .row-actions-cell .icon-button,
.draft-orders-table .row-actions-cell .icon-button {
width: 26px;
height: 26px;
min-height: 0;
border-radius: var(--radius-sm);
}
.orders-table .row-actions-cell .icon-button svg,
.draft-orders-table .row-actions-cell .icon-button svg { width: 15px; height: 15px; }
.orders-table .row-actions,
.draft-orders-table .row-actions { gap: 4px; }
/* Badges are the next tallest thing after the buttons. */
.orders-table tbody .badge,
.draft-orders-table tbody .badge { min-height: 19px; padding: 0 7px; font-size: 10.5px; }
/* A wrapped customer name made some rows 4px taller than the rest, which reads
as a ragged grid. One line, ellipsised, with the full name on hover - the row
opens the order anyway. */
.orders-table tbody td[data-label="Customer"],
.draft-orders-table tbody td[data-label="Customer"] {
max-width: 180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.data-table tbody tr:hover td {
background: var(--hover);
}
.order-row {
cursor: pointer;
}
.order-link {
color: var(--text);
text-decoration: none;
}
.order-row:hover .order-link {
color: var(--accent);
}
.data-table tbody tr.is-selected td {
background: var(--accent-weak);
}
.data-table td {
font-size: 13px;
}
.data-table input {
max-width: 112px;
margin-left: auto;
text-align: right;
}
.align-right {
text-align: right !important;
}
/* Empty state for a table or panel with no rows. Grid + gap so a call to
action below the message spaces itself; centred because every use sits in a
table shell or a column block. Defined once - a second, left-aligned copy
further down this file used to win and strip the padding. */
.empty-state {
display: grid;
gap: 12px;
justify-items: center;
align-content: start;
padding: 32px;
color: var(--muted);
text-align: center;
}
.pagination {
display: flex;
align-items: center;
justify-content: space-between;
}
.order-note {
display: grid;
gap: 6px;
padding: 12px;
border: 1px solid var(--line-soft);
border-radius: var(--radius-sm);
background: var(--panel-subtle);
}
.order-note strong {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ===================== Order detail - Option A (invoice document) ===================== */
.order-detail-a {
display: block;
}
/* Top bar: the "Back to orders" strip, separated from the header by a rule. */
.order-detail-a .odt-topbar {
border-bottom: 1px solid var(--line);
padding-bottom: 12px;
margin-bottom: 12px;
}
/* Soft-pill back button (Option A). Opt in with .back-pill on any page -
order detail, draft detail and vendor commission detail use it. */
.back-pill {
display: inline-flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 16px 0 13px;
border-radius: 999px;
background: #fff;
border: 1px solid var(--line);
color: var(--text);
font-size: 13.5px;
font-weight: 650;
margin-bottom: 0;
transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.back-pill svg { width: 16px; height: 16px; }
.back-pill:hover {
color: var(--accent);
border-color: var(--accent);
box-shadow: 0 6px 16px -10px rgba(8, 46, 37, 0.45);
}
.back-pill:hover svg { transform: translateX(-3px); }
.order-detail-a .odt-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 10px;
margin-top: 8px;
align-items: start;
}
.order-detail-a .odt-main {
display: grid;
gap: 24px;
min-width: 0;
}
/* Invoice document card */
.order-detail-a .odt-doc {
border: none;
border-radius: 16px;
overflow: hidden;
background: #fff;
}
.order-detail-a .odt-doc-head {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 24px 28px;
background: #fffdf9;
border-bottom: 1px solid var(--line);
}
.order-detail-a .odt-billed small {
display: block;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 5px;
}
.order-detail-a .odt-billed strong {
font-size: 15px;
}
.order-detail-a .odt-invmeta {
text-align: right;
font-variant-numeric: tabular-nums;
}
.order-detail-a .odt-invmeta b {
font-size: 15px;
}
.order-detail-a .odt-invmeta span {
display: block;
color: var(--muted);
font-size: 12px;
margin-top: 3px;
}
/* Shopify's real payment terms on the order document card. A pill rather than
another muted line, because it is a fact ABOUT the invoice (where its due date
comes from) rather than another field of it - and because most orders have no
terms, so when it appears it should be legible as something extra. */
.order-detail-a .odt-invmeta .odt-terms {
display: inline-block;
margin-top: 6px;
padding: 1px 7px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--text);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
}
.order-detail-a .odt-invmeta .odt-terms-due {
margin-top: 3px;
font-size: 11px;
}
/* Overdue is the one state worth colouring: it is the reason a merchant would be
looking. Uses the shared semantic token, not a new red. */
.order-detail-a .odt-invmeta .odt-terms-due.is-overdue {
color: var(--red);
font-weight: 600;
}
.order-detail-a .odt-addr {
color: var(--muted);
font-size: 13px;
line-height: 1.6;
margin-top: 8px;
}
.order-detail-a .odt-addr p {
margin: 0;
}
.order-detail-a .odt-doc-body {
padding: 22px 28px 26px;
}
/* Items ledger */
.order-detail-a .odt-items {
width: 100%;
border-collapse: collapse;
}
.order-detail-a .odt-items th {
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--faint);
text-align: left;
font-weight: 600;
padding: 0 0 10px;
}
.order-detail-a .odt-items td {
padding: 14px 0;
border-top: 1px solid var(--line-soft);
vertical-align: top;
font-size: 14px;
}
.order-detail-a .odt-items .r {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.order-detail-a .odt-items .sub {
color: var(--muted);
font-size: 12px;
margin-top: 2px;
}
/* Document footer: pair a summary column on the left with the totals ledger on
the right so the space beside the totals isn't left blank. */
.order-detail-a .odt-doc-foot {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
margin-top: 22px;
flex-wrap: wrap;
}
.order-detail-a .odt-doc-foot-left {
flex: 1 1 220px;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding-top: 4px;
}
.order-detail-a .odt-foot-meta {
margin: 0;
display: grid;
gap: 12px;
}
.order-detail-a .odt-foot-meta > div {
display: flex;
flex-direction: column;
gap: 3px;
}
.order-detail-a .odt-foot-meta dt {
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--faint);
font-weight: 600;
}
.order-detail-a .odt-foot-meta dd {
margin: 0;
font-size: 13.5px;
color: var(--text);
}
.order-detail-a .odt-foot-note {
margin: 0;
font-size: 13px;
color: var(--muted);
}
/* Totals ledger */
.order-detail-a .odt-totals {
flex: 0 0 auto;
margin: 0 0 0 auto;
width: min(320px, 100%);
}
.order-detail-a .odt-totals .row {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 7px 0;
font-size: 13px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.order-detail-a .odt-totals .row strong {
color: var(--text);
font-weight: 600;
}
.order-detail-a .odt-totals .grand {
border-top: 1px solid var(--line);
margin-top: 6px;
padding-top: 12px;
font-size: 16px;
color: var(--text);
}
.order-detail-a .odt-totals .grand span:first-child {
font-weight: 600;
}
.order-detail-a .odt-totals .grand span:last-child {
font-weight: 700;
}
/* Paid stamp */
.order-detail-a .odt-stamp {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted);
}
.order-detail-a .odt-stamp.is-paid {
color: var(--accent);
}
/* Right rail */
.order-detail-a .odt-rail {
display: grid;
gap: 16px;
position: sticky;
top: 16px;
}
.order-detail-a .odt-rail .section-card {
padding: 18px 20px;
}
.order-detail-a .odt-rail h3 {
margin: 0 0 14px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text);
}
.order-detail-a .odt-facts {
margin: 0;
}
.order-detail-a .odt-facts .row {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 9px 0;
border-top: 1px solid var(--line-soft);
font-size: 13px;
}
.order-detail-a .odt-facts .row:first-child {
border-top: 0;
}
.order-detail-a .odt-facts dt {
color: var(--muted);
}
.order-detail-a .odt-facts dd {
margin: 0;
text-align: right;
max-width: 60%;
overflow-wrap: anywhere;
}
.order-detail-a .odt-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
/* Transactions + delivery history - compact row lists */
.order-detail-a .odt-tables {
display: grid;
gap: 24px;
align-items: start;
}
.order-detail-a .odt-block {
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px 22px 8px;
background: #fff;
min-width: 0;
}
.order-detail-a .odt-block-head {
margin-bottom: 6px;
}
.order-detail-a .odt-block-head .eyebrow {
margin-bottom: 2px;
}
.order-detail-a .odt-block-head h3 {
margin: 0;
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
text-transform: none;
color: var(--text);
}
/* Documents card: one row per document type (invoice / receipt / gift receipt). */
.order-detail-a .odt-doc-sub {
margin: 0;
font-size: 13px;
color: var(--muted);
}
/* Locked documents: mute the row and show a compact reason instead of buttons. */
.order-detail-a .odt-doc-lock {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--muted);
padding: 4px 10px;
border-radius: 20px;
background: var(--line-soft);
text-decoration: none;
}
.order-detail-a .odt-doc-lock.is-link:hover {
color: var(--accent);
background: var(--accent-weak);
}
.order-detail-a .odt-list {
display: flex;
flex-direction: column;
}
.order-detail-a .odt-list-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 0;
border-top: 1px solid var(--line-soft);
}
.order-detail-a .odt-list-row:first-child {
border-top: 0;
}
.order-detail-a .odt-list-main {
flex: 1;
min-width: 0;
}
.order-detail-a .odt-list-main strong {
font-size: 14px;
}
.order-detail-a .odt-list-meta {
display: block;
color: var(--muted);
font-size: 12px;
margin-top: 3px;
overflow-wrap: anywhere;
}
.order-detail-a .odt-list-side {
display: flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
}
.order-detail-a .odt-list-amt {
font-variant-numeric: tabular-nums;
font-weight: 700;
white-space: nowrap;
}
@media (max-width: 960px) {
.order-detail-a .odt-layout {
grid-template-columns: minmax(0, 1fr);
}
.order-detail-a .odt-rail {
position: static;
}
}
@media (max-width: 680px) {
.order-detail-a .odt-tables {
grid-template-columns: minmax(0, 1fr);
}
}
/* ===================== Settings - immersive ===================== */
body:has(.settings-page) .workspace { background: #edf4f0; }
/* Uncapped: the rows below lay out as a grid, so the width is used rather than
stretching each row's label away from its button. */
.settings-page { min-width: 0; }
/* A run of setting rows. The section headings and the account-history table are
siblings of these groups, so they keep the full width to themselves. */
.set-group {
display: grid;
/* min(460px, 100%) - a bare 460px minimum would hold the track wider than a
phone screen and scroll the whole page sideways. */
grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
gap: 9px;
/* Rows share one height, so cards sitting side by side match even when one
description wraps to two lines and its neighbour doesn't. */
grid-auto-rows: 1fr;
}
/* A floor as well as the shared row height: without it a section whose rows all
hold one short line would sit noticeably squatter than the rest of the page. */
.set-group .set-row { min-height: 76px; }
.set-hero {
background: linear-gradient(140deg, #082e25, #0f4c3d 82%);
border-radius: 14px;
color: #f3efe3;
padding: 22px 24px;
}
.set-hero-eyebrow {
font-size: 10.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: #7cf0c6;
font-weight: 700;
}
.set-hero-id { display: flex; align-items: center; gap: 15px; margin-top: 12px; }
.set-avatar {
width: 52px;
height: 52px;
border-radius: 14px;
background: linear-gradient(150deg, #1c8f6f, #0c5f49);
border: 1px solid rgba(124, 240, 198, .25);
display: grid;
place-items: center;
font-size: 18px;
font-weight: 750;
color: #eafff6;
flex: none;
}
/* With a brand logo the tile is just a frame for it - drop the green fill so a
transparent PNG doesn't sit on a colour it wasn't designed for. */
.set-avatar.has-logo { background: #fff; border-color: rgba(255, 255, 255, .3); padding: 6px; }
.set-avatar.has-logo img { width: 100%; height: 100%; object-fit: contain; }
.set-who strong { display: block; font-size: 19px; font-weight: 740; letter-spacing: -.01em; }
.set-who span { font-size: 12.5px; color: rgba(243, 239, 227, .66); }
.set-hero-stats {
display: flex;
gap: 30px;
flex-wrap: wrap;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(243, 239, 227, .16);
}
.set-hstat { display: flex; flex-direction: column; gap: 2px; }
.set-hstat b { font-size: 18px; font-weight: 720; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.set-hstat b.mint { color: #7cf0c6; }
.set-hstat span { font-size: 10.5px; color: rgba(243, 239, 227, .6); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.set-sec-label {
font-size: 10.5px;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--faint);
font-weight: 700;
margin: 22px 0 10px;
}
/* Full-width configuration rows. */
.set-row {
display: flex;
align-items: center;
gap: 15px;
padding: 15px 18px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
scroll-margin-top: 20px;
}
/* Spacing belongs to .set-group's gap now - keeping the margin as well would
double it between rows in the same column. */
.set-ico {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 10px;
background: var(--accent-weak);
color: var(--accent);
display: grid;
place-items: center;
}
.set-ico svg { width: 19px; height: 19px; }
.set-ico.is-gray { background: var(--panel-subtle); color: var(--muted); }
.set-row-txt { flex: 1; min-width: 0; }
.set-row-txt strong { font-size: 14px; font-weight: 700; display: block; }
.set-row-txt p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.set-row .button-sm { white-space: nowrap; }
.set-ico.is-danger { background: var(--red-weak); color: var(--red); }
/* Settings -> Diagnostics -> Background jobs: a set-row that opens in place to
list the failed jobs. The card is the frame, so the row inside drops its own. */
.set-jobs { background: #fff; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.set-jobs.has-failures { border-color: #f1c9c3; }
.set-jobs > .set-row { border: 0; background: none; }
.set-jobs-body { display: grid; gap: 8px; padding: 0 18px 16px 71px; }
/* The Review toggle is a .button-ghost, whose display beats the UA [hidden] rule. */
.set-jobs [hidden] { display: none; }
.set-jobs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.set-jobs-head strong { display: block; font-size: 13px; font-weight: 700; }
.set-jobs-head span { color: var(--muted); font-size: 12px; }
.set-jobs-list { display: grid; gap: 8px; }
.set-jobs-empty { margin: 0; padding: 16px 12px; text-align: center; color: var(--muted); font-size: 12.5px; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.set-jobs-empty strong { display: block; color: var(--text); }
@media (max-width: 640px) {
.set-row { flex-wrap: wrap; }
.set-jobs-body { padding: 0 14px 14px; }
.set-hero-stats { gap: 22px; }
}
/* ============ Notifications (slimmed) ============ */
body:has(.ntf-page) .workspace { background: #edf4f0; }
.ntf-page { min-width: 0; }
.ntf-page .back-link { margin-bottom: 16px; }
.ntf-hero, .tpl-hero, .plans-hero, .brnd-hero, .hub-hero, .einv-hero {
background: linear-gradient(140deg, #082e25, #0f4c3d 82%);
border-radius: 14px; color: #f3efe3; padding: 22px 24px; margin-bottom: 18px;
}
.ntf-hero-eyebrow, .tpl-hero-eyebrow, .plans-hero-eyebrow, .brnd-hero-eyebrow, .hub-eyebrow, .einv-hero-eyebrow {
font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #7cf0c6; font-weight: 700;
}
.ntf-hero h1, .tpl-hero h1, .plans-hero h1, .brnd-hero h1, .hub-hero h1, .einv-hero h1 { margin: 9px 0 0; font-size: 22px; font-weight: 750; letter-spacing: -.01em; color: #fff; }
.ntf-hero p, .tpl-hero p, .plans-hero p, .brnd-hero p, .hub-hero p, .einv-hero p { margin: 6px 0 0; font-size: 12.5px; color: rgba(243, 239, 227, .72); max-width: 66ch; }
.ntf-hero p a, .tpl-hero p a, .plans-hero p a { color: #7cf0c6; text-decoration: underline; }
.ntf-hero-stats, .tpl-hero-stats, .brnd-hero-stats, .hub-hero-stats, .einv-hero-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(243, 239, 227, .16); }
.ntf-hstat, .tpl-hstat, .brnd-hstat, .hub-hstat, .einv-hstat { display: flex; flex-direction: column; gap: 2px; }
.ntf-hstat b, .tpl-hstat b, .brnd-hstat b, .hub-hstat b, .einv-hstat b { font-size: 18px; font-weight: 720; font-variant-numeric: tabular-nums; }
.ntf-hstat b.mint, .tpl-hstat b.mint, .brnd-hstat b.mint, .hub-hstat b.mint, .einv-hstat b.mint { color: #7cf0c6; }
.ntf-hstat span, .tpl-hstat span, .brnd-hstat span, .hub-hstat span, .einv-hstat span { font-size: 10px; color: rgba(243, 239, 227, .6); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.ntf-sec-label, .brnd-sec-label { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin: 0 0 10px; }
/* align-items:start matters: the order-event and Slack cards are far taller than
the Email card, which would otherwise stretch to match its row. */
.ntf-stack {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
gap: 10px;
align-items: start;
/* Same measure as the matrix above, which also means auto-fit yields one column: the
Email card is a single row and Slack is a block, so side by side they left a large
empty space under Email that read as a missing card. */
max-width: 820px;
}
.ntf-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 18px; display: flex; align-items: center; gap: 14px; }
.ntf-card-tall { flex-direction: column; align-items: stretch; gap: 0; }
.ntf-card-row { display: flex; align-items: center; gap: 14px; }
.ntf-card-body { display: grid; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.ntf-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-weak); color: var(--accent); display: grid; place-items: center; }
.ntf-ico--brand { background: #fff; border: 1px solid var(--line); }
.ntf-card-txt { flex: 1; min-width: 0; }
.ntf-card-txt strong { font-size: 14px; font-weight: 700; display: block; }
.ntf-card-txt p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.ntf-card-txt p a { color: var(--accent); }
/* ---- Order-event matrix -----------------------------------------------------
Events down, audiences across. This replaced two separate per-audience checkbox
grids: the same six events rendered twice, 11 boxes across two cards of unequal
height, so "who gets told when an order is refunded?" meant comparing two grids.
A table because the data genuinely has two axes - the row and column headers are
what let a screen reader announce "Refund issued, You, checkbox". */
.evt-matrix-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
/* Capped deliberately. Full-bleed, the event name column ran ~1000px wide and the
checkboxes sat at the far right of the screen, so pairing a row with its box meant
tracking across empty space. This measure keeps label and control in one glance -
and it collapses .ntf-stack below to a single column, which removes the hole that
sat under the short Email card next to the tall Slack one. */
max-width: 820px;
}
/* A section label that follows content needs to read as a break, not as a caption for
the card above it. */
.ntf-page .evt-matrix-card + .ntf-sec-label,
.ntf-page .ntf-stack + .ntf-sec-label { margin-top: 26px; }
.evt-matrix { width: 100%; border-collapse: collapse; }
.evt-matrix th,
.evt-matrix td {
text-align: left;
padding: 11px 18px;
border-bottom: 1px solid var(--line-soft);
}
.evt-matrix thead th {
vertical-align: bottom;
background: var(--panel-subtle);
border-bottom: 1px solid var(--line);
}
/* The two audience columns are equal and narrow; the event name takes the rest, so the
checkboxes line up as a column the eye can run down. */
.evt-matrix thead th + th { width: 190px; }
.evt-matrix tbody tr:last-child th,
.evt-matrix tbody tr:last-child td { border-bottom: 0; }
.evt-matrix tbody tr:hover th,
.evt-matrix tbody tr:hover td { background: var(--hover); }
.evt-matrix tbody th { font-size: 13px; font-weight: 600; }
.evt-col-name { display: block; font-size: 12.5px; font-weight: 700; }
.evt-col-sub { display: block; font-size: 11.5px; color: var(--faint); margin-top: 1px; }
.evt-col-sub--warn { color: var(--amber); font-weight: 600; }
.evt-owner-field { max-width: 340px; }
.evt-owner-field label { font-size: 12px; }
.evt-check { display: inline-flex; cursor: pointer; padding: 2px; }
.evt-check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
/* An empty cell reads as a rendering bug, so the one event that has no owner alert
says so. */
.evt-na { font-size: 11.5px; color: var(--faint); }
/* Per-event wording, in a second row spanning the table. The divider moves onto that
row so the pair reads as one block: a rule between an event and its own editor would
split them apart. Hover stays on the event row - highlighting a form while typing in
it is noise. */
.evt-matrix tbody tr:not(.evt-copy-row) th,
.evt-matrix tbody tr:not(.evt-copy-row) td { border-bottom: 0; }
.evt-matrix tbody tr.evt-copy-row td { padding-top: 0; padding-bottom: 0; }
.evt-matrix tbody tr.evt-copy-row:hover td { background: transparent; }
.evt-matrix tbody tr.evt-copy-row:last-child td { border-bottom: 0; }
.evt-copy > summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 0 11px;
font-size: 11.5px;
font-weight: 600;
color: var(--faint);
}
.evt-copy > summary::-webkit-details-marker { display: none; }
.evt-copy > summary:hover,
.evt-copy[open] > summary { color: var(--text); }
.evt-copy-panel { display: grid; gap: 16px; padding: 2px 0 18px; }
.evt-copy-block { display: grid; gap: 10px; align-content: start; }
.evt-copy-who {
margin: 0;
font-size: 10.5px;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 700;
color: var(--faint);
}
.evt-copy-block textarea.inp { resize: vertical; min-height: 84px; }
.evt-copy-hint .mono { margin-right: 6px; white-space: nowrap; }
/* Two audiences side by side once there's room; the hint runs under both. */
@media (min-width: 760px) {
.evt-copy-panel { grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.evt-copy-hint { grid-column: 1 / -1; }
/* One audience (Order fulfilled) - a single column capped so the fields don't
stretch the width of the table. */
.evt-copy-panel--single { grid-template-columns: minmax(0, 520px); }
}
.evt-matrix-notes {
display: grid;
gap: 8px;
padding: 13px 18px 15px;
border-top: 1px solid var(--line);
background: var(--panel-subtle);
}
.evt-warn {
display: flex;
align-items: flex-start;
gap: 7px;
margin: 0;
font-size: 12px;
line-height: 1.5;
font-weight: 600;
color: var(--amber);
}
.evt-warn svg { flex: none; margin-top: 2px; }
/* Below sm a three-column matrix stops being readable, so each event becomes its own
block with its audience labels shown inline (the same shape .table-cards uses). */
@media (max-width: 639px) {
.evt-matrix thead { display: none; }
.evt-matrix,
.evt-matrix tbody,
.evt-matrix tr,
.evt-matrix th,
.evt-matrix td { display: block; width: auto; }
.evt-matrix tbody tr {
padding: 4px 0 10px;
border-bottom: 1px solid var(--line-soft);
}
.evt-matrix tbody tr:last-child { border-bottom: 0; }
.evt-matrix tbody th { padding-bottom: 4px; border-bottom: 0; }
.evt-matrix tbody td {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 5px 18px;
border-bottom: 0;
}
.evt-matrix tbody td::before {
content: attr(data-label);
font-size: 12px;
color: var(--muted);
}
}
/* ============ Brand (settings sub-page) ============ */
body:has(.brnd-page) .workspace { background: #edf4f0; }
.brnd-page { min-width: 0; }
.brnd-page .back-link { margin-bottom: 16px; }
.brnd-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.brnd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.brnd-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 18px; }
.brnd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brnd-card-head strong { font-size: 14px; font-weight: 700; }
/* Taller now the cards are full width - a bigger logo/signature preview is more
useful than a wider band of empty card. */
.brnd-preview {
margin: 13px 0 11px; height: 150px; border-radius: 12px; border: 1px dashed var(--line);
background: #f7faf8; display: grid; place-items: center; padding: 12px; overflow: hidden;
}
.brnd-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brnd-initials {
width: 56px; height: 56px; border-radius: 13px; background: var(--accent); color: #d8fdec;
display: grid; place-items: center; font-size: 19px; font-weight: 700; letter-spacing: .02em;
}
.brnd-empty { font-size: 12.5px; color: var(--faint); }
.brnd-meta { margin: 0 0 11px; font-size: 12.5px; color: var(--muted); }
.brnd-note {
display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px;
border-radius: 12px; background: var(--accent-weak); color: var(--muted); font-size: 12.5px; line-height: 1.5;
}
.brnd-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--accent); }
.brnd-note a { color: var(--accent); }
.brnd-page .notif-actions { margin-top: 18px; }
@media (max-width: 640px) {
.brnd-grid { grid-template-columns: 1fr; }
}
/* ============ Templates hub (every document type) ============ */
/* The hero is the shared immersive band (see .hub-hero above, grouped with the
other four). Everything below is the family/card grid, which is the hub's own. */
body:has(.hub-page) .workspace { background: #edf4f0; }
.hub-page { min-width: 0; }
.hub-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.hub-hero-main { min-width: 0; }
.hub-family { margin-top: 22px; }
/* The family label reads as a divider so the four groups scan as one list with
sections, not four unrelated panels. */
.hub-family-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.hub-family-head h2 { margin: 0; font-size: 13px; font-weight: 750; letter-spacing: .01em; }
.hub-family-note { font-size: 11.5px; color: var(--faint); }
.hub-family-note::before { content: "· "; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
/* The cell, not the card, is the grid item: an assignable type carries a picker
form beside its card, and the two must share one column. */
.hub-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hub-cell > .hub-card { flex: 1 1 auto; }
.hub-card {
display: flex; flex-direction: column; gap: 7px; padding: 15px 16px 14px;
border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
color: var(--text); text-decoration: none; min-width: 0;
}
a.hub-card:hover { border-color: var(--accent); }
a.hub-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.hub-card-top b { font-size: 14px; font-weight: 700; letter-spacing: -.008em; line-height: 1.3; }
.hub-crown { flex: 0 0 auto; margin-top: 2px; }
.hub-card-blurb { font-size: 12px; color: var(--muted); line-height: 1.5; }
.hub-card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 18px; }
.hub-card-count {
font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--accent); background: var(--accent-weak); border-radius: 4px; padding: 2px 6px;
}
.hub-card-count.is-muted { color: var(--faint); background: var(--hover); }
.hub-card-default { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hub-card-shares { font-size: 11px; color: var(--faint); font-style: italic; }
.hub-card-go { margin-top: auto; padding-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--accent); }
/* Locked and planned are different states and must not look alike: locked is a
real destination behind a plan, planned is not a destination at all. */
.hub-card.is-locked .hub-card-go { color: var(--muted); }
.hub-card.is-planned { border-style: dashed; background: var(--panel-subtle); }
.hub-card.is-planned .hub-card-top b { color: var(--muted); }
.hub-phase {
flex: 0 0 auto; font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
color: var(--muted); background: var(--hover); border-radius: 4px; padding: 2px 5px;
}
/* Per-type template picker. Reads as an attachment to the card above it, not a
second card - hence no border on top and a tighter, quieter frame. */
/* Grid, not flex: in a 232px column a row of label + select + button starved the
select until "Same as invoice" truncated to "Same as invoic". The label spans its
own line so the select keeps the full width beside the button. */
.hub-assign {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 6px; align-items: center;
padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--panel-subtle);
}
.hub-assign label {
grid-column: 1 / -1; font-size: 10px; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: var(--faint);
}
.hub-assign select {
min-width: 0; width: 100%; min-height: 30px; font-size: 12px;
border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 6px; background: #fff; color: var(--text);
}
.hub-foot { margin: 24px 0 0; font-size: 12px; color: var(--faint); max-width: 72ch; }
.hub-foot a { color: var(--accent); }
/* ============ Invoice templates (gallery) ============ */
body:has(.tpl-page) .workspace { background: #edf4f0; }
.tpl-page .back-link { margin-bottom: 16px; }
.tpl-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.tpl-hero-main { min-width: 0; }
.tpl-hero-locked { display: block; font-size: 12px; color: rgba(243, 239, 227, .72); margin-bottom: 8px; }
/* "New template" tile that matches the card grid. */
/* display:block (not flex) so the native collapse keeps the create
form hidden until the summary is clicked; the summary centers itself. */
.tpl-card-new { border: 1.5px dashed var(--line); border-radius: var(--radius); background: #fff; display: block; min-height: 190px; }
.tpl-card-new:hover { border-color: var(--accent); }
.tpl-card-new[open] { padding: 16px; }
.tpl-new-summary { list-style: none; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--accent); font-weight: 700; font-size: 13px; cursor: pointer; height: 100%; justify-content: center; min-height: 190px; text-align: center; }
.tpl-new-summary::-webkit-details-marker { display: none; }
/* When open the summary becomes a compact header above the form. */
.tpl-card-new[open] .tpl-new-summary { display: none; }
.tpl-new-plus { font-size: 26px; line-height: 1; }
/* Hidden until the card is open - an explicit display beats the UA "hide closed
children" rule, so it must be gated on [open], not left as grid. */
.tpl-new-form { display: none; gap: 8px; }
.tpl-card-new[open] .tpl-new-form { display: grid; }
.tpl-new-form input { min-height: 34px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; }
/* ============ Plans (comparison) ============ */
body:has(.plans-page) .workspace { background: #edf4f0; }
.plans-page .back-link { margin-bottom: 16px; }
.plans-hero { text-align: center; }
.plans-hero p { margin-left: auto; margin-right: auto; }
/* Four tiers: 4-up on a wide screen, 2x2 rather than 3+1 when it can't fit -
a lone card on its own row reads as a mistake. */
/* Single call to action above the cards, for the Shopify-hosted plan flow. */
.plans-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-bottom: 18px;
text-align: center;
}
.plans-cta .button { min-width: 240px; justify-content: center; }
.plans-cta p { font-size: 13px; margin: 0; max-width: 52ch; }
.plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 1180px) { .plans-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .plans-grid { grid-template-columns: 1fr; } }
.plans-page .plan-card { display: flex; flex-direction: column; }
.plans-page .plan-tag.is-current { background: #0f4c3d; color: #7cf0c6; }
.plans-page .plan-features { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 8px; }
.plans-page .plan-features li { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--text); }
.plans-page .plan-features svg { color: var(--accent); flex: none; margin-top: 2px; }
.plans-page .plan-cta { margin-top: auto; }
.plans-page .plan-cta .button, .plans-page .plan-cta form, .plans-page .plan-cta .button-ghost { width: 100%; justify-content: center; }
.plans-page .plan-cta button { width: 100%; }
/* ===================== Delivery (Invoice sending) - immersive ===================== */
body:has(.dlv-page) .workspace { background: #edf4f0; }
/* Full width, unlike the other settings pages: the rail plus a fields/preview
split uses everything it's given. The pane body caps itself further down so
an ultra-wide monitor doesn't produce a 2,000px subject input. */
.dlv-page { max-width: none; }
.dlv-page .back-link { margin-bottom: 16px; }
.dlv-page .dlv-hero { margin-bottom: 18px; }
.dlv-hero {
background: linear-gradient(140deg, #082e25, #0f4c3d 82%);
border-radius: 14px;
color: #f3efe3;
padding: 22px 24px;
margin-bottom: 18px;
}
.dlv-hero-eyebrow {
font-size: 10.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: #7cf0c6;
font-weight: 700;
}
.dlv-hero h1 { margin: 9px 0 0; font-size: 22px; font-weight: 750; letter-spacing: -.01em; color: #fff; }
.dlv-hero p { margin: 6px 0 0; font-size: 12.5px; color: rgba(243, 239, 227, .72); max-width: 64ch; }
/* The delivery form is an anchor only - its fields live inside the channel panes
and associate through form="dlv-form", because those panes carry POST forms of
their own and forms can't nest. It must take up no space. */
.dlv-anchor { display: block; margin: 0; padding: 0; }
/* ---- Console: destination rail + detail pane ---------------------------- */
.cn-shell {
display: grid;
grid-template-columns: 236px minmax(0, 1fr);
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
min-height: 420px;
}
.cn-rail {
border-right: 1px solid var(--line);
background: var(--panel-subtle);
padding: 12px;
}
.cn-rail-label {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10px;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--faint);
font-weight: 600;
padding: 4px 8px 9px;
}
.cn-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
text-align: left;
padding: 9px 10px;
border-radius: 9px;
border: 1px solid transparent;
background: none;
font: inherit;
color: var(--text);
cursor: pointer;
}
.cn-item + .cn-item { margin-top: 3px; }
.cn-item:hover { background: #fff; }
.cn-item[aria-selected="true"] { background: #fff; border-color: var(--line); }
.cn-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cn-item-ico {
width: 26px;
height: 26px;
border-radius: 7px;
flex: none;
display: grid;
place-items: center;
border: 1px solid var(--line);
background: #fff;
}
.cn-item-ico svg { display: block; }
.cn-item-txt { min-width: 0; flex: 1; }
.cn-item-txt strong { display: block; font-size: 12.5px; font-weight: 650; }
/* The state line is the point of this layout: it answers "is this destination
actually working?" without opening the pane. Mono so the three lines align. */
.cn-item-txt span {
display: block;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10.5px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cn-item[data-state="on"] .cn-item-txt span { color: var(--green); }
.cn-item[data-state="todo"] .cn-item-txt span { color: var(--amber); }
.cn-led { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #d7dcda; }
.cn-item[data-state="on"] .cn-led { background: var(--accent); }
.cn-item[data-state="todo"] .cn-led { background: var(--amber); }
.cn-pane { display: none; padding: 20px 22px; min-width: 0; }
.cn-pane.is-on { display: block; }
.cn-pane-head {
display: flex;
align-items: flex-start;
gap: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line-soft);
}
.cn-pane-title { flex: 1; min-width: 0; }
.cn-pane-title h2 { font-size: 17px; font-weight: 700; }
.cn-pane-title p { margin-top: 3px; font-size: 12px; color: var(--muted); max-width: 62ch; }
/* The cap that keeps a full-width page usable: past this the inputs get harder
to read, not easier, so the pane stops growing and the page gutters instead. */
.cn-pane-body { display: grid; gap: 16px; padding-top: 16px; max-width: 1560px; }
/* Grid items stretch, which turns a lone Connect button into a full-width slab. */
.cn-pane-body > .button,
.cn-pane-body > .button-primary,
.cn-pane-body > .button-secondary,
.cn-block-body > .button,
.cn-block-body > .button-primary,
.cn-block-body > .button-secondary { justify-self: start; }
/* Email isn't connected: sends look fine but sit in the outbox, so say so where
the merchant is about to write the copy. */
.cn-notice {
font-size: 12.5px;
line-height: 1.5;
color: var(--amber);
background: var(--amber-weak);
border: 1px solid color-mix(in srgb, var(--amber) 25%, transparent);
border-radius: var(--radius-sm);
padding: 10px 12px;
}
/* A broken connection the merchant has to repair before the pane's settings mean
anything - so it sits above them and carries its own fix. Red-weak rather than
the full-bleed .reauth-banner treatment: this is scoped to one destination, not
to the whole app. */
.cn-alert {
display: grid;
gap: 8px;
justify-items: start;
background: var(--red-weak);
border: 1px solid #f1c9c3;
border-radius: 9px;
padding: 12px 13px;
color: var(--red);
font-size: 13px;
}
.cn-alert strong { font-weight: 760; }
.cn-alert p { margin: 0; color: inherit; }
/* A settled fact plus the one action that changes it: From address, workspace,
Drive account, Drive folder. */
.cn-kv {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
background: var(--panel-subtle);
border: 1px solid var(--line);
border-radius: 9px;
padding: 9px 11px;
}
.cn-kv-label {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10.5px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
flex: none;
}
.cn-kv code {
font-size: 12px;
padding: 2px 6px;
border-radius: 4px;
background: rgba(0, 0, 0, .04);
word-break: break-all;
}
.cn-kv-action { margin-left: auto; flex: none; }
.cn-kv-action .button-link,
.cn-kv .button-link {
background: none;
border: 0;
padding: 0;
font: inherit;
font-size: 12px;
color: var(--muted);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.cn-kv .button-link:hover { color: var(--text); }
/* Documents share one form; only the selected one is on screen. */
.cn-docs {
display: flex;
gap: 4px;
flex-wrap: wrap;
border-bottom: 1px solid var(--line-soft);
}
.cn-doc {
font: inherit;
font-size: 12px;
font-weight: 600;
color: var(--muted);
cursor: pointer;
border: 0;
background: none;
padding: 6px 10px 8px;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.cn-doc[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.cn-doc:hover { color: var(--text); }
.cn-doc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.cn-split {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: 18px;
align-items: start;
}
.cn-docfields { display: grid; gap: 14px; min-width: 0; }
.cn-docpanel { display: grid; gap: 14px; }
/* A class with a display wins over the UA sheet's [hidden] rule, so the
unselected documents would all stay on screen without this. */
.cn-docpanel[hidden],
.cn-pane[hidden] { display: none; }
/* The gift receipt's printed lines aren't email copy, so they sit apart. */
.cn-subgroup {
display: grid;
gap: 14px;
border-top: 1px solid var(--line-soft);
padding-top: 14px;
}
.cn-subgroup-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--muted);
}
.cn-narrow { max-width: 360px; }
/* Sending domain, nested inside the Email pane - it's the From address, not a
destination of its own. */
.cn-block {
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.cn-block-head {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
background: var(--panel-subtle);
border-bottom: 1px solid var(--line);
}
.cn-block-head h3 { font-size: 13.5px; font-weight: 700; flex: 1; }
.cn-block-body { padding: 14px; display: grid; gap: 12px; }
.cn-inline-form { display: grid; gap: 12px; justify-items: start; }
.cn-quiet-form { justify-self: start; }
.cn-quiet-form .button-link {
background: none;
border: 0;
padding: 0;
font: inherit;
font-size: 12px;
color: var(--muted);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.cn-quiet-form .button-link:hover { color: var(--text); }
/* Jumped to from "Use your own domain" - a brief flag so the target is obvious. */
.cn-block.is-flagged { border-color: var(--accent); }
.cn-block.is-flagged .cn-block-head { background: var(--accent-weak); }
/* ---- Empty states: a destination with nothing to configure yet -----------
Rather than a lone button on a white field, the pane previews the artefact
the merchant would get - the Slack alert, the Drive folder - because "what
does this actually produce?" is the question stopping them from connecting. */
.es {
min-height: 340px;
display: grid;
place-items: center;
padding: 24px 20px;
}
.es-inner {
width: 100%;
max-width: 620px;
display: grid;
justify-items: center;
gap: 15px;
text-align: center;
}
/* Holds the mock. The wash off the bottom is what marks it as a preview
rather than live data. */
.es-stage {
width: 100%;
position: relative;
padding: 20px;
border-radius: 12px;
background: linear-gradient(180deg, var(--panel-subtle), #fff);
border: 1px solid var(--line-soft);
}
.es-stage::after {
content: "";
position: absolute;
inset: 0;
border-radius: 12px;
pointer-events: none;
background: linear-gradient(180deg, transparent 55%, rgba(255, 255, 255, .78));
}
.es-tag {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--faint);
font-weight: 600;
}
.es-copy h3 { font-size: 16px; font-weight: 700; }
.es-copy p {
margin-top: 5px;
font-size: 12.5px;
color: var(--muted);
max-width: 52ch;
margin-inline: auto;
}
/* Slack message mock. Desaturated so it reads as an example, not a live feed. */
.es-slack {
display: flex;
gap: 10px;
text-align: left;
filter: saturate(.55);
opacity: .88;
}
.es-slack-avatar {
width: 32px;
height: 32px;
border-radius: 7px;
flex: none;
background: var(--forest-2, #0f4c3d);
display: grid;
place-items: center;
}
.es-slack-body { min-width: 0; flex: 1; }
.es-slack-meta {
display: flex;
align-items: baseline;
gap: 7px;
flex-wrap: wrap;
}
.es-slack-name { font-size: 13px; font-weight: 700; color: #1d1c1d; }
.es-slack-badge {
font-size: 9px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
background: #e8e8e8;
color: #616061;
border-radius: 3px;
padding: 1px 4px;
}
.es-slack-time { font-size: 11px; color: #616061; }
.es-slack-lines { margin-top: 3px; display: grid; gap: 2px; }
.es-slack-lines p {
font-size: 12.5px;
color: #1d1c1d;
display: flex;
gap: 6px;
align-items: baseline;
}
.es-slack-em { flex: none; font-size: 12px; }
/* Drive folder mock. */
.es-drive { text-align: left; filter: saturate(.55); opacity: .92; }
.es-drive-crumb {
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
color: var(--muted);
padding-bottom: 9px;
border-bottom: 1px solid var(--line);
}
.es-drive-row {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 2px;
border-bottom: 1px solid var(--line-soft);
}
.es-drive-row:last-child { border-bottom: 0; }
.es-drive-row.is-ghost { color: #cdd4d1; }
.es-drive-name {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11.5px;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Stands in for "and the ones after it" without inventing filenames. */
.es-drive-bar {
height: 7px;
border-radius: 999px;
background: var(--line);
}
@media (max-width: 639px) {
.es { min-height: 0; padding: 18px 4px; }
.es-stage { padding: 15px; }
}
@media (max-width: 1023px) {
.cn-split { grid-template-columns: minmax(0, 1fr); }
.mail-prev { position: static; }
}
@media (max-width: 767px) {
.cn-shell { grid-template-columns: minmax(0, 1fr); }
.cn-rail { border-right: 0; border-bottom: 1px solid var(--line); }
.cn-pane { padding: 16px; }
}
.ph-label {
margin-top: 12px;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--faint);
font-weight: 600;
}
.ph-chip {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11.5px;
color: var(--muted);
background: #fff;
border: 1px solid var(--line);
border-radius: 6px;
padding: 3px 7px;
}
/* Connected-account block (Slack): status row, actions, and note aligned. */
.notif-connect {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.notif-connect-status {
margin: 0;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text);
}
.notif-connect-dot {
flex: 0 0 auto;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 3px var(--accent-weak);
}
.notif-connect .button-inline {
margin: 0;
}
.notif-connect-note {
margin: 0;
font-size: 12.5px;
line-height: 1.5;
}
.notif-actions {
margin-top: 22px;
}
/* Toggle switch */
.switch {
position: relative;
display: inline-block;
width: 38px;
height: 22px;
flex: 0 0 auto;
}
.switch input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.switch-track {
position: absolute;
inset: 0;
background: var(--line);
border-radius: 999px;
transition: background 0.15s ease;
pointer-events: none;
}
.switch-track::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
transition: transform 0.15s ease;
}
.switch input:checked + .switch-track {
background: var(--accent);
}
.switch input:checked + .switch-track::before {
transform: translateX(16px);
}
.switch input:focus-visible + .switch-track {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ===================== Support ===================== */
.support-head {
margin-bottom: 28px;
}
.support-head h1 {
margin: 0;
font-size: 26px;
font-weight: 600;
letter-spacing: -0.02em;
}
.support-head p {
margin: 8px 0 0;
color: var(--muted);
font-size: 14px;
}
.support-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 24px;
align-items: start;
}
.support-card {
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
padding: 22px 24px;
}
.support-card-head {
margin-bottom: 18px;
}
.support-card-head h2 {
margin: 0 0 4px;
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
}
.support-card-head p {
margin: 0;
color: var(--muted);
font-size: 13px;
}
.support-actions {
margin-top: 16px;
}
.support-rail {
display: grid;
gap: 16px;
}
.support-rail .support-card {
padding: 20px;
}
.support-card h3 {
margin: 0 0 4px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text);
}
.support-sub {
margin: 0;
color: var(--muted);
font-size: 12.5px;
}
.support-reach {
margin-top: 6px;
}
.support-chan {
display: flex;
align-items: center;
gap: 13px;
padding: 14px 0;
border-top: 1px solid var(--line-soft);
color: inherit;
}
.support-chan:first-child {
border-top: 0;
}
.support-ico {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 10px;
background: var(--accent-weak);
color: var(--accent);
display: grid;
place-items: center;
}
.support-ico svg {
width: 19px;
height: 19px;
}
.support-chan strong {
display: block;
font-size: 14px;
}
.support-chan span {
color: var(--muted);
font-size: 12.5px;
}
.support-faq {
margin-top: 24px;
}
.support-faq .faq {
margin-top: 6px;
}
.support-faq details {
border-top: 1px solid var(--line-soft);
}
.support-faq details:first-child {
border-top: 0;
}
.support-faq summary {
list-style: none;
cursor: pointer;
padding: 15px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-size: 14px;
font-weight: 500;
}
.support-faq summary::-webkit-details-marker {
display: none;
}
.support-faq summary::after {
content: "";
width: 9px;
height: 9px;
border-right: 1.6px solid var(--faint);
border-bottom: 1.6px solid var(--faint);
transform: rotate(45deg);
transition: transform 0.15s ease;
flex: 0 0 auto;
margin-right: 3px;
}
.support-faq details[open] summary::after {
transform: rotate(-135deg);
}
.support-faq details p {
margin: 0 0 15px;
color: var(--muted);
font-size: 13px;
line-height: 1.55;
max-width: 90%;
}
@media (max-width: 900px) {
.support-layout {
grid-template-columns: minmax(0, 1fr);
}
}
.order-missing-state {
border-color: #f3c9c2;
background: var(--red-weak);
}
.preview-card {
padding: 14px;
}
.preview-card h3 {
font-size: 14px;
font-weight: 760;
}
.split-layout {
display: grid;
grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.split-layout > .section-card {
max-height: calc(100vh - 118px);
overflow: auto;
}
.invoice-editor-shell {
gap: 16px;
}
/* Keep Cancel/Save reachable. The shell is the scroll container, so with a long
section open the actions used to sit below its fold - you had to scroll the
rail back down to save what you had just changed. */
.invoice-editor-shell > .button-inline:last-child {
position: sticky;
bottom: -16px;
z-index: 1;
/* Negative margins match .section-card's 16px padding so the bar spans the
full card width and sits flush with its bottom edge. */
margin: 0 -16px -16px;
padding: 12px 16px;
background: var(--panel);
border-top: 1px solid var(--line-soft);
}
/* Group the editor accordions into a few labelled clusters (Design / Content /
Line items / Layout) so the panel reads as 4 groups, not a wall of sections. */
.editor-group {
display: grid;
gap: 8px;
}
.editor-group-title {
margin: 2px 2px 1px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--faint);
}
/* The invoice and packing editor sections: , so the
browser keeps one open at a time. */
.acc-header {
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
cursor: pointer;
color: var(--text);
}
.acc-header:hover .acc-chevron {
color: var(--text);
}
.acc-header:focus-visible {
outline: 2px solid var(--accent-weak);
outline-offset: 4px;
border-radius: 4px;
}
.acc-chevron {
flex: none;
color: var(--muted);
transition: transform 0.18s ease;
}
.acc-header::-webkit-details-marker {
display: none;
}
.acc-item[open] .acc-chevron {
transform: rotate(180deg);
}
.acc-body {
margin-top: 12px;
}
/* Inline "this is on tier X" chip, for locks that sit in a sentence rather
than on a card corner. */
.plan-badge {
display: inline-flex;
align-items: center;
border-radius: 6px;
padding: 2px 7px;
margin-right: 6px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--accent-weak);
color: var(--accent);
}
/* One-row, horizontally scrollable layout filter (was a 3-row wrap). */
.preset-filter {
display: flex;
flex-wrap: nowrap;
gap: 6px;
overflow-x: auto;
padding-bottom: 3px;
scrollbar-width: none;
}
.preset-filter::-webkit-scrollbar {
display: none;
}
.preset-chip {
flex: none;
font: inherit;
font-size: 11px;
font-weight: 640;
color: var(--muted);
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
padding: 4px 10px;
cursor: pointer;
white-space: nowrap;
}
.preset-chip:hover {
border-color: var(--accent);
color: var(--accent);
}
/* Palette filter chips carry their own colour dot, so a merchant picks a
palette by eye rather than by name. */
.preset-chip-dot {
width: 10px;
height: 10px;
border-radius: 999px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
/* A palette the plan doesn't include still filters (so the locked cards can be
found and their upgrade badge read), but reads as unavailable. */
.preset-chip.is-locked {
opacity: 0.55;
}
/* The other filter rows hold a handful of chips and scroll sideways. The palette
row holds 21, which is unusable as a scroll strip, so it wraps instead. */
.lib-preset-more {
align-self: center;
margin-top: 10px;
}
.preset-chip[aria-pressed="true"] {
color: #fff;
background: var(--line-strong);
border-color: var(--line-strong);
}
/* ---- Library "Start from a preset": minimal swatch + name cards ---- */
.lib-preset-scroll {
max-height: 430px;
overflow-y: auto;
margin: 0 -4px;
padding: 2px 4px;
}
.lib-preset-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 8px;
}
.lib-preset {
position: relative;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 11px;
text-align: left;
font: inherit;
color: var(--text);
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
}
.lib-preset:hover {
border-color: var(--accent);
background: var(--accent-weak);
}
.lib-preset-swatch {
flex: none;
width: 30px;
height: 30px;
border-radius: 8px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.lib-preset-text {
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.lib-preset-name {
font-weight: 680;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lib-preset-meta {
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.lib-preset.is-locked {
cursor: not-allowed;
}
.lib-preset.is-locked:hover {
border-color: var(--line);
background: #fff;
}
.lib-preset.is-locked .lib-preset-swatch {
filter: grayscale(1);
opacity: 0.55;
}
.lib-preset.is-locked .lib-preset-name {
color: var(--muted);
}
/* --- Block builder ------------------------------------------------------
Block content classes (.bb-text/-img/-cols/-items/-totals/-divider) are
shared by the printed invoice (partials/invoice_blocks.erb) and the editor
canvas; the .bb-block chrome is editor-only. */
.bb-text { white-space: pre-line; }
.bb-img { max-width: 100%; display: inline-block; }
.bb-cols { display: grid; gap: 20px; }
.bb-cols-2 { grid-template-columns: 1fr 1fr; }
.bb-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.bb-items { width: 100%; border-collapse: collapse; margin: 4px 0; }
.bb-items th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; background: var(--invoice-accent, #147c64); color: #fff; padding: 7px 8px; }
.bb-items td { padding: 8px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.bb-items .r { text-align: right; }
.bb-totals { max-width: 260px; margin-left: auto; }
.bb-total-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; }
.bb-total-grand { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 7px; font-weight: 700; color: var(--invoice-accent, #147c64); }
.bb-divider { border: 0; }
.bb-muted { color: var(--muted); font-style: italic; }
.bb-doc { color: #24282d; font-family: var(--invoice-font, inherit); }
.bb-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bb-brandbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; padding: 14px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 16px; }
.bb-brandbar .field { margin: 0; }
.bb-brandbar input[type="text"] { min-width: 160px; }
.bb-logo-thumb { height: 30px; margin-left: 8px; vertical-align: middle; }
.bb-editor-grid { display: grid; grid-template-columns: 150px minmax(0, 1fr) 260px; gap: 18px; align-items: start; }
.bb-palette { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 12px; }
.bb-palette .eyebrow { margin-bottom: 2px; }
.bb-canvas-wrap { background: #ececea; border: 1px solid var(--line); border-radius: 12px; padding: 20px; max-height: 80vh; overflow: auto; }
.bb-canvas { background: #fff; border-radius: 4px; padding: 40px 44px; box-shadow: 0 1px 3px rgba(0,0,0,.08); font-size: 13px; color: #24282d; }
.bb-props { position: sticky; top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 14px; max-height: 80vh; overflow: auto; }
.bb-props-empty { color: var(--muted); font-size: 13px; }
.bb-props .field { margin-bottom: 10px; }
.bb-props textarea { min-height: 80px; }
.bb-token-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 12px; }
.bb-token-chips .ph-label { width: 100%; margin: 0 0 2px; }
.bb-chip { border: 1px solid var(--line); background: #fff; border-radius: 20px; padding: 1px 8px; font-size: 11px; color: var(--muted); cursor: pointer; }
.bb-chip:hover { color: var(--text); border-color: var(--accent); }
.bb-block { position: relative; border: 1px dashed transparent; border-radius: 6px; margin: 2px 0; }
.bb-block:hover { border-color: var(--line); }
.bb-block.is-selected { border-color: var(--accent); border-style: solid; }
.bb-block.is-dragging { opacity: .5; }
.bb-block-bar { display: none; align-items: center; gap: 6px; position: absolute; top: -11px; right: 6px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 1px 6px; font-size: 11px; z-index: 2; }
.bb-block:hover .bb-block-bar, .bb-block.is-selected .bb-block-bar { display: flex; }
.bb-block-type { color: var(--muted); text-transform: capitalize; }
.bb-drag { cursor: grab; color: var(--muted); }
.bb-block-actions button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 12px; padding: 0 2px; }
.bb-block-actions button:hover { color: var(--text); }
.bb-block-body { cursor: pointer; padding: 2px; }
@media (max-width: 1000px) {
.bb-editor-grid { grid-template-columns: 1fr; }
.bb-palette { position: static; flex-direction: row; flex-wrap: wrap; }
.bb-props { position: static; }
}
/* "Show all N presets" - spans the grid; hidden once expanded or when filtering. */
.style-tool-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
/* Bundled IBM Plex families (app/assets/fonts, OFL) so the on-screen
invoice renders the SAME face the Prawn PDF embeds. Only the family actually
referenced by --invoice-font is fetched by the browser. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/IBMPlexSans-Regular-dc244000.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/IBMPlexSans-Bold-59908dd7.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/IBMPlexSans-Italic-e7ed684d.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url("/assets/IBMPlexSans-BoldItalic-b67bbef8.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/IBMPlexSerif-Regular-1f61978b.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/IBMPlexSerif-Bold-580fe936.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/IBMPlexSerif-Italic-aae1d91c.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Serif"; font-style: italic; font-weight: 700; font-display: swap; src: url("/assets/IBMPlexSerif-BoldItalic-c35a2ff6.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/IBMPlexMono-Regular-923ca06c.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/IBMPlexMono-Bold-ac6d30f8.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/IBMPlexMono-Italic-895c9a28.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 700; font-display: swap; src: url("/assets/IBMPlexMono-BoldItalic-e02c9d85.ttf") format("truetype"); }
/* Display-only script face for the calligraphic wordmark on the
`script_aesthetic` format. Regular only - see InvoiceFonts::SCRIPT_FAMILY. */
@font-face { font-family: "Invoice Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/GreatVibes-Regular-056a76e5.ttf") format("truetype"); }
/* The A-J theme faces (InvoiceFonts::THEME_STYLE_FILES, all OFL). Declared here
because InvoiceFonts.theme_css_stack leads with these family names, and a
family the browser cannot load falls back to a system face WITHOUT any error -
the HTML would quietly stop matching the PDF, which is the one thing the
self-hosting is for.
Weight RANGES, not single weights: each file is one static cut, so the range
maps every weight a theme might ask for onto the nearest cut we actually ship
rather than letting the browser synthesise a bolder face than Prawn embeds.
Where a family has no true italic the italic rule points at the upright file,
mirroring how InvoiceFonts aliases those slots - a browser-synthesised oblique
would look nothing like the PDF. */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("/assets/SpaceGrotesk-Medium-c65dbd35.ttf") format("truetype"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/assets/SpaceGrotesk-Bold-5f81027f.ttf") format("truetype"); }
@font-face { font-family: "Space Grotesk"; font-style: italic; font-weight: 300 500; font-display: swap; src: url("/assets/SpaceGrotesk-Medium-c65dbd35.ttf") format("truetype"); }
@font-face { font-family: "Space Grotesk"; font-style: italic; font-weight: 600 700; font-display: swap; src: url("/assets/SpaceGrotesk-Bold-5f81027f.ttf") format("truetype"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("/assets/Newsreader-Regular-396caf21.ttf") format("truetype"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/assets/Newsreader-SemiBold-217eda82.ttf") format("truetype"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 500; font-display: swap; src: url("/assets/Newsreader-Italic-19b1a9e7.ttf") format("truetype"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 600 700; font-display: swap; src: url("/assets/Newsreader-SemiBoldItalic-a64c3cc8.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 300; font-display: swap; src: url("/assets/Manrope-Light-77c6d5c7.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/Manrope-Regular-9b466567.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("/assets/Manrope-Bold-2740f0f8.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: italic; font-weight: 200 500; font-display: swap; src: url("/assets/Manrope-Regular-9b466567.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-style: italic; font-weight: 600 800; font-display: swap; src: url("/assets/Manrope-Bold-2740f0f8.ttf") format("truetype"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("/assets/Fraunces-Medium-77b3edbc.ttf") format("truetype"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/assets/Fraunces-SemiBold-aba81d1d.ttf") format("truetype"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 500; font-display: swap; src: url("/assets/Fraunces-Medium-77b3edbc.ttf") format("truetype"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 600 700; font-display: swap; src: url("/assets/Fraunces-SemiBold-aba81d1d.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("/assets/Inter-Regular-912de628.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/Inter-SemiBold-e66a0128.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("/assets/Inter-Bold-8ac93012.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 300 500; font-display: swap; src: url("/assets/Inter-Regular-912de628.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 600 800; font-display: swap; src: url("/assets/Inter-Bold-8ac93012.ttf") format("truetype"); }
.template-preview {
--invoice-accent: var(--accent);
--invoice-font: "IBM Plex Sans", "Aptos", "Segoe UI", sans-serif;
position: sticky;
top: 94px;
padding: 28px;
color: #24282d;
background: #ffffff;
font-family: var(--invoice-font);
transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.preview-header {
display: flex;
justify-content: space-between;
gap: 16px;
padding-bottom: 16px;
border-bottom: 2px solid #24282d;
}
.preview-meta,
.totals-stack {
display: grid;
gap: 5px;
}
.preview-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin: 22px 0;
}
.preview-line-items {
width: 100%;
border-collapse: collapse;
}
.preview-line-items th,
.preview-line-items td {
padding: 9px 0;
border-bottom: 1px solid var(--line-soft);
}
.preview-brand {
display: flex;
align-items: flex-start;
gap: 14px;
}
.preview-logo-mark {
display: inline-grid;
place-items: center;
min-width: 42px;
height: 42px;
padding: 0 10px;
border-radius: 12px;
color: #fff;
background: var(--invoice-accent);
font-size: 15px;
font-weight: 800;
letter-spacing: 0.04em;
}
/* The logo is either the image OR the monogram, never both. The display rules
above would otherwise beat the [hidden] attribute's UA display:none, so the
hidden one must be explicitly removed. */
.preview-logo-mark[hidden],
.preview-logo-img[hidden] {
display: none;
}
/* Status banner: what this document is about, stated above the parties. Matches
InvoicePdf#render_status_banner - a tinted full-width strip in the accent. Only
payment reminders carry one today; credit notes will reuse it. */
.preview-status-banner {
margin: 14px 0 0;
padding: 6px 10px;
border-radius: 4px;
color: var(--invoice-accent);
background: color-mix(in srgb, var(--invoice-accent) 9%, white);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
}
/* On a reminder the emphasized figure is the BALANCE, so the invoice total steps
back rather than competing with it. */
.totals-stack.is-reminder span[data-section="totals"]:not(.totals-owing) {
color: var(--muted);
font-weight: 400;
}
.totals-stack .totals-owing {
margin-top: 3px;
padding-top: 6px;
border-top: 1px solid var(--line-soft);
color: var(--invoice-accent);
font-weight: 700;
}
/* "This template is what your Invoice, Receipt and Credit Note go out as." */
.format-serves { margin: -4px 0 0; font-size: 12px; line-height: 1.55; }
.format-serves strong { color: var(--text); font-weight: 650; }
.format-serves a { color: var(--accent); margin-left: 4px; }
/* Payment-reminder cadence: three short numbers that read as one sentence. */
.reminder-cadence { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-subtle); }
.reminder-cadence[hidden] { display: none; }
.reminder-cadence-lead { margin: 0 0 10px; }
.reminder-cadence-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.reminder-cadence-grid .field { margin: 0; }
.suffix-input { display: flex; align-items: center; gap: 7px; }
.suffix-input input { width: 78px; }
.suffix-input span { font-size: 12px; color: var(--muted); white-space: nowrap; }
/* PAID marker on a receipt's meta column. */
.preview-paid-badge {
display: inline-flex;
align-items: center;
align-self: flex-end;
margin-top: 4px;
padding: 1px 8px;
border-radius: 999px;
color: var(--invoice-accent);
background: color-mix(in srgb, var(--invoice-accent) 12%, white);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
}
.template-preview [data-preview-key="address"],
.template-preview [data-preview-key="client_address"],
.template-preview [data-preview-key="notes"],
.template-preview [data-preview-key="bank_details"],
.template-preview [data-preview-key="terms"] {
white-space: pre-line;
}
.template-preview[data-surface-tone="paper"] {
background: #fffdf8;
}
.template-preview[data-surface-tone="mist"] {
background: #f7fbff;
}
.template-preview[data-surface-tone="sand"] {
background: #fff7eb;
}
.template-preview[data-surface-tone="mint"] {
background: #f3fcf8;
}
.template-preview[data-surface-tone="night"] {
color: #f8fafc;
background: #0f1720;
border-color: #0f1720;
}
.template-preview[data-surface-tone="night"] .muted,
.template-preview[data-surface-tone="night"] .eyebrow,
.template-preview[data-surface-tone="night"] .preview-line-items th,
.template-preview[data-surface-tone="night"] .preview-line-items td,
.template-preview[data-surface-tone="night"] .preview-meta,
.template-preview[data-surface-tone="night"] .totals-stack {
color: #d7dee7;
}
.template-preview[data-surface-tone="night"] .preview-line-items th,
.template-preview[data-surface-tone="night"] .preview-line-items td {
border-bottom-color: rgba(255, 255, 255, 0.14);
}
.template-preview[data-header-align="stacked"] .preview-header {
align-items: flex-start;
flex-direction: column;
}
.template-preview[data-header-align="left"] .preview-header {
display: grid;
justify-content: flex-start;
}
.template-preview[data-density="compact"] {
padding: 20px;
}
.template-preview[data-density="compact"] .preview-grid {
gap: 12px;
margin: 14px 0;
}
.template-preview[data-density="compact"] .preview-line-items th,
.template-preview[data-density="compact"] .preview-line-items td {
padding: 6px 0;
}
.template-preview[data-density="spacious"] {
padding: 38px;
}
.template-preview[data-density="spacious"] .preview-grid {
margin: 28px 0;
}
.template-preview[data-density="spacious"] .preview-line-items th,
.template-preview[data-density="spacious"] .preview-line-items td {
padding: 12px 0;
}
/* ==========================================================================
Format library (see lib/send_invoice/invoice_formats.rb)
Two groups of rules. The PARAMETRIC axes below (header arrangement, table
treatment, palette) are each keyed off an attribute that is ABSENT on any
template predating the library - so those templates keep the appearance
defined above, and nothing here can regress them. The BESPOKE designs
(data-format) come after, and are allowed to restyle the whole sheet.
--invoice-tint / --invoice-ink are set inline from the chosen palette and
fall back to the historical hairline and ink when no palette is set.
========================================================================== */
.template-preview {
--invoice-tint: var(--line-soft);
--invoice-ink: inherit;
}
/* The document wordmark. Hidden unless a format's header calls for it. */
.preview-doc-title {
display: none;
margin: 0 0 18px;
color: var(--invoice-accent);
font-size: 40px;
font-weight: 800;
letter-spacing: 0.01em;
line-height: 1;
text-transform: uppercase;
}
/* The accent glyph that precedes the company name (LOGO_MARKS). */
.preview-glyph {
margin-right: 0.4em;
color: var(--invoice-accent);
}
/* --- Axis 1: header arrangement ----------------------------------------
split / stacked / left are the pre-existing values and are styled earlier in
this file; right / center / band arrived with the reference set. */
.template-preview[data-header-align="right"] .preview-header {
flex-direction: row-reverse;
}
.template-preview[data-header-align="right"] .preview-meta {
text-align: left;
}
.template-preview[data-header-align="right"] .preview-doc-title,
.template-preview[data-header-align="center"] .preview-doc-title,
.template-preview[data-header-align="band"] .preview-doc-title {
display: block;
}
.template-preview[data-header-align="right"] .preview-doc-title {
text-align: right;
}
.template-preview[data-header-align="center"] .preview-header {
flex-direction: column;
align-items: center;
text-align: center;
}
.template-preview[data-header-align="center"] .preview-doc-title {
text-align: center;
}
.template-preview[data-header-align="center"] .preview-brand {
flex-direction: column;
align-items: center;
gap: 8px;
}
.template-preview[data-header-align="center"] .preview-meta {
justify-items: center;
}
/* `band`: the wordmark sits reversed-out on a full-bleed accent bar. The
negative margins bleed to the sheet edge, cancelling the sheet's padding -
which is why the value tracks the three density paddings below. */
.template-preview[data-header-align="band"] .preview-doc-title {
margin: -28px -28px 26px;
padding: 22px 28px;
color: #fff;
background: var(--invoice-accent);
}
.template-preview[data-density="compact"][data-header-align="band"] .preview-doc-title {
margin: -20px -20px 20px;
padding: 16px 20px;
}
.template-preview[data-density="spacious"][data-header-align="band"] .preview-doc-title {
margin: -38px -38px 30px;
padding: 26px 38px;
}
.template-preview[data-header-align="band"] .preview-header {
border-bottom-width: 1px;
}
/* --- Axis 2: table treatment ------------------------------------------- */
/* `filled`: reversed-out header row in the accent. */
.template-preview[data-table-style="filled"] .preview-line-items th {
padding: 10px 8px;
color: #fff;
background: var(--invoice-accent);
border-bottom: none;
}
.template-preview[data-table-style="filled"] .preview-line-items td {
padding-left: 8px;
padding-right: 8px;
}
/* `bordered`: every cell ruled in the palette tint. */
.template-preview[data-table-style="bordered"] .preview-line-items th,
.template-preview[data-table-style="bordered"] .preview-line-items td {
padding: 9px 8px;
border: 1px solid var(--invoice-tint);
}
.template-preview[data-table-style="bordered"] .preview-line-items th {
color: var(--invoice-accent);
}
/* `striped`: alternating rows washed with the tint. */
.template-preview[data-table-style="striped"] .preview-line-items tbody tr:nth-child(even) {
background: var(--invoice-tint);
}
.template-preview[data-table-style="striped"] .preview-line-items th {
color: var(--invoice-accent);
border-bottom: 1px solid var(--invoice-accent);
}
.template-preview[data-table-style="striped"] .preview-line-items td {
padding-left: 8px;
padding-right: 8px;
border-bottom: none;
}
/* `minimal`: no rules at all bar a muted header underline. */
.template-preview[data-table-style="minimal"] .preview-line-items th {
color: #888888;
border-bottom: 2px solid #dddddd;
}
.template-preview[data-table-style="minimal"] .preview-line-items td {
border-bottom: none;
}
/* `underline`: hairline under every row, in the palette tint. */
.template-preview[data-table-style="underline"] .preview-line-items th {
color: var(--invoice-accent);
border-bottom: 1px solid var(--invoice-accent);
}
.template-preview[data-table-style="underline"] .preview-line-items td {
border-bottom: 1px solid var(--invoice-tint);
}
/* --- Axis 3: palette ---------------------------------------------------
A palette supplies body ink and the tint. Accent stays independently
editable (accent_color), so a merchant can keep a palette's structure and
still brand it. Muted/label text is left alone - it reads as hierarchy, not
palette. */
.template-preview[data-palette] {
color: var(--invoice-ink);
}
.template-preview[data-palette] .totals-stack strong {
color: var(--invoice-ink);
}
/* --- Bespoke designs ---------------------------------------------------
Each is a named page from the reference set. These may restyle freely; they
only ever apply when a merchant has explicitly picked that format. */
/* Freelancer Band: tinted logo panel, filled head, tinted grand-total row. */
.template-preview[data-format="freelancer_band"] {
padding: 44px;
background: #ffffff;
}
.template-preview[data-format="freelancer_band"] .preview-header {
align-items: flex-start;
border-bottom: none;
}
.template-preview[data-format="freelancer_band"] .preview-logo-mark {
width: 96px;
height: 96px;
border-radius: 0;
color: #3c3c3c;
background: var(--invoice-tint, #ebe9e4);
font-size: 24px;
}
.template-preview[data-format="freelancer_band"] .preview-line-items th {
padding: 12px 10px;
color: #3c3c3c;
background: var(--invoice-tint, #ebe9e4);
border-bottom: none;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.template-preview[data-format="freelancer_band"] .preview-line-items td {
padding: 11px 10px;
border-bottom: none;
}
.template-preview[data-format="freelancer_band"] .totals-stack span:last-child {
padding: 8px 10px;
background: var(--invoice-tint, #ebe9e4);
}
/* Wordmark Rule: letterspaced wordmark trailed by a long hairline. */
.template-preview[data-format="wordmark_rule"] {
padding: 46px;
}
.template-preview[data-format="wordmark_rule"] .preview-doc-title {
display: flex;
align-items: center;
gap: 22px;
margin-bottom: 34px;
color: #2b2b2b;
font-size: 44px;
font-weight: 300;
letter-spacing: 0.22em;
}
.template-preview[data-format="wordmark_rule"] .preview-doc-title::after {
flex: 1;
height: 1px;
background: #9a9a9a;
content: "";
}
.template-preview[data-format="wordmark_rule"] .preview-header {
border-bottom: none;
}
.template-preview[data-format="wordmark_rule"] .preview-line-items th {
color: #6b6b6b;
border-bottom: 1px solid #9a9a9a;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.template-preview[data-format="wordmark_rule"] .preview-line-items td {
border-bottom: none;
}
/* Centered Monogram: brand centered on a tinted band across the head.
The band bleeds to the sheet edge via negative margins that cancel the
sheet's own padding. Do NOT invert this by zeroing the sheet padding and
re-padding each child: a table with `border-collapse: collapse` ignores its
own padding, so the line items would bleed off the page. */
.template-preview[data-format="centered_monogram"] {
padding: 40px;
}
.template-preview[data-format="centered_monogram"] .preview-doc-title {
display: none;
}
.template-preview[data-format="centered_monogram"] .preview-header {
flex-direction: column;
align-items: center;
margin: -40px -40px 34px;
padding: 46px 40px;
background: var(--invoice-tint, #e8e6e1);
border-bottom: none;
text-align: center;
}
.template-preview[data-format="centered_monogram"] .preview-brand {
flex-direction: column;
align-items: center;
gap: 10px;
}
.template-preview[data-format="centered_monogram"] .preview-logo-mark {
width: 78px;
height: 78px;
border-radius: 0;
color: #2f2f2f;
background: transparent;
font-size: 34px;
}
.template-preview[data-format="centered_monogram"] .preview-meta {
justify-items: center;
}
.template-preview[data-format="centered_monogram"] .preview-line-items th {
border-bottom: 1px solid #6f6f6f;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Studio Neutral: quiet sheet, ruled table, nothing shouting. */
.template-preview[data-format="studio_neutral"] {
padding: 44px;
background: #fbfbf9;
}
.template-preview[data-format="studio_neutral"] .preview-header {
padding-bottom: 20px;
border-bottom: 1px solid #dcdcd6;
}
.template-preview[data-format="studio_neutral"] .preview-line-items th {
color: #5f5f58;
border-bottom: 1px solid #b9b9b1;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.template-preview[data-format="studio_neutral"] .preview-line-items td {
border-bottom: 1px solid #ecece6;
}
/* Script Aesthetic: calligraphic wordmark over a warm sheet. */
.template-preview[data-format="script_aesthetic"] {
padding: 48px;
background: #f7f3ec;
}
.template-preview[data-format="script_aesthetic"] .preview-doc-title {
display: block;
margin-bottom: 30px;
color: #2f2b26;
font-family: "Invoice Script", "Great Vibes", cursive;
font-size: 74px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}
.template-preview[data-format="script_aesthetic"] .preview-header {
border-bottom: none;
}
.template-preview[data-format="script_aesthetic"] .preview-logo-mark {
color: #2f2b26;
background: transparent;
font-size: 20px;
}
.template-preview[data-format="script_aesthetic"] .preview-line-items th {
color: #2f2b26;
border-top: 1px solid #bdb5a6;
border-bottom: 1px solid #bdb5a6;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.template-preview[data-format="script_aesthetic"] .preview-line-items td {
border-bottom: none;
}
/* Wedding Ornament: tinted band, dotted row rules, payment panel. Column flex
for the same reason as `gradient_header` - the band leads, the wordmark
follows, and the DOM keeps the wordmark first. */
.template-preview[data-format="wedding_ornament"] {
display: flex;
flex-direction: column;
padding: 40px;
background: #ffffff;
}
.template-preview[data-format="wedding_ornament"] .preview-doc-title {
display: block;
margin: 0 0 16px;
font-weight: 400;
letter-spacing: 0.04em;
}
.template-preview[data-format="wedding_ornament"] .preview-header {
flex-direction: column;
align-items: center;
order: -1;
margin: -40px -40px 26px;
padding: 30px 40px;
background: var(--invoice-tint, #f3ece0);
border-bottom: none;
text-align: center;
}
.template-preview[data-format="wedding_ornament"] .preview-brand {
flex-direction: column;
align-items: center;
gap: 6px;
}
.template-preview[data-format="wedding_ornament"] .preview-logo-mark {
color: var(--invoice-accent);
background: transparent;
font-size: 30px;
}
.template-preview[data-format="wedding_ornament"] .preview-line-items th {
border-bottom: 2px solid #4a4a4a;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.template-preview[data-format="wedding_ornament"] .preview-line-items td {
border-bottom: 1px dotted #b9a98c;
}
.template-preview[data-format="wedding_ornament"] .totals-block {
padding-top: 18px;
background: var(--invoice-tint, #f9f4ea);
}
/* Geometric Teal: corner geometry, tinted bill-to strip, numbered rows. */
.template-preview[data-format="geometric_teal"] {
padding: 44px;
background: #f6f6ef;
}
.template-preview[data-format="geometric_teal"] .preview-doc-title {
display: block;
margin-bottom: 22px;
font-size: 30px;
letter-spacing: 0.06em;
text-align: center;
}
.template-preview[data-format="geometric_teal"] .preview-header {
border-bottom: none;
}
.template-preview[data-format="geometric_teal"] .preview-grid {
padding: 20px 24px;
background: var(--invoice-tint, #c3e6df);
}
.template-preview[data-format="geometric_teal"] .preview-line-items th {
padding: 13px 10px;
color: #2f3436;
background: var(--invoice-accent);
border-bottom: none;
font-weight: 800;
}
.template-preview[data-format="geometric_teal"] .preview-line-items td {
padding: 14px 10px;
border-bottom: none;
}
.template-preview[data-format="geometric_teal"] .totals-block {
border-top: 2px solid #2f3436;
}
/* Gradient Header: full-width gradient head, circular mark, gradient totals.
Column flex so the header can `order` itself above the wordmark: in this
design the gradient band comes first, but the wordmark precedes it in the
DOM (where it belongs for every other format, and for screen readers). */
.template-preview[data-format="gradient_header"] {
display: flex;
flex-direction: column;
padding: 44px;
background: #ffffff;
}
.template-preview[data-format="gradient_header"] .preview-doc-title {
display: block;
margin: 0 0 20px;
color: #1c1c1c;
font-size: 52px;
}
/* The header bleeds edge-to-edge and sits ABOVE the wordmark, so it also has to
move out of the doc-title's way - hence `order`, which the flex parent honours
for both. */
.template-preview[data-format="gradient_header"] .preview-header {
align-items: center;
order: -1;
margin: -44px -44px 26px;
padding: 30px 44px;
background: linear-gradient(100deg, var(--invoice-accent), color-mix(in srgb, var(--invoice-accent) 55%, white));
border-bottom: none;
color: #ffffff;
}
.template-preview[data-format="gradient_header"] .preview-header h2,
.template-preview[data-format="gradient_header"] .preview-header .muted,
.template-preview[data-format="gradient_header"] .preview-meta {
color: #ffffff;
}
.template-preview[data-format="gradient_header"] .preview-logo-mark {
width: 68px;
height: 68px;
border-radius: 999px;
color: #ffffff;
background: #1c1c1c;
}
/* The gradient goes on the ROW, not each cell: per-cell gradients restart at
every column and read as vertical banding. */
.template-preview[data-format="gradient_header"] .preview-line-items thead tr {
background: linear-gradient(100deg, var(--invoice-accent), color-mix(in srgb, var(--invoice-accent) 55%, white));
}
.template-preview[data-format="gradient_header"] .preview-line-items th {
padding: 14px 10px;
color: #ffffff;
background: transparent;
border-bottom: none;
}
.template-preview[data-format="gradient_header"] .preview-line-items td {
padding: 13px 10px;
}
.template-preview[data-format="gradient_header"] .totals-stack span:last-child {
padding: 12px 16px;
color: #ffffff;
background: linear-gradient(100deg, var(--invoice-accent), color-mix(in srgb, var(--invoice-accent) 55%, white));
}
.stepper {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.step {
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 999px;
color: var(--muted);
background: #e9edf2;
font-size: 12px;
font-weight: 760;
}
.step.is-active {
color: #ffffff;
background: var(--accent);
}
.print-body {
padding: 24px;
background: #f3f4f6;
}
.print-toolbar {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-bottom: 12px;
}
.print-sheet {
max-width: 920px;
margin: 0 auto;
padding: 40px;
}
/* --- Packing slip preview -------------------------------------------------
The sheet renders at its real paper size (width/height set inline in inches
by the view, from PageSize), so A4 vs 4x6 vs a custom size all preview true
to scale. Layout (standard/compact) is chosen via [data-layout]. */
.pack-sheet {
box-sizing: border-box;
margin: 0 auto;
padding: 0.5in;
background: #fff;
border: 1px solid var(--line);
border-radius: 4px;
color: #24282d;
font-family: var(--pack-font, inherit);
font-size: 12px;
line-height: 1.4;
}
.pack-sheet[data-layout="compact"] { padding: 0.2in; font-size: 11px; }
.pack-sheet p { margin: 0; }
.pack-muted { color: #667085; }
.pack-accent { color: var(--pack-accent); }
.pack-eyebrow {
font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: #667085; margin-bottom: 4px;
}
.pack-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pack-brand { display: flex; gap: 12px; align-items: flex-start; }
.pack-brand h2 { margin: 2px 0 0; font-size: 18px; }
.pack-logo-mark {
width: 42px; height: 42px; border-radius: 6px; flex: none;
background: var(--pack-accent); color: #fff; font-weight: 700;
display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.pack-logo-img { width: 42px; height: 42px; object-fit: contain; }
.pack-meta { text-align: right; display: flex; flex-direction: column; gap: 1px; }
.pack-meta strong { font-size: 14px; }
.pack-meta span { color: #667085; font-size: 11px; }
.pack-accent-rule { height: 2px; background: var(--pack-accent); margin: 14px 0 16px; }
.pack-rule { height: 1px; background: var(--line); margin: 10px 0; }
.pack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 18px; }
.pack-grid p { margin: 1px 0; }
.pack-items { width: 100%; border-collapse: collapse; }
.pack-items th {
text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em;
background: var(--pack-accent); color: #fff; padding: 7px 8px;
}
.pack-items td { padding: 8px; border-bottom: 1px solid var(--line-soft); }
.pack-items .r { text-align: right; }
.pack-footer { margin-top: 16px; }
.pack-footer p { margin: 3px 0; }
.pack-sign { margin-top: 18px; }
/* Return-form checklists. The tick box is a drawn square in both surfaces - the PDF
renderer uses Prawn's built-in fonts, which cannot print a "☐" at all, so a glyph
here would have the preview and the PDF disagree. */
.pack-checklist { list-style: none; margin: 6px 0 12px; padding: 0; display: grid; gap: 7px; }
.pack-checklist.is-two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.pack-checklist li { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; }
.pack-tick {
flex: 0 0 auto; width: 11px; height: 11px; margin-top: 2px;
border: 1px solid var(--muted); border-radius: 2px;
}
.pack-sign-line { display: inline-block; width: 180px; border-bottom: 1px solid #667085; }
.pack-compact-head { display: flex; flex-direction: column; gap: 2px; }
.pack-number { font-size: 18px; font-weight: 700; }
.pack-compact-items { list-style: none; margin: 0; padding: 0; }
.pack-compact-items li { padding: 2px 0; }
/* Packing template library thumbnails (paper-shape preview at true ratio). */
.pack-thumb {
display: flex; align-items: center; justify-content: center;
background: #f6f7f5; border: 1px solid var(--line); border-radius: 10px;
height: 150px; padding: 14px; text-decoration: none;
}
.pack-thumb-paper {
background: #fff; border: 1px solid var(--line); border-radius: 3px;
height: 100%; max-height: 122px; padding: 8px 7px;
display: flex; flex-direction: column; gap: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.pack-thumb-paper.is-wide { height: auto; width: 122px; }
.pack-thumb-bar { height: 4px; border-radius: 2px; background: #e2e5e1; }
.pack-thumb-bar.accent { background: var(--accent); width: 60%; }
.pack-thumb-bar.short { width: 40%; }
/* Packing template editor.
Shares the invoice editor's shell (.editor-topbar / .split-layout /
.invoice-editor-shell / .acc-item): the control rail scrolls inside its own
card so the preview stays put. It used to be a plain two-column grid whose
left column ran ~1600px past the preview, leaving half the page as dead grey
space and the sheet far off screen by the time you reached the last field. */
/* [hidden] must beat the display rules on .field / preview blocks. */
[data-pack-editor] [hidden] { display: none !important; }
.pack-custom-row { display: flex; align-items: center; gap: 8px; }
.pack-custom-row input[type="number"] { width: 84px; }
.pack-custom-row select { width: 68px; }
.pack-toggle-list { display: flex; flex-direction: column; gap: 8px; }
/* Layout picker: two cards, not a dropdown. The choice swaps the whole document
(compact drops the branding), which a |