/* Separator colour is theme-aware. */
:root{ --disc-sep: rgba(60,60,67,.18); }
html[data-theme="dark"]{ --disc-sep: rgba(255,255,255,.14); }

/* ==========================================================================
   10-disclosure.css — iOS-style disclosure groups (prototype)
   Scope: customer detail accordions (<details> with .customer-*-details).
   Each group is one inset-grouped card. Summary = row with chevron.
   Body = rows separated by hairlines. No card-in-card, no hard shadow.
   Loaded after 00-chrome.css. Remove the legacy summary rules once approved.
   ========================================================================== */

#main.customer-detail-view details{
  box-sizing:border-box;
  margin:0 0 12px;
  padding:0;
  background:var(--vg-color-surface);
  border:0;
  border-radius:14px;
  box-shadow:none;
  overflow:hidden;
}

#main.customer-detail-view details > summary.customer-behavior-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-sizing:border-box;
  min-height:52px;
  margin:0;
  padding:14px 16px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  list-style:none;
  cursor:pointer;
  font-size:1rem;
  font-weight:600;
  line-height:1.3;
  color:var(--vg-color-text);
  -webkit-tap-highlight-color:transparent;
}
#main.customer-detail-view details > summary.customer-behavior-summary::-webkit-details-marker{ display:none; }
#main.customer-detail-view details > summary.customer-behavior-summary:active{ background:rgba(120,120,128,.14); }

/* Chevron on the leading edge is the iOS disclosure affordance in RTL. */
#main.customer-detail-view details > summary.customer-behavior-summary::after{
  flex:0 0 auto;
  width:12px;
  height:12px;
  margin:0;
  transition:transform .2s ease;
}
#main.customer-detail-view details[open] > summary.customer-behavior-summary::after{
  transform:rotate(180deg);
}

#main.customer-detail-view details[open] > summary.customer-behavior-summary{
  border-bottom:.5px solid var(--disc-sep);
  margin-bottom:0;
}

/* Body rows: hairline dividers, no nested cards. */
#main.customer-detail-view details > :not(summary){
  margin-inline:16px;
  margin-block:0;
}
#main.customer-detail-view details .card{
  box-shadow:none;
  border:0;
  border-radius:0;
  background:transparent;
  padding-inline:0;
}

@media (prefers-reduced-motion: reduce){
  #main.customer-detail-view details > summary.customer-behavior-summary::after{ transition:none; }
}

/* ==========================================================================
   Push rows (long history lists) and the push sub-page.
   Row = inset-grouped cell: label (start), count (muted), disclosure chevron.
   ========================================================================== */
#main.customer-detail-view a.cd-push-row{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:14px 16px;
  margin:0 0 12px;
  background:var(--vg-color-surface);
  border-radius:14px;
  color:var(--vg-color-text);
  text-decoration:none;
  font-size:1rem;
  font-weight:600;
  -webkit-tap-highlight-color:transparent;
}
#main.customer-detail-view a.cd-push-row:active{ background:rgba(120,120,128,.14); }
#main.customer-detail-view .cd-push-label{ flex:1 1 auto; }
#main.customer-detail-view .cd-push-meta{
  font-weight:500;
  color:var(--vg-color-text-muted);
  font-variant-numeric:tabular-nums;
}
#main.customer-detail-view .cd-push-chev{
  flex:0 0 auto;
  width:14px;
  height:14px;
  fill:none;
  stroke:var(--vg-color-text-muted);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#main.customer-detail-view .cd-push-page{ padding:4px 0 24px; }
#main.customer-detail-view a.cd-push-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  margin:0 0 8px;
  padding:0 12px 0 14px;
  border-radius:999px;
  background:var(--vg-color-surface);
  color:var(--vg-color-text);
  text-decoration:none;
  font-size:.95rem;
  font-weight:600;
}
#main.customer-detail-view a.cd-push-back svg{
  width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}

/* ==========================================================================
   Push sub-page: ledger rows as iOS inset-grouped cells.
   Line 1: title (start) ····· amount (end)
   Line 2: meta (start, muted) ····· status (end)
   ========================================================================== */
