/* Product slice 9 - rail and structure (design-v2/shell-head.html B-13, css/18-slice-a.css, CD-23 F7).
   Three things the drawing draws and no other file of the organisation shell did: the phone top bar,
   the page head's «⋯», and a screen drawn as a window over the page it came from.
   Loaded after app.css, so each rule here names what it changes. */

/* ── the phone top bar, B-13: ≡ · the search as an icon · the avatar.
   The language, theme, material, fleet-size and role pills are in the menu under the avatar
   (app.js `placeChrome` moves the one element there at 620 px and under). ── */
@media (max-width: 620px) {
  .app .top { flex-wrap: nowrap; align-items: center; padding: 8px 12px; gap: 10px; }
  .menu { order: 0; }
  .top .srch { order: 1; flex: none; width: 36px; height: 36px; margin-left: auto; position: relative; }
  .top .srchi { width: 36px; height: 36px; padding: 0; border-color: transparent; background: transparent;
    color: transparent; caret-color: transparent; cursor: pointer; }
  .top .srchi::placeholder { color: transparent; }
  .top .srch::before { content: ""; position: absolute; left: 10px; top: 10px; width: 9px; height: 9px;
    border: 1.8px solid var(--tx2); border-radius: 50%; pointer-events: none; }
  .top .srch::after { content: ""; position: absolute; left: 21px; top: 21px; width: 6px; height: 1.8px;
    background: var(--tx2); transform: rotate(45deg); transform-origin: 0 0; pointer-events: none; }
  /* Pressing the icon opens the field across the bar; the answers hang under it. */
  .top .srch:focus-within { position: absolute; left: 12px; right: 12px; top: 8px; width: auto; height: 36px;
    z-index: 3; margin: 0; }
  .top .srch:focus-within .srchi { width: 100%; padding: 0 12px; background: var(--s3); color: var(--tx1);
    caret-color: auto; border-color: var(--line); }
  .top .srch:focus-within .srchi::placeholder { color: var(--tx3); }
  .top .srch:focus-within::before, .top .srch:focus-within::after { display: none; }
  .top .amw { order: 2; }
  /* The menu under the avatar holds the pills first, then the zone, the profile and the way out. */
  .amenu { width: min(300px, calc(100vw - 24px)); }
  .amenu .tpills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 8px 10px;
    border-bottom: 1px solid var(--line-s); margin-bottom: 4px; }
  .amenu .tpills { order: -1; }
  .amenu .tpills .rolepill { flex: 1 1 100%; text-align: center; order: 9; }
  .amenu .tpills .pill { flex: 0 1 auto; }
  .amenu .tpills .pill.live .lw { display: inline; }
}

/* ── a screen drawn as a window, CD-23 F7: the loss window (m-loss) and the person's card (m-person).
   It is the product's one dialog with the drawing's `.mod` rows: facts as `.kvr`, the foot of buttons. ── */
dialog.dlg.win .dlgf { min-width: min(520px, calc(100vw - 24px)); }
dialog.dlg.win .cb { padding: 0; }
dialog.dlg.win .kvr { align-items: baseline; }
dialog.dlg.win .dlga { flex-wrap: wrap; gap: 8px; justify-content: flex-end; flex-direction: row; }
/* N11 (render walk 2): the window is the drawing's 640 px (design-v2 21-night.css `#m-loss .mod`), yielding to a phone,
   and its four acts are one row of unbroken labels that wraps only when it must, each growing to fill. */
dialog.dlg.win { width: min(640px, calc(100% - 24px)); }
dialog.dlg.win .dlga .btn { white-space: nowrap; flex: 1 1 auto; width: auto; }
@media (min-width: 621px) { dialog.dlg.win .dlga .btn { flex: 0 0 auto; } }
dialog.dlg.win .kvr .v { text-align: right; margin-left: auto; }

/* ── the tiles on a phone, design-v2 01-dash.css / 06-alerts.css: two columns, the odd last one across. ── */
@media (max-width: 620px) {
  .kpis.k5, [data-block="maint.tiles"].kpis, [data-block="maint.tiles"] .kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpis.k5 > .kpi:last-child:nth-child(odd), [data-block="maint.tiles"] .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}