/* SpeedOk Admin - the camera and section pages (GitHub #104, the approved prototypes "Greičio matuokliai" and "Ruožai"): the list on the
   left, one big view in the middle (our OSM map, Google's satellite map, Street View, Mapillary - full screen on demand), the object's
   panel on the right; the table view for bulk work. Uses the shell's tokens (shell.css). */

.wb {
    display: flex;
    height: calc(100vh - 61px);
    min-height: 520px;
    position: relative;
}

/* ---- List ----------------------------------------------------------------------------------------------------------- */

.wb-list {
    width: 310px;
    flex: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--sz-hair);
}

.wb-list-head {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--sz-hair);
}

.wb-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.wb-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid var(--sz-line);
    background: var(--sz-surf);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--sz-soft);
    cursor: pointer;
    white-space: nowrap;
}

.wb-pill:hover {
    border-color: var(--sz-acc);
}

.wb-pill.on {
    background: var(--sz-pbg);
    border-color: var(--sz-pbg);
    color: var(--sz-pfg);
}

.wb-pill .wb-count {
    opacity: .7;
}

.wb-input {
    height: 36px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--sz-line);
    border-radius: 12px;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--sz-text);
    background: var(--sz-bg);
}

.wb-input:focus {
    outline: 2px solid var(--sz-sky);
    outline-offset: 1px;
}

/* 2026-10-23 (GitHub #137): a limit field beside its direction (86 px, as in the approved mockup). */
.wb-input.wb-num {
    width: 86px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wb-select {
    height: 32px;
    border: 1px solid var(--sz-line);
    border-radius: 10px;
    padding: 0 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    color: var(--sz-text);
    background: var(--sz-surf);
}

.wb-rows {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0 12px;
}

.wb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 12px);
    margin: 2px 6px;
    padding: 9px 12px;
    box-sizing: border-box;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--sz-text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}

.wb-row:hover {
    background: var(--sz-raised);
}

.wb-row.sel {
    background: var(--sz-accbg);
    box-shadow: inset 0 0 0 1px rgba(46, 156, 202, .4);
}

.wb-row:focus-visible {
    outline: 2px solid var(--sz-sky);
    outline-offset: -2px;
}

.wb-row-text {
    flex: 1;
    min-width: 0;
}

/* 2026-11-01 (UI/UX check): the name is what the PM looks for - up to two lines instead of "101 Akmenytė – Šatr...". */
.wb-row-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 700;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* 2026-10-23 (GitHub #141): the name and the direction chip (↔ / →) - the chip stays visible when the name is cut. */
.wb-row-line {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.wb-row-line .wb-row-name {
    min-width: 0;
}

.wb-row-line .wb-dirchip {
    flex: none;
}

.wb-row-sub {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--sz-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wb-row.review .wb-row-sub {
    color: var(--sz-warnfg);
}

.wb-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
    background: var(--sz-ok);
    box-shadow: 0 0 8px rgba(76, 217, 100, .45);
}

.wb-dot.review {
    background: var(--sz-warn);
    box-shadow: 0 0 10px rgba(245, 166, 35, .6);
}

.wb-dot.blocks {
    background: var(--sz-bad);
    box-shadow: 0 0 10px rgba(255, 107, 94, .6);
}

.wb-dot.hidden {
    background: var(--sz-faint);
    box-shadow: none;
}

.wb-empty {
    padding: 28px 18px;
    text-align: center;
    color: var(--sz-mut);
    font-size: 13px;
}

.wb-empty b {
    display: block;
    color: var(--sz-text);
    font-size: 15px;
    margin-bottom: 4px;
}

/* ---- Tags ----------------------------------------------------------------------------------------------------------- */

.wb-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 8px;
    background: var(--sz-raised);
    border: 1px solid var(--sz-line);
    color: var(--sz-soft);
    white-space: nowrap;
}

.wb-tag.warn {
    background: rgba(245, 166, 35, .12);
    border-color: rgba(245, 166, 35, .4);
    color: var(--sz-warnfg);
}

.wb-tag.ok {
    background: rgba(76, 217, 100, .1);
    border-color: rgba(76, 217, 100, .4);
    color: var(--sz-okfg);
}

.wb-tag.bad {
    background: rgba(255, 107, 94, .12);
    border-color: rgba(255, 107, 94, .4);
    color: var(--sz-badfg);
}

.wb-tag.src {
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
}

/* ---- Middle: the big view ------------------------------------------------------------------------------------------- */

.wb-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 10px;
    position: relative;
}

