/* market-desktop.css — the tablet and desktop layer.
 *
 * The phone layout in market.html is the shipped design, ported verbatim from
 * the design tool: one answer per screen, everything absolutely positioned
 * inside a 430px column. Stretching that to a 1400px window would break every
 * screen, so desktop is a different ARRANGEMENT of the same screens rather than
 * the same arrangement at a larger size.
 *
 * TWO RULES THIS FILE KEEPS
 *
 * 1. Every rule lives inside a min-width media query. Below 560px this file
 *    contributes nothing, so the phone — where the farmers actually are — is
 *    byte-for-byte the design and cannot be broken from here.
 *
 * 2. !important is used deliberately, never by habit. The design's markup is
 *    all inline styles, which beat any selector, so a structural override has
 *    no other way to win. Each one below says which inline value it is fighting.
 *
 * Layout at >=900px:
 *
 *   +------+----------------------------+--------------+
 *   | nav  |   map fills the pane       |  buyer list  |
 *   | rail |                            |  right panel |
 *   | 88px |                            |  380px       |
 *   +------+----------------------------+--------------+
 */

/* ==========================================================================
   TABLET  560-899px
   Same arrangement as the phone, just a wider column. Nothing structural, so
   nothing here needs !important except the column width itself.
   ========================================================================== */

@media (min-width: 560px) {
  .mk-root {
    /* Inline: max-width:430px. A 560px+ window can carry more without the
       line lengths getting uncomfortable for Thai text. */
    max-width: 560px !important;
    /* Give the column an edge so it does not look like a broken full-width
       layout sitting against the page background. */
    box-shadow: 0 0 0 1px var(--aw-line), 0 18px 50px rgba(9, 30, 66, .12);
  }
}

