/* =====================================================================================
   PieceDesk « Ardoise » : the software shell (DIRECTION.md section 6). Drawn by shell.js from the
   data attributes on <body>; the geometry is reserved here first, so nothing moves when it renders.
   Side menu 256 from 1024 px, rail 64 from 768 px, phone top bar 48 and tab bar 56 under 768 px.
   The side menu is dark in both themes; the top bar and the tab bar are opaque, never glass (S16).
   ===================================================================================== */

body.pd-app { margin: 0; min-height: 100svh; }
body.pd-app[data-tenant], body.pd-app[data-layout] {
  --pd-side-w: 0px;
  --pd-top-total: var(--pd-topbar-h);
  --pd-proto-h: 0px;
  --pd-sticky-top: calc(var(--pd-top-total) + var(--pd-proto-h));
  --pd-tabbar-total: 0px;
  padding-left: var(--pd-side-w);
  padding-top: var(--pd-sticky-top);
  padding-bottom: calc(var(--pd-tabbar-total) + var(--pd-actionbar-h, 0px));
}
body.pd-app[data-proto] { --pd-proto-h: 40px; }
body.pd-app[data-layout="auth"], body.pd-app[data-layout="public"] { --pd-top-total: 0px; }
@media (min-width: 1024px) { body.pd-app[data-layout="menu"], body.pd-app[data-tenant="backoffice"]:not([data-layout="auth"]) { --pd-side-w: var(--pd-sidebar-w); } }
@media (min-width: 768px) and (max-width: 1023px) { body.pd-app[data-layout="menu"], body.pd-app[data-tenant="backoffice"]:not([data-layout="auth"]) { --pd-side-w: var(--pd-rail-w); } }
@media (max-width: 767px) {
  body.pd-app[data-layout="menu"], body.pd-app[data-layout="pieces"] { --pd-top-total: var(--pd-topbar-h-phone); --pd-tabbar-total: calc(var(--pd-tabbar-h) + env(safe-area-inset-bottom)); }
  body.pd-app[data-tenant="backoffice"]:not([data-layout="auth"]) { --pd-top-total: var(--pd-topbar-h-phone); }
}
/* the dark chrome is reserved before the script runs: no flash, no shift */
body.pd-app:not(.pd-ready)[data-layout="menu"]::before, body.pd-app:not(.pd-ready)[data-tenant="backoffice"]::before {
  content: ""; position: fixed; left: 0; top: 0; bottom: 0; width: var(--pd-side-w); background: var(--app-chrome-bg); z-index: var(--pd-z-sticky);
}
body.pd-app:not(.pd-ready)[data-layout="menu"]::after, body.pd-app:not(.pd-ready)[data-layout="pieces"]::after, body.pd-app:not(.pd-ready)[data-tenant="backoffice"]::after {
  content: ""; position: fixed; left: var(--pd-side-w); right: 0; top: var(--pd-proto-h); height: var(--pd-top-total); background: var(--app-surface); box-shadow: inset 0 -1px 0 var(--app-line); z-index: var(--pd-z-sticky);
}

/* skip link: before the menu (6.8) */
.pd-skip { position: fixed; left: var(--pd-s-2); top: var(--pd-s-1); z-index: var(--pd-z-skip); transform: translateY(-150%); }
.pd-skip:focus-visible { transform: none; }

/* the prototype banner sits above everything, full width */
body > .pd-proto { position: fixed; left: 0; right: 0; top: 0; height: 40px; z-index: calc(var(--pd-z-sticky) + 2); }

