/*
 * thelight customer portal (/account), dressed as www.plixalabs.com.
 *
 * It is reached at www.plixalabs.com/account, so a customer never leaves the site and
 * the portal should not look like somewhere else. Every value below was read off the
 * live site rather than matched by eye: white ground, DM Sans for text and DM Serif
 * Display for headings, #1A7F4B buttons as 30px pills, cards 1px #E5E7EB at 18px.
 *
 * Gold is still kept for the one thing that has to be noticed, a quote waiting for
 * approval, and red only for a refusal or something late.
 */
@import url('/fonts/dm/dm.css');

:root {
  /* Read from www.plixalabs.com, not chosen here. */
  --green: #1A7F4B;          /* the site's primary button and link green */
  --green-dark: #0F5C34;     /* its hover */
  --emerald: #064E3B;        /* kept: deep green for dark surfaces */
  --emerald-2: #0B6B52;
  --emerald-soft: #E3EFEA;
  --champagne: #F8E7C9;
  --champagne-2: #FBF1DF;
  --paper: #FFFFFF;
  --slate: #4B5563;
  --slate-2: #6B7280;
  --line: #E5E7EB;           /* the site's card border */
  --line-soft: #F0F2F4;
  --night: #111827;          /* the site's body text */
  --gold: #C9A46A;
  --gold-ink: #7A5B22;
  --gold-soft: #F6EBD6;
  --danger: #B42318;
  --danger-soft: #FDECEA;

  --ground: var(--paper);    /* the site is white, not a tinted ground */
  --card: var(--paper);
  --ink: var(--night);
  --ink-mid: var(--slate);
  --ink-soft: var(--slate-2);
  --link: var(--green);
  --header: var(--paper);    /* white header with the wordmark, as on the site */
  --header-ink: #111827;
  --warm: var(--champagne);
  --warm-2: var(--champagne-2);
  --focus: 0 0 0 3px rgba(26, 127, 75, .35);

  --r: 10px;
  --rl: 18px;                /* the site's card radius */
  --pill: 30px;              /* the site's button radius */
  --shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 4px 16px rgba(17, 24, 39, .04);
  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font); font-size: 14px; line-height: 1.55;
  overflow-x: hidden; min-height: 100vh;
  /* the footer sits at the bottom of a short page, not halfway up it */
  display: flex; flex-direction: column;
}
body > main, body > .band { flex: 1 0 auto; width: 100%; }
body > .p-header, body > nav, body > .p-footer { flex: none; }
a { color: var(--link); }
a:hover { text-decoration-thickness: 2px; }
img, svg { max-width: 100%; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.15; }
.ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; flex: none; }
.muted { color: var(--ink-soft); }
.mono-n { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ---------- */
.p-header { background: var(--header); color: var(--header-ink); border-bottom: 1px solid var(--line); }
.p-header-in { max-width: 1160px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
/* The site's header is the wordmark on its own. The portal matches it, and sets the
   company line under it: height alone, so a brand whose mark is square is not stretched. */
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: inherit; text-decoration: none; min-width: 0; }
.brand-logo { height: 26px; width: auto; display: block; }
.brand-sub { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .75; white-space: nowrap; }
.spacer { flex: 1; }
.env-flag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: var(--gold); color: var(--night); padding: 3px 7px; border-radius: 99px; }
.icon-btn { position: relative; background: transparent; border: 1px solid var(--line); color: inherit; width: 38px; height: 38px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; font-size: 18px; }
.icon-btn:hover { background: rgba(255,255,255,.18); }
.notif-dot-badge { position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px; border-radius: 99px; background: var(--gold); color: var(--night); font-size: 10px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }
.user-chip { display: flex; align-items: center; gap: 10px; }
.user-chip .nm { font-weight: 700; font-size: 13px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .rl { font-size: 11px; opacity: .75; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--champagne); color: var(--emerald); font-weight: 800; display: grid; place-items: center; flex: none; }
@media (max-width: 720px) { .user-chip > div:first-child { display: none; } }