.wb-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.wb-vsw {
    display: flex;
    padding: 4px;
    border-radius: 999px;
    background: var(--sz-surf);
    border: 1px solid var(--sz-line);
    gap: 2px;
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.wb-vsw button {
    white-space: nowrap;
    flex: none;
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    color: var(--sz-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wb-vsw button.on {
    background: var(--sz-pbg);
    color: var(--sz-pfg);
}

.wb-vsw button:focus-visible {
    outline: 2px solid var(--sz-sky);
    outline-offset: 1px;
}

/* A laptop screen leaves the view ~340 px between the list and the panel: the switch scrolls rather than running under the panel. */
@media (max-width: 1400px) {
    .wb-vsw button {
        padding: 0 10px;
    }
}

.wb-kbd {
    font-size: 10px;
    font-weight: 800;
    border: 1px solid currentColor;
    border-radius: 5px;
    padding: 0 4px;
    opacity: .6;
}

.wb-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.wb-stage.wb-fs {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: var(--sz-bg);
    padding: 12px;
}

.wb-box {
    position: relative;
    flex: 1;
    min-height: 0;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--sz-line);
    background: var(--sz-surf);
}

.wb-layer {
    position: absolute;
    inset: 0;
}

.wb-layer[hidden] {
    display: none !important;
}

/* GitHub #111: MapillaryJS adds "mapillary-viewer" (position: relative) to its container; its stylesheet loads after this one, so the
   layer lost its absolute full size and the viewer was 0 px high - a white view. */
.wb-layer.mapillary-viewer {
    position: absolute;
}

.wb-layer .sz-map {
    height: 100% !important;
    border-radius: 0;
}

.wb-ov {
    position: absolute;
    display: flex;
    gap: 6px;
    align-items: center;
    z-index: 5;
    pointer-events: none;
}

.wb-ov > * {
    pointer-events: auto;
}

/* The view's name in the top left corner stays clear of the map's zoom buttons in the top right. */
.wb-ov-label {
    flex-wrap: wrap;
    max-width: calc(100% - 72px);
}

.wb-glass {
    background: var(--sz-glass);
    border: 1px solid var(--sz-glassl);
    color: var(--sz-text);
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 700;
    backdrop-filter: blur(6px);
}

.wb-notice {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    color: var(--sz-mut);
    font-size: 14px;
    z-index: 4;
    background: var(--sz-surf);
}

.wb-notice b {
    display: block;
    color: var(--sz-text);
    font-size: 16px;
    margin-bottom: 6px;
}

/* ---- Right: the object's panel -------------------------------------------------------------------------------------- */

.wb-panel {
    width: 390px;
    flex: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--sz-hair);
    background: var(--sz-side);
}

.wb-panel-head {
    padding: 14px 16px 10px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.wb-panel-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.3;
}

.wb-panel-meta {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.wb-meta-id {
    font-size: 11px;
    font-weight: 700;
    color: var(--sz-faint);
}

.wb-ptabs {
    display: flex;
    gap: 4px;
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--sz-hair);
    /* GitHub #115: five tabs on a section (Šaltiniai added) - they scroll inside the panel, never the page. */
    overflow-x: auto;
    scrollbar-width: none;
}

.wb-ptabs::-webkit-scrollbar {
    display: none;
}

.wb-ptab {
    flex: none;
    white-space: nowrap;
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    color: var(--sz-mut);
    cursor: pointer;
    white-space: nowrap;
}

.wb-ptab.on {
    background: var(--sz-raised);
    color: var(--sz-text);
}

.wb-ptab:focus-visible {
    outline: 2px solid var(--sz-sky);
}

.wb-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wb-panel-foot {
    padding: 12px 16px;
    border-top: 1px solid var(--sz-hair);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* 2026-10-24 (#149): why a hidden object cannot be shown from here (instead of a "Rodyti" that would fail). */
.wb-hidden-why {
    flex: 1 1 200px;
    min-width: 0;
    font-size: 12px;
    color: var(--sz-soft);
}

.wb-lbl {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sz-sky);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
}

.wb-review {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(245, 166, 35, .12);
    border: 1px solid rgba(245, 166, 35, .45);
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
}

.wb-review.blocks {
    background: rgba(255, 107, 94, .12);
    border-color: rgba(255, 107, 94, .45);
}

.wb-review b {
    color: var(--sz-warnfg);
}

.wb-review.blocks b {
    color: var(--sz-badfg);
}

/* 2026-10-25 (GitHub #154): the object's lines are not fine (waiting, stalled, failed, out of the pack) - one line in the card. */
.wb-linewarn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 9px 12px;
    border-radius: 14px;
    border: 1px solid rgba(46, 156, 202, .45);
    background: rgba(46, 156, 202, .10);
    font-size: 13px;
}

.wb-linewarn[data-tone="warn"] {
    border-color: rgba(245, 166, 35, .45);
    background: rgba(245, 166, 35, .12);
}

.wb-linewarn[data-tone="bad"] {
    border-color: rgba(255, 107, 94, .45);
    background: rgba(255, 107, 94, .12);
}

.wb-linewarn-text {
    flex: 1 1 200px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.wb-linewarn[data-tone="warn"] b {
    color: var(--sz-warnfg);
}

.wb-linewarn[data-tone="bad"] b {
    color: var(--sz-badfg);
}

.wb-review ul {
    margin: 0;
    padding-left: 18px;
}

.wb-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.wb-btn {
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--sz-line2);
    border-radius: 12px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--sz-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    text-decoration: none;
}

.wb-btn:hover:not(:disabled) {
    border-color: var(--sz-sky);
}

.wb-btn:disabled {
    opacity: .45;
    cursor: default;
}

.wb-btn:focus-visible {
    outline: 2px solid var(--sz-sky);
    outline-offset: 1px;
}

.wb-btn.light {
    background: var(--sz-pbg);
    border-color: var(--sz-pbg);
    color: var(--sz-pfg);
}

.wb-btn.danger {
    border-color: rgba(255, 107, 94, .6);
    color: var(--sz-badfg);
}

.wb-btn.sm {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
}

.wb-btn.primary {
    height: 40px;
    font-weight: 800;
}

.wb-gbtn {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 12px;
    background: var(--sz-surf);
    border: 1px solid var(--sz-line);
    color: var(--sz-text);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.wb-gbtn:hover {
    border-color: var(--sz-sky);
}

.wb-opts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.wb-opts.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wb-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 10px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid var(--sz-line);
    background: var(--sz-surf);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--sz-soft);
    cursor: pointer;
    text-align: left;
}

.wb-opt:hover {
    border-color: var(--sz-acc);
}

.wb-opt.on {
    background: var(--sz-accbg);
    border-color: var(--sz-acc);
    color: var(--sz-text);
}

.wb-opt.on.red {
    background: rgba(255, 107, 94, .14);
    border-color: var(--sz-bad);
}

.wb-opt:focus-visible {
    outline: 2px solid var(--sz-sky);
    outline-offset: 1px;
}

.wb-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.wb-limits {
    width: 100%;
    border-collapse: separate;
    border-spacing: 6px 4px;
    margin: 0 -6px;
    font-size: 12px;
}

.wb-limits th {
    text-align: left;
    font-weight: 700;
    color: var(--sz-faint);
}

.wb-limits td:first-child {
    color: var(--sz-soft);
    font-weight: 700;
    line-height: 1.35;
}

.wb-limits td:first-child .wb-tag {
    display: table;
    margin: 3px 0 0;
}

.wb-limits td input {
    width: 72px;
}

.wb-limits th:not(:first-child), .wb-limits td:not(:first-child) {
    width: 76px;
}

.wb-stat {
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--sz-surf);
    border: 1px solid var(--sz-line);
}

