/* Cards, the Desk rail and compact rows. Values come from tokens.css. */
.card { background: var(--raised); border: 1px solid var(--border-divider-subtle); border-radius: var(--radius-xl); box-shadow: var(--lift); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); max-width: var(--col); overflow-wrap: anywhere; animation: build var(--dur-base) var(--ease-decelerate) both; }
.card-title { font: 600 16px / 1.35 var(--font-display); padding-bottom: var(--s-2); border-bottom: 1px solid var(--border-divider-subtle); }
.card-row { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: baseline; }
.card-label { min-width: 7ch; }
.card-value { color: var(--text-primary); }
.card-note { color: var(--text-secondary); font-size: var(--type-small-size); line-height: var(--type-small-lead); }
.card-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.card-actions:empty { display: none; }
.card-msg:empty { display: none; }
.card-tall { min-height: var(--s-7); }
.card button:disabled { opacity: 0.6; cursor: default; }
.card-slot { max-width: var(--col); }
.inline-approvals { display: flex; flex-direction: column; gap: var(--s-3); max-width: var(--col); width: 100%; margin: 0 auto; }
.inline-approvals:empty, #rail-approvals:empty { display: none; }

#rail { display: flex; flex-direction: column; gap: var(--s-5); }
#rail-approvals { display: flex; flex-direction: column; gap: var(--s-3); }
.rail-h { margin-bottom: var(--s-2); }
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.row { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--border-divider-subtle); }
.row-title { overflow-wrap: anywhere; font-size: var(--type-small-size); }
.rail-empty { color: var(--text-secondary); }
.only-narrow { display: inline-flex; }
.rail-close { align-self: flex-end; margin-right: calc(-1 * var(--s-2)); }

/* Narrow: the rail is a bottom sheet the Desk button opens. Wide: a fixed side panel under the header. */
@media (max-width: 1023.98px) {
  #rail { display: none; }
  #rail.rail-open { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain; gap: var(--s-4); background: var(--raised); border-top: 1px solid var(--border-divider); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--s-2) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom)); animation: sheet-in var(--dur-base) var(--ease-decelerate) both; }
  #rail.rail-open::before { content: ""; flex: none; align-self: center; width: 40px; height: 4px; margin-top: var(--s-1); border-radius: var(--radius-pill); background: var(--border-divider); }
  #rail.rail-open:focus-visible { outline: 0; }
  .scrim { position: fixed; inset: 0; z-index: 19; background: var(--overlay); }
}
@media (min-width: 1024px) {
  .only-narrow { display: none; }
  .inline-approvals { display: none; }
  #rail { position: fixed; z-index: 4; top: calc(var(--bar) + env(safe-area-inset-top)); right: 0; bottom: 0; width: 320px; overflow-y: auto; padding: var(--s-5); border-left: 1px solid var(--border-divider-subtle); }
}
.card-opened { outline: 2px solid var(--focus); outline-offset: 2px; }
.set-time { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.set-row input[type="time"], .set-row input[type="text"] { min-height: var(--s-7); font: inherit; color: inherit; background: var(--raised); border: 1px solid var(--border-divider-subtle); border-radius: 6px; padding: 0 var(--s-2); max-width: 100%; }