/* ============================================================================
   council_mobile.css — the phone/tablet layer for the four public,
   council-branded pages: /find, /cost, /ask-new, /ask-popups.

   WHY A SHARED FILE. The council chrome (.utility/.head/.wordmark/.nav/
   .goldline/.banner/.crumbs/.foot) is byte-identical copy-paste in all four
   pages, and so are the shared controls (.panel/.btn/.row/.hint/.egs). Fixing
   them in one place is the only way the four cannot drift apart on a phone the
   way they were already drifting on desktop.

   HOW IT LOADS. Each page links this file AFTER its own <style> block, so at
   equal specificity these rules win on source order. Nothing here is scoped to
   a page, and nothing here applies above 900px — the desktop layouts are
   untouched.

   BREAKPOINTS.  900  tablet / small laptop (the pages already collapse their
                      grids here; this adds the chrome)
                 760  large phone landscape, small tablet portrait
                 560  phone portrait (390-430 CSS px is the target)
                 380  small phone

   ONE RULE THAT IS NOT NEGOTIABLE: form controls never go below 16px on a
   touch screen. iOS Safari zooms the viewport on focus for anything smaller,
   which throws the user out of the layout mid-sentence.
   ========================================================================= */

/* ---- 900: tablet ---------------------------------------------------------
   Chrome starts tightening before the phone breakpoints so the transition
   from desktop is gradual rather than a jump. */
@media (max-width: 900px) {
  .head    { padding: 12px 20px; gap: 14px; }
  .banner  { padding: 20px 20px; }
  .banner h1 { font-size: 23px; }
  main     { padding: 26px 20px 56px; }
  .foot    { padding: 22px 20px; }
  .nav     { gap: 18px; }
}

/* ---- 760: the council header stops being a row --------------------------
   Wordmark and nav side by side stop fitting once the nav wraps to two lines
   — it reads as a broken header rather than a wrapped one. Stack them, centre
   both, and give the nav its own rule above it so the split is deliberate. */
@media (max-width: 760px) {
  .utility { height: 22px; }

  .head {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 16px 0;
  }
  .wordmark { padding-bottom: 12px; }

  .nav {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid var(--line);
  }
  /* 44px minimum touch target, and enough horizontal padding that adjacent
     links cannot be hit by mistake. */
  .nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    font-size: 12.5px;
  }
  .nav a.on { box-shadow: inset 0 -3px 0 var(--gold); }

  .banner   { padding: 16px 16px; }
  .banner-in { flex-direction: column; gap: 8px; }
  .banner h1 { font-size: 21px; line-height: 1.3; }
  /* The breadcrumb is right-aligned against a column it no longer sits beside. */
  .crumbs   { text-align: left; font-size: 11px; }

  main  { padding: 22px 16px 48px; }
  .foot { padding: 20px 16px; font-size: 13px; }

  h2 { font-size: 19px; }
  .lead { font-size: 16.5px; }

  .panel { padding: 16px 15px; margin-bottom: 16px; }

  /* Actions go full width and stack. A 26px-padded inline button next to
     another one is a coin-flip target at arm's length. */
  .row { gap: 10px; margin-top: 16px; }
  .row .btn,
  .row > button.btn { flex: 1 1 100%; min-height: 48px; }
  .btn { font-size: 16px; padding: 13px 20px; }
  .btn.sm { font-size: 15px; padding: 11px 16px; min-height: 44px; }

  /* Tap targets in the example lists. */
  .egs button { padding: 11px 0; min-height: 44px; }
}

/* ---- 660: the nav stops being a row and becomes a list -------------------
   Three uppercase labels need one unbroken line or none. On a 390px phone they
   need more width than the row has, so the row wraps: "Search council information"
   alone on the first line, the other two centred beneath it, and the gold
   current-page bar underlining a line of its own. That reads as a header that
   broke, not as one that adapted.

   One full-width row each. Nothing wraps at any width below the breakpoint, the
   labels stay whole — "Make an FOI request" is the page residents come here to
   find, so it must never be truncated — and each row is a 48px target instead
   of a 26px one. The current page keeps its gold marker, moved to the left
   edge, because an underline across a full-width row reads as the divider
   under it.

   The breakpoint sits at 660 rather than at the exact crossover (just below
   610px with one browser's fonts) deliberately: these pages name
   'Open Sans' and Raleway but ship no @font-face and no font link, so the
   labels are laid out in whatever the device actually has — Open Sans where it
   is installed, Helvetica or Arial where it is not — and those metrics differ.
   The 50px is cover for that. Stacking a row that would just have fitted costs
   a little height on a 620px tablet; guessing the other way puts the ragged
   two-line header back on real phones, which is the fault this exists to fix. */
@media (max-width: 660px) {
  .nav { display: block; }
  .nav a {
    min-height: 48px;
    padding: 0 0 0 11px;
    font-size: 12.5px;
    border-bottom: 1px solid #ececf0;
  }
  .nav a:last-child { border-bottom: none; }
  .nav a.on { box-shadow: inset 3px 0 0 var(--gold); }
}

