/* ── Petites largeurs : les deux colonnes sont repliées par défaut ; ouverte, une colonne prend la place du fil. ── */
/* Narrow = 820 px wide or less, OR a short touch screen (a phone turned sideways): the same list as the
   narrow matchMedia of js/state.js, keep the two alike. */
@media (max-width: 820px), (max-height: 500px) and (hover: none) and (pointer: coarse) {
  :root { --nav: calc(100vw - var(--rail)); --side: calc(100vw - var(--nav-c)); }
  .nav-grip { display: none; } /* ici la colonne ouverte prend deja tout l'ecran */
  .bar { grid-template-columns: minmax(0, 1fr) max-content; }
  .bar-main { min-width: 0; overflow: hidden; }
  #app:not(.l-off) .omni, #app:not(.l-off) .settings, #app:not(.l-off) #new-btn, #app:not(.l-off) .conv {
    width: 0; min-width: 0; max-width: 0; overflow: hidden; visibility: hidden; padding: 0; gap: 0; flex: none; pointer-events: none;
  } /* bande etroite = sandwich seul (largeur, pas display:none) */
  #app:not(.l-off) .bar-main { padding: 0; gap: 0; justify-content: center; }
  .omni { flex: 1 1 0; min-width: 0; max-width: var(--omni-w); }
  .settings { gap: var(--s1); padding: 0 var(--s2); flex: none; }
  .scroll { padding: 0 var(--s4); }
  .compose-wrap { padding: 0 var(--s4) var(--s3); }
  .bubble { max-width: 90%; }
  /* Fil étroit : le nom de l'auteur suffit, l'avatar laisse sa place au texte et aux cartes. */
  .m { display: block; }
  .m > .mono, .m > .av, .m > span:empty { display: none; }
  .req { padding: var(--s3); }
  .req .from { display: block; margin-left: 0; }
}
/* Barre trop etroite (390) : masquer le champ omnibar AVANT de rogner version / langue / theme. Le « + » ouvre encore la liste. */
@container (max-width: 360px) {
  .omni-box { display: none; }
  .bar-main { padding: 0 var(--s1) 0 var(--s1); gap: var(--s1); }
  .bar-tools { gap: var(--s1); }
  .settings { padding: 0 var(--s1); }
  #lang { padding: 0 6px; gap: 4px; }
  #lang span { display: none; } /* drapeau seul : le libelle FR ne tient plus */
}
/* ── Phone (narrow AND touch): a collapsed column keeps no band, so the thread takes the whole width; the
   right column opens over the whole screen, like a sheet, under the same bar. With the list open, the right
   band stays: its strip holds the sandwich alone, and the thread is not squeezed into it. Collapsed, a
   column is hidden once its collapse is over, so its controls leave the tab order. A narrow window driven
   by a mouse keeps its collapsed band, icons in place (TestCollapseKeepsIconsMeasured). ── */
@media (max-width: 600px) and (hover: none) and (pointer: coarse) {
  :root { --side: 100vw; }
  #app.l-off { --l: 0px; }
  #app.l-off.r-off { --r: 0px; }
  #app.l-off #nav, #app.r-off #side { visibility: hidden; transition: visibility 0s var(--move); }
}
/* ── Touch screen (input modality, never width): every control is a 44 px touch box (--field is the height of
   most of them: buttons, fields, composer, language, theme) and text fields are 16 px. ── */
@media (hover: none) and (pointer: coarse) {
  :root { --field: var(--hit); --bar-tools-grow: calc(2 * var(--hit) - var(--mono-w) - var(--mini)); } /* the sandwich and the + button grow to 44: the search field starts that much further */
  :root { --nav-c: calc(2 * var(--hit) + var(--nav-pad) + var(--s3)); } /* the collapsed band holds the two 44 px segments of the product switch with the margins of the brand */
  .prod { --mono-w: var(--hit); }
  .iconbtn, #new-btn, .codeblock > .copy { width: var(--hit); height: var(--hit); }
  .pop-item, .ta-item { height: var(--hit); }
  .omni { --mono-w: var(--hit); } /* the search field, its magnifier and its place in the bar all read this token */
  .prod { padding: 0; } .prod-seg { height: var(--field); } /* the two segments fill the switch: no 2 px rim that a finger lands on */
  /* Each control is a 44 px box with its icon centred, so the boxes space themselves; the build id is text and
     keeps a margin. Without this, a real build id leaves no room for the head of the Mi on a 360 to 390 px bar. */
  .bar-main, .bar-tools, .settings { gap: 0; } #build { margin: 0 var(--s1); } #theme { margin-left: var(--s1); } /* the track of the theme switch is as wide as its box: it would touch the frame of the language */
  /* The copy button sits in the corner of the block; the text keeps clear of it and a one-line block holds it. */
  .codeblock > .copy { top: 0; right: 0; } .codeblock > pre { padding-right: var(--hit); min-height: var(--hit); }
  #lang, .ttl-btn { min-width: var(--hit); min-height: var(--hit); justify-content: center; } /* under 360 px the bar keeps the flag alone: 30 px wide; the head of the Mi opens its settings */
  /* Inside :is() the id gives every field the weight of an id, so the font shorthands of #search, .field and
     textarea.field do not win the size back. */
  :is(#input, #search, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) { font-size: var(--t-field-touch); }
}
/* ── Phone, upright or sideways (the same list as the phone matchMedia of js/state.js): no Yumi Code, so no
   product switch. It keeps its row, so the list stays aligned under the bar. ── */
@media (max-width: 600px) and (hover: none) and (pointer: coarse), (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .prod { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .av, .av *, .av *::before, .av *::after { animation: none !important; } }