/* Inner Circle — mobile fixes layered over the original compiled stylesheet (assets/index-*.css).
   The original app is unchanged; delete the <link> to this file in index.html to go back to the exact original.
   Everything here is scoped to phone widths. */

@media (max-width: 767px) {
  /* 1. Never let a wide child (tooltips, decorative blobs, tables) make the whole page slide sideways.
        `clip` (not `hidden`) so sticky headers keep working. */
  html, body { overflow-x: clip; }

  /* 2. Bottom tab bar: share the width evenly instead of overflowing; respect the iPhone home indicator. */
  nav.fixed.bottom-0 { max-width: 100vw; overflow: hidden; padding-bottom: env(safe-area-inset-bottom); height: auto; min-height: 4rem; }
  nav.fixed.bottom-0 > a, nav.fixed.bottom-0 > button { flex: 1 1 0; min-width: 0; padding: 6px 0; }
  nav.fixed.bottom-0 > a span, nav.fixed.bottom-0 > button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* 3. Admin pages (their layout is the main with md:pl-[220px]): tighter padding, sensible title size,
        header actions wrap under the title instead of running off-screen. */
  .md\:pl-\[220px\] > .px-6 { padding-left: 16px; padding-right: 16px; padding-top: 16px; }
  .md\:pl-\[220px\] h1 { font-size: 1.6rem; line-height: 1.2; }
  .md\:pl-\[220px\] .page-subtitle { font-size: .875rem; }
  .md\:pl-\[220px\] .space-y-6 > .flex.items-center.justify-between,
  .md\:pl-\[220px\] .space-y-5 > .flex.items-center.justify-between,
  .md\:pl-\[220px\] .space-y-6 > .flex.items-start.justify-between { flex-wrap: wrap; row-gap: 12px; column-gap: 12px; }
  .md\:pl-\[220px\] .space-y-6 > .flex.items-center.justify-between > .flex.gap-2 { flex-wrap: wrap; }
  .md\:pl-\[220px\] .rounded-xl.border .p-6 { padding: 14px 16px; }

  /* 4. Tables scroll inside their card (swipe), never the page. */
  div:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  /* keep admin tables on one line per row (they swipe); member comparison tables keep wrapping so every column stays visible */
  .md\:pl-\[220px\] table th, .md\:pl-\[220px\] table td { white-space: nowrap; }
  /* Margin Calculator "Market Sensitivity": the 3 tiles sat beside the summary and got squeezed off-screen — give them their own row */
  .flex.items-start.gap-5.flex-wrap > .flex-1.grid.grid-cols-3 { flex-basis: 100%; gap: 8px; }
  .flex.items-start.gap-5.flex-wrap > .flex-1.grid.grid-cols-3 > * { padding-left: 6px; padding-right: 6px; min-width: 0; }

  /* 5. iOS Safari zooms the page when a focused field's text is under 16px. */
  input, select, textarea { font-size: max(16px, 1em) !important; }

  /* 6. Dialogs: use the full width; the watchlist editor's live-preview column is hidden so the form gets the room. */
  [role="dialog"] { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; }
  [role="dialog"] .w-72.shrink-0.border-l { display: none; }
  [role="dialog"] .grid-cols-2:not(.keep-cols), [role="dialog"] .grid-cols-3 { grid-template-columns: 1fr; }
  [role="dialog"] .col-span-2 { grid-column: auto; }                       /* full-width fields would re-create a 2nd column */

  /* 7. Member portal: slightly tighter cards so more fits on screen without changing the look. */
  .md\:pl-\[256px\] .rounded-2xl > .p-6 { padding: 18px; }

  /* Homepage. The Spline scene sizes its headline by the frame's height, so a full-height frame on a tall phone cuts
     "The Inner Circle" off at both sides. Give the scene a landscape strip at the top (it fits from ~1.25:1), fade it
     into black, and put the sign-in block below with phone margins. Black, not the original navy, so there's no seam. */
  /* --ic-h: tallest strip that still fits the scene's subtitle; --ic-top: centre it in the space above the ~400px sign-in block */
  #root > div:has(> iframe[src*="spline.design"]) { background: #000 !important; --ic-h: min(82vw, 46svh); --ic-top: max(0px, calc((100svh - 400px - var(--ic-h)) / 2)); }
  #root > div > iframe[src*="spline.design"] { top: var(--ic-top) !important; height: var(--ic-h) !important; bottom: auto !important; }
  #root > div:has(> iframe[src*="spline.design"])::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--ic-top) + var(--ic-h) - 48px); height: 48px; background: linear-gradient(transparent, #000); pointer-events: none; }
  #root > div > iframe[src*="spline.design"] + div { padding: 0 24px calc(28px + env(safe-area-inset-bottom)) !important; justify-content: flex-start !important; overflow-y: auto; pointer-events: auto !important; z-index: 1; }
  #root > div > iframe[src*="spline.design"] + div > div { margin-top: auto; padding-top: calc(var(--ic-top) + var(--ic-h) + 8px); max-width: none !important; }   /* auto margin, not flex-end: a short screen scrolls instead of clipping the top */
  #root > div > iframe[src*="spline.design"] + div h1 { font-size: clamp(34px, 10vw, 44px) !important; }

  /* Admin Weekly Watchlist: the Weekly / Growth / Dividend tab strip is ~16px wider than a phone; scroll it on its own */
  .md\:pl-\[220px\] div.w-fit.rounded-xl.bg-slate-100:has(> button) { max-width: 100%; overflow-x: auto; }
}