.wb-stat b {
    display: block;
    font-weight: 800;
    font-size: 18px;
}

.wb-dim {
    font-size: 11px;
    color: var(--sz-faint);
    font-weight: 700;
}

.wb-help {
    margin: 6px 0 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--sz-faint);
    line-height: 1.45;
}

.wb-facts {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 12px;
}

.wb-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.wb-facts span:first-child {
    color: var(--sz-mut);
}

.wb-facts b {
    text-align: right;
    word-break: break-word;
}

.wb-timeline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12px;
}

.wb-timeline > div {
    display: flex;
    gap: 10px;
}

.wb-timeline .wb-when {
    flex: none;
    width: 78px;
    font-weight: 800;
    color: var(--sz-soft);
}

.wb-details summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    color: var(--sz-sky);
}

.wb-details[open] summary {
    margin-bottom: 10px;
}

/* The table view. */

.wb-table-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 12px 18px 18px;
}

.wb-bulk {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 14px;
    margin-top: 10px;
    border-radius: 16px;
    background: var(--sz-raised);
    border: 1px solid var(--sz-line2);
    box-shadow: 0 16px 36px var(--sz-shadow);
    font-size: 13px;
    font-weight: 700;
}

.wb-lim {
    border: 1px dashed transparent;
    border-radius: 8px;
    padding: 3px 8px;
    cursor: text;
    font-weight: 800;
    background: transparent;
    color: inherit;
    font: inherit;
}

.wb-lim:hover {
    border-color: var(--sz-sky);
}

.wb-lim-input {
    width: 70px;
    height: 30px;
    border: 1px solid var(--sz-sky);
    border-radius: 8px;
    padding: 0 8px;
    font: inherit;
    font-weight: 800;
    background: var(--sz-bg);
    color: var(--sz-text);
}

/* Phone width: the list, the view and the panel one under another. */
@media (max-width: 900px) {
    .wb {
        flex-direction: column;
        height: auto;
    }

    .wb-list {
        width: auto;
        max-height: 42vh;
        border-right: 0;
        border-bottom: 1px solid var(--sz-hair);
    }

    .wb-main {
        height: auto;
    }

    .wb-stage {
        min-height: 58vh;
    }

    .wb-panel {
        width: auto;
        border-left: 0;
        border-top: 1px solid var(--sz-hair);
    }

    .wb-vsw button {
        padding: 0 10px;
    }
}

/* ---- Layout by width (GitHub #162, PM decision 2026-10-25) ----------------------------------------------------------------
   1500 px and wider: list, view and panel side by side. 901-1499 px: an open object hides the list (the map gets its room);
   "← Sąrašas" shows it again until the next object is opened. Up to 900 px (phones, small tablets): with no object open the
   list or the map takes the screen ("Sąrašas | Žemėlapis"); an open object shows the map on top and its card under it. */

.wb-back,
.wb-phone-switch {
    display: none;
}

.wb-back {
    flex: none;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--sz-line);
    background: var(--sz-surf);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    color: var(--sz-text);
    cursor: pointer;
}

.wb-back:focus-visible,
.wb-phone-switch button:focus-visible {
    outline: 2px solid var(--sz-sky);
    outline-offset: 1px;
}

@media (min-width: 901px) and (max-width: 1499.98px) {
    .wb.has-panel:not(.list-open) .wb-list {
        display: none;
    }

    .wb.has-panel:not(.list-open) .wb-back.desk {
        display: inline-flex;
        align-items: center;
    }
}

@media (max-width: 900px) {
    .wb-phone-switch {
        display: flex;
        margin: 10px 12px 0;
        padding: 4px;
        gap: 2px;
        border-radius: 999px;
        background: var(--sz-surf);
        border: 1px solid var(--sz-line);
    }

    .wb-phone-switch button {
        flex: 1;
        height: 36px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        font: inherit;
        font-size: 14px;
        font-weight: 800;
        color: var(--sz-soft);
        cursor: pointer;
    }

    .wb-phone-switch button.on {
        background: var(--sz-pbg);
        color: var(--sz-pfg);
    }

    .wb.has-panel .wb-phone-switch,
    .wb.has-panel .wb-list,
    .wb.phone-map .wb-list,
    .wb:not(.has-panel):not(.phone-map) .wb-main {
        display: none;
    }

    .wb:not(.has-panel) .wb-list {
        max-height: none;
        border-bottom: 0;
    }

    .wb.phone-map:not(.has-panel) .wb-stage {
        min-height: calc(100vh - 200px);
    }

    .wb.has-panel .wb-stage {
        min-height: 42vh;
        height: 42vh;
    }

    .wb.has-panel .wb-back.phone {
        display: inline-flex;
        align-items: center;
        height: 36px;
        padding: 0 12px;
    }
}

/* Our map's own notices (no basemap file, a failed load) sit small over the map instead of pushing it down. */
.wb-layer .sz-map-notice, .wb-layer #map-error {
    position: absolute;
    left: 14px;
    right: 60px;
    bottom: 54px;
    z-index: 3;
    opacity: .9;
}

/* The table view: the whole width, the queues and the search above the table. */
.wb-tablemode .wb-table-wrap {
    display: flex;
    flex-direction: column;
}

.wb-table-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 12px;
}

.wb-tablemode table td, .wb-tablemode table th {
    white-space: nowrap;
}

.wb-tablemode table td.wb-wrap {
    white-space: normal;
    min-width: 220px;
}

/* ---- The sections page --------------------------------------------------------------------------------------------- */

.wb-ends {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.wb-ends .wb-input {
    flex: 1;
    min-width: 0;
}

.wb-end-mark {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #0b1220;
}

.wb-end-mark.s {
    background: #4cd964;
}

.wb-end-mark.f {
    background: #ff6b5e;
}

.wb-list-plain {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.6;
}

/* The fuller section editor (ZoneEditPanel) inside the narrow panel: one column, no card of its own. */
.wb-panel #zone-edit-panel {
    padding: 0 !important;
    background: transparent;
    box-shadow: none;
}

