/* 0.60.25 (D-O-034): phones and narrow screens (under 760 px; a Galaxy S25 is 384 px wide in CSS pixels).
   Industry practice: a compact app bar with a navigation drawer, one column, side panels stacked above the content,
   wide tables that scroll sideways inside their own box (never the page), touch targets of 44 px, slightly smaller
   text. Loaded after the themes; the rules start with html.da-phone (set by js/tools/mobile.js) to win over the CSS of
   a module loaded later. */
.nav-toggle, .nav-drawer, .nav-backdrop { display: none; }

@media (max-width: 760px) {
  html.da-phone body { font-size: 14px; }
  html.da-phone #app { overflow-x: clip; }
  html.da-phone .content { padding: .9rem .75rem 2.5rem; }
  html.da-phone h1 { font-size: 1.45rem; line-height: 1.25; }
  html.da-phone h2 { font-size: 1.15rem; }

  /* ---------- sign-in: the form first, the sketch shorter ---------- */
  html.da-phone .auth-page.sk-auth { display: flex; flex-direction: column; gap: 1rem; padding: 1rem .75rem; }
  html.da-phone .auth-page.sk-auth > form, html.da-phone .auth-page.sk-auth > .auth-card { order: -1; }
  html.da-phone .sk-hero img { max-height: 160px; width: auto; }
  html.da-phone .sk-hero-title { font-size: 1.4rem; }

  /* ---------- app bar ---------- */
  html.da-phone .topbar { height: 56px; gap: .4rem; padding: 0 .5rem; }
  html.da-phone .topbar .da-logo .brand { font-size: 1rem; }
  html.da-phone .topbar .da-logo .brand-mark { width: 1.35rem; height: 1.35rem; }
  html.da-phone .brand-link { flex: 1; min-width: 0; overflow: hidden; }
  html.da-phone .user-name { display: none; }
  html.da-phone .nav-toggle { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: var(--radius-sm); background: none; color: inherit; cursor: pointer; }
  html.da-phone .nav-toggle-bars, html.da-phone .nav-toggle-bars::before, html.da-phone .nav-toggle-bars::after {
    display: block; width: 22px; height: 2.5px; border-radius: 2px; background: currentColor; content: ""; position: relative; }
  html.da-phone .nav-toggle-bars::before { position: absolute; top: -7px; }
  html.da-phone .nav-toggle-bars::after { position: absolute; top: 7px; }
  html.da-phone .topbar .menu { position: fixed; right: .5rem; left: auto; top: 60px; max-width: calc(100vw - 1rem); }

  /* ---------- navigation drawer ---------- */
  html.da-phone .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(16, 32, 47, .45);
    opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  html.da-phone.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  html.da-phone .nav-drawer { display: flex; flex-direction: column; gap: .6rem; position: fixed; inset: 0 auto 0 0; z-index: 71;
    width: min(84vw, 320px); padding: .9rem .7rem 2rem; overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface); color: var(--ink); box-shadow: 6px 0 24px rgba(16, 32, 47, .25);
    transform: translateX(-104%); transition: transform .22s ease; visibility: hidden; }
  html.da-phone.nav-open .nav-drawer { transform: none; visibility: visible; }
  html.da-phone.nav-open { overflow: hidden; }
  html.da-phone .nav-drawer .tabs, html.da-phone .nav-drawer .tabs-end { display: flex; flex-direction: column; gap: .1rem;
    flex: none; overflow: visible; }
  html.da-phone .nav-drawer .tab { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .5rem .7rem;
    color: var(--ink); opacity: 1; white-space: normal; font-size: 1rem; }
  html.da-phone .nav-drawer .tab .tab-label { display: inline; }
  html.da-phone .nav-drawer .tab.active { font-weight: 650; background: color-mix(in srgb, var(--acc, var(--agile)) 16%, transparent); }
  html.da-phone .nav-drawer .tab::after { display: none; }
  html.da-phone .nav-drawer .tab-group-sep { width: auto; height: 1px; margin: .35rem .4rem; background: var(--line); }
  html.da-phone .nav-drawer .topbar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; order: -1;
    padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
  html.da-phone .nav-drawer .ts-box { width: 100% !important; }
  html.da-phone .nav-drawer .tb-palette { display: none; }  /* a keyboard shortcut: no keyboard on a phone */
  html.da-phone .nav-drawer .tabs-end { align-items: stretch; }
  html.da-phone .nav-drawer .tabs-end .tab { justify-content: flex-start; }
  html.da-phone .nav-drawer :is(.tb-audit-list, .tb-audit, .tb-mine) { min-height: 40px; }
  html.da-phone .nav-drawer .admin-tab { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .5rem .7rem;
    color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); }

  /* ---------- one column: the side panel of a module above its content ---------- */
  html.da-phone :is(.ag-layout, .dy-layout, .ag-layout[data-side-panel], .dy-layout[data-side-panel]) {
    display: block; grid-template-columns: 1fr; min-height: 0; }
  html.da-phone :is(.ag-sidebar, .dy-sidebar) { position: static; width: auto; height: auto; max-height: none; padding: .6rem .75rem;
    border-right: 0; border-bottom: 1px solid var(--line); }
  html.da-phone :is(.ag-sidebar-mark, .dy-mark-img, .side-toggle, .side-resize) { display: none; }
  html.da-phone .ag-sidebar .ag-nav { display: flex; flex-wrap: nowrap; gap: .25rem; overflow-x: auto; padding-bottom: .2rem; }
  html.da-phone .ag-sidebar .ag-nav-item { flex: none; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }
  html.da-phone .ag-project-picker, html.da-phone .dy-space-picker { width: 100%; }

  /* ---------- content ---------- */
  html.da-phone main :is(table.data, .table) { display: block; max-width: 100%; overflow-x: auto; }
  html.da-phone main :is(img, svg, video, canvas) { max-width: 100%; }
  html.da-phone main :is(.form-row, .dm-row, .db-top, .set-grid) { grid-template-columns: 1fr; }
  html.da-phone :is(.btn, select, input[type=text], input[type=search], input[type=number], input[type=date]) { min-height: 40px; }
  html.da-phone .modal { width: calc(100vw - 1.5rem); max-width: none; }
  html.da-phone .subtabs { flex-wrap: nowrap; overflow-x: auto; }
  html.da-phone .subtabs > * { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-backdrop { transition: none; }
}

