/* =================================================================================
   theme.css - AI Build design system (tokens + base components)
   Shared by the marketing site (/assets/css/site.css) and the Customer App
   (/app/assets/app.css). Mobile-first; breakpoints: <=480 phone, <=768 tablet,
   >=1024 desktop.
   Visual identity of the first AI Build site (/assets/site.css), which takes its
   palette and fonts from jewelrywebsitedesigners.com: mint, forest green, blush
   pink and an orange call-to-action; Open Sans for text, Raleway for headings,
   buttons and navigation, rounded pill buttons and soft 18px cards. Large display
   headings use Simplicity, the hand-written font of jewelrywebsitedesigners.com.
   Open Sans, Raleway and Shadows Into Light Two come from Google Fonts (linked in
   each page <head>); Simplicity is self-hosted in /assets/fonts (woff2 first,
   woff for servers without a woff2 MIME type).
================================================================================= */

/* Simplicity has no Romanian a-breve / s-comma / t-comma and no German sharp s, and
   its capital A looks like a lowercase "a" ("AI" would read "aI"): the unicode-range
   below leaves out A and A-with-accents, so those letters - like the missing ones -
   come from the next font in --font-display (Shadows Into Light Two, a very similar
   hand-written face). */
@font-face {
	font-family: "JWD Simplicity";
	src: url("../fonts/simplicity-webfont.woff2") format("woff2"), url("../fonts/simplicity-webfont.woff") format("woff");
	font-weight: 400; font-style: normal; font-display: swap;
	unicode-range: U+0020-0040, U+0042-007E, U+00A0-00BF, U+00C6-00FF, U+0152-0153, U+0178, U+02C6, U+02DC, U+2000-200A, U+2010-2014, U+2018-201E, U+2022, U+2026, U+202F, U+205F, U+20AC;
}

:root {
	/* palette (same values as /assets/site.css) */
	--mint: #d0eed5;
	--mint-deep: #b7e0c0;
	--mint-2: #e3f4e6;
	--mint-3: #f2faf3;
	--forest: #647b6f;
	--forest-deep: #4c5f55;
	--forest-3: #94b098;
	--blush: #ffa6be;
	--blush-soft: #ffd9e3;
	--blush-tint: #fff4f7;
	--orange: #f5781d;
	--orange-deep: #dd6710;
	--cream: #fbfaf7;
	--line: #e3ece5;
	/* roles */
	--bg: #ffffff;
	--bg-soft: #f7fbf8;
	--surface: #ffffff;
	--surface-2: #f3f8f4;
	--surface-3: #e6efe8;
	--border: #e3ece5;
	--border-strong: #c8d5cb;
	--title: #2c332f;
	--heading: #4c5f55;
	--text: #585858;
	--text-2: #666666;
	--text-muted: #717171;
	--text-faint: #9a9a94;
	--on-dark: #eef4f0;
	--ink: #647b6f;
	--ink-2: #4c5f55;
	--ink-3: #728a76;
	--on-ink: #ffffff;
	--accent: #f5781d;
	--accent-soft: #fff1e6;
	--accent-text: #dd6710;
	--mint-ink: #3e6a4c;
	--pink-ink: #a83e5f;
	--green: #3c8455;
	--green-dark: #326f47;
	--amber-bg: #fff7dd;
	--amber-border: #f2cd58;
	--amber-ink: #8a6300;
	--red: #dc2626;
	--red-soft: #fdecec;
	--blue-soft: #e9eef3;
	--blue-ink: #536783;
	/* short aliases used in a few inline styles */
	--sage: var(--forest);
	--sage-ink: var(--forest-deep);
	--pink: var(--blush);
	--radius-sm: 10px;
	--radius: 14px;
	--radius-lg: 18px;
	--radius-xl: 28px;
	--radius-btn: 999px;
	--shadow-sm: 0 1px 3px rgba(76,95,85,.12);
	--shadow: 0 20px 45px -20px rgba(76,95,85,.28);
	--shadow-lg: 0 26px 60px -18px rgba(76,95,85,.36);
	--shadow-cta: 0 12px 24px -10px rgba(245,120,29,.55);
	--font: "Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-ui: "Raleway", "Open Sans", "Segoe UI", Arial, sans-serif;
	--font-display: "JWD Simplicity", "Shadows Into Light Two", "Raleway", cursive;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.6; font-variant-numeric: lining-nums;
	color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--blush-soft); color: var(--title); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.i { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: middle; }
.i-sm { width: 15px; height: 15px; }
.i-lg { width: 22px; height: 22px; }
.i-xl { width: 28px; height: 28px; }

