/* ===========================================================================
   Τιμόμετρο - the phone

   Greek grocery shoppers are on phones, and this site was laid out on a
   desktop. Everything here is about a 375px-wide screen held in one hand:
   a header whose links are all reachable, a comparison table whose price
   column is on the screen, and controls a thumb can hit.

   Loaded after app.css, so this file only ever overrides. It invents no
   colours: every one is a :root token or a mix of one, and the sizes are the
   ones app.css already uses. The one number of its own is 44px, the touch
   target floor every platform's guidance agrees on.
   =========================================================================== */


/* ---------------------------------------------------------------- header

   The nav opens and closes with a checkbox, not a script. A menu that needs
   JavaScript to open is a menu that fails when the JavaScript does, and on a
   phone this menu is the only way to six of the site's seven destinations.

   At desktop width none of it exists: the toggle and the scrim are hidden and
   .nav-links is display:contents, so the header stays exactly the flex row it
   has always been. The order values restore the one thing display:contents
   would otherwise change - the basket link sat between the links and the
   donate/language buttons, and it still does. */
.nav-toggle {
  /* Off-screen but still focusable and still announced: a keyboard or screen
     reader user operates the menu through the checkbox itself, which reports
     its own open/closed state without any script to keep aria-expanded true. */
  position: absolute; top: 0; left: 0; width: 1px; height: 1px;
  opacity: 0; margin: 0; pointer-events: none;
}
.nav-btn, .nav-scrim { display: none; }
.nav-links { display: contents; }
.topnav .basket-link { order: 2; }
.topnav .donate { order: 3; }
.topnav .lang { order: 4; }


/* The nav is 675px of Greek on its own, so it stops fitting beside a brand
   and a search field long before a phone: at 600px app.css was already
   scrolling it inside itself and losing the basket and the language switch
   off the right-hand edge. The menu therefore starts at tablet width, not at
   phone width, which is also where an iPad in portrait sits. */
@media (max-width: 780px) {
  /* Two rows, and each one earns its place. Row one is who you are, where
     your basket is and how to reach the rest of the site; row two is the
     search field, which used to share row one with the brand and showed
     about eight characters of a Greek placeholder. */
  .topbar { flex-wrap: wrap; gap: 8px 10px; padding: 8px 14px; }
  .brand { order: 0; margin-right: auto; }
  .topnav { order: 1; gap: 8px; overflow: visible; padding-bottom: 0; }
  .nav-btn { order: 2; }
  .search { order: 3; flex: 1 0 100%; }

  /* The basket is what people came to fill, so it never goes in a menu and it
     never scrolls off the side. */
  .basket-link {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 0 12px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface-2);
    line-height: 1;
  }
  .basket-link .pill { font-size: 13px; }

  .nav-btn {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; flex: 0 0 44px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface); color: var(--ink);
  }
  .nav-btn svg { width: 20px; height: 20px; display: block; }
  .nav-btn .x { display: none; }
  .nav-toggle:checked ~ .nav-btn {
    background: var(--brand-tint); border-color: var(--brand);
  }
  .nav-toggle:checked ~ .nav-btn .bars { display: none; }
  .nav-toggle:checked ~ .nav-btn .x { display: block; }
  .nav-toggle:focus-visible ~ .nav-btn { outline: 2px solid var(--brand); outline-offset: 2px; }

  /* The panel hangs off the bottom of the bar rather than pushing the page
     down, so opening the menu never moves the thing you were reading. */
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    flex-direction: column; align-items: stretch;
    padding: 4px 14px 10px; background: var(--surface);
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    max-height: calc(100dvh - 100%); overflow-y: auto;
  }
  .nav-toggle:checked ~ .topnav .nav-links { display: flex; }
  .nav-links > a {
    display: flex; align-items: center; min-height: 44px;
    padding: 0 2px; font-size: 16px; font-weight: 600;
    border-bottom: 1px solid var(--line);
  }
  .nav-links > a:last-child { border-bottom: 0; }
  .nav-links > .donate {
    border-radius: 0; border-left: 0; border-right: 0; border-top: 0;
    font-size: 16px; color: var(--muted);
  }

  /* The language switch stays in the bar, between the basket and the menu
     button. Two letters cost less room than the reader who needs them costs
     us when they cannot find them. */
  .topnav .lang {
    order: 3; min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
  }

  /* Tapping the page closes the menu. It starts under the bar so the header
     itself is never dimmed, and it is a label rather than a script. */
  .nav-toggle:checked ~ .nav-scrim {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    height: 100dvh; z-index: 30;
    background: color-mix(in srgb, var(--ink) 26%, transparent);
  }
}