/* ---- 560: phone portrait ------------------------------------------------- */
@media (max-width: 560px) {
  .utility { height: 14px; }
  .wordmark .l2 { font-size: 17px; letter-spacing: .16em; }
  .wordmark .l3 { letter-spacing: .34em; }

  /* Two lines of uppercase breadcrumb above the fold cost more than they
     return on a 390px screen — the page has a title and a back path already. */
  .crumbs { display: none; }
  .banner h1 { font-size: 20px; }

  main  { padding: 18px 14px 44px; }
  .panel { padding: 14px 13px; }
  h2 { font-size: 18px; }
  h3 { font-size: 15.5px; }
  body { font-size: 15.5px; }
  /* …but never the controls. See the note at the top of this file. */
  textarea, input[type=text], input[type=email], input[type=tel], select { font-size: 16px; }
}

@media (max-width: 380px) {
  .wordmark .l2 { font-size: 15.5px; }
  /* Stacked by now, so symmetrical padding would only shift the labels
     off the left edge — keep the gutter the gold marker sits in. */
  .nav a { padding: 0 0 0 9px; font-size: 12px; }
  main { padding: 16px 12px 40px; }
  .panel { padding: 12px 11px; }
}

/* ---- /cost: the one real horizontal-overflow source ----------------------
   .method table carries min-width:460px, which is wider than a 390px viewport
   and pushes the whole document sideways. Let the table scroll inside its own
   container instead of taking the page with it. */
@media (max-width: 760px) {
  .method { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .method table { font-size: 13px; }
}

/* ---- citations inside an answer ----------------------------------------
   Shared by /find and by step 2 of both request pages: the same renderAnswer()
   is copied into all three, so the chip is the same element everywhere.

   On a laptop a chip carries its number AND a 15-character document name, and
   costs maybe a tenth of the line. On a 390px screen the same chips take
   about a third of a ~300px column — three times in
   four sentences, and the prose is chopped into strips that cannot be read at
   a glance. The phone keeps the NUMBER only: it is the key to the source list
   immediately below, and the full document name is still in the list, in the
   link's title and in its aria-label, so nothing is lost, only deferred.

   The tap target is grown with a pseudo-element rather than with padding —
   padding on a vertical-align:super inline-block pushes the line box around
   and would open gaps between the lines it sits on. */
@media (max-width: 560px) {
  /* A bare numeral wants to sit tight against its word and its full stop. The
     desktop chip's 7px sides and 3px/2px margins were carrying a 15-character
     name; around one digit the same values read as a gap, and the sentence
     looks broken at every reference. */
  a.cite { position: relative; font-size: 11.5px; padding: 2px 5px; margin: 0 0 0 1px; }
  a.cite .cnm { display: none; }
  a.cite .cnum { margin-right: 0; }
  a.cite::after { content: ''; position: absolute; inset: -11px -5px; }
}

/* ---- /find: the answer panel -------------------------------------------
   #answerPanel is a .panel, but it sets its own padding under an ID, so the
   .panel rules above cannot reach it: on a 390px phone it kept the desktop's
   26px sides while every other box had come down to 13px, and the answer read
   in a 300px column inside a 362px one.

   THE THREE VALUES BELOW ARE ONE VALUE. .asked and .prog are full-bleed bars
   inside the panel, and they achieve that by cancelling its padding with
   negative margins. Change the panel's 15px here and both bars must change
   with it in the same edit, or the grey bar and the progress bar hang off the
   side of the box they sit in.

   Every selector here is anchored on #answerPanel on purpose. .prog and .asked
   are NOT unique to /find — the request pages carry their own .prog with its
   own margins, so an unscoped rule here would push that one 2px outside its
   panel on both sides. #answerPanel exists on /find alone. */
@media (max-width: 560px) {
  #answerPanel { padding: 18px 15px; }
  #answerPanel .asked { margin: -18px -15px 0; padding: 12px 15px; }
  #answerPanel .prog  { margin: 0 -15px; padding: 14px 15px; }
}

/* ---- /find: the source list --------------------------------------------- */
@media (max-width: 760px) {
  /* The disclosure caret is floated right, so it clears the two-line title and
     the meta line under it and lands alone at the bottom-right corner of the
     summary — it reads as a stray mark rather than as this row's control. Pin
     it beside the title instead. */
  details.srcbody > summary { position: relative; padding-right: 34px; }
  details.srcbody > summary::after { position: absolute; float: none; right: 12px; top: 11px; }
}

@media (max-width: 560px) {
  /* The smallest greys on the page. At 11.5-13.5px in #8a8a99 (3.4:1 on white)
     these are the first thing to fail on a phone held at arm's length outdoors,
     and the caveat is the sentence that tells the reader the answer is written
     by AI — it has to survive that. Sizes up a little, greys down to 4.7:1. */
  .aicaveat { font-size: 13px; color: #6f6f7d; }
  .srcinner .ssum { font-size: 15px; }
  .srcitem .meta { font-size: 12px; color: #6f6f7d; }
}