.wb-panel .mud-grid-item {
    flex-basis: 100% !important;
    max-width: 100% !important;
}

/* ---- Camera map note under the pole (GitHub #183): facing not given / no lines yet ---------------------------------------- */

/* GitHub #183: the same note on Google's satellite map (a marker label). */
.sz-gmap-note {
    padding: 2px 9px;
    border: 1.5px solid #b07a12;
    border-radius: 999px;
    background: #fff8e6;
    white-space: nowrap;
}

.sz-map-pill {
    padding: 2px 9px;
    border: 1.5px solid #b07a12;
    border-radius: 999px;
    background: #fff8e6;
    color: #5e3c00;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ---- Map legend (GitHub #113) ----------------------------------------------------------------------------------------
   Drawn by zone-map.js into the OSM map: only what is on the map now, with the layers' own colours and dashes. */

.sz-map-legend {
    position: absolute;
    left: 10px;
    bottom: 36px;
    z-index: 3;
    max-width: min(300px, calc(100% - 20px));
    /* GitHub #161: never more than 45 % of the map (the list scrolls inside), folded by default on narrow screens. */
    max-height: min(45%, calc(100% - 96px));
    display: flex;
    flex-direction: column;
    background: var(--sz-glass);
    border: 1px solid var(--sz-glassl);
    border-radius: 14px;
    color: var(--sz-text);
    backdrop-filter: blur(6px);
    font-size: 12px;
    line-height: 1.3;
}

.sz-map-legend[hidden] {
    display: none;
}

.sz-map-legend-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 11px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.sz-map-legend-chevron::after {
    content: "▾";
    display: inline-block;
    transition: transform .15s;
}

.sz-map-legend.collapsed .sz-map-legend-chevron::after {
    transform: rotate(-90deg);
}

.sz-map-legend-list {
    list-style: none;
    margin: 0;
    padding: 0 11px 9px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sz-map-legend.two-col {
    max-width: min(560px, calc(100% - 20px));
}

.sz-map-legend.two-col .sz-map-legend-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
}

.sz-map-legend-list[hidden] {
    display: none;
}

.sz-map-legend-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sz-soft);
}

.sz-map-legend-swatch {
    flex: none;
}

/* ---- The panel's cards (GitHub #137, the PM-approved mockup "Kortelės" with the directions add-on, #141) ---------------------
   Header (icon, title, ↑ ↓ ✕; id · source id · chips; the camera's coordinates / the section's length), the sources strip, underline
   tabs, then one tinted card per part (--sz-raised) with its fields on --sz-surf; the sources beside each field fold open. */

.wb-ph {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 6px 16px;
}

.wb-ph .wb-panel-title {
    flex: 1;
    min-width: 0;
    text-wrap: balance;
    line-height: 1.25;
}

.wb-ph-ico {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    align-self: flex-start;
}

.wb-ph-ico svg {
    width: 20px;
    height: 20px;
}

.wb-ph-ico.cam {
    background: color-mix(in srgb, var(--sz-warn) 16%, transparent);
    color: var(--sz-warn);
}

.wb-ph-ico.zone {
    background: color-mix(in srgb, var(--sz-acc) 16%, transparent);
    color: var(--sz-acc);
}

.wb-ph-nav {
    display: flex;
    gap: 3px;
    flex: none;
    align-self: flex-start;
}

.wb-ph-nav .wb-gbtn {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
    display: grid;
    place-items: center;
    padding: 0;
}

.wb-ph-rows {
    display: grid;
    gap: 7px;
    padding: 0 16px 2px 64px;
}

.wb-ph-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--sz-faint);
}

.wb-ph-meta .id {
    font-variant-numeric: tabular-nums;
}

.wb-ph-coords {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wb-ph-sub {
    font-size: 12px;
    color: var(--sz-mut);
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.wb-coord {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 9px;
    border: 1px dashed var(--sz-line2);
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sz-text);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.wb-coord svg {
    width: 14px;
    height: 14px;
    color: var(--sz-faint);
}

.wb-coord:hover {
    background: var(--sz-raised);
    border-color: var(--sz-acc);
}

.wb-coord.done, .wb-ibtn.done {
    border-color: var(--sz-okfg);
    border-style: solid;
    color: var(--sz-okfg);
}

.wb-coord.done svg, .wb-ibtn.done svg {
    color: var(--sz-okfg);
}

.wb-ibtn {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--sz-mut);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}

.wb-ibtn svg {
    width: 15px;
    height: 15px;
}

.wb-ibtn:hover, .wb-ibtn.on {
    border-color: var(--sz-line);
    background: var(--sz-raised);
    color: var(--sz-text);
}

.wb-dirchip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--sz-accbg);
    color: var(--sz-acc);
    white-space: nowrap;
    vertical-align: middle;
}

.wb-row-line .wb-dirchip, .wb-wrap .wb-dirchip {
    font-size: 11px;
}

/* The sources strip. */
.wb-srcbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 4px 16px 10px;
    font-size: 11px;
    color: var(--sz-faint);
    font-weight: 700;
    position: relative;
}

.wb-srcbar .lbl {
    margin-right: 2px;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 800;
    cursor: help;
}

.wb-srcbar .when {
    font-weight: 600;
}

.wb-srcwrap {
    position: relative;
}

.wb-srcchip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--sz-line);
    background: var(--sz-surf);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--sz-soft);
    cursor: pointer;
}

.wb-srcchip svg {
    width: 10px;
    height: 10px;
}

.wb-srcchip:hover, .wb-srcchip[aria-expanded="true"] {
    border-color: var(--sz-acc);
    color: var(--sz-text);
}

.wb-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 30;
    min-width: 170px;
    background: var(--sz-surf);
    border: 1px solid var(--sz-line);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 10px 24px var(--sz-shadow);
    display: grid;
    gap: 2px;
}

.wb-menu a {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sz-text);
    text-decoration: none;
}

.wb-menu a:hover {
    background: var(--sz-raised);
}

.wb-menu a span, .wb-menu-empty {
    color: var(--sz-faint);
    font-weight: 600;
}

.wb-menu-empty {
    padding: 7px 9px;
    font-size: 12px;
}