/* ---------- side menu (6.2) ---------- */
.pd-side {
  position: fixed; left: 0; top: var(--pd-proto-h); bottom: 0; width: var(--pd-side-w); z-index: var(--pd-z-sticky);
  display: flex; flex-direction: column; background: var(--app-chrome-bg); color: var(--app-chrome-text);
  --pd-hover-here: var(--app-chrome-hover);
}
.pd-app[data-theme="dark"] .pd-side { box-shadow: inset -1px 0 0 var(--app-line); }
.pd-side :focus-visible { outline-color: var(--pd-focus-chrome, var(--app-chrome-text)); box-shadow: 0 0 0 2px var(--app-chrome-bg); }
.pd-side__tenant { display: flex; align-items: center; gap: var(--pd-s-15); height: 72px; margin: var(--pd-s-1) var(--pd-s-15) var(--pd-s-05); padding: 0 var(--pd-s-15) 0 var(--pd-s-15); border-radius: var(--pd-r-2); flex: none; min-width: 0; transition: background-color var(--pd-dur-2) var(--pd-ease-out); }
.pd-side__tenant-t { flex: 1; min-width: 0; }
.pd-side__tenant-t b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--app-chrome-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-side__tenant-t span { display: block; font: 400 12px/18px var(--pd-font-mono); color: var(--app-chrome-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-side__tenant > .pd-ic { width: 16px; height: 16px; color: var(--app-chrome-text-2); }
.pd-side__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--pd-s-15) var(--pd-s-15); scrollbar-width: thin; scrollbar-color: var(--app-chrome-active) transparent; }
.pd-side__group { display: flex; align-items: center; height: 32px; margin-top: var(--pd-s-1); padding: 0 var(--pd-s-15); font: 600 13px/18px var(--pd-font-text); color: var(--app-chrome-text-2); white-space: nowrap; }
.pd-side__foot { flex: none; padding: var(--pd-s-1) var(--pd-s-15) var(--pd-s-15); border-top: 1px solid var(--app-chrome-line); }
.pd-entry {
  display: flex; align-items: center; gap: var(--pd-s-15); height: 44px; padding: 0 var(--pd-s-15); border-radius: var(--pd-r-2);
  font-size: 15px; line-height: 22px; color: var(--app-chrome-text); white-space: nowrap; min-width: 0;
  transition: background-color var(--pd-dur-2) var(--pd-ease-out);
}
.pd-entry > .pd-ic { color: var(--app-chrome-text-2); }
.pd-entry > .pd-entry__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pd-entry[aria-current="page"] { background: var(--app-chrome-active); color: var(--app-chrome-active-text); font-weight: 600; }
.pd-entry[aria-current="page"] > .pd-ic { color: var(--app-chrome-active-text); }
.pd-entry__count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--pd-r-1); background: var(--app-chrome-count-bg); color: var(--app-chrome-count-text); font: 600 11px/14px var(--pd-font-text); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .pd-entry:not([aria-current="page"]):hover, .pd-side__tenant:hover { background: var(--app-chrome-hover); } .pd-entry:hover > .pd-ic { color: var(--app-chrome-text); } }
.pd-entry.is-hover { background: var(--app-chrome-hover); }

/* rail of icons, 768 to 1023 (shell.js sets .is-rail from the width; the kit sets it by hand) */
.pd-side.is-rail .pd-side__tenant { justify-content: center; height: 64px; margin: var(--pd-s-1) var(--pd-s-1) var(--pd-s-05); padding: 0; }
.pd-side.is-rail .pd-side__tenant-t, .pd-side.is-rail .pd-side__tenant > .pd-ic { display: none; }
.pd-side.is-rail .pd-side__scroll { padding: 0 var(--pd-s-1) var(--pd-s-1); scrollbar-width: none; }
.pd-side.is-rail .pd-side__group { height: var(--pd-s-1); margin: 0; padding: 0; font-size: 0; }
.pd-side.is-rail .pd-side__foot { padding: var(--pd-s-1); }
.pd-side.is-rail .pd-entry { justify-content: center; width: 48px; padding: 0; position: relative; }
.pd-side.is-rail .pd-entry > .pd-entry__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pd-side.is-rail .pd-entry__count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; }
@media (max-width: 767px) { body > .pd-side { display: none; } }