@media (max-width: 560px) {
  /* On a phone the brand, the basket and the button do not all fit with
     words on them. The trolley and the count are enough to see; the words
     stay in the markup for anyone who cannot see either. */
  .basket-link { padding: 0 10px; font-size: 17px; }
  .basket-word {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }

  /* The standing disclaimer is a legal commitment, so it is never shortened
     and never folded behind a tap. It is only set a size smaller, so it is
     six lines above the page rather than eight, and its link is big enough
     to hit. */
  .disclaimer { font-size: 12px; line-height: 1.38; }
  .disclaimer div { padding: 7px 14px; gap: 7px; }
  .disclaimer a { display: inline-block; padding: 3px 0; }


  /* ------------------------------------------------------------ the shelf

     A price comparison whose price column is off the right-hand edge is not a
     price comparison. At 375px the widest the table can honestly be is 347px
     and it wants 728, so the row stops being a row and becomes a card: name
     across the top, then the chain and the price on one line, then the unit
     price - the column the shelf is sorted by - and the add button.

     Nothing is dropped except the "how many chains stock this" count, which
     app.css already hides below 640px and which is a bare number with no
     meaning once its column heading is gone. Sorting is not lost with the
     headings: the "Ταξινόμηση" pills above the table drive the same code.

     The cheapest stays obvious the way it is obvious on a desktop - the green
     tint and the green price - with a green border added, because a tint that
     bleeds to the edge of a full-width row reads as a card, not as a pick. */
  .table-wrap:has(> .shelf) { overflow: visible; }
  .table-wrap > .shelf { min-width: 0; width: 100%; }
  .shelf { border: 0; background: none; box-shadow: none; }
  .shelf thead { display: none; }
  .shelf, .shelf tbody { display: block; }

  .shelf tr {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name  name"
      "chain chain price"
      "unit  unit  add";
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 8px; padding: 11px 13px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
  }
  .shelf tr.best { border-color: var(--good); background: var(--good-bg); }
  .shelf td { display: block; border: 0; padding: 0; font-size: 14px; }

  .shelf .c-thumb { grid-area: thumb; padding: 0 !important; width: auto; }
  .shelf .c-name  { grid-area: name; font-weight: 600; line-height: 1.3; }
  .shelf .c-name a { color: var(--ink); }
  .shelf .c-chain { grid-area: chain; }
  .shelf .c-price { grid-area: price; text-align: right; font-size: 19px; }
  .shelf .c-unit  { grid-area: unit; color: var(--muted); font-size: 13px; text-align: left; }
  .shelf .c-chains { display: none; }
  .shelf .c-add   { grid-area: add; text-align: right; }

  /* The date sits under the price rather than beside it; .num is nowrap and a
     Greek date beside a price pushed the card 40px wider than the screen. */
  .shelf .c-price .stale { font-size: 11px; white-space: normal; }
  .shelf .c-add .mini { min-height: 40px; padding: 0 15px 0 12px; font-size: 13px; }
  .shelf .thumb-sm { width: 44px; height: 44px; }


  /* ------------------------------------------------ the how-much ranking

     Six columns: rank, chain, total, what you would buy, per kilo, and the
     gap to the cheapest. On a phone the fourth wrapped a product name into
     eight lines and the last two were off the right-hand edge. A card: who
     and how much on the first line, what you would get on the second, the
     per-kilo figure and the gap on the third, each with the label its
     column heading used to carry. */
  .table-wrap:has(> .rank) { overflow: visible; }
  .table-wrap > .rank { min-width: 0; width: 100%; }
  .rank { border: 0; background: none; box-shadow: none; }
  .rank thead { display: none; }
  .rank, .rank tbody { display: block; }
  .rank tr {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    grid-template-areas:
      "rank chain total"
      "rank pick  pick"
      "rank per   diff";
    align-items: center;
    gap: 4px 10px;
    margin-bottom: 8px; padding: 11px 13px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
  }
  .rank tr.best { border-color: var(--good); background: var(--good-bg); }
  .rank tr.best > td:first-child { box-shadow: none; }
  .rank td { display: block; border: 0; padding: 0; font-size: 14px; }
  .rank .c-rank { grid-area: rank; font-weight: 800; color: var(--muted); align-self: start; }
  .rank tr.best .c-rank { color: var(--good-ink); }
  .rank .c-chain { grid-area: chain; font-weight: 600; }
  .rank .c-total { grid-area: total; text-align: right; font-size: 19px; }
  .rank .c-pick { grid-area: pick; line-height: 1.3; }
  .rank .c-pick .small { display: inline; margin-left: 4px; }
  .rank .c-per { grid-area: per; text-align: left; color: var(--muted); font-size: 13px; }
  /* `td.c-diff`, because app.css hides every table's sixth column below
     640px — written for the shelf's "how many chains" count, and the gap to
     the cheapest is this table's sixth column. */
  .rank td.c-diff { display: block; grid-area: diff; text-align: right; font-size: 13px; }
  /* `td .c-label`: seo-pages.css hides the labels for the desktop and loads
     after this file, so the phone's rule has to outrank it, not follow it. */
  .rank td .c-label { display: inline; font-size: 12px; color: var(--muted); margin-right: 4px; }


  /* ------------------------------------------------ every other table

     The comparison tables on the landing pages and the store pages are not
     mine to restructure, so they keep their sideways scroller - but app.css
     was forcing them 460px wide whether they needed it or not. Let them
     shrink: most of them then fit, and the ones that do not at least keep
     their first column on screen while the numbers slide under it. */
  .table-wrap > .table:not(.shelf):not(.rank) {
    min-width: 0;
    /* app.css clips the table to round its corners, and an overflow:hidden
       ancestor is exactly what stops position:sticky from sticking. The wrap
       is doing the rounding on a phone anyway. */
    overflow: visible;
  }
  .table:not(.shelf):not(.rank) th, .table:not(.shelf):not(.rank) td { padding: 9px 9px; font-size: 13px; }
  /* The sticky column needs something opaque to slide the numbers under. */
  .table:not(.shelf):not(.rank) tr { background: var(--surface); }
  .table:not(.shelf):not(.rank) tr.best { background: var(--good-bg); }
  .table:not(.shelf):not(.rank) th:first-child, .table:not(.shelf):not(.rank) td:first-child {
    position: sticky; left: 0; background: inherit;
  }


  /* ------------------------------------------------------ touch targets

     Everything below was sized for a cursor, which needs a few pixels, rather
     than a thumb, which needs about 44 of them. */
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .toggle { min-height: 40px; padding: 7px 15px; }
  .chip { min-height: 40px; display: inline-flex; align-items: center; }
  .chip.static { min-height: 0; }
  .mini { min-height: 40px; }
  .clear-btn { min-height: 40px; }
  .ac-add { width: 40px; height: 40px; }
  .crumbs a { display: inline-block; padding: 4px 0; }


  /* The swap box. Its summary is the row you tap to see the alternatives and
     its "swap now" pill is the one you tap to accept one; both were under
     30px tall and sitting next to each other. */
  .swapbox summary { min-height: 44px; padding: 6px 4px; }
  .swap-now { min-height: 38px; padding: 0 14px; font-size: 13px; }
  .swap-btn { min-height: 44px; }
  .swap-opt-name { font-size: 14px; }

  /* Footer links were a block of 20px-tall taps. app.css styles .site-footer,
     which nothing carried until now; this repeats the rule on the element so
     it survives whatever the design system does with that class. */
  footer nav { gap: 2px 16px; }
  footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
}


