/*
  TT look for TravelTriangle: the voice page (Tara) and the dashboard. First made as TD-C31; recoloured on 15 Oct 2026 to the colours
  of Bharat's TT CRM prototype (Chiru's ask, about 09:27 IST). Values come from brand/TT-THEME.md, which names the sources:
  the CRM's light theme (raw/2026-10-15-ttcrm2-theme.md at the repo root) and TT's public website (the logo files, static/brand/).
  Type: system fonts only. The CRM's font is Manrope; the page already asks Google Fonts for it, so switching --tt-font is one line,
  but that is Chiru's call and is not done here. Light theme only.
  Colours, type, borders, corners and the logo; the hero scene is redrawn (the same sky, sun and mountains, in TT tones).
  No layout change, nothing hidden. This sheet is linked after every <style> block of the pages, so at equal specificity it wins.
  Values marked "ours" are NOT in the CRM file; we chose them and they need a look by eye. Every other value is the CRM's, word for word.
  Inline styles on the page (the recording notice, the retry bar) are beaten only with !important, and only where marked.
*/

:root {
  /* the CRM's light theme (raw/2026-10-15-ttcrm2-theme.md), word for word */
  --tt-primary: #20a397;        /* CRM --accent: accents, icons, rings, sun-lit areas. NOT a fill under white text: white on it is only 3.1 : 1 (see --tt-primary-strong) */
  --tt-primary-hover: #178a80;  /* CRM --accent-hover */
  --tt-primary-soft: #e6f9f7;   /* CRM --accent-soft */
  --tt-on-primary: #ffffff;     /* CRM --accent-foreground */
  --tt-text: #0f172a;           /* CRM --text-primary */
  --tt-muted: #64748b;          /* CRM --text-secondary */
  --tt-disabled: #94a3b8;       /* CRM --text-disabled */
  --tt-heading: #020617;        /* CRM --text-heading */
  --tt-surface: #ffffff;        /* CRM --surface */
  --tt-sunken: #f5f7f9;         /* CRM --surface-sunken: the page behind the cards */
  --tt-border: #e7ecf0;         /* CRM --border */
  --tt-border-hover: #cbd5e1;   /* CRM --border-hover */
  --tt-danger: #b91c1c;         /* CRM --danger: also the hang-up (in call) state of the call button */
  --tt-success: #15803d;        /* CRM --success */
  --tt-warning: #b45309;        /* CRM --warning */
  --tt-coral: #fb7185;          /* CRM --coral: a second colour only (the caller's arc in the ring) */
  --tt-coral-soft: #fff1f3;     /* CRM --coral-soft */
  --tt-radius: 12px;            /* CRM --radius */
  --tt-shadow-soft: 0 12px 32px -12px #0f172a1f; /* CRM --shadow-soft: floating sheets only */
  --tt-attention-bg: #fffbeb;   /* CRM --card-attention-bg: a detail still to share */
  --tt-attention-line: #fcd34d; /* CRM --card-attention-border */
  --tt-risk-bg: #fef2f2;        /* CRM --card-risk-bg */
  --tt-risk-line: #fca5a5;      /* CRM --card-risk-border */
  --tt-won-bg: #f0fdf4;         /* CRM --pill-won-bg: all details captured */
  --tt-neutral-bg: #f1f5f9;     /* CRM --pill-new-bg */

  /* ours: not in the CRM file */
  --tt-success-line: #bbf7d0;   /* ours: a border for the green chip (the CRM has no green border) */
  --tt-primary-strong: #1a8379; /* ours: the nearest teal to #20a397 (same hue and saturation, a little darker) that gives white text 4.6 : 1 (4.5 is the mark).
                                   Used for every fill that carries white text: the call button at rest, the summary header, primary buttons, the dashboard's active item */
  --tt-primary-deep: #0f766e;   /* CRM --pill-converted-fg, word for word: hover on those fills, and teal text on white (5.5 : 1) */
  --tt-link: var(--tt-primary-deep); /* ours: text links are the deep teal (#20a397 on white is 3.1 : 1, this is 5.5 : 1) */
  --tt-header-bg: var(--tt-primary-strong); /* ours: the fill of the call summary's header */
  --tt-sky-0: #0a4a46;          /* ours: the hero sky, top (deep teal) */
  --tt-sky-1: #0e6962;          /* ours: the hero sky, a third of the way down */
  --tt-sky-2: #11766e;          /* ours: the hero sky, under the chips */
  --tt-sky-3: #3fb6aa;          /* ours: the hero sky, behind the call button */
  --tt-sky-4: #8fd9d0;          /* ours: the hero sky, near the mountains (mint) */
  --tt-sky-5: #d6f2ee;          /* ours: the hero sky, at the horizon */
  --tt-ridge-far: #48b9ad;      /* CRM --brochure-teal, used for the far mountains */
  --tt-ridge-mid: #0e6b63;      /* CRM --slide-accent, used for the middle mountains */
  --tt-ridge-near: #083f3b;     /* ours: the near mountains (a deeper teal) */
  --tt-sun: #ffd68a;            /* ours: a warm soft sun */
  --tt-scrim: rgba(6, 52, 48, .66); /* ours: a deep-teal film behind small text that sits on the scene */
  --tt-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans Devanagari', sans-serif;

  /* the voice page's own names, pointed at TT */
  --bg: var(--tt-sunken);
  --surface: var(--tt-surface);
  --ink: var(--tt-text);
  --ink-2: var(--tt-muted);
  --ink-3: var(--tt-muted);
  --border: var(--tt-border);
  --accent: var(--tt-primary-strong); /* the page uses --accent for text on hover, the "live" status and the Resume fill, so it is the strong teal; the field icons keep #20a397 (.fic below) */
  --accent-weak: var(--tt-primary-soft);
  --danger: var(--tt-danger);
  --warn: var(--tt-warning);
  --call: var(--tt-primary-soft);   /* the ring's arc while Tara speaks: the ring sits on the dark scene, so a light mint (CRM --accent-soft) */
  --busy: var(--tt-coral);          /* the ring's arc while the caller speaks: the second colour */
  --line-strong: rgba(255, 255, 255, .42); /* ours: the ring's track, on the scene */
  --font: var(--tt-font);
  --display: var(--tt-font);

  /* the dashboard's own names, pointed at TT */
  --cream: var(--tt-sunken);
  --card: var(--tt-surface);
  --line: var(--tt-border);
  --ink-soft: var(--tt-muted);
  --ink-faint: var(--tt-muted);
  --grad-a: var(--tt-primary-strong); /* the dashboard's buttons and active item carry white text, so strong to deep; its sign-in backdrop (.gate below) keeps the brand teal */
  --grad-b: var(--tt-primary-deep);
  --danger-bg: var(--tt-risk-bg);
  --danger-line: var(--tt-risk-line);
  --success: var(--tt-success);
  --success-bg: var(--tt-won-bg);
  --success-line: var(--tt-success-line);
  --amber: var(--tt-warning);
  --amber-bg: var(--tt-attention-bg);
  --amber-line: var(--tt-attention-line);
  --neutral-bg: var(--tt-neutral-bg);
  --neutral-line: var(--tt-border);
  --font-display: var(--tt-font);
  --font-body: var(--tt-font);
  --radius: var(--tt-radius);
}

