/* =================================================================
   diy_mobile.css v3 — STRUCTURED mobile layout for the engine.
   Engine baseline:
     .screen.active        → flex column, takes full viewport
     .panel-layout         → CSS grid 200px / 1fr / 240px
     .panel                → flex column, own overflow scroll
   On phone these nest in ugly ways (each panel becomes its own
   scroll container, columns overlap). We undo all of it and stack
   the panels as ordinary blocks, with the document as the only
   scroll container. Activates ≤ 900px.
   ================================================================= */

@media (max-width: 900px) {

  html, body { overflow-x: hidden; }
  body { background: #F8F4EB !important; }

  /* --- Screen container becomes a normal block, not flex column.
        This is what fixes the "panels on top of each other": the
        engine's flex:1 + min-height makes each panel row screen-tall. */
  .screen.active {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* --- Drop the grid. Stack panels vertically as plain blocks.
        Order: panel-left (actions/summary) → panel-center (main) →
        panel-right (trust/notes). Each is auto-height; document
        scrolls, not the panel. */
  .panel-layout {
    display: block !important;
    grid-template-columns: none !important;
    min-height: 0 !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .panel-left, .panel-center, .panel-right { display: block !important; }
  .panel {
    display: block !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(200,169,81,0.55) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    background: #FBF8F2 !important;
    border-radius: 0 !important;
  }
  .panel:last-child { border-bottom: 0 !important; }
  .panel-header {
    position: sticky !important; top: 0 !important; z-index: 4 !important;
    padding: 10px 14px !important;
    background: #1B3A6B !important;
    color: #FBF8F2 !important;
    border-bottom: 1px solid rgba(200,169,81,0.55) !important;
  }
  .panel-header-title {
    color: #FBF8F2 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  .panel-body {
    padding: 12px 14px !important;
    overflow: visible !important;
    max-height: none !important;
  }
  .panel-footer {
    position: sticky !important; bottom: 0 !important; z-index: 3 !important;
    padding: 10px 14px !important;
    background: rgba(248,244,235,0.96) !important;
    border-top: 1px solid rgba(200,169,81,0.55) !important;
  }

  /* --- Engine header (.header) stays as engine defines it (position:fixed top:0).
        We do NOT override its positioning; touching it shifted the DIY cloak. */

  /* --- Buttons: full-width, 44px tap target */
  button, .btn, .btn-primary, .btn-secondary, .btn-action, .nav-btn {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
    min-height: 44px !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }
  /* nav-strip (engine bottom bar inside center panel) stacks */
  .nav-strip, .action-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
    padding: 12px !important;
  }

  /* --- Forms: 16px font (no iOS zoom-on-focus), full width */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea {
    width: 100% !important;
    font-size: 16px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    margin-bottom: 8px !important;
  }
  label { font-size: 12px !important; display: block !important; margin-bottom: 4px !important; }
  /* Multi-column form rows → single column */
  .pv2-form-row, .field-row, .form-row,
  [class*="form-grid"], [class*="form-row"] {
    display: block !important;
  }

  /* --- Panel-left action tiles: full-width pill on mobile */
  .s1-action-tile, .s1-skip-tile, .s2-action-tile {
    display: block !important;
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 13.5px !important;
    text-align: left !important;
    margin-bottom: 8px !important;
    min-height: 44px !important;
    background: rgba(200,169,81,0.18) !important;
    color: #1B3A6B !important;
    border: 1px solid rgba(200,169,81,0.55) !important;
    border-radius: 8px !important;
    line-height: 1.4 !important;
  }
  .s1-skip-tile {
    background: transparent !important;
    border-style: dashed !important;
    color: rgba(27,58,107,0.6) !important;
    font-style: italic !important;
  }
  /* Light-on-dark panel-left labels need to stay readable on cream bg */
  .s1-section-label, .s1-summary-label,
  .s2-section-label, .s2-summary-label,
  .s5-section-label {
    color: #1B3A6B !important; opacity: 1 !important;
    font-weight: 600 !important;
  }
  .s1-summary-card, .s2-summary-card {
    background: rgba(27,58,107,0.06) !important;
    color: #1B3A6B !important;
  }
  .s1-summary-name, .s2-summary-name { color: #1B3A6B !important; }
  .s1-summary-meta, .s2-summary-meta { color: rgba(27,58,107,0.65) !important; }

  /* --- Holdings table: horizontal scroll wrapper */
  .s1-holdings-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    font-size: 12px !important;
  }
  .s1-ht-row {
    display: grid !important;
    grid-template-columns: 0.4fr 1.6fr 0.8fr 0.7fr 0.8fr 0.9fr 0.8fr 0.8fr !important;
    gap: 6px !important;
    min-width: 640px !important;
    padding: 7px !important;
    font-size: 12px !important;
  }
  .s1-summary-header {
    flex-wrap: wrap !important;
    gap: 4px 12px !important;
    font-size: 11px !important;
    padding: 10px !important;
  }
  .s1-summary-header .s1-sh-total {
    margin-left: 0 !important; width: 100% !important;
    padding-top: 6px !important;
    border-top: 1px dashed rgba(200,169,81,0.55) !important;
  }

  /* --- Stop 5 risk Q1-Q9: each question full-width card */
  #screenS5 .question-card, #riskQuestionsContainer > div,
  [id^="riskQ"], .risk-q {
    width: 100% !important;
    margin-bottom: 12px !important;
    padding: 14px !important;
    background: #FBF8F2 !important;
    border: 1px solid rgba(200,169,81,0.55) !important;
    border-radius: 12px !important;
  }
  .risk-q-text, [class*="question-text"] { font-size: 15px !important; line-height: 1.35 !important; }
  .risk-options, [class*="option-list"], [class*="answer-options"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .risk-option, [class*="option-btn"], [class*="answer-option"] {
    width: 100% !important;
    text-align: left !important;
    padding: 12px 14px !important;
    font-size: 13.5px !important;
  }

  /* --- Modals: full-screen on phone */
  .modal-overlay {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  .modal-box, .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .modal-header { padding: 14px 16px !important; flex-shrink: 0 !important; }
  .modal-title { font-size: 17px !important; }
  .modal-close { width: 36px !important; height: 36px !important; font-size: 22px !important; }
  .modal-body, .modal-content > div {
    padding: 14px !important;
  }

  /* --- PV2 (archetype reveal) — stack cards */
  #screenPortfolioV2 .pv2-grid,
  .pv2-cards-row, .pv2-archetypes,
  [class*="archetype-grid"], [class*="archetype-row"] {
    display: block !important;
  }
  .pv2-card, .archetype-card,
  [class*="archetype-card"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    padding: 14px !important;
  }

  /* --- Allocation ring / donut: capped size */
  svg[class*="ring"], svg[class*="donut"], .alloc-ring, .donut {
    max-width: 220px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* --- Sliders full-width */
  .slider, input[type="range"] { width: 100% !important; }
  .slider-row, [class*="slider-row"] {
    flex-direction: column !important; align-items: stretch !important; gap: 6px !important;
  }

  /* --- Right-rail trust panel (Stop 4 PV2 + others) becomes a card below */
  .panel-right, .trust-panel, .pv2cf-trust,
  [class*="trust-rail"], [class*="trust-panel"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 12px !important;
  }

  /* --- Headings: shrink */
  h1 { font-size: 22px !important; line-height: 1.18 !important; }
  h2 { font-size: 19px !important; line-height: 1.2 !important; }
  h3 { font-size: 16px !important; }
  h4, h5 { font-size: 14px !important; }

  /* --- Hide pure-desktop chrome (right-rail mini-nav etc.) */
  .desktop-only, .rm-only { display: none !important; }

  /* --- Tab strips → scrollable chips */
  .tabs, .tab-row, [class*="tab-row"] {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding: 6px 12px !important;
  }
  .tabs::-webkit-scrollbar, .tab-row::-webkit-scrollbar { display: none !important; }
  .tab, [class*="tab-btn"] { flex: 0 0 auto !important; }

  /* --- Tables generic: horizontal scroll */
  table {
    display: block !important;
    overflow-x: auto !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 12px !important;
  }
  th, td { white-space: nowrap !important; padding: 8px 10px !important; }
}

@media (max-width: 380px) {
  body { font-size: 13.5px; }
  h1 { font-size: 20px !important; }
  h2 { font-size: 18px !important; }
  .panel-body { padding: 10px 12px !important; }
}
/* =================================================================
   diy_mobile_chrome.css — top bar + drawer styling for the engine.
   Appended to diy_mobile.css. Mobile only (≤ 768px).
   ================================================================= */

@media (max-width: 768px) {
  /* Make room for the sticky top chrome (54px) — only when chrome is
     installed (body.mc-on, set by diy_mobile_chrome.js after engine ready). */
  body.mc-on { padding-top: 94px !important; }

  /* Engine's <header class="header"> stays visible — we don't replace it,
     we add the chrome below the engine's 40px bar. */

  /* ---- Top bar ---- sits just below the engine's 40px header */
  #mcTopbar {
    position: fixed; top: 40px; left: 0; right: 0; height: 54px; z-index: 100;
    background: #F8F4EB;
    border-bottom: 1px solid rgba(200,169,81,0.55);
    display: flex; align-items: center; gap: 8px; padding: 0 10px;
    box-shadow: 0 1px 0 rgba(27,58,107,0.04);
  }
  #mcTopbar button {
    width: 36px !important; height: 36px !important; padding: 0 !important;
    border-radius: 50% !important;
    background: #FBF8F2 !important;
    border: 1px solid rgba(200,169,81,0.55) !important;
    color: rgba(27,58,107,0.72) !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 20px !important; font-weight: 500 !important;
    min-height: 0 !important; margin: 0 !important;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    flex-shrink: 0;
  }
  #mcTopbar #mcMenu { font-size: 18px !important; }

  #mcTitleWrap { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  #mcStep {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 14px; font-weight: 600; color: #1B3A6B;
    line-height: 1.1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #mcDots { display: flex; gap: 4px; }
  .mc-dot {
    flex: 1; height: 4px; border-radius: 2px; background: rgba(27,58,107,0.12);
    transition: background 0.2s ease;
  }
  .mc-dot.done   { background: rgba(200,169,81,0.55); }
  .mc-dot.active { background: #C8A951; }

  /* ---- Drawer ---- */
  #mcDrawer {
    position: fixed; inset: 0; z-index: 110; display: none;
  }
  #mcDrawer.open { display: block; }
  #mcDrawerBack {
    position: absolute; inset: 0;
    background: rgba(27,58,107,0.55);
    animation: mcFadeIn 0.2s ease;
  }
  @keyframes mcFadeIn { from { opacity: 0; } to { opacity: 1; } }
  #mcDrawerPanel {
    position: absolute; top: 0; bottom: 0; right: 0;
    width: 84%; max-width: 320px;
    background: #FBF8F2;
    border-left: 1px solid rgba(200,169,81,0.55);
    box-shadow: -8px 0 30px -8px rgba(27,58,107,0.25);
    display: flex; flex-direction: column;
    animation: mcSlideIn 0.28s cubic-bezier(0.32,0.72,0.32,1);
  }
  @keyframes mcSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
  #mcDrawerHead {
    padding: 22px 22px 16px;
    background: linear-gradient(180deg, #FBF8F2 0%, #F8F4EB 100%);
    border-bottom: 1px solid rgba(200,169,81,0.55);
  }
  #mcDrawerTitle {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px; font-weight: 500; color: #1B3A6B;
  }
  #mcDrawerSub {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 12px; color: rgba(27,58,107,0.55);
    font-style: italic; margin-top: 4px;
  }
  #mcDrawerList {
    list-style: none; margin: 0; padding: 8px 0; flex: 1; overflow-y: auto;
  }
  #mcDrawerList li {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 20px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
  }
  #mcDrawerList li:hover { background: rgba(200,169,81,0.06); }
  #mcDrawerList li.active {
    background: rgba(200,169,81,0.10);
    border-left-color: #C8A951;
  }
  #mcDrawerList .mc-step-n {
    width: 28px; height: 28px; flex-shrink: 0;
    background: #FBF8F2;
    border: 1px solid rgba(200,169,81,0.55);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 14px; font-weight: 500;
    color: rgba(27,58,107,0.55);
  }
  #mcDrawerList li.active .mc-step-n {
    background: #C8A951;
    border-color: #C8A951;
    color: #FBF8F2;
  }
  #mcDrawerList .mc-step-l {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 14.5px;
    color: rgba(27,58,107,0.72);
    line-height: 1.3;
  }
  #mcDrawerList li.active .mc-step-l {
    color: #1B3A6B; font-weight: 500;
  }
  #mcDrawerFoot {
    padding: 16px 22px;
    border-top: 1px solid rgba(200,169,81,0.55);
    text-align: center;
  }
  #mcSignOut {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 13px; color: #C8A951;
    text-decoration: underline; text-underline-offset: 3px;
    cursor: pointer;
  }
}

@media (max-width: 380px) {
  #mcTitleWrap #mcStep { font-size: 13px; }
}