.cab > .empty-state { margin-top: 1.25rem; }

.field { display: flex; flex-direction: column; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field-head { display: flex; align-items: center; gap: .375rem; min-height: 1.875rem; }
.field-head > label, .field-head > .label { font-weight: 650; }
.cab .field .info {
  flex: none; width: 1.5rem; min-height: 1.5rem; padding: 0; border-radius: 50%; background: transparent;
  border: 1px solid var(--field); color: var(--muted); font-size: .8125rem; font-weight: 750; line-height: 1;
}
.cab .field .info:hover, .cab .field .info.on { color: var(--accent); border-color: var(--brass-line); }
.cab .field .field-note { margin-top: .125rem; color: var(--muted); font-size: .875rem; line-height: 1.45; }
.cab .field .field-more {
  position: absolute; z-index: 5; max-height: min(20rem, 45vh); margin: 0; padding: .625rem .75rem; overflow-y: auto;
  background: var(--raise); color: var(--text); border: 1px solid var(--line2); border-radius: .625rem; box-shadow: var(--lift);
  font-size: .9375rem; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; transform: translateY(.375rem);
}
.cab .field .field-more.up { transform: translateY(calc(-100% - .375rem)); }
.cab .field .hint { margin-top: .375rem; overflow-wrap: anywhere; }
.input { display: flex; align-items: center; gap: .375rem; width: 100%; min-height: 3rem; margin-top: .5rem; padding: 0 .875rem; background: var(--night); border: 1px solid var(--line2); border-radius: .5rem; cursor: text; }
.input:focus-within { border-color: var(--brass-line); box-shadow: 0 0 0 1px var(--brass-line); }
.input input, .input input[type="text"] { flex: 1; width: auto; min-width: 0; min-height: 0; margin: 0; padding: .625rem 0; background: transparent; border: 0; outline: none; box-shadow: none; font-variant-numeric: tabular-nums; }
.input input:focus { box-shadow: none; }
.input .unit { color: var(--muted); white-space: nowrap; }
.input.locked { background: transparent; border-style: dashed; color: var(--muted); cursor: default; }
.input.locked input, .input input:disabled { color: var(--muted); -webkit-text-fill-color: var(--muted); opacity: 1; }
:is(.cab, .sheet) select { display: block; width: 100%; min-height: 3rem; margin-top: .5rem; padding: .5rem .75rem; font: inherit; color: var(--text); background: var(--night); border: 1px solid var(--line2); border-radius: .5rem; }
.field .chips { margin-top: .5rem; }
.cab .field .lock { margin-top: .375rem; color: var(--warn); font-size: .875rem; }
.field.changed .input, .field.changed .chips label { border-color: var(--brass-line); }
.cab .field .was { margin-top: .25rem; color: var(--accent); font-size: .875rem; font-weight: 650; }
.opt { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .5rem; }
.opt .input { flex: 1 1 8rem; min-width: 0; margin-top: 0; }
.opt .chips { margin-top: 0; }

.field.off { padding: .75rem .875rem .875rem; background: var(--night); border: 1px solid var(--line); border-radius: .625rem; }
.field.off .field-head .switch { margin-left: auto; }
.field.off .input { background: var(--panel); }
.field.off:has(.switch:not(:checked)) .input { display: none; }
.switch { position: relative; flex: none; width: 3rem; height: 1.75rem; margin: 0; appearance: none; background: var(--raise); border: 1px solid var(--field); border-radius: 999px; cursor: pointer; }
.switch::after { content: ""; position: absolute; top: .25rem; left: .25rem; width: 1.125rem; height: 1.125rem; background: var(--muted); border-radius: 50%; transition: left .15s; }
.switch:checked { background: var(--up-t); border-color: var(--up); }
.switch:checked::after { left: 1.5rem; background: var(--up); }
.switch:disabled { opacity: .55; cursor: default; }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .switch::after { transition: none; } }

.more-settings { margin-top: 1.25rem; border-top: 1px solid var(--line); }
.more-settings > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .75rem; padding: 1.125rem 0 .25rem; font-size: 1.1875rem; font-weight: 650; cursor: pointer; }
.more-settings > summary::marker { color: var(--accent); }
.more-settings > summary .sub { font-size: .9375rem; font-weight: 400; }

.field .error { margin-top: .375rem; }
.field.bad .input, .field.bad select { border-color: var(--down); box-shadow: 0 0 0 1px var(--down); }
.field.bad .chips label { border-color: var(--down); }
.combo { position: relative; }
.input .chev { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--muted); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; cursor: pointer; transition: transform .15s; }
.input.expanded .chev { stroke: var(--accent); transform: rotate(180deg); }
.input input:disabled ~ .chev { display: none; }
.picker { position: absolute; top: calc(100% + .375rem); left: 0; right: 0; z-index: 8; display: flex; flex-direction: column; max-height: 19rem; overflow: hidden; background: var(--raise); border: 1px solid var(--line2); border-radius: .625rem; box-shadow: var(--lift); }
.picker-head { flex: none; padding: .625rem .875rem .5rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .875rem; }
.cab .picker-head .miss { margin-bottom: .25rem; color: var(--warn); font-size: .9375rem; font-weight: 650; overflow-wrap: anywhere; }
.matches { position: relative; flex: 1 1 auto; min-height: 0; margin: 0; padding: .25rem; overflow-y: auto; list-style: none; }
.match { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) 1.125rem; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .25rem .625rem; border-radius: .375rem; cursor: pointer; }
.match.active { background: var(--brass-t); box-shadow: inset 3px 0 0 var(--brass-line); }
.match b { font-weight: 750; letter-spacing: .01em; }
.match.on b { color: var(--accent); }
.match span { overflow: hidden; color: var(--muted); font-size: .9375rem; text-overflow: ellipsis; white-space: nowrap; }
.match .tick { width: 1.125rem; height: 1.125rem; fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.cab .picker-all { display: flex; justify-content: space-between; gap: .5rem; }
.picker.pinned { position: static; margin-top: .5rem; background: var(--night); box-shadow: none; }
.picker.pinned .matches { max-height: 12.5rem; }
.picker.pinned .match { min-height: 2.5rem; }
@media (max-width: 600px) { .picker.pinned .matches { max-height: 11rem; } }
@media (prefers-reduced-motion: reduce) { .input .chev { transition: none; } }

.field .lock, #delete-body { overflow-wrap: anywhere; }