/* ---------------- typography ---------------- */
.display, h1.display, h2.display {
	font-family: var(--font-display); font-weight: 400; font-synthesis: none; letter-spacing: 0;
	line-height: 1.1; margin: 0; color: var(--heading);
}
.display em, .display i { font-style: normal; color: var(--accent-text); }
.eyebrow {
	display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 13px; font-weight: 700;
	letter-spacing: .04em; color: var(--forest);
}
.lede { font-size: 17px; color: var(--text); line-height: 1.7; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.strong { font-weight: 600; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.right { text-align: right; }

/* ---------------- buttons (pill; orange = main action) ---------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 42px; padding: 0 22px; border-radius: var(--radius-btn); border: 2px solid var(--orange);
	background: var(--orange); color: #fff; font-family: var(--font-ui); font-size: 14.5px; font-weight: 700; line-height: 1;
	text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.btn:hover { background: var(--orange-deep); border-color: var(--orange-deep); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn-pill { border-radius: var(--radius-btn); }
.btn-lg { height: 50px; padding: 0 28px; font-size: 15.5px; box-shadow: var(--shadow-cta); }
.btn-lg:hover { transform: translateY(-2px); }
.btn-sm { height: 34px; padding: 0 15px; font-size: 13px; gap: 6px; }
.btn-xs { height: 28px; padding: 0 11px; font-size: 12px; gap: 5px; border-width: 1.5px; }
.btn-block { display: flex; width: 100%; }
/* secondary: forest outline, turns orange on hover (like .btn-ghost in /assets/site.css) */
.btn-outline { background: transparent; color: var(--forest); border-color: var(--forest); }
.btn-outline:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn-ghost { background: transparent; color: var(--forest-deep); border-color: transparent; }
.btn-ghost:hover { background: var(--mint-3); border-color: transparent; color: var(--forest-deep); }
/* on forest-green panels */
.btn-light { background: #fff; color: var(--forest-deep); border-color: #fff; }
.btn-light:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn-dark-soft { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5); }
.btn-dark-soft:hover { background: #fff; border-color: #fff; color: var(--forest-deep); }
.btn-green { background: var(--green); border-color: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.btn-danger { background: var(--surface); color: var(--red); border-color: #f3c9c9; }
.btn-danger:hover { background: var(--red-soft); border-color: #eeb4b4; color: var(--red); }
.btn-danger-solid { background: var(--red); border-color: var(--red); color: #fff; }
.btn-upgrade { background: var(--accent-soft); color: var(--accent-text); border-color: var(--orange); }
.btn-upgrade:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-icon { width: 38px; padding: 0; }
.btn-icon.btn-sm { width: 34px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 14px; font-weight: 700; text-decoration: none; color: var(--forest); }
.link-arrow:hover { color: var(--orange-deep); }

/* ---------------- forms ---------------- */
.field { margin-bottom: 16px; }
.field > label, .label { display: block; font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; margin-bottom: 7px; color: var(--title); }
.label .req, .field .req { color: var(--red); }
.hint { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.45; }
.input, .select, .textarea {
	width: 100%; height: 44px; padding: 0 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line);
	background: var(--cream); color: var(--title); font-size: 15px; transition: border-color .15s, background .15s, box-shadow .15s;
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--forest); background: #fff; box-shadow: 0 0 0 3px rgba(100,123,111,.12); }
.textarea { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; line-height: 1.55; }
.select {
	appearance: none; -webkit-appearance: none; padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23647b6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 13px center;
}
.input-group { display: flex; gap: 8px; }
.input-group .input { flex: 1; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--forest); }

/* toggle switch */
.switch { position: relative; display: inline-flex; width: 40px; height: 23px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch .track { position: absolute; inset: 0; background: #d3ddd5; border-radius: 999px; transition: background .15s; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.switch input:checked + .track { background: var(--forest); }
.switch input:checked + .track::after { transform: translateX(17px); }
.switch input:focus-visible + .track { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------------- cards ---------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; }
.card-sm { padding: 16px; border-radius: var(--radius); }
.card-lg { padding: 28px; }
.card-flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-title { font-family: var(--font-ui); font-size: 16px; font-weight: 700; margin: 0; color: var(--title); }
.card-dark { background: var(--forest); color: var(--on-dark); border-color: var(--forest); }
.card-dark .muted { color: rgba(238,244,240,.78); }
.card-soft { background: var(--mint-3); border-color: transparent; }
.divider { height: 1px; background: var(--line); margin: 18px 0; border: 0; }
.icon-tile { width: 42px; height: 42px; border-radius: 13px; background: var(--mint); display: inline-flex; align-items: center; justify-content: center; color: var(--forest-deep); flex: 0 0 auto; }
.icon-tile-dark { background: rgba(255,255,255,.14); color: #fff; }

/* ---------------- badges (pills) ---------------- */
.badge {
	display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px;
	font-family: var(--font-ui); font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
	background: var(--surface-2); color: var(--text-2); border: 1px solid transparent;
}
.badge-outline { background: #fff; border-color: var(--mint-deep); color: var(--forest-deep); }
.badge-mint, .badge-green { background: var(--mint); color: var(--mint-ink); }
.badge-blue { background: var(--blue-soft); color: var(--blue-ink); }
.badge-pink { background: var(--blush-soft); color: var(--pink-ink); }
.badge-amber { background: var(--amber-bg); color: var(--amber-ink); border-color: var(--amber-border); }
.badge-red { background: var(--red-soft); color: #b42323; }
.badge-dark { background: var(--forest); color: #fff; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-mint { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--mint); color: var(--mint-ink); font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; }

/* ---------------- alerts / banners ---------------- */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 15px; border-radius: var(--radius); font-size: 14px; margin-bottom: 16px; border: 1px solid var(--line); background: var(--surface); }
.alert .i { margin-top: 1px; }
.alert-info { background: var(--blue-soft); border-color: #cad5e2; color: #3e5068; }
.alert-success { background: var(--mint-3); border-color: var(--mint-deep); color: #2f5a3c; }
.alert-warn { background: var(--amber-bg); border-color: var(--amber-border); color: #6f4f00; }
.alert-error { background: var(--red-soft); border-color: #f6caca; color: #9b1c1c; }
.alert a { color: inherit; font-weight: 600; }

/* ---------------- tables (collapse to cards on small screens) ---------------- */
.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--forest); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--bg-soft); }
@media (max-width: 768px) {
	.table.stack thead { display: none; }
	.table.stack, .table.stack tbody, .table.stack tr, .table.stack td { display: block; width: 100%; }
	.table.stack tr { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 12px; margin-bottom: 10px; background: var(--surface); }
	.table.stack td { border: 0; padding: 7px 0; display: flex; justify-content: space-between; gap: 14px; text-align: right; }
	.table.stack td::before { content: attr(data-label); color: var(--text-muted); font-size: 12.5px; text-align: left; flex: 0 0 auto; max-width: 45%; }
	.table.stack td[data-label=""]::before { content: none; }
	.table.stack tbody tr:hover td { background: transparent; }
}

/* ---------------- segmented tabs ---------------- */
.seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--mint-3); border: 1px solid var(--line); max-width: 100%; overflow-x: auto; }
.seg a, .seg button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 15px; border-radius: 999px; border: 0; background: transparent; color: var(--forest); font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.seg a:hover, .seg button:hover { color: var(--forest-deep); background: rgba(255,255,255,.7); }
.seg .active { background: var(--surface); color: var(--forest-deep); box-shadow: var(--shadow-sm); }
.seg-block { display: flex; width: 100%; }
.seg-block a, .seg-block button { flex: 1; justify-content: center; }

/* ---------------- progress / meters ---------------- */
.meter { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--forest); }
.meter.warn > span { background: #e5a823; }
.meter.full > span { background: var(--red); }

/* ---------------- modal ---------------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(44,51,47,.55); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 200; }
.modal-backdrop.open { display: flex; }
.modal { background: #fff; border-radius: var(--radius-lg); width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.modal-lg { max-width: 820px; }
.modal-xl { max-width: 1180px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 12px; gap: 12px; }
.modal-head h3 { margin: 0; font-family: var(--font-ui); font-weight: 700; font-size: 19px; color: var(--title); }
.modal-body { padding: 4px 24px 18px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: space-between; gap: 10px; padding: 14px 24px 20px; border-top: 1px solid var(--line); }
.modal-close { background: none; border: 0; cursor: pointer; color: var(--forest); padding: 6px; border-radius: 999px; }
.modal-close:hover { background: var(--mint-3); color: var(--forest-deep); }
@media (max-width: 480px) { .modal-backdrop { padding: 0; align-items: flex-end; } .modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 92vh; } }

/* ---------------- dropdown ---------------- */
.dropdown { position: relative; }
.dropdown-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; display: none; z-index: 120; }
.dropdown.open > .dropdown-menu { display: block; }
.dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--radius-sm); border: 0; background: none; font-size: 14px; text-decoration: none; color: var(--text); cursor: pointer; text-align: left; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--mint-3); color: var(--title); }
.dropdown-menu .sep { height: 1px; background: var(--line); margin: 6px 4px; }
.dropdown-menu .danger { color: var(--red); }
.dropdown-menu .active { font-weight: 700; color: var(--forest-deep); }

/* ---------------- empty states / misc ---------------- */
.empty { text-align: center; padding: 42px 18px; color: var(--text-muted); }
.empty .i { width: 30px; height: 30px; color: var(--forest-3); margin-bottom: 10px; }
.empty h4 { margin: 0 0 4px; color: var(--title); font-family: var(--font-ui); font-size: 15.5px; font-weight: 700; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--mint); border: 1px solid var(--mint-deep); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; color: var(--forest-deep); flex: 0 0 auto; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 64px; height: 64px; font-size: 20px; }
.kbd { font-family: var(--mono); font-size: 12.5px; background: var(--cream); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.code-block { font-family: var(--mono); font-size: 12.5px; background: var(--cream); color: var(--title); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; overflow-x: auto; white-space: pre; }
.list-check { list-style: none; margin: 0; padding: 0; }
.list-check li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; font-size: 14px; }
.list-check li .i { color: var(--forest); margin-top: 2px; }

/* ---------------- layout utilities ---------------- */
.row { display: flex; align-items: center; gap: 12px; }
.row-top { display: flex; align-items: flex-start; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
.stack > * + * { margin-top: 12px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mt-0 { margin-top: 0 !important; } .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-0 { margin-bottom: 0 !important; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.hide { display: none !important; }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .hide-md { display: none !important; } }
@media (max-width: 480px) { .hide-sm { display: none !important; } }
@media (min-width: 769px) { .show-md { display: none !important; } }