.wb-menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 20;
}

.wb-srcwrap:has(.wb-menu) {
    z-index: 31;
}

.wb-sw {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: var(--sz-soft);
    user-select: none;
    font-size: 11px;
    font-weight: 700;
}

.wb-srcbar .wb-sw {
    margin-left: auto;
}

.wb-sw input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--sz-acc);
}

/* Underline tabs, as in the mockup. */
.wb-panel .wb-ptabs {
    padding: 0 12px;
    gap: 4px;
}

.wb-panel .wb-ptab {
    height: auto;
    padding: 9px 10px 10px;
    border-radius: 6px 6px 0 0;
    font-size: 13px;
    font-weight: 700;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.wb-panel .wb-ptab.on {
    background: transparent;
    color: var(--sz-text);
    border-bottom-color: var(--sz-acc);
}

.wb-panel .wb-ptab:hover {
    color: var(--sz-text);
}

.wb-panel .wb-panel-body {
    padding: 12px 14px 18px;
    gap: 10px;
}

/* GitHub #172: the footer wraps instead of pushing a button out of the panel; the primary "Išsaugoti" stays on the right, whole. */
.wb-panel .wb-panel-foot {
    padding: 10px 12px;
    flex-wrap: wrap;
    row-gap: 8px;
}

.wb-panel .wb-panel-foot > .wb-btn {
    max-width: 100%;
}

.wb-panel .wb-panel-foot > .wb-btn.primary {
    margin-left: auto;
    flex-shrink: 0;
}

/* The cards. */
.wb-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    background: var(--sz-raised);
    min-width: 0;
}

.wb-fsrc {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.wb-fld-h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 20px;
}

.wb-card .wb-lbl, .wb-lbl-plain {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sz-mut);
}

.wb-lbl-plain {
    display: block;
    margin: 4px 0;
}

.wb-unit {
    font-size: 12px;
    color: var(--sz-faint);
    font-weight: 700;
}

.wb-prov {
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--sz-surf);
    border: 1px solid var(--sz-line);
    color: var(--sz-soft);
}

.wb-prov.none {
    border-color: transparent;
    background: rgba(255, 107, 94, .14);
    color: var(--sz-badfg);
}

.wb-diff {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid rgba(245, 166, 35, .4);
    background: rgba(245, 166, 35, .14);
    color: var(--sz-warnfg);
    cursor: pointer;
}

.wb-diff svg {
    width: 9px;
    height: 9px;
    transition: transform .2s;
}

.wb-diff[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.wb-info {
    margin-left: auto;
    color: var(--sz-faint);
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: help;
}

.wb-info svg {
    width: 14px;
    height: 14px;
}

/* A choice shows only its current value; the options unfold on a click. */
.wb-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 6px 10px 6px 12px;
    border-radius: 12px;
    border: 1px solid var(--sz-line);
    background: var(--sz-surf);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--sz-text);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.wb-choice:hover:not(:disabled) {
    border-color: var(--sz-acc);
}

.wb-choice:disabled {
    cursor: default;
    opacity: .75;
}

.wb-choice[aria-expanded="true"] {
    border-color: var(--sz-acc);
    background: var(--sz-accbg);
}

.wb-choice.red {
    border-color: var(--sz-badfg);
    background: rgba(255, 107, 94, .14);
}

.wb-choice .chev {
    margin-left: auto;
    width: 14px;
    height: 14px;
    color: var(--sz-faint);
    flex: none;
    transition: transform .2s;
}

.wb-choice[aria-expanded="true"] .chev {
    transform: rotate(180deg);
}

.wb-choice:focus-visible, .wb-diff:focus-visible, .wb-srcchip:focus-visible, .wb-coord:focus-visible, .wb-ibtn:focus-visible, .wb-use:focus-visible {
    outline: 2px solid var(--sz-sky);
    outline-offset: 1px;
}

.wb-optswrap, .wb-srcrows {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .25s ease, opacity .2s;
}

.wb-optswrap > div, .wb-srcrows > div {
    min-height: 0;
    overflow: hidden;
    /* Folded: not clickable, not in the tab order (hidden after the fold animation). */
    visibility: hidden;
    transition: visibility 0s linear .25s;
}

.wb-optswrap.open, .wb-srcrows.open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.wb-optswrap.open > div, .wb-srcrows.open > div {
    visibility: visible;
    transition-delay: 0s;
}

.wb-optswrap .wb-opts {
    padding-top: 6px;
}

.wb-opt.danger:not(.on) {
    color: var(--sz-badfg);
}

/* The per-field source rows (the former "Šaltiniai" table, folded into each field). */
.wb-srcrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 10px;
    border-radius: 9px;
    font-size: 12px;
    margin-top: 4px;
    background: var(--sz-surf);
    border: 1px solid var(--sz-hair);
}

.wb-srcrow .name {
    font-weight: 800;
    color: var(--sz-mut);
    width: 52px;
    flex: none;
    overflow-wrap: anywhere;
}

.wb-srcrow .val {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sz-text);
    overflow-wrap: anywhere;
}

.wb-srcrow .val.dim {
    color: var(--sz-faint);
    font-weight: 600;
}

.wb-srcrow.wins {
    background: rgba(76, 217, 100, .12);
    border-color: transparent;
}

.wb-srcrow.wins .name {
    color: var(--sz-okfg);
}

.wb-srcrow.wins .val::after {
    content: " ✓";
    color: var(--sz-okfg);
}

.wb-srcrow.warn {
    background: rgba(245, 166, 35, .14);
    border-color: transparent;
}

.wb-srcrow.warn .val {
    color: var(--sz-warnfg);
    font-weight: 600;
}

.wb-srcrow-field {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--sz-faint);
}

.wb-use {
    border: 1px solid var(--sz-line);
    background: var(--sz-surf);
    border-radius: 7px;
    padding: 3px 9px;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    color: var(--sz-acc);
    cursor: pointer;
    flex: none;
}

.wb-use:hover {
    border-color: var(--sz-acc);
}

.wb-card .wb-input {
    background: var(--sz-surf);
}

.wb-input.flash {
    animation: wb-flash .9s ease;
}

