/* ============================================================================
   Large-screen shell — a wide horizontal desktop window.

   The composition is deliberately asymmetric:

     ┌──────────────────────────────────────────────────────┐
     │  ┌──────────┐  ┌────────────────────────────────┐    │
     │  │ MARKET   │  │  STUDENT TOOLS                 │    │
     │  │ compact  │  │  wider workspace               │    │
     │  └──────────┘  └────────────────────────────────┘    │
     └──────────────────────────────────────────────────────┘

   The marketplace is phone-WIDTH but not phone-HEIGHT — a compact, portable
   browsing surface rather than a tall portrait slab. An earlier build locked it
   to a 9:19 aspect ratio, which made the whole shell square and the market
   absurdly elongated.

   The panes are not user-resizable. Sizing is fixed within bounds by design.

     < 768px       phone   single pane, tools arrive by swipe
     768–1119px    tablet  window, single compact pane, tools slide over
     >= 1120px     desktop wide window, both panes side by side
   ============================================================================ */

/* -------------------------------------------------------- phone default -- */

.win-bar { display: none; }

.app-frame {
  position: relative;
  flex: 1 1 auto;      /* fill whatever the window bar does not use */
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.pane-video {
  position: relative;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--c-ground);
}

/* ------------------------------------------------- tablet and desktop -- */

@media (min-width: 768px) {

  body {
    background: #000;
    display: grid;
    place-items: center;
    padding: clamp(14px, 2.2vw, 30px);
  }

  /* The window: one surface step above the page, hairline edge, soft radius.
     Flat — the boundary is drawn, never floated. */
  .app {
    background: var(--c-surface);
    border: var(--border-hairline);
    border-radius: var(--r-2xl);
    overflow: hidden;

    display: flex;
    flex-direction: column;

    width: min(1360px, 100vw - 2 * clamp(14px, 2.2vw, 30px));
    height: min(820px, 100dvh - 2 * clamp(14px, 2.2vw, 30px));
  }

  /* --- macOS-style title bar --- */

  .win-bar {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 var(--s-4);
    background: linear-gradient(to bottom, #1B1D20, #141619);
    border-bottom: 1px solid #000;
    position: relative;
    flex-shrink: 0;
  }

  .win-dots { display: flex; gap: 8px; }

  .win-dots i { width: 12px; height: 12px; border-radius: 50%; display: block; }
  .win-dots i:nth-child(1) { background: #FF5F57; }
  .win-dots i:nth-child(2) { background: #FEBC2E; }
  .win-dots i:nth-child(3) { background: #28C840; }

  .win-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--t-caption);
    font-weight: var(--fw-semibold);
    color: var(--c-text-faint);
  }

  /* Safe-area padding is a device concern; inside a window it is just a gap. */
  .app-header { padding-top: 0; height: var(--header-h); }
  .app-tabbar { padding-bottom: 0; height: var(--tabbar-h); }

/* Tablet: widened pane, centred, tools slide over it. */
  .pane-video {
    flex: 0 0 auto;
    width: min(540px, 100%); /* Increased from 440px */
    height: 100%;
    margin: 0 auto;
  }
}

/* -------------------------------------------------------------- desktop -- */

@media (min-width: 1120px) {

  .app-frame { justify-content: flex-start; }

  /* Compact, fixed. Phone width, full window height — no aspect lock, so the
     shell stays wide rather than being dragged into a square by this pane. */
.pane-video {
    flex: 0 0 clamp(440px, 40%, 600px); /* Bumped the clamp values for a wider view */
    width: auto;
    height: 100%;
    margin: 0;
    border-right: var(--border-hairline);
  }

  /* The workspace. Deliberately the wider of the two — leaderboard,
     calculators and challenges need real horizontal room, and it should read
     as a desktop side panel rather than a second phone. */
  .panel.is-docked {
    position: static;
    inset: auto;
    transform: none;
    visibility: visible;
    border-left: none;
    border-radius: 0;
    transition: none;

    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    min-height: 0;

    display: grid;
    grid-template-rows: auto 1fr;
  }

  /* The services app's own close button — .sv-close, not .panel-close.
     Meaningless when the pane is permanently docked. */
  .panel.is-docked .sv-close { display: none; }
  .panel.is-docked .panel-body { overscroll-behavior: contain; }

  /* Both affordances are meaningless once the panel is permanently visible. */
  .panel-hint.is-docked { display: none; }
  .icon-btn[data-tools] { display: none; }

  /* Sizing is fixed by design — the divider is a seam, never a handle. */
  .pane-divider { display: none !important; }

  /* --- the workspace uses its width --- */

  /* With real horizontal room the services views lay out in columns instead of
     one narrow stack. */
  .sv {
    max-width: 860px;
    padding: var(--s-5) var(--s-6) var(--s-12);
  }

  .sv-stats { grid-template-columns: repeat(4, 1fr); }

  .sv-grid { grid-template-columns: repeat(4, 1fr); }

  /* Today's challenge reads as a banner rather than a stacked card. */
  .challenge {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    padding: var(--s-5);
  }

  .challenge-cta { flex: 0 0 auto; padding: 0 var(--s-5); }

  /* Calculators sit side by side instead of one long column. */
  .sv .field + .field { margin-top: var(--s-4); }
}