/* 2ndot — design tokens + shared styles. System: design/palette.html.
   Rule: indigo is structure, blue is action. */
:root {
  --indigo-900:#1E004D; --indigo-700:#300080; --indigo-500:#4B21A8; --indigo-300:#8B6CD9; --indigo-100:#E6DFF7;
  --blue-900:#1E3A78;  --blue-700:#2F55A8;  --blue-500:#4070D0;  --blue-300:#7FA1E4;  --blue-100:#E3EBFA;
  --ink-900:#171923; --ink-700:#3A3F4E; --ink-500:#6A7186; --ink-300:#AEB4C4; --ink-150:#DDE1EA; --ink-050:#F4F6FA;
  --ok:#2F8F5B; --warn:#B57E1F; --err:#C24545;
}
* { margin:0; box-sizing:border-box; }
html, body { overflow-x:hidden; }  /* stray horizontal overflow stretches the
  iOS layout viewport, which is why the drawer's right:0 can miss the visible
  screen edge on phones (field bug 2026-08-12) */
body {
  font-family:-apple-system,'Segoe UI',Inter,Helvetica,Arial,sans-serif;
  color:var(--ink-900); background:#fff; line-height:1.6;
}
a { color:var(--blue-700); }
.wrap { max-width:1000px; margin:0 auto; padding:0 1.25rem; }