@keyframes wb-flash {
    0% {
        background: rgba(76, 217, 100, .2);
        border-color: var(--sz-okfg);
    }

    100% {
        background: var(--sz-surf);
    }
}

/* Limits: per direction a row - its name (and "Rodoma"), the field, the grey line the pack works out. */
.wb-lims {
    display: grid;
    gap: 8px;
}

.wb-limrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 10px;
}

.wb-limrow > .wb-fld-h, .wb-limrow > .wb-dir {
    grid-column: 1;
}

.wb-limrow > .wb-input {
    grid-column: 2;
    grid-row: 1;
}

.wb-limrow .wb-auto, .wb-limrow .wb-srcrows {
    grid-column: 1 / -1;
}

.wb-limrow + .wb-limrow {
    border-top: 1px dashed var(--sz-line2);
    padding-top: 10px;
}

.wb-limrow.off .wb-input, .wb-limrow.off .wb-auto {
    opacity: .45;
}

.wb-dir {
    display: grid;
    gap: 4px;
    align-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--sz-soft);
    min-width: 0;
}

.wb-dir-t {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wb-limrow .wb-dir-t {
    flex-basis: 100%;
}

.wb-dir-c {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wb-dir-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--sz-text);
}

.wb-dsw {
    font-size: 12px;
}

.wb-dsw.off {
    color: var(--sz-badfg);
}

.wb-auto {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sz-faint);
    font-variant-numeric: tabular-nums;
    padding: 0 2px 4px;
}

.wb-hintbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--sz-accbg);
    color: var(--sz-text);
    font-size: 12px;
    font-weight: 600;
}

.wb-hintbar svg {
    width: 14px;
    height: 14px;
    color: var(--sz-acc);
    flex: none;
}

.wb-warnline {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--sz-warnfg);
}

.wb-signs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--sz-soft);
    flex-wrap: wrap;
}

.wb-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--sz-surf);
    border: 1px solid var(--sz-hair);
    font-weight: 700;
    cursor: default;
}

.wb-pill svg {
    width: 12px;
    height: 12px;
    color: var(--sz-acc);
}

.wb-sel {
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--sz-line);
    background: var(--sz-surf);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 0 6px;
    color: var(--sz-text);
}

/* Start and end, per direction. */
.wb-dgroup {
    display: grid;
    gap: 8px;
}

.wb-dgroup + .wb-dgroup {
    border-top: 1px dashed var(--sz-line2);
    padding-top: 10px;
}

.wb-dhead {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--sz-text);
}

.wb-fsrc.wb-end {
    gap: 6px;
}

.wb-end .wb-end-mark {
    width: 22px;
    height: 22px;
    font-size: 11px;
}

.wb-endrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px;
}

.wb-endrow .wb-input {
    min-width: 0;
}

/* Facts in two columns (the section's figures, the source fields under "Daugiau"). */
.wb-facts2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    font-size: 12px;
}

.wb-facts2 > div {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.wb-facts2 span:first-child {
    color: var(--sz-faint);
    font-weight: 600;
}

.wb-facts2 b {
    font-weight: 700;
    color: var(--sz-text);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.wb-facts2 .wb-prov {
    margin-left: 2px;
}

.wb-facts-plain {
    padding: 4px 4px 2px;
}

details.wb-more {
    border-top: 1px solid var(--sz-hair);
    padding-top: 10px;
}

details.wb-more summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sz-acc);
}

details.wb-more summary::-webkit-details-marker {
    display: none;
}

details.wb-more summary svg {
    width: 12px;
    height: 12px;
    transition: transform .2s;
}

details.wb-more[open] summary svg {
    transform: rotate(90deg);
}

.wb-more-inner {
    display: grid;
    /* 2026-10-24 (#137): one column as wide as the panel - an "auto" track grew to the widest child (the limits table) and pushed
       the whole panel sideways. */
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-top: 12px;
    min-width: 0;
}

.wb-more-inner > * {
    min-width: 0;
    max-width: 100%;
}

/* 2026-10-24 (GitHub #144): the camera limits per direction under "Daugiau" - one block per direction, as wide as the panel. */
.wb-climits {
    display: grid;
    gap: 10px;
}

.wb-climit {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--sz-hair);
    border-radius: 10px;
    background: var(--sz-surf);
    font-size: 12px;
    min-width: 0;
}

.wb-climit-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-weight: 700;
    color: var(--sz-text);
}

.wb-climit-head b {
    font-size: 15px;
}

.wb-climit-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
    color: var(--sz-text);
    overflow-wrap: anywhere;
}

.wb-climit-row > span:first-child {
    color: var(--sz-faint);
    font-weight: 600;
}

.wb-climit-sub {
    display: block;
    color: var(--sz-faint);
}

.wb-climit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Any other wide table under "Daugiau" scrolls on its own, the panel does not. */
.wb-more-inner .mud-table-container {
    max-width: 100%;
    overflow-x: auto;
}

.wb-lab {
    display: grid;
    gap: 4px;
    font-size: 12px;
    color: var(--sz-faint);
    font-weight: 600;
}

/* 2026-10-23 (GitHub #135): a label with its info icon ("Kelio rūšis"). */
.wb-lab-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wb-btn.on {
    background: var(--sz-acc);
    border-color: var(--sz-acc);
    color: #fff;
}

/* The direction picker of "Linijos", "Maršrutas", "Istorija" and the section's editor. */
.wb-dirpick {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--sz-line);
    border-radius: 999px;
    background: var(--sz-surf);
    align-self: flex-start;
    max-width: 100%;
}

.wb-dirpick button {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 4px 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--sz-mut);
    cursor: pointer;
}

.wb-dirpick button.on {
    background: var(--sz-pbg);
    color: var(--sz-pfg);
}

.wb-dirpick button:disabled {
    cursor: default;
    opacity: .6;
}

/* "Kryptys: Sujungti su… / Atskirti kryptis". */
.wb-merge {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.wb-cand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--sz-line);
    border-radius: 10px;
    background: var(--sz-surf);
    font-size: 13px;
}

.wb-cand.on {
    border-color: var(--sz-acc);
}

