/* Close the day (V1.1 Lane C) — web/app/pages/close.js. Every class here starts `cd-`
   (contract §8); shared classes (.btn, .inp, .chip, .segctl, .pnote, .pdrawer) are only
   touched under `.cd-page` / `.cd-sheet`. Tokens from shell.css only, no new colour.
   Phone first: one column; on a laptop the column sits under the page title, never wider
   than a form should be. */

.cd-col { max-width: 540px; }
@media (min-width: 1024px) { .cd-col { margin-left: 196px; } }   /* the title's column: 168px margin + 28px */

/* the choices above the form: store, and (only when it applies) which day */
.cd-picks { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 16px; }
.cd-page .segctl { max-width: 100%; }
.cd-page .segctl button { min-height: 44px; font-size: 14px; padding: 0 14px; }

/* ── the form ── */
.cd-form { display: grid; gap: 20px; padding-top: 22px; }
.cd-notill .pnote { max-width: none; }
.cd-money { display: grid; gap: 8px; }
.cd-money label { display: flex; flex-direction: column; gap: 1px; }
.cd-lab { font-size: 15px; font-weight: 500; color: var(--ink); padding: 0; }
.cd-hint { font-size: 12.5px; color: var(--ink-mid); }
.cd-amt { position: relative; }
.cd-cur { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--ink-mid); pointer-events: none; }
.cd-page .cd-amt .inp, .cd-sheet .cd-amt .inp { min-height: 56px; font-size: 24px; font-weight: 500; text-align: right; padding: 0 14px 0 38px; font-variant-numeric: tabular-nums lining-nums; }
.cd-count .inp { border-color: var(--ink-mid); }

.cd-payouts { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.cd-payouts legend { padding: 0; float: left; width: 100%; }
.cd-payouts > .cd-hint { clear: both; margin-top: -6px; }
.cd-plist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-soft); }
.cd-plist li { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1px solid var(--rule-soft); font-size: 15px; }
.cd-pfig { font-weight: 500; }
.cd-prm { width: 44px; height: 44px; border: 0; background: none; color: var(--ink-mid); display: grid; place-items: center; border-radius: var(--radius); }
.cd-prm:hover { color: var(--ink); background: var(--paper-2); }
.cd-padd { display: grid; gap: 10px; }
.cd-pchips { display: flex; flex-wrap: wrap; gap: 8px; }
.cd-page .cd-pchips .chip { min-height: 44px; padding: 0 16px; font-size: 14px; }

.cd-live { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding-top: 14px; border-top: 1px solid var(--rule); }
.cd-live > span:first-child { font-size: 15px; font-weight: 500; }
.cd-live-fig { font-family: var(--serif); font-size: 26px; font-weight: 600; }

/* the one primary action, at the bottom within thumb reach */
.cd-dock { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--rule-soft); }
.cd-page .cd-go { flex: 1; min-height: 52px; font-size: 16px; }
.cd-page .cd-dock .btn.line { min-height: 52px; font-size: 15px; }
.cd-dock .cd-err { flex: 1 1 100%; margin: 0 0 2px; }
.cd-working-mark .mark { display: inline-grid; width: 28px; height: 28px; color: var(--plum); }
.cd-working-mark .mark svg { width: 28px; height: 28px; }

/* ── the result ── */
.cd-result { padding-top: 22px; }
.cd-closed { font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1.3; margin: 0 0 18px; }
.cd-closed span { display: block; }

/* the two aligned bars: should be in the drawer / you counted, one scale */
.cd-bars { display: grid; gap: 12px; margin: 0 0 16px; }
.cd-brow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'lab fig' 'track track'; gap: 4px 12px; align-items: baseline; }
.cd-blab { grid-area: lab; font-size: 13.5px; color: var(--ink); }
.cd-bfig { grid-area: fig; font-size: 15px; font-weight: 600; }
.cd-track { grid-area: track; position: relative; height: 16px; background: var(--paper-3); border-radius: var(--radius); }
.cd-fill, .cd-gap { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--radius); transform-origin: left center; animation: cd-grow 420ms var(--ease-in, cubic-bezier(.2,0,0,1)) both; }
.cd-fill { background: var(--data); }
.cd-gap { animation-delay: 280ms; }
.cd-gap-short { background: var(--red); }   /* the bad news: the money that isn't there */
.cd-gap-over { background: var(--ink); }
.cd-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); }
@keyframes cd-grow { from { transform: scaleX(0); } to { transform: none; } }
html.motion-light .cd-fill, html.motion-light .cd-gap, html.motion-light .cd-seg { animation: none; }

.cd-verdict { font-family: var(--serif); font-size: 24px; line-height: 1.3; margin: 0 0 10px; }
.cd-vfig { font-weight: 600; }
.cd-neg { color: var(--red); }