/* ---------- 0.60.27 (D-O-036): what a phone is for ---------- */
@media (max-width: 760px) {
  /* the big screens stay on the computer */
  html.da-phone .nav-drawer .tab-pc { margin-left: auto; font-size: .72rem; color: var(--muted); }
  html.da-phone.pc-only #main { display: none; }
  html.da-phone .pc-only-note { margin: 1.2rem .9rem; padding: 1.2rem 1rem; text-align: center; background: var(--surface);
    border: 1px dashed var(--line); border-radius: var(--radius-lg); }
  html.da-phone .pc-only-note .pc-only-icon { margin: 0; font-size: 2.2rem; }
  html.da-phone .pc-only-note h1 { font-size: 1.2rem; margin: .3rem 0 .5rem; }
  html.da-phone .pc-only-note .actions { justify-content: center; margin-top: .8rem; }

  /* Goldmine, Testing, Timesheet: lists of cards, one item under the other */
  html.da-phone table.data[data-cards] { display: block; border: 0; background: none; overflow: visible; }
  html.da-phone table.data[data-cards] thead { display: none; }
  html.da-phone table.data[data-cards] tbody { display: flex; flex-direction: column; gap: .6rem; }
  html.da-phone table.data[data-cards] tr { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .65rem .75rem;
    background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--acc, var(--agile));
    border-radius: var(--radius-sm); box-shadow: var(--shadow); }
  html.da-phone table.data[data-cards] td { display: block; padding: .1rem 0; border: 0; min-width: 0; white-space: normal;
    overflow-wrap: break-word; }
  html.da-phone table.data[data-cards] td[data-label]:not(:first-child)::before { content: attr(data-label); display: block;
    color: var(--muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
  html.da-phone table.data[data-cards] td:first-child { font-weight: 650; font-size: .95rem; }
  html.da-phone table.data[data-cards] td:empty { display: none; }
  /* the whole card opens the item (the link of its key), its own controls stay above */
  html.da-phone :is([data-module=goldmine], [data-module=testing]) table.data[data-cards] td:first-child a::after {
    content: ""; position: absolute; inset: 0; }
  html.da-phone table.data[data-cards] td :is(input, select, button, label) { position: relative; z-index: 1; }
  /* short cards: the columns that matter on the go */
  html.da-phone[data-module=goldmine] table.data[data-cards] td:is([data-label="External ID"], [data-label="Phase"], [data-label="Verif."],
    [data-label="Assignee"], [data-label="Implémentée par"], [data-label="Verif. Ref."], [data-label="Dernière modif."]) { display: none; }
  html.da-phone[data-module=testing] table.data[data-cards] td:is([data-label="Level"], [data-label="Method"], [data-label="Test Location"],
    [data-label="Functions"], [data-label="Category"]) { display: none; }
  html.da-phone[data-module=goldmine] .gm-statement { display: block; }
  /* Timesheet: one card per range, its fields full width */
  html.da-phone[data-module=timesheet] table.data[data-cards] td :is(input, select) { width: 100%; }
  html.da-phone[data-module=timesheet] table.data[data-cards] td.tt-row-actions { display: flex; justify-content: flex-end; gap: .4rem; }

  /* the long tool bars: what one does on the go */
  html.da-phone :is(.ag-csv-toolbar, .ag-import-advice, .gm-since) { display: none; }
  html.da-phone[data-module=testing] .tg-head-main .muted { display: none; }
  html.da-phone[data-module=testing] .tg-actions > :not(.btn-primary) { display: none; }
  html.da-phone .ag-filters:not(.filters-open) > :is(select, label) { display: none; }
  html.da-phone .ag-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
  html.da-phone .ag-filters > input { flex: 1 1 10rem; }
  html.da-phone .ag-filters.filters-open > select { flex: 1 1 45%; min-width: 0; }

  /* Dynamite: a compact page, and the quick bar at the bottom */
  html.da-phone[data-module=dynamite] .dy-actions-top > :not(.btn-primary):not([href*="/new"]) { display: none; }
  html.da-phone[data-module=dynamite] .dy-sidebar .dy-tree { max-height: 30vh; overflow-y: auto; }
  html.da-phone[data-module=dynamite] .dy-page { padding-bottom: 5rem; }
  html.da-phone .dy-fab { position: fixed; left: .5rem; right: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); z-index: 50;
    display: flex; gap: .4rem; padding: .45rem; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: 0 6px 20px rgba(16, 32, 47, .22); }
  html.da-phone .dy-fab > .new-tag { position: absolute; top: -.6rem; right: .6rem; flex: none; min-height: 0; }
  html.da-phone .dy-fab > * { flex: 1 1 0; justify-content: center; min-height: 44px; text-align: center; white-space: nowrap; }
  html.da-phone[data-module=dynamite] .dy-edit-actions { flex-wrap: wrap; gap: .35rem; }
  html.da-phone[data-module=dynamite] .dy-note-input { flex: 1 1 100%; }
  html.da-phone[data-module=dynamite] .dy-toolbar { flex-wrap: wrap; }
}
html:not(.da-phone) .pc-only-note, html:not(.da-phone) .dy-fab, html:not(.da-phone) .filters-toggle { display: none; }