.wb-cand .wb-btn {
    margin-left: auto;
}

.wb-confirm {
    display: grid;
    gap: 6px;
}

@media (max-width: 900px) {
    .wb-ph-rows {
        padding-left: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wb-optswrap, .wb-srcrows, .wb-diff svg, .wb-coord, .wb-choice, .wb-choice .chev {
        transition: none;
    }

    .wb-input.flash {
        animation: none;
    }
}

/* 2026-10-25 (GitHub #163): the AI line review's block under the "Linijos" tab. */
.wb-airev {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--sz-line);
    background: var(--sz-surf);
}

.wb-airev-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.wb-airev-running {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.wb-airev-dir {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--sz-line);
    background: var(--sz-bg);
    font-size: 13px;
}

.wb-airev-dir[data-state="waiting_pm"] {
    border-color: rgba(245, 166, 35, .45);
}

.wb-airev-why {
    color: var(--sz-soft);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.wb-airev-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wb-airev-fix {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--sz-hair);
}

.wb-airev-fixtext {
    overflow-wrap: anywhere;
}

/* 2026-11-02 (GitHub #166, the approved design "DI siūloma linija"): the fix that waits for the PM is a card of its own (warm), with
   "Rodyti žemėlapyje" / "Pritaikyti" / "Atmesti" and the map the AI saw. */
.wb-airev-fix.waiting {
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--sz-warn) 45%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--sz-warn) 9%, var(--sz-surf));
}

.wb-airev-waiting-title {
    color: var(--sz-warnfg);
    font-weight: 800;
}

.wb-btn.wb-btn-shown {
    background: color-mix(in srgb, var(--sz-warn) 20%, var(--sz-surf));
    border-color: color-mix(in srgb, var(--sz-warn) 60%, transparent);
    color: var(--sz-warnfg);
}

.wb-airev-png {
    font-size: 13px;
    font-weight: 700;
    color: var(--sz-acc);
    align-self: flex-start;
}

/* The chip on the big map while it draws the proposed line - under the view's name, clear of the zoom buttons. */
.wb-ov-aichip {
    left: 14px;
    top: 52px;
    max-width: calc(100% - 72px);
}

.wb-aichip {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #fff3dc;
    border: 1px solid #e9c27a;
    color: #8a5600;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 1px 3px var(--sz-shadow);
}

.sz-app[data-theme="dark"] .wb-aichip {
    background: #35280f;
    border-color: #7a5410;
    color: #ffc766;
}

.wb-aichip-hide {
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* 2026-11-02 (GitHub #184, the approved design "Ruožo žemėlapis"): one block per direction on the section card, edged in the direction's
   map colour (forward the section colour, backward violet - zone-map.js). */
.wb-dirblocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    padding: 0 16px 10px;
}

.wb-dirblock {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--sz-raised);
    border-left: 4px solid #ad1457;
    font-size: 13px;
    min-width: 0;
}

.wb-dirblock.d1 {
    border-left-color: #5e35b1;
}

.sz-app[data-theme="dark"] .wb-dirblock {
    border-left-color: #f48fb1;
}

.sz-app[data-theme="dark"] .wb-dirblock.d1 {
    border-left-color: #b39ddb;
}

.wb-dirblock-cap {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sz-mut);
    overflow-wrap: anywhere;
}

.wb-dirblock-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.wb-airev-list {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 12px;
    color: var(--sz-soft);
}

/* ---- AI results (GitHub #177 / #178, mock-up "SpeedOk DI radiniai – dizainas"): one card everywhere ---------------------------
   The state is a strip of its own (never a button); the buttons are real buttons at the bottom: a problem "Išspręsta" / "Atmesti",
   a change "Pritaikyti" / "Atmesti". */

.ai-result {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    margin-bottom: 12px;
    border: 1px solid var(--sz-line);
    border-radius: 14px;
    background: var(--sz-surf);
}

.ai-result.sz-highlight {
    border-color: var(--sz-sky);
}

.ai-result-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ai-result-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ai-result-meta {
    color: var(--sz-mut);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.ai-result-meta b,
.ai-result-meta .sz-mono {
    color: var(--sz-text);
}

.ai-result-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--sz-soft);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ai-result-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ai-state {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 12.5px;
    border: 1px solid var(--sz-line);
}

.ai-state::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    background: currentColor;
}

.ai-state.open {
    background: rgba(245, 166, 35, .12);
    border-color: rgba(245, 166, 35, .4);
    color: var(--sz-warnfg);
}

.ai-state.change {
    background: rgba(46, 156, 202, .14);
    border-color: rgba(46, 156, 202, .4);
    color: var(--sz-sky);
}

.ai-state.done {
    background: rgba(76, 217, 100, .1);
    border-color: rgba(76, 217, 100, .4);
    color: var(--sz-okfg);
}

.ai-state.rejected {
    background: var(--sz-raised);
    color: var(--sz-mut);
}

.ai-state .sz-mono {
    margin-left: auto;
}

.wb-tag.ai-sev-critical {
    background: #b3261e;
    border-color: #b3261e;
    color: #ffffff;
}

.wb-tag.ai-sev-error {
    background: rgba(255, 107, 94, .14);
    border-color: rgba(255, 107, 94, .45);
    color: var(--sz-badfg);
}

.wb-tag.ai-sev-warning {
    background: rgba(245, 166, 35, .12);
    border-color: rgba(245, 166, 35, .4);
    color: var(--sz-warnfg);
}

.wb-tag.ai-sev-info {
    background: rgba(46, 156, 202, .12);
    border-color: rgba(46, 156, 202, .35);
    color: var(--sz-sky);
}

.wb-btn.ai-resolve {
    background: #17733a;
    border-color: #17733a;
    color: #ffffff;
}

.wb-btn.ai-apply {
    background: #1a6f99;
    border-color: #1a6f99;
    color: #ffffff;
}

.ai-views {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--sz-raised);
    flex-wrap: wrap;
}

.ai-views button {
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--sz-soft);
    cursor: pointer;
}

