/* ============================================================================
   Driver licence compliance: the class ticks on the driver form, the live
   licence check on assignment forms, and the rule matrix. Built on the
   theme's tokens (and on fuel.css for badges and notices), so light and dark
   modes follow.
   ==========================================================================*/

.multicheck { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-opt {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; cursor: pointer;
  border: var(--hair) solid var(--line); border-radius: var(--radius); background: var(--panel-2);
  font-family: var(--font-mono); font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--text);
}
.mc-opt input { width: auto; accent-color: var(--signal); }
.mc-opt:has(input:checked) { border-color: var(--signal); background: var(--caution-fill); color: var(--signal-text); font-weight: 600; }
.mc-opt:focus-within { outline: 2px solid var(--info); outline-offset: 1px; }

.classdates-box summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 4px 0; }
.classdates { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 12px; margin-top: 6px; }
.cd-row { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; }

.lc-panel { display: grid; gap: 10px; margin-top: 12px; }
.lc-panel:empty { display: none; }
.lc-result { display: grid; gap: 7px; padding: 10px 12px; border: var(--hair) solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.lc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lc-appr + .lc-appr { margin-top: 6px; }
.lc-appr .badge { margin-left: 4px; }

.mx-in { width: 80px; padding: 4px 6px; font-family: var(--font-mono); }

@media (max-width: 760px) {
  .classdates { grid-template-columns: 1fr 1fr; }
  .mc-opt { padding: 6px 9px; }
}

/* the Licence Compliance page: panels may be narrower than their widest table */
.lc-page { display: grid; gap: 14px; min-width: 0; }
.lc-page > * { min-width: 0; }
.notice > div { min-width: 0; overflow-wrap: anywhere; }