/* Small named utilities for one-off layout touches: spacing (mt-8 = margin-top 8px, mx-0, py-8), widths (w-full,
   maxw-520, minw-200), flex (d-flex, items-center, justify-between, gap-16, flex-1), text (fs-15, fw-700, c-muted,
   ta-center, ws-nowrap) and a few more, named property-value so a reader knows what each does.
   They sit in the "utilities" layer, after the "app" layer that holds every stylesheet of ours, so a utility
   wins over an app rule whatever its selector, the way the inline style it replaced did. */
@layer app, utilities;

@layer utilities {
  .m-0 { margin:0; }
  .mx-0 { margin-left:0;margin-right:0; }
  .mx-auto { margin-left:auto;margin-right:auto; }
  .my-0 { margin-top:0;margin-bottom:0; }
  .my-14 { margin-top:14px;margin-bottom:14px; }
  .my-6 { margin-top:6px;margin-bottom:6px; }
  .p-0 { padding:0; }
  .p-12 { padding:12px; }
  .p-16 { padding:16px; }
  .px-0 { padding-left:0;padding-right:0; }
  .px-10 { padding-left:10px;padding-right:10px; }
  .px-14 { padding-left:14px;padding-right:14px; }
  .px-20 { padding-left:20px;padding-right:20px; }
  .px-6 { padding-left:6px;padding-right:6px; }
  .py-1 { padding-top:1px;padding-bottom:1px; }
  .py-10 { padding-top:10px;padding-bottom:10px; }
  .py-16 { padding-top:16px;padding-bottom:16px; }
  .py-8 { padding-top:8px;padding-bottom:8px; }
  .py-9 { padding-top:9px;padding-bottom:9px; }
  .basis-full { flex-basis:100%; }
  .bd-0 { border:0; }
  .bd-1-solid-line { border:1px solid var(--line); }
  .bdb-1-solid-line { border-bottom:1px solid var(--line); }
  .bdc-ok { border-color:var(--ok); }
  .bdc-red { border-color:var(--red); }
  .bdc-warn { border-color:var(--warn); }
  .bdlc-red { border-left-color:var(--red); }
  .bg-ink { background:var(--ink); }
  .bg-panel-2 { background:var(--panel-2); }
  .c-inherit { color:inherit; }
  .c-red { color:var(--red); }
  .c-red-hot { color:var(--red-hot); }
  .c-text { color:var(--text); }
  .c-warn { color:var(--warn); }
  .col-1 { grid-column:1; }
  .col-all { grid-column:1/-1; }
  .cols-auto-1fr { grid-template-columns:auto 1fr; }
  .cursor-default { cursor:default; }
  .d-block { display:block; }
  .d-flex { display:flex; }
  .d-grid { display:grid; }
  .d-inline { display:inline; }
  .ff-inherit { font-family:inherit; }
  .fill-panel-2 { fill:var(--panel-2); }
  .fill-text { fill:var(--text); }
  .fit-cover { object-fit:cover; }
  .flex-0-1-110 { flex:0 1 110px; }
  .flex-0-1-120 { flex:0 1 120px; }
  .flex-0-1-160 { flex:0 1 160px; }
  .flex-0-1-200 { flex:0 1 200px; }
  .flex-0-1-220 { flex:0 1 220px; }
  .flex-0-1-90 { flex:0 1 90px; }
  .flex-1 { flex:1; }
  .flex-1-1-140 { flex:1 1 140px; }
  .flex-1-1-150 { flex:1 1 150px; }
  .flex-2 { flex:2; }
  .flex-none { flex:none; }
  .flexwrap-nowrap { flex-wrap:nowrap; }
  .flexwrap-wrap { flex-wrap:wrap; }
  .font-inherit { font:inherit; }
  .fs-10 { font-size:10px; }
  .fs-12 { font-size:12px; }
  .fs-14 { font-size:14px; }
  .fs-15 { font-size:15px; }
  .fs-17 { font-size:17px; }
  .fs-20 { font-size:20px; }
  .fs-26 { font-size:26px; }
  .fs-30 { font-size:30px; }
  .fs-32 { font-size:32px; }
  .fw-400 { font-weight:400; }
  .fw-600 { font-weight:600; }
  .gap-12 { gap:12px; }
  .gap-14 { gap:14px; }
  .gap-16 { gap:16px; }
  .gap-18 { gap:18px; }
  .gap-24 { gap:24px; }
  .gap-4 { gap:4px; }
  .gap-6 { gap:6px; }
  .gap-6-16 { gap:6px 16px; }
  .gap-8 { gap:8px; }
  .h-34 { height:34px; }
  .h-80 { height:80px; }
  .h-88 { height:88px; }
  .h-96 { height:96px; }
  .h-auto { height:auto; }
  .items-center { align-items:center; }
  .items-end { align-items:flex-end; }
  .items-start { align-items:flex-start; }
  .justify-between { justify-content:space-between; }
  .ls-0 { letter-spacing:0; }
  .maxh-160 { max-height:160px; }
  .maxh-300 { max-height:300px; }
  .maxh-340 { max-height:340px; }
  .maxw-120 { max-width:120px; }
  .maxw-150 { max-width:150px; }
  .maxw-160 { max-width:160px; }
  .maxw-170 { max-width:170px; }
  .maxw-180 { max-width:180px; }
  .maxw-200 { max-width:200px; }
  .maxw-215 { max-width:215px; }
  .maxw-220 { max-width:220px; }
  .maxw-230 { max-width:230px; }
  .maxw-260 { max-width:260px; }
  .maxw-300 { max-width:300px; }
  .maxw-340 { max-width:340px; }
  .maxw-360 { max-width:360px; }
  .maxw-420 { max-width:420px; }
  .maxw-520 { max-width:520px; }
  .maxw-560 { max-width:560px; }
  .maxw-640 { max-width:640px; }
  .maxw-720 { max-width:720px; }
  .maxw-760 { max-width:760px; }
  .maxw-780 { max-width:780px; }
  .maxw-880 { max-width:880px; }
  .maxw-90 { max-width:90px; }
  .maxw-none { max-width:none; }
  .mb-0 { margin-bottom:0; }
  .mb-10 { margin-bottom:10px; }
  .mb-12 { margin-bottom:12px; }
  .mb-14 { margin-bottom:14px; }
  .mb-16 { margin-bottom:16px; }
  .mb-18 { margin-bottom:18px; }
  .mb-20 { margin-bottom:20px; }
  .mb-28 { margin-bottom:28px; }
  .mb-4 { margin-bottom:4px; }
  .mb-6 { margin-bottom:6px; }
  .mb-8 { margin-bottom:8px; }
  .minw-0 { min-width:0; }
  .minw-120 { min-width:120px; }
  .minw-140 { min-width:140px; }
  .minw-160 { min-width:160px; }
  .minw-180 { min-width:180px; }
  .minw-200 { min-width:200px; }
  .minw-220 { min-width:220px; }
  .minw-240 { min-width:240px; }
  .minw-260 { min-width:260px; }
  .ml-4 { margin-left:4px; }
  .ml-6 { margin-left:6px; }
  .mr-8 { margin-right:8px; }
  .mt-0 { margin-top:0; }
  .mt-10 { margin-top:10px; }
  .mt-12 { margin-top:12px; }
  .mt-14 { margin-top:14px; }
  .mt-16 { margin-top:16px; }
  .mt-20 { margin-top:20px; }
  .mt-22 { margin-top:22px; }
  .mt-26 { margin-top:26px; }
  .mt-28 { margin-top:28px; }
  .mt-4 { margin-top:4px; }
  .mt-6 { margin-top:6px; }
  .mt-8 { margin-top:8px; }
  .mt-n10 { margin-top:-10px; }
  .mt-n2 { margin-top:-2px; }
  .mt-n4 { margin-top:-4px; }
  .mt-n6 { margin-top:-6px; }
  .mt-n8 { margin-top:-8px; }
  .op-85 { opacity:.85; }
  .ox-auto { overflow-x:auto; }
  .radius-3 { border-radius:3px; }
  .radius-4 { border-radius:4px; }
  .row-1 { grid-row:1; }
  .scheme-dark { color-scheme:dark; }
  .ta-center { text-align:center; }
  .ta-right { text-align:right; }
  .td-none { text-decoration:none; }
  .tt-none { text-transform:none; }
  .w-0 { width:0; }
  .w-140 { width:140px; }
  .w-80 { width:80px; }
  .w-88 { width:88px; }
  .w-90 { width:90px; }
  .w-96 { width:96px; }
  .w-auto { width:auto; }
  .w-full { width:100%; }
  .wb-break-all { word-break:break-all; }
  .wrap-any { overflow-wrap:anywhere; }
  .ws-normal { white-space:normal; }
  .ws-nowrap { white-space:nowrap; }
  .ws-pre-line { white-space:pre-line; }
  .ws-pre-wrap { white-space:pre-wrap; }
}