/* ---------- section nav ---------- */
.p-nav { background: var(--card); border-bottom: 1px solid var(--line); }
.p-nav-in { max-width: 1160px; margin: 0 auto; padding: 0 8px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.p-nav-in::-webkit-scrollbar { display: none; }
.nav-item { display: inline-flex; align-items: center; gap: 7px; padding: 13px 12px 11px; color: var(--ink-mid); text-decoration: none; font-weight: 600; font-size: 13px; white-space: nowrap; border-bottom: 3px solid transparent; }
.nav-item:hover { color: var(--ink); }
.nav-item.on { color: var(--link); border-bottom-color: var(--link); }
.nav-item .badge { background: var(--gold); color: var(--night); font-size: 10.5px; font-weight: 800; border-radius: 99px; padding: 1px 7px; }
.nav-item.signout { margin-left: auto; }
.nav-form { display: contents; }
.nav-form button { background: none; border: 0; font: inherit; cursor: pointer; }

/* ---------- notifications ---------- */
.notif-pop { display: none; position: absolute; right: 16px; top: 64px; z-index: 40; width: min(360px, calc(100vw - 32px)); background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--rl); box-shadow: 0 12px 40px rgba(10,31,25,.18); overflow: hidden; }
.notif-pop.on { display: block; }
.notif-pop-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.notif-pop-head h4 { font-size: 14px; }
.notif-pop-head button { background: none; border: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--link); cursor: pointer; }
.notif-list { max-height: 60vh; overflow-y: auto; }
.notif-item { display: flex; gap: 10px; padding: 11px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line-soft); }
.notif-item:hover { background: var(--mist); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: transparent; }
.notif-item.unread .notif-dot { background: var(--gold); }
.notif-item.unread .notif-txt { font-weight: 700; }
.notif-txt { font-size: 13px; }
.notif-time { font-size: 11px; color: var(--ink-soft); }
.notif-empty { padding: 20px 14px; color: var(--ink-soft); text-align: center; }

/* ---------- page ---------- */
.p-main { max-width: 1160px; margin: 0 auto; padding: 22px 16px 64px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-title { font-size: clamp(22px, 4vw, 28px); }
.page-sub { color: var(--ink-mid); margin-top: 4px; font-size: 13px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mid); }
.back { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-mid); text-decoration: none; font-weight: 600; font-size: 13px; margin-bottom: 12px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 9px 16px; border-radius: var(--pill); border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 13.5px; text-decoration: none; cursor: pointer; line-height: 1.2; }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-soft); }
.btn-gold { background: var(--gold); color: var(--night); }
.btn-sm { min-height: 32px; padding: 6px 11px; font-size: 12.5px; }
.btn-block { width: 100%; }
.inline-form { display: inline; }

/* ---------- alerts, banners, toasts ---------- */
.alert { border-radius: var(--r); padding: 11px 14px; margin-bottom: 16px; font-size: 13.5px; }
.alert-ok { background: var(--emerald-soft); color: var(--ink); border: 1px solid var(--line); }
.alert-err { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); }
.banner { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--rl); padding: 14px 16px; margin-bottom: 18px; }
.banner.gold { background: var(--gold-soft); border: 1px solid var(--gold); color: var(--ink); }
.banner.gold .ico { color: var(--gold-ink); font-size: 18px; }
.banner a { font-weight: 700; }
#toasts { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { background: var(--night); color: #fff; padding: 11px 16px; border-radius: var(--r); font-weight: 600; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.2); max-width: 520px; }
.toast.ok { border-left: 4px solid var(--gold); }
.toast.warn { border-left: 4px solid var(--danger); }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
@media (min-width: 860px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--rl); padding: 14px 16px; min-width: 0; }
/* Three tiles are links now. Without this they take the body link colour and its underline,
   and an inline <a> boxes differently from the <div> tiles beside it, so the row stops lining up. */
