/* PEXTER: brand orange band with the doodle pattern, charcoal ink, rounded friendly cards */
:root {
  --bg: #F6F4F2; --panel: #FFFFFF; --fg: #262626; --muted: #6E6A67; --line: #E4E0DC;
  --orange: #E9541F; --orange-deep: #B83C12; --orange-soft: #F4A27E; --on-orange: #FFFFFF; --ink-on-orange: #262626;
  --ok: #2F7D4F; --bad: #B42318; --popover: #FFFFFF;
  --radius: 18px; --font: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gap-xs: 4px; --gap-sm: 8px; --gap-md: 14px; --gap-lg: 22px; --pad-sm: 10px; --pad-md: 14px; --pad-lg: 20px; --pad-xl: 28px;
  --fs-caption: 0.8125rem; --fs-body: 0.9375rem; --fs-heading: 1.0625rem; --fs-title: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #171514; --panel: #221F1E; --fg: #F2EEEB; --muted: #A9A29D; --line: #3A3532; --ok: #6CC08E; --bad: #F08A7E; --popover: #2B2827; color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: var(--font); font-size: var(--fs-body); line-height: 1.45; font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.ic-page { max-width: 1180px; margin-inline: auto; padding: 20px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: var(--gap-lg); }
main { display: flex; flex-direction: column; gap: var(--gap-lg); }

/* Header band */
.ic-band { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--orange); color: var(--on-orange); }
.ic-band::before { content: ""; position: absolute; inset: 0; background-image: url("assets/pattern.jpg"); background-repeat: repeat; background-size: 340px auto; filter: grayscale(1) brightness(.7) contrast(4) brightness(1.1); mix-blend-mode: multiply; opacity: .4; pointer-events: none; }
.ic-band-inner { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--gap-lg); padding: var(--pad-xl) var(--pad-lg); }
.ic-brandline { display: flex; align-items: center; gap: var(--gap-md); min-width: 0; flex: 1 1 24rem; }
.ic-logo { width: 5.5rem; height: auto; flex: none; color: var(--on-orange); }
.ic-head-text { min-width: 0; display: flex; flex-direction: column; gap: var(--gap-xs); }
.ic-eyebrow { font-size: var(--fs-caption); letter-spacing: .22em; text-transform: uppercase; font-weight: 600; opacity: .9; }
.ic-title { margin: 0; font-weight: 800; font-size: var(--fs-title); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; }
.ic-takeaway { margin: 0; max-width: 65ch; }
.ic-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gap-sm); }
.ic-field { display: flex; flex-direction: column; gap: var(--gap-xs); font-size: var(--fs-caption); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.ic-field select { font: inherit; letter-spacing: 0; text-transform: none; font-weight: 600; font-size: var(--fs-body); color: var(--ink-on-orange); background: var(--on-orange); border: 0; border-radius: 999px; padding: 6px var(--pad-md); min-width: 11rem; max-width: 100%; }
.ic-field select:focus-visible, .ic-on-band:focus-visible { outline: 3px solid var(--ink-on-orange); outline-offset: 2px; }

/* Cards and type */
.ic-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad-lg); min-width: 0; display: flex; flex-direction: column; gap: var(--gap-sm); }
.ic-narrow { max-width: 30rem; width: 100%; margin-inline: auto; }
.ic-card h2 { margin: 0; font-size: var(--fs-heading); font-weight: 800; }
.ic-sub { margin: 0; color: var(--muted); font-size: var(--fs-caption); }
.ic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--gap-md); }
.ic-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: var(--gap-md); }
.ic-tile { gap: var(--gap-xs); }
.ic-label { font-size: var(--fs-caption); color: var(--muted); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.ic-big { font-weight: 800; letter-spacing: -.01em; font-size: var(--fs-title); line-height: 1.15; }
.ic-chg { font-size: var(--fs-caption); color: var(--muted); min-height: 1.3em; }
.ic-chg.up { color: var(--ok); } .ic-chg.down { color: var(--bad); }
.ic-tile.ic-hero { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }
.ic-tile.ic-hero .ic-label, .ic-tile.ic-hero .ic-chg { color: var(--on-orange); }
sup { color: var(--orange); font-weight: 800; }
.ic-hero sup, .ic-band sup { color: inherit; }

/* Buttons and forms */
.ic-btn { font: inherit; font-size: var(--fs-caption); font-weight: 800; border-radius: 999px; padding: 6px var(--pad-md); cursor: pointer; border: 1px solid var(--orange); background: var(--orange); color: var(--on-orange); white-space: nowrap; }
.ic-btn:hover { background: var(--orange-deep); border-color: var(--orange-deep); }
.ic-btn:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }
.ic-btn:disabled { opacity: .55; cursor: progress; }
.ic-btn.ic-ghost { background: transparent; color: var(--orange); padding: 2px var(--pad-sm); }
.ic-btn.ic-ghost:hover { background: var(--orange); color: var(--on-orange); }
.ic-btn.ic-on-band { background: transparent; border-color: var(--on-orange); color: var(--on-orange); }
.ic-btn.ic-on-band:hover { background: var(--on-orange); color: var(--ink-on-orange); }
.ic-input { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px var(--pad-sm); min-width: 0; width: 100%; }
.ic-input:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.ic-form { display: flex; flex-wrap: wrap; gap: var(--gap-sm); align-items: flex-end; }
.ic-form label { display: flex; flex-direction: column; gap: var(--gap-xs); font-size: var(--fs-caption); color: var(--muted); font-weight: 600; flex: 1 1 12rem; }
.ic-msg { margin: 0; font-size: var(--fs-caption); color: var(--muted); min-height: 1.3em; }
.ic-msg.ic-error { color: var(--bad); }
.ic-msg.ic-good { color: var(--ok); }

