/* mobile-media: the new mobile dashboard, this zone's half (owner's design, 20 Oct 2026).
   PHONE ONLY: every rule sits inside @media (max-width:767px),(pointer:coarse) and (max-height:500px).

   3D TOURS (zone "walkthrough"), shot 13. The library's empty state is a white card (art, "No tours yet", a grey line, a
   full-width green "Create tour") with a separate full-width OUTLINED "Import backup" under it. The card, its copy and the
   Create tour clone are set up by js/dashboard-redesigner.js, which marks the library `data-m-bare` while it is empty
   and dresses each tour row as a card (title, state pill, rooms and photos, a foot with the way in).
   With tours present there is no outer wrapper card either (L6): the search, the tour cards, the count and Import backup
   all stand on the page. (Redesigner, in a shadow root, has its sheet in that same script.) */
@media (max-width:767px),(pointer:coarse) and (max-height:500px){
  /* the title alone, then the card; a quiet gap above */
  /* Owner ruling, 26 Oct 2026 ("most of my text shld be smaller fonts", "i want to go cosnistent"): this zone reads the phone scale
     tokens at the end of this file instead of its own numbers. A short button gets its 44px thumb height from padding around ONE line
     of text (line-height 1.2, block padding (tap - 1.2em) / 2) rather than from a min-height, so a two-word label that ever has to
     wrap makes the button taller instead of squashing it; that is also how the walk tells a one-line label from a broken one. */
  html body #view .tour-app .tour-page-head{display:flex;align-items:center;justify-content:space-between;gap:var(--m-gap);padding:0 0 var(--m-gap-l)!important;margin:0}
  html body #view .tour-app .tour-page-head h1{margin:0;font-size:var(--m-h1)!important;font-weight:700!important;letter-spacing:-.02em;line-height:1.15}
  html body #view .tour-app .tour-page-head>.tour-primary{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--m-gap-s);width:auto;min-height:0!important;margin:0!important;
    padding:calc((var(--m-tap) - 1.2em) / 2) var(--m-pad)!important;box-sizing:border-box;border-radius:var(--m-radius);background:var(--sig)!important;color:var(--on-sig)!important;
    font-size:var(--m-body)!important;font-weight:600!important;line-height:1.2;white-space:nowrap}
  html body #view .tour-app .tour-page-head>.tour-primary svg{flex:none;width:16px;height:16px}
  html body #view .tour-app:has(.tour-library-card[data-m-bare]) .tour-page-head>.tour-primary{display:none!important}

  /* The library, empty or not: no outer card (L6). What it holds stands on the page, in this order: the search, the
     tours (or the empty card), the count, then Import backup as its own outlined button underneath (L4).
     The bar dissolves so its two controls take their places in the card's own column. */
  html body #view .tour-app .tour-library-card{display:flex!important;flex-direction:column;gap:var(--m-gap);min-height:0!important;margin:0!important;padding:0!important;
    border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
  /* Found 26 Oct 2026: .tour-app is a fixed-height column, so this card was squeezed to 391px and every child shrank with it. The search box,
     set to 58px, was drawn 23px tall (the "card gripping the search bar" the owner saw), and the tour card was squeezed too. Nothing in
     the library may shrink: the page grows and the page scrolls. */
  html body #view .tour-app .tour-library-card{flex:none!important;height:auto!important}
  html body #view .tour-app .tour-library-card>*,html body #view .tour-app .tour-library-card .tour-library-bar>*{flex:none}
  html body #view .tour-app .tour-library-card .tour-library-bar{display:contents!important}
  html body #view .tour-app .tour-library-card .tour-table{order:1;margin:0!important;padding:0!important;box-shadow:none!important}
  html body #view .tour-app .tour-library-card .tour-table-head{display:none!important}
  /* Owner, 26 Oct 2026, on a phone: "increase the serach bar find a property tour, the card around this searhc bar,
     rn the search bar card is gripping around it so tightly". It was 48px on 14px of side padding, which left a 20px
     glyph and 16px type almost touching the box. The box grows rather than the type, so the field still reads as one
     tap target and the 16px input keeps iOS from zooming the page on focus. */
  /* Same day, scale ruling: the box keeps its own border and its air (the owner's intent above), now measured on the scale: a thumb
     target (--m-tap) plus one small gap tall, 14px of type in it. The 16px that stopped iOS zooming on focus is gone with the rest of
     the type: his ruling is 14 for inputs. */
  html body #view .tour-app .tour-library-card .tour-library-bar>label:first-child{order:0;display:flex;align-items:center;width:100%;min-width:0;height:calc(var(--m-tap) + var(--m-gap-s));margin:0;padding:0 var(--m-pad);gap:var(--m-gap);box-sizing:border-box;
    border:1px solid var(--line-2)!important;border-radius:var(--m-radius);background:var(--card)}
  html body #view .tour-app .tour-library-card .tour-library-bar>label:first-child svg{flex:none;width:18px;height:18px;color:var(--ink-3)}
  html body #view .tour-app .tour-library-card .tour-library-bar>label:first-child input{flex:1;min-width:0;height:100%;min-height:0;padding:0;border:0;border-radius:0;font-size:var(--m-input)}
  html body #view .tour-app .tour-library-card .tour-library-bar>.tour-button{order:3;display:flex!important;align-items:center;justify-content:center;gap:var(--m-gap-s);width:100%;min-height:0!important;margin:0!important;
    padding:calc((var(--m-tap) - 1.2em) / 2) var(--m-pad)!important;box-sizing:border-box;line-height:1.2;
    border:1px solid var(--line-2)!important;border-radius:var(--m-radius)!important;background:var(--card,#fff)!important;color:var(--ink)!important;font-size:var(--m-body)!important;font-weight:600;box-shadow:none!important}
  html body #view .tour-app .tour-library-card .tour-library-bar>.tour-button svg{flex:none;width:16px;height:16px}
  html body #view .tour-app .tour-library-card .tour-pagination{order:2;display:flex;flex-wrap:wrap;align-items:center;gap:var(--m-gap-s);margin:0!important;padding:0 var(--m-gap-xs)!important;border:0!important;background:transparent!important;font-size:var(--m-cap)!important;color:var(--ink-2)}
  html body #view .tour-app .tour-library-card .tour-pagination button{min-height:0;padding:calc((var(--m-tap) - 1.2em) / 2) var(--m-pad);border:1px solid var(--line-2);border-radius:var(--m-radius);background:var(--card);color:var(--ink);font-size:var(--m-body);line-height:1.2}
  html body #view .tour-app .tour-library-card .tour-pagination button:disabled{opacity:.5}

  /* the empty library: the table is the white card (shot 13); no search, no count */
  html body #view .tour-app .tour-library-card[data-m-bare] .tour-table{overflow:hidden!important;
    border:1px solid var(--line-2)!important;border-radius:var(--m-radius)!important;background:var(--card,#fff)!important}
  html body #view .tour-app .tour-library-card[data-m-bare] .tour-library-bar>label:first-child{display:none!important}
  html body #view .tour-app .tour-library-card[data-m-bare] .tour-pagination{display:none!important}

  /* ----------------------------------------------------------------------------- a tour, as a card (L6-L9)
     Title, a state pill, fact rows, a divider, then the way in. Built by adaptTourRows() in js/dashboard-redesigner.js;
     the pieces are `hidden` there, so above the breakpoint nothing here can reach them. */
  html body #view .tour-app .tour-library-card:not([data-m-bare]) .tour-table{display:grid;gap:var(--m-gap);overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important}
  html body #view .tour-app .tour-library-card .tour-library-row{display:grid!important;grid-template-columns:var(--m-control) minmax(0,1fr)!important;grid-auto-rows:auto;gap:0 var(--m-gap)!important;align-items:start;
    width:100%;min-height:0!important;margin:0!important;padding:var(--m-pad)!important;box-sizing:border-box;border:1px solid var(--line-2)!important;border-radius:var(--m-radius)!important;
    background:var(--card)!important;box-shadow:none!important;text-align:left;color:var(--ink);font:inherit;font-size:var(--m-body)}
  html body #view .tour-app .tour-library-card .tour-library-row:active{background:var(--sig-bg)!important}
  html body #view .tour-app .tour-library-card .tour-library-row:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
  /* the row's own cells give way to the pieces below; their words live on in them */
  html body #view .tour-app .tour-library-card .tour-library-row:has(>.m-t-extra)>span:first-child{display:contents}
  html body #view .tour-app .tour-library-card .tour-library-row:has(>.m-t-extra)>span:not(:first-child){display:none}
  html body #view .tour-app .tour-library-card .tour-library-row:has(>.m-t-extra)>span:first-child>svg{grid-column:1;grid-row:1 / span 2;align-self:start;box-sizing:border-box;width:var(--m-control);height:var(--m-control);padding:var(--m-pad-s);border-radius:var(--m-radius);background:var(--card-2);color:var(--ink-2)}
  html body #view .tour-app .tour-library-card .tour-library-row:has(>.m-t-extra)>span:first-child>b{grid-column:2;grid-row:1;display:-webkit-box;min-width:0;align-self:center;
    font-size:var(--m-h4)!important;font-weight:700!important;line-height:1.25;letter-spacing:-.01em;color:var(--ink);white-space:normal;overflow-wrap:anywhere;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  html body #view .tour-app .tour-library-row>.m-t-extra[hidden]{display:contents}

  html body #view .tour-app .m-t-pill{grid-column:2;grid-row:2;justify-self:start;display:inline-flex;align-items:center;gap:var(--m-gap-xs);height:24px;margin-top:var(--m-gap-xs);padding:0 var(--m-gap-s);box-sizing:border-box;
    border-radius:999px;font-size:var(--m-cap);font-style:normal;font-weight:500;line-height:1;white-space:nowrap}
  html body #view .tour-app .m-t-pill::before{content:"";flex:none;width:var(--m-gap-s);height:var(--m-gap-s);border-radius:50%;background:currentColor}
  html body #view .tour-app .m-t-pill.is-shared{background:var(--sig-bg);color:var(--sig)}
  html body #view .tour-app .m-t-pill.is-draft{background:color-mix(in srgb,#F2B544 17%,var(--card));color:color-mix(in srgb,#B26B00 78%,var(--ink))}
  html body #view .tour-app .m-t-pill.is-draft::before{background:#B26B00}

  html body #view .tour-app .m-t-facts{grid-column:1 / -1;display:grid;gap:var(--m-gap-s);margin-top:var(--m-gap);font-style:normal}
  html body #view .tour-app .m-t-fact{display:flex;align-items:center;gap:var(--m-gap-s);min-width:0;font-size:var(--m-body);line-height:1.3;font-style:normal;color:var(--ink-2)}
  html body #view .tour-app .m-t-fact svg{flex:none;width:18px;height:18px;color:var(--ink-3)}
  html body #view .tour-app .m-t-k{flex:1 1 auto;min-width:0;padding-right:var(--m-gap-s);font-style:normal}
  html body #view .tour-app .m-t-v{flex:0 0 auto;white-space:nowrap;text-align:right;font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink)}

  html body #view .tour-app .m-t-foot{grid-column:1 / -1;display:block;margin-top:var(--m-gap);padding-top:var(--m-gap);border-top:1px solid var(--line);font-style:normal}
  html body #view .tour-app .m-t-go{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--m-tap);box-sizing:border-box;padding:0 var(--m-tap);
    border-radius:var(--m-radius);background:var(--sig);color:var(--on-sig);font-size:var(--m-body);font-style:normal;font-weight:600}
  html body #view .tour-app .m-t-go svg{position:absolute;right:var(--m-pad);top:50%;width:18px;height:18px;margin-top:-9px;color:var(--on-sig)}

  /* Narrow phones (320): the card keeps its tile and its padding on the same tokens; nothing here needs its own number. */

  /* inside the empty card */
  html body #view .tour-app .tour-library-card[data-m-bare] .slot-empty{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:var(--m-gap-l) var(--m-pad) var(--m-pad);border:0;background:transparent;text-align:center}
  html body #view .tour-app .tour-library-card[data-m-bare] .slot-empty-art{width:min(160px,50%)!important;max-width:100%;height:auto;margin:0 auto var(--m-gap);align-self:center;border-radius:var(--m-gap-s)}
  html body #view .tour-app .tour-library-card[data-m-bare] .slot-empty-title{margin:0 0 var(--m-gap-xs);font-size:var(--m-h3);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
  html body #view .tour-app .tour-library-card[data-m-bare] .slot-empty-line{max-width:none;margin:0 0 var(--m-gap-l);font-size:var(--m-body);line-height:1.45;color:var(--ink-2)}
  html body #view .tour-app .tour-library-card[data-m-bare] .slot-empty .m-create{display:flex;align-items:center;justify-content:center;gap:var(--m-gap-s);width:100%;min-height:0!important;margin:0!important;
    padding:calc((var(--m-tap) - 1.2em) / 2) var(--m-pad)!important;box-sizing:border-box;line-height:1.2;
    border:0!important;border-radius:var(--m-radius)!important;background:var(--sig)!important;color:var(--on-sig)!important;font-size:var(--m-body)!important;font-weight:600!important;box-shadow:none!important}
  html body #view .tour-app .tour-library-card[data-m-bare] .slot-empty .m-create svg{width:16px;height:16px;flex:none}

  /* The same card for "No matches" (a search with no hits) inside a library that has tours: it is not bare, so it gets the empty
     card's own look, scaled the same way, rather than the desktop's. */
  html body #view .tour-app .tour-library-card:not([data-m-bare]) .slot-empty{display:flex;flex-direction:column;align-items:center;gap:var(--m-gap-xs);margin:0;padding:var(--m-gap-l) var(--m-pad);text-align:center;
    border:1px solid var(--line-2);border-radius:var(--m-radius);background:var(--card)}
  html body #view .tour-app .tour-library-card:not([data-m-bare]) .slot-empty-title{margin:0;font-size:var(--m-h4);font-weight:700;line-height:1.25;color:var(--ink)}
  html body #view .tour-app .tour-library-card:not([data-m-bare]) .slot-empty-line{max-width:none;margin:0 0 var(--m-gap-s);font-size:var(--m-body);line-height:1.4;color:var(--ink-2)}
  html body #view .tour-app .tour-library-card:not([data-m-bare]) .slot-empty :is(.slot-empty-cta,button){min-height:0!important;margin:0!important;padding:calc((var(--m-tap) - 1.2em) / 2) var(--m-pad)!important;
    box-sizing:border-box;line-height:1.2;font-size:var(--m-body)!important;border-radius:var(--m-radius)!important}
}

