/* ShrinkMe components: plain CSS classes (sm-*) over the tokens. Fallback values keep previews readable if tokens.css is absent. */
@font-face { font-family: "Rubik"; src: url("../fonts/Rubik-latin-variable.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-latin-variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }

.sm { font-family: Rubik, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--ink, #1f1633); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.sm *, .sm *::before, .sm *::after { box-sizing: border-box; }
.sm :focus-visible { outline: 2px solid var(--focus, #2f63d6); outline-offset: 2px; }
.sm .tnum { font-variant-numeric: tabular-nums; }

/* Buttons */
.sm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 16px; border-radius: var(--radius-md, 8px); border: 1px solid transparent; font: 700 14px/1.14 Rubik, system-ui, sans-serif; letter-spacing: 0.2px; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.sm-btn--primary { background: var(--primary, #150f23); color: var(--on-primary, #fff); }
.sm-btn--primary:active { background: var(--press-stronger, #efefef); color: var(--ink-press, #1a1a1a); }
.sm-btn--secondary { background: var(--canvas, #fff); color: var(--ink, #1f1633); border-color: var(--ink, #1f1633); font-weight: 500; }
.sm-btn--secondary:hover { background: var(--hover, #f7f5fa); }
.sm-btn--ghost { background: transparent; color: var(--ink, #1f1633); font-weight: 500; }
.sm-btn--ghost:hover { background: var(--hover, #f7f5fa); }
.sm-btn--inverted { background: var(--on-primary, #fff); color: var(--ink, #1f1633); }
.sm-btn--inverted:active { background: var(--press-light, #f0f0f0); color: var(--ink-press, #1a1a1a); }
.sm-btn--ghost-dark { background: var(--on-dark-faint, rgba(255,255,255,.18)); color: var(--on-primary, #fff); border-radius: var(--radius-xl, 12px); padding: 8px 16px; }
.sm-btn--token { background: var(--violet-mid, #79628c); color: var(--on-primary, #fff); border-radius: var(--radius-xl, 12px); padding: 8px 16px; font-weight: 500; min-height: 36px; }
.sm-btn[disabled], .sm-btn[aria-disabled="true"] { background: var(--hairline-cloud, #e5e7eb); color: var(--muted, #6b6475); border-color: transparent; cursor: not-allowed; }
.sm-btn--sm { min-height: 36px; padding: 8px 12px; }

/* Keyword chip and pills */
.sm-chip-accent { background: var(--accent, #fbbf24); color: var(--ink, #1f1633); border-radius: var(--radius-xs, 4px); padding: 0 12px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sm-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--radius-xs, 4px); font-size: 14px; line-height: 1.43; background: var(--subtle, #faf9fc); color: var(--ink, #1f1633); border: 1px solid var(--hairline-cloud, #e5e7eb); white-space: nowrap; }
.sm-pill--success { background: var(--success-bg, #e6f4ec); color: var(--success, #1e7a46); border-color: transparent; }
.sm-pill--warning { background: var(--warning-bg, #fff3d6); color: var(--warning, #8a5300); border-color: transparent; }
.sm-pill--danger { background: var(--danger-bg, #fdecea); color: var(--danger, #b42318); border-color: transparent; }
.sm-pill--info { background: var(--info-bg, #f0eefb); color: var(--info, #3e3591); border-color: transparent; }
.sm-pill--trend-up { background: var(--success-bg, #e6f4ec); color: var(--success, #1e7a46); border-color: transparent; font-weight: 600; }
.sm-pill--trend-down { background: var(--canvas, #fff); color: var(--danger, #b42318); font-weight: 600; }
.sm-micro { font-size: 10px; line-height: 1.8; font-weight: 600; letter-spacing: .25px; text-transform: uppercase; }

/* Fields */
.sm-field { display: grid; gap: 6px; }
.sm-field label { font-size: 14px; font-weight: 500; color: var(--ink, #1f1633); }
.sm-field .sm-help { font-size: 14px; color: var(--muted, #6b6475); }
.sm-field .sm-error { font-size: 14px; color: var(--danger, #b42318); }
.sm-input, .sm-select { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--hairline-cool, #cfcfdb); border-radius: var(--radius-sm, 6px); background: var(--canvas, #fff); color: var(--ink, #1f1633); font: 500 16px/1.5 Rubik, system-ui, sans-serif; }
.sm-input::placeholder { color: var(--faint, #8a8494); }
.sm-input:focus { outline: none; border-color: #6a5fc1; box-shadow: 0 0 0 3px rgba(106,95,193,.22); }
.sm-input[aria-invalid="true"] { border-color: var(--danger, #b42318); }

/* Segmented control */
.sm-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--hairline-cloud, #e5e7eb); border-radius: var(--radius-md, 8px); background: var(--canvas, #fff); }
.sm-seg button { border: 0; background: transparent; color: var(--muted, #6b6475); font: 500 14px/1.29 Rubik, system-ui, sans-serif; padding: 7px 12px; border-radius: 6px; cursor: pointer; min-height: 36px; }
.sm-seg button[aria-pressed="true"] { background: var(--accent, #fbbf24); color: var(--primary, #150f23); font-weight: 600; }

/* Cards */
.sm-card { background: var(--canvas, #fff); border: 1px solid var(--hairline-cloud, #e5e7eb); border-radius: var(--radius-xl, 12px); padding: 24px; }
.sm-card--float { box-shadow: var(--shadow-1, 0 2px 8px rgba(0,0,0,.08)); }
.sm-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sm-card__title { font-size: 20px; line-height: 1.25; font-weight: 600; margin: 0; }
.sm-kpi { background: var(--canvas, #fff); border: 1px solid var(--hairline-cloud, #e5e7eb); border-radius: var(--radius-xl, 12px); padding: 18px 20px; display: grid; gap: 6px; }
.sm-kpi__label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--muted, #6b6475); }
.sm-kpi__icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--table-header, #f4eff9); color: var(--violet-mid, #79628c); }
.sm-kpi__value { font-size: 30px; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; }
.sm-kpi__trend { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted, #6b6475); }

/* Table */
.sm-table-wrap { overflow-x: auto; border: 1px solid var(--hairline-cloud, #e5e7eb); border-radius: var(--radius-xl, 12px); background: var(--canvas, #fff); }
.sm-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sm-table th { text-align: left; background: var(--table-header, #f4eff9); color: var(--ink, #1f1633); font-weight: 500; font-size: 14px; padding: 10px 16px; white-space: nowrap; }
.sm-table td { padding: 12px 16px; border-top: 1px solid var(--hairline-cloud, #e5e7eb); vertical-align: middle; }
.sm-table tbody tr:hover { background: var(--hover, #f7f5fa); }
.sm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sm-table .sm-sub { display: block; font-size: 14px; color: var(--muted, #6b6475); }

/* Sidebar and top bar */
.sm-sidebar { width: 240px; background: var(--canvas, #fff); border-right: 1px solid var(--hairline-cloud, #e5e7eb); padding: 20px 12px; display: grid; gap: 4px; align-content: start; }
.sm-sidebar__logo { height: 34px; margin: 0 8px 16px; }
.sm-sidebar__group { font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--muted, #6b6475); padding: 14px 12px 6px; }
.sm-nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-md, 8px); color: var(--ink, #1f1633); text-decoration: none; font-weight: 500; font-size: 15px; }
.sm-nav-item:hover { background: var(--hover, #f7f5fa); }
.sm-nav-item[aria-current="page"] { background: var(--accent, #fbbf24); color: var(--primary, #150f23); font-weight: 600; }
.sm-nav-item .sm-count { margin-left: auto; font-size: 12px; font-weight: 600; background: var(--table-header, #f4eff9); border-radius: 999px; padding: 1px 8px; }
.sm-topbar { height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 24px; background: var(--canvas, #fff); border-bottom: 1px solid var(--hairline-cloud, #e5e7eb); }
.sm-topbar__search { flex: 0 1 360px; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--hairline-cool, #cfcfdb); border-radius: var(--radius-sm, 6px); color: var(--faint, #8a8494); font-size: 15px; }
.sm-icon-btn { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: transparent; border: 0; color: var(--ink, #1f1633); position: relative; cursor: pointer; }
.sm-icon-btn:hover { background: var(--hover, #f7f5fa); }
.sm-badge-count { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; border-radius: 999px; background: var(--primary, #150f23); color: var(--on-primary, #fff); font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.sm-avatar { width: 36px; height: 36px; border-radius: 999px; background: var(--table-header, #f4eff9); color: var(--ink, #1f1633); display: grid; place-items: center; font-weight: 600; font-size: 14px; }

/* Quick actions */
.sm-actions { list-style: none; margin: 0; padding: 0; }
.sm-actions a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 4px; color: var(--ink, #1f1633); text-decoration: none; font-weight: 500; border-top: 1px solid var(--hairline-cloud, #e5e7eb); }
.sm-actions li:first-child a { border-top: 0; }
.sm-actions a::after { content: "›"; margin-left: auto; color: var(--muted, #6b6475); font-size: 20px; }
.sm-actions .sm-tile { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--table-header, #f4eff9); color: var(--violet-mid, #79628c); }
.sm-actions .sm-tile--accent { background: var(--accent, #fbbf24); color: var(--primary, #150f23); }

/* Pricing / rate tiers */
.sm-price { background: var(--canvas, #fff); color: var(--ink, #1f1633); border: 1px solid var(--hairline-cloud, #e5e7eb); border-radius: var(--radius-xl, 12px); padding: 32px; display: grid; gap: 16px; align-content: start; }
.sm-price__name { font-size: 24px; font-weight: 500; margin: 0; }
.sm-price__amount { font-family: Archivo, Rubik, sans-serif; font-stretch: 88%; font-size: 60px; line-height: 1.05; font-weight: 700; font-variant-numeric: tabular-nums; }
.sm-price__amount small { font: 400 16px Rubik, sans-serif; color: var(--muted, #6b6475); }
.sm-price ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.sm-price--featured { background: var(--night, #150f23); color: var(--on-primary, #fff); border-color: var(--hairline-violet, #362d59); }
.sm-price--featured .sm-price__amount small { color: var(--on-dark-muted, rgba(255,255,255,.72)); }

/* Code block */
.sm-code { background: var(--night, #150f23); color: var(--on-primary, #fff); font: 400 16px/1.5 Monaco, Menlo, "Ubuntu Mono", monospace; padding: 16px; border-radius: var(--radius-md, 8px); overflow-x: auto; white-space: pre; margin: 0; }
.sm-code b { font-weight: 700; color: var(--accent, #fbbf24); }

/* Marketing nav and footer */
.sm-mnav { display: flex; align-items: center; gap: 24px; padding: 16px 24px; }
.sm-mnav a { color: inherit; text-decoration: none; font-weight: 500; }
.sm-mnav--dark { background: var(--canvas-dark, #1f1633); color: var(--on-primary, #fff); }
.sm-mnav--light { background: var(--canvas, #fff); color: var(--ink, #1f1633); border-bottom: 1px solid var(--hairline-cloud, #e5e7eb); }
.sm-mnav__links { display: flex; gap: 20px; margin-right: auto; }
.sm-footer { background: var(--canvas, #fff); color: var(--ink, #1f1633); font-size: 14px; line-height: 1.43; padding: 0 24px 32px; }
.sm-footer__squiggle { display: block; width: 100%; height: 18px; margin-bottom: 32px; }
.sm-footer__squiggle path { fill: none; stroke: var(--accent, #fbbf24); stroke-width: 3; stroke-linecap: round; }
.sm-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; }
.sm-footer h4 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.sm-footer a { color: var(--ink, #1f1633); }
.sm-footer__legal { margin-top: 32px; color: var(--muted, #6b6475); }

/* Focus on fields, softer (owner, 12 Nov): a violet border and a light glow hugging the field, no offset outline and
   no inner shadow. Grouped fields (alias, amount, phone with dial code, search bars) get it on the whole group. */
body.rd .sm-input:focus, body.rd .sm-select:focus, body.rd .sm textarea:focus { outline: none; border-color: #6a5fc1; box-shadow: 0 0 0 3px rgba(106,95,193,.22); }
body.rd .sm .sm-input:focus-visible, body.rd .sm .sm-select:focus-visible, body.rd .sm textarea:focus-visible { outline: none; }
body.rd .lm-alias:focus-within, body.rd .wd-amtbox:focus-within, body.rd .sm-topbar__search:focus-within { outline: none; border-color: #6a5fc1; box-shadow: 0 0 0 3px rgba(106,95,193,.22); }
body.rd .lm-alias input:focus, body.rd .wd-amtbox input:focus, body.rd .sm-topbar__search input:focus { outline: none; box-shadow: none; }
body.rd .st-phone:focus-within { border-radius: 8px; box-shadow: 0 0 0 3px rgba(106,95,193,.22); }
body.rd .st-phone:focus-within .st-dial, body.rd .st-phone:focus-within .sm-input { border-color: #6a5fc1; box-shadow: none; }
/* Home "Paste a long link" box: white on the dark hero, so its soft ring is a light lavender */
body.rd .hp-short__input:focus { outline: none; }
body.rd .hp-short:focus-within { box-shadow: 0 0 0 3px rgba(201,194,230,.6); }
/* Button hovers (owner, 12 Nov): each style keeps its own text colour (the page-wide purple link hover made
   white button text purple) and changes its background a little */
body.rd .sm-btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
body.rd .sm-btn--primary:hover, body.rd a.sm-btn--primary:hover { background: #2c2346; border-color: #2c2346; color: #ffffff; }
body.rd .sm-btn--secondary:hover, body.rd a.sm-btn--secondary:hover { background: #f7f5fa; color: #1f1633; }
body.rd .sm-btn--inverted:hover, body.rd a.sm-btn--inverted:hover { background: #f0eefb; color: #1f1633; }
body.rd .sm-btn--ghost-dark:hover, body.rd a.sm-btn--ghost-dark:hover { background: rgba(255,255,255,.3); color: #ffffff; }
body.rd .sm-btn--ghost:hover, body.rd a.sm-btn--ghost:hover { color: #1f1633; }
body.rd .sm-btn.tb-shorten:hover, body.rd a.sm-btn.tb-shorten:hover { background: #f5b30c; border-color: #f5b30c; color: #150f23; }