/* Below tablet width the line is stacked. This was a phone rule at 560px,
   and a tablet in between got the desktop columns squeezed into 600px: a
   26ch name, a figure, a cross and a track that had 150px left. */
@media (max-width: 780px) {
  /* ------------------------------------------------------- the basket line

     Two rows and 64px where there were three and 120. The name runs across
     the top; under it the track, with the figure at its end and the remove
     cross in a column of its own, so the thumb at full stretch is never under
     the cross. The figure keeps its box, because the box is what
     says it can be tapped and changed. The lines share one card with a
     hairline between them, which is what a list is, rather than seventeen
     cards with a gap after each. A basket of fifteen is a screen and a half
     before the answer instead of three. */
  .basket-items:has(> .bitem) {
    gap: 0; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
  }
  .bitem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px 40px;
    grid-template-areas:
      "name  name rm"
      "range qty  rm"
      "swap  swap swap";
    align-items: center;
    gap: 0 8px;
    padding: 8px 6px 6px 12px;
    border: 0; border-radius: 0;
  }
  .bitem + .bitem { border-top: 1px solid var(--line); }
  .bitem.pinned { border-left: 3px solid var(--brand); padding-left: 9px; }
  /* The picture sits in the name's cell on the first row, so a pinned line's
     track is the same length as every other line's. */
  .bitem .bthumb { grid-area: name; justify-self: start; align-self: start; }
  .bitem.pinned .name { padding-left: 46px; min-height: 36px; }
  /* Two lines of name, then an ellipsis. One line lost «Ελαιόλαδο» to «Ε»
     when the control sat beside it; with the control underneath there is
     room, and a second line costs less than a name that says nothing. */
  .bitem .name {
    grid-area: name; white-space: normal; font-size: 15px; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .bitem .qty { min-height: 32px; padding: 2px 9px; align-self: center; }
  /* 16px, because iOS zooms the page into any smaller field it focuses. */
  .bitem .qty-num { font-size: 16px; }
  .bitem .rm {
    grid-area: rm; display: inline-grid; place-items: center;
    width: 40px; height: 40px; min-width: 0; border-radius: 50%; margin: 0;
  }
  /* `input.qty-range`, to outrank the 78px that app.css gives every input on
     a line; on a desktop the flex basis overrides that, in a grid nothing did. */
  .bitem input.qty-range { grid-area: range; margin: 0; height: 28px; min-height: 28px; width: 100%; }
  .qty-range::-webkit-slider-runnable-track { height: 4px; }
  .qty-range::-moz-range-track { height: 4px; }
  .qty-range::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; }
  .qty-range::-moz-range-thumb { width: 22px; height: 22px; }
  .bitem .swapbox-slot { grid-area: swap; }

  /* The one button that matters is as wide as a thumb can reach, and the
     link to the ready-made lists stands under it at the same width rather
     than beside it at a third of it. */
  .toolbar { gap: 8px; }
  .toolbar .btn { flex: 1 1 100%; }
}

