/* AutoForge desktop layout.
   Breakpoint: 1200px (min-width only).
   Phones, large phones in landscape, and the single-column rules already
   in index.html stay below this line. Do not add max-width queries
   or restyle rules that apply under this breakpoint in this file.
   Tokens, set on :root inside the breakpoint and shared by shell, Build,
   and Maintenance:
     --af-desk-nav     fixed side-nav width
     --af-desk-gutter  page padding inside the content column
     --af-desk-max     content max width
     --af-desk-gap     gap between desktop columns
   Wrappers below are display:contents until the breakpoint so they do not
   change the phone box tree. */

.desk-wide, .desk-main, .desk-side,
.plist-recs, .plist-body, .plist-side, .plist-main,
.svside, .logside, .loglist,
.mpfilters, .dysetup, .dymain, .gform, .glist, .dtools { display: contents; }

@media (min-width: 1200px) {
  :root {
    --navh: 0px;
    --af-desk-nav: 232px;
    --af-desk-gutter: 28px;
    --af-desk-max: 1180px;
    --af-desk-gap: 20px;
  }

  /* ----- Shell: side nav, content column, totals bar ----- */
  #nav {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: calc(var(--af-desk-nav) + env(safe-area-inset-left));
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: calc(env(safe-area-inset-top) + 18px) 12px 16px calc(env(safe-area-inset-left) + 12px);
    border-top: 0;
    border-right: 1px solid var(--line);
    z-index: 30;
  }
  #nav::before {
    content: "AutoForge";
    display: block;
    margin: 0 8px 14px;
    font-weight: 900;
    font-style: italic;
    font-size: 22px;
    letter-spacing: -.4px;
    color: var(--ac);
  }
  #nav a {
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    max-width: none;
    min-height: 44px;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 14px;
  }
  #nav a i { width: 36px; height: 32px; }
  #nav a.on { background: var(--ton); color: var(--tonTxt); }
  #nav a.on i { background: transparent; color: inherit; }
  #nav a:hover { background: color-mix(in srgb, var(--acb) 12%, transparent); color: var(--txt); }
  #nav a.on:hover { background: var(--ton); color: var(--tonTxt); }

  #app {
    width: auto;
    margin-left: calc(var(--af-desk-nav) + env(safe-area-inset-left));
    margin-right: 0;
    padding: calc(env(safe-area-inset-top) + 16px) var(--af-desk-gutter) 48px;
    overflow: visible;
  }
  #app > * { max-width: var(--af-desk-max); }
  #app:has(.bar) { padding-bottom: 168px; }

  .chrome {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 12;
    margin: 0 0 12px;
    padding: 2px 0 10px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .chrome .mhead { flex: 1 1 280px; margin: 0; min-width: 240px; }
  .chrome .vswitch, .chrome > .garage {
    flex: 1 1 320px;
    width: min(100%, 440px);
    max-width: 440px;
    margin: 0 0 0 auto;
    position: relative;
    z-index: 14;
  }
  .chrome .vehsheet {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    margin: 0;
    max-height: min(60vh, 480px);
    overflow: auto;
    box-shadow: var(--sh2);
  }

  .bar {
    left: calc(var(--af-desk-nav) + env(safe-area-inset-left));
    bottom: 0;
  }
  .bar .in { max-width: var(--af-desk-max); }
  .bar .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  #app[data-v=settings] > :not(.chrome),
  #app > .entry-maint,
  #app > .entry-parts:not(:has(.vehlist)),
  #app > #entry-parts-add,
  #app > .logedit,
  #app > .ivedit { max-width: 720px; }

  /* ----- Home ----- */
  .hpage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--af-desk-gap);
    align-items: start;
  }
  .hpage > .hero, .hpage > #askcard, .hpage > #askres, .hpage > .foot { grid-column: 1 / -1; }
  .hpage > .mv { grid-column: 1; align-self: stretch; }
  .hpage > .grid2 { grid-column: 2; grid-row: 2; margin-top: 12px; align-content: start; }
  .hpage .grid2 { grid-template-columns: 1fr 1fr; }

  /* ----- Build: generate (goals beside budget) ----- */
  .entry-build {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--af-desk-gap);
    align-items: start;
  }
  .entry-build > .back,
  .entry-build > .entry-hero,
  .entry-build > .note,
  .entry-build > #planmsg,
  .entry-build > .plancta,
  .entry-build > .asknote { grid-column: 1 / -1; }
  .entry-build > #vehnow,
  .entry-build > #vsel,
  .entry-build > .goalcard { grid-column: 1; }
  .entry-build > .card:not(#vsel):not(.goalcard):not(#vehnow) { grid-column: 2; }
  .entry-build .entry-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
  }
  .entry-build .entry-hero .entry-mark { grid-row: 1 / span 3; margin: 0; }
  .entry-build .entry-hero .entry-kicker,
  .entry-build .entry-hero h2,
  .entry-build .entry-hero p { grid-column: 2; }

  /* Parts vehicle picker: cards across, not a wizard */
  .entry-parts .vehlist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .entry-parts .vehpick { margin: 0; }

  /* Overview: numbers across, parts beside the budget */
  .bov:has(.desk-main) {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .72fr);
    column-gap: var(--af-desk-gap);
    align-items: start;
  }
  .bov:has(.desk-main) > .desk-wide { display: block; grid-column: 1 / -1; }
  .bov:has(.desk-main) > .desk-main { display: block; grid-column: 1; }
  .bov:has(.desk-main) > .desk-side {
    display: block;
    grid-column: 2;
    position: sticky;
    top: 76px;
    align-self: start;
  }
  .bov .ovnums { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bov .ovnums .card { margin: 0; }

  /* Performance parts: filters beside a wrapping catalog */
  .plist-recs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    column-gap: 12px;
    align-items: start;
  }
  .plist-recs:empty { display: none; }
  .plist-recs > .planban,
  .plist-recs > .bph,
  .plist-recs > .mut { grid-column: 1 / -1; }
  .plist-body {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    column-gap: var(--af-desk-gap);
    align-items: start;
  }
  .plist-side {
    display: block;
    position: sticky;
    top: 76px;
    align-self: start;
  }
  .plist-side .catgrid { grid-template-columns: 1fr; }
  .plist-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    column-gap: 12px;
    align-items: start;
  }
  .plist-main > .bph,
  .plist-main > .mut,
  .plist-main > p,
  .plist-main > #ebay,
  .plist-main > .btn,
  .plist-main > .card:not(.pcard) { grid-column: 1 / -1; }

  /* Part detail: buy column beside fitment and specs */
  .pd:has(.speccard) {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
    column-gap: 28px;
    align-items: start;
  }
  .pd > .pdback, .pd > .pdveh { grid-column: 1 / -1; }
  .pd > :not(.pdback):not(.pdveh):not(.pdfit):not(.speccard) { grid-column: 1; }
  .pd > .pdfit, .pd > .speccard { grid-column: 2; }

  .sumpage, .minepage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    align-items: start;
  }
  .sumpage > .back, .sumpage > h2, .sumpage > b, .sumpage > .mut,
  .sumpage > .note, .sumpage > .ad, .sumpage > .btn, .sumpage > .aff,
  .sumpage > .card:not(.part),
  .minepage > .back, .minepage > h2, .minepage > .btn, .minepage > p { grid-column: 1 / -1; }

  .cmppage .cmpslots { gap: 20px; }
  .cmppage button.cmpslot { min-height: 128px; padding: 18px; }
  .cmppage .cmpt td { padding: 12px 14px; }

  /* Dyno: chart beside setup */
  .dypage {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .75fr);
    column-gap: var(--af-desk-gap);
    align-items: start;
  }
  .dypage > h2, .dypage > .dylead { grid-column: 1 / -1; }
  .dypage > .dymain { display: block; grid-column: 1; }
  .dypage > .dysetup {
    display: block;
    grid-column: 2;
    position: sticky;
    top: 76px;
    align-self: start;
  }

  /* ----- Maintenance ----- */
  /* Service: odometer and schedule source beside the interval list */
  .svpage {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    column-gap: var(--af-desk-gap);
    align-items: start;
  }
  .svpage > h2, .svpage > .btn, .svpage > .mut { grid-column: 1 / -1; }
  .svpage > .svside { display: block; grid-column: 1; }
  .svpage > #svlist {
    display: grid;
    grid-column: 2;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    align-content: start;
  }
  #svlist > .card { margin: 0; }

  /* Log: totals, filters, and the new-entry action beside recent entries */
  .logpage {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    column-gap: var(--af-desk-gap);
    align-items: start;
  }
  .logpage > h2, .logpage > .card:not(.logspend) { grid-column: 1 / -1; }
  .logpage > .logside { display: block; grid-column: 1; }
  .logpage > .loglist { display: block; grid-column: 2; }
  .loglist > .card { margin: 8px 0; }

  /* Find parts: filters beside results. Results wrap only when a card still fits. */
  .mpage:has(.mpfilters) {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    column-gap: var(--af-desk-gap);
    align-items: start;
  }
  .mpage > .mpfilters {
    display: block;
    grid-column: 1;
    position: sticky;
    top: 76px;
    align-self: start;
  }
  .mpage > #mpres {
    display: grid;
    grid-column: 2;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 12px;
    align-content: start;
  }
  .mpage > .aff { grid-column: 1 / -1; }
  #mpres > .card { margin: 0; }
  #mpres > .btn { grid-column: 1 / -1; }
  .hpage .chips, .mpfilters .chiprow { flex-wrap: wrap; overflow: visible; row-gap: 6px; }
  .mpfilters .seg.sm { flex-wrap: wrap; }
  #mpres .mrow, #svlist .mrow { flex-wrap: wrap; }

  /* Diagnose stays repair-only. Codes sit beside the adapter tools when present. */
  .dpage:has(.dresults) {
    display: grid;
    grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
    column-gap: var(--af-desk-gap);
    align-items: start;
  }
  .dpage:has(.dresults) > h2,
  .dpage:has(.dresults) > .dintro,
  .dpage:has(.dresults) > .dfoot { grid-column: 1 / -1; }
  .dpage:has(.dresults) > .dtools { display: block; grid-column: 1; }
  .dpage:has(.dresults) > .dresults { grid-column: 2; }
  .dpage .grid2 { grid-template-columns: 1fr 1fr; }
  .gauges { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Garage editor: the active vehicle beside the saved-vehicle list */
  .gpage:has(.glist) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--af-desk-gap);
    align-items: start;
  }
  .gpage > .back, .gpage > h2, .gpage > .mut { grid-column: 1 / -1; }
  .gpage > .gform, .gpage > .glist { display: block; }
  .gpage > .gform { grid-column: 1; }
  .gpage > .glist { grid-column: 2; }
}