/* ============================================================================
   TEE THEME — "Affiliate Agent" look. Approved 2026-09-11 as the TEE engine standard.
   Reference mockup: public/_proto/email-engine-v3.html. First adopter: Email Engine.

   HOW TO ADOPT (any engine)
     1. <link rel="stylesheet" href="/css/tee-logo.css">  (the logotype)
        <link rel="stylesheet" href="/css/tee-theme.css">
     2. Fonts: Inter 400-800, Saira 700-900 + italic 800, Caveat 700, Bebas Neue (logo).
     3. Put class="tee-app" on <body>. Dark mode = data-theme="dark" on <html>.
     4. Use ONLY tee-* classes + --tee-* variables below. Nothing here styles bare
        elements outside .tee-app, so it cannot collide with an engine's own CSS.

   RAIL: engines use the DEFAULT light rail — the engine's own brand on top
     (.tee-brand: mark tile + name) and gold-tinted active door with a 3px gold edge.
     The navy rail with the TEE logo is OPT-IN (.tee-shell--navy + .tee-rail--navy) and is
     for the Affiliate Agent / dashboard only.
   HERO: meant for an engine's MAIN screen only (Email Engine: the Write door); other
     screens use the compact page head (+ the small tagline line above it).

   CONTENTS
     tokens (light + dark) · app base · rail (light default, navy opt-in) + doors · top
     bar · hero (icon tile, tagline, H1 em, Caveat note + arrow, "How it works?", mascot) · page head · tabs ·
     cards · grids/rows · labels + inputs (gold focus) · buttons (gold primary) · pills ·
     notes/hints/errors/empty · tables · stats · timeline · send-with cards · modal ·
     mobile (rail → horizontal scroller, hero stacks)
   ========================================================================== */

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root{
  --tee-ink:#111827;--tee-ink-soft:#344054;--tee-muted:#667085;--tee-dim:#98a2b3;
  --tee-line:#e3e7ee;--tee-line-strong:#d9dfe8;--tee-bg:#f7f8fb;--tee-paper:#fff;--tee-soft:#f2f4f8;
  --tee-gold:#F5C518;--tee-gold-deep:#e0ad00;--tee-gold-hover:#ffd23a;--tee-gold-soft:#fff1c9;--tee-gold-tint:#fffaf0;
  --tee-accent:var(--tee-gold-deep);            /* gold used for TEXT (em, tagline, labels) */
  --tee-on-gold:#111;                            /* text on a gold button */
  --tee-navy:#0e1a2c;--tee-navy-2:#223a69;--tee-navy-line:#2b3a50;--tee-navy-text:#d8e0ec;--tee-navy-dim:#8491a6;
  --tee-indigo:#4355ee;--tee-indigo-line:#d9def0;
  --tee-green:#18a566;--tee-green-soft:#e7f8ef;--tee-red:#d92d20;--tee-red-soft:#fef3f2;
  --tee-amber:#b54708;--tee-amber-soft:#fffaeb;
  --tee-hero:linear-gradient(105deg,#fff 55%,#fffaf0);
  --tee-note-bg:linear-gradient(135deg,#fffdf5,#fff8e6);--tee-note-line:#f3e3ae;
  --tee-pill-plan-bg:#fff2b6;--tee-pill-plan-line:#f3dc84;
  --tee-tl-line:#d9dfeb;
  --tee-overlay:rgba(14,26,44,.55);
  --tee-shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --tee-shadow-lg:0 20px 48px -16px rgba(14,26,44,.28);
  --tee-rail-w:220px;
  --tee-rail-bg:var(--tee-paper);              /* default (engine) rail */
  --tee-radius:14px;--tee-radius-sm:9px;
}
:root[data-theme="dark"]{
  --tee-ink:#F4F4F6;--tee-ink-soft:#c9ccd6;--tee-muted:#8d93a3;--tee-dim:#5f6575;
  --tee-line:#262a36;--tee-line-strong:#2f3442;--tee-bg:#050508;--tee-paper:#0e1017;--tee-soft:#151822;
  --tee-gold-soft:rgba(245,197,24,.14);--tee-gold-tint:rgba(245,197,24,.06);
  --tee-accent:var(--tee-gold);
  --tee-navy:#0a0c12;--tee-navy-2:#1a2033;--tee-navy-line:#232838;
  --tee-rail-bg:#0a0c12;
  --tee-indigo-line:#262a36;
  --tee-green-soft:rgba(24,165,102,.14);--tee-red-soft:rgba(217,45,32,.14);--tee-amber-soft:rgba(181,71,8,.18);
  --tee-hero:linear-gradient(105deg,#0e1017 55%,#17140a);
  --tee-note-bg:rgba(245,197,24,.06);--tee-note-line:rgba(245,197,24,.3);
  --tee-tl-line:#262a36;
  --tee-overlay:rgba(0,0,0,.66);
  --tee-shadow-sm:none;
}
:root[data-theme="dark"] body.tee-app{color-scheme:dark}

/* ── APP BASE (scoped) ──────────────────────────────────────────────────── */
body.tee-app{margin:0;background:var(--tee-bg);color:var(--tee-ink);font:14px/1.5 Inter,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}
/* Base resets use :where() = zero specificity, so every tee-* component class
   (and an adopting engine's own classes) always wins over them. */
:where(.tee-app) *,:where(.tee-app) *::before,:where(.tee-app) *::after{box-sizing:border-box}
:where(.tee-app) :where(button,input,select,textarea){font:inherit;color:inherit}
:where(.tee-app) :where(h1,h2,h3){font-family:Saira,Inter,sans-serif;font-weight:800;letter-spacing:-.01em;line-height:1.15;margin:0}
:where(.tee-app) :where(h1,h2) em,.tee-em{font-style:italic;color:var(--tee-accent)}
:where(.tee-app) a{color:inherit}
.tee-app [hidden]{display:none!important}

/* ── SHELL: navy rail + main ────────────────────────────────────────────── */
.tee-shell{display:grid;grid-template-columns:var(--tee-rail-w) minmax(0,1fr);min-height:100vh;
  /* paint the rail column (fill + hairline) the full page height, not just the sticky 100vh rail */
  background:linear-gradient(90deg,var(--tee-rail-bg) calc(var(--tee-rail-w) - 1px),var(--tee-line) calc(var(--tee-rail-w) - 1px) var(--tee-rail-w),transparent var(--tee-rail-w))}

/* DEFAULT RAIL = ENGINE RAIL: light, hairline edge, the ENGINE's own brand on top. */
.tee-rail{background:var(--tee-rail-bg);border-right:1px solid var(--tee-line);color:var(--tee-ink);padding:18px 12px 24px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin}
.tee-brand{display:flex;align-items:center;gap:10px;margin:0 6px 20px;text-decoration:none;color:var(--tee-ink)}
.tee-brand-mark{flex:none;width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#fff3c4,#F5C518);color:#111;display:grid;place-items:center;font-family:Saira,sans-serif;font-weight:900;font-size:12px;letter-spacing:.02em;box-shadow:0 6px 14px -8px rgba(224,173,0,.8)}
.tee-brand-name{font-family:Saira,sans-serif;font-weight:800;font-size:15px;line-height:1.15;letter-spacing:-.01em;white-space:nowrap}
.tee-brand-name b{font-style:italic;color:var(--tee-accent)}
.tee-navlabel{display:block;color:var(--tee-dim);font-weight:800;font-size:9px;letter-spacing:.12em;margin:4px 10px 8px;text-transform:uppercase}
.tee-door{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-left:3px solid transparent;background:none;border-radius:8px;cursor:pointer;text-align:left;margin:2px 0;color:var(--tee-ink);position:relative}
.tee-door:hover{background:var(--tee-soft)}
.tee-door:focus-visible{outline:2px solid var(--tee-gold);outline-offset:1px}
.tee-door .tee-door-ic{font-size:16px;width:22px;text-align:center;flex:none}
.tee-door b{display:block;font-weight:700;font-size:13px}
.tee-door small{display:block;color:var(--tee-muted);font-size:11px;line-height:1.3}
.tee-door.on{background:var(--tee-gold-tint);color:var(--tee-ink);border-left-color:var(--tee-gold);box-shadow:inset 0 0 0 1px var(--tee-gold-soft)}
.tee-door.on b{font-weight:800}
.tee-door .tee-door-dot{position:absolute;right:10px;top:50%;margin-top:-4px;width:8px;height:8px;border-radius:50%;background:#FF4560}
.tee-rail-foot{margin:18px 10px 0;font-size:11px;color:var(--tee-muted);line-height:1.45}

/* OPT-IN NAVY RAIL (.tee-rail--navy) — Affiliate Agent / dashboard only: TEE logo on navy. */
.tee-shell--navy{background:linear-gradient(90deg,var(--tee-navy) var(--tee-rail-w),transparent var(--tee-rail-w))}
.tee-rail--navy{background:var(--tee-navy);border-right:0;color:var(--tee-navy-text);padding-top:22px;padding-bottom:110px}
.tee-rail-logo{display:block;margin:0 8px 26px;text-decoration:none}
.tee-rail--navy .tee-navlabel{color:var(--tee-navy-dim)}
.tee-rail--navy .tee-door{color:var(--tee-navy-text)}
.tee-rail--navy .tee-door:hover{background:rgba(255,255,255,.05)}
.tee-rail--navy .tee-door small{color:var(--tee-navy-dim)}
.tee-rail--navy .tee-door.on{background:var(--tee-navy-2);color:#fff;box-shadow:none}
.tee-rail--navy .tee-rail-foot{color:var(--tee-navy-dim)}
/* member name box — navy (dashboard) rail only; engines never show the member identity */
.tee-rail--navy .tee-user{position:absolute;bottom:18px;left:12px;right:12px;border:1px solid var(--tee-navy-line);border-radius:10px;padding:10px 12px;color:#fff;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tee-rail--navy .tee-user small{display:block;color:#a9b4c4;font-size:10px;letter-spacing:.1em;font-weight:800;margin-top:2px}
.tee-mainwrap{min-width:0}

/* ── TOP BAR ────────────────────────────────────────────────────────────── */
.tee-top{height:58px;background:var(--tee-paper);border-bottom:1px solid var(--tee-line);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px;position:sticky;top:0;z-index:5}
.tee-crumb{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tee-crumb a{text-decoration:none}
.tee-crumb a:hover{text-decoration:underline}
.tee-top-r{display:flex;gap:8px;align-items:center;flex:none}
.tee-tpill{border:1px solid var(--tee-line);border-radius:999px;padding:7px 12px;background:var(--tee-paper);font-size:12px;white-space:nowrap;text-decoration:none;color:var(--tee-ink)}
.tee-tpill-plan{background:var(--tee-pill-plan-bg);color:#111;border-color:var(--tee-pill-plan-line)}   /* dashboard only — engines don't show the member's plan */
.tee-theme-btn{border:1px solid var(--tee-line);background:var(--tee-paper);color:var(--tee-ink);border-radius:999px;width:34px;height:34px;cursor:pointer;display:inline-grid;place-items:center;font-size:14px;flex:none}
/* ── Account menu (top-right avatar) — /js/tee-account-menu.js, ONE implementation shared by the
   engines (was an inline copy in the Email Engine, from kdp-engine .v3-av*). Theme tokens only:
   it follows whatever light/dark the page already runs, no separate dark rules. ── */
.tee-acct{position:relative;flex:none}
.tee-acct-btn{border:0;padding:0;background:none;cursor:pointer;border-radius:50%;display:block}
.tee-acct-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--tee-gold-soft)}
.tee-acct-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ffe27a,#f5c518);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#5a4600;font-family:'Saira',sans-serif}
.tee-acct-av-lg{width:40px;height:40px;font-size:16px;flex:none}
.tee-acct-menu{position:absolute;top:40px;right:0;width:264px;max-width:calc(100vw - 24px);background:var(--tee-paper);border:1px solid var(--tee-line);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.12);padding:6px;z-index:200;text-align:left}
.tee-acct-menu[hidden]{display:none}
.tee-acct-head{display:flex;gap:10px;align-items:center;padding:8px 8px 6px}
.tee-acct-who{min-width:0;display:flex;flex-direction:column}
.tee-acct-name{font-size:14px;font-weight:700;color:var(--tee-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tee-acct-email{font-size:12px;color:var(--tee-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tee-acct-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:2px 8px 8px;font-size:12px;color:var(--tee-muted)}
.tee-acct-plan{background:var(--tee-gold-soft);color:var(--tee-ink);border-radius:999px;padding:2px 9px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.tee-acct-sep{height:1px;background:var(--tee-line);margin:4px 6px}
.tee-acct-item{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:7px;background:none;border:none;color:var(--tee-muted);font-size:13px;font-family:'Inter',sans-serif;cursor:pointer;text-decoration:none;box-sizing:border-box}
.tee-acct-item:hover,.tee-acct-item:focus-visible{background:var(--tee-gold-soft);color:var(--tee-ink);outline:none}
.tee-main{max-width:1120px;margin:auto;padding:24px 24px 60px}

/* ── HERO ───────────────────────────────────────────────────────────────── */
.tee-hero{position:relative;background:var(--tee-hero);border:1px solid var(--tee-line);border-radius:16px;padding:24px 340px 24px 26px;margin-bottom:22px;overflow:hidden;display:flex;align-items:center;gap:18px;min-height:158px}
.tee-hero-ic{flex:none;width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#fff3c4,#F5C518);display:grid;place-items:center;font-size:26px;box-shadow:0 8px 20px -8px rgba(224,173,0,.7)}
.tee-hero h1{font-size:31px;margin-bottom:4px}
.tee-hero p{color:var(--tee-ink-soft);margin:0}
.tee-tagline{font-family:Saira,sans-serif;font-weight:800;font-style:italic;color:var(--tee-accent);font-size:14px;margin-bottom:4px;line-height:1.3}
.tee-howbtn{position:absolute;top:14px;right:16px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--tee-indigo-line);background:var(--tee-paper);color:var(--tee-indigo);font-weight:700;font-size:12px;cursor:pointer;z-index:2;text-decoration:none}
:root[data-theme="dark"] .tee-howbtn{color:#9aa6ff}
.tee-howbtn i{width:18px;height:18px;border-radius:50%;background:var(--tee-indigo);color:#fff;font-style:normal;display:grid;place-items:center;font-size:10px}
.tee-bot{position:absolute;right:30px;bottom:-4px;width:100px;height:auto;filter:drop-shadow(0 10px 14px rgba(14,26,44,.14));pointer-events:none}
.tee-scribble{position:absolute;right:150px;top:52px;font-family:Caveat,cursive;font-weight:700;font-style:italic;font-size:23px;line-height:1.05;color:var(--tee-ink);transform:rotate(-6deg);pointer-events:none}
.tee-scribble svg{position:absolute;left:-58px;top:-4px;width:54px;height:40px}
.tee-scribble svg path{stroke:var(--tee-gold-deep)}
/* live mascot (/js/tee-mascot.js) — takes the .tee-bot slot; sheets in /img/mascots/<name>-{directions,reactions}.webp */
.tee-mascot{position:absolute;right:22px;bottom:-6px;width:120px;height:120px;z-index:1;display:block}
.tee-mascot:focus-visible{outline:2px solid var(--tee-gold);outline-offset:2px;border-radius:14px}

/* ── PAGE HEAD + TABS ───────────────────────────────────────────────────── */
.tee-phead{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.tee-phead h1,.tee-phead-title{font-family:Saira,Inter,sans-serif;font-weight:800;font-size:24px;line-height:1.15;letter-spacing:-.01em;margin:0}
.tee-phead-title em{font-style:italic;color:var(--tee-accent)}
.tee-phead-sub{color:var(--tee-muted);margin-top:2px}
.tee-phead .tee-tagline{font-size:13px;margin-bottom:2px}
.tee-tabs{display:flex;gap:4px;border-bottom:1px solid var(--tee-line);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.tee-tabs::-webkit-scrollbar{display:none}
.tee-tab{flex:none;border:0;background:none;padding:10px 14px;font-weight:700;color:var(--tee-muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tee-tab:hover{color:var(--tee-ink)}
.tee-tab.on{color:var(--tee-ink);border-bottom-color:var(--tee-gold)}
.tee-tab .n{display:inline-block;margin-left:6px;font-size:11px;background:var(--tee-soft);border-radius:999px;padding:1px 7px;color:var(--tee-muted)}
.tee-tab .n:empty{display:none}

/* ── CARDS, GRIDS, ROWS ─────────────────────────────────────────────────── */
.tee-card{background:var(--tee-paper);border:1px solid var(--tee-line);border-radius:var(--tee-radius);padding:20px;margin-bottom:14px;box-shadow:var(--tee-shadow-sm)}
.tee-card-h{font-family:Saira,Inter,sans-serif;font-weight:800;font-size:18px;line-height:1.2;letter-spacing:-.01em;margin:0 0 4px;color:var(--tee-ink)}
.tee-card-h em{font-style:italic;color:var(--tee-accent)}
.tee-card-sub{color:var(--tee-muted);font-size:13px;margin-bottom:14px;line-height:1.5}
.tee-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.tee-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tee-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tee-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tee-row > input{flex:1;min-width:180px}
.tee-field{margin-bottom:16px}

/* ── LABELS + INPUTS ────────────────────────────────────────────────────── */
.tee-label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tee-ink-soft);margin:14px 0 6px}
.tee-label > span{font-family:Saira,sans-serif;font-weight:800;font-size:11px;color:var(--tee-accent);background:var(--tee-gold-tint);border:1px solid var(--tee-gold-soft);border-radius:6px;padding:1px 6px;letter-spacing:.04em}
.tee-label small{font-weight:500;letter-spacing:0;text-transform:none;color:var(--tee-muted);font-size:11px}
.tee-app input:not([type=radio]):not([type=checkbox]),.tee-app select,.tee-app textarea{width:100%;border:1px solid var(--tee-line-strong);border-radius:var(--tee-radius-sm);padding:11px;background:var(--tee-paper);color:var(--tee-ink);outline:none;font-size:14px;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.tee-app select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;cursor:pointer}
.tee-app select option{background:var(--tee-paper);color:var(--tee-ink)}
.tee-app input::placeholder,.tee-app textarea::placeholder{color:var(--tee-dim)}
.tee-app input:focus,.tee-app select:focus,.tee-app textarea:focus{border-color:var(--tee-gold);box-shadow:0 0 0 3px var(--tee-gold-soft)}
.tee-app textarea{min-height:120px;resize:vertical;line-height:1.6}
.tee-app input[readonly]{background:var(--tee-soft)}
.tee-suffix{display:flex;align-items:stretch}
.tee-suffix input{border-top-right-radius:0!important;border-bottom-right-radius:0!important;min-width:0}
.tee-suffix span{display:flex;align-items:center;padding:0 12px;border:1px solid var(--tee-line-strong);border-left:0;border-radius:0 var(--tee-radius-sm) var(--tee-radius-sm) 0;background:var(--tee-soft);font-size:12px;color:var(--tee-muted);white-space:nowrap}

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.tee-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--tee-line);border-radius:var(--tee-radius-sm);padding:10px 15px;background:var(--tee-paper);color:var(--tee-ink);font-weight:800;cursor:pointer;font-size:13.5px;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s}
.tee-btn:hover{border-color:var(--tee-gold);background:var(--tee-gold-tint)}
.tee-btn-pri{background:var(--tee-gold);border-color:var(--tee-gold);color:var(--tee-on-gold);box-shadow:0 6px 16px -8px rgba(224,173,0,.8)}
.tee-btn-pri:hover{background:var(--tee-gold-hover);border-color:var(--tee-gold-hover)}
.tee-btn-sm{padding:6px 11px;font-size:12.5px}
.tee-btn:disabled,.tee-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.tee-btn:disabled:hover{background:var(--tee-paper);border-color:var(--tee-line)}
.tee-btn-pri:disabled:hover{background:var(--tee-gold);border-color:var(--tee-gold)}

/* ── PILLS ──────────────────────────────────────────────────────────────── */
.tee-pill{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:999px;background:var(--tee-soft);color:var(--tee-muted);white-space:nowrap;vertical-align:middle;text-transform:uppercase}
.tee-pill-ok{background:var(--tee-green-soft);color:var(--tee-green)}
.tee-pill-warn{background:var(--tee-amber-soft);color:var(--tee-amber)}
:root[data-theme="dark"] .tee-pill-warn{color:#f5b86a}
.tee-pill-bad{background:var(--tee-red-soft);color:var(--tee-red)}

/* ── NOTES, HINTS, ERRORS, EMPTY ────────────────────────────────────────── */
.tee-note{background:var(--tee-note-bg);border:1px solid var(--tee-note-line);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--tee-ink-soft);line-height:1.55;margin-top:12px}
.tee-note:empty{display:none}
.tee-note b,.tee-note strong{color:var(--tee-ink)}
.tee-hint{font-size:12px;color:var(--tee-muted);margin-top:6px;line-height:1.5}
.tee-hint code,.tee-note code{font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px;background:var(--tee-soft);padding:1px 5px;border-radius:4px;color:var(--tee-accent)}
.tee-err{display:none;margin-top:12px;padding:10px 14px;border-radius:10px;background:var(--tee-red-soft);border:1px solid rgba(217,45,32,.28);color:var(--tee-red);font-size:13px;line-height:1.5}
.tee-err.show{display:block}
.tee-empty{padding:26px 12px;text-align:center;color:var(--tee-muted);font-size:13.5px;line-height:1.6}

/* ── TABLES ─────────────────────────────────────────────────────────────── */
.tee-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:14px}
.tee-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:600px}
.tee-table th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tee-muted);padding:9px 10px;border-bottom:1px solid var(--tee-line);white-space:nowrap}
.tee-table td{padding:11px 10px;border-bottom:1px solid var(--tee-line);color:var(--tee-ink-soft);vertical-align:middle}
.tee-table tr:last-child td{border-bottom:0}
.tee-table tr.tee-click{cursor:pointer}
.tee-table tr.tee-click:hover td{background:var(--tee-gold-tint)}
.tee-table td.tee-strong{font-weight:700;color:var(--tee-ink)}

/* ── STATS ──────────────────────────────────────────────────────────────── */
.tee-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.tee-stat{background:var(--tee-paper);border:1px solid var(--tee-line);border-radius:12px;padding:14px}
.tee-stat > b{display:block;font-family:Saira,sans-serif;font-weight:800;font-size:24px;line-height:1.15;color:var(--tee-ink)}
.tee-stat > b .tee-pill{font-size:12px}
.tee-stat > span{display:block;font-size:12px;color:var(--tee-muted);line-height:1.4;margin-top:2px}

/* ── TIMELINE ───────────────────────────────────────────────────────────── */
.tee-tl{position:relative;padding-left:26px}
.tee-tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--tee-tl-line)}
.tee-step{position:relative;background:var(--tee-paper);border:1px solid var(--tee-line);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.tee-step::before{content:"";position:absolute;left:-23px;top:16px;width:14px;height:14px;border-radius:50%;background:var(--tee-gold);box-shadow:0 0 0 4px var(--tee-gold-soft)}
.tee-step.editing{border-color:var(--tee-gold);box-shadow:0 0 0 3px var(--tee-gold-soft)}
.tee-step-d{font-family:Saira,sans-serif;font-weight:800;color:var(--tee-accent);font-size:12.5px;letter-spacing:.04em}
.tee-step-s{font-weight:700;margin:2px 0;color:var(--tee-ink);word-break:break-word}
.tee-step-m{font-size:12.5px;color:var(--tee-muted);line-height:1.5;word-break:break-word}
.tee-step-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ── SEND-WITH CARDS ────────────────────────────────────────────────────── */
.tee-sendwith{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tee-opt{border:1.5px solid var(--tee-line);border-radius:12px;padding:14px;cursor:pointer;background:var(--tee-paper);color:var(--tee-ink);text-align:left}
.tee-opt b{display:block;margin-bottom:2px;font-size:14px}
.tee-opt small{color:var(--tee-muted);font-size:12px;line-height:1.45;display:block}
.tee-opt.on{border-color:var(--tee-gold);background:var(--tee-gold-tint);box-shadow:0 0 0 3px var(--tee-gold-soft)}

/* ── MODAL ──────────────────────────────────────────────────────────────── */
.tee-ov{position:fixed;inset:0;background:var(--tee-overlay);display:flex;align-items:center;justify-content:center;padding:16px;z-index:1200}
.tee-modal{background:var(--tee-paper);border:1px solid var(--tee-line);border-radius:16px;max-width:460px;width:100%;padding:24px;box-shadow:var(--tee-shadow-lg);max-height:90vh;overflow-y:auto}
.tee-modal h3{font-family:Saira,Inter,sans-serif;font-weight:800;font-size:20px;margin:0 0 8px}
.tee-modal p{color:var(--tee-ink-soft);margin:0 0 10px;line-height:1.55}
.tee-big{font-family:Saira,sans-serif;font-weight:800;font-size:34px;line-height:1.1;color:var(--tee-accent);word-break:break-word;margin:2px 0 8px}

/* ── MOBILE ─────────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .tee-hero{padding-right:26px;padding-bottom:128px;flex-wrap:wrap}
  .tee-bot{width:86px;right:18px}
  .tee-mascot{width:104px;height:104px;right:12px}
  .tee-scribble{top:auto;bottom:30px;right:auto;left:84px;font-size:21px}
}
@media (max-width:820px){
  .tee-shell,.tee-shell--navy{grid-template-columns:minmax(0,1fr);background:none}
  .tee-rail{position:sticky;top:0;z-index:6;height:auto;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:10px 12px;scrollbar-width:none;border-right:0;border-bottom:1px solid var(--tee-line)}
  .tee-rail::-webkit-scrollbar{display:none}
  .tee-brand,.tee-rail-logo,.tee-navlabel,.tee-rail-foot,.tee-user{display:none}
  .tee-door{flex:none;width:auto;margin:0;padding:8px 12px;border-left:0;border-bottom:3px solid transparent;border-radius:8px}
  .tee-door small{display:none}
  .tee-door.on{border-bottom-color:var(--tee-gold)}
  .tee-door .tee-door-dot{position:static;margin:0 0 0 2px}
  .tee-top{position:static;padding:0 16px}
  .tee-top .tee-tpill{padding:6px 10px;font-size:11.5px}   /* credits stay visible on phones */
  .tee-main{padding:16px 16px 50px}
  .tee-grid2,.tee-grid3,.tee-sendwith{grid-template-columns:1fr}
  .tee-hero h1{font-size:26px}
  .tee-howbtn{top:10px;right:10px}
}
/* compact hero on phones: icon + text first, note + mascot share one short strip */
@media (max-width:560px){
  .tee-hero{padding:48px 16px 84px;gap:12px;min-height:0}
  .tee-hero-ic{width:40px;height:40px;font-size:20px;border-radius:11px}
  .tee-hero h1{font-size:23px}
  .tee-hero p{font-size:13px}
  .tee-bot{width:64px;right:14px}
  .tee-mascot{width:80px;height:80px;right:10px;bottom:-4px}
  .tee-scribble{left:74px;bottom:20px;font-size:18px}
  .tee-scribble svg{left:-52px;width:46px;height:34px}
  .tee-stats{grid-template-columns:1fr 1fr}
}