/* Shrimp market map — tokens and the handful of real classes the design uses.
 *
 * The design system this page was drawn against ships a component bundle and a
 * stylesheet; the template uses neither. It reaches for exactly the custom
 * properties below and two classes, everything else being inline styles. So
 * only the variables come across, and _ds_bundle.js / styles.css stay behind.
 *
 * Chula is already declared in chula-base.css, but this page does not load that
 * file — it shares no markup with the tools pages, and pulling in a whole legacy
 * stylesheet for two @font-face rules would drag its header, footer and reset
 * along with it. The faces are re-declared here against the same woff2 files.
 */

@font-face {
  font-family: Chula;
  src: url("assets/chula-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Chula;
  src: url("assets/chula-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Blue ramp */
  --aw-blue: #0b58bd;
  --aw-blue-press: #0a4ba1;
  --aw-blue-deep: #052b63;
  --aw-navy: #0d2140;
  --aw-blue-wash-2: #f0f6ff;
  --aw-blue-hairline: #cfdcef;
  --aw-blue-sky: #9fc6f7;

  /* Neutrals */
  --aw-ink: #0d2140;
  --aw-ink-2: #31435c;
  --aw-slate: #41536b;
  --aw-grey: #5d6c80;
  --aw-grey-2: #7a879b;
  --aw-grey-3: #8492a6;
  --aw-line: #e3e9f1;
  --aw-line-2: #e2e9f3;
  --aw-line-3: #eef2f7;
  --aw-line-input: #d7e0ec;
  --aw-canvas: #f5f8fc;
  --aw-surface: #f4f7fc;
  --aw-surface-2: #f8fafd;

  /* Semantic status */
  --aw-ready-fg: #1d7a43;
  --aw-ready-bg: #e7f6ec;
  --aw-thai-fg: #1d7a44;
  --aw-thai-bg: #eaf6ee;
  --aw-soon-fg: #a95f10;
  --aw-soon-bg: #fdf0e3;
  --aw-estimate-bg: #fdf6e3;
  --aw-estimate-line: #f0d99a;
  --aw-cta-orange: #ff7a1a;
  --aw-toast-tick: #7ee0a6;

  --focus-ring: rgba(11, 88, 189, .15);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--aw-navy);
  font-family: Chula, "Noto Sans Thai", Tahoma, sans-serif;
  overscroll-behavior: none;
}

/* On a phone the app is the viewport. On a desktop it sits centred against the
   navy so the 430px column reads as deliberate rather than as a broken layout. */
#app {
  display: flex;
  justify-content: center;
  min-height: 100dvh;
  background: var(--aw-navy);
}

@keyframes awRise {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px) }
  to   { opacity: 1; transform: none; filter: none }
}
@keyframes awSlideIn {
  from { opacity: 0; transform: translateX(26px) }
  to   { opacity: 1; transform: none }
}
@keyframes awSheetUp {
  from { opacity: 0; transform: translateY(40px) scale(.985) }
  to   { opacity: 1; transform: none }
}
@keyframes awPop {
  0%   { transform: scale(.94); opacity: 0 }
  60%  { transform: scale(1.01) }
  100% { transform: scale(1); opacity: 1 }
}
@keyframes awFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes awPulse {
  0%   { box-shadow: 0 0 0 0 rgba(11, 88, 189, .28) }
  100% { box-shadow: 0 0 0 14px rgba(11, 88, 189, 0) }
}
@keyframes awSpin { to { transform: rotate(360deg) } }