body { background: var(--tt-sunken); color: var(--tt-text); }
h1, h2 { color: var(--tt-heading); }
a { color: var(--tt-link); }
::selection { background: rgba(32, 163, 151, .22); }

/* header: the logo picture only. The picture already says TRAVEL TRIANGLE, so the text "TravelTriangle" beside it is hidden visually and
   stays in the page for screen readers (the standard visually-hidden recipe; display:none would hide it from them too). */
.wordmark .travel-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.wordmark::before, .brand::before, .gate-logo::before {
  content: ''; display: block; background: #ffffff no-repeat center / contain;
}
.wordmark::before {
  display: inline-block; vertical-align: middle; margin-right: 10px; padding: 3px 6px; border-radius: 6px;
  width: 170px; height: 22px; background-image: url('brand/logo.jpg');
}
.brand::before, .gate-logo::before {
  width: 40px; height: 40px; margin: 0 0 10px 0; border-radius: 8px; background-image: url('brand/logo.png');
}
.gate-logo::before { margin: 0 auto 10px auto; width: 56px; height: 56px; }

/* buttons: the CRM's filled teal, 12px corners */
.btn, .hbtn, .copybtn, .copylogs { border-radius: var(--tt-radius); }
.btn:hover, .hbtn:hover, .copybtn:hover, .copylogs:hover { border-color: var(--tt-primary); }
.btn:hover { border-color: var(--tt-border-hover); }
.btn.primary, .hbtn.hresume { background: var(--tt-primary-strong); border-color: var(--tt-primary-strong); color: var(--tt-on-primary); }
.btn.primary:hover, .hbtn.hresume:hover { background: var(--tt-primary-deep); border-color: var(--tt-primary-deep); }
.gate { background: linear-gradient(150deg, var(--tt-primary), var(--tt-primary-hover)); } /* no text sits on it: the brand teal */
.hbtn.hdel:hover { color: var(--tt-danger); border-color: var(--tt-danger); }
.copybtn.copied { color: var(--tt-success); border-color: var(--tt-success); }

