/* Order message templates page. Loads after styles.css.
   Every class here is tp- prefixed on purpose: styles.css already owns .msg, .card, .hero, .tab
   and .row for the homepage demo, and reusing those names would restyle this page by accident. */

:root{--warn-ink:33 90% 28%}

/* ── hero: compact, the messages are the point ─────────────────── */
.tp-hero{position:relative;overflow:hidden;text-align:center;padding:88px 0 52px;background:#fff}
.tp-hero .grid-bg{height:520px}
.tp-hero .wrap{position:relative;z-index:1}
.tp-hero .eyebrow{margin-bottom:22px}
.tp-hero h1{margin-bottom:18px}
.tp-hero .lede{max-width:35rem;margin-bottom:0}

/* ── language bar: stays put while the messages scroll ─────────── */
.tp-tool{border-top:1px solid hsl(var(--border));background:#fff}
.tp-bar{position:sticky;top:58px;z-index:40;background:#fff;border-bottom:1px solid hsl(var(--border))}
.tp-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;padding-block:10px}
.tp-seg{display:inline-flex;gap:2px;padding:3px;background:hsl(var(--muted));
  border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 1px)}
.tp-seg button{border:0;background:none;font:inherit;font-size:13.5px;font-weight:500;
  color:hsl(var(--muted-foreground));padding:0 18px;min-height:36px;white-space:nowrap;
  border-radius:calc(var(--radius) - 4px);cursor:pointer;transition:background .15s,color .15s}
.tp-seg button:hover{color:hsl(var(--foreground))}
.tp-seg button[aria-checked="true"]{background:#fff;color:hsl(var(--foreground));
  box-shadow:0 1px 2px rgb(0 0 0 / .08),0 0 0 1px hsl(var(--border))}
.tp-seg button:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:1px}
.tp-seg button[lang="ml"]{font-family:"Noto Sans Malayalam","Geist",system-ui,sans-serif}

/* ── layout: details on the left (wide screens), messages on the right ─ */
.tp-layout{display:grid;gap:28px;padding-block:32px var(--band)}
@media (min-width:900px){
  .tp-layout{grid-template-columns:288px minmax(0,1fr);gap:52px;align-items:start}
  .tp-side{position:sticky;top:132px}
}

/* ── your details ───────────────────────────────────────────────── */
.tp-side{border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card))}
.tp-side summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:15px 16px}
.tp-side summary::-webkit-details-marker{display:none}
.tp-side summary b{display:block;font-weight:550;font-size:14.5px;letter-spacing:-.01em}
.tp-side summary small{display:block;font-size:12.5px;color:hsl(var(--muted-foreground));margin-top:1px}
.tp-side summary svg{width:15px;height:15px;flex:none;color:hsl(var(--muted-foreground));
  transition:transform .25s cubic-bezier(.16,1,.3,1)}
.tp-side[open] summary svg{transform:rotate(180deg)}
.tp-side[open] summary{border-bottom:1px solid hsl(var(--border))}
.tp-side-body{padding:6px 16px 16px}
@media (min-width:900px){.tp-side-body{max-height:calc(100dvh - 232px);overflow-y:auto}}
.tp-side-title{margin:14px 0 0;font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:hsl(var(--muted-foreground))}
.tp-side-title small{display:block;text-transform:none;letter-spacing:0;font-size:12px;margin-top:1px;opacity:.85}
.tp-field{margin-top:8px}
.tp-field label{display:block;font-size:12.5px;color:hsl(var(--muted-foreground));margin-bottom:4px}
.tp-field input{width:100%;height:38px;padding:0 12px;font:inherit;font-size:14px;
  color:hsl(var(--foreground));background:#fff;border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) - 2px);transition:border-color .15s,box-shadow .15s}
.tp-field input::placeholder{color:hsl(var(--muted-foreground)/.6)}
.tp-field input:hover{border-color:hsl(var(--muted-foreground)/.4)}
.tp-field input:focus{outline:0;border-color:hsl(var(--ring));box-shadow:0 0 0 3px hsl(var(--ring)/.18)}
.tp-clear{margin-top:12px;padding:6px 0;border:0;background:none;font:inherit;font-size:13px;
  color:hsl(var(--muted-foreground));text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.tp-clear:hover{color:hsl(var(--foreground))}

/* ── message groups and cards ───────────────────────────────────── */
.tp-list{min-width:0}
.tp-cards{display:grid;gap:14px}
.tp-card{border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card));
  padding:20px;scroll-margin-top:150px;transition:box-shadow .2s}
