/* sheet.css: the one sheet component (js/v2/ui/sheet.mjs) and the iOS action
   sheet, iOS 26 anatomy (IOS26-SPEC §3.4, mockup "stocks" frames 3 and 4).
   Presentations: bottom (iPhone page sheet, large detent: #1c1c1e, top
   radius 38, grabber 36 x 5), form (centred form sheet), inspector (desktop
   floating panel). Header: glass × leading, centred 17 pt title (+ grey
   subtitle), trailing glass capsule (eye, ⋯) or a filled ✓ circle. Flat
   surfaces only; only transform and opacity animate. */

/* ---------------------------------------------------------------- the stage behind */
/* #app must be the full-viewport stage (position fixed, inset 0) for the
   scale-behind to read as iOS does; the origin is set from JS on open. */
#app {
  transform-origin: 50% 0;
  transition: transform var(--dur-sheet) var(--ease-sheet), border-radius var(--dur-sheet) var(--ease-sheet);
}
body.ui-sheet-behind #app {
  transform: translateY(calc(var(--st) + 2px)) scale(0.93);
  border-radius: var(--radius-sheet);
  overflow: hidden;
}
body.ui-sheet-dragging #app { transition: none; }

/* ---------------------------------------------------------------- layer, backdrop */
.ui-sheet-layer { position: absolute; inset: 0; z-index: var(--z-sheet); pointer-events: none; overflow: hidden; overflow: clip; }
.ui-sheet-layer[data-presentation="inspector"] { z-index: var(--z-inspector); }
.ui-sheet-backdrop {
  position: absolute; inset: 0; background: var(--scrim); opacity: 0;
  transition: opacity var(--dur-sheet) var(--ease-sheet);
}
.ui-sheet-layer.is-open .ui-sheet-backdrop { opacity: 1; pointer-events: auto; }
.ui-sheet-layer[data-presentation="inspector"] .ui-sheet-backdrop { display: none; }
body.ui-sheet-dragging .ui-sheet-backdrop { transition: none; }

/* ---------------------------------------------------------------- panel */
.ui-sheet {
  position: absolute; display: flex; flex-direction: column; overflow: hidden;
  background: var(--cell);
  color: var(--label);
  pointer-events: auto; outline: none; visibility: hidden;
  --chart-bg: var(--cell);
  --chart-halo: var(--cell);
  transition:
    transform var(--dur-sheet) var(--ease-sheet),
    opacity var(--dur-sheet) var(--ease-sheet),
    visibility 0s linear var(--dur-sheet);
}
.ui-sheet-layer.is-open .ui-sheet {
  visibility: visible;
  transition:
    transform var(--dur-sheet) var(--ease-sheet),
    opacity var(--dur-sheet) var(--ease-sheet),
    visibility 0s linear 0s;
}
.ui-sheet.is-dragging { transition: none; }

/* bottom: iPhone page sheet, large detent (edge to edge, opaque, top radius 38) */
[data-presentation="bottom"] > .ui-sheet {
  left: 0; right: 0; bottom: 0; top: calc(var(--st) + var(--sheet-top));
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  transform: translate3d(0, 105%, 0);
}
.is-open[data-presentation="bottom"] > .ui-sheet { transform: translate3d(0, 0, 0); }

/* form: centred form sheet (580 regular, 720 wide) */
[data-presentation="form"] > .ui-sheet {
  left: 50%; top: 6vh; bottom: 6vh;
  width: min(580px, calc(100% - 48px));
  border-radius: var(--radius-panel);
  transform: translate3d(-50%, calc(100% + 8vh), 0);
}
[data-presentation="form"][data-size="wide"] > .ui-sheet { width: min(720px, calc(100% - 48px)); }
.is-open[data-presentation="form"] > .ui-sheet { transform: translate3d(-50%, 0, 0); }

/* inspector: a floating #1c1c1e panel on the right, like the sidebar; the
   content grid never reflows */
[data-presentation="inspector"] > .ui-sheet {
  top: calc(var(--st) + var(--float-inset)); right: var(--float-inset); bottom: var(--float-inset);
  width: var(--inspector-w);
  border-radius: var(--radius-panel);
  opacity: 0; transform: translate3d(calc(var(--inspector-w) + var(--float-inset)), 0, 0);
  transition:
    transform var(--dur-scrub-release) var(--ease-out),
    opacity var(--dur-scrub-release) var(--ease-out),
    visibility 0s linear var(--dur-scrub-release);
}
.is-open[data-presentation="inspector"] > .ui-sheet {
  opacity: 1; transform: translate3d(0, 0, 0);
  transition:
    transform var(--dur-scrub-release) var(--ease-out),
    opacity var(--dur-scrub-release) var(--ease-out),
    visibility 0s linear 0s;
}

/* ---------------------------------------------------------------- header
   A solid sheet-coloured band (94 % + blur, no line) so scrolled content
   never ghosts through; the buttons on it are glass. */
.ui-sheet-head {
  position: relative; z-index: var(--z-sticky);
  flex: none; padding: 14px 0 8px; touch-action: none; -webkit-user-select: none; user-select: none;
  background: var(--material);
  -webkit-backdrop-filter: var(--glass-filter-thick);
  backdrop-filter: var(--glass-filter-thick);
}
[data-presentation="bottom"] .ui-sheet-head { cursor: grab; }
.ui-sheet-grabber {
  position: absolute; top: 6px; left: 50%;
  width: var(--grabber-w); height: var(--grabber-h); margin-left: calc(var(--grabber-w) / -2);
  border-radius: var(--radius-full); background: var(--fill-1);
}
.ui-sheet-layer:not([data-presentation="bottom"]) .ui-sheet-grabber { display: none; }
/* The side columns never shrink below their controls (a long trailing
   primary such as "Clôturer octobre" keeps its width); the title takes the
   space left between them and ends in "…" rather than running under a
   control. With room to spare the sides share it and the title is centred. */
