/* TP2D identity: admin-auth-shell pages (lane-owned; tokens only, rules in css/identity.css).
 * The app shell (header, sidebar, side tabs, scroll button), administration (body.aas-admin) and
 * the signed-out pages (.aas-auth). Reads tokens only; the T.EN chrome re-scopes them to navy. */

/* ---- Header --------------------------------------------------------------------------------------
   Title, the page's primary action, the bell and one Display menu (was twelve controls: cloud, moon,
   palette, three superuser switchers, info, A- A A+, bell, new). */
.main-header h1 { color: var(--dtp-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* one line at every width: the actions keep their size, the title gives way */
.main-header #page-title-icon { margin-inline-end: var(--dtp-space-2); font-size: var(--dtp-text-md); color: var(--color-primary); }
.main-header #page-title-icon[class="fas"] { display: none; }   /* no page icon set: no gap */
.main-header .aas-header-actions { gap: var(--dtp-space-2); }
.main-header .aas-chrome-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  border: 1px solid transparent;
  border-radius: var(--dtp-radius-sm);
  color: var(--dtp-text-muted);
  font-size: var(--dtp-text-lg);
}
.main-header .aas-chrome-btn:hover { background: var(--dtp-row-hover); color: var(--dtp-text); }
.main-header .aas-chrome-btn[aria-expanded="true"] { background: var(--dtp-primary-soft); color: var(--dtp-primary-text); }
.main-header .aas-chrome-btn[hidden] { display: none; }
.main-header #sidebar-menu-btn { color: var(--dtp-text); }
/* One sidebar control per width: the sidebar's own arrow on a desktop, the menu button below 1024px
   (the header's "columns" icon duplicated the arrow). */
@media (min-width: 1024px) { .main-header #sidebar-menu-btn { display: none; } }
/* New test pack: a quiet outlined button (was the one filled blue in the chrome). */
.main-header #new-tp-dossier-btn {
  min-height: 2.5rem;
  padding: 0 var(--dtp-space-3);
  border: 1px solid var(--dtp-primary);
  border-radius: var(--dtp-radius-sm);
  background: transparent;
  color: var(--dtp-primary-text);
  font-size: var(--dtp-text-sm);
  font-weight: 600;
}
.main-header #new-tp-dossier-btn:hover { background: var(--dtp-primary-soft); color: var(--dtp-primary-text); }
.main-header #new-tp-dossier-btn i { font-size: var(--dtp-text-sm); }
/* T.EN: a white outline pill on the navy chrome; white fill and navy text on hover. */
:root[data-palette="ten"] .main-header #new-tp-dossier-btn { border-color: var(--dtp-text); border-radius: var(--dtp-radius-pill); color: var(--dtp-text); }
:root[data-palette="ten"] .main-header #new-tp-dossier-btn:hover { background: var(--dtp-chrome-fg); color: var(--dtp-chrome-bg); }
@media (max-width: 767px) { .main-header #new-tp-dossier-btn { min-width: 2.5rem; justify-content: center; padding: 0; } }

/* Auto-save (create / edit test pack only): the state by colour and in the button's name. */
.main-header .aas-autosave.is-clean { color: var(--color-success-text); }
.main-header .aas-autosave.is-dirty { color: var(--dtp-crit-fg); }
.main-header .aas-autosave.is-off { color: var(--dtp-text-subtle); }
/* The bell's unread count. */
.aas-bell__badge {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--dtp-space-1);
  border-radius: var(--dtp-radius-pill);
  background: var(--dtp-crit-solid);
  color: var(--dtp-crit-on-solid);
  font-size: var(--dtp-text-xs);
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.aas-bell__badge[hidden] { display: none; }
.aas-bell__badge--warn { background: var(--dtp-warn-solid); color: var(--dtp-warn-on-solid); }   /* Required actions */

/* Display menu: scheme, colours, text size. */
.aas-display { position: relative; }
.aas-display__panel {
  position: absolute;
  top: calc(100% + var(--dtp-space-1));
  inset-inline-end: 0;
  z-index: var(--dtp-z-dropdown);
  display: flex;
  flex-direction: column;
  gap: var(--dtp-space-2);
  min-width: 17rem;
  padding: var(--dtp-space-3);
  border: 1px solid var(--dtp-border-strong);
  border-radius: var(--dtp-radius-md);
  background: var(--dtp-surface-raised);
  box-shadow: var(--dtp-shadow-md);
  color: var(--dtp-text);
  font-size: var(--dtp-text-sm);
  line-height: 1.3;
}
.aas-display__panel[hidden] { display: none; }
.aas-display__row { display: flex; align-items: center; justify-content: space-between; gap: var(--dtp-space-3); color: var(--dtp-text); }
.aas-display__label { color: var(--dtp-text-muted); font-weight: 500; }
.aas-display__steps { display: inline-flex; gap: var(--dtp-space-1); }
.main-header .aas-display__btn,
.main-header .aas-display__panel select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dtp-space-1);
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0 var(--dtp-space-2);
  border: 1px solid var(--dtp-border-strong);
  border-radius: var(--dtp-radius-sm);
  background: var(--dtp-surface);
  color: var(--dtp-text);
  font-size: var(--dtp-text-sm);
  font-weight: 500;
}
.main-header .aas-display__panel select { min-width: 7rem; justify-content: flex-start; }
.main-header .aas-display__btn:hover { border-color: var(--dtp-primary); color: var(--dtp-primary-text); }
.main-header .aas-display__btn[aria-pressed="true"] { background: var(--dtp-primary-soft); border-color: var(--dtp-primary); }