/* header */
header { border-bottom:1px solid var(--ink-150); background:#fff; }
header .wrap { display:flex; align-items:center; justify-content:space-between; padding:0.9rem 1.25rem; }
header img { height:44px; width:auto; }
header nav { display:flex; align-items:center; gap:1.2rem; flex-wrap:nowrap; }
header nav a { text-decoration:none; font-weight:600; font-size:.92rem; color:var(--indigo-700); white-space:nowrap; }
header nav a.cta { color:#fff; background:var(--blue-500); padding:.5rem 1rem; border-radius:8px; }
header nav a.cta:hover { background:var(--blue-700); }
@media (max-width: 620px) {
  header .wrap { flex-direction:column; align-items:flex-start; gap:.7rem; padding-bottom:.8rem; }
  header nav { width:100%; justify-content:flex-start; gap:1rem; }
  header nav a.cta { margin-left:auto; }
  /* support.html has no CTA — without this the hamburger sat mid-row there
     (field bug, iPhone 14, 2026-08-13) */
  header nav:not(:has(a.cta)) .menu-btn { margin-left:auto; }
}

/* hero */
.hero { background:linear-gradient(180deg, var(--ink-050), #fff); padding:4rem 0 3rem; }
.hero h1 { font-size:clamp(1.6rem,4vw,2.4rem); color:var(--indigo-700); max-width:22ch; line-height:1.2; }
.hero p { max-width:58ch; margin:1rem 0 1.6rem; font-size:1.05rem; color:var(--ink-700); }
.btn { display:inline-block; text-decoration:none; font-weight:600; border-radius:8px; padding:.7rem 1.3rem; }
.btn.primary { background:var(--blue-500); color:#fff; }
.btn.primary:hover { background:var(--blue-700); }
.btn.quiet { color:var(--blue-700); border:1.5px solid var(--blue-500); margin-left:.6rem; }

/* hero grid + crisis notice */
.hero-grid { display:grid; grid-template-columns: 1.4fr 1fr; gap:2.5rem; align-items:start; }
@media (max-width: 780px) { .hero-grid { grid-template-columns: 1fr; } }
.notice { background:#fff; border:1px solid var(--ink-150); border-top:4px solid var(--indigo-700);
  border-radius:12px; padding:1.3rem 1.4rem; }
.notice h2 { color:var(--indigo-700); font-size:1.02rem; margin-bottom:.6rem; }
.notice p { font-size:.92rem; color:var(--ink-700); margin-bottom:.8rem; max-width:none; }
.notice .btn { font-size:.88rem; padding:.55rem 1.05rem; }
.fader { position:relative; min-height:290px; }
.fader .slide { position:absolute; inset:0; opacity:0; transition:opacity 2.8s ease; pointer-events:none; }
.fader .slide.active { opacity:1; pointer-events:auto; }
.fader img { width:100%; height:100%; object-fit:cover; border-radius:8px; }
.dots { display:flex; gap:.45rem; justify-content:center; margin-top:.8rem; }
.dot { width:8px; height:8px; border-radius:50%; border:0; padding:0; background:var(--ink-300); cursor:pointer; }
.dot.active { background:var(--indigo-700); }

/* sections */
section { padding:2.8rem 0; }
section h2 { color:var(--indigo-700); font-size:1.25rem; margin-bottom:1.1rem; letter-spacing:.02em; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.card { border:1px solid var(--ink-150); border-radius:12px; padding:1.15rem 1.25rem; background:#fff; }
.card h3 { font-size:1rem; margin-bottom:.4rem; color:var(--ink-900); }
.card p { font-size:.9rem; color:var(--ink-700); }
.alt { background:var(--ink-050); }

/* footer */
footer { border-top:1px solid var(--ink-150); padding:1.6rem 0 2.2rem; font-size:.82rem; color:var(--ink-500); }
footer .story { margin-top:.4rem; }

/* powered-by-Lyra brand mark (transparent line art, site ink) */
.lyra-mark { display:block; margin:1.4rem auto 0; height:56px; width:auto; }
.chat-panel .lyra-mark { height:30px; margin:.3rem auto .5rem; opacity:.8; }

/* ——— support chat ——— */
.support-wrap { max-width:760px; margin:0 auto; padding:1.5rem 1.25rem 3rem; }
.support-wrap h1 { color:var(--indigo-700); font-size:1.35rem; margin-bottom:.35rem; }
.support-wrap .sub { color:var(--ink-500); font-size:.92rem; margin-bottom:1.2rem; }
.idrow { display:flex; gap:.6rem; margin-bottom:.9rem; flex-wrap:wrap; }
.idrow input { flex:1 1 200px; padding:.55rem .75rem; border:1px solid var(--ink-150); border-radius:8px; font-size:.9rem; }
.chat { border:1px solid var(--ink-150); border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column; height:60vh; min-height:380px; }
.msgs { flex:1; overflow-y:auto; padding:1rem; }
.bub { border-radius:10px; padding:.6rem .85rem; margin:.4rem 0; max-width:85%; font-size:.93rem; white-space:pre-wrap; }
.bub.ai { background:var(--blue-100); }
.bub.me { background:var(--indigo-100); margin-left:auto; }
.bub.sys { background:var(--ink-050); color:var(--ink-500); font-size:.8rem; max-width:100%; text-align:center; }
.inbar { display:flex; border-top:1px solid var(--ink-150); }
.inbar textarea { flex:1; border:0; resize:none; padding:.8rem .95rem; font-size:.93rem; outline:none; font-family:inherit; min-height:3.2rem; max-height:40vh; overflow-y:auto; box-sizing:border-box; }
.inbar button { background:var(--blue-500); color:#fff; border:0; padding:0 1.4rem; font-weight:700; font-size:.95rem; cursor:pointer; }
.inbar button:hover { background:var(--blue-700); }
.chat.closed .inbar { background:var(--ink-050); }
.chat.closed textarea { color:var(--ink-300); background:transparent; }
.chat.closed button { background:var(--ink-300); cursor:default; }
.ticketline { font-size:.78rem; color:var(--ink-500); margin-top:.6rem; padding:0 .8rem .6rem; }

/* primary "leave a ticket" card (support page) */
.ticketcard { border:1px solid var(--ink-150); border-radius:14px; padding:1rem; background:#fff; }
.ticketcard textarea { width:100%; min-height:8rem; box-sizing:border-box; border:1px solid var(--ink-150);
  border-radius:10px; padding:.7rem .85rem; font-family:inherit; font-size:.95rem; resize:vertical; }
.ticket-actions { display:flex; align-items:center; gap:.7rem; margin-top:.7rem; flex-wrap:wrap; }
.ticket-done { color:var(--blue-700); font-size:.85rem; }
/* the talk-it-through button lives IN the page flow, next to the ticket card
   (Mike, 2026-08-15: the floating corner pill drifted too far from "Leave a
   ticket" on desktop — the two paths belong side by side). The PANEL still
   floats on desktop; on phones it goes full-screen as before. */
.talk-row { display:flex; align-items:center; gap:.8rem; margin:1.1rem 0 0;
  color:var(--ink-500); font-size:.9rem; }
.chat-panel { position:fixed; right:1.1rem; bottom:1.1rem; z-index:61;
  width:min(390px, calc(100vw - 2rem)); height:min(560px, calc(100vh - 2rem));
  background:#fff; border:1px solid var(--ink-150); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 14px 44px rgba(23,25,35,.26); }
/* the [hidden] attribute must ALWAYS win — class display rules (.btn,
   .chat-panel, …) otherwise override the UA's display:none (bit us twice:
   the panel, then the newConv button showing on fresh chats) */
[hidden] { display:none !important; }
/* On phones the chat is INLINE — normal in-flow page content (the Ani
   pattern), because fixed overlays lose to the iOS keyboard: it scrolls the
   layout viewport and shoves them under the status bar (field bugs, iPhone 14,
   2026-08-13 — twice: floating box, then full-screen takeover). In-flow
   content is what the OS keyboard machinery is built for. The page's own
   sections hide while the chat is open (body.chat-open). Desktop keeps the
   floating corner panel. */
@media (max-width: 600px) {
  .chat-panel { position:static; display:flex; flex-direction:column; width:100%;
    height:100dvh; max-height:none; border:0; border-radius:0; box-shadow:none; margin:0; }
  /* bubbles hug the input like a real messenger (Ani/iMessage) — otherwise a
     short conversation leaves a dead gap and the keyboard shows only emptiness
     (field report #3, iPhone 14). margin-top:auto on the first bubble is the
     safe bottom-anchor idiom. */
  .chat-panel .msgs { display:flex; flex-direction:column; overflow-y:auto; }
  .chat-panel .msgs > :first-child { margin-top:auto; }
  body.chat-open header { display:none; }   /* the chat IS the screen; × exits */
  body.chat-open .support-wrap { display:none; }
  body.chat-open footer { display:none; }   /* no dead scroll under the full-screen chat */
}
.chat-toast { position:fixed; right:1.1rem; bottom:4.4rem; z-index:62; max-width:min(340px, calc(100vw - 2rem));
  background:var(--ink-900); color:#fff; padding:.7rem .95rem; border-radius:10px; font-size:.88rem;
  line-height:1.4; box-shadow:0 8px 26px rgba(23,25,35,.28); cursor:pointer; }
.chat-toast[hidden] { display:none; }
.chat-contact { display:flex; flex-wrap:wrap; gap:.4rem; padding:.6rem .7rem; border-top:1px solid var(--ink-150); background:var(--ink-050); }
.chat-contact[hidden] { display:none; }
.chat-contact input { flex:1 1 45%; min-width:110px; padding:.5rem .6rem; border:1px solid var(--ink-150); border-radius:8px; font-size:.85rem; font-family:inherit; }
.chat-contact .btn { flex:1 1 100%; text-align:center; padding:.5rem; font-size:.9rem; border:0; cursor:pointer; }
.chat-panel-head { display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .5rem .6rem .95rem; background:var(--blue-500); color:#fff; font-weight:700; font-size:.9rem; }
.chat-panel-close { background:transparent; border:0; color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; padding:0 .4rem; }
.chat-panel.closed .inbar { background:var(--ink-050); }
.chat-panel.closed textarea { color:var(--ink-300); background:transparent; }
.chat-panel.closed .inbar button { background:var(--ink-300); cursor:default; }

/* auth strip + your tickets */
.authrow { margin-bottom:.9rem; font-size:.9rem; color:var(--ink-700); }
.authnote { color:var(--ink-500); font-size:.85rem; }

/* sign-in chooser (signin.js) — the two provider buttons side-by-side on
   every width (Mike, 2026-08-18): 40px, natural width, neutral surface, the
   vendor's logo. On phones the "Sign in with " prefix hides so both fit one row. */
.signin { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:.5rem .6rem; width:100%; margin:.2rem 0 .4rem; }
.signin-btn { display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:40px; padding:.45rem 1rem;
  background:#fff; color:var(--ink-900); border:1px solid var(--ink-300); border-radius:6px;
  font-weight:500; font-size:.9rem; text-decoration:none; line-height:1.2; white-space:nowrap;
  -webkit-tap-highlight-color:transparent; }
.signin-btn:hover, .signin-btn:focus-visible { background:var(--ink-050); border-color:var(--ink-500); outline:none; }
.signin-btn:active { background:var(--ink-150); }
.signin-btn svg { width:18px; height:18px; flex:none; }
.signin-pre { display:none; }
.signin-hint { color:var(--ink-500); font-size:.82rem; line-height:1.4; flex:1 1 100%; }
@media (min-width:560px) { .signin-pre { display:inline; } }
  .signin-btn { width:auto; min-height:40px; padding:.45rem 1rem; }
}
.mytickets { border:1px solid var(--ink-150); border-radius:12px; padding:.8rem .9rem; margin-bottom:1rem; background:var(--ink-050); }
.mt-head { font-size:.78rem; color:var(--ink-500); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.5rem; }
.mt-item { display:block; width:100%; text-align:left; background:#fff; border:1px solid var(--ink-150);
  border-radius:8px; padding:.5rem .7rem; margin:.3rem 0; font-size:.85rem; cursor:pointer; font-family:inherit; color:var(--ink-900); }
.mt-item:hover { border-color:var(--blue-500); }
.mt-snip { display:block; color:var(--ink-500); font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mt-new { color:var(--blue-700); font-weight:600; background:transparent; }

/* no-AI direct ticket */
.noai { margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--ink-150); }
.noai-toggle { cursor:pointer; font-family:inherit; font-size:.9rem; margin-left:0; }
#noaiForm { margin-top:.7rem; }
#noaiForm textarea { width:100%; min-height:7rem; padding:.7rem .85rem; border:1px solid var(--ink-150);
  border-radius:10px; font-size:.93rem; font-family:inherit; resize:vertical; }
.noai-actions { display:flex; align-items:center; gap:.9rem; margin-top:.6rem; }
.noai-done { font-size:.85rem; color:var(--ok); }

/* ——— drawer menu (shared, menu.js) ——— */
.menu-btn { background:none; border:1px solid var(--ink-150); border-radius:8px; font-size:1.15rem;
  line-height:1; padding:.4rem .6rem; cursor:pointer; color:var(--indigo-700); }
.menu-btn:hover { border-color:var(--blue-500); }
.drawer-overlay { position:fixed; inset:0; background:rgba(23,25,35,.45); opacity:0;
  pointer-events:none; transition:opacity .2s ease; z-index:40; }
.drawer-overlay.open { opacity:1; pointer-events:auto; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:280px; max-width:85vw; background:#fff;
  box-shadow:-6px 0 24px rgba(23,25,35,.18); transform:translateX(100%);
  transition:transform .22s ease; z-index:41; padding:3.2rem 1.3rem 1.3rem; overflow-y:auto; }
.drawer.open { transform:translateX(0); }
.drawer-close { position:absolute; top:.7rem; right:.9rem; background:none; border:0;
  font-size:1.6rem; color:var(--ink-500); cursor:pointer; line-height:1; }
.drawer-logo { display:block; margin:-1.6rem 0 1rem; }
.drawer-logo img { height:38px; width:auto; }
.drawer-link { display:block; padding:.55rem 0; color:var(--indigo-700); text-decoration:none;
  font-weight:600; font-size:.95rem; }
.drawer-link:hover { color:var(--blue-700); }
.drawer-group summary { padding:.55rem 0; color:var(--indigo-700); font-weight:600;
  font-size:.95rem; cursor:pointer; list-style-position:outside; }
.drawer-group .drawer-link { padding-left:1rem; font-weight:500; font-size:.9rem; }
.drawer-rule { border:0; border-top:1px solid var(--ink-150); margin:.8rem 0; }
/* ——— profile page ——— */
.profile-wrap { max-width:760px; margin:0 auto; padding:2rem 1.25rem 4rem; }
.profile-card { display:flex; align-items:center; gap:1.2rem; background:#fff;
  border:1px solid var(--ink-150); border-radius:14px; padding:1.4rem 1.6rem; margin-bottom:1.8rem; }
.profile-avatar { width:72px; height:72px; border-radius:50%; object-fit:cover;
  border:2px solid var(--ink-150); flex-shrink:0; }
.profile-avatar-fb { width:72px; height:72px; border-radius:50%; background:var(--indigo-500);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.8rem;
  font-weight:600; flex-shrink:0; }
.profile-info { flex:1; min-width:0; }
.profile-name { font-size:1.3rem; font-weight:700; color:var(--ink-900); }
.profile-email { color:var(--ink-500); font-size:.88rem; margin-top:.1rem; }
.profile-meta { display:flex; gap:.5rem; margin-top:.6rem; flex-wrap:wrap; }
.pbadge { display:inline-block; padding:.15rem .7rem; border-radius:20px; font-size:.72rem;
  font-weight:600; text-transform:uppercase; letter-spacing:.04em; text-decoration:none; }
.pb-provider { background:var(--blue-100); color:var(--blue-900); }
.pb-client { background:#DFF0E5; color:var(--ok); }
.pb-admin { background:var(--indigo-100); color:var(--indigo-700); }
.section-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.7rem; }
.section-head h2 { color:var(--indigo-700); font-size:1.1rem; }
.trow { display:flex; gap:.7rem; align-items:baseline; background:#fff; border:1px solid var(--ink-150);
  border-radius:10px; padding:.65rem .9rem; margin:.4rem 0; text-decoration:none; color:var(--ink-900);
  font-size:.9rem; flex-wrap:wrap; }
.trow:hover { border-color:var(--blue-500); }
.trow-id { font-weight:700; }
.trow-status { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  padding:.1rem .55rem; border-radius:20px; background:var(--ink-050); color:var(--ink-500); }
.trow-status.st-open { background:var(--blue-100); color:var(--blue-900); }
.trow-status.st-assigned, .trow-status.st-in-process { background:#DFF0E5; color:var(--ok); }
.trow-when { color:var(--ink-500); font-size:.8rem; }
.trow-snip { flex-basis:100%; color:var(--ink-500); font-size:.82rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.signout-row { margin-top:2.2rem; display:flex; justify-content:flex-end; }