.ui-sheet-nav {
  display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
  align-items: center; gap: 8px; min-height: var(--control-h); padding: 0 var(--margin);
}
@media (min-width: 1024px) { .ui-sheet-nav { padding: 0 16px; } }
.ui-sheet-lead { justify-self: start; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ui-sheet-trail { justify-self: end; display: flex; align-items: center; gap: 8px; }
.ui-sheet-trail-slot { display: contents; }
.ui-sheet-group:empty { display: none; }
.ui-sheet-group > .ui-iconbtn:only-child { width: var(--control-h); }
.ui-sheet-titles {
  min-width: 0; max-width: 100%; text-align: center;
  transition: opacity var(--dur-tab-out) var(--ease-linear);
}
.ui-sheet-title {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: var(--t-headline); letter-spacing: var(--tr-headline);
}
.ui-sheet-subtitle {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: var(--t-secondary); letter-spacing: var(--tr-secondary); color: var(--label-2);
  font-variant-numeric: tabular-nums;
}
/* large inline title mode (kicker): the centred title waits until the big one scrolls away */
.ui-sheet[data-large="1"][data-level="1"] .ui-sheet-head:not(.is-scrolled) .ui-sheet-titles { opacity: 0; }
.ui-sheet-back.is-hidden { display: none; }
.ui-sheet-close[hidden] { display: none; }
.ui-sheet-back > .ui-ico { width: 22px; height: 22px; }
/* the task-sheet confirm: a filled white circle with a black check */
.ui-sheet-done {
  display: grid; place-items: center; flex: none;
  width: var(--control-h); height: var(--control-h);
  border-radius: var(--radius-full);
  background: var(--primary-bg); color: var(--on-primary);
  transition: transform var(--dur-press-out) var(--ease-out);
}
.ui-sheet-done > .ui-ico { width: 20px; height: 20px; stroke-width: 2.4; }
.ui-sheet-done:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }

/* ---------------------------------------------------------------- large inline title (Stocks "PEA  Investments") */
.ui-sheet-ltitle {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 2px var(--margin) 0; padding-bottom: 12px;
  border-bottom: var(--hairline) solid var(--sep);
}
.ui-sheet-ltitle-name { font: var(--t-large-title); letter-spacing: var(--tr-large-title); min-width: 0; overflow-wrap: anywhere; }
.ui-sheet-ltitle-kicker { font: var(--t-body); letter-spacing: var(--tr-body); color: var(--label-2); }

/* ---------------------------------------------------------------- pages (in-sheet stack) */
.ui-sheet-pages { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ui-sheet-page {
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--sb) + 32px);
  background: var(--cell); outline: none;
}
.ui-sheet-page:has(.ui-actionbar) { padding-bottom: 0; }
/* a page whose content ends in an action bar keeps the bar on the bottom edge */
.ui-sheet-page:has(> * > .ui-actionbar) > * { display: flex; flex-direction: column; min-height: 100%; }
.ui-sheet-page .ui-actionbar { margin-top: auto; }
.ui-sheet-page.is-covered { visibility: hidden; }

/* components inside a sheet sit one step up */
.ui-sheet .ui-group { background: var(--cell-2); }
.ui-sheet .ui-press:active { background-color: var(--cell-3); }
.ui-sheet .ui-month { background: var(--cell-2); }

/* ---------------------------------------------------------------- action sheet (actionSheet, confirmDiscard): iOS 26 inset groups */
.ui-asheet-layer { position: absolute; inset: 0; z-index: var(--z-actionsheet); overflow: hidden; overflow: clip; }
.ui-asheet-backdrop {
  position: absolute; inset: 0; background: var(--scrim); opacity: 0;
  transition: opacity var(--dur-sheet) var(--ease-sheet);
}
.ui-asheet-layer.is-open .ui-asheet-backdrop { opacity: 1; }
.ui-asheet {
  position: absolute; display: flex; flex-direction: column; gap: 8px;
  left: 8px; right: 8px; bottom: calc(var(--sb) + 8px);
  transform: translate3d(0, calc(100% + var(--sb) + 16px), 0);
  transition: transform var(--dur-sheet) var(--ease-sheet), opacity var(--dur-fade) var(--ease-linear);
}
.ui-asheet-layer.is-open .ui-asheet { transform: translate3d(0, 0, 0); }
.ui-asheet-layer[data-presentation="center"] .ui-asheet {
  left: 50%; right: auto; bottom: auto; top: 50%; width: 320px;
  opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.96);
}
.ui-asheet-layer[data-presentation="center"].is-open .ui-asheet { opacity: 1; transform: translate3d(-50%, -50%, 0); }
.ui-asheet-group {
  overflow: hidden; border-radius: var(--radius-panel);
  background: var(--cell-2);
}
.ui-asheet-title {
  padding: 14px 16px; text-align: center;
  font: var(--t-footnote); letter-spacing: var(--tr-footnote); color: var(--label-2);
}
.ui-asheet-btn {
  position: relative; display: block; width: 100%; min-height: 56px; padding: 0 16px; text-align: center;
  font: var(--t-body); letter-spacing: var(--tr-body); color: var(--label);
}
.ui-asheet-title + .ui-asheet-btn::before,
.ui-asheet-btn + .ui-asheet-btn::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--sep); transform: scaleY(0.5); transform-origin: 0 0;
}
.ui-asheet-btn.is-destructive { color: var(--neg); }
.ui-asheet-btn.is-cancel { font-weight: 600; }
.ui-asheet-btn:active { background: var(--cell-3); }
@media (hover: hover) { .ui-asheet-btn:hover { background: var(--fill-2); } }