/* The public "Templates / Call flows" pages (site/templates/index.html and flow.html).
   Loaded AFTER /for/_page.css, which supplies the site's header, its menu sheet, the theme tokens
   (--bg --card --ink --line --org ...) and the dark twin under [data-theme="dark"]. Everything here is
   prefixed tp- so none of the trade pages' element rules (section, .chip, .btn, .hero) can reach it.
   Design: the owner's approved Templates screens (gallery, a flow as a timeline, a flow as a diagram),
   in the website's own colours. Mobile first at 390px; widens to a 2- and 3-column gallery. */
:root{
  --tp-surf:var(--card,#fff);--tp-line:var(--line,#e5eaf2);--tp-ink:var(--ink,#16233b);
  --tp-ink2:#475569;--tp-mute:#5a6b85;--tp-accent:#c2410c;--tp-acc-soft:#fff1e8;
  --tp-ok:#047857;--tp-ok-soft:#e8f7f0;--tp-amb:#9a4a07;--tp-amb-soft:#fef3e2;--tp-amb-line:#f1c79b;
  --tp-blue:#31507f;--tp-blue-soft:#eef3fb;--tp-edge:#8a9ab2;--tp-dot:#cfd8e6;--tp-btn:#c2410c;
  --tp-pill-on-bg:var(--tp-ink);--tp-pill-on-fg:#fff;
}
[data-theme="dark"]{
  --tp-ink2:#c0cbdc;--tp-mute:#9fb0c8;--tp-accent:#fb923c;--tp-acc-soft:rgba(249,115,22,.16);
  --tp-ok:#34d399;--tp-ok-soft:rgba(52,211,153,.13);--tp-amb:#fbbf24;--tp-amb-soft:rgba(251,191,36,.12);--tp-amb-line:rgba(251,191,36,.45);
  --tp-blue:#9db8e8;--tp-blue-soft:rgba(92,156,251,.15);--tp-edge:#6f819d;--tp-dot:#243149;--tp-btn:#ea580c;
  --tp-pill-on-bg:#e6ecf7;--tp-pill-on-fg:#0b1220;
}
.tp{padding:12px 0 40px}
.tp *{box-sizing:border-box}
.tp-wrap{max-width:1040px;margin:0 auto;padding:0 18px}
.tp h1{font-family:Sora,Inter,sans-serif;font-size:24px;line-height:1.2;letter-spacing:-.01em;font-weight:800;margin:0}
.tp-titlerow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 4px}
.tp-sub{margin:0 0 14px;color:var(--tp-ink2);font-size:15px;line-height:1.4;max-width:60ch}

/* EN | FR */
.tp-lang{display:inline-flex;border:1px solid var(--tp-line);border-radius:10px;overflow:hidden;background:var(--tp-surf);flex:0 0 auto}
.tp-lang button{font:600 12.5px Inter,system-ui,sans-serif;color:var(--tp-ink2);background:transparent;border:0;padding:9px 12px;min-height:40px;cursor:pointer}
.tp-lang button[aria-pressed="true"]{background:var(--tp-pill-on-bg);color:var(--tp-pill-on-fg)}