/* Phones: the title keeps the room left of the four buttons (six buttons pushed it out). */
@media (max-width: 640px) {
  .main-header { padding-inline: var(--dtp-space-2); }
  .main-header > div:first-child { gap: var(--dtp-space-2); }
  .main-header > div:first-child > * + * { margin-left: 0; }
  .main-header .aas-header-actions { gap: var(--dtp-space-1); }
  .main-header h1 { font-size: var(--dtp-text-md); }
  .main-header #page-title-icon { display: none; }
}

/* ---- Sidebar -------------------------------------------------------------------------------------- */
#sidebar-nav { overflow-y: auto; min-height: 0; }
#sidebar .sidebar-toggle-btn[hidden] { display: none; }
#sidebar .sidebar-toggle-btn { font-size: var(--dtp-text-md); }
#sidebar .sidebar-close-btn { min-width: 2.5rem; min-height: 2.5rem; border: 0; background: none; color: var(--dtp-text-muted); font-size: var(--dtp-text-lg); cursor: pointer; }
/* Nav that does not fit scrolls, with a fade at each edge that has more items beyond it. */
#sidebar-nav.aas-more-below { mask-image: linear-gradient(to bottom, black calc(100% - 2.5rem), transparent); }
#sidebar-nav.aas-more-above { mask-image: linear-gradient(to top, black calc(100% - 2.5rem), transparent); }
#sidebar-nav.aas-more-above.aas-more-below { mask-image: linear-gradient(to bottom, transparent, black 2.5rem, black calc(100% - 2.5rem), transparent); }
/* Compact sidebar: app.js sets .aas-nav-compact when the items do not fit (a laptop at 150 %, a larger
   text size): the group headings become thin rules, no gaps, 36px items on a mouse (44 on touch stays),
   a smaller brand, tighter footer. At 1280 x 680 every item then fits; beyond that the nav scrolls.
   (36 px, was 40, since TP Dossiers joined the items; owner, 2026-10-13: smaller items, every one fits.) */
#sidebar.aas-nav-compact #sidebar-nav { padding-block: 2px; }
#sidebar.aas-nav-compact #sidebar-nav.space-y-1 > * + * { margin-top: 0; }
#sidebar.aas-nav-compact .sidebar-nav-group { height: 0; margin: 1px var(--dtp-space-3); overflow: hidden; border-top: 1px solid var(--dtp-border); }
#sidebar.aas-nav-compact .sidebar-nav-group:first-child { display: none; }
#sidebar.aas-nav-compact .sidebar-logo-text { font-size: var(--dtp-text-xl); }
:root[data-palette="ten"] #sidebar.aas-nav-compact .sidebar-logo-text::before { width: 3.6rem; height: 1.75rem; }
#sidebar.aas-nav-compact .aas-switchers { padding-top: 0; }
#sidebar.aas-nav-compact .user-profile-container { margin: 2px var(--dtp-space-2); padding: var(--dtp-space-1) var(--dtp-space-2); }
#sidebar.aas-nav-compact .user-profile-info #user-role { line-height: 1.2; }
@media (pointer: fine) {
  #sidebar.aas-nav-compact .sidebar-nav-item { min-height: 2.25rem; padding-block: 0; }
  #sidebar.aas-nav-compact .aas-switchers__summary { min-height: 2rem; }
}
/* One scrolling column (very short windows, e.g. 480 x 300 at 400 % zoom): the nav keeps the height
   of its items and comes first; the foot follows it and scrolls with it, compact: avatar and name on
   one line (the role stays in its title), key and sign-out as icons. */
#sidebar.aas-sidebar-scroll > .flex { overflow-y: auto; overscroll-behavior: contain; }
#sidebar.aas-sidebar-scroll > .flex > * { flex-shrink: 0; }
#sidebar.aas-sidebar-scroll #sidebar-nav { flex: 0 0 auto; overflow: visible; mask-image: none; }
#sidebar.aas-sidebar-scroll .user-profile-info #user-role { display: none; }
#sidebar.aas-sidebar-scroll .aas-switchers[open] .aas-switchers__body { max-height: none; }

/* "Test as another user" open: its body scrolls inside the sidebar, the nav gives way. */
.aas-switchers[open] .aas-switchers__body { max-height: 45vh; overflow-y: auto; }

