/*
 * MarketSnap Mobile v2 — the single owner of phone layout for the Calculator.
 *
 * Owner decision 2026-11-05 (docs/MOBILE-V2-RELEASE.md):
 * - Every rule is inside @media (max-width: 767px) AND under body.ms-mobile-v2.
 *   Desktop and tablet layouts are never touched.
 * - Loaded only when ms_mobile_v2_enabled() (admin preview, then go-live option).
 * - Do not add phone rules to other stylesheets; add them here.
 *
 * Layout system (phone):
 *   --msm-gutter   screen edge → outer card       12px
 *   --msm-pad      card edge → card content       12px
 *   Nested wrappers add no extra side space.
 */

@media (max-width: 767px) {

  body.ms-mobile-v2 {
    --msm-gutter: 12px;
    --msm-pad: 12px;
    --msm-header-h: 64px;
    --msm-assistant-h: 64px;
    --msm-tab-w: 36px;
    --msm-tab-h: 48px;
    --msm-gold: #f59e0b;
    --msm-ink: #111827;
  }

  /* ---------- 1. One content width ---------- */

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator main.app-content {
    margin-left: var(--msm-gutter) !important;
    margin-right: var(--msm-gutter) !important;
    /* room so the Valuation Assistant bar never covers the last card */
    padding-bottom: calc(var(--msm-assistant-h) + 24px) !important;
  }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .financial-overview-container,
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .intrinsic-calculator-container,
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .financial-table-container,
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator div:has(> #section-valuationSetup) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .financial-overview-container {
    padding-top: 0 !important;
  }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .mobile-experience-banner {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Card interiors: one padding value */
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator #section-valuationSetup,
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .collapsible-content,
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator #section-longTermValuation .p-4 {
    padding-left: var(--msm-pad) !important;
    padding-right: var(--msm-pad) !important;
  }

  /* Wrappers inside a card that only add more indentation */
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator #section-longTermValuation .bg-gradient-to-br.from-neutral-dark.to-neutral-darker:has(#section-keyMetrics),
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator #section-longTermValuation .bg-gradient-to-br.from-neutral-dark.to-neutral-darker:has(#section-intrinsicResults) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .collapsible-header {
    padding-left: var(--msm-pad) !important;
    padding-right: var(--msm-pad) !important;
  }

  /* ---------- 2. Financial tables (all nine share one component) ----------
   * The pinned label column was ~270px of a ~330px window, so no year column
   * could ever be fully visible. Cap it, let labels wrap, and give the years
   * the rest of the width. Years stay side by side (owner decision). */

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .data-table.metric-table {
    padding-left: var(--msm-pad) !important;
    padding-right: var(--msm-pad) !important;
  }

  /* the bundle forces min-width:800px on phones, stretching every year column */
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .metric-table table {
    min-width: 100% !important;
    width: max-content !important;
  }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .metric-table table th.sticky,
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .metric-table table td.sticky {
    width: 34vw !important;
    min-width: 6.5rem !important;
    max-width: 34vw !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    padding-left: 0 !important;
    padding-right: 8px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    /* edge shadow so it is clear the years scroll underneath */
    box-shadow: 6px 0 6px -6px rgba(0, 0, 0, 0.75);
  }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .metric-table table th:not(.sticky),
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .metric-table table td:not(.sticky) {
    padding-left: 10px !important;
    padding-right: 10px !important;
    white-space: nowrap;
    font-size: 13px !important;
  }

  /* last year column ends clear of the card edge */
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .metric-table table th:last-child:not(.sticky),
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .metric-table table td:last-child:not(.sticky) {
    padding-right: 4px !important;
  }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .metric-table .overflow-x-auto {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: none;
  }

  /* ---------- 3. Valuation Guide = full-width sheet ----------
   * Desktop keeps the side drawer. On phones the guide covers the screen below
   * the site header, with a header that never scrolls away and a 44px close. */

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .valuation-guide-panel {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    top: var(--msm-header-h) !important;
    height: calc(100dvh - var(--msm-header-h)) !important;
    margin: 0 !important;
    bottom: auto !important;
    z-index: 1200 !important; /* above the Valuation Assistant bar (1000) */
    border-left: 0 !important;
    border-top: 1px solid rgba(192, 192, 192, 0.22) !important;
    overscroll-behavior: contain;
  }

  /* --msm-header-h is measured by ms-mobile-v2.js, so the Android app status bar is already included */

  /* page underneath does not scroll while the sheet is open */
  body.ms-mobile-v2.msm-guide-sheet:has(.valuation-guide-panel) {
    overflow: hidden !important;
  }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .valuation-guide-panel .guide-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px var(--msm-pad) !important;
  }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .valuation-guide-panel .header-content {
    flex-wrap: nowrap !important;
    gap: 8px;
  }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .valuation-guide-panel .guide-title {
    font-size: 18px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .valuation-guide-panel .header-controls {
    flex-shrink: 0;
    gap: 4px;
  }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .valuation-guide-panel .header-controls button {
    min-height: 44px;
    padding: 0 10px !important;
    font-size: 14px !important;
  }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .valuation-guide-panel .header-controls button[aria-label="Close guide"] {
    min-width: 44px;
    font-size: 20px !important;
    border: 1px solid rgba(192, 192, 192, 0.35);
    border-radius: 10px;
    margin-left: 4px !important;
  }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .valuation-guide-panel .metrics-list {
    padding: var(--msm-pad) !important;
    padding-bottom: 96px !important; /* room for the choice bar */
  }

  /* ---------- 4. Edge tabs: Guide (right) and This stock (left) ----------
   * Two mirror-image tabs, identical size, colour and icon style, always
   * visible (no hidden swipe), seated at the two ends of the Assistant bar. */

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .guide-button-container,
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .details-button-container {
    top: auto !important;
    /* seated on the Valuation Assistant bar, so they never cover page content */
    bottom: calc((var(--msm-assistant-h) - var(--msm-tab-h)) / 2) !important;
    transform: none !important;
    transition: none !important;
    z-index: 1001 !important; /* just above the Assistant bar (1000) */
  }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .guide-button-container { right: 0 !important; left: auto !important; }
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .details-button-container { left: 0 !important; right: auto !important; }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .guide-button,
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .details-button {
    min-width: 0 !important;
    width: var(--msm-tab-w) !important;
    height: var(--msm-tab-h) !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: var(--msm-gold) !important;
    color: var(--msm-ink) !important;
    font-size: 0 !important;
  }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .guide-button {
    border-radius: 10px 0 0 10px !important;
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.45) !important;
  }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .details-button {
    border-radius: 0 10px 10px 0 !important;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.45) !important;
  }

  /* hide the emoji and text; draw one consistent icon instead */
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .guide-button > span,
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .details-button > span {
    display: none !important;
  }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .guide-button::before,
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .details-button::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--msm-ink);
    -webkit-mask: var(--msm-icon) center / contain no-repeat;
    mask: var(--msm-icon) center / contain no-repeat;
  }

  /* book (Guide) */
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .guide-button {
    --msm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5V5a2 2 0 0 1 2-2h14v16H6a2 2 0 0 0-2 2.5'/%3E%3Cpath d='M20 19v3H6a2 2 0 0 1-2-2'/%3E%3C/svg%3E");
  }

  /* bar chart (This stock) */
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .details-button {
    --msm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 20V11'/%3E%3Cpath d='M12 20V4'/%3E%3Cpath d='M19 20v-6'/%3E%3C/svg%3E");
  }

  /* open state (set by ms-mobile-v2.js): close icon */
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .details-button.msm-open {
    --msm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  }

  /* the swipe-reveal overlays are not used any more */
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator .fixed.inset-0.z-\[49\] {
    display: none !important;
  }

  /* ---------- 5. "This stock" bottom sheet ----------
   * Kept as the resizable bottom sheet (calculator stays usable behind it).
   * While open: above the Assistant bar, edge tabs step aside, and its own
   * close control is a clear 44px button. */

  body.ms-mobile-v2 > div[role="dialog"][aria-label$="on MARKETSnap"] {
    z-index: 1150 !important;
    max-height: calc(100dvh - var(--msm-header-h)) !important;
  }

  body.ms-mobile-v2:has(> div[role="dialog"][aria-label$="on MARKETSnap"][aria-hidden="false"]) #marketsnap-intrinsic-calculator .guide-button-container,
  body.ms-mobile-v2:has(> div[role="dialog"][aria-label$="on MARKETSnap"][aria-hidden="false"]) #marketsnap-intrinsic-calculator .details-button-container,
  body.ms-mobile-v2:has(> div[role="dialog"][aria-label$="on MARKETSnap"][aria-hidden="false"]) #msm-guide-step-tab {
    display: none !important;
  }

  body.ms-mobile-v2 > div[role="dialog"][aria-label$="on MARKETSnap"] button[aria-label="Minimize panel"] {
    opacity: 1 !important;
    color: #e5e7eb !important;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    border: 1px solid rgba(192, 192, 192, 0.35) !important;
    border-radius: 10px !important;
  }

  /* Assistant bar makes room for the two tabs at its ends (Calculator only) */
  body.ms-mobile-v2.intrinsic-calculator-page #marketsnap-assistant.collapsed .assistant-header {
    padding-left: calc(var(--msm-tab-w) + 14px) !important;
    padding-right: calc(var(--msm-tab-w) + 14px) !important;
  }

  /* Assistant chat open: tabs step aside */
  body.ms-mobile-v2:has(#marketsnap-assistant:not(.collapsed)) #marketsnap-intrinsic-calculator .guide-button-container,
  body.ms-mobile-v2:has(#marketsnap-assistant:not(.collapsed)) #marketsnap-intrinsic-calculator .details-button-container,
  body.ms-mobile-v2:has(#marketsnap-assistant:not(.collapsed)) #msm-guide-step-tab {
    display: none !important;
  }

  /* ---------- 6. Results area: fewer nested boxes ----------
   * Results and Key Metrics sit inside the long-term valuation card; on phones
   * they drop their own frame so the value cards get the full width. */

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator #section-intrinsicResults,
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator #section-keyMetrics {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Bear / Base / Bull table: three value columns fit without clipping */
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator table.min-w-\[320px\] {
    min-width: 0 !important;
    font-size: 13px !important;
  }

  body.ms-mobile-v2 #marketsnap-intrinsic-calculator table.min-w-\[320px\] th,
  body.ms-mobile-v2 #marketsnap-intrinsic-calculator table.min-w-\[320px\] td {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* ---------- 7. Guide: shown once, then step by step or off (ms-mobile-v2.js) ---------- */

  /* Choice bar under the full sheet */
  body.ms-mobile-v2 #msm-guide-choice {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1250;
    gap: 8px;
    padding: 12px var(--msm-pad) calc(12px + env(safe-area-inset-bottom));
    background: #1a1f24;
    border-top: 1px solid rgba(192, 192, 192, 0.22);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.45);
  }

  body.ms-mobile-v2 #msm-guide-choice button {
    flex: 1 1 0;
    min-height: 48px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    padding: 0 10px;
  }

  body.ms-mobile-v2 #msm-guide-choice .msm-choice-off {
    background: transparent;
    color: #e5e7eb;
    border: 1px solid rgba(192, 192, 192, 0.45);
  }

  body.ms-mobile-v2 #msm-guide-choice .msm-choice-steps {
    background: var(--msm-gold);
    color: var(--msm-ink);
    border: 0;
  }

  /* Step view: the list is hidden but keeps running the guide */
  body.ms-mobile-v2.msm-guide-steps #marketsnap-intrinsic-calculator .valuation-guide-panel {
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(110%) !important;
  }

  /* The current step: one full-width card at the bottom of the screen */
  body.ms-mobile-v2.msm-guide-steps .fixed.z-\[55\].border-gold-primary {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: none !important;
    z-index: 1100 !important; /* above the Assistant bar and tabs */
    border-radius: 16px 16px 0 0 !important;
    border-width: 1px 0 0 0 !important;
    padding: 16px var(--msm-pad) calc(12px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.55) !important;
    max-height: 45dvh;
    overflow-y: auto;
  }

  /* no pointer arrow on the bottom card */
  body.ms-mobile-v2.msm-guide-steps .fixed.z-\[55\].border-gold-primary > .absolute.rotate-45 {
    display: none !important;
  }

  body.ms-mobile-v2.msm-guide-steps .fixed.z-\[55\].border-gold-primary button {
    min-height: 44px;
  }

  body.ms-mobile-v2.msm-guide-steps .fixed.z-\[55\].border-gold-primary > .flex:last-of-type > button {
    flex: 1 1 0;
    justify-content: center;
  }

  body.ms-mobile-v2 .msm-stop-guiding {
    display: block;
    width: 100%;
    margin-top: 6px;
    min-height: 36px !important;
    background: none;
    border: 0;
    color: #9aa4b2;
    font-size: 13px;
    text-decoration: underline;
  }

  /* While the sheet is up, the floating step card is not needed */
  body.ms-mobile-v2.msm-guide-sheet .fixed.z-\[55\].border-gold-primary {
    display: none !important;
  }

  /* Guide tab while stepping (paused): same look as the React Guide tab */
  body.ms-mobile-v2 #msm-guide-step-tab {
    display: none;
    position: fixed;
    right: 0;
    bottom: calc((var(--msm-assistant-h) - var(--msm-tab-h)) / 2);
    z-index: 1001;
    width: var(--msm-tab-w);
    height: var(--msm-tab-h);
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 10px 0 0 10px;
    background-color: var(--msm-gold);
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.45);
    --msm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5V5a2 2 0 0 1 2-2h14v16H6a2 2 0 0 0-2 2.5'/%3E%3Cpath d='M20 19v3H6a2 2 0 0 1-2-2'/%3E%3C/svg%3E");
  }

  body.ms-mobile-v2 #msm-guide-step-tab::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--msm-ink);
    -webkit-mask: var(--msm-icon) center / contain no-repeat;
    mask: var(--msm-icon) center / contain no-repeat;
  }
}