/* gallery */
.tp-search{display:block;width:100%;font:15px Inter,system-ui,sans-serif;color:var(--tp-ink);background:var(--tp-surf);border:1px solid var(--tp-line);border-radius:12px;padding:12px 14px;margin:0 0 10px;min-height:46px}
.tp-search::placeholder{color:var(--tp-mute)}
.tp-search:focus{outline:2px solid var(--tp-accent);outline-offset:1px}
.tp-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;margin:0 -18px;padding-left:18px;padding-right:18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tp-chips::-webkit-scrollbar{display:none}
.tp-chip{flex:0 0 auto;white-space:nowrap;font:600 13px Inter,system-ui,sans-serif;color:var(--tp-ink2);background:var(--tp-surf);border:1px solid var(--tp-line);border-radius:999px;padding:8px 14px;min-height:40px;cursor:pointer}
.tp-chip[aria-pressed="true"]{background:var(--tp-pill-on-bg);color:var(--tp-pill-on-fg);border-color:var(--tp-pill-on-bg)}
.tp-cards{display:grid;gap:10px;grid-template-columns:1fr}
.tp-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--tp-surf);border:1px solid var(--tp-line);border-radius:16px;padding:14px;color:var(--tp-ink);text-decoration:none}
.tp-card:hover{border-color:var(--tp-accent)}
.tp-card:focus-visible,.tp-btn:focus-visible,.tp-link:focus-visible,.tp-back:focus-visible,.tp-tab:focus-visible,.tp-chip:focus-visible,.tp-lang button:focus-visible,.tp-ctl button:focus-visible,.tp-add:focus-visible{outline:2px solid var(--tp-accent);outline-offset:2px}
.tp-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:21px;background:var(--tp-blue-soft)}
.tp-ic[data-cat="health"]{background:#e8f7f0}.tp-ic[data-cat="law"]{background:#eaf2ff}.tp-ic[data-cat="home"]{background:#eef3fb}
.tp-ic[data-cat="property"]{background:#f1ecfb}.tp-ic[data-cat="shops"]{background:#fff1e8}.tp-ic[data-cat="auto"]{background:#eef0f3}
.tp-ic[data-cat="business"]{background:#e9f4fb}.tp-ic[data-cat="care"]{background:#fef3e2}
[data-theme="dark"] .tp-ic{background:rgba(255,255,255,.07)!important}
.tp-card b{display:block;font-size:15px;line-height:1.25;overflow-wrap:anywhere}
.tp-card p{margin:3px 0 0;font-size:12.5px;line-height:1.35;color:var(--tp-ink2)}
.tp-meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:7px;font-size:11.5px;color:var(--tp-mute)}
.tp-tag{border-radius:999px;padding:2px 9px;background:var(--tp-ok-soft);color:var(--tp-ok);font-weight:600}
.tp-go{font-size:22px;color:var(--tp-mute);line-height:1}
.tp-empty{margin:18px 0;color:var(--tp-ink2);font-size:14px}

/* a flow page */
.tp-back{display:inline-block;margin:8px 0 0;color:var(--tp-accent);font-size:14px;font-weight:700;text-decoration:none;min-height:32px;line-height:32px}
.tp-hero{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;margin:8px 0 10px;background:var(--tp-surf);border:1px solid var(--tp-line);border-radius:18px;padding:14px}
.tp-hero h1{font-size:19px}
.tp-hero p{margin:2px 0 0;font-size:12.5px;color:var(--tp-ink2);line-height:1.35}
.tp-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 8px}
.tp-tabs{display:inline-flex;background:var(--tp-surf);border:1px solid var(--tp-line);border-radius:10px;overflow:hidden}
.tp-tab{font:600 12.5px Inter,system-ui,sans-serif;color:var(--tp-ink2);background:transparent;border:0;padding:9px 14px;min-height:40px;cursor:pointer}
.tp-tab[aria-selected="true"]{background:var(--tp-pill-on-bg);color:var(--tp-pill-on-fg)}
.tp-hint{margin:0 0 10px;font-size:12.5px;color:var(--tp-ink2);line-height:1.4}

/* the list: a vertical timeline */
.tp-flow{list-style:none;margin:0 0 8px;padding:0;position:relative;max-width:760px}
.tp-step{position:relative;margin:0 0 22px 26px;background:var(--tp-surf);border:1px solid var(--tp-line);border-radius:14px;padding:11px 13px}
.tp-step:before{content:"";position:absolute;left:-17px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--tp-accent);box-shadow:0 0 0 4px var(--tp-acc-soft)}
.tp-step:after{content:"";position:absolute;left:-12px;top:calc(50% + 8px);width:2px;height:calc(100% + 14px);background:repeating-linear-gradient(var(--tp-line) 0 4px,transparent 4px 8px)}
.tp-step:last-child:after{display:none}
.tp-step[data-kind="urgent"]{border-color:var(--tp-amb-line);background:var(--tp-amb-soft)}
.tp-step[data-kind="urgent"]:before{background:var(--tp-amb);box-shadow:0 0 0 4px var(--tp-amb-soft)}
.tp-step[data-kind="after"]:before{background:var(--tp-ok);box-shadow:0 0 0 4px var(--tp-ok-soft)}
.tp-k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tp-accent);font-weight:800}
.tp-step[data-kind="urgent"] .tp-k{color:var(--tp-amb)}
.tp-step[data-kind="after"] .tp-k{color:var(--tp-ok)}
.tp-step b{display:block;font-size:14.5px;margin:2px 0;line-height:1.3}
.tp-step p{margin:0;font-size:12.5px;color:var(--tp-ink2);line-height:1.4}
.tp-say{margin-top:7px;background:var(--bg,#f6f8fc);border-radius:9px;padding:7px 9px;font-size:12px;font-style:italic;color:var(--tp-ink);line-height:1.4}
.tp-say i{font-style:normal;font-weight:700;color:var(--tp-mute);margin-right:4px}
.tp-chipsrow{margin-top:7px;display:flex;gap:6px;flex-wrap:wrap;font-size:11.5px}
.tp-pill{border-radius:999px;padding:2px 9px;background:var(--tp-blue-soft);color:var(--tp-blue)}
.tp-pill[data-tone="skip"]{background:var(--tp-amb-soft);color:var(--tp-amb)}
.tp-pill[data-tone="ok"]{background:var(--tp-ok-soft);color:var(--tp-ok)}
.tp-pill[data-tone="cond"]{background:var(--tp-blue-soft);color:var(--tp-blue)}

/* the diagram */
.tp-canvas{position:relative;height:clamp(400px,calc(100vh - 440px),720px);border:1px solid var(--tp-line);border-radius:16px;overflow:hidden;background-color:var(--tp-surf);
  background-image:radial-gradient(var(--tp-dot) 1px,transparent 1px);background-size:18px 18px}
.tp-svg{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.tp-svg.is-drag{cursor:grabbing}
.tp-edge{fill:none;stroke:var(--tp-edge);stroke-width:1.5}
.tp-edge[data-tone="warn"]{stroke:var(--tp-amb)}
.tp-arrow{fill:var(--tp-edge)}
.tp-elab rect{fill:var(--tp-surf);stroke:var(--tp-line)}
.tp-elab text{fill:var(--tp-ink2);font:500 10.5px Inter,system-ui,sans-serif}
.tp-elab[data-tone="warn"] rect{fill:#fef3e2;stroke:var(--tp-amb-line)}
[data-theme="dark"] .tp-elab[data-tone="warn"] rect{fill:#3a2f14}
.tp-elab[data-tone="warn"] text{fill:var(--tp-amb)}
.tp-pt rect{fill:var(--tp-surf);stroke:var(--tp-line)}
.tp-pt text{fill:var(--tp-ink);font:700 12px Inter,system-ui,sans-serif}
.tp-pt[data-end="start"] rect{fill:var(--tp-pill-on-bg);stroke:var(--tp-pill-on-bg)}
.tp-pt[data-end="start"] text{fill:var(--tp-pill-on-fg)}
.tp-node,.tp-measure .tp-node{background:var(--tp-surf);border:1px solid var(--tp-line);border-radius:12px;padding:8px 10px;box-shadow:0 2px 8px rgba(15,23,42,.07);color:var(--tp-ink);font-family:Inter,system-ui,sans-serif;width:100%}
.tp-node .nk{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tp-accent);font-weight:800}
.tp-node b{display:block;font-size:12.5px;line-height:1.22;margin-top:2px}
.tp-node small{display:block;font-size:10.5px;color:var(--tp-ink2);margin-top:3px;line-height:1.28}
.tp-node[data-kind="urgent"]{border-color:var(--tp-amb-line);background:var(--tp-amb-soft)}
.tp-node[data-kind="urgent"] .nk{color:var(--tp-amb)}
.tp-node[data-kind="after"]{background:var(--tp-ok-soft);border-color:rgba(5,150,105,.35)}
.tp-node[data-kind="after"] .nk{color:var(--tp-ok)}
.tp-measure{position:absolute;left:-9999px;top:0;width:176px;visibility:hidden;pointer-events:none}
.tp-ctl{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.tp-ctl button{width:40px;height:40px;border-radius:10px;border:1px solid var(--tp-line);background:var(--tp-surf);color:var(--tp-ink);font:700 17px Inter,system-ui,sans-serif;cursor:pointer;line-height:1;padding:0}
.tp-add{position:absolute;right:10px;bottom:10px;z-index:2;background:var(--tp-surf);border:1px solid var(--tp-line);border-radius:10px;padding:10px 13px;min-height:40px;font:600 12.5px Inter,system-ui,sans-serif;color:var(--tp-ink2);cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.1)}
.tp-addnote{position:absolute;right:10px;bottom:58px;z-index:3;max-width:250px;background:var(--tp-surf);border:1px solid var(--tp-line);border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.4;color:var(--tp-ink2);box-shadow:0 6px 20px rgba(15,23,42,.16)}

/* the call to action: sticky at the bottom of the view, like the approved screens */
.tp-cta{position:sticky;bottom:0;z-index:5;margin:10px -18px 0;padding:22px 18px 14px;background:linear-gradient(rgba(246,248,252,0),var(--bg,#f6f8fc) 32%)}
[data-theme="dark"] .tp-cta{background:linear-gradient(rgba(11,18,32,0),var(--bg,#0b1220) 32%)}
.tp-btn{display:block;width:100%;max-width:520px;margin:0 auto;text-align:center;background:var(--tp-btn);color:#fff;border-radius:14px;padding:14px;font:700 15px Inter,system-ui,sans-serif;text-decoration:none;min-height:48px}
.tp-btn:hover{filter:brightness(1.07)}
.tp-link{display:block;text-align:center;margin-top:6px;color:var(--tp-ink2);font-size:13px;text-decoration:underline;min-height:36px;line-height:36px}

/* footer (small, deliberately plain) */
.tp-foot{border-top:1px solid var(--tp-line);padding:22px 0 30px;color:var(--tp-mute);font-size:13px;background:var(--tp-surf)}
.tp-foot .tp-wrap{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:space-between}
.tp-foot a{color:inherit;text-decoration:none;font-weight:600}
.tp-foot a:hover{color:var(--tp-accent)}
.tp-foot .fl{display:flex;flex-wrap:wrap;gap:6px 16px}

@media(min-width:640px){
  .tp-cards{grid-template-columns:1fr 1fr}
  .tp h1{font-size:30px}
  .tp-hero h1{font-size:22px}
  .tp-chips{margin:0;padding-left:0;padding-right:0;flex-wrap:wrap;overflow:visible}
  .tp-cta{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
}
@media(min-width:1000px){
  .tp-cards{grid-template-columns:1fr 1fr 1fr}
  .tp-canvas{height:clamp(480px,calc(100vh - 360px),780px)}
}
@media(prefers-reduced-motion:reduce){.tp *{transition:none!important;animation:none!important}}