/* Between a phone and a tablet the ranking is still a table, and app.css's
   rule for the shelf's sixth column would take its last column away. */
@media (max-width: 640px) {
  .rank th:nth-child(6), .rank td:nth-child(6) { display: table-cell; }
}


/* A 375px screen is the common phone, but Greek labels are long enough that
   the smaller ones matter too. Below 400px the shelf card gives the product
   name the width back rather than squeezing it to three words a line. */
@media (max-width: 399px) {
  .shelf tr {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 5px 8px; padding: 10px 11px;
  }
  .shelf .thumb-sm { width: 36px; height: 36px; }
  .shelf .c-price { font-size: 18px; }
}

/* The design system marks the cheapest row with an edge on its first cell.
   Inside a card that already has a green border, that edge reads as a second
   frame, so it goes. */
.shelf tr.best > td:first-child { box-shadow: none; }


/* ---------------------------------------------------------- the answer

   The result card's head is seven things in one flex row: rank, logo, chain,
   how many lines it wins, the total, a link to the shop, and the caret. Below
   620px they wrapped in source order, which broke «AB Βασιλόπουλος» over two
   lines beside a bare «6/17» and left the total, the caret and the button
   loose on a third row, 184px of header before a single price.

   Three rows instead, each with a job: who this is and what it costs, why the
   total reads the way it does, then the one thing worth tapping. It starts at
   tablet width because that row needs about 1030px to hold its seven things
   without wrapping, and «34,57 €» broke across two lines long before a phone.
   */