.ai-views button[aria-selected="true"] {
    background: var(--sz-surf);
    color: var(--sz-text);
    font-weight: 800;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.ai-views button b {
    color: var(--sz-badfg);
    margin-left: 4px;
}

/* ---- Section limit by length (GitHub #199, design approved 2026-10-30) ---------------------------------------------- */

.wb-limrow .wb-limdist {
    grid-column: 1 / -1;
}

.wb-limdist {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    padding: 0 2px 6px;
}

.wb-limbar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--sz-line);
    margin: 2px 0 3px;
}

.wb-limbar span {
    display: block;
    height: 100%;
}

.wb-limbar .lim-30 { background: #d4537e; }
.wb-limbar .lim-50 { background: #ef9f27; }
.wb-limbar .lim-60 { background: #fac775; }
.wb-limbar .lim-70 { background: #97c459; }
.wb-limbar .lim-90 { background: #378add; }
.wb-limbar .lim-110 { background: #7f77dd; }
.wb-limbar .lim-130 { background: #534ab7; }
.wb-limbar .lim-none { background: var(--sz-line2); }
.wb-limbar .lim-nor { background: repeating-linear-gradient(45deg, var(--sz-line2) 0 3px, transparent 3px 6px); }

.wb-limtext b {
    font-weight: 700;
}

.wb-limwarn {
    color: var(--sz-badfg);
    font-weight: 700;
}

.wb-limsum {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 0 8px;
}

.wb-limsum .wb-tag {
    cursor: pointer;
}

.wb-lab-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--sz-soft);
}

.wb-uni.warn {
    color: var(--sz-warnfg);
    font-weight: 700;
}

.wb-uni.bad {
    color: var(--sz-badfg);
    font-weight: 700;
}

/* 2026-10-30 (GitHub #209): the street-imagery findings under a section direction's limit bar. */
.wb-imagery {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 3px;
}

.wb-imgline {
    /* 2026-10-31 (PM's UX check): the full orange gave 3:1 contrast - a light tint with the warning text colour, like .wb-tag.warn. */
    background: rgba(245, 166, 35, .12);
    border-left: 3px solid rgba(245, 166, 35, .7);
    color: var(--sz-warnfg);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
}

.wb-imglink {
    margin-left: 6px;
    font-weight: 600;
}

.wb-linkbtn {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}

/* 2026-11-04 (GitHub #255): the sign evidence of a section direction - a folded block under the limit bar, a table inside, filters above it. */
.wb-evid {
    margin-top: 6px;
    font-size: 12px;
}

.wb-evid-head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 8px;
    background: var(--sz-raised);
    border: 1px solid var(--sz-line);
    border-radius: 8px;
    color: var(--sz-soft);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.wb-evid-head:hover {
    color: var(--sz-text);
}

.wb-evid-body {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wb-evid-classes {
    margin: 0;
    color: var(--sz-soft);
}

.wb-evid-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wb-evid-chip {
    min-height: 32px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--sz-line);
    background: var(--sz-raised);
    color: var(--sz-soft);
    font: inherit;
    cursor: pointer;
}

.wb-evid-chip b {
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

.wb-evid-chip.on {
    color: var(--sz-text);
    border-color: var(--sz-soft);
    font-weight: 700;
}

.wb-evid-chip:disabled {
    opacity: .5;
    cursor: default;
}

.wb-evid-scroll {
    overflow-x: auto;
    max-height: 360px;
    overflow-y: auto;
}

.wb-evid-table {
    width: 100%;
    border-collapse: collapse;
}

.wb-evid-table th {
    position: sticky;
    top: 0;
    background: var(--sz-surf);
    text-align: left;
    color: var(--sz-faint);
    font-weight: 700;
    padding: 4px 8px;
    border-bottom: 1px solid var(--sz-line);
}

.wb-evid-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--sz-line);
    vertical-align: top;
}

.wb-evid-table td.num {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wb-evid-table tr.before td:first-child {
    border-left: 3px solid var(--sz-line);
}

.wb-evid-table tr.gone td {
    color: var(--sz-faint);
    text-decoration: line-through;
}

.wb-evid-credit {
    margin: 0;
    color: var(--sz-faint);
}

/* 2026-11-04 (UI/UX check, #255): on a phone the block's buttons are 40 px high like the panel's other buttons. */
@media (max-width: 600px) {
    .wb-evid-head,
    .wb-evid-chip {
        min-height: 40px;
    }
}

/* 2026-11-01 (UI/UX check): on a phone the panel's step / close / place buttons were 28 px - too small to hit; 40 px there. */
@media (max-width: 600px) {
    .wb-ph-nav .wb-gbtn,
    .wb-gbtn {
        width: 40px;
        height: 40px;
    }
}

/* 2026-11-02 (GitHub #229): the "Pravažiavimai 30 d." cell - the total and one bar per day. */
.sz-passes {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.sz-passes-total {
    min-width: 2.2em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sz-passes-bars rect.on {
    fill: var(--sz-acc);
}

.sz-passes-bars rect.off {
    fill: var(--sz-line);
}

/* 2026-11-02 (GitHub #243): no sideways scrolling at 1280 px - the review chips shorten with an ellipsis (the full text is the tooltip). */
.wb-review-in {
    max-width: 176px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.wb-review-in .wb-tag {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 2026-11-02 (GitHub #243, measured at 1280 px): headers may wrap, cells keep 8 px sides and the name 196 px - the sections table went from
   1228 to 1002 px, the cameras table from 1196 to 1002 px (MudBlazor's dense cells set 16 px sides, hence !important). */
.wb-tablemode table th {
    white-space: normal;
    vertical-align: bottom;
}

.wb-tablemode table td, .wb-tablemode table th {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.wb-tablemode table td.wb-wrap {
    min-width: 196px;
}

/* 2026-11-02 (#243): on a tablet the table keeps the essentials (state, name, limit, passes, review); length, uniformity, direction and the
   last change are in the object's panel. A phone still scrolls the table inside its box - the list view is the phone's view. */
@media (max-width: 900px) {
    .wb-tablemode table .wb-col-opt {
        display: none;
    }

    .wb-review-in {
        max-width: 160px;
    }
}