/* Navigation icons: one set (solid, single glyph, no composite badges), each centred in a 20px box. */
#sidebar .sidebar-nav-item > .sidebar-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  font-size: var(--dtp-text-md);
  line-height: 1;
}
.sidebar.collapsed .sidebar-nav-item > .sidebar-nav-icon { width: 1.25rem; margin: 0; }
/* icons only: the hidden label kept its 12px left margin and pulled every icon 6px off centre */
:is(.sidebar.collapsed, .sidebar.peeking) .sidebar-nav-item > span { display: none; }
/* Profile block: avatar, name, role, then your access / change password / sign out. */
#sidebar .user-profile-container { padding: var(--dtp-space-2); }
#sidebar .user-profile-row { gap: var(--dtp-space-2); }
#sidebar .user-profile-row [hidden] { display: none; }
#sidebar .aas-avatar { width: 2.25rem; height: 2.25rem; flex-shrink: 0; object-fit: cover; font-size: var(--dtp-text-sm); }
#sidebar img.aas-avatar { border: 2px solid var(--dtp-border); }
#sidebar .aas-you {
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--dtp-space-2);
  padding: var(--dtp-space-1);
  border: 0;
  border-radius: var(--dtp-radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
#sidebar .aas-you:hover { background: var(--dtp-row-hover); }
#sidebar .aas-you[aria-expanded="true"] { background: var(--dtp-primary-soft); }
#sidebar .aas-you:focus-visible { outline: var(--dtp-focus-width) solid var(--dtp-focus); outline-offset: var(--dtp-focus-offset); }
#sidebar .user-profile-info #user-name,
#sidebar .user-profile-info #user-role { display: block; }
#sidebar .user-profile-info #user-name { color: var(--dtp-text); font-size: var(--dtp-text-sm); }
#sidebar .user-profile-info #user-role {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;           /* its own line, wrapped at spaces, two lines at most (was cut mid-word) */
  overflow: hidden;
  white-space: normal;
  overflow-wrap: normal;
  color: var(--dtp-text-muted);
  font-size: var(--dtp-text-xs);
  line-height: 1.3;
}
.sidebar.collapsed .aas-you, .sidebar.peeking .aas-you { flex: 0 0 auto; }
#sidebar .logout-btn { width: 2.25rem; height: 2.25rem; border: 0; background: none; color: var(--dtp-text-muted); cursor: pointer; }
#sidebar .logout-btn i { font-size: var(--dtp-text-md); }
#sidebar .logout-btn:hover { background: var(--dtp-row-hover); color: var(--dtp-text); }
#sidebar .logout-btn[aria-expanded="true"] { background: var(--dtp-primary-soft); color: var(--dtp-primary-text); }
#sidebar .logout-btn.logout-red { color: var(--dtp-crit-fg); }
/* Your access (was the header's info popup with coloured pills). */
#sidebar #user-ctx-popup { display: none; margin: 0 0 var(--dtp-space-2); padding: 0 0 var(--dtp-space-2); border-bottom: 1px solid var(--dtp-border); }
#sidebar #user-ctx-popup.show { display: block; }
.aas-user-ctx__facts { display: grid; gap: var(--dtp-space-1); margin: 0; }
.aas-user-ctx__facts > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--dtp-space-2); }
.aas-user-ctx__facts dt { color: var(--dtp-text-muted); font-size: var(--dtp-text-xs); }
.aas-user-ctx__facts dd { margin: 0; color: var(--dtp-text); font-size: var(--dtp-text-xs); font-weight: 500; overflow-wrap: anywhere; }