a.tile { color: inherit; text-decoration: none; transition: border-color .15s; }
a.tile:hover, a.tile:focus-visible { border-color: var(--gold-ink); }
a.tile .tile-lbl, a.tile .tile-val, a.tile .tile-foot { text-decoration: none; }
.tile.accent { background: var(--warm); border-color: transparent; }
.tile-lbl { display: flex; gap: 6px; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mid); }
.tile-val { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.tile-val.green { color: var(--link); }
.tile-val.gold { color: var(--gold-ink); }
.tile-val.red { color: var(--danger); }

/* Free tools: a link per tool, same surface as a tile but the whole card is the target. */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tool-card { display: flex; flex-direction: column; gap: 5px; background: var(--card); border: 1px solid var(--line); border-radius: var(--rl); padding: 13px 15px; min-width: 0; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.tool-card:hover, .tool-card:focus-visible { border-color: var(--gold-ink); transform: translateY(-1px); }
.tool-title { font-weight: 700; font-size: 14px; }
.tool-blurb { font-size: 12.5px; line-height: 1.45; color: var(--ink-mid); }

/* Paying for an order. Card is one way, not the way, so the bank transfer line sits beside
   the button rather than being hidden behind it. */
.pay-box { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between;
  background: var(--warm); border-radius: var(--rl); padding: 14px 16px; margin: 14px 0; }
.pay-box .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mid); }
.pay-box .amt { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pay-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.pay-alt { font-size: 12.5px; color: var(--ink-mid); margin: 0; }
.paid-note { font-size: 13px; font-weight: 600; color: var(--link); margin: 14px 0; }

/* A live offer. The deadline beside it is generated from the offer's end time, so the
   urgency on screen cannot outlive the offer that justifies it. */
.offer { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; background: var(--warm);
  border: 1px solid transparent; border-radius: var(--rl); padding: 14px 16px; margin-bottom: 12px; }
.offer-pct { display: flex; align-items: baseline; gap: 4px; flex: none; font-size: 30px; font-weight: 800;
  letter-spacing: -.03em; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.offer-pct span { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.offer-words { flex: 1 1 260px; min-width: 0; }
.offer-detail { font-size: 12.5px; color: var(--ink-mid); margin-top: 2px; }
.offer-ends { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gold-ink); margin-top: 6px; }

/* Ten paid orders earns one free. The track is the point: how many are done, which one is
   next, and what sits at the end, readable without counting dots. */
.loyalty { background: var(--card); border: 1px solid var(--line); border-radius: var(--rl); padding: 15px 16px 13px; margin-bottom: 12px; }
.loyalty-won { background: var(--warm); border-color: transparent; }
.loy-head { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; justify-content: space-between; }
.loy-words { min-width: 0; flex: 1 1 320px; }
.loyalty-sub { font-size: 12.5px; color: var(--ink-mid); margin-top: 2px; }
.loy-count { display: flex; align-items: baseline; gap: 5px; flex: none; }
.loy-now { font-size: 25px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--gold-ink); }
.loy-of { font-size: 13px; font-weight: 600; color: var(--ink-mid); }
.loy-togo { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-left: 8px; }

.loy-track { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 22px 0 9px; padding: 0; }
.loy-step { position: relative; }
.loy-pip { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--card); border: 1.5px solid var(--line); color: var(--ink-soft);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.loyalty-won .loy-pip { background: #fff6; }
.loy-step.on .loy-pip { background: var(--gold-ink); border-color: var(--gold-ink); color: #fff; }
.loy-step.prize .loy-pip { border-color: var(--gold-ink); color: var(--gold-ink); font-size: 14px; }
.loy-step.prize.on .loy-pip { color: #fff; }
.loy-step.now .loy-pip { border-color: var(--link); color: var(--link); border-style: dashed; }
/* A line under the track rather than a label under its pip: centred on the first pip it
   hung off the left edge of the card, and on the last it would hang off the right. */
.loy-here { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--link); margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .loy-step.now .loy-pip { animation: loy-pulse 2.4s ease-in-out infinite; }
  @keyframes loy-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--link) 18%, transparent); } }
}
@media (max-width: 460px) { .loy-pip { width: 26px; height: 26px; font-size: 11px; } }

/* Perks: two things worth doing, each with its own progress bar.
   .card spaces itself from what is above with margin-top and nothing below, while .tiles
   does the opposite. The perks card is the one place the two conventions meet, so without
   this it sits flush against the tile row under it. */
.perks { margin-bottom: 12px; }
.perk-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.perk { min-width: 0; }
.perk-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.perk-count { font-size: 12px; font-weight: 700; color: var(--ink-mid); font-variant-numeric: tabular-nums; }
.perk-bar { height: 7px; border-radius: 4px; background: var(--line); margin: 8px 0 9px; overflow: hidden; }
.perk-bar span { display: block; height: 100%; background: var(--gold-ink); border-radius: 4px; }
.perk.done .perk-bar span { background: var(--link); }
.perk-blurb { font-size: 12.5px; line-height: 1.5; color: var(--ink-mid); margin: 0 0 10px; }
.perk-won { font-size: 12.5px; font-weight: 700; color: var(--link); }

