/* Periastrum — the drawers on the cargo tab (P91, 2026-10-13; js/drawerpanel.js). A cabinet of six under the hold, one open at a time: each
 * front has a lip, a label in a brass frame, a pull and its count; open, the drawer slides out on its runners. No glow anywhere: a new thing
 * is a plain gold dot by the label. One column at every width; a front is a full thumb's height. */
.drawers { margin: 18px 0 8px; }
.drawers h2 { margin-bottom: var(--gap-sm); }
.cabinet { display: flex; flex-direction: column; gap: 4px; padding: 4px; border: var(--bw) solid var(--line-faint); border-radius: 3px; background: rgb(0 0 0 / .22); }
.drawer { border-radius: 2px; }
.dfront { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--gap); width: 100%; min-height: 52px; margin: 0; padding: 8px 14px 11px;
  font: inherit; color: var(--paper); text-align: left; cursor: pointer; border: var(--bw) solid var(--line-soft); border-radius: 2px;
  background: linear-gradient(180deg, rgb(var(--paper-rgb) / .075), rgb(var(--paper-rgb) / .025) 70%, rgb(var(--paper-rgb) / .045));
  box-shadow: inset 0 1px 0 rgb(var(--paper-rgb) / .1), inset 0 -4px 0 rgb(0 0 0 / .32);   /* the lip: a light top edge, a dark ledge at the foot */
  transition: background var(--t), border-color var(--t); }
.dfront:hover, .dfront:focus-visible { border-color: var(--gold-line-soft); outline: none; background: linear-gradient(180deg, rgb(var(--paper-rgb) / .1), rgb(var(--paper-rgb) / .04) 70%, rgb(var(--paper-rgb) / .06)); }
.dlabel { display: flex; align-items: center; gap: var(--gap-sm); min-width: 0; }
.dcard { position: relative; display: inline-grid; justify-items: center; padding: 3px 14px; font-size: var(--fs-label); letter-spacing: var(--ls-label); line-height: 1.3; white-space: nowrap;
  color: var(--paper); border: var(--bw) solid var(--gold-line-soft); border-radius: 1px; background: rgb(var(--paper-rgb) / .05); }
.dcard > .dtext, .dcard > .dsizer { grid-area: 1 / 1; }   /* all the labels in one cell: the frame is as wide as the longest (js/drawerpanel.js frontHtml) */
.dsizer { visibility: hidden; }
.dcard::before, .dcard::after { content: ''; position: absolute; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: var(--gold-line); }   /* the frame's two rivets */
.dcard::before { left: 4px; } .dcard::after { right: 4px; }
.ddot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.dpull { justify-self: center; width: 46px; height: 7px; border: var(--bw) solid var(--gold-line-soft); border-top-color: var(--gold-line); border-radius: 0 0 4px 4px; background: rgb(0 0 0 / .25); }
.dcount { justify-self: end; font-size: var(--fs-row); font-variant-numeric: tabular-nums; color: var(--paper-dim); }
.drawer.empty .dcard { color: var(--paper-dim); border-color: var(--line); }
.drawer.empty .dcard::before, .drawer.empty .dcard::after { background: var(--line); }
.drawer.empty .dcount { color: var(--paper-faint); }
.drawer.open .dfront { border-color: var(--gold-line-soft); border-bottom-color: transparent; border-radius: 2px 2px 0 0; }
/* the body slides on its runners: a grid row from nothing to its height */
.dbody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--ease-io); }
.drawer.open .dbody { grid-template-rows: 1fr; }
.dinner { min-height: 0; overflow: hidden; }
.drawer.open .dinner { padding: 12px 12px 14px; border: var(--bw) solid var(--gold-line-soft); border-top: 0; border-radius: 0 0 2px 2px;
  background: rgb(0 0 0 / .3); box-shadow: inset 0 10px 14px -10px rgb(0 0 0 / .8); }   /* the inside of a drawer: darker, deeper at the top */
.dempty { margin: 2px 0; font-style: var(--i-label); }
.dinner .shelf { margin: 4px 0 6px; }
.dinner .kept { gap: 2px; }
.dinner .kitem summary { min-height: var(--tap); }
/* the drawings: small, a tap opens it large */
.dpics { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--gap); }
.dpic { display: flex; flex-direction: column; gap: 3px; padding: 0; margin: 0; font: inherit; text-align: left; color: var(--paper); background: none; border: 0; cursor: pointer; }
.dpic .dframe { display: block; aspect-ratio: 4 / 3; padding: 5px; background: var(--news-ground); border-radius: 2px; box-shadow: 0 2px 6px rgb(0 0 0 / .5); }
.dpic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dpic .dtitle { font-size: var(--fs-label); line-height: 1.25; }
.dpic .dim { font-size: var(--fs-xs); font-style: var(--i-label); }
.dpic:hover .dtitle, .dpic:focus-visible .dtitle { color: var(--gold); }
.dpic:focus-visible { outline: none; }
.dpic:focus-visible .dframe { outline: var(--bw) solid var(--gold-edge); outline-offset: 2px; }
/* the log's one line that points to the papers' drawer */
#logPapers { margin: 0 0 var(--gap-sm); display: flex; align-items: center; gap: var(--gap-sm); flex-wrap: wrap; }
@media (max-width: 560px) { .dfront { padding: 8px 12px 11px; min-height: 56px; } .dpics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .dbody, .dfront { transition: none; } }