#main.customer-detail-view .cd-push-page .customer-tx-list{
  box-sizing:border-box;
  background:var(--vg-color-surface);
  border-radius:14px;
  overflow:hidden;
  padding:0;
}
#main.customer-detail-view .cd-push-page a.ledger-row,
#main.customer-detail-view .cd-push-page .ledger-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 14px;
  grid-template-areas:"name amount chev";
  align-items:center;
  column-gap:14px;
  padding:14px 16px;
  min-height:58px;
  border:0;
  /* iOS separator: starts at the text (leading) inset, runs to the card's trailing edge. */
  background-image:linear-gradient(var(--disc-sep), var(--disc-sep));
  background-repeat:no-repeat;
  background-size:calc(100% - 16px) .5px;
  background-position:left bottom;
  box-shadow:none;
  color:var(--vg-color-text);
}
#main.customer-detail-view .cd-push-page .ledger-row:last-child{ background-image:none; }
#main.customer-detail-view .cd-push-page .ledger-row > .filler{ display:none; }
#main.customer-detail-view .cd-push-page .ledger-row > .name{
  grid-area:name;
  display:block;
  min-width:0;
  font-size:1rem;
  font-weight:600;
  line-height:1.3;
  color:var(--vg-color-text);
}
#main.customer-detail-view .cd-push-page .ledger-row > .name > .sub{
  display:block;
  margin-top:3px;
  font-size:.82rem;
  font-weight:500;
  line-height:1.35;
  color:var(--vg-color-text-muted);
}
#main.customer-detail-view .cd-push-page .ledger-row > .amount{
  grid-area:amount;
  font-size:1rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--vg-color-text);
  white-space:nowrap;
}

/* Disclosure chevron: third grid track on the leading (left, in RTL) edge. */
#main.customer-detail-view .cd-push-page .ledger-row::after{
  grid-area:chev;
  position:static;
  justify-self:center;
  width:12px;
  height:12px;
  margin:0;
  transform:none;
}

/* Context line above the pushed list: which customer these rows belong to. */
#main.customer-detail-view .cd-push-context{
  margin:0 4px 8px;
  font-size:.85rem;
  font-weight:500;
  color:var(--vg-color-text-muted);
}

/* ==========================================================================
   Visits push list: long recommendation text is clamped to two lines per
   detail (iOS secondary-text behaviour). Nothing is hidden: tapping the row
   toggles .is-open to show the full text.
   ========================================================================== */
#main.customer-detail-view .cd-push-page .customer-visit-row-detail{
  display:block;
  max-height:2.7em;          /* two lines at the .sub line-height (1.35) */
  overflow:hidden;
  margin-top:2px;
}
#main.customer-detail-view .cd-push-page .ledger-row.is-open .customer-visit-row-detail{
  max-height:none;
  overflow:visible;
}
#main.customer-detail-view .cd-push-page .ledger-row:not(a){ cursor:pointer; }
/* Action buttons above the list sit clear of the card. */
#main.customer-detail-view .cd-push-page > .btn-row{ margin-bottom:14px; }

/* ==========================================================================
   Behavior push page: the summary cards become one inset-grouped card with
   label (start) and value (end) rows; the last-visit card keeps its surface.
   ========================================================================== */
#main.customer-detail-view .cd-push-page .cards{
  display:block;
  margin:0 0 16px;
  padding:0;
  background:var(--vg-color-surface);
  border-radius:14px;
  overflow:hidden;
}
#main.customer-detail-view .cd-push-page .cards > .card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
  padding:13px 16px;
  min-height:50px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  background-image:linear-gradient(var(--disc-sep), var(--disc-sep));
  background-repeat:no-repeat;
  background-size:calc(100% - 16px) .5px;
  background-position:left bottom;
}
#main.customer-detail-view .cd-push-page .cards > .card:last-child{ background-image:none; }
#main.customer-detail-view .cd-push-page .cards > .card .label{
  margin:0;
  font-size:.92rem;
  font-weight:500;
  color:var(--vg-color-text-muted);
}
#main.customer-detail-view .cd-push-page .cards > .card .value{
  margin:0;
  font-size:.98rem;
  font-weight:600;
  text-align:end;
  font-variant-numeric:tabular-nums;
  color:var(--vg-color-text);
}
#main.customer-detail-view .cd-push-page .customer-last-visit-card{
  margin:16px 0 0;
  padding:14px 16px;
  border-radius:14px;
}

/* Grouped records card: all push rows of the customer page in one inset-grouped surface. */
#main.customer-detail-view .cd-records-nav{
  box-sizing:border-box;
  margin:0 0 16px;
  background:var(--vg-color-surface);
  border-radius:14px;
  overflow:hidden;
}
#main.customer-detail-view .cd-records-nav > a.cd-push-row{
  margin:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  min-height:52px;
  background-image:linear-gradient(var(--disc-sep), var(--disc-sep));
  background-repeat:no-repeat;
  background-size:calc(100% - 16px) .5px;
  background-position:left bottom;
}
#main.customer-detail-view .cd-records-nav > a.cd-push-row:last-child{ background-image:none; }