.tp-card:hover{box-shadow:var(--shadow)}
.tp-card-head{display:flex;gap:14px;align-items:flex-start}
.tp-num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  color:hsl(var(--muted-foreground));padding-top:4px;flex:none}
.tp-card h3{margin:0;font-size:15.5px;font-weight:550;letter-spacing:-.012em;line-height:1.35}
.tp-when{margin:2px 0 0;font-size:13.5px;color:hsl(var(--muted-foreground))}

/* the message, drawn like the outgoing chat bubble it will become */
.tp-bubble-row{display:flex;justify-content:flex-end;margin:16px 0 14px}
.tp-bubble{max-width:35rem;padding:12px 15px;font-size:15px;line-height:1.6;white-space:pre-line;
  overflow-wrap:anywhere;background:hsl(var(--primary-soft));
  border:1px solid hsl(var(--primary)/.2);border-radius:14px 14px 5px 14px}
.tp-bubble[hidden]{display:none}
.tp-bubble[lang="ml"]{font-family:"Noto Sans Malayalam","Geist",system-ui,sans-serif;line-height:1.85}
.tp-ph{border-radius:4px}
.tp-ph.empty{background:hsl(var(--warn-soft));color:hsl(var(--warn-ink));
  box-shadow:0 0 0 1px hsl(var(--warn)/.28) inset;padding:0 3px}

.tp-foot{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap}
.tp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.tp-blank{font:inherit;font-size:12px;font-weight:500;cursor:pointer;
  background:hsl(var(--warn-soft));border:1px solid hsl(var(--warn)/.3);
  color:hsl(var(--warn-ink));padding:4px 11px;border-radius:999px}
.tp-blank[hidden]{display:none}
.tp-blank:hover{border-color:hsl(var(--warn)/.6)}
.tp-copy.done{background:hsl(var(--primary))}
.tp-actions .btn{white-space:nowrap}

/* screen reader announcements only */
.tp-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── phones ─────────────────────────────────────────────────────── */
@media (max-width:640px){
  .tp-hero{padding:56px 0 36px}
  .tp-bar .wrap{padding-block:8px}
  .tp-seg{width:100%}
  .tp-seg button{flex:1;padding:0 8px;min-height:40px}
  .tp-layout{padding-block:20px var(--band)}
  .tp-card{padding:16px}
  .tp-card-head{gap:10px}
  .tp-bubble{max-width:100%;font-size:15px}
  .tp-bubble-row{justify-content:stretch}
  .tp-foot{flex-direction:column;align-items:stretch}
  .tp-actions{margin-left:0;flex-direction:column-reverse}
  .tp-actions .btn{justify-content:center;height:44px}
  .tp-blank{align-self:flex-start}
  .tp-field input{height:44px}
}


.tp-nw{white-space:nowrap}

.tp-side summary,.tp-seg button,.tp-blank{-webkit-tap-highlight-color:transparent}

/* ── stage tabs: one stage at a time instead of one long scroll ─── */
.tp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tp-tabs{display:flex;gap:2px;min-width:0;margin-left:auto;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tp-tabs::-webkit-scrollbar{display:none}
.tp-tabs button{flex:none;display:inline-flex;align-items:center;gap:8px;border:0;background:none;
  font:inherit;font-size:13.5px;font-weight:500;color:hsl(var(--muted-foreground));white-space:nowrap;
  padding:0 13px;min-height:36px;border-radius:calc(var(--radius) - 4px);cursor:pointer;
  transition:background .15s,color .15s;-webkit-tap-highlight-color:transparent}
.tp-tabs button:hover{color:hsl(var(--foreground))}
.tp-tabs button:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:1px}
.tp-tabs button span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  min-width:19px;padding:1px 6px;border-radius:999px;text-align:center;
  background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.tp-tabs button[aria-selected="true"]{color:hsl(var(--primary));background:hsl(var(--primary-soft));
  box-shadow:inset 0 0 0 1px hsl(var(--primary)/.22)}
.tp-tabs button[aria-selected="true"] span{background:hsl(var(--primary)/.14);color:hsl(var(--primary))}
@media (max-width:899px){.tp-tabs{flex:1 1 100%;margin-left:0}}
@media (max-width:640px){
  /* two short rows, and the site header scrolls away here so the controls keep the room */
  header{position:static}
  .tp-bar{top:0}
  .tp-bar .wrap{gap:6px;padding-block:5px}
  .tp-seg button{min-height:36px}
  .tp-tabs button{min-height:38px}
}