/* ======================================================================================================================
   THE PHONE SCALE (owner ruling, 26 Oct 2026). His words: "most of my text shld be smaller fonts uk and zoom out abit
   more the cards eveyrthing, everything is so mega sized that my brain cant focus", and "i want to go cosnistent".
   He gave the scale himself: captions 10-12, body 14-15, headings 18 / 20 / 24 / 28 / 32, one scale across the whole
   app rather than per screen, Gmail's density as the reference.

   PHONE ONLY. Every token below is declared inside the phone media query, so a desktop reads none of it and cannot
   move. Zones use the tokens instead of inventing their own numbers: that is what makes the app consistent, and it
   means a later change of mind is one edit here rather than thirty.

   Also his: no row that holds one lonely control in otherwise empty space, and no button whose two words break into
   two lines. Both are checked by verification/mobile-scale-2026-10-26/walk.mjs, which every zone has to pass.
   ====================================================================================================================== */
@media (max-width:767px),(pointer:coarse) and (max-height:500px){
  :root{
    /* type */
    --m-cap-s:10px;          /* the smallest a label may be: meta, counts, timestamps */
    --m-cap:12px;            /* captions, chips, pill text, table meta */
    --m-body:14px;           /* THE default body size, and the default for buttons and inputs */
    --m-body-lg:15px;        /* reading runs: a paragraph someone actually reads */
    --m-h4:18px;             /* a card's own heading */
    --m-h3:20px;             /* a section heading */
    --m-h2:24px;             /* a screen's subject */
    --m-h1:28px;             /* the page title, the largest type on a phone */

    /* density: Gmail's rhythm, not a desktop column's */
    --m-gap-xs:4px;
    --m-gap-s:8px;
    --m-gap:12px;            /* the default gap between elements in a stack */
    --m-gap-l:16px;          /* between one block and the next */
    --m-pad:14px;            /* a card's inner padding */
    --m-pad-s:10px;
    --m-page-x:16px;         /* the page gutter, left and right */
    --m-radius:12px;

    /* controls: 44px stays the floor for anything a thumb must hit (WCAG 2.5.8 and every phone guideline),
       even while the type inside it comes down to --m-body. Small is not the same as hard to press. */
    --m-tap:44px;
    --m-control:40px;        /* a control that is not a primary target: a chip, a segment, an icon button */

    /* THE ONE EXCEPTION TO THE SCALE. A text field stays at 16px, not --m-body (owner ruling r335 overridden on this
       one point by the assistant, 26 Oct 2026, under "u make the decisions"). iOS Safari ZOOMS THE WHOLE PAGE when a
       field smaller than 16px takes focus, and it does not zoom back out. On a 14px field every tap into a search box
       or a form would blow the page up, which is the exact opposite of what he asked for. The owner's own phone is
       Android, where this does not happen, so it would not have shown up in his testing: the agents using Plinth are
       the ones who would have found it. A field is also the one place a larger size costs nothing, since it holds
       what someone is typing rather than page furniture. */
    --m-input:16px;
  }

  /* Enforced centrally, with !important, because a zone sheet setting a field to 14px re-arms the iOS zoom and nobody
     would notice until an agent on an iPhone complained. Checkboxes, radios and ranges are excluded: they draw no text
     and iOS does not zoom for them. */
  html body #view :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select){font-size:var(--m-input)!important}
}