/* the call button: teal; in a call it turns the danger red (it is then the hang-up). The white ring keeps it visible on any part of the sky. */
.dial, .dial.incall { border-radius: 50%; }
.dial { background: var(--tt-primary-strong); color: var(--tt-on-primary); }
.dial.incall { background: var(--tt-danger); }
@keyframes dialbreathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 16px 34px -12px rgba(6, 52, 48, .6); }
  50% { transform: scale(1.03); box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 20px 46px -12px rgba(6, 52, 48, .75); }
}
@keyframes dialtalk {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 16px 34px -12px rgba(185, 28, 28, .6); }
  50% { transform: scale(1.045); box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 20px 48px -10px rgba(185, 28, 28, .8); }
}

/* the hero scene: the page's sunset sky, sun and mountains, redrawn in TT tones.
   The layers are the page's own, in the page's order: sun glow, mountains (a drawing), sky. Mountains: far, middle, near. */
.hero::before {
  background-image:
    radial-gradient(circle 400px at 78% 56%, rgba(255, 224, 170, .34), rgba(255, 224, 170, 0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='none'%3E%3Cpath d='M0 800 L0 604 L90 566 L210 600 L330 556 L450 610 L560 590 L700 624 L830 574 L960 610 L1090 566 L1200 596 L1200 800 Z' fill='%2348b9ad' fill-opacity='.5'/%3E%3Cpath d='M0 800 L0 648 L120 608 L240 652 L360 592 L470 648 L600 604 L730 656 L860 612 L980 648 L1100 624 L1200 644 L1200 800 Z' fill='%230e6b63' fill-opacity='.82'/%3E%3Cpath d='M0 800 L0 668 L150 638 L300 672 L450 632 L600 668 L760 642 L900 672 L1050 648 L1200 666 L1200 800 Z' fill='%23083f3b' fill-opacity='.92'/%3E%3C/svg%3E"),
    linear-gradient(180deg,
      var(--tt-sky-0) 0%, var(--tt-sky-1) 30%, var(--tt-sky-2) 48%, var(--tt-sky-3) 64%,
      var(--tt-sky-4) 80%, var(--tt-sky-5) 100%);
}
.hero::after {
  left: calc(78% - 44px); top: calc(56% - 44px); width: 88px; height: 88px;
  background: radial-gradient(circle at 42% 36%, #fff3d6, var(--tt-sun) 72%);
  box-shadow: 0 0 70px 20px rgba(255, 214, 138, .4);
}
.topbar { color: #ffffff; }
.eyebrow { color: var(--tt-primary-soft); }
.hero h1 { color: #ffffff; text-shadow: 0 2px 24px rgba(6, 52, 48, .35); }
.sub { color: rgba(255, 255, 255, .94); }
.langchip { color: #ffffff; background: rgba(6, 52, 48, .32); border-color: rgba(255, 255, 255, .5); }
.scrollcue { color: #ffffff; background: rgba(6, 52, 48, .35); border-color: rgba(255, 255, 255, .55); }
.scrollcue:hover { background: rgba(6, 52, 48, .5); }
.subtitles { background: var(--tt-scrim); color: #ffffff; }
#status.err { color: #ffe4e8; }
.dial:focus-visible { outline-color: #ffffff; }
/* the recording notice sits on the part of the sky nearest the mountains, where the sky is lightest: a deep-teal film behind it.
   The page's inline style gives it a faded cream colour and a shadow; !important is needed to beat an inline style. */
#consentNote { background: var(--tt-scrim); padding: 8px 14px; border-radius: var(--tt-radius); color: #ffffff !important; opacity: 1 !important; text-shadow: none !important; }
#consentNote:empty { padding: 0; background: none; }
#pauseFreshLink { color: #ffffff !important; text-shadow: none !important; }
#briefRetryBar > div { border-color: var(--tt-primary) !important; }

@media (max-width: 880px) {
  .hero::before {
    background-image:
      radial-gradient(circle 200px at 88% 48%, rgba(255, 224, 170, .24), rgba(255, 224, 170, 0) 70%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='none'%3E%3Cpath d='M0 800 L0 604 L90 566 L210 600 L330 556 L450 610 L560 590 L700 624 L830 574 L960 610 L1090 566 L1200 596 L1200 800 Z' fill='%2348b9ad' fill-opacity='.5'/%3E%3Cpath d='M0 800 L0 648 L120 608 L240 652 L360 592 L470 648 L600 604 L730 656 L860 612 L980 648 L1100 624 L1200 644 L1200 800 Z' fill='%230e6b63' fill-opacity='.82'/%3E%3Cpath d='M0 800 L0 668 L150 638 L300 672 L450 632 L600 668 L760 642 L900 672 L1050 648 L1200 666 L1200 800 Z' fill='%23083f3b' fill-opacity='.92'/%3E%3C/svg%3E"),
      linear-gradient(180deg,
        var(--tt-sky-0) 0%, var(--tt-sky-1) 30%, var(--tt-sky-2) 48%, var(--tt-sky-3) 64%,
        var(--tt-sky-4) 80%, var(--tt-sky-5) 100%);
  }
  .hero::after {
    /* on a phone the headline spans the width, so the sun sits lower right, beside the call button, clear of every line of text */
    left: auto; right: 14px; top: 46%; width: 48px; height: 48px;
    box-shadow: 0 0 30px 6px rgba(255, 214, 138, .3);
  }
}

/* cards: white, light border, 12px corners, no shadow */
.card, .panelcard, .tile, .hcard, .cm-sheet, .gate-card {
  background: var(--tt-surface); border: 1px solid var(--tt-border); border-radius: var(--tt-radius); box-shadow: none;
}
.cm-sheet, .gate-card { box-shadow: var(--tt-shadow-soft); }
.line { background: var(--tt-sunken); }
.who.agent { color: var(--tt-primary-deep); }
.fic { color: var(--tt-primary); } /* the field icons keep the brand teal */
.who.caller { color: var(--tt-muted); }

/* the call summary: a solid teal header (it was red, then orange to purple). It carries white text, so its fill is --tt-primary-strong
   (white on it 4.6 : 1), not the brand #20a397 (3.1 : 1). One token, --tt-header-bg, if Chiru wants another teal. */
.briefhero {
  background: var(--tt-header-bg); border: 1px solid var(--tt-header-bg); border-radius: var(--tt-radius) var(--tt-radius) 0 0; box-shadow: none;
  color: #ffffff;
}
.bh-kicker { color: #ffffff; }
.bh-dates { opacity: 1; }
#briefPanel .cardlabel, #briefPanel .cardlabel #briefStamp { color: #ffffff; opacity: 1; }
#briefPanel .copybtn { color: #ffffff; border-color: rgba(255, 255, 255, .6); background: rgba(6, 52, 48, .18); }
#briefPanel .copybtn:hover { background: rgba(6, 52, 48, .32); border-color: #ffffff; }
#briefPanel .copybtn.copied { color: #ffffff; border-color: #ffffff; }
.field .val.missing, .missing-list { background: var(--tt-attention-bg); color: var(--tt-warning); }
.missing-list { border: 1px solid var(--tt-attention-line); }
.missing-list.allgood { background: var(--tt-won-bg); color: var(--tt-success); border-color: var(--tt-success-line); }

/* the history list */
.hrow { border-bottom-color: var(--tt-border); }
.hmain b { color: var(--tt-heading); }

/* the dashboard table */
.calllist { background: var(--tt-surface); border-color: var(--tt-border); border-radius: var(--tt-radius); }
.callhead { color: var(--tt-muted); }
.callrow { border-top-color: var(--tt-border); }
.callrow:hover { background: var(--tt-sunken); }
.callrow.isfail { border-left-color: var(--tt-danger); }
.resumelink { color: var(--tt-primary-deep); }
.barrow .rfill { background: var(--tt-danger); }
.bubble.tara { background: var(--tt-primary-soft); }
.logbox { background: var(--tt-text); color: var(--tt-border-hover); }
.panel-overlay { background: rgba(15, 23, 42, .35); }