@media (max-width: 780px) {
  .rank-head {
    display: grid;
    /* Fixed, not auto: the rank and the logo are the same width on every card,
       so the names line up down the list instead of stepping in and out. */
    grid-template-columns: 18px 30px minmax(0, 1fr) auto 12px;
    grid-template-areas:
      "pos  logo who  cost caret"
      "loy  loy  note note note"
      "loy  loy  wins shop shop";
    align-items: center;
    gap: 7px;
    padding: 12px;
  }
  .rank-head .pos { grid-area: pos; min-width: 0; text-align: center; }
  .rank-head .chain-logo { grid-area: logo; width: 30px; height: 30px; }
  .rank-head .who { grid-area: who; min-width: 0; font-size: var(--t-sm); }
  /* The scheme logos take the rank's column for both of the rows under it:
     two abreast and two deep, which is every chain we carry, in the space
     they would otherwise have made taller. */
  .rank-head .loy-row { grid-area: loy; margin: 0; align-self: center; }
  .rank-head .note { grid-area: note; margin: 0; }
  .rank-head .cost { grid-area: cost; justify-self: end; }
  .rank-head::after { grid-area: caret; justify-self: end; }
  .rank-head .shop-btn { grid-area: shop; justify-self: end; margin: 0; }

  /* The caption comes back with the second row: «6/17» in a green pill says
     nothing on its own, and what it meant was in a tooltip. Reversed, so it
     reads «φθηνότερο σε 6/17», which is the order Greek puts those words in. */
  .rank-head .wins-wrap {
    grid-area: wins; justify-self: start; min-width: 0;
    flex-direction: row-reverse; align-items: center; gap: 6px;
  }
  .rank-head .wins-cap {
    display: block; font-size: var(--t-xs);
    text-transform: none; letter-spacing: 0;
  }
}


@media (max-width: 560px) {
  /* ------------------------------------------ what the shop would sell you

     Five table columns inside a card 347px wide that clips what it cannot
     fit: the line total ended 44px past the right edge and the «!» flag was
     never on screen at all. So the row becomes a card - what you asked for
     and what they matched it to, then the arithmetic on a line of its own. */
  .rank-body table, .rank-body tbody, .rank-body tr, .rank-body td { display: block; }
  .rank-body tr {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    grid-template-areas:
      "thumb name  name  flag"
      "thumb each  total total";
    align-items: center;
    gap: 3px 10px;
    padding: 10px 14px;
  }
  /* The rule between lines moves from the cells to the row: a cell border
     under a two-row grid would draw itself halfway up the card. */
  .rank-body tr + tr { border-top: 1px solid var(--line); }
  .rank-body td { padding: 0; border: 0; font-size: var(--t-sm); }
  .rank-body .thumb-cell { grid-area: thumb; width: auto; align-self: start; }
  .rank-body .thumb-sm { width: 40px; height: 40px; }
  .rank-body .l-name { grid-area: name; line-height: 1.35; }
  .rank-body .l-each { grid-area: each; text-align: left; color: var(--muted); }
  .rank-body .l-total { grid-area: total; font-size: var(--t-md); }
  /* The flag keeps a column of its own, empty on almost every line. It costs
     the name 10px of width and nothing else, and it stays where the eye
     expects a warning: at the top corner of the thing being warned about. */
  .rank-body .l-flag { grid-area: flag; align-self: start; }

  /* A stop in a two-shop plan: the name is a heading, and under it the
     subtotal and the way out sit at opposite ends of one line. */
  .stop-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name name" "total shop";
    row-gap: 8px;
  }
  .stop-name { grid-area: name; }
  .stop-total { grid-area: total; }
  .stop-head .shop-btn { grid-area: shop; justify-self: end; }

  /* Its lines take the same shape as the ones above, for the same reason: in
     a column 120px wide a product name is four lines tall and the two numbers
     it belongs to sit level with the first of them. */
  .stop table, .stop tbody, .stop tr, .stop td { display: block; }
  .stop tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name name"
      "each total";
    align-items: center;
    gap: 2px 10px;
    padding: 8px 0;
  }
  .stop tr + tr { border-top: 1px solid var(--line); }
  .stop td { padding: 0; border: 0; font-size: var(--t-sm); }
  .stop .l-name { grid-area: name; }
  .stop .l-each { grid-area: each; text-align: left; color: var(--muted); padding-left: 0; }
  .stop .l-total { grid-area: total; }
}