/* Superuser testing switchers: one disclosure above the profile block. */
.aas-switchers { margin: 0 var(--dtp-space-2); padding-top: var(--dtp-space-1); border-top: 1px solid var(--dtp-border); color: var(--dtp-text-muted); font-size: var(--dtp-text-sm); }
.aas-switchers__summary {
  display: flex;
  align-items: center;
  gap: var(--dtp-space-3);
  min-height: 2.5rem;
  padding: 0 var(--dtp-space-3);
  border-radius: var(--dtp-radius-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.aas-switchers__summary::-webkit-details-marker { display: none; }
.aas-switchers__summary:hover { background: var(--dtp-row-hover); color: var(--dtp-text); }
.aas-switchers__summary:focus-visible { outline: var(--dtp-focus-width) solid var(--dtp-focus); outline-offset: var(--dtp-focus-offset); }
.aas-switchers__summary > .fa-user-gear { width: 1.25rem; text-align: center; font-size: var(--dtp-text-md); }
.aas-switchers__chev { margin-inline-start: auto; font-size: var(--dtp-text-xs); transition: transform var(--dtp-duration-normal); }
.aas-switchers:not([open]) .aas-switchers__chev { transform: rotate(180deg); }
.aas-switchers__body { display: grid; gap: var(--dtp-space-1); padding: var(--dtp-space-1) var(--dtp-space-2) var(--dtp-space-2); }
.aas-switchers__field { margin-top: var(--dtp-space-1); color: var(--dtp-text-muted); font-size: var(--dtp-text-xs); }
.aas-switchers__control {
  width: 100%;
  min-height: 2.25rem;
  padding: 0 var(--dtp-space-2);
  border: 1px solid var(--dtp-border-strong);
  border-radius: var(--dtp-radius-sm);
  background: var(--dtp-surface);
  color: var(--dtp-text);
  font: inherit;
  font-size: var(--dtp-text-sm);
  text-align: start;
  cursor: pointer;
}
.aas-switchers__org { display: flex; align-items: center; justify-content: space-between; }
.aas-org-panel { max-height: 14rem; overflow-y: auto; border: 1px solid var(--dtp-border-strong); border-radius: var(--dtp-radius-sm); background: var(--dtp-surface); color: var(--dtp-text); }
.aas-org-panel[hidden] { display: none; }
.aas-org-panel__title { padding: var(--dtp-space-2) var(--dtp-space-3); border-bottom: 1px solid var(--dtp-border); color: var(--dtp-text-muted); font-size: var(--dtp-text-xs); font-weight: 600; }
.aas-org-panel__body { padding: var(--dtp-space-1) 0; }
.aas-org-panel__footer { padding: var(--dtp-space-2) var(--dtp-space-3); border-top: 1px solid var(--dtp-border); }
.aas-org-panel__footer[hidden] { display: none; }
.aas-org-panel__save { width: 100%; min-height: 2.25rem; border: 0; border-radius: var(--dtp-radius-sm); background: var(--dtp-primary-fill); color: var(--dtp-on-primary); font: inherit; font-weight: 600; cursor: pointer; }
/* (html.dtp-rail-boot: boot.js marks a sidebar that will be the rail before app.js collapses it; the
   rail's head and foot already take their rail layout in that first frame, instead of flashing the card.) */
/* The rail (collapsed or peeking): "Your access" and the switchers never lay out inside 64px; they
   open as flyouts beside it (app.js dtpFlyout). The switchers are an icon button there. */
:is(#sidebar.collapsed, #sidebar.peeking, html.dtp-rail-boot #sidebar) #user-ctx-popup,
:is(#sidebar.collapsed, #sidebar.peeking, html.dtp-rail-boot #sidebar) #user-ctx-popup.show { display: none; }
:is(#sidebar.collapsed, #sidebar.peeking, html.dtp-rail-boot #sidebar) .aas-switchers { margin: 0 var(--dtp-space-2); border-top: 0; }
:is(#sidebar.collapsed, #sidebar.peeking, html.dtp-rail-boot #sidebar) .aas-switchers__summary { justify-content: center; padding: 0; }
:is(#sidebar.collapsed, #sidebar.peeking, html.dtp-rail-boot #sidebar) .aas-switchers__summary > :not(.fa-user-gear) { display: none; }
/* Rail head: the brand mark (T.EN globe, 32px) whole at the top, the expand chevron under it as a
   quiet icon button (no box; the focus ring on focus). */
:is(#sidebar.collapsed, html.dtp-rail-boot #sidebar) .sidebar-header { justify-content: flex-start; gap: var(--dtp-space-1); padding: 0.625rem 0 var(--dtp-space-2); }
:is(#sidebar.collapsed, html.dtp-rail-boot #sidebar) .sidebar-header::before { flex: 0 0 auto; }
:root:not([data-palette="ten"]) :is(#sidebar.collapsed, html.dtp-rail-boot #sidebar) .sidebar-header { justify-content: center; padding-block: 0; }   /* Default: no mark, the chevron centred */
#sidebar .sidebar-toggle-btn { width: 2rem; height: 2rem; border: 0; border-radius: var(--dtp-radius-sm); background: none; color: var(--dtp-text-muted); box-shadow: none; }
#sidebar .sidebar-toggle-btn:hover { background: var(--dtp-row-hover); color: var(--dtp-text); }
/* Rail foot: a stack of icon buttons centred in the rail, no card: the switchers (superusers), your
   avatar (opens "Your access"), sign out; a hairline above the stack, one spacing between them. */
:is(#sidebar.collapsed, #sidebar.peeking, html.dtp-rail-boot #sidebar) .aas-switchers { margin: 0 var(--dtp-space-2); padding: var(--dtp-space-2) 0 0; border-top: 1px solid var(--dtp-border); }
:is(#sidebar.collapsed, #sidebar.peeking, html.dtp-rail-boot #sidebar) .aas-switchers__summary { width: 2.5rem; min-height: 2.5rem; margin: 0 auto; }
:is(#sidebar.collapsed, #sidebar.peeking, html.dtp-rail-boot #sidebar) .user-profile-container { margin: 0 var(--dtp-space-2); padding: var(--dtp-space-2) 0; border-top: 1px solid var(--dtp-border); border-radius: 0; background: none; }
:is(#sidebar.collapsed, #sidebar.peeking, html.dtp-rail-boot #sidebar) .aas-switchers + .user-profile-container { padding-top: var(--dtp-space-1); border-top: 0; }
:is(#sidebar.collapsed, #sidebar.peeking, html.dtp-rail-boot #sidebar) .user-profile-container > .user-profile-row { flex-direction: column; align-items: center; gap: var(--dtp-space-1); }
:is(#sidebar.collapsed, #sidebar.peeking, html.dtp-rail-boot #sidebar) .aas-you { flex: 0 0 auto; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: var(--dtp-radius-pill); }
:is(#sidebar.collapsed, #sidebar.peeking, html.dtp-rail-boot #sidebar) .aas-you .user-profile-info { display: none; }
:is(#sidebar.collapsed, #sidebar.peeking, html.dtp-rail-boot #sidebar) .user-profile-container .user-profile-actions { display: flex; flex-direction: column; align-items: center; gap: var(--dtp-space-1); }
:is(#sidebar.collapsed, #sidebar.peeking, html.dtp-rail-boot #sidebar) .user-profile-actions > :not(.logout-red) { display: none; }   /* change password: in the expanded sidebar */
:is(#sidebar.collapsed, #sidebar.peeking, html.dtp-rail-boot #sidebar) .logout-btn { width: 2.5rem; height: 2.5rem; padding: 0; }
@media (pointer: coarse) {
  :is(#sidebar.collapsed, #sidebar.peeking, html.dtp-rail-boot #sidebar) :is(.aas-switchers__summary, .aas-you, .logout-btn) { width: var(--dtp-touch-target); height: var(--dtp-touch-target); min-height: var(--dtp-touch-target); }
}

.aas-flyout {
  position: fixed;
  z-index: var(--dtp-z-dropdown);
  display: block;
  box-sizing: border-box;
  width: 18rem;
  max-height: calc(100vh - 1rem);
  margin: 0;
  padding: var(--dtp-space-3);
  overflow-y: auto;
  border: 1px solid var(--dtp-border-strong);
  border-radius: var(--dtp-radius-md);
  background: var(--dtp-surface-raised);
  box-shadow: var(--dtp-shadow-md);
  color: var(--dtp-text);
  font-size: var(--dtp-text-sm);
}
.aas-flyout:focus-visible { outline: var(--dtp-focus-width) solid var(--dtp-focus); outline-offset: var(--dtp-focus-offset); }
#user-ctx-popup.aas-flyout { border-bottom: 1px solid var(--dtp-border-strong); }

/* ---- Side tabs, scroll button --------------------------------------------------------------------
   The scroll button was a filled gradient circle above every dialog (z-index 9999); now a quiet
   round button under the panels, hidden when there is nothing to scroll. */
.dtp-scroll-btn {
  position: fixed;
  inset-block-end: var(--dtp-space-5);
  inset-inline-end: var(--dtp-space-5);
  z-index: var(--dtp-z-overlay);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--dtp-border-strong);
  border-radius: var(--dtp-radius-pill);
  background: var(--dtp-surface-raised);
  color: var(--dtp-primary-text);
  box-shadow: var(--dtp-shadow-md);
  font-size: var(--dtp-text-md);
  cursor: pointer;
}
.dtp-scroll-btn:hover { border-color: var(--dtp-primary); }
.dtp-scroll-btn:focus-visible { outline: var(--dtp-focus-width) solid var(--dtp-focus); outline-offset: var(--dtp-focus-offset); }
.dtp-scroll-btn[hidden] { display: none; }
.global-side-btn-arrow { font-size: var(--dtp-text-xs); }
/* The page gutter (owner: "check left side space ... everywhere"): one inline padding for every
   page, left and right alike, from one token; the page's own outer paddings (16-24px, a centred
   1100px column on Reports, none on Home) give way to it. The header title starts on the same line.
   Full-bleed pages (workbench, ISO viewer, compare, body.aas-full-bleed) keep their own layout. */
:root { --dtp-page-gutter: 0.75rem; }
@media (min-width: 768px) { :root { --dtp-page-gutter: 1rem; } }
@media (min-width: 1280px) { :root { --dtp-page-gutter: 1.5rem; } }
body:not(.aas-full-bleed):not(:has([data-drawing-workbench], .iso-viewer, #compare-root)) #main-content > :not(.main-header) {
  padding-inline: var(--dtp-page-gutter);
  margin-inline: 0;
}
#main-content > .main-header { padding-inline: var(--dtp-page-gutter); }
/* the menu button is hidden on a desktop; the title then starts at the gutter (it kept the button's gap) */
@media (min-width: 1024px) { #main-content > .main-header > div:first-child > h1 { margin-left: 0; } }

/* The side tabs' gutter (ruling Q9): on a desktop with a mouse the tabs have one width and the page
   content stops left of them (they covered the register's results line and the admin chevrons). The
   header keeps the full width. Full-bleed pages that size themselves to the window (drawing
   workbench, ISO viewer, compare; or any page with body.aas-full-bleed) opt out: the tabs overlay
   them as before. */
:root { --dtp-side-tabs-w: 2rem; }
@media (min-width: 1024px) and (pointer: fine) {
  .global-side-btn { width: var(--dtp-side-tabs-w); min-width: 0; }
  #main-content { padding-inline-end: var(--dtp-side-tabs-w); }
  #main-content > .main-header { margin-inline-end: calc(-1 * var(--dtp-side-tabs-w)); }
  body:is(.aas-full-bleed, :has([data-drawing-workbench], .iso-viewer, #compare-root)) #main-content { padding-inline-end: 0; }
  body:is(.aas-full-bleed, :has([data-drawing-workbench], .iso-viewer, #compare-root)) #main-content > .main-header { margin-inline-end: 0; }
}
/* Phones: the tabs leave the middle of the reading column and stack above the scroll button,
   icon and count only (the vertical words took 70px of the right edge). */
@media (max-width: 640px) {
  .dtp-scroll-btn { inset-block-end: var(--dtp-space-4); inset-inline-end: var(--dtp-space-2); }
  .global-side-toggles { top: auto; bottom: calc(var(--dtp-space-4) + 2.75rem + var(--dtp-space-2)); transform: none; gap: var(--dtp-space-1); }
  .global-side-btn { flex-direction: row; justify-content: center; gap: var(--dtp-space-1); min-width: var(--dtp-touch-target); min-height: var(--dtp-touch-target); padding: 0 var(--dtp-space-2); }
  .global-side-btn-label { display: none; }
}

/* Panel furniture (was 9-11px inline). */
button.global-pagination-btn { padding: 0; font-family: inherit; }   /* the pager arrows and numbers are buttons now (were spans) */
.global-pagination-btn.is-current { background: var(--dtp-primary-fill); border-color: var(--dtp-primary-fill); color: var(--dtp-on-primary); }
.aas-pg-gap { color: var(--dtp-text-muted); }
.aas-zoom-level { min-width: 2.5rem; color: var(--dtp-text-muted); font-size: var(--dtp-text-xs); text-align: center; font-variant-numeric: tabular-nums; cursor: pointer; }
.aas-pg-info { color: var(--dtp-text-muted); font-size: var(--dtp-text-xs); }
.aas-zoom-group { display: flex; align-items: center; gap: var(--dtp-space-1); }
.aas-ocr-search { flex: 1; min-width: 0; padding: var(--dtp-space-1) var(--dtp-space-2); border: 1px solid var(--dtp-border-strong); border-radius: var(--dtp-radius-sm); background: var(--dtp-surface); color: var(--dtp-text); font-size: var(--dtp-text-xs); }
.aas-ocr-all { color: var(--dtp-primary-text); font-size: var(--dtp-text-xs); text-decoration: none; }
.aas-ocr-all:hover { text-decoration: underline; }

/* ---- Floors (coarse pointers) -------------------------------------------------------------------- */
@media (pointer: coarse) {
  #sidebar .sidebar-close-btn,
  .aas-switchers__summary,
  .aas-switchers__control,
  .aas-org-panel__save,
  .main-header .aas-display__btn,
  .main-header .aas-display__panel select { min-width: var(--dtp-touch-target); min-height: var(--dtp-touch-target); }
  #sidebar .logout-btn { width: var(--dtp-touch-target); height: var(--dtp-touch-target); }
  :is(.global-pagination-btn, .global-btn-sm, .global-page-size-select, .global-sel, .global-panel-close, .ocr-font-btn, .ocr-panel-close, .ocr-mark-read-btn) { min-width: var(--dtp-touch-target); min-height: var(--dtp-touch-target); }
  :is(.global-search-input, .aas-ocr-search) { min-height: var(--dtp-touch-target); }
  .global-zoom-group .global-btn-sm,
  .aas-zoom-level { display: inline-flex; align-items: center; justify-content: center; min-width: var(--dtp-touch-target); min-height: var(--dtp-touch-target); }
  .main-header .aas-chrome-btn { min-width: var(--dtp-touch-target); min-height: var(--dtp-touch-target); }
  .main-header #new-tp-dossier-btn { min-height: var(--dtp-touch-target); }
  @media (max-width: 767px) { .main-header #new-tp-dossier-btn { min-width: var(--dtp-touch-target); } }
}

/* ---- Administration (body.aas-admin) -------------------------------------------------------------
   The home: named sections of cards of one height, one quiet button style (35 filled "View All"
   buttons before), the icon in the text colour (a pastel tile per card before). */
.aas-admin .admin-section { margin-bottom: var(--dtp-space-5); }
.aas-admin .admin-section:last-child { margin-bottom: 0; }
.aas-admin .admin-section-header {
  display: flex;
  align-items: center;
  gap: var(--dtp-space-3);
  min-height: var(--dtp-touch-target);
  margin: 0 0 var(--dtp-space-3);
  border-bottom: 1px solid var(--dtp-border);
  cursor: pointer;
  user-select: none;
}
.aas-admin .admin-section.collapsed .admin-section-header { margin-bottom: 0; }
.aas-admin .admin-section-header:focus-visible { outline: var(--dtp-focus-width) solid var(--dtp-focus); outline-offset: var(--dtp-focus-offset); }
.aas-admin .admin-section-header > i:first-child { width: 1.5rem; flex: 0 0 1.5rem; text-align: center; color: var(--dtp-text-muted); font-size: var(--dtp-text-md); }
.aas-admin .admin-section-title { margin: 0; color: var(--dtp-text); font-size: var(--dtp-text-lg); font-weight: 600; }
.aas-admin .admin-section-header:hover .admin-section-title { color: var(--dtp-primary-text); }
.aas-admin .admin-section-desc { margin: 0 0 0 auto; color: var(--dtp-text-muted); font-size: var(--dtp-text-sm); text-align: end; }
.aas-admin .admin-section-chevron { flex: 0 0 auto; color: var(--dtp-text-muted); font-size: var(--dtp-text-sm); transition: transform var(--dtp-duration-normal); }
.aas-admin .admin-section.collapsed .admin-section-chevron { transform: rotate(-90deg); }
.aas-admin .admin-section.collapsed .admin-grid { display: none; }
.aas-admin .admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  grid-auto-rows: minmax(9.5rem, auto);
  gap: var(--dtp-space-3);
}
.aas-admin .admin-card {
  display: flex;
  flex-direction: column;
  gap: var(--dtp-space-3);
  height: 100%;
  padding: var(--dtp-space-3) var(--dtp-space-4);
  border: 1px solid var(--dtp-border);
  border-radius: var(--dtp-radius-md);
  background: var(--dtp-surface);
}
.aas-admin .admin-card:hover { border-color: var(--dtp-border-strong); }
.aas-admin .admin-card-header { display: flex; align-items: flex-start; gap: var(--dtp-space-3); flex: 1 1 auto; margin: 0; }
.aas-admin .admin-card-icon { flex: 0 0 1.5rem; width: 1.5rem; color: var(--dtp-text-muted); font-size: var(--dtp-text-md); line-height: 1.5; text-align: center; }
.aas-admin .admin-card-title { margin: 0 0 var(--dtp-space-1); color: var(--dtp-text); font-size: var(--dtp-text-md); font-weight: 600; line-height: 1.3; }
.aas-admin .admin-card-description { margin: 0; color: var(--dtp-text-muted); font-size: var(--dtp-text-sm); line-height: 1.4; }
.aas-admin .admin-card-actions { display: flex; flex-wrap: wrap; gap: var(--dtp-space-2); margin: 0; padding-inline-start: calc(1.5rem + var(--dtp-space-3)); }
.aas-admin .admin-nav-form { display: inline; margin: 0; }
.aas-admin .admin-btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--dtp-space-3);
  border: 1px solid var(--dtp-border-strong);
  border-radius: var(--dtp-radius-sm);
  background: var(--dtp-surface);
  color: var(--dtp-primary-text);
  font: inherit;
  font-size: var(--dtp-text-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.aas-admin .admin-btn:hover { border-color: var(--dtp-primary); background: var(--dtp-primary-soft); }
.aas-admin .admin-btn:focus-visible { outline: var(--dtp-focus-width) solid var(--dtp-focus); outline-offset: var(--dtp-focus-offset); }
@media (max-width: 640px) {
  .aas-admin .admin-section-desc { display: none; }
  .aas-admin .admin-card-actions { padding-inline-start: 0; }
}

/* Every admin list: the table scrolls inside its box (a 700px minimum on the box itself pushed the
   whole page to 724px on a phone), badges and small print at 12px, targets 44px on touch. */
.aas-admin :is(.table-container, .table-responsive, .content-card) { min-width: 0; max-width: 100%; overflow-x: auto; }
.aas-admin :is(.status-badge, .status-pill, .flag-badge, .badge, .survey-id-chip, .section-label, .user-username, .btn-manage, small.text-muted) { font-size: var(--dtp-text-xs); }
.aas-admin .badge-info { background: var(--dtp-info-soft); color: var(--dtp-info-fg); }
.aas-admin .badge-primary { background: var(--dtp-primary-soft); color: var(--dtp-primary-text); }
.aas-admin .badge-role { background: var(--dtp-info-soft); color: var(--dtp-info-fg); }
.aas-admin .badge-dtp { background: var(--dtp-ok-soft); color: var(--dtp-ok-fg); }
.aas-admin .badge-secondary { background: var(--dtp-surface-sunken); color: var(--dtp-text-muted); }
.aas-admin .tab.active { color: var(--dtp-primary-text); }
.aas-admin .btn.btn-outline { border-color: var(--dtp-border-strong); color: var(--dtp-primary-text); font-size: var(--dtp-text-xs); }
/* Filter rows: a control takes the room its label leaves (the search box ran 14px off a 1440 screen). */
.aas-admin .filter-grid .filter-item > :is(select, .search-bar) { flex: 1 1 auto; min-width: 0; width: auto; max-width: none; }
.aas-admin .filter-grid .filter-label { white-space: nowrap; }
/* the search field inside its box: a text input's default width pushed it 8-12px past the box and
   under the side tabs (users at 1440 with the sidebar open, 1280 collapsed) */
.aas-admin .search-bar input { min-width: 0; width: 100%; }
/* Users: nine columns do not fit a tablet ("Last login" was cut). Below 1180px the row number,
   email and department columns go; the email moves under the name. */
.aas-narrow-only { display: none; }
.aas-cell-sub { color: var(--dtp-text-muted); font-size: var(--dtp-text-xs); overflow-wrap: anywhere; }
@media (max-width: 1180px) {
  .aas-admin .data-table .aas-col-optional { display: none; }
  .aas-admin .data-table .aas-narrow-only { display: block; }
  .aas-admin .data-table:has(.aas-col-optional) { min-width: 0; }   /* the page set 900px: Actions scrolled out of view */
}
@media (pointer: coarse) {
  .aas-admin :is(.btn, .btn-back, .btn-primary, .btn-secondary, .btn-manage, .page-link, .admin-btn, .select-control, .form-control, .btn-sm) { min-height: var(--dtp-touch-target); }
  .aas-admin main :is(button, select, .page-link, .btn-icon, .btn-sm, .tab) { min-width: var(--dtp-touch-target); min-height: var(--dtp-touch-target); }
  .aas-admin main input[type="checkbox"] { width: 1.5rem; height: 1.5rem; }   /* 24px: the WCAG 2.5.8 floor for a row's own box */
}

/* ---- Signed-out pages (.aas-auth: sign in, sign up) ----------------------------------------------
   Two panes, no card: the brand pane (the T.EN navy chrome; the lockup comes from ten.css) says what
   TP2D is in one sentence under the mark; the form pane holds one form and one filled button. The
   scheme stays light (pinned on <html>); the palette follows the browser's choice (T.EN by default). */
.aas-auth { margin: 0; min-height: 100vh; background: var(--dtp-canvas); color: var(--dtp-text-muted); font-family: var(--dtp-font-ui); line-height: 1.5; }
.aas-auth *, .aas-auth *::before, .aas-auth *::after { box-sizing: border-box; }
.auth { display: grid; grid-template-columns: minmax(20rem, 26%) 1fr; min-height: 100vh; }   /* the brand pane takes about a quarter; the form sits in the middle of the rest */
.auth__brand {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--dtp-space-7);
  padding: var(--dtp-space-7) var(--dtp-space-7) var(--dtp-space-7);
  background: var(--dtp-chrome-bg, var(--dtp-surface-sunken));   /* Neutral: a quiet grey pane */
  color: var(--dtp-chrome-fg, var(--dtp-text));
}
.auth__owner { display: none; }
.auth__product { display: grid; gap: var(--dtp-space-4); max-width: 26rem; margin-block-end: auto; margin-block-start: auto; }
.auth__mark {
  justify-self: start;
  padding: var(--dtp-space-1) var(--dtp-space-3);
  border: 2px solid currentColor;
  border-radius: var(--dtp-radius-stamp);
  font-family: var(--dtp-font-mono);
  font-size: var(--dtp-text-3xl);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.1;
}
.auth__lede { margin: 0; color: var(--dtp-chrome-fg-muted, var(--dtp-text-muted)); font-size: var(--dtp-text-md); max-width: 24rem; }
.auth__panel { display: flex; align-items: center; justify-content: center; padding: var(--dtp-space-7) var(--dtp-space-5); background: var(--dtp-surface); }   /* the form in the middle of the white pane */
.auth__form { width: 100%; max-width: 24rem; }
.auth__form--wide { max-width: 36rem; }
.auth__title { margin: 0 0 var(--dtp-space-2); color: var(--dtp-text); font-family: var(--dtp-font-display, var(--dtp-font-ui)); font-size: var(--dtp-text-2xl); font-weight: 600; line-height: 1.2; }
.auth__hint { margin: 0 0 var(--dtp-space-6); font-size: var(--dtp-text-sm); }
.aas-auth form { display: grid; gap: var(--dtp-space-4); }
.aas-auth .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--dtp-space-4); }
.aas-auth .form-group { display: grid; gap: var(--dtp-space-1); margin: 0; }
.aas-auth .form-group label { color: var(--dtp-text); font-size: var(--dtp-text-sm); font-weight: 500; }
.aas-auth .form-control {
  width: 100%; min-height: var(--dtp-touch-target); padding: var(--dtp-space-2) var(--dtp-space-3);
  border: 1px solid var(--dtp-border-strong); border-radius: var(--dtp-radius-sm);
  background: var(--dtp-surface); color: var(--dtp-text); font: inherit; font-size: var(--dtp-text-md);
}
.aas-auth .form-control:focus { outline: none; border-color: var(--dtp-focus); box-shadow: 0 0 0 3px var(--dtp-primary-soft); }
.auth__remember { display: flex; align-items: center; gap: var(--dtp-space-2); color: var(--dtp-text); font-size: var(--dtp-text-sm); cursor: pointer; }
.auth__remember input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--dtp-primary-fill); }
.aas-auth .btn { width: 100%; min-height: var(--dtp-touch-target); border: 0; cursor: pointer; font: inherit; font-size: var(--dtp-text-md); font-weight: 600; }
.aas-auth .btn-primary { margin-block-start: var(--dtp-space-2); border-radius: var(--dtp-radius-pill); background-color: var(--dtp-chrome-bg, var(--dtp-primary-fill)); color: var(--dtp-chrome-fg, var(--dtp-on-primary)); }   /* T.EN: the brand band's navy */
.aas-auth .btn-primary:hover { background-color: color-mix(in srgb, var(--dtp-chrome-bg, var(--dtp-primary-fill)) 80%, black); }
.aas-auth .btn-primary:focus-visible { outline: var(--dtp-focus-width) solid var(--dtp-focus); outline-offset: var(--dtp-focus-offset); }
.auth__switch { margin: var(--dtp-space-5) 0 0; font-size: var(--dtp-text-sm); }
.aas-auth :is(.signup-link, .signin-link) { color: var(--dtp-primary-text); font-weight: 600; }
.aas-auth .alert { margin: 0 0 var(--dtp-space-4); padding: var(--dtp-space-3); border: 1px solid; border-inline-start-width: 4px; border-radius: var(--dtp-radius-sm); font-size: var(--dtp-text-sm); }
.aas-auth .alert ul { margin: 0; padding-inline-start: var(--dtp-space-4); }
.aas-auth .alert-danger, .aas-auth .alert-error { background: var(--dtp-crit-soft); border-color: var(--dtp-crit-solid); color: var(--dtp-crit-fg); }
.aas-auth .alert-success { background: var(--dtp-ok-soft); border-color: var(--dtp-ok-solid); color: var(--dtp-ok-fg); }
.aas-auth .alert-warning { background: var(--dtp-warn-soft); border-color: var(--dtp-warn-solid); color: var(--dtp-warn-fg); }
.aas-auth .alert-info { background: var(--dtp-info-soft); border-color: var(--dtp-info-solid); color: var(--dtp-info-fg); }
.aas-auth .lockout-header { display: flex; align-items: center; gap: var(--dtp-space-2); }
.aas-auth .required { color: var(--dtp-crit-fg); }
.aas-auth .personal-info-error { color: var(--dtp-crit-fg); font-size: var(--dtp-text-xs); }
/* Tablet and phone: the brand pane becomes a band above the form. */
@media (max-width: 820px) {
  .auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  /* phones: one short band, the lockup left, the mark and the lede to its right */
  .auth__brand { flex-direction: row; align-items: center; gap: var(--dtp-space-4); padding: var(--dtp-space-4) var(--dtp-space-4) var(--dtp-space-2); }   /* half the gap under the lede */
  .auth__brand { align-items: stretch; }
  .auth__owner { align-self: center; margin-inline: auto; margin-block-end: var(--dtp-space-2); }   /* in the middle of the free left part, on the band's middle line */
  /* the mark top right, the lede at the bottom right, never wider than the right part of the band */
  .auth__product { margin: 0; flex: 0 1 58%; min-width: 0; display: flex; flex-direction: column;
                   justify-content: space-between; align-items: flex-end; gap: var(--dtp-space-2); text-align: right; }
  .auth__mark { font-size: var(--dtp-text-lg); }
  .auth__lede { font-size: var(--dtp-text-xs); line-height: 1.35; }
  .auth__panel { align-items: center; justify-content: center; padding: var(--dtp-space-6) var(--dtp-space-4); }   /* the form in the middle of the white area, both ways */
  .auth__form { margin-block-end: 12vh; }   /* a little above the middle: optically centred */
}