/* Company details: the wider fields sit two or three to a row rather than stacked. */
.form-grid:not(.one) { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 14px; }
.fg-note { display: block; font-size: 12px; color: var(--ink-mid); margin-top: 4px; }
.socials { margin-top: 16px; }
.socials .biz-label { margin-bottom: 8px; }

/* The business questions: a chip per answer rather than a wall of selects. */
.biz-q { margin-bottom: 15px; }
.biz-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.biz-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.biz-opt { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; background: var(--card); }
.biz-opt input { margin: 0; }
.biz-opt.on { border-color: var(--gold-ink); background: var(--warm); font-weight: 600; }

/* A tool already opened keeps its tick, so "try every tool" has a visible finish line. */
.tool-card.seen { border-color: var(--gold-ink); }
.tool-seen { font-size: 11px; font-weight: 700; color: var(--gold-ink); letter-spacing: .05em; text-transform: uppercase; }
.tile-foot { font-size: 12px; color: var(--ink-soft); }

/* ---------- cards & tables ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--rl); margin-top: 18px; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.card-head h3 { font-size: 16px; }
.card-head .meta { font-size: 13px; font-weight: 600; }
.card-pad { padding: 16px; }
.empty { padding: 28px 16px; text-align: center; color: var(--ink-mid); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mid); padding: 10px 16px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tr[data-panel] { cursor: pointer; }
tr[data-panel]:hover td { background: var(--warm-2); }
.ref { font-weight: 800; color: var(--link); letter-spacing: -0.01em; white-space: nowrap; }
.sub-ref { font-size: 11px; color: var(--ink-soft); }
.q-prio { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--danger-soft); color: var(--danger); border-radius: 99px; padding: 1px 7px; margin-left: 4px; }
.price { font-weight: 700; color: var(--link); }
.price-quote { font-weight: 800; color: var(--gold-ink); }
/* Order tables collapse to cards on a phone, so nothing scrolls sideways. */
@media (max-width: 720px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
  table.stack td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; }
  table.stack td::before { content: attr(data-label); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); flex: none; }
  table.stack td:first-child::before { content: none; }
}

/* ---------- status pills ---------- */
.pill { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap; background: var(--mist); color: var(--slate); border: 1px solid var(--line); }
.pill.g-production, .pill.g-done { background: var(--emerald-soft); color: var(--link); border-color: transparent; }
.pill.g-action { background: var(--gold); color: var(--night); border-color: transparent; }
.pill.g-cancelled { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

/* SLA countdowns */
.sla-ok { color: var(--link); font-weight: 600; }
.sla-risk { color: var(--gold-ink); font-weight: 700; }
.sla-late { color: var(--danger); font-weight: 700; }

/* ---------- toolbar ---------- */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.search { flex: 1 1 260px; }
.search input { width: 100%; }
.tabs { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 3px; }
.tabs a { padding: 7px 14px; border-radius: 7px; text-decoration: none; color: var(--ink-mid); font-weight: 600; font-size: 13px; }
.tabs a.on { background: var(--emerald); color: #fff; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-mid); }
.pager a { font-weight: 700; }

/* ---------- forms ---------- */
input[type=text], input[type=email], input[type=search], input[type=number], input[type=date], input:not([type]), select, textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; min-height: 42px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--emerald); box-shadow: var(--focus); }
textarea { min-height: 96px; resize: vertical; }
label, .lbl { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mid); margin-bottom: 6px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.form-grid.one { grid-template-columns: 1fr; }
.fg { min-width: 0; }
.fg.full { grid-column: 1 / -1; }
.drop { position: relative; display: block; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; color: var(--ink-mid); border: 2px dashed var(--line); border-radius: var(--rl); padding: 22px 16px; text-align: center; background: var(--warm-2); cursor: pointer; }
.drop:hover, .drop.drag { border-color: var(--emerald); }
.drop.has { border-style: solid; border-color: var(--emerald); }
.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop .files { display: block; margin-top: 8px; font-weight: 700; color: var(--ink); word-break: break-all; }
.checkrow { display: inline-flex; gap: 8px; align-items: center; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 0; }
.checkrow input { width: 18px; height: 18px; accent-color: var(--emerald); }
.adv { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: var(--rl); background: var(--card); }
.adv__toggle { display: flex; flex-direction: column; gap: 3px; padding: 13px 16px; cursor: pointer; list-style: none; border-radius: var(--rl); }
.adv__toggle::-webkit-details-marker { display: none; }
.adv__label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--link); }
.adv__label::before { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; flex: none; margin-left: 2px; }
.adv[open] .adv__label::before { transform: rotate(45deg); }
.adv__note { font-size: 12px; color: var(--ink-soft); padding-left: 17px; }
.adv__grid { padding: 2px 16px 16px; }
.price-preview { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--warm); border-radius: var(--rl); padding: 14px 16px; }
.price-preview .lbl { margin: 0; }
.price-preview .val { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--emerald); }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.form-actions .checkrow { margin-right: auto; }
@media (max-width: 560px) { .form-actions .btn { flex: 1 1 100%; } }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.kv dt { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mid); padding-top: 2px; }
.kv dd { margin: 0; font-weight: 600; word-break: break-word; }
.page-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .page-grid { grid-template-columns: 3fr 2fr; } }
.page-grid > .card { margin-top: 0; }