/* Every clickable thing shows the hand cursor (Tailwind v4's reset gives buttons the plain arrow); disabled ones say so. */
:is(button, [role="button"], [role="tab"], [role="menuitem"], [role="menuitemradio"], [role="option"], [role="switch"], [role="checkbox"],
    [role="radio"], [role="combobox"], a[href], summary, select, label[for],
    input:is([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [type="color"])) { cursor: pointer; }
:is(button, [role="button"], [role="tab"], [role="option"], [role="switch"], select, input):is(:disabled, [aria-disabled="true"], [data-disabled]) { cursor: not-allowed; }

/* The original stylesheet has `button[class]{border-radius:9999px}`, which beats every button's own rounded-* class and
   turns cards and tabs that happen to be <button>s into pills (e.g. Briefing Builder's content library). Restore them. */
button.rounded-2xl{border-radius:var(--radius-2xl)}
button.rounded-3xl{border-radius:var(--radius-3xl)}
button.rounded-\[10px\]{border-radius:10px}
button.rounded-\[22px\]{border-radius:22px}
button.rounded-\[24px\]{border-radius:24px}
button.rounded-\[28px\]{border-radius:28px}
button.rounded-\[32px\]{border-radius:32px}
button.rounded-\[7px\]{border-radius:7px}
button.rounded-\[8px\]{border-radius:8px}
button.rounded-lg{border-radius:var(--radius)}
button.rounded-md{border-radius:calc(var(--radius) - 2px)}
button.rounded-sm{border-radius:calc(var(--radius) - 4px)}
button.rounded-xl{border-radius:calc(var(--radius) + 4px)}
button.rounded{border-radius:.25rem}
/* underline-style tabs (bottom border, no corner class) also caught the pill rule — their underline curved */
button[class*="border-b"]:not([class*="rounded"]) { border-radius: 0; }

/* Dialog headers with their own buttons (e.g. Add Weekly Pick's "Auto Fill") ran under the dialog's × close button. */
[role="dialog"] > .flex.items-center.justify-between.border-b { padding-right: 52px; }
/* User Management: the table card clipped the "Change Role" menu of the bottom rows. Let the menu escape the card;
   the header row keeps the card's rounded top corners. */
.md\:pl-\[220px\] div.rounded-2xl.border.overflow-hidden:has(> table) { overflow: visible; }
.md\:pl-\[220px\] div.rounded-2xl.border.overflow-hidden:has(> table) > table thead tr:first-child > :first-child { border-top-left-radius: 1rem; }
.md\:pl-\[220px\] div.rounded-2xl.border.overflow-hidden:has(> table) > table thead tr:first-child > :last-child { border-top-right-radius: 1rem; }
.md\:pl-\[220px\] div.rounded-2xl.border.overflow-hidden:has(> table) > table thead tr { background: transparent; }
.md\:pl-\[220px\] div.rounded-2xl.border.overflow-hidden:has(> table) > table thead th { background: color-mix(in srgb, var(--muted, #f4f4f5) 40%, transparent); }