.cd-more { margin: 0 0 14px; }
.cd-more > summary { cursor: pointer; font-size: 13px; color: var(--ink-mid); min-height: 44px; display: flex; align-items: center; list-style: none; }
.cd-more > summary::-webkit-details-marker { display: none; }
.cd-more > summary::before { content: ''; width: 6px; height: 6px; margin-right: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 160ms var(--ease-in, ease); }
.cd-more[open] > summary::before { transform: rotate(45deg); }
.cd-working { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.5; display: grid; gap: 4px; max-width: 420px; }
.cd-working > div { display: flex; justify-content: space-between; gap: 16px; }
.cd-working dt, .cd-working dd { margin: 0; }
.cd-working .cd-wt { border-top: 1px solid var(--rule); padding-top: 4px; font-weight: 600; }
.cd-working .cd-wbad dd { color: var(--red); }

.cd-checks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.cd-checks li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; min-height: 28px; }
.cd-tick { width: 16px; height: 16px; flex: none; color: var(--data-4); }
.cd-tick.cd-off { color: var(--ink); }
.cd-cfig { font-weight: 500; }
.cd-cdiff { color: var(--red); font-weight: 600; }
.cd-matchline { font-size: 14px; margin: 6px 0 0; }

.cd-row-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.cd-page .cd-row-acts .btn.sm { min-height: 44px; padding: 0 16px; }
.cd-note { color: var(--plum); font-size: 15px; line-height: 1.5; margin: 14px 0 0; padding-left: 12px; border-left: 2px solid var(--plum-soft); }
.cd-noteform { display: grid; gap: 10px; margin-top: 14px; justify-items: start; }
.cd-noteform .fld { width: 100%; }
.cd-page .cd-notein { min-height: 72px; padding: 10px 12px; font-size: 16px; line-height: 1.45; resize: vertical; color: var(--plum); }
.cd-noteform:not([hidden]) { animation: pop-in 160ms var(--ease-in, ease) both; }

/* cash on hand, the day's sales */
.cd-sec { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rule); }
.cd-h { margin: 0 0 6px; font-size: 12px; font-weight: 500; letter-spacing: .10em; text-transform: uppercase; color: var(--ink-mid); }
.cd-big { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; margin: 0; }
.cd-sub { font-size: 13px; color: var(--ink-mid); margin: 2px 0 0; }
.cd-all { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin: 12px 0 0; padding-top: 8px; border-top: 1px solid var(--rule-soft); }
.cd-all span:last-child { font-weight: 600; }
.cd-ask { display: grid; gap: 12px; justify-items: stretch; }
.cd-ask .btn { justify-self: start; min-height: 44px; }

/* a split bar: each part a segment, its name and figure under it */
.cd-split { margin: 14px 0 0; }
.cd-split-bar { display: flex; gap: 2px; height: 16px; }
.cd-seg { flex-basis: 0; min-width: 3px; border-radius: var(--radius); transform-origin: left center; animation: cd-grow 420ms var(--ease-in, cubic-bezier(.2,0,0,1)) both; }
.cd-s-0 { background: var(--data-4); }
.cd-s-1 { background: var(--data-2); }
.cd-s-2 { background: var(--data-lite); }
.cd-s-3 { background: var(--data-band); }
.cd-s-4 { background: var(--data-1); }
.cd-s-on { background: var(--data-4); }
.cd-s-a { background: var(--data-lite); }
.cd-s-b { background: var(--data-band); }
.cd-split-labs { display: flex; gap: 2px; margin-top: 6px; }
.cd-split-labs span { flex-basis: 0; min-width: 64px; font-size: 14px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.cd-split-labs b { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-mid); }

.cd-saved { font-size: 13px; color: var(--ink-mid); margin: 22px 0 0; }

/* Undo after Reopen, five seconds */
.cd-undo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 0 0 12px; min-height: 44px; font-size: 13.5px; background: var(--paper-2); border-left: 2px solid var(--plum-soft); }
.cd-undo:not([hidden]) { animation: pop-in 160ms var(--ease-in, ease) both; }
.cd-undo-btn { border: 0; background: none; color: var(--plum); font-size: 14px; font-weight: 500; min-height: 44px; padding: 0 14px; }
#cdUndo { margin-top: 16px; }

/* Correct it: a bottom sheet on the phone, the app's drawer on a laptop */
.cd-sheet { display: flex; flex-direction: column; }
.cd-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 14px 22px; border-bottom: 1px solid var(--rule); }
.cd-sheet-head h2 { font-family: var(--serif); font-size: 20px; font-weight: 500; margin: 0; }
.cd-sheet-body { padding: 20px 22px; display: grid; gap: 12px; flex: 1; overflow: auto; }
.cd-sheet-foot { padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); display: flex; }
@media (max-width: 1023px) {
  .layer .cd-sheet { top: auto; left: 0; width: 100%; max-height: 90vh; border-left: 0; border-top: 1px solid var(--rule); }
  .layer:not(.open) .cd-sheet { transform: translateY(100%); }
  .cd-result { padding-top: 16px; }
}
.cd-sheet .cd-go { flex: 1; min-height: 52px; font-size: 16px; }
/* Reduced motion shows the finished bars at once (the gap's delay would otherwise hold it at zero). */
@media (prefers-reduced-motion: reduce) { .cd-fill, .cd-gap, .cd-seg { animation: none; } }
.cd-loading { padding-top: 28px; }
.cd-loading .mark { display: inline-grid; width: 36px; height: 36px; color: var(--plum); }
.cd-loading .mark svg { width: 36px; height: 36px; }