/* ---------- order panel ---------- */
.panel { display: flex; flex-direction: column; min-height: 100%; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 18px 18px 14px; border-bottom: 1px solid var(--line-soft); background: var(--warm); }
.panel-head .ref { font-size: 22px; }
.panel-head .sub { color: var(--ink-mid); font-size: 13px; margin-top: 2px; }
.panel-body { padding: 4px 18px 18px; flex: 1; }
.panel-foot { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--line-soft); background: var(--card); position: sticky; bottom: 0; }
.d-sect { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.d-sect:last-child { border-bottom: 0; }
.d-sect h4 { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mid); margin-bottom: 10px; }
.stepper { display: flex; gap: 4px; flex-wrap: wrap; }
.stepper span { flex: 1 1 90px; font-size: 11px; font-weight: 700; text-align: center; padding: 7px 4px; border-radius: 7px; background: var(--mist); color: var(--ink-soft); }
.stepper span.done { background: var(--emerald-soft); color: var(--link); }
.stepper span.on { background: var(--emerald); color: #fff; }
.quote-box { margin: 16px 0 4px; background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--rl); padding: 16px; }
.quote-box .amt { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--gold-ink); }
.quote-box p { color: var(--ink-mid); margin: 4px 0 12px; font-size: 13px; }
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
@media (min-width: 720px) { .spec { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spec .k { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.spec .v { font-weight: 600; word-break: break-word; }
.instructions { margin-top: 12px; color: var(--ink-mid); white-space: pre-wrap; font-size: 13px; }
.file-row { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.file-row:last-child { border-bottom: 0; }
.file-ico { width: 34px; height: 34px; border-radius: 8px; background: var(--emerald-soft); color: var(--link); display: grid; place-items: center; flex: none; }
.file-name { flex: 1; min-width: 0; word-break: break-all; font-weight: 600; }
.file-kind { font-size: 11px; color: var(--ink-soft); }
.ver { font-size: 10.5px; font-weight: 700; background: var(--mist); color: var(--slate); border-radius: 99px; padding: 1px 6px; }
.dl-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; padding: 6px; border-radius: 8px; }
.dl-link:hover { background: var(--emerald-soft); }
.tl { border-left: 2px solid var(--line); margin-left: 4px; padding-left: 14px; }
.tl-item { position: relative; padding-bottom: 12px; }
.tl-item::before { content: ''; position: absolute; left: -20px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--emerald); border: 2px solid var(--card); }
.tl-time { font-size: 11.5px; color: var(--ink-soft); }
.tl-note { font-size: 13px; color: var(--ink-mid); margin-top: 2px; }
.cmt { background: var(--mist); border-radius: var(--r); padding: 10px 12px; margin-bottom: 8px; white-space: pre-wrap; max-width: 92%; }
.cmt.customer { background: var(--warm); margin-left: auto; }
.cmt .who { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mid); margin-bottom: 3px; display: flex; gap: 8px; justify-content: space-between; white-space: normal; }
.cmt .who span { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.cmt-box { display: flex; gap: 8px; margin-top: 10px; }
.cmt-box input { flex: 1; }

/* ---------- drawer & modal ---------- */
.drawer-bg, .modal-bg { position: fixed; inset: 0; background: rgba(10, 31, 25, .45); z-index: 50; display: none; }
.drawer-bg.on, .modal-bg.on { display: block; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); background: var(--card); z-index: 60; overflow-y: auto; transform: translateX(100%); transition: transform .2s ease; box-shadow: -12px 0 40px rgba(10,31,25,.2); }
.drawer.on { transform: none; }
.drawer-x { background: none; border: 1px solid var(--line); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; color: var(--ink); font: inherit; }
.page-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--rl); overflow: hidden; }
.modal-bg.on { display: grid; place-items: center; padding: 16px; }
.modal { background: var(--card); color: var(--ink); border-radius: var(--rl); padding: 20px; width: min(480px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal h3 { font-size: 18px; margin-bottom: 8px; }
.modal p { color: var(--ink-mid); margin: 0 0 12px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .drawer, .adv__label::before { transition: none; } }

/* ---------- signed-out pages ---------- */
/* The site's pages sit on white; a warm band here made the portal look like somewhere else. */
.hero-band { background: var(--ground); padding: 48px 16px 64px; }
.auth { max-width: 460px; margin: 0 auto; }
.auth-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px 22px; box-shadow: var(--shadow); }
@media (min-width: 560px) { .auth-card { padding: 32px 30px; } }
.auth-card h1 { font-size: clamp(28px, 5vw, 36px); margin: 8px 0 12px; }
.auth-card h1 em { font-style: normal; color: var(--link); }
.lead { color: var(--ink-mid); margin: 0 0 16px; }
.auth-foot { text-align: center; color: var(--ink-mid); margin-top: 18px; font-size: 13px; }
.code-input { letter-spacing: .4em; font-size: 24px !important; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.round-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--emerald-soft); color: var(--link); display: grid; place-items: center; margin: 0 auto 14px; font-size: 28px; }
.center { text-align: center; }
.p-footer { max-width: 1160px; margin: 0 auto; padding: 0 16px 32px; font-size: 12px; color: var(--ink-soft); display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.p-footer a { color: var(--ink-mid); }

/* Readable text on phones, the same rule the site applies in _layout-overrides.scss:
   body copy at least 16px, captions and fine print at least 14px, under 768px only.
   Measured 18 Oct 2026: the site's base is 16px and the portal's was 14px, and the
   smallest real sentence here was 12px ("PlixaLabs is a Zorixo Services company").
   A customer crosses from the site into this page in one click, so the step down was
   visible, and 12px body text on a phone is hard to read.

   Desktop is left at 14px on purpose. That is an ordinary density for an application,
   the site's own rule is mobile-only, and widening it would redesign every screen.

   Uppercase labels, eyebrows, table headers and badges are deliberately NOT raised: the
   site sets its own labels at 10 and 11px (.sec-lbl is 10px), so lifting them would make
   this page differ from the site rather than match it.

   .biz-opt is deliberately absent. It is a <label>, so it inherits the uppercase and the
   .08em letter-spacing from `label, .lbl`. At its design size of 13px it is a compact chip;
   raised to 16px it shouted and wrapped onto two lines. The first pass put it in this list
   because the survey read text-transform per rule, and .biz-opt's own rule does not set it.
   Computed style is the only honest test for that. */
@media (max-width: 767px) {
    body { font-size: 16px; }

    /* Sentences a customer reads. */
    .instructions,
    .quote-box p,
    .page-sub,
    .panel-head .sub,
    .notif-txt,
    .tl-note,
    .perk-blurb,
    .tool-blurb,
    .offer-detail,
    .loyalty-sub,
    .adv__note,
    .fg-note,
    .paid-note,
    .checkrow,
    .alert,
    .toast,
    .auth-foot { font-size: 16px; }

    /* Fine print, meta and controls: the 14px floor. */
    .p-footer,
    .card-head .meta,
    .tl-time,
    .pager,
    .back,
    .tabs a,
    .nav-item,
    .btn,
    .btn-sm,
    .drop,
    .sub-ref,
    .notif-time,
    .notif-pop-head button,
    .ver,
    .file-kind,
    .user-chip .nm,
    .user-chip .rl,
    .pill,
    .perk-count,
    .perk-won,
    .tile-foot,
    .pay-alt,
    .loy-of,
    .biz-label,
    .stepper span { font-size: 14px; }
}