.aw-ms {
  font-family: "Material Symbols Outlined";
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* The GPS control while a fix is in flight. */
.aw-spin { animation: awSpin 1s linear infinite }

/* ---- bottom tab bar --------------------------------------------------- */

/* Material Symbols is a variable font, so FILL is an axis from outline to
   solid, not a second glyph. Animating that axis is why hovering fills the
   icon in rather than just recolouring it — and because it is one axis on one
   font, there is no second asset to download for the filled state. */
.mk-tabicon {
  transition: font-variation-settings .2s ease, color .18s ease, transform .18s ease;
  will-change: font-variation-settings;
}

/* Hover is a pointer-only affordance: on a touch screen :hover sticks after a
   tap, which would leave the last-tapped icon looking selected. */
@media (hover: hover) and (pointer: fine) {
  .mk-tab:hover .mk-tabicon {
    font-variation-settings: 'FILL' 1 !important;
    color: var(--aw-blue);
  }
  .mk-tab:hover { color: var(--aw-blue) }
}

/* The whole click feedback: the icon dips while the finger is down and springs
   back on release. No overshoot and nothing that plays after the fact — an
   animation that continues past the tap makes navigation feel like it is
   waiting for something, which it should never be. */
.mk-tab:active .mk-tabicon {
  transform: scale(.88);
  transition-duration: .07s;
}

/* THE SCROLL FIX. Six containers in the design are `flex:1; overflow-y:auto`
   inside a column flex parent. A flex item's min-height defaults to auto — i.e.
   min-content — so the item refuses to shrink below its own content, grows its
   parent instead, and overflow-y never has anything to overflow. Nothing
   scrolled anywhere in the app.

   The design got away with it inside a fixed 844px canvas where every height was
   explicit. It broke the moment the root became 100dvh. min-height:0 lets the
   item shrink, which is what lets it scroll.

   The wrappers need it too: the chain from the screen root down to .aw-scroll is
   all column flex, and one link without min-height:0 blocks the whole chain. */
.aw-scroll { min-height: 0 }
.mk-screen, .mk-screen > div, .mk-screen > div > div { min-height: 0 }

.aw-scroll { scrollbar-width: none; -ms-overflow-style: none }
.aw-scroll::-webkit-scrollbar { display: none }

/* Horizontal strips (the size bars, the compare chips) are flex ROWS, and the
   rule above would let them collapse. Scope the reset back for those. */
.aw-scroll[style*="overflow-x"] { min-height: auto }

/* Swipe-to-filter on the buyer list needs the browser to hand horizontal
   gestures to the page. Left at the default the browser owns both axes, claims
   the touch as a scroll and cancels the pointer — which is why the gesture
   worked with a mouse and did nothing on a phone.

   pan-y on the list body: the browser keeps vertical scrolling, the app gets
   horizontal. */
.mk-list > .aw-scroll { touch-action: pan-y }

/* The strips inside the screens — the size chips on each buyer card, the filter
   row, the size chart — really do scroll sideways and must keep doing so. This
   used to say `pan-x`, which did that and took vertical away with it: a finger
   landing on the size chips and dragging UP is asking to scroll the page, and
   the browser had been told it may only pan that element horizontally, so
   nothing moved. The chips are two lines tall and span the card, so landing on
   them by accident is the common case rather than the edge one — it read as the
   list jamming at random.

   `pan-x pan-y` hands the axis choice back to the browser, which is a decision
   it is already good at: sideways scrolls the strip, up and down chains to the
   body behind it. The app's swipe-between-tabs gesture stays suppressed over
   these strips either way, because the browser claims the horizontal axis
   first — which is what was wanted here.

   The second declaration is for the same symptom arriving by a different route.
   `overflow-x:auto` with nothing said about the other axis makes overflow-y
   compute to `auto` as well, so each of these strips is a scrollport that can
   never scroll vertically — enough, on a touch screen, for a gesture starting
   inside it to be captured and its vertical travel dropped. That is why the
   size chart drags badly too, even though no touch-action rule has ever applied
   to it. `clip` keeps the sideways scrolling without being a scrollport at all.
   Browsers that do not know the keyword drop the declaration and behave exactly
   as they do today, so it costs nothing where it is not understood. */
.mk-screen .aw-scroll[style*="overflow-x"] {
  touch-action: pan-x pan-y;
  overflow-y: clip;
}

/* The mark, held on the brand navy until the app has something to draw.
   Removed with the rest of #app on the first render, so it needs no exit. */
.mk-splash {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: var(--aw-navy);
  animation: awFade .3s ease both;
}
/* The mark fills the rounded box edge to edge rather than sitting on a tile.
   aquawise-mark-blue.png is opaque RGB — a square of brand blue with the fish on
   it, no transparency — so any tile behind it shows as a mismatched ring of
   corner. Rounding the container and letting the image cover it means the only
   corner on screen is the one we drew. */
.mk-splashmark {
  width: 96px; height: 96px;
  border-radius: 26px;
  overflow: hidden;
  display: block;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 16px 40px rgba(5, 20, 45, .45);
}
.mk-splashmark img { width: 100%; height: 100%; object-fit: cover; display: block }
.mk-splashword {
  font-size: 19px; font-weight: 750; letter-spacing: .04em;
  color: rgba(255, 255, 255, .9);
}

/* The mark beside a screen title, nudged up three pixels.
   Measured, it is already dead centre: a 22px Thai title has a 33px line box and
   31px of ink, and the mark's mid-line sits exactly on both. But that height
   comes from the upper vowel marks — ู้ ื้ — which are thin strokes, while the
   mass the eye reads as the text sits lower. Centred on the box, the mark reads
   as sitting low against the letters. Optical, so it is a fixed nudge rather
   than a different alignment. Only in headers; the detail sheet's mark has its
   own row and needs none of this. */
.mk-head .mk-stamp { position: relative; top: -3px }

/* ---- first-run tours --------------------------------------------------- */

/* THE CUT-OUT. The box itself is transparent and sits exactly over the control
   being described; the shadow is what dims — spread so far that it covers any
   screen, so everything except the control goes dark and the control keeps its
   own colours. One element, no masks, no second copy of the thing to keep in
   sync with the real one.

   The transition is on the box, so moving to the next step slides the hole
   across the screen rather than cutting: the farmer's eye follows it to the
   next control instead of having to find it again. */
.mk-tourhole {
  box-shadow: 0 0 0 9999px rgba(5, 20, 45, .74);
  outline: 2px solid rgba(255, 255, 255, .92);
  outline-offset: 2px;
  transition: top .28s cubic-bezier(.22,.8,.25,1), left .28s cubic-bezier(.22,.8,.25,1),
              width .28s cubic-bezier(.22,.8,.25,1), height .28s cubic-bezier(.22,.8,.25,1);
  pointer-events: none;
}

/* The card moves between steps too, and above/below is a swap of which edge is
   pinned — so it is left to fade rather than slide, which would read as the
   card travelling through the hole. */
.mk-tourcard { max-height: calc(100dvh - 40px); overflow-y: auto }

.leaflet-container { font-family: inherit; background: #eaf0f7 }
.leaflet-div-icon { background: transparent !important; border: 0 !important }
.leaflet-control-attribution { display: none }

/* The design's motion is decorative throughout — every animation here is an
   entrance or an emphasis, so honouring the preference costs nothing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---- Thai line breaking ------------------------------------------------ */

/* Thai has no spaces between words, so the browser breaks lines with a
   dictionary — which lang="th" on <html> enables. It gets the boundaries right
   but not the aesthetics: it will happily strand a single word on the last line
   and split a tight pair like กุ้งเล็ก or ใกล้คุณ across the break.

   text-wrap:pretty tells it to avoid those orphans. Applied to the running copy
   that actually wraps; the design already sets it on the headings it cared
   about, and this covers the rest rather than leaving each new string to be
   spotted by eye. */
.mk-screen p,
.mk-screen [style*="line-height:1.5"],
.mk-screen [style*="line-height:1.55"],
.mk-screen [style*="line-height:1.6"] {
  text-wrap: pretty;
}