/* ---------- top bar (6.3) ---------- */
.pd-top {
  position: fixed; left: var(--pd-side-w); right: 0; top: var(--pd-proto-h); height: var(--pd-top-total); z-index: var(--pd-z-sticky);
  display: flex; align-items: center; gap: var(--pd-s-15); padding: 0 var(--pd-s-2) 0 var(--pd-s-4);
  background: var(--app-surface); border-bottom: 1px solid var(--app-line);
}
.pd-top__home { display: flex; align-items: center; gap: var(--pd-s-15); height: 44px; padding: 0 var(--pd-s-1) 0 0; border-radius: var(--pd-r-2); flex: none; min-width: 0; font-weight: 600; font-size: 15px; line-height: 22px; }
.pd-top__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-search {
  display: flex; align-items: center; gap: var(--pd-s-15); width: 360px; min-width: 0; flex: 0 1 360px; height: 44px; padding: 0 var(--pd-s-1) 0 var(--pd-s-15);
  border-radius: var(--pd-r-2); background: var(--app-surface-2); color: var(--app-text-3); font-size: 15px; line-height: 22px; text-align: left;
  transition: background-color var(--pd-dur-2) var(--pd-ease-out);
}
.pd-search > .pd-ic { color: var(--app-text-2); }
.pd-search > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* hover steps the fill one tone; the words step to text-2 with it (meta grey is never on --app-selected) */
@media (hover: hover) { .pd-search:hover { background: var(--app-selected); color: var(--app-text-2); } }
.pd-top__end { margin-left: auto; display: flex; align-items: center; gap: var(--pd-s-05); flex: none; }
.pd-top .pd-btn--icon { position: relative; color: var(--app-text-2); }
.pd-badge { position: absolute; top: 4px; right: 3px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--pd-r-1); background: var(--app-solid); color: var(--app-on-solid); font: 600 11px/14px var(--pd-font-text); font-variant-numeric: tabular-nums; pointer-events: none; }
.pd-me { display: flex; align-items: center; gap: var(--pd-s-15); height: 44px; padding: 0 var(--pd-s-1) 0 var(--pd-s-05); margin-left: var(--pd-s-05); border-radius: var(--pd-r-2); text-align: left; transition: background-color var(--pd-dur-2) var(--pd-ease-out); }
.pd-me__t b { display: block; font: 600 14px/18px var(--pd-font-text); white-space: nowrap; }
.pd-me__t span { display: block; font-size: 13px; line-height: 18px; color: var(--app-text-3); white-space: nowrap; }
@media (hover: hover) { .pd-me:hover, .pd-top__home:hover { background: var(--app-hover); } }
.pd-me[aria-expanded="true"] { background: var(--app-selected); }
.pd-me[aria-expanded="true"] .pd-me__t span { color: var(--app-text-2); }
.pd-top__title { display: none; }
.pd-top .pd-show-phone { display: none; }
.pd-top.is-narrow { padding-left: var(--pd-s-3); }
.pd-top.is-narrow .pd-search { flex-basis: 300px; }
.pd-top.is-narrow .pd-me__t { display: none; }
.pd-top.is-narrow .pd-me { padding: 0 var(--pd-s-05); }
/* phone top bar: 48 high, square 28 and the screen's title at the left; search, bell, avatar 32 */
.pd-top.is-phone { padding: 0 var(--pd-s-05) 0 var(--pd-s-2); gap: var(--pd-s-1); }
.pd-top.is-phone .pd-top__name, .pd-top.is-phone .pd-search, .pd-top.is-phone .pd-hide-phone { display: none; }
.pd-top.is-phone .pd-show-phone { display: inline-flex; }
.pd-top.is-phone .pd-top__title { display: block; flex: 1; min-width: 0; font: 600 17px/22px var(--pd-font-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-top.is-phone .pd-top__home { padding: 0; height: 44px; width: 44px; margin-left: -8px; justify-content: center; }
.pd-top.is-phone .pd-top__end { gap: 0; }
.pd-top.is-phone .pd-me { margin-left: 0; padding: 0; width: 44px; justify-content: center; }
.pd-top.is-phone .pd-me .pd-av { width: 32px; height: 32px; font-size: 13px; }
.pd-top.is-phone .pd-me__t { display: none; }

/* ---------- account menu (6.3) ---------- */
.pd-acct { width: 300px; padding: var(--pd-s-05) 0; }
.pd-acct .pd-opt { margin: 0 var(--pd-s-05); }
.pd-acct__theme { display: flex; align-items: center; justify-content: space-between; gap: var(--pd-s-15); padding: var(--pd-s-05) var(--pd-s-1) var(--pd-s-05) var(--pd-s-2); min-height: 52px; }
.pd-acct__theme > span { font-size: 15px; line-height: 22px; }

/* ---------- phone tab bar per role (6.5) ---------- */
.pd-tabbar { display: none; }
@media (max-width: 767px) {
  .pd-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--pd-z-sticky);
    display: grid; grid-template-columns: repeat(5, minmax(64px, 1fr)); height: calc(var(--pd-tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--app-surface); border-top: 1px solid var(--app-line);
  }
}
.pd-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px; height: var(--pd-tabbar-h); font: 600 11px/14px var(--pd-font-text); color: var(--app-text-2); -webkit-tap-highlight-color: transparent; }
.pd-tab__icon { display: grid; place-items: center; width: 48px; height: 28px; border-radius: var(--pd-r-2); transition: background-color var(--pd-dur-2) var(--pd-ease-out); }
.pd-tab__icon .pd-ic { width: 24px; height: 24px; }
.pd-tab[aria-current="page"] { color: var(--app-text); }
.pd-tab[aria-current="page"] .pd-tab__icon { background: var(--app-selected); }
.pd-tab:active .pd-tab__icon { background: var(--app-selected); }
.pd-tab:focus-visible { outline-offset: -2px; }

