/* AURA desktop layout. Everything here is inside min-width media queries:
   phones and tablets (under 1024px) keep the existing one-column design exactly as it is.
   Bulk handwriting grading keeps its own wide layout (phase1.css). */

@media (min-width: 1024px) {
  /* ---------- Page width: use the screen instead of a 670px column ---------- */
  main.max-w-2xl { max-width: min(1360px, calc(100vw - 64px)); padding-left: 32px; padding-right: 32px; padding-top: 28px; }
  .aura-top-in { max-width: min(1360px, calc(100vw - 64px)); padding-left: 32px; padding-right: 32px; }

  /* Left columns stay in view while the right column scrolls (they scroll inside if very tall) */
  .aura-col-sticky, .aura-fb-grid > .aura-col-left, .aura-prog-grid > .aura-col-left {
    position: sticky; top: 84px; max-height: calc(100vh - 200px); overflow-y: auto; scrollbar-width: thin;
  }

  /* ---------- Buttons: a little smaller, like desktop sites ---------- */
  .aura-cta { min-height: 48px; font-size: 14.5px; }
  .aura-btn-secondary { min-height: 46px; font-size: 14px; }
  .p1-btn { min-height: 42px; font-size: 14px; padding: 0 18px; }
  .p1-scan-card-btn { min-height: 46px; font-size: 14.5px; }
  .aura-tg-btn { min-height: 50px; font-size: 15px; }
  .bubble-btn.py-3\.5 { padding-top: .7rem; padding-bottom: .7rem; }

  /* ---------- Writing: account + task type on the left, the form on the right ---------- */
  #pageWriting:not(.hidden) { display: grid; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 28px; row-gap: 20px; align-items: start; }
  #pageWriting > * { margin-top: 0 !important; }
  #pageWriting > #authStatus { grid-column: 1; grid-row: 1; }
  #pageWriting > .aura-modes { grid-column: 1; grid-row: 2; position: sticky; top: 84px; }
  #pageWriting > .aura-write-col, #pageWriting > .aura-write { grid-column: 2; grid-row: 1 / span 3; }
  #pageWriting .aura-modes .grid { grid-template-columns: 1fr; }
  #pageWriting .aura-modes .topic-mode { text-align: left; padding: 12px 16px !important; font-size: 13px !important; }
  #essayInput { min-height: 380px; }
  #promptInput { min-height: 96px; }

  /* Logged out: the hero spans the whole width; the task picker and the form sit under it */
  #pageWriting > #authStatus:has(.ah-hero) { grid-column: 1 / -1; }
  #pageWriting:has(#authStatus .ah-hero) > .aura-modes { grid-row: 2; }
  #pageWriting:has(#authStatus .ah-hero) > .aura-write-col,
  #pageWriting:has(#authStatus .ah-hero) > .aura-write { grid-row: 2 / span 2; }
  .ah-hero { padding-left: 40px; padding-right: 40px; }

  /* ---------- Feedback: score + criteria on the left, details on the right ---------- */
  .aura-fb-grid { display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .aura-fb-grid > * { margin-top: 0 !important; }
  .aura-fb-grid #criteriaTabs { grid-template-columns: 1fr 1fr; }
  .aura-result-actions { justify-content: flex-end; }
  .aura-result-actions > * { flex: 0 0 auto; min-width: 180px; }

  /* ---------- Progress: summary on the left, submissions on the right ---------- */
  .aura-prog-grid { display: grid; grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .aura-prog-grid > * { margin-top: 0 !important; }
  .aura-prog-grid #progressTimeline.p1-scroll { max-height: none; }
  .aura-prog-grid #progressTimeline { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
  .aura-prog-grid #progressTimeline > * { margin-top: 0 !important; }

  /* ---------- Mock: test choice on the left; topic, rules and Start on the right ---------- */
  #mockSetup:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; row-gap: 18px; align-items: start; }
  #mockSetup > * { margin-top: 0 !important; }
  #mockSetup > .aura-mock-hero { grid-column: 1 / -1; }
  #mockSetup > section:nth-of-type(1) { grid-column: 1; grid-row: 2 / span 4; }
  #mockSetup > section:nth-of-type(2), #mockSetup > .aura-rules, #mockSetup > #startBtn { grid-column: 2; }
  #mockSetup > #savedMocks { grid-column: 1 / -1; }
  #mockSetup #savedMocks .p1-scroll { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; max-height: none; }
  #mockSetup #savedMocks .p1-scroll > * { margin-top: 0 !important; }

  /* ---------- Account and Teacher: cards in two columns (like a dashboard) ---------- */
  .p1-dash, #teacherFeedback:not(.hidden), #teacherProgress:not(.hidden) { display: block; columns: 2; column-gap: 24px; }
  .p1-dash > :not(.hidden), #teacherFeedback > :not(.hidden), #teacherProgress > :not(.hidden) { break-inside: avoid; margin: 0 0 20px !important; width: 100%; }
  .p1-dash > .p1-stat-grid, .p1-dash > .p1-scan-card, .p1-dash > :has(.p1-plan-card), .p1-dash > :has(.p1-table),
  .p1-dash > .p1-banner, .p1-dash > .p1-warning,
  .p1-dash > .p1-panel:not(:has(.p1-panel-head)),
  #teacherFeedback > .aura-empty, #teacherProgress > .aura-empty { column-span: all; }
  /* a full-width box after two columns needs its own gap above */
  .p1-dash > .p1-stat-grid, .p1-dash > .p1-scan-card, .p1-dash > :has(.p1-plan-card), .p1-dash > :has(.p1-table),
  .p1-dash > .p1-panel:not(:has(.p1-panel-head)) { margin-top: 20px !important; }
  .p1-dash > :first-child { margin-top: 0 !important; }
  #teacherFeedback > .aura-empty, #teacherProgress > .aura-empty { max-width: 720px; margin: 24px auto !important; }
  /* Sign out: a normal-size button under the right column, not a full-width bar */
  .p1-acct-foot { display: flex; justify-content: flex-end; gap: 12px; }
  .p1-acct-foot > .p1-btn { width: calc(50% - 12px); max-width: 420px; }
  .p1-acct-foot:not(.p1-acct-foot-single) > .p1-btn { width: auto; min-width: 180px; }
  /* Plan cards side by side wherever they appear (logged in or out) */
  .p1-panel:has(> .p1-stack > .p1-plan-card) > .p1-stack { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
  .p1-panel:has(> .p1-stack > .p1-plan-card) > .p1-stack > * { margin: 0 !important; }
  .p1-wallet { max-width: none; }

  /* ---------- Teacher page: hero | scan, then two columns whose last cards end on the same line ---------- */
  .p1-dash.p1-teach-dash { display: grid; columns: auto; gap: 20px; }
  .p1-dash.p1-teach-dash > * { margin: 0 !important; }
  .p1-teach-dash .p1-trow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
  .p1-teach-dash .p1-trow:has(> .p1-tcol:only-child), .p1-teach-dash .p1-trow:has(> :only-child) { grid-template-columns: 1fr; }
  .p1-teach-dash .p1-tcol:empty { display: none; }
  .p1-teach-dash .p1-trow:has(> .p1-tcol:empty) { grid-template-columns: 1fr; }
  .p1-teach-dash .p1-tcol { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .p1-teach-dash .p1-tcol > * { margin: 0 !important; }
  .p1-teach-dash .p1-tcol > .p1-panel:last-of-type { flex: 1 1 auto; }
  .p1-teach-dash .p1-trow > .p1-teach-hero, .p1-teach-dash .p1-trow > .p1-scan-card { margin: 0 !important; align-self: stretch; height: auto; }
  /* Classroom: title box and Create button on one line, so the card is shorter */
  .p1-teach-dash form[data-p1-form="create-classroom"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 12px !important; }
  .p1-teach-dash form[data-p1-form="create-classroom"] .p1-field { margin: 0; }
  .p1-teach-dash form[data-p1-form="create-classroom"] > .p1-btn { width: auto; min-width: 160px; }
  .p1-teach-dash .p1-code-ticket { padding: 12px 16px; }
  /* Sign out sits under "Need help?" in the right column */
  .p1-teach-dash .p1-desk-only { display: flex; justify-content: flex-end; }
  .p1-teach-dash .p1-tsignout > .p1-btn { width: 100%; }
  .p1-teach-dash ~ .p1-acct-foot-single { display: none; }
}

/* Very wide screens: a little more room for the left column */
@media (min-width: 1440px) {
  #pageWriting:not(.hidden) { grid-template-columns: 360px minmax(0, 1fr); }
  .aura-fb-grid, .aura-prog-grid { grid-template-columns: 440px minmax(0, 1fr); }
}