/* Statement */
.ic-statement { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--gap-lg); align-items: start; }
.ic-st-who { display: flex; flex-direction: column; gap: var(--gap-xs); min-width: 0; }
.ic-st-name { font-weight: 800; font-size: var(--fs-title); line-height: 1.15; overflow-wrap: anywhere; }
.ic-st-lines { display: grid; grid-template-columns: 1fr auto; gap: var(--gap-xs) var(--gap-md); margin: 0; }
.ic-st-lines dt { color: var(--muted); }
.ic-st-lines dd { margin: 0; text-align: right; }
.ic-st-total { border-top: 2px solid var(--orange); padding-top: var(--gap-xs); font-weight: 800; color: var(--orange); font-size: var(--fs-heading); }
.ic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-sm); }
.ic-pill { display: inline-block; padding: 0 var(--pad-sm); border-radius: 999px; border: 1px solid currentColor; font-size: var(--fs-caption); line-height: 1.6; font-weight: 600; background: transparent; font-family: inherit; }
.ic-pill.paid { color: var(--ok); } .ic-pill.pending { color: var(--orange); } .ic-pill.none { color: var(--muted); }
button.ic-pill { cursor: pointer; }

/* Traffic grid */
.ic-traffic { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 6px var(--gap-sm); align-items: center; font-size: var(--fs-caption); }
.ic-tr-h { color: var(--muted); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 0.7rem; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.ic-tr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ic-tr-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ic-tr-fill { height: 8px; border-radius: 999px; min-width: 3px; flex: none; }
.ic-tr-quiet { grid-column: 1 / -1; margin: var(--gap-xs) 0 0; color: var(--muted); }

/* Funnel */
.ic-funnel { display: flex; flex-direction: column; gap: var(--gap-sm); }
.ic-step { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--gap-sm); font-size: var(--fs-caption); }
.ic-step-name { color: var(--muted); }
.ic-step-val { text-align: right; font-size: var(--fs-body); font-weight: 800; }
.ic-bar-track { grid-column: 1 / -1; height: 16px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ic-bar { height: 100%; border-radius: 999px; min-width: 2px; }
.ic-rate { grid-column: 1 / -1; color: var(--muted); }

/* Tables */
.ic-table-wrap { overflow-x: auto; }
.ic-table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); }
.ic-table th, .ic-table td { padding: 6px var(--pad-sm); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.ic-table th { color: var(--muted); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.ic-table .l { text-align: left; }
.ic-table tr.ic-total td { font-weight: 800; color: var(--orange); border-bottom: 0; border-top: 2px solid var(--orange); }
.ic-table td.ic-email { min-width: 16rem; }

/* Definitions */
.ic-defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--gap-md); margin: 0; }
.ic-defs dt { font-weight: 800; }
.ic-defs dd { margin: var(--gap-xs) 0 0; color: var(--muted); font-size: var(--fs-caption); max-width: 60ch; }

.ic-demo { background: var(--ink-on-orange); color: #FFFFFF; border-radius: 999px; padding: 6px var(--pad-md); font-size: var(--fs-caption); align-self: flex-start; }
@media (max-width: 40rem) { .ic-hide-narrow { display: none; } .ic-logo { width: 4rem; } }
@media (prefers-reduced-motion: no-preference) { .ic-card { animation: ic-in .25s ease-out both; } @keyframes ic-in { from { opacity: .4; transform: translateY(4px); } } }