/* the « Plus » sheet: the other entries grouped as in the side menu, rows 52 */
.pd-plus .pd-opt { gap: var(--pd-s-15); }
.pd-plus .pd-opt[aria-current="page"] { background: var(--app-selected); font-weight: 600; }
.pd-plus .pd-entry__count { background: var(--app-solid); color: var(--app-on-solid); }

/* ---------- back office (9.4): our lockup in the dark top bar, sections at the left ---------- */
body[data-tenant="backoffice"] .pd-top { left: 0; padding-left: var(--pd-s-3); }
body[data-tenant="backoffice"] .pd-side { top: var(--pd-top-total); }
body[data-tenant="backoffice"] .pd-side__scroll { padding-top: var(--pd-s-15); }
.pd-bo-brand { display: flex; align-items: center; gap: var(--pd-s-15); height: 44px; flex: none; }
.pd-bo-brand img { height: 24px; width: auto; display: block; }
.pd-bo-brand span { font: 600 14px/20px var(--pd-font-text); color: var(--app-text-2); padding-left: var(--pd-s-05); }   /* no rule beside a label (10.1): space does it */
@media (min-width: 1024px) { body[data-tenant="backoffice"] .pd-bo-brand { width: calc(var(--pd-sidebar-w) - var(--pd-s-3)); } }
/* the person signed in (logiciel.md 5): an address, so PD Mono like the tenant's address; on phones it heads the sections sheet */
.pd-bo-user { font: 400 13px/18px var(--pd-font-mono); color: var(--app-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin-right: var(--pd-s-1); }
.pd-bo-user--sheet { display: block; margin: 0; padding: 0 var(--pd-s-1) var(--pd-s-15); }

/* ---------- public pages (9.3): the business's header, its accent, no menu ---------- */
.pd-pub-head { display: flex; align-items: center; gap: var(--pd-s-15); min-height: 72px; padding: var(--pd-s-15) var(--pd-pad); background: var(--app-surface); border-bottom: 1px solid var(--app-line); }
.pd-pub-head b { display: block; font: 600 17px/22px var(--pd-font-text); }
.pd-pub-head b + span { display: block; font-size: 13px; line-height: 18px; color: var(--app-text-3); }   /* the place, not the square's initials */

/* ---------- the install window and sheet (6.6) ---------- */
.pd-install { display: flex; flex-direction: column; align-items: center; gap: var(--pd-s-2); padding: var(--pd-s-1) 0 var(--pd-s-2); text-align: center; }
.pd-install__id { display: flex; align-items: center; gap: var(--pd-s-15); }
.pd-install__id b { font: 600 16px/22px var(--pd-font-text); }
.pd-install__qr { width: 176px; height: 176px; }
.pd-install__qr svg { width: 100%; height: 100%; }
.pd-install p { max-width: 32ch; color: var(--app-text-2); }
.pd-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pd-s-2); padding: var(--pd-s-1) 0 var(--pd-s-2); counter-reset: none; }
.pd-steps > li { display: flex; flex-direction: column; gap: var(--pd-s-1); min-width: 0; }
.pd-steps__n { display: flex; align-items: center; gap: var(--pd-s-1); color: var(--app-text); }
.pd-steps__n .pd-meta2 { font-weight: 600; font-variant-numeric: tabular-nums; }
.pd-steps > li > p { font-size: 15px; line-height: 22px; hyphens: manual; overflow-wrap: break-word; }

/* ---------- auth (S21): the canvas and a centred card ---------- */
body.pd-app[data-layout="auth"] { display: grid; place-items: center; min-height: 100svh; padding: var(--pd-s-5) var(--pd-s-2); }

/* the frame parts drawn inline in the kit and in the site's frames (not fixed). No stacking of their own: inside a
   site frame they stay under the site's sticky navigation while the page scrolls */
.pd-demo .pd-side, .pd-demo .pd-top, .pd-demo .pd-tabbar { position: relative; left: auto; right: auto; top: auto; bottom: auto; z-index: auto; }
.pd-demo .pd-side { width: 256px; height: 100%; }
.pd-demo .pd-top { --pd-top-total: 56px; height: 56px; }
.pd-demo .pd-tabbar { display: grid; grid-template-columns: repeat(5, minmax(64px, 1fr)); height: 56px; padding: 0; background: var(--app-surface); border-top: 1px solid var(--app-line); }
.pd-demo .pd-side.is-rail { width: 64px; }
.pd-demo .pd-top.is-phone { --pd-top-total: 48px; height: 48px; }