/* SAVRN shell widgets — tour guide + chat-companion + fix-it drawer.
   Extracted from _shell.html.j2 body (2026-06-10). Non-critical, deferred. */

/* ===== Tour guide ===== */
  /* Backdrop is purely visual now — pointer-events:none lets the user
     actually type into / click the highlighted element. The dimming
     effect is done by the spotlight's box-shadow halo, not this layer. */
  #savrn-tour-backdrop {
    position: fixed; inset: 0;
    background: transparent;
    z-index: 9500; display: none; pointer-events: none;
  }
  #savrn-tour-backdrop.active { display: block; }
  #savrn-tour-spotlight {
    position: fixed; border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(13, 22, 33, 0.55),
                0 0 0 3px var(--accent, #E85D04),
                0 0 28px rgba(232, 93, 4, 0.45);
    pointer-events: none; z-index: 9501;
    transition: top 0.28s var(--ease-in-out), left 0.28s var(--ease-in-out),
                width 0.28s var(--ease-in-out), height 0.28s var(--ease-in-out),
                box-shadow 0.28s var(--ease-in-out);
    display: none;
  }
  #savrn-tour-spotlight.active { display: block; }
  #savrn-tour-tooltip {
    position: fixed; z-index: 9502;
    background: #FFFFFF; border-radius: 10px;
    box-shadow: 0 12px 36px rgba(13, 22, 33, 0.35);
    width: 340px; max-width: calc(100vw - 32px);
    padding: 18px 20px 14px; display: none;
    border: 2px solid var(--accent, #E85D04);
  }
  #savrn-tour-tooltip.active { display: block; }
  #savrn-tour-tooltip .stp-num {
    font-size: 10.5px; font-weight: 800;
    color: var(--accent, #E85D04);
    text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 6px;
  }
  #savrn-tour-tooltip h4 {
    font-family: "Fraunces","Noto Serif",Georgia,serif;
    font-size: 17px; font-weight: 700;
    margin: 0 0 6px; color: var(--ink, #0D1621); line-height: 1.3;
  }
  #savrn-tour-tooltip p {
    font-size: 13px; color: var(--ink-soft, #2A3340);
    line-height: 1.5; margin: 0 0 12px;
  }
  #savrn-tour-tooltip .actions {
    display: flex; gap: 8px; align-items: center;
    border-top: 1px solid #ECEEF1; padding-top: 12px;
  }
  #savrn-tour-tooltip .stp-pos { flex: 1; font-size: 11px; color: var(--muted, #7E8794); }
  #savrn-tour-tooltip button {
    padding: 8px 16px; border-radius: 5px;
    font: inherit; font-size: 12.5px; font-weight: 700;
    cursor: pointer; border: 1px solid transparent;
    background: var(--accent, #E85D04); color: #FFF;
    letter-spacing: 0.02em;
  }
  #savrn-tour-tooltip button.primary-next {
    padding: 9px 20px; font-size: 13px;
    box-shadow: 0 2px 6px rgba(232, 93, 4, 0.35);
  }
  #savrn-tour-tooltip button.secondary {
    background: transparent; color: var(--muted, #7E8794);
    border-color: #ECEEF1;
  }
  #savrn-tour-tooltip button.secondary:hover {
    color: var(--ink, #0D1621); border-color: var(--ink, #0D1621);
  }
  #savrn-tour-tooltip button:hover { opacity: 0.92; }
  #savrn-tour-tooltip .skip-link {
    display: block; margin-top: 8px; text-align: center;
    font-size: 11px; color: var(--muted, #7E8794);
    background: none; border: none; cursor: pointer; text-decoration: underline;
    width: 100%; padding: 0;
  }
  #savrn-tour-tooltip .arr {
    position: absolute; width: 14px; height: 14px;
    background: #FFFFFF; border: 2px solid var(--accent, #E85D04);
    transform: rotate(45deg);
  }
  #savrn-tour-tooltip[data-placement="top"] .arr { bottom: -9px; left: 50%; margin-left: -7px; border-top: none; border-left: none; }
  #savrn-tour-tooltip[data-placement="bottom"] .arr { top: -9px; left: 50%; margin-left: -7px; border-bottom: none; border-right: none; }
  #savrn-tour-tooltip[data-placement="left"] .arr { right: -9px; top: 50%; margin-top: -7px; border-top: none; border-right: none; }
  #savrn-tour-tooltip[data-placement="right"] .arr { left: -9px; top: 50%; margin-top: -7px; border-bottom: none; border-left: none; }
  #savrn-tour-tooltip.done .stp-num { color: var(--good, #16D177); }
  @media (max-width: 720px) { #savrn-tour-tooltip { width: calc(100vw - 32px); } }
  @media print { #savrn-tour-backdrop, #savrn-tour-spotlight, #savrn-tour-tooltip { display: none !important; } }

  /* ─── P313: SAVRN-standard horizontal accordion bar ─── */
  /* Any page can use <details class="panel"> for collapsible sections.
     Each summary is a clean full-width horizontal bar with a 4px orange
     accent stripe on the left. */
  details.panel {
    background: var(--surface, #fff) !important;
    border: 1px solid var(--border, #D9DCE0) !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    display: block !important;
    width: 100% !important;
  }
  /* Suppress every browser variant of the default disclosure marker. */
  details.panel > summary,
  body details.panel > summary { list-style: none !important; }
  details.panel > summary::-webkit-details-marker { display: none !important; }
  details.panel > summary::marker { display: none !important; content: "" !important; }
  details.panel > summary {
    cursor: pointer !important;
    user-select: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    padding: 14px 22px !important;
    background: #ffffff !important;
    border-left: none !important;
    color: var(--ink, #0D1621) !important;
    transition: background 0.15s, border-color 0.15s !important;
    box-sizing: border-box !important;
  }
  details.panel > summary:hover {
    background: #F7F8FA !important;
  }
  details.panel[open] > summary {
    background: #ffffff !important;
    border-bottom: 1px solid var(--border, #D9DCE0) !important;
  }
  details.panel > summary .summary-left {
    display: flex !important;
    align-items: baseline !important;
    gap: 14px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  details.panel > summary .summary-title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 16px !important;
    font-weight: 560 !important;
    letter-spacing: -0.005em !important;
    text-transform: none !important;
    color: var(--ink, #0D1621) !important;
    white-space: nowrap !important;
  }
  details.panel > summary .summary-count {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 10px !important;
    background: rgba(35, 78, 134, 0.10) !important;
    color: #234E86 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 11px !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }
  details.panel > summary .chev {
    color: var(--accent, #E85D04) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    transition: transform 0.2s !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
  }
  details.panel[open] > summary .chev { transform: rotate(180deg) !important; }
  details.panel > .panel-body {
    padding: 20px 24px !important;
    background: var(--surface, #fff) !important;
  }

  /* Sub-section heading inside a combined panel (used in Account Details) */
  .acct-sub { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--border, #D9DCE0); }
  .acct-sub:first-child { margin-top: 0; padding-top: 0; border-top: none; }
  .acct-sub > h4 {
    font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--accent, #E85D04); margin: 0 0 12px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  }

  /* Single-column layout helper for accordion-heavy pages */
  .layout.single-col { display: block; }

  /* ─── P315: Mobile responsive sweep — applies to every page using
     details.panel + admin-page layouts ─── */
  @media (max-width: 720px) {
    details.panel > summary {
      padding: 12px 16px !important;
      gap: 10px !important;
      flex-wrap: wrap !important;
    }
    details.panel > summary .summary-title {
      font-size: 14.5px !important;
      letter-spacing: 0 !important;
      white-space: normal !important;
    }
    details.panel > summary .summary-count {
      font-size: 10.5px !important;
      padding: 2px 8px !important;
    }
    details.panel > .panel-body {
      padding: 14px 16px !important;
    }
    details.panel > summary .summary-left {
      gap: 8px !important;
    }
  }
  @media (max-width: 480px) {
    details.panel > summary {
      padding: 10px 14px !important;
      border-left-width: 3px !important;
    }
    details.panel > summary .summary-left {
      flex: 1 1 100% !important;
      min-width: 0 !important;
    }
    details.panel > summary .chev {
      font-size: 13px !important;
    }
  }

  /* ─── P316: Defensive mobile fix (applies to EVERY page) ─── */
  /* Without these, pages with inline-style grids or wide tables overflow
     the viewport and mobile browsers zoom out, giving the appearance that
     mobile doesn't work. */
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* P316b FIX (2026-06-01): these table rules were applied to EVERY page,
     which broke DESKTOP tables (each tr became its own fixed-layout table,
     so header and body columns no longer aligned and cells overlapped).
     Scope them to mobile only, where the intent (horizontal scroll) belongs. */
  @media (max-width: 720px) {
    .main table,
    .panel-body table,
    details.panel table {
      display: block;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      white-space: nowrap;
    }
  }

  @media (max-width: 720px) {
    /* Force any inline 3-col grid to stack */
    .main div[style*="grid-template-columns:1fr 1fr 1fr"],
    .main div[style*="grid-template-columns: 1fr 1fr 1fr"],
    .main div[style*="grid-template-columns:repeat(3"],
    .main div[style*="grid-template-columns: repeat(3"] {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
    }
    /* Force any inline 2-col grid to stack */
    .main div[style*="grid-template-columns:1fr 1fr"],
    .main div[style*="grid-template-columns: 1fr 1fr"],
    .main div[style*="grid-template-columns:repeat(2"],
    .main div[style*="grid-template-columns: repeat(2"] {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
    }
    /* Relax inline min-width that exceeds the phone */
    .main *[style*="min-width:280px"],
    .main *[style*="min-width: 280px"],
    .main *[style*="min-width:360px"],
    .main *[style*="min-width: 360px"] {
      min-width: 0 !important;
    }
    /* Flex containers should wrap on mobile */
    .main .hero,
    .main .proposal-builder-cta,
    .main .tabs {
      flex-wrap: wrap !important;
    }
    /* Sticky topbar can squeeze on mobile */
    .topbar { padding: 0 12px !important; gap: 8px !important; }

    /* Buttons inside CTAs should grow to fill width if wrapped alone */
    .proposal-builder-cta a {
      flex: 1 1 auto !important;
      text-align: center !important;
      min-width: 0 !important;
    }
  }

  @media (max-width: 480px) {
    /* Topbar brand text shrinks */
    .brand-mark { font-size: 13px !important; }
    /* Help FAB doesn't crowd content */
    .help-fab { bottom: 14px !important; right: 14px !important; width: 46px !important; height: 46px !important; }
  }

  /* P378 — fix-it fab + drawer */
  #fixit-fab {
    position: fixed; right: 18px; bottom: 92px;
    width: 50px; height: 50px; border-radius: 50%;
    background: #4527A0; color: #FFF; border: none; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    display: flex; align-items: center; justify-content: center;
    z-index: 9998; transition: transform 0.15s ease;
  }
  #fixit-fab:hover { transform: scale(1.06); }
  #fixit-drawer {
    position: fixed; right: 0; top: 0; bottom: 0; width: 460px; max-width: 92vw;
    background: #FFF; box-shadow: -10px 0 40px rgba(0,0,0,0.18); z-index: 9999;
    display: flex; flex-direction: column;
    /* slide on transform (GPU), not `right` (layout), with the drawer curve */
    transform: translateX(115%);
    transition: transform 0.25s var(--ease-drawer);
  }
  #fixit-drawer.open { transform: translateX(0); }
  .fixit-head { padding: 14px 18px; border-bottom: 1px solid var(--rule, #E1E3E6); display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #4527A0, #6741D9); color: #FFF; }
  .fixit-title { font-weight: 800; font-size: 14px; }
  .fixit-sub { font-weight: 500; opacity: 0.85; font-size: 11.5px; margin-left: 6px; }
  .fixit-x { background: none; border: none; color: #FFF; font-size: 22px; cursor: pointer; padding: 0 4px; }
  .fixit-messages { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
  .fixit-empty { color: var(--muted, #8A9099); font-size: 12.5px; line-height: 1.55; padding: 18px 6px; }
  .fixit-msg { padding: 10px 14px; border-radius: 8px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
  .fixit-msg-user { background: #4527A0; color: #FFF; align-self: flex-end; max-width: 88%; }
  .fixit-msg-assistant { background: var(--rule-soft, #F0F1F3); color: var(--ink, #111418); align-self: flex-start; max-width: 92%; }
  .fixit-msg-loading { background: transparent; color: var(--muted, #8A9099); font-style: italic; padding: 4px 8px; }
  .fixit-msg-error { background: #FFEBEE; color: #A00; border-left: 3px solid #A00; }
  .fixit-edit-card { background: #FFFAF3; border: 1px solid #F1D070; border-radius: 8px; padding: 12px 14px; font-size: 12.5px; }
  .fec-path { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: #7B5C00; font-weight: 700; margin-bottom: 4px; }
  .fec-rat { color: var(--ink-2, #2A2F36); margin-bottom: 8px; }
  .fec-diff summary { cursor: pointer; font-size: 11.5px; color: var(--accent, #D45A12); font-weight: 700; }
  .fec-old pre, .fec-new pre { white-space: pre-wrap; word-wrap: break-word; max-height: 200px; overflow-y: auto; font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 6px 8px; background: #FFF; border: 1px solid var(--rule, #E1E3E6); border-radius: 4px; margin: 4px 0 8px; }
  .fec-old strong { color: #A00; }
  .fec-new strong { color: #1B5E20; }
  .fec-actions { display: flex; gap: 8px; }
  .fec-approve, .fec-reject { padding: 6px 12px; border-radius: 4px; border: none; cursor: pointer; font-size: 12px; font-weight: 700; }
  .fec-approve { background: #1B5E20; color: #FFF; }
  .fec-reject { background: #FFF; color: var(--muted, #8A9099); border: 1px solid var(--rule, #E1E3E6); }
  .fec-status { margin-top: 6px; font-size: 12px; }
  .fixit-input-row { padding: 10px 18px; border-top: 1px solid var(--rule, #E1E3E6); display: flex; gap: 8px; }
  .fixit-input-row textarea { flex: 1; border: 1px solid var(--rule, #E1E3E6); border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 13px; resize: vertical; }
  .fixit-input-row button { background: #4527A0; color: #FFF; border: none; border-radius: 6px; padding: 0 16px; font-weight: 700; cursor: pointer; }
  .fixit-input-row button:disabled { opacity: 0.5; cursor: wait; }
  .fixit-foot { padding: 8px 18px; border-top: 1px solid var(--rule, #E1E3E6); display: flex; justify-content: space-between; align-items: center; background: #FAFAF8; }
  .fixit-foot button { background: var(--accent, #D45A12); color: #FFF; border: none; border-radius: 4px; padding: 6px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
  .fixit-hint { font-size: 11px; color: var(--muted, #8A9099); }


/* ===== Chat companion / fix-it ===== */
#savrn-cc-btn{position:fixed;right:18px;bottom:20px;width:56px;height:56px;border-radius:50%;background:#1f2937;color:#fff;border:none;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.25);font-size:23px;z-index:99996;display:flex;align-items:center;justify-content:center}
#savrn-cc-btn:hover{background:#111827}
@media (max-width:760px){
  #fixit-fab{display:none !important}
  #savrn-cc-btn{right:14px;bottom:14px}
  /* Full-viewport chat sheet on mobile — clear in/out of chat mode */
  #savrn-cc-panel{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;max-width:100%;height:100vh;max-height:100vh;border-radius:0;border:none;box-shadow:none;z-index:99999;}
  #savrn-cc-head{padding:env(safe-area-inset-top,12px) 16px 14px;font-size:16px;}
  #savrn-cc-head button{font-size:24px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;}
  #savrn-cc-head button:active{background:rgba(255,255,255,0.15);}
  #savrn-cc-form{padding:10px env(safe-area-inset-right,10px) calc(env(safe-area-inset-bottom,10px) + 6px) env(safe-area-inset-left,10px);gap:8px;}
  #savrn-cc-send{padding:0 16px;font-size:14px;}
  #savrn-cc-mic{padding:0 12px;}
  #savrn-cc-input{font-size:16px;}  /* 16px prevents iOS auto-zoom */
  body.cc-open{overflow:hidden;position:fixed;width:100%;}  /* lock page scroll while chat is open */
}
#savrn-cc-panel{position:fixed;right:18px;bottom:88px;width:372px;max-width:calc(100vw - 24px);height:520px;max-height:calc(100vh - 130px);background:#fff;border:1px solid #e5e3dc;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.22);z-index:99997;display:none;flex-direction:column;overflow:hidden;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
#savrn-cc-panel.open{display:flex}
#savrn-cc-head{background:#1f2937;color:#fff;padding:13px 16px;font-weight:600;font-size:14px;display:flex;justify-content:space-between;align-items:center}
#savrn-cc-head button{cursor:pointer;font-size:19px;background:none;border:none;color:#fff;line-height:1} #savrn-cc-voice{font-size:15px} .cc-say{background:none;border:none;cursor:pointer;font-size:12px;opacity:.45;margin-left:6px;padding:0;vertical-align:middle} .cc-say:hover{opacity:.9} .cc-flag{background:none;border:none;cursor:pointer;font-size:11px;opacity:.4;margin-left:6px;padding:0;vertical-align:middle} .cc-flag:hover{opacity:1;color:#dc2626}
#savrn-cc-msgs{flex:1;overflow-y:auto;padding:14px;background:#faf9f6}
.cc-m{margin-bottom:11px;max-width:86%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.45;word-wrap:break-word}
.cc-m.bot{background:#fff;border:1px solid #ece9e1;color:#1f2937}
.cc-m.me{background:#1f2937;color:#fff;margin-left:auto}
.cc-m code{background:#f0eee8;padding:1px 5px;border-radius:4px;font-size:12.5px}
.cc-m.me code{background:rgba(255,255,255,.2)}
#savrn-cc-form{display:flex;gap:8px;padding:10px;border-top:1px solid #ece9e1;background:#fff}
#savrn-cc-input{flex:1;min-width:0;border:1px solid #ddd;border-radius:9px;padding:9px 11px;font:inherit;font-size:16px;resize:none;max-height:80px}
#savrn-cc-send{background:#1f2937;color:#fff;border:none;border-radius:9px;padding:0 15px;cursor:pointer;font-size:13px} #savrn-cc-mic{background:#fff;border:1px solid #ddd;border-radius:9px;padding:0 11px;cursor:pointer;font-size:15px;line-height:1} #savrn-cc-mic.listening{background:#fee2e2;border-color:#ef4444}
.cc-typing{font-size:12px;color:#999;padding:0 14px 8px;display:none}