/* ==========================================================================
   DESKTOP GATE  >=900px
   ==========================================================================

   Everything below this block is the real desktop layout: nav rail, side panel,
   centred modals. It still works and is left intact on purpose — re-enabling it
   is deleting this one block, not rebuilding anything. Until the desktop
   experience is finished, a wide window gets the gate instead, because a
   half-finished desktop layout reads as a broken product where an honest "open
   this on your phone" reads as a deliberate one.

   WIDTH ALONE IS THE WRONG TEST, and gating on it blocked iPads. Every iPad in
   landscape is at least 1024px wide and the 12.9" is 1024 even in portrait, so a
   width-only rule tells a farmer holding a tablet at the pond to go find a
   phone — the exact person the tool is for.

   The real distinction is not size, it is what the person is pointing with.
   `hover: hover` and `pointer: fine` together mean a mouse or trackpad, which
   means a desk. A touch screen of any size falls through and gets the app, so
   iPads are never gated regardless of orientation, and neither is anything else
   with a finger on it.

   The desktop LAYOUT block below deliberately stays width-only, so an iPad still
   picks up the nav rail and side panel that suit a big screen. It gets the
   better layout; only mouse-driven desks get the gate.                        */

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {

  /* The app is hidden rather than removed, so nothing in it has to know this
     gate exists and the layout below can come back untouched. */
  #app { display: none !important }

  .mk-desktop-gate {
    /* Inline: display:none — the phone default, so this file still contributes
       nothing below its breakpoints. */
    display: grid !important;
    place-items: center;
    position: fixed;
    inset: 0;
    padding: 40px;
    background: linear-gradient(140deg, #052b63, #0b58bd 78%);
    overflow-y: auto;
  }

  .mk-desktop-card {
    width: min(520px, 100%);
    background: #fff;
    border-radius: 24px;
    padding: 40px 40px 34px;
    text-align: center;
    box-shadow: 0 30px 80px rgba(5, 27, 58, .38);
  }

  .mk-desktop-mark {
    width: 64px;
    height: 64px;
    border-radius: 19px;
    background: var(--aw-blue);
    display: inline-grid;
    place-items: center;
    overflow: hidden;
  }

  /* The mark is an opaque PNG, so the tile is filled by the image itself rather
     than showing a seam where the two blues meet. */
  .mk-desktop-mark img { width: 63px; height: 63px; object-fit: contain; display: block }

  .mk-desktop-brand {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 730;
    color: var(--aw-grey-2);
  }

  .mk-desktop-title {
    margin: 8px 0 0;
    font-size: 26px;
    font-weight: 780;
    line-height: 1.35;
    color: var(--aw-ink);
    text-wrap: pretty;
  }

  .mk-desktop-body {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--aw-grey);
    text-wrap: pretty;
  }

  .mk-desktop-url {
    width: 100%;
    margin-top: 18px;
    padding: 12px 12px 12px 18px;
    border-radius: 14px;
    border: 1px dashed var(--aw-blue-hairline);
    background: var(--aw-blue-wash-2);
    color: var(--aw-blue);
    font: inherit;
    font-size: 18px;
    font-weight: 750;
    letter-spacing: .01em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: background .16s ease, border-color .16s ease;
  }

  .mk-desktop-url:hover {
    background: #e4edfb;
    border-color: var(--aw-blue);
  }

  .mk-desktop-urltext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

  .mk-desktop-copy {
    flex: none;
    padding: 7px 13px;
    border-radius: 9px;
    background: var(--aw-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 730;
    letter-spacing: 0;
  }

  /* Set by market-app.js on a successful copy and cleared a moment later. Green
     rather than blue so the change registers as an outcome, not a second
     button. */
  .mk-desktop-url.is-copied { border-style: solid; border-color: #06c755; background: #eafaf0 }
  .mk-desktop-url.is-copied .mk-desktop-copy { background: #06c755 }

  .mk-desktop-soon {
    margin: 14px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--aw-grey-3);
  }

  .mk-desktop-line {
    margin-top: 22px;
    height: 50px;
    border-radius: 14px;
    background: #06c755;
    color: #fff;
    font-size: 16px;
    font-weight: 750;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 8px 20px rgba(6, 199, 85, .28);
    transition: filter .16s ease;
  }

  /* Dimmed with a filter, not a darker background: the mark's LINE letterforms
     are #06c755 cut-outs that rely on the button being exactly that green, and
     repainting it would surface them as a mismatched patch. */
  .mk-desktop-line:hover { filter: brightness(.95) }
  .mk-desktop-line img { width: 26px; height: 26px; display: block; flex: none }

  .mk-desktop-note {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--aw-grey-3);
  }

  /* Secondary to LINE on purpose, and outlined rather than filled Meta blue:
     LINE is the channel that can reach a farmer back, Facebook is where they
     find us. Same hierarchy as the ข้อมูล tab, so the two screens agree. */
  .mk-desktop-fb {
    margin-top: 14px;
    height: 46px;
    border-radius: 13px;
    border: 1px solid var(--aw-line);
    background: #fff;
    color: var(--aw-ink);
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: background .16s ease, border-color .16s ease;
  }

  .mk-desktop-fb:hover { background: var(--aw-surface); border-color: var(--aw-grey-3) }
  .mk-desktop-fb img { width: 22px; height: 22px; display: block; flex: none }
}

/* ==========================================================================
   DESKTOP  >=900px
   ========================================================================== */

@media (min-width: 900px) {

  /* ---- shell ----------------------------------------------------------- */

  body {
    /* The navy was there to make a 430px column read as deliberate. At this
       width the app fills the window, so the surround has no job left. */
    background: var(--aw-canvas);
  }

  #app {
    display: block;
    min-height: 100dvh;
    background: var(--aw-canvas);
  }

  .mk-root {
    /* Inline: width:100%; max-width:430px; margin:0 auto; height:100dvh.
       Becomes the full window, laid out as nav rail + main pane. */
    max-width: none !important;
    width: 100% !important;
    height: 100dvh !important;
    display: grid !important;
    grid-template-columns: 88px 1fr;
    box-shadow: none;
    background: var(--aw-canvas);
  }

  /* Every screen is inline `position:absolute; inset:0`, which would pin it to
     the whole window and slide it under the nav rail. In the grid it becomes an
     ordinary second-column cell. */
  .mk-screen {
    position: relative !important;
    inset: auto !important;
    grid-column: 2;
    grid-row: 1;
    height: 100dvh;
    overflow: hidden;
    /* No min-height:0 here on purpose — market.css is landing that fix for
       the flex-column reading screens' internal scroll, and restating it here
       would duplicate it across every screen instead of just those. */
  }

  /* ---- nav rail -------------------------------------------------------- */

  .mk-tabs {
    /* Inline: position:absolute; left:0; right:0; bottom:0; height:78px —
       a bottom bar. Becomes a full-height vertical rail in column 1. */
    position: relative !important;
    inset: auto !important;
    grid-column: 1;
    grid-row: 1;
    height: 100dvh !important;
    width: 88px;
    padding: 18px 0 0 !important;
    flex-direction: column;
    /* Inline: align-items:flex-start. Without !important this loses to the
       inline value, and the buttons shrink to content width and hug the left
       edge instead of filling the 88px rail (which is what makes the 8px
       side margins on .mk-tabs > button read as a hover pill, not a gap). */
    align-items: stretch !important;
    gap: 2px;
    background: #fff !important;
    border-top: 0 !important;
    border-right: 1px solid var(--aw-line);
    backdrop-filter: none !important;
  }

  .mk-tabs > button {
    /* Inline: flex:1 — which would stretch five buttons over the full height. */
    flex: 0 0 auto !important;
    min-height: 64px !important;
    border-radius: 12px;
    margin: 0 8px;
    transition: background .18s ease;
  }

  .mk-tabs > button:hover { background: var(--aw-blue-wash-2) }

  /* The phone tab bar slides out of the way on scroll-down via an inline
     transform. Here it is a stationary side rail, so that transform would push
     the whole rail off-screen the first time anyone scrolls a list. */
  .mk-tabs {
    transform: none !important;
    transition: none !important;
  }


  /* ---- map screen: map + right panel ----------------------------------- */

  .mk-map {
    /* Inline does not set display, so no !important needed to add one. */
    display: grid;
    grid-template-columns: 1fr 380px;
  }

  .mk-mapcanvas {
    /* Inline: position:absolute; inset:0 — relative to the screen, which is now
       the whole pane including the right panel. Confine it to column 1. */
    position: relative !important;
    inset: auto !important;
    grid-column: 1;
    height: 100dvh;
  }

  .mk-topbar {
    /* Inline: position:absolute; top:calc(env(safe-area-inset-top) + 6px);
       left:14px; right:14px — a pill
       inset from both edges over a phone-width map. The spec asks for "a real
       top bar across the map pane", so this spans edge-to-edge over the map
       column and stops at the right panel (380px) instead of sliding under
       it — the inner search pill and size chip keep their own inline
       rounded/shadowed styling untouched, they just now sit inside a solid
       bar instead of floating loose. */
    top: 0 !important;
    left: 0 !important;
    right: 380px !important;
    height: 64px;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid var(--aw-line);
  }

  .mk-sheet {
    /* Inline: position:absolute; left:0; right:0; bottom:0; height:<from JS>.
       The height is written by market-app.js for the three drag snaps; on
       desktop there is no dragging, so it must be neutralised — hence
       !important on height specifically. */
    position: relative !important;
    inset: auto !important;
    grid-column: 2;
    height: 100dvh !important;
    border-radius: 0 !important;
    border-left: 1px solid var(--aw-line);
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Nothing to drag to: the panel is always full height. Inline sets no
     display on the grabber row, so no !important is needed to hide it. */
  .mk-grabber { display: none }

  /* The tour measures its cut-out against .mk-root, so the overlay has to be
     the same box — fixed would dim the margins either side of a centred
     ultrawide app but put the hole in the wrong place, which is worse than an
     undimmed margin. Left absolute deliberately.

     The map tour's grabber step targets .mk-grabber, which is display:none at
     this width (the sheet is a fixed side panel). measureTour finds no rect and
     skips the step rather than dimming the whole screen around nothing. */
  .mk-tourcard { left: auto !important; right: 32px !important; width: 340px }

  /* The design pads the sheet's list for a bottom tab bar that is now a side
     rail, so the reserved space is dead. */
  .mk-sheet .aw-scroll { padding-bottom: 24px !important }

  /* ---- reading screens ------------------------------------------------- */

  /* onboard, sizes, list, saved, info are all single columns of content. At
     1fr they would stretch to 1200px+ and the Thai line lengths would become
     unreadable, so cap and centre them.

     This targets the SCREEN ROOT (already .mk-screen, already position:
     relative from the rule above), not its children. Reaching into the
     children was tried first and rejected: sizes/list/saved each have a
     full-bleed header bar and a separate scrolling body as direct sibling
     divs, so a `> div` selector caps both and the header loses its edge-to-
     edge background instead of just narrowing the column beneath it; onboard's
     step content (search input, result rows, slider) is written assuming full
     width of its parent and breaks under align-items:center. Capping the root
     avoids all of that in one rule — every full-bleed header still spans the
     full width of the (now 760px) box, because that box IS the column. */
  .mk-onboard,
  .mk-sizes,
  .mk-list,
  .mk-saved,
  .mk-info {
    max-width: 760px;
    margin-inline: auto;
    /* Generous top padding, replacing the phone's status-bar clearance which
       is baked into each header's own inline padding and isn't a hook we
       have. border-box keeps the padding inside the 100dvh height .mk-screen
       already set instead of adding to it — with content-box (the page sets
       no box-sizing reset) that extra height would get clipped by
       .mk-root's overflow:hidden. */
    box-sizing: border-box;
    padding-top: 40px;
  }

  /* ---- overlays become modals ------------------------------------------ */

  /* On a phone these are bottom sheets rising over the screen. On a desktop a
     sheet glued to the bottom edge of a 1400px window looks like a mistake, so
     the card centres and the scrim stays. */
  .mk-detail,
  .mk-sizesheet {
    /* Inline: position:absolute — relative to .mk-root. That's the whole
       window from 900-1399px, but >=1400px .mk-root caps at 1600px and
       centres (see below), which would leave the margins on either side of
       an ultrawide window undimmed. Fixed pins the scrim to the true
       viewport at every desktop width, matching "the scrim stays
       full-window". Inline sets no display, so grid needs no !important. */
    position: fixed !important;
    display: grid;
    place-items: center;
    padding: 40px;
  }

  .mk-detailcard,
  .mk-sizecard {
    /* Inline: position:absolute; left:0; right:0; bottom:0 with top-only
       rounding — the bottom-sheet shape. */
    position: relative !important;
    inset: auto !important;
    width: min(560px, 100%) !important;
    max-height: 82dvh !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 70px rgba(9, 30, 66, .3) !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Rise-from-bottom reads wrong for something that is now centred. The
       global prefers-reduced-motion rule in market.css still disables it. */
    animation: mkPop .22s cubic-bezier(.22, .8, .25, 1) !important;
  }

  @keyframes mkPop {
    from { opacity: 0; transform: translateY(10px) scale(.985) }
    to   { opacity: 1; transform: none }
  }

  /* ---- pointer affordances --------------------------------------------- */

  /* Touch targets designed for a thumb get hover states on a machine with a
     cursor, which is the main thing that makes a ported mobile layout feel
     like a real desktop page rather than a phone in a box. */
  .mk-screen button:not(.mk-grabber) { cursor: pointer }
}

/* ==========================================================================
   ULTRAWIDE  >=1400px
   Stop the map pane growing without limit on a 27" display.
   ========================================================================== */

@media (min-width: 1400px) {
  .mk-root {
    max-width: 1600px !important;
    margin-inline: auto !important;
    border-inline: 1px solid var(--aw-line);
  }
}