/* ============================================================================
   THE BOX LAYOUT, shared by the Inquiries app and the Orders app.

   Owner, 2026-09-24: "I like the mockup style with boxes keeps segments separate.
   Can you match that for the app as well". He approved it on the boxes mockup of
   Jitendra Dugar's enquiry ("I like the enquiry screen in boxes layout"), and it
   shipped in the Inquiries app (#461). Then: "Now do the same boxes layout in the
   orders app".

   ONE FILE, NOT TWO COPIES. It was first written into the Inquiries app's own
   page. The Orders app getting "the same" is the moment a second copy would have
   started drifting, which is the reason fdc-ui.css is shared across apps in the
   first place. Both pages link this file after fdc-ui.css.

   - A warm page behind the cards, so the white boxes stand apart. Before, the
     page and the cards were nearly the same white. Light look only, since dark
     is opt-in.
   - Every card title sits in its own strip with a line under it.
   - Detail rows (.kvlist) run edge to edge with a line between each.
   - Actions are boxed: a list of them (.actlist) runs edge to edge inside a card,
     and a red box (.closeit) holds the ones that end something.
   ========================================================================= */

:root:not([data-theme="dark"]){--page:#F3EEE4; --strip:#FBF9F5}
:root[data-theme="dark"]{--strip:var(--raised)}
.card__head{padding:11px var(--s-4);background:var(--strip);border-bottom:1px solid var(--line);
  border-radius:var(--r) var(--r) 0 0}
.card__title{font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate)}
.kvlist{margin:calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) 0}
.kvlist:last-child{margin-bottom:calc(-1 * var(--s-4))}
.kvlist > .kv{margin:0;padding:10px var(--s-4);border-top:1px solid var(--line-soft)}
.kvlist > .kv:first-child{border-top:0}
.kvlist > .kv > :last-child{font-weight:600}
/* A list of actions inside a box runs edge to edge, like the rows above it. */
.card .actlist{border:0;border-radius:0;margin:0 calc(-1 * var(--s-4)) calc(-1 * var(--s-4));
  border-top:1px solid var(--line-soft)}
/* A box whose body is only the list: no gap above it either. */
.card__body > .actlist:first-child{margin-top:calc(-1 * var(--s-4));border-top:0}
/* The list is the bottom of its box, so it takes the box's rounded corners. Square,
   its white rows sat over the card's curve and the box looked cut off at the foot. */
.card .actlist:last-child{border-radius:0 0 calc(var(--r) - 1px) calc(var(--r) - 1px)}
.closeit{border-color:var(--red-line)}
.closeit .card__head{background:var(--red-bg);border-bottom-color:var(--red-line)}
.closeit .card__title{color:var(--red)}
.closeit .actlist > .btn{color:var(--red)}