@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("fonts/IBMPlexSans-Italic.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
}
:root {
--band:      #0C3A57;
--bar:       #13567F;
--accent:    #1B7AB5;
--link:      light-dark(#15618F, #7DB9E3);
--brand-ink:  light-dark(var(--band), color-mix(in srgb, var(--accent) 30%, white));
--brand-mark: light-dark(var(--bar), color-mix(in srgb, var(--accent) 75%, white));
--ink:       light-dark(#17202A, #ECE7E1);
--ink-2:     light-dark(#55616E, #BDB5AB);
--ink-3:     light-dark(#5F6D7A, #A69E94);
--ink-dim:   light-dark(#8593A0, #7A7269);
--page:      light-dark(#ECEFF3, #151412);
--panel:     light-dark(#FFFFFF, #1E1C19);
--line:      light-dark(#D5DCE3, #37332E);
--line-2:    light-dark(#E1E6EB, #2D2A26);
--line-3:    light-dark(#EBEFF3, #272421);
--field:     light-dark(#A6B2BF, #5A544D);
--head:      light-dark(#E8ECF1, #282522);
--row-alt:   light-dark(#F5F7FA, #221F1C);
--row-mark:  light-dark(color-mix(in srgb, var(--accent) 16%, white), color-mix(in srgb, var(--accent) 27%, #1E1E1E));
--field-lit: light-dark(#F8FCFF, #24211E);
--panel-alt: light-dark(#F3F6F9, #232120);
--menu-open: light-dark(#EDF1F4, #24211E);
--cell:      light-dark(#EBF0F4, #2A2723);
--cell-alt:  light-dark(#E1E8EE, #302C28);
--ok:        light-dark(#1B6B3A, #5CC98A);
--ok-edge:   light-dark(#17603A, #86D9A8);
--err:       light-dark(#A4262C, #F08A8E);
--err-bg:    light-dark(#FBE6E7, #3E1D20);
--ok-bg:     light-dark(#E3F1E7, #173826);
--warn:      light-dark(#8A5A00, #E3B660);
--warn-bg:   light-dark(#FDF8EC, #33290F);
--warn-edge: light-dark(#E8D9B4, #5E4B1F);
--bus:       light-dark(#FBEFC6, #3A3115);
--bus-edge:  light-dark(#CE9F2C, #C9A044);
--pick:      light-dark(color-mix(in srgb, var(--accent) 28%, white), color-mix(in srgb, var(--accent) 54%, #2F2F2F));
--graph:      light-dark(#6592B5, #4F80A8);
--source-alt: light-dark(#6D4C9F, #B196E0);
--rhythm-0: light-dark(#ECEEF0, #292623);
--rhythm-1: light-dark(#BCD6EC, #1E3B54);
--rhythm-2: light-dark(#88B7DE, #245A84);
--rhythm-3: light-dark(#5595CB, #2E78AD);
--rhythm-4: light-dark(#2A72B0, #4B98D0);
--rhythm-5: light-dark(#124F7E, #86C4EE);
--console:       light-dark(#0E1820, #100F0D);
--console-line:  light-dark(#22303C, #2E2A26);
--console-track: light-dark(#1B2933, #27231F);
--console-ink:   #C9D4DE;
--console-dim:   #7D8E9C;
--console-warn:  #F0C97B;
--console-err:   #FF9C9C;
--console-meta:  #8FC5E8;
--on-band:   #FFFFFF;
--on-band-2: color-mix(in srgb, var(--accent) 38%, white);
--on-bar:    color-mix(in srgb, var(--accent) 18%, white);
--line-color: var(--bar);
--font: "IBM Plex Sans", -apple-system, "Segoe UI", "Noto Sans", sans-serif;
--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
--fs-mark:  10px;
--fs-dense: 11.5px;
--fs-xs:    12px;
--fs-sm:    13px;
--fs-md:    14px;
--fs-lg:    16px;
--fs-xl:    18px;
--fs-2xl:   24px;
--lh-text:  1.5;
--apphead-height: 56px;
--menubar-height:  42px;
--control-height:  36px;
--radius:         10px;
--radius-sm:       7px;
--pill-height:   28px;
--tag-height:    15px;
--radius-round: 999px;
--shadow-drop: 0 8px 20px light-dark(rgba(12, 58, 87, 0.18), rgba(0, 0, 0, 0.55));
--shadow-card: 0 1px 2px light-dark(rgba(15, 35, 55, 0.06), transparent), 0 3px 12px light-dark(rgba(15, 35, 55, 0.05), transparent);
--edge:       20px;
--option-pad: 20px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
height: 100%;
overflow-y: scroll;
color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }
@supports not (color: light-dark(#000, #fff)) {
:root {
--link: #15618F;
--brand-ink: var(--band);
--brand-mark: var(--bar);
--ink: #17202A;
--ink-2: #55616E;
--ink-3: #5F6D7A;
--ink-dim: #8593A0;
--page: #ECEFF3;
--panel: #FFFFFF;
--line: #D5DCE3;
--line-2: #E1E6EB;
--line-3: #EBEFF3;
--field: #A6B2BF;
--head: #E8ECF1;
--row-alt: #F5F7FA;
--row-mark: color-mix(in srgb, var(--accent) 16%, white);
--field-lit: #F8FCFF;
--panel-alt: #F3F6F9;
--menu-open: #EDF1F4;
--cell: #EBF0F4;
--cell-alt: #E1E8EE;
--ok: #1B6B3A;
--ok-edge: #17603A;
--err: #A4262C;
--err-bg: #FBE6E7;
--ok-bg: #E3F1E7;
--warn: #8A5A00;
--warn-bg: #FDF8EC;
--warn-edge: #E8D9B4;
--bus: #FBEFC6;
--bus-edge: #CE9F2C;
--pick: color-mix(in srgb, var(--accent) 28%, white);
--graph: #6592B5;
--source-alt: #6D4C9F;
--rhythm-0: #ECEEF0;
--rhythm-1: #BCD6EC;
--rhythm-2: #88B7DE;
--rhythm-3: #5595CB;
--rhythm-4: #2A72B0;
--rhythm-5: #124F7E;
--console: #0E1820;
--console-line: #22303C;
--console-track: #1B2933;
--shadow-drop: 0 8px 20px rgba(12, 58, 87, 0.18);
--shadow-card: 0 1px 2px rgba(15, 35, 55, 0.06), 0 3px 12px rgba(15, 35, 55, 0.05);
}
}
body {
margin: 0;
min-height: 100%;
display: flex;
flex-direction: column;
font-family: var(--font);
font-size: var(--fs-md);
color: var(--ink);
background-color: var(--page);
}
h1 { margin: 0 0 12px; font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.01em; }
h2 { margin: 18px 0 8px; font-size: var(--fs-lg); font-weight: 600; }
p  { margin: 0 0 8px; }
:where(.panel, .modal-body) :where(p, ul, ol) { line-height: var(--lh-text); }
a:where(:any-link) { color: var(--link); }
a:where(:any-link):hover { color: var(--brand-ink); }
:where(a, button, [tabindex]):focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.apphead :focus-visible,
.menubar :focus-visible { outline-color: var(--on-band); }
input, textarea, select {
font-family: inherit;
font-size: var(--fs-md);
color: var(--ink);
}
input[type="text"], input[type="password"], input[type="search"], input[type="date"], select, textarea {
height: var(--control-height);
padding: 0 10px;
border: 1px solid var(--field);
border-radius: var(--radius-sm);
background: var(--panel);
}
textarea { height: auto; padding: 8px 10px; }
select {
appearance: none;
-webkit-appearance: none;
padding-right: 30px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236B7784' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 2l5 4 5-4'/></svg>");
background-repeat: no-repeat;
background-position: right 11px center;
background-size: 11px 7px;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
border-color: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent);
background-color: var(--field-lit);
outline: none;
}
button, input[type="submit"], input[type="button"] {
height: var(--control-height);
font-family: inherit;
font-size: var(--fs-md);
font-weight: 500;
cursor: pointer;
}
.app {
flex: 1;
display: flex;
flex-direction: column;
}
.sheet {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.view {
flex: 1;
display: flex;
flex-direction: column;
background-color: var(--page);
}
.view[aria-busy="true"] { cursor: progress; }
.view[aria-busy="true"] > * {
opacity: 0.6;
transition: opacity 0.15s 0.2s;
}
.view[aria-busy="true"]::before {
content: '';
position: fixed;
inset: 0 0 auto;
z-index: 100;
height: 3px;
background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat;
background-size: 40% 100%;
opacity: 0;
animation: view-busy-show 1ms 0.2s forwards, view-busy-run 1.1s linear 0.2s infinite;
}
@keyframes view-busy-show { to { opacity: 1; } }
@keyframes view-busy-run {
from { background-position: -40% 0; }
to   { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
.view[aria-busy="true"]::before {
background: var(--accent);
animation: view-busy-show 1ms 0.2s forwards;
}
}
.view-head {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 20px;
padding: 22px var(--edge) 2px;
background: var(--page);
}
.view-heading {
flex-grow: 1;
min-width: 0;
}
.view-titleline {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.view-title {
flex-shrink: 0;
max-width: 100%;
margin: 0;
font-size: var(--fs-2xl);
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.2;
}
.view-badge {
flex-shrink: 0;
padding: 2px 8px;
border-radius: 3px;
background: var(--row-mark);
color: var(--brand-mark);
font-size: var(--fs-dense);
font-weight: 600;
letter-spacing: 0.02em;
}
.view-badge + .view-badge {
background: var(--head);
color: var(--ink-2);
font-weight: 400;
}
.view-lead {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--fs-md);
}
.view-expand {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--ink-dim);
}
.view-expand:hover,
.modal-close:hover {
border-color: var(--field);
background: var(--head);
color: var(--ink);
}
.view-expand .icon-collapse { display: none; }
.view:fullscreen .view-expand .icon-expand { display: none; }
.view:fullscreen .view-expand .icon-collapse { display: block; }
.view:fullscreen { background-color: var(--page); }
.view:fullscreen .view-body {
min-height: 0;
overflow-y: auto;
}
.view::backdrop { background-color: var(--page); }
.no-fullscreen .view-expand { display: none; }
.view-actions,
.lt-actions {
display: flex;
gap: 10px;
}
.view-actions { flex-shrink: 0; }
.view-body {
flex: 1;
padding: 16px var(--edge) 24px;
}
.dropdown-list {
position: absolute;
z-index: 30;
display: none;
margin: 0;
padding: 6px;
list-style: none;
border: 1px solid var(--field);
background: var(--panel);
box-shadow: var(--shadow-drop);
color: var(--ink);
}
[data-dropdown].is-open > .dropdown-list { display: block; }
.dropdown-list :where(a, [aria-current], .dropdown-link) {
display: block;
padding: 9px 12px;
border-radius: 4px;
color: var(--ink);
font-size: var(--fs-md);
line-height: 18px;
text-decoration: none;
}
.dropdown-list form { margin: 0; }
.dropdown-list .dropdown-link {
width: 100%;
border: 0;
background: transparent;
font: inherit;
text-align: left;
cursor: pointer;
}
.dropdown-list a:hover,
.dropdown-list a:focus-visible,
.dropdown-list .dropdown-link:hover,
.dropdown-list .dropdown-link:focus-visible {
background: var(--row-mark);
color: var(--brand-ink);
outline: none;
}
.dropdown-list [aria-current] {
background: var(--row-mark);
color: var(--brand-ink);
font-weight: 600;
}
.dropdown-list a.is-soon {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
color: var(--ink-3);
}
.dropdown-list a.is-soon .state { font-weight: 500; }
.dropdown-list .dropdown-theme {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 6px 6px 6px 12px;
}
.dropdown-theme-label {
font-size: var(--fs-sm);
color: var(--ink-3);
}
.dropdown-list .dropdown-head {
position: relative;
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 6px;
padding: 6px 12px 10px;
}
.dropdown-head-name {
font-size: var(--fs-md);
font-weight: 600;
}
.dropdown-head-meta {
font-family: var(--mono);
font-size: var(--fs-xs);
color: var(--ink-3);
}
.dropdown-list .is-split {
position: relative;
margin-top: 6px;
padding-top: 6px;
}
.dropdown-list .dropdown-head::after,
.dropdown-list .is-split::before {
content: '';
position: absolute;
left: 6px;
right: 6px;
height: 1px;
background: var(--line-2);
}
.dropdown-list .dropdown-head::after { bottom: 0; }
.dropdown-list .is-split::before     { top: 0; }
.dropdown-list .dropdown-link.is-exit {
display: flex;
align-items: center;
gap: 10px;
}
.dropdown-icon {
flex-shrink: 0;
color: var(--ink-3);
}
.dropdown-link.is-exit:hover .dropdown-icon,
.dropdown-link.is-exit:focus-visible .dropdown-icon { color: currentColor; }
.apphead {
flex-shrink: 0;
height: var(--apphead-height);
display: flex;
align-items: center;
padding: 0 var(--edge);
background-color: var(--band);
color: var(--on-band);
}
.brand { flex: 0 0 auto; min-width: 0; }
.brand-link {
display: flex;
align-items: center;
gap: 15px;
color: inherit;
text-decoration: none;
}
.brand-link:hover { color: var(--on-band); }
.brand-link:hover .brand-carrier { color: var(--on-band); }
.brand-title {
font-size: var(--fs-xl);
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.brand-carrier {
padding: 4px 0 4px 15px;
border-left: 1px solid rgba(255, 255, 255, 0.25);
font-size: var(--fs-dense);
font-weight: 600;
letter-spacing: 0.1em;
line-height: 1;
color: var(--on-band-2);
}
.identity {
margin-left: auto;
display: flex;
gap: 8px;
}
.identity-item { position: relative; }
.identity-button {
display: flex;
align-items: center;
gap: 8px;
height: var(--control-height);
padding: 0 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.08);
color: var(--on-band);
font-size: var(--fs-sm);
font-weight: 400;
}
.identity-button:hover {
border-color: rgba(255, 255, 255, 0.34);
background: rgba(255, 255, 255, 0.16);
}
.identity-item.is-open .identity-button {
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.18);
}
.identity-icon { flex: 0 0 auto; }
.identity-name { white-space: nowrap; }
.identity-name.is-mono { font-size: var(--fs-xs); }
.identity-list {
top: calc(100% + 6px);
right: 0;
min-width: 100%;
width: max-content;
max-width: min(280px, calc(100vw - 24px));
border-radius: var(--radius);
}
.identity-spinner {
display: none;
flex: 0 0 auto;
width: 14px;
height: 14px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: identity-spin 0.9s linear infinite;
will-change: transform;
}
.identity-item.is-busy .identity-button .identity-icon { display: none; }
.identity-item.is-busy .identity-button .identity-spinner { display: inline-block; }
@keyframes identity-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.identity-spinner { animation: none; border-right-color: currentColor; opacity: 0.7; }
}
.identity-activity {
margin: 0 0 6px;
padding: 0 0 6px;
border-bottom: 1px solid var(--line);
}
.identity-activity-title {
display: block;
padding: 4px 12px 2px;
color: var(--ink-3);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.dropdown-list .identity-activity-item {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 7px 12px;
color: var(--ink);
font-size: var(--fs-sm);
line-height: 18px;
}
.identity-activity-item .identity-spinner {
display: inline-block;
margin-top: 2px;
color: var(--accent);
}
.identity-activity-since { color: var(--ink-3); }
.identity-list li.is-busy :is([aria-current], .dropdown-link)::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
margin-left: 8px;
border-radius: 50%;
background: var(--accent);
vertical-align: 1px;
}
.menubar {
position: relative;
z-index: 20;
flex-shrink: 0;
height: var(--menubar-height);
display: flex;
align-items: stretch;
padding: 0 var(--edge) 0 calc(var(--edge) - var(--option-pad));
background-color: var(--bar);
}
.menu-toggle { display: none; }
.menu-panel {
flex: 1;
min-width: 0;
display: flex;
align-items: stretch;
}
.menu-groups { display: flex; }
.menu-group { position: relative; }
.menu-option {
display: flex;
align-items: center;
gap: 8px;
height: 100%;
padding: 0 var(--option-pad);
border: 0;
background: transparent;
color: var(--on-bar);
font-size: var(--fs-md);
font-weight: 500;
white-space: nowrap;
}
.menu-caret { flex: 0 0 auto; }
.menu-group.is-open .menu-caret { transform: rotate(180deg); }
.menu-option:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--on-band);
}
.menu-group.is-open .menu-option,
.menu-group.is-current .menu-option {
background: rgba(255, 255, 255, 0.12);
box-shadow: inset 0 -3px 0 var(--accent);
color: var(--on-band);
}
.menu-list {
top: 100%;
left: 0;
min-width: 100%;
border-top: 0;
border-radius: 0 0 var(--radius) var(--radius);
}
.menu-list a { white-space: nowrap; }
.menu-search {
margin-left: auto;
align-self: center;
display: flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 8px;
border-radius: var(--radius-sm);
background: var(--panel);
}
.menu-search:focus-within {
outline: 2px solid var(--on-band);
outline-offset: 1px;
}
.menu-search input,
.menu-search input:focus {
width: 150px;
height: 26px;
padding: 0;
border: 0;
border-radius: 0;
background: var(--panel);
box-shadow: none;
font-size: var(--fs-sm);
outline: none;
}
.menu-search button {
width: 18px;
height: 18px;
padding: 0;
border: 0;
background: none;
line-height: 0;
}
.menu-search svg { fill: var(--ink-3); }
.menu-search input::placeholder { color: var(--ink-3); }
.app-version {
margin: 0;
padding: 0 var(--edge) 16px;
font-family: var(--mono);
font-size: var(--fs-xs);
color: var(--ink-3);
text-align: center;
}
.panel,
.panel-plain,
.filters {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
box-shadow: var(--shadow-card);
}
.filters.is-inset {
margin: 0;
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
box-shadow: none;
}
.panel {
margin-bottom: 16px;
padding: 16px;
}
.filter-search {
position: relative;
display: inline-flex;
align-items: center;
}
.filter-search > svg {
position: absolute;
right: 10px;
color: var(--ink-3);
pointer-events: none;
}
.filter-search > input { padding-right: 30px; }
.filter-search:focus-within > svg { color: var(--ink); }
.filter-search.is-wide { display: flex; }
.filter-search.is-wide > input { width: 100%; }
.panel-head.has-filter { flex-wrap: wrap; }
.panel-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 0 auto;
}
.panel-filter input[type="search"] { width: 220px; }
.head-pills { margin: 0 0 12px; }
.view-actions .head-pills { margin: 0; }
.pager {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 6px 16px;
}
.pager.panel { padding: 11px 16px; }
.pager p { margin: 0; }
.pager-pages {
display: flex;
gap: 16px;
white-space: nowrap;
}
.pager-pages [aria-disabled] { opacity: 0.55; }
.daterange-head,
.modal-head,
.wizard-bar {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
border-bottom: 1px solid var(--line);
background: var(--head);
}
.panel > h2:first-child,
.panel > .panel-head:first-child,
.panel > .trip-head:first-child,
.panel > .search-head:first-child,
.panel-plain > h2,
.filters.is-side > h2:first-child {
padding: 14px 16px 0;
}
.panel > h2:first-child::before,
.panel-head > h2::before,
.trip-head > h2::before,
.search-head > h2::before,
.panel-plain > h2::before,
.filters.is-side > h2:first-child::before {
content: '';
display: inline-block;
width: 9px;
height: 9px;
margin-right: 9px;
border: 2.5px solid var(--brand-mark);
border-radius: 50%;
vertical-align: 1px;
box-sizing: border-box;
}
.panel > h2:first-child,
.panel-plain > h2,
.filters.is-side > h2:first-child,
.daterange-head h2,
.modal-head h2,
.panel-head > h2,
.trip-head > h2,
.wizard-title {
margin: 0;
font-size: var(--fs-lg);
font-weight: 600;
}
.panel > .panel-head:first-child {
display: flex;
align-items: center;
gap: 10px;
margin: -16px -16px 14px;
}
.panel-head > h2 .muted,
.modal-head h2 .muted,
.daterange-head h2 .muted,
.panel > h2 > .muted {
font-weight: 400;
font-size: var(--fs-sm);
}
.modal-head .key-icon {
width: 28px;
height: 14px;
flex-shrink: 0;
}
.modal-body {
min-height: 0;
padding: 16px;
overflow-y: auto;
}
.modal.modal-narrow { width: min(440px, calc(100vw - 24px)); }
.modal.modal-medium { width: min(860px, calc(100vw - 24px)); }
.panel > h2:first-child { margin: -16px -16px 14px; }
.panel > *:last-child:not(dialog) { margin-bottom: 0; }
.muted { color: var(--ink-3); }
.tile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin: 0 0 16px;
padding: 0;
list-style: none;
}
.tile-grid.is-pairs {
grid-template-columns: repeat(auto-fit, minmax(min(100%, max(clamp(25% - 9px, (916px - 100%) * 999, 50% - 6px), (452px - 100%) * 999)), 1fr));
}
.tile {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
height: 100%;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
box-shadow: var(--shadow-card);
}
.panel .tile { box-shadow: none; }
.tile-label {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: var(--fs-xs);
font-weight: 500;
color: var(--ink-3);
}
.tile-label > .state { margin-left: auto; }
.tile-value {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: var(--fs-xl);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.tile-value.is-empty { font-weight: 400; color: var(--ink-3); }
.tile-note {
display: -webkit-box;
margin: 0;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
font-size: var(--fs-sm);
color: var(--ink-2);
}
.tile-note.is-split {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0 8px;
}
.tile-meter {
--share: 0%;
height: 6px;
margin: 6px 0 2px;
border-radius: 3px;
background: linear-gradient(to right, var(--accent) var(--share), var(--head) 0);
}
.lt-pick:hover {
border-color: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent);
background: var(--row-mark);
}
.rhythm { --rhythm-cell: 13px; --rhythm-gap: 3px; }
.rhythm .panel-head { flex-wrap: wrap; }
.rhythm-sources {
display: flex;
gap: 8px;
margin: 0 0 0 auto;
}
.rhythm-body {
display: flex;
flex-wrap: wrap;
gap: 20px 32px;
}
.rhythm-chart {
display: grid;
grid-template-columns: 26px auto;
column-gap: var(--rhythm-gap);
min-width: 0;
max-width: 100%;
padding: 0 4px 4px 0;
overflow-x: auto;
}
.rhythm-months,
.rhythm-grid,
.rhythm-periods {
grid-column: 2;
display: grid;
grid-template-columns: repeat(var(--weeks), var(--rhythm-cell));
column-gap: var(--rhythm-gap);
}
.rhythm-months {
margin-bottom: 4px;
font-size: var(--fs-dense);
color: var(--ink-3);
white-space: nowrap;
}
.rhythm-weekdays {
grid-column: 1;
display: grid;
grid-template-rows: repeat(7, var(--rhythm-cell));
row-gap: var(--rhythm-gap);
font-size: 11px;
line-height: var(--rhythm-cell);
color: var(--ink-3);
}
.rhythm-grid {
grid-template-rows: repeat(7, var(--rhythm-cell));
grid-auto-flow: column;
row-gap: var(--rhythm-gap);
}
.rhythm-day {
display: inline-block;
box-sizing: border-box;
width: var(--rhythm-cell);
height: var(--rhythm-cell);
border-radius: 3px;
background: var(--rhythm-0);
}
.rhythm-day.is-out { background: none; }
.rhythm-day.is-l1 { background: var(--rhythm-1); }
.rhythm-day.is-l2 { background: var(--rhythm-2); }
.rhythm-day.is-l3 { background: var(--rhythm-3); }
.rhythm-day.is-l4 { background: var(--rhythm-4); }
.rhythm-day.is-l5 { background: var(--rhythm-5); }
.rhythm-day.is-holiday { border: 1px solid var(--err); }
.rhythm-day.is-today { outline: 2px solid var(--ink); outline-offset: 1px; }
a.rhythm-day:hover,
a.rhythm-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rhythm-periods { margin-top: 8px; }
.rhythm-period {
grid-row: 1;
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
height: 18px;
padding: 0 6px;
overflow: hidden;
border-radius: 4px;
background: var(--head);
font-size: 11px;
color: var(--ink-3);
white-space: nowrap;
}
.rhythm-period.is-alt { background: var(--line-2); }
.rhythm-period strong { color: var(--ink-2); font-weight: 600; }
.rhythm-legend {
grid-column: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
margin: 12px 0 0;
font-size: var(--fs-xs);
color: var(--ink-3);
}
.rhythm-key {
display: inline-flex;
align-items: center;
gap: 5px;
font-variant-numeric: tabular-nums;
}
.rhythm-legend-title { color: var(--ink-2); }
.rhythm-facts {
display: grid;
grid-template-columns: auto 1fr;
align-content: start;
gap: 8px 14px;
min-width: 220px;
margin: 0;
font-size: var(--fs-sm);
}
.rhythm-facts dt { color: var(--ink-3); }
.rhythm-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.shortcut-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.panel.shortcut-bar > h2:first-child {
margin: 0 8px 0 0;
padding: 0;
}
.shortcut-bar .pill { color: var(--link); font-weight: 600; }
.view-body:has(> .start-mark) {
display: flex;
flex-direction: column;
}
.start-mark {
flex-shrink: 0;
margin: auto calc(-1 * var(--edge)) -24px;
padding-top: 24px;
color: color-mix(in srgb, var(--bar) 11%, transparent);
color: light-dark(color-mix(in srgb, var(--bar) 11%, transparent), color-mix(in srgb, var(--accent) 22%, transparent));
pointer-events: none;
}
.start-mark svg {
display: block;
width: 100%;
height: 140px;
}
.is-mono { font-family: var(--mono); }
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.panel > .table-scroll:last-child {
margin: 0 -16px -16px;
border-radius: 0 0 var(--radius) var(--radius);
}
table.grid {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
text-align: left;
}
table.grid thead th {
padding: 9px 16px;
border-bottom: 1px solid var(--line);
background-color: var(--panel);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-2);
text-align: left;
white-space: nowrap;
}
table.grid tbody td {
padding: 9px 16px;
border-bottom: 1px solid var(--line-2);
background-color: var(--panel);
vertical-align: middle;
}
table.grid tbody tr:nth-child(even) td { background-color: var(--row-alt); }
table.grid tbody tr:hover td { background-color: var(--row-mark); }
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tr.is-current > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.grid .is-count {
width: 1%;
white-space: nowrap;
text-align: right;
}
table.grid.is-caps thead th {
padding-top: 7px;
padding-bottom: 7px;
background-color: var(--head);
font-size: var(--fs-dense);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.button-save,
.button-cancel {
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--control-height);
border-radius: var(--radius-sm);
font-size: var(--fs-md);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.button-save {
padding: 0 16px;
border: 1px solid var(--accent);
background: var(--accent);
color: var(--on-band);
font-weight: 600;
}
.button-save:hover { border-color: var(--bar); background: var(--bar); color: var(--on-band); }
.button-cancel {
padding: 0 14px;
border: 1px solid var(--field);
background: var(--panel);
color: var(--ink);
font-weight: 500;
}
.button-save.is-small,
.button-cancel.is-small {
height: var(--pill-height);
padding: 0 10px;
font-size: var(--fs-sm);
}
.button-cancel.is-danger { color: var(--err); }
.icon-button {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid var(--field);
border-radius: 50%;
background: var(--panel);
color: var(--ink-2);
text-decoration: none;
cursor: pointer;
}
.icon-button.is-add  { color: var(--ok); }
.icon-button.is-drop { color: var(--err); }
.button-cancel:hover,
.icon-button:hover,
.trip-step:hover {
border-color: var(--ink-3);
background: var(--head);
color: var(--ink);
}
.icon-button.is-add:hover  { color: var(--ok); }
.button-cancel.is-danger:hover,
.icon-button.is-drop:hover,
.icon-button.is-danger:hover {
border-color: var(--err);
background: var(--err-bg);
color: var(--err);
}
.button-save:disabled,
.button-save:disabled:hover,
.button-cancel:disabled,
.button-cancel:disabled:hover,
.icon-button:disabled,
.icon-button:disabled:hover,
.icon-button[aria-disabled="true"],
.icon-button[aria-disabled="true"]:hover {
border-color: var(--line);
background: var(--panel);
color: var(--ink-dim);
cursor: default;
}
.button-quiet {
height: auto;
padding: 0;
border: 0;
background: none;
font-family: inherit;
font-weight: 400;
cursor: pointer;
}
.button-quiet:hover { text-decoration: underline; }
.terms-open {
font-size: inherit;
line-height: inherit;
color: inherit;
text-align: left;
}
.login,
.pw-card {
border: 1px solid var(--line);
border-radius: 10px;
background: var(--panel);
box-shadow: 0 14px 38px rgba(12, 58, 87, 0.10);
box-shadow: 0 14px 38px light-dark(rgba(12, 58, 87, 0.10), rgba(0, 0, 0, 0.45));
}
.login {
display: flex;
max-width: 860px;
margin: 40px auto;
overflow: hidden;
}
.login-welcome {
flex: 0 0 44%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
padding: 40px 34px;
border-right: 1px solid var(--line);
background: var(--panel-alt);
text-align: left;
}
.login-welcome p {
margin: 0;
font-size: var(--fs-lg);
line-height: 1.55;
color: var(--ink-2);
}
.key-icon {
flex-shrink: 0;
color: var(--accent);
}
.login-form { flex: 1; padding: 40px 38px; }
.login-logo {
display: block;
height: 30px;
width: auto;
max-width: 100%;
margin: 0 auto 24px;
}
:root[data-theme="dark"] .login-logo { filter: brightness(0) invert(1); }
.login-form h1 { margin: 0 0 20px; font-size: var(--fs-xl); }
.login-fields {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
}
.login-fields label {
margin-top: 12px;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--ink-2);
}
.login-fields label:first-of-type { margin-top: 0; }
.login-fields input,
.login-fields select {
width: 100%;
height: 42px;
font-size: var(--fs-lg);
}
.login-fields .login-submit {
width: 100%;
height: 46px;
margin-top: 20px;
font-size: var(--fs-lg);
}
.notice {
margin: 0;
padding: 9px 12px;
border-left: 3px solid var(--warn);
background: var(--warn-bg);
font-size: var(--fs-sm);
line-height: 1.5;
color: var(--ink-2);
}
.notice.is-bad {
border-left-color: var(--err);
background: var(--err-bg);
color: var(--err);
}
.notice.is-ok {
border-left-color: var(--ok);
background: var(--ok-bg);
color: var(--ok-edge);
}
.notice-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-bottom: 16px;
}
.notice-actions > span { flex: 1 1 320px; }
.toast-stack {
position: fixed;
inset: auto 16px 16px auto;
z-index: 3000;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
width: auto;
max-width: min(440px, calc(100vw - 32px));
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
overflow: visible;
pointer-events: none;
}
.toast-stack:empty { display: none; }
.visually-hidden,
.panel-filter .daterange .field-label,
.search-cover .field-label,
.search-range .field-label,
.pills-enter,
.search-pick,
.trip-mark {
position: absolute;
width: 1px;
min-width: 0;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.toast {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 10px 10px 14px;
border: 1px solid var(--line);
border-left: 3px solid var(--ink-3);
border-radius: var(--radius-sm);
background: var(--panel);
color: var(--ink);
box-shadow: var(--shadow-drop);
font-size: var(--fs-sm);
line-height: 1.45;
pointer-events: auto;
animation: toast-in 0.18s ease-out;
}
.toast.is-ok  { border-left-color: var(--ok);  background: var(--ok-bg);  color: var(--ok-edge); }
.toast.is-bad { border-left-color: var(--err); background: var(--err-bg); color: var(--err); }
.toast.is-leaving {
opacity: 0;
transform: translateY(6px);
transition: opacity 0.18s ease-in, transform 0.18s ease-in;
}
.toast-text { margin: 0; }
.el-toasts { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.toast-close {
flex-shrink: 0;
width: 22px;
height: 22px;
padding: 0;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: inherit;
font-size: 16px;
line-height: 1;
cursor: pointer;
opacity: 0.7;
}
.toast-close:hover,
.toast-close:focus-visible { opacity: 1; background: rgb(0 0 0 / 0.06); }
@keyframes toast-in {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.toast,
.toast.is-leaving { animation: none; transition: none; transform: none; }
}
@media (max-width: 767px) {
.toast-stack {
inset: auto 12px 12px 12px;
max-width: none;
align-items: stretch;
}
}
body:has(.view-body.is-fill) { height: 100%; }
body:has(.view-body.is-fill) .app,
body:has(.view-body.is-fill) .sheet,
body:has(.view-body.is-fill) .view { min-height: 0; }
.view-body.is-fill {
min-height: 0;
display: flex;
flex-direction: column;
}
.linemap {
flex: 1;
min-width: 0;
min-height: 420px;
display: flex;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
overflow: hidden;
}
.linemap-side {
flex: 0 0 320px;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
border-right: 1px solid var(--line);
}
.linemap-side .notice {
flex-shrink: 0;
border-bottom: 1px solid var(--line);
}
.linemap-tools {
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
}
.linemap-tools label {
display: flex;
align-items: center;
gap: 7px;
font-size: var(--fs-sm);
color: var(--ink-2);
}
.linemap-meta {
flex-shrink: 0;
margin: 0;
padding: 8px 14px;
border-bottom: 1px solid var(--line-2);
font-size: var(--fs-xs);
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.linemap-list {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.linemap-line,
.builder-line {
width: 100%;
display: flex;
align-items: center;
gap: 9px;
padding: 8px 14px;
border: 0;
border-bottom: 1px solid var(--line-2);
border-radius: 0;
background: transparent;
color: var(--ink);
font-size: var(--fs-sm);
font-weight: 400;
text-align: left;
}
.linemap-line:hover,
.builder-line:hover { background: var(--row-alt); }
.linemap-line.is-active,
.builder-line.is-current {
background: var(--row-mark);
color: var(--brand-ink);
}
.linemap-line {
height: auto;
flex-direction: column;
align-items: stretch;
gap: 2px;
}
.linemap-line { box-shadow: inset 4px 0 0 var(--line-color); }
.linemap-row {
display: flex;
align-items: baseline;
gap: 8px;
}
.linemap-nr {
font-family: var(--mono);
font-size: var(--fs-sm);
font-weight: 600;
}
.linemap-carriers {
margin-left: auto;
display: flex;
gap: 4px;
}
.linemap-trips {
display: inline-flex;
align-items: center;
height: var(--tag-height);
padding: 0 6px;
border-radius: var(--radius-round);
background: var(--head);
font-size: var(--fs-mark);
color: var(--ink-2);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.linemap-none {
font-size: var(--fs-mark);
color: var(--ink-dim);
}
.linemap-info {
min-width: 0;
overflow: hidden;
font-size: var(--fs-xs);
color: var(--ink-3);
text-overflow: ellipsis;
white-space: nowrap;
}
.linemap-more {
width: 100%;
height: var(--control-height);
padding: 0 14px;
border: 0;
border-radius: 0;
background: var(--row-alt);
color: var(--link);
font-size: var(--fs-xs);
font-weight: 400;
text-align: left;
}
.linemap-more:hover { text-decoration: underline; }
.linemap-canvas,
.trip-map,
.paths-map,
.traffic-map {
position: relative;
z-index: 0;
flex: 1;
background: var(--head);
}
.linemap-canvas { min-width: 0; }
.linemap-notice,
.trip-map-notice,
.paths-map-notice {
position: absolute;
z-index: 500;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
max-width: 80%;
border: 1px solid var(--warn);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-drop);
}
.leaflet-container {
font-family: var(--font);
font-size: var(--fs-sm);
}
.leaflet-container .leaflet-popup-content-wrapper,
.leaflet-container .leaflet-popup-tip,
.leaflet-container .leaflet-tooltip,
.leaflet-container .leaflet-bar a,
.leaflet-container .leaflet-control-layers {
border-color: var(--line);
background: var(--panel);
color: var(--ink);
}
.leaflet-container .leaflet-bar a:hover { background: var(--head); }
.leaflet-container .leaflet-control-attribution {
background: rgba(255, 255, 255, 0.8);
background: light-dark(rgba(255, 255, 255, 0.8), rgba(22, 30, 38, 0.8));
color: var(--ink-3);
}
.leaflet-container .leaflet-tooltip-top::before    { border-top-color: var(--panel); }
.leaflet-container .leaflet-tooltip-bottom::before { border-bottom-color: var(--panel); }
.leaflet-container .leaflet-tooltip-left::before   { border-left-color: var(--panel); }
.leaflet-container .leaflet-tooltip-right::before  { border-right-color: var(--panel); }
.leaflet-container .rjp-tiles-muted { filter: grayscale(1) contrast(0.7) brightness(1.12); }
.leaflet-container .linemap-legend {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px 10px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--panel);
font-size: var(--fs-xs);
color: var(--ink-2);
}
.linemap-legend span {
display: flex;
align-items: center;
gap: 7px;
}
.leaflet-container .linemap-card {
display: flex;
flex-direction: column;
box-sizing: border-box;
width: 280px;
padding: 11px 13px 12px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--panel);
box-shadow: 0 2px 10px color-mix(in srgb, var(--band) 14%, transparent);
font-size: var(--fs-sm);
color: var(--ink);
}
.linemap-card > * { flex-shrink: 0; }
.linemap-card-head {
display: flex;
align-items: baseline;
gap: 8px;
}
.linemap-card-nr {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: var(--fs-lg);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.linemap-card-nr::before {
content: "";
width: 18px;
height: 5px;
border-radius: 3px;
background: var(--line-color);
}
.linemap-card-count { color: var(--ink-3); font-size: var(--fs-xs); }
.linemap-card-close {
margin-left: auto;
align-self: center;
width: 26px;
height: 26px;
padding: 0;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--ink-3);
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.linemap-card-close:hover { background: var(--head); color: var(--ink); }
.linemap-card-relation { margin: 2px 0 0; }
.linemap-card-carriers {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 8px 0 0;
}
.linemap-card-label {
margin: 10px 0 3px;
font-size: var(--fs-xs);
color: var(--ink-3);
}
.linemap-card-tables {
margin: 0;
padding: 0;
list-style: none;
max-height: 120px;
overflow-y: auto;
}
.linemap-card-tables li + li { margin-top: 2px; }
.linemap-card-route {
flex: 0 1 auto;
min-height: 60px;
margin: 0;
padding: 0;
list-style: none;
overflow-y: auto;
border-top: 1px solid var(--line-2);
border-bottom: 1px solid var(--line-2);
}
.linemap-card-route button {
width: 100%;
height: auto;
display: flex;
align-items: baseline;
gap: 10px;
padding: 3px 4px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--ink);
font-size: var(--fs-sm);
text-align: left;
cursor: pointer;
}
.linemap-card-route button:hover { background: var(--row-mark); }
.linemap-card-km {
flex: 0 0 52px;
font-family: var(--mono);
font-size: var(--fs-xs);
color: var(--ink-3);
text-align: right;
font-variant-numeric: tabular-nums;
}
.linemap-card-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 11px;
}
.linemap-card-actions > * { flex: 1 1 auto; justify-content: center; text-align: center; }
.leaflet-container .linemap-card a.button-save,
.leaflet-container .linemap-card a.button-save:hover { color: var(--on-band); }
.leaflet-container .linemap-card-tables a { color: var(--link); }
.linemap-legend i {
flex: 0 0 24px;
display: flex;
align-items: center;
justify-content: center;
height: 14px;
border-radius: 3px;
}
:root[data-theme="dark"] .linemap-legend i { background: #C9CFD5; }
.linemap-legend i::before {
content: "";
box-sizing: border-box;
}
.linemap-legend .is-station::before {
width: 9px;
height: 9px;
border: 1px solid #17202A;
border-radius: 50%;
background: #FFFFFF;
}
.linemap-legend .is-junction::before {
width: 7px;
height: 7px;
border: 1px solid #55616E;
border-radius: 50%;
background: #8593A0;
}
.linemap-legend .is-line::before {
width: 18px;
height: 4px;
border-radius: 2px;
background: linear-gradient(to right, #0A75BD 33%, #9B9B08 33% 66%, #F31B1B 66%);
}
.linemap-legend .is-line.is-on::before {
height: 7px;
border-radius: 3px;
background: #0A75BD;
}
:root[data-theme="dark"] .leaflet-tile-pane { filter: brightness(0.78) contrast(1.05); }
.leaflet-tooltip.linemap-tip,
.leaflet-tooltip.trip-map-tip {
padding: 1px 6px;
font-size: var(--fs-xs);
}
.linemap-popup b { font-size: var(--fs-md); }
.linemap-popup table {
margin-top: 5px;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
.linemap-popup td { padding: 1px 10px 1px 0; font-size: var(--fs-sm); }
.linemap-id { color: var(--ink-3); }
.field {
display: flex;
flex-direction: column;
gap: 5px;
}
.field-hint {
font-size: var(--fs-xs);
line-height: 1.45;
color: var(--ink-3);
}
.field label,
.field-label {
font-size: var(--fs-sm);
font-weight: 500;
color: var(--ink-2);
}
.filters {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px;
margin-bottom: 16px;
padding: 13px 16px;
}
.filters input,
.filters select { width: 170px; }
.filters .field-wide select { width: 340px; }
.pills {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-height: var(--control-height);
}
.filters .field-date input { width: 148px; }
.filters-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 10px;
}
.combo { position: relative; }
.combo input {
padding-right: 30px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B7784' stroke-width='1.5' stroke-linecap='round'><circle cx='6.8' cy='6.8' r='4.6'/><path d='M10.2 10.2L14 14'/></svg>");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 13px 13px;
}
.combo-list {
position: absolute;
top: calc(100% + 2px);
left: 0;
z-index: 10;
min-width: 100%;
max-height: 264px;
margin: 0;
padding: 4px;
overflow-y: auto;
list-style: none;
border: 1px solid var(--field);
border-radius: var(--radius-sm);
background: var(--panel);
box-shadow: var(--shadow-drop);
}
.combo-list li {
padding: 6px 9px;
border-radius: 4px;
font-size: var(--fs-sm);
line-height: 17px;
white-space: nowrap;
cursor: pointer;
}
.combo-list li:hover,
.combo-list li.is-marked {
background: var(--row-mark);
color: var(--brand-ink);
}
.daterange { display: contents; }
.calendar-open {
height: var(--control-height);
min-width: 232px;
max-width: 320px;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 34px 0 12px;
border: 1px solid var(--field);
border-radius: var(--radius-sm);
background: var(--panel) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B7784' stroke-width='1.4' stroke-linecap='round'><rect x='2.2' y='3.4' width='11.6' height='10.4' rx='1.6'/><path d='M2.2 6.6h11.6M5.6 2.2v2.4M10.4 2.2v2.4'/></svg>") no-repeat right 11px center;
background-size: 15px 15px;
font-size: var(--fs-md);
font-weight: 400;
text-align: left;
white-space: nowrap;
color: var(--ink);
}
.calendar-open:hover { border-color: var(--accent); }
.modal {
width: min(1224px, calc(100vw - 24px));
max-height: calc(100vh - 48px);
margin: auto;
padding: 0;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
color: var(--ink);
box-shadow: 0 24px 60px rgba(12, 58, 87, 0.28);
box-shadow: 0 24px 60px light-dark(rgba(12, 58, 87, 0.28), rgba(0, 0, 0, 0.6));
overflow: hidden;
}
.modal::backdrop { background: rgba(12, 58, 87, 0.45); background: light-dark(rgba(12, 58, 87, 0.45), rgba(0, 0, 0, 0.6)); }
.modal-box {
display: flex;
flex-direction: column;
max-height: calc(100vh - 50px);
}
.modal-close {
margin-left: auto;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: none;
color: var(--ink-2);
cursor: pointer;
}
.calendar-months {
flex: 1;
min-height: 0;
overflow-y: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
align-items: start;
row-gap: 14px;
column-gap: 26px;
padding: 14px 16px;
}
.daterange-foot,
.wizard-foot,
.modal-foot {
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
border-top: 1px solid var(--line);
background: var(--head);
}
.daterange-foot {
gap: 10px;
padding: 11px 16px;
}
.calendar-periods {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-right: auto;
}
.pill {
height: var(--pill-height);
padding: 0 12px;
border: 1px solid var(--field);
border-radius: var(--radius-round);
background: var(--head);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--ink);
}
.pill:hover {
border-color: var(--ink-3);
background: var(--panel);
}
a.pill {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.pill-group,
.seg {
display: inline-flex;
align-items: stretch;
height: var(--pill-height);
border: 1px solid var(--field);
border-radius: var(--radius-round);
background: var(--head);
overflow: hidden;
}
.pill-part,
.seg-part {
height: 100%;
padding: 0 11px;
border: 0;
border-left: 1px solid var(--field);
background: none;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--ink);
cursor: pointer;
}
.pill-part:first-child,
.seg-part:first-child { border-left: 0; }
.pill-part:disabled { color: var(--ink-dim); cursor: default; }
.pill-part:disabled:hover { background: none; }
.pill-part:hover,
.seg-part:hover { background: var(--panel); }
.pill-part[aria-pressed="true"] {
background: var(--pick);
color: var(--brand-ink);
}
.seg-part {
position: relative;
display: inline-flex;
align-items: center;
color: var(--ink-2);
}
.seg-part input {
position: absolute;
width: 0;
height: 0;
margin: 0;
opacity: 0;
pointer-events: none;
}
.seg-part:has(:checked) {
background: var(--panel);
color: var(--ink);
}
.seg-part.is-add:has(:checked)  { background: var(--ok-bg);  color: var(--ok-edge); }
.seg-part.is-take:has(:checked) { background: var(--err-bg); color: var(--err); }
.seg-part:has(:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent); }
.seg:has(:disabled) { opacity: 0.55; }
.seg-part:has(:disabled) { cursor: default; }
.pill[aria-pressed="true"] {
border-color: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent);
background: var(--pick);
}
.source-tag {
display: inline-flex;
align-items: center;
height: var(--tag-height);
padding: 0 6px;
border-radius: var(--radius-round);
background: var(--head);
color: var(--ink-2);
font-family: var(--mono);
font-size: var(--fs-mark);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.year-strip {
--bar-from: 0;
--bar-span: 0;
position: relative;
display: inline-flex;
gap: 1px;
padding-bottom: 5px;
vertical-align: middle;
}
.year-month {
width: 12px;
height: 14px;
border-radius: 2px;
background: var(--line-2);
}
.year-month.is-on { background: var(--accent); }
.year-strip.is-whole .year-month.is-on { background: var(--brand-mark); }
.year-month.is-out { background: var(--head); }
.year-month.is-on.is-out { background: var(--pick); }
.year-strip.has-bar::after {
content: '';
position: absolute;
bottom: 0;
left: calc(var(--bar-from) * 13px);
width: calc(var(--bar-span) * 13px - 1px);
height: 2px;
border-radius: 1px;
background: var(--accent);
}
.calendar-month {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
.calendar-month caption {
padding: 5px 6px;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
border-bottom: 2px solid var(--field);
background: var(--head);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--ink);
text-align: center;
}
.calendar-month th {
padding: 6px 4px 4px 0;
font-size: var(--fs-dense);
font-weight: 600;
letter-spacing: 0.04em;
text-align: right;
color: var(--ink-2);
}
.calendar-month th abbr { text-decoration: none; }
.calendar-month td { padding: 0; }
.calendar-day {
display: block;
width: 100%;
height: 24px;
padding: 0 4px 0 0;
border: 0;
background: none;
font: inherit;
font-size: var(--fs-sm);
line-height: 24px;
text-align: right;
color: var(--ink);
}
button.calendar-day { cursor: pointer; }
button.calendar-day:hover { box-shadow: inset 0 0 0 1px var(--accent); }
button.calendar-day.is-exception:hover {
box-shadow: inset 0 0 0 1px var(--accent), inset 0 -2px 0 var(--accent);
}
.calendar-day.is-free { color: var(--err); }
.calendar-day.is-off { color: var(--ink-dim); }
.calendar-day.is-outside,
button.calendar-day:disabled {
background: none;
color: var(--ink-dim);
cursor: default;
}
.calendar-day.is-picked {
background: var(--pick);
font-weight: 600;
}
.calendar-months.is-locked button.calendar-day { cursor: default; }
.calendar-months.is-locked button.calendar-day:hover { box-shadow: none; }
.calendar-months.is-waiting { opacity: 0.45; }
.calendar-months.is-result .calendar-day:not(.is-picked):not(.is-free):not(.is-off):not(.is-removed) {
color: var(--ink-3);
}
.wizard-bar {
flex-wrap: wrap;
}
.wizard-steps {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.wizard-step {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: var(--fs-sm);
color: var(--ink-3);
}
.wizard-step + .wizard-step::before {
content: '';
width: 18px;
height: 1px;
margin-right: 3px;
background: var(--field);
}
.wizard-step-n {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: 1px solid var(--field);
border-radius: var(--radius-round);
background: var(--panel);
font-size: var(--fs-mark);
font-weight: 600;
color: var(--ink-2);
}
.wizard-step.is-done { color: var(--ink); }
.wizard-step.is-done .wizard-step-n,
.register-step.is-done .wizard-step-n {
border-color: var(--accent);
background: var(--accent);
color: var(--on-band);
}
.wizard-step.is-now { color: var(--ink); font-weight: 600; }
.wizard-step.is-now .wizard-step-n,
.register-step.is-now .wizard-step-n {
border-color: var(--accent);
background: var(--pick);
color: var(--brand-ink);
}
.wizard-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.wizard-tools {
flex: 1;
min-width: 0;
}
.wizard-tool > :first-child { margin-top: 0; }
.wizard-tool > :last-child { margin-bottom: 0; }
.wizard-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px;
}
.wizard-row-tight { align-items: center; }
.wizard-row .field-wide { flex: 1 1 280px; }
.wizard-row input[type="text"] { width: 100%; }
.wizard-rules {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.calendar-day.is-exception { box-shadow: inset 0 -2px 0 var(--accent); }
.calendar-day.is-removed {
font-weight: 600;
text-decoration: line-through;
text-decoration-color: var(--accent);
text-decoration-thickness: 2px;
}
.wizard-foot,
.modal-foot {
gap: 12px;
padding: 12px 16px;
}
.modal-foot { justify-content: flex-end; }
.modal-note {
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
margin: 0;
padding: 11px 16px;
border-top: 1px solid var(--line);
font-size: var(--fs-md);
}
.modal-count {
margin-left: auto;
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 10px;
border: 1px solid var(--line);
border-radius: var(--radius-round);
background: var(--head);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--ink-2);
white-space: nowrap;
}
.calendar-result {
margin: 0 0 12px;
padding: 9px 12px;
border-radius: var(--radius-sm);
background: var(--row-alt);
font-size: var(--fs-sm);
}
.modal-note.is-bad,
.calendar-result.is-bad {
background: var(--err-bg);
color: var(--err);
}
.lt-panel { padding: 0; }
.lt-panel > h2:first-child { margin: 0; }
.lt-panel > .lt-note { margin: 0; padding: 14px 16px; }
.linetable-frame { position: relative; }
.linetable-frame::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 42px;
background: linear-gradient(to right, rgb(255 255 255 / 0), var(--panel));
pointer-events: none;
}
.linetable-frame.is-end::after { content: none; }
.linetable-scroll {
overflow-x: auto;
}
.linetable-scroll::-webkit-scrollbar { height: 10px; }
.linetable-scroll::-webkit-scrollbar-track {
border-radius: var(--radius-sm);
background: var(--line-3);
}
.linetable-scroll::-webkit-scrollbar-thumb {
border-radius: var(--radius-sm);
background: var(--field);
}
.linetable-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
.linetable {
--lt-station: 200px;
border-collapse: separate;
border-spacing: 0;
font-size: var(--fs-dense);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.linetable th,
.linetable td {
height: 24px;
padding: 0 6px;
border-right: 1px solid var(--line-3);
border-bottom: 1px solid var(--line-3);
text-align: center;
}
.linetable thead th {
background: var(--head);
border-right-color: var(--line-2);
}
.linetable thead tr:last-child th { border-bottom: 1px solid var(--line); }
.linetable tr.is-number th {
height: 26px;
vertical-align: middle;
font-size: var(--fs-dense);
font-weight: 600;
}
.linetable tr.is-number th:not(.col-station):not(.col-mark) {
min-width: 56px;
padding: 0;
}
.lt-num,
.lt-leg {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
padding: 0 6px;
border: 0;
border-radius: var(--radius-round);
line-height: 1;
cursor: pointer;
}
.lt-num {
height: 18px;
background: none;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
color: inherit;
}
.lt-num:hover,
.lt-leg:hover { background: var(--pick); }
.lt-num.is-lit,
.lt-leg.is-lit {
background: var(--bar);
color: var(--on-band);
}
.linetable tr.is-legend th {
height: 22px;
font-weight: 400;
color: var(--ink-3);
}
.linetable thead th.col-station,
.linetable thead th.col-mark {
vertical-align: bottom;
padding-bottom: 5px;
font-size: var(--fs-dense);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-2);
}
.is-src-0 { --src: var(--brand-mark); }
.is-src-1 { --src: var(--source-alt); }
.is-src-2 { --src: var(--ok); }
.is-src-3 { --src: var(--warn); }
.linetable tr.is-number th[class*="is-src-"] { border-top: 4px solid var(--src, var(--line)); }
.lt-src-swatch {
display: inline-block;
width: 18px;
height: 4px;
border-radius: 2px;
vertical-align: middle;
background: var(--src, var(--line));
}
.lt-leg {
height: 16px;
background: var(--row-mark);
color: var(--brand-mark);
font-size: var(--fs-mark);
font-weight: 600;
}
.linetable tr.is-number th.is-lit {
background: var(--row-mark);
color: var(--ink);
}
.lt-leg.is-rule {
background: none;
color: var(--ink);
cursor: help;
}
.linetable .col-station,
.linetable .col-mark {
position: sticky;
z-index: 1;
background: var(--panel);
}
.linetable .col-station {
left: 0;
width: var(--lt-station);
min-width: var(--lt-station);
max-width: var(--lt-station);
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
font-size: var(--fs-xs);
}
.linetable .col-mark {
left: var(--lt-station);
min-width: 22px;
padding: 0;
border-right: 1px solid var(--line);
text-align: center;
font-size: var(--fs-mark);
color: var(--ink-3);
}
.linetable thead .col-station,
.linetable thead .col-mark { z-index: 3; background: var(--head); }
.linetable tbody tr.is-next > td { border-top: 0; }
.linetable tbody tr.is-alt > td { background: var(--row-alt); }
.linetable tbody tr.is-edge > td {
background: var(--row-alt);
color: var(--ink-2);
font-style: italic;
}
.linetable tbody tr:has(+ tr.is-edge-more) > td,
.linetable tbody tr.is-edge:not([hidden]):has(+ tr:not(.is-edge)) > td { border-bottom-color: var(--line); }
.linetable tbody tr:hover > td,
.linetable tbody tr:hover + tr.is-next > td,
.linetable tbody tr:has(+ tr.is-next:hover) > td { background: var(--row-mark); }
.linetable tbody tr.is-edge-more > td {
background: var(--head);
border-bottom-color: var(--line);
}
.linetable tbody tr.is-edge-more > td.lt-end {
max-width: 0;
overflow: hidden;
padding: 0 4px;
color: var(--ink-3);
font-size: var(--fs-mark);
font-style: italic;
text-align: left;
text-overflow: ellipsis;
}
.linetable-more {
height: 20px;
font-size: var(--fs-dense);
color: var(--link);
text-align: left;
}
.linetable-more-sign {
display: inline-block;
width: 13px;
font-family: var(--mono);
font-weight: 600;
}
.lt-chip {
display: inline-flex;
align-items: center;
height: 26px;
padding: 0 10px;
border-radius: var(--radius-round);
background: var(--head);
color: var(--ink-2);
font-size: var(--fs-xs);
}
.lt-chip.is-lead {
background: var(--row-mark);
color: var(--brand-mark);
font-weight: 500;
}
.lt-day {
padding: 9px 16px 7px;
border-bottom: 1px solid var(--line);
}
.lt-day-bars {
position: relative;
display: flex;
align-items: flex-end;
gap: 1px;
height: 30px;
cursor: pointer;
touch-action: none;
user-select: none;
}
.lt-day-bars.is-dragging { cursor: grabbing; }
.lt-day-bar {
flex-grow: 1;
min-height: 2px;
height: calc(var(--lt-load) / var(--lt-top) * 30px);
border-radius: 1px;
background: var(--graph);
}
.lt-day-bar.is-empty { background: var(--line-2); }
.lt-day-window {
position: absolute;
top: -3px;
bottom: -3px;
border: 1px solid var(--accent);
border-radius: 3px;
background: rgba(27, 122, 181, 0.12);
cursor: grab;
}
.lt-day-bars.is-dragging .lt-day-window { cursor: grabbing; }
.lt-day-scale {
display: flex;
justify-content: space-between;
margin-top: 3px;
font-size: var(--fs-mark);
font-variant-numeric: tabular-nums;
color: var(--ink-dim);
}
@media (max-width: 1023px) {
.lt-day-scale span:not(:nth-child(2n + 1)) { display: none; }
}
@media (max-width: 767px) {
.lt-day-scale span { display: none; }
.lt-day-scale span:nth-child(3n + 1) { display: block; }
}
.linetable-hint {
display: grid;
align-items: center;
margin: 0;
min-height: 39px;
padding: 9px 16px;
border-bottom: 1px solid var(--line);
background: var(--panel);
font-size: var(--fs-sm);
line-height: 18px;
color: var(--ink-3);
}
.lt-hint-say {
display: flex;
align-items: center;
gap: 8px;
}
.linetable-hint > * { grid-area: 1 / 1; }
.linetable-hint.is-on > .linetable-key,
.linetable-hint:not(.is-on) > .lt-hint-say { visibility: hidden; }
.linetable-hint.is-on {
background: var(--row-mark);
color: var(--brand-ink);
}
.lt-hint-leg {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 18px;
padding: 0 7px;
border-radius: var(--radius-round);
background: var(--bar);
color: var(--on-band);
font-size: var(--fs-mark);
font-weight: 600;
}
.lt-hint-go {
flex-shrink: 0;
margin-left: auto;
font-size: var(--fs-sm);
color: var(--link);
white-space: nowrap;
}
a.lt-hint-go::after {
content: ' ↗';
color: var(--ink-3);
}
.lt-setup {
display: grid;
grid-template-columns: minmax(300px, 360px) minmax(0, 640px);
gap: 16px;
align-items: start;
}
.lt-setup.is-alone { grid-template-columns: minmax(300px, 360px); }
.filters.is-side {
flex-direction: column;
align-items: stretch;
margin-bottom: 0;
padding: 16px;
}
.filters.is-side > h2:first-child { margin: -16px -16px 14px; }
.filters.is-side input,
.filters.is-side select,
.filters.is-side .field-wide select,
.filters.is-side .field-date input {
width: 100%;
max-width: 360px;
}
.filters.is-side .filters-actions { margin-left: 0; }
.lt-ready {
display: flex;
align-items: baseline;
gap: 7px;
margin: 2px 0 0;
font-size: var(--fs-xs);
color: var(--ink-3);
}
.lt-ready::before {
content: '';
flex: 0 0 auto;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ink-dim);
}
.lt-ready.is-ready { color: var(--ok); }
.lt-ready.is-ready::before { background: var(--ok); }
.view-body > .lt-actions { margin-bottom: 16px; }
.lt-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.linetable-plan {
margin: 0;
padding: 0;
list-style: none;
}
.linetable-plan-head {
display: flex;
align-items: center;
gap: 10px;
margin: 12px -16px 6px;
padding: 8px 22px 8px 16px;
border-bottom: 1px solid var(--line);
background-color: var(--panel);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-2);
white-space: nowrap;
}
.linetable-plan-head .linetable-plan-name,
.linetable-plan-head .linetable-plan-time {
font-size: inherit;
color: inherit;
}
.linetable-plan-axis.is-blank::before,
.linetable-plan-axis.is-blank::after { content: none; }
.linetable-plan-pick {
flex: 0 0 auto;
width: 148px;
text-align: center;
}
.linetable-plan-need {
flex: 0 0 auto;
width: 62px;
text-align: center;
}
.linetable-plan-stop {
display: flex;
align-items: center;
gap: 10px;
break-inside: avoid;
padding: 2px 6px 2px 0;
border-radius: var(--radius-sm);
}
.linetable-plan-stop:hover { background: var(--row-alt); }
.linetable-plan-axis {
position: relative;
flex: 0 0 auto;
align-self: stretch;
margin: -2px 0;
width: 14px;
min-height: 28px;
}
.linetable-plan-axis::before,
.linetable-plan-axis::after {
content: '';
position: absolute;
left: 7px;
}
.linetable-plan-axis::before {
top: 0;
bottom: 0;
width: 2px;
margin-left: -1px;
background: var(--field);
}
.linetable-plan-axis::after {
top: 50%;
width: 7px;
height: 7px;
transform: translate(-50%, -50%);
box-sizing: border-box;
border-radius: 50%;
background: var(--brand-mark);
}
.linetable-plan-stop:first-child .linetable-plan-axis::before { top: 50%; }
.linetable-plan-stop:last-child  .linetable-plan-axis::before { bottom: 50%; }
.linetable-plan-stop:has(.is-bold) .linetable-plan-axis::after {
width: 9px;
height: 9px;
background: var(--brand-ink);
}
.linetable-plan-stop.is-branch .linetable-plan-axis::after {
background: var(--panel);
border: 2px solid var(--field);
}
.linetable-plan-stop.is-rule { box-shadow: inset 0 -2px 0 var(--field); }
.linetable-plan-name {
flex: 1 1 auto;
font-size: var(--fs-sm);
color: var(--ink);
}
.linetable-plan-name.is-bold { font-weight: 600; }
.linetable-plan-stop.is-branch .linetable-plan-name {
padding-left: 16px;
color: var(--ink-2);
}
.linetable-plan-time {
flex: 0 0 auto;
width: 30px;
text-align: right;
font-size: var(--fs-dense);
font-variant-numeric: tabular-nums;
color: var(--ink-dim);
}
.linetable-pick {
flex: 0 0 auto;
width: 148px;
height: 24px;
}
.linetable-pick .pill-part {
flex: 1;
padding: 0;
font-size: var(--fs-dense);
color: var(--ink-3);
}
.linetable-pick .pill-part[aria-pressed="true"] { color: var(--brand-ink); }
.linetable-plan-stop.is-off .linetable-plan-name,
.linetable-plan-stop.is-off .linetable-plan-time { color: var(--ink-dim); }
.linetable-need {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 62px;
height: 22px;
border-radius: 11px;
cursor: pointer;
user-select: none;
}
.linetable-need span { display: none; }
.linetable-need:hover { background: var(--head); }
.linetable-need:has(input:checked) { background: var(--pick); }
.linetable-need input {
width: 12px;
height: 12px;
margin: 0;
accent-color: var(--brand-mark);
}
@media (max-width: 1099px) {
.lt-setup { grid-template-columns: minmax(0, 640px); }
}
@media (max-width: 620px) {
.linetable-plan-time,
.linetable-plan-head { display: none; }
.linetable-plan-stop {
position: relative;
flex-wrap: wrap;
row-gap: 3px;
padding: 4px 6px 4px 24px;
}
.linetable-plan-axis {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: 0;
}
.linetable-plan-axis::after { top: 12px; }
.linetable-plan-stop:first-child .linetable-plan-axis::before { top: 12px; }
.linetable-plan-stop:last-child  .linetable-plan-axis::before { bottom: calc(100% - 12px); }
.linetable-plan-name { flex: 1 1 100%; }
.linetable-need {
gap: 5px;
width: auto;
padding: 0 8px 0 6px;
font-size: var(--fs-dense);
color: var(--ink-3);
}
.linetable-need span { display: inline; }
}
.lt-picks {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 10px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.lt-pick {
display: flex;
flex-direction: column;
gap: 3px;
width: 100%;
height: 100%;
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--panel);
text-align: left;
cursor: pointer;
}
.lt-pick-name {
font-size: var(--fs-md);
font-weight: 600;
color: var(--brand-ink);
}
.lt-pick-note {
font-size: var(--fs-sm);
color: var(--ink-2);
}
.lt-pick-meta {
font-size: var(--fs-xs);
color: var(--ink-3);
}
.linetable tr.is-boundary .col-station { font-style: italic; }
.linetable tbody tr.is-bold > td { font-weight: 600; }
.linetable tbody tr.is-rule > td { border-bottom: 2px solid var(--line); }
.linetable tbody tr > td.is-bus,
.linetable tbody tr:hover + tr.is-next > td.is-bus,
.linetable tbody tr:has(+ tr.is-next:hover) > td.is-bus { background: var(--bus); }
.linetable tbody tr > td.lt-gap {
color: var(--ink-dim);
font-weight: 400;
}
.lt-gap-key {
display: inline-block;
width: 14px;
color: var(--ink-3);
font-weight: 600;
text-align: center;
}
.linetable-key {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 18px;
margin: 0;
font-size: var(--fs-xs);
color: var(--ink-3);
}
.linetable-key > span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.linetable-key .lt-leg { pointer-events: none; }
.linetable-key .linetable-more { margin-left: auto; }
.swatch {
display: inline-block;
width: 16px;
height: 11px;
border: 1px solid var(--line);
}
.swatch.is-bus { background: var(--bus); }
.linetable-legends {
margin: 0;
padding: 10px 16px 12px;
border-top: 1px solid var(--line-2);
columns: 23em;
column-gap: 28px;
font-size: var(--fs-sm);
color: var(--ink-2);
list-style-position: inside;
}
.linetable-legends li {
padding: 1px 0 1px 26px;
text-indent: -26px;
break-inside: avoid;
}
.builder {
flex: 1;
min-width: 0;
min-height: 420px;
display: flex;
gap: 16px;
}
.panel-plain {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
overflow: hidden;
}
.panel-plain > h2 { flex-shrink: 0; }
.builder-side { flex: 0 0 404px; }
.builder-main { flex: 1; }
.builder .field { min-width: 0; }
.builder .field-wide { flex: 1; }
.builder input[type="text"],
.builder select { width: 100%; }
.builder-search {
flex-shrink: 0;
padding: 13px 16px;
}
.filters-row {
display: flex;
gap: 12px;
}
.filters-row .field { flex: 1; }
.builder-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 12px;
}
.builder-bar {
flex-shrink: 0;
margin: 0;
padding: 9px 16px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--head);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-2);
}
.builder-list {
flex-shrink: 0;
max-height: 168px;
overflow-y: auto;
}
.builder-list-grow {
flex: 1;
min-height: 0;
max-height: none;
}
.builder-line {
gap: 10px;
padding: 8px 16px;
}
.builder-line-nr {
flex: 0 0 44px;
font-family: var(--mono);
font-weight: 600;
}
.builder-line-name { flex: 1; min-width: 0; }
.builder-line-count { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }
.builder-stop {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 16px;
border-bottom: 1px solid var(--line-2);
font-size: var(--fs-sm);
}
.builder-stop-mark {
margin-left: auto;
font-size: var(--fs-dense);
color: var(--ink-dim);
}
.builder-stops-hint { margin: 0; padding: 8px 16px; }
.rb-stop-repeat {
margin-left: 8px;
font-size: var(--fs-dense);
color: var(--warn);
white-space: nowrap;
}
.rb-stop-loop {
margin-left: 8px;
font-size: var(--fs-dense);
color: var(--ink-3);
white-space: nowrap;
}
.builder-foot {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
border-top: 1px solid var(--line);
background: var(--row-alt);
}
.builder-foot > .muted:first-child { margin-right: auto; }
.builder-head {
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px 16px;
padding: 13px 16px;
border-bottom: 1px solid var(--line);
}
.builder-head .field { flex: 0 0 220px; }
.builder-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
min-height: 30px;
}
.builder-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: var(--pill-height);
padding: 0 6px 0 10px;
border: 1px solid var(--field);
border-radius: var(--radius-round);
background: var(--head);
font-size: var(--fs-sm);
}
.builder-chip-drop {
width: 18px;
height: 18px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--ink-3);
font-size: var(--fs-md);
line-height: 1;
}
.builder-chip-drop:hover:not(:disabled) { background: var(--field); color: var(--ink); }
.builder-chip-drop:disabled { opacity: 0.3; cursor: default; }
.builder-table {
flex: 1;
min-height: 0;
overflow: auto;
}
.builder-grid { width: 100%; }
.builder-grid th { text-align: center; }
.builder-grid .rb-nr { width: 46px; color: var(--ink-3); font-size: var(--fs-dense); }
.builder-grid .rb-stop { text-align: left; white-space: nowrap; }
.builder-grid .rb-show { width: 150px; }
.builder-grid .rb-time { width: 86px; }
.builder-grid .rb-tools { width: 92px; }
.builder-grid td { padding: 4px 6px; }
.builder-grid select,
.builder-grid input[type="text"] {
width: 100%;
height: 28px;
padding: 0 6px;
font-size: var(--fs-sm);
}
.builder-grid select {
padding-right: 20px;
background-position: right 6px center;
}
.builder-grid .rb-time input { text-align: right; font-family: var(--mono); }
.builder-grid .rb-flag { text-align: center; }
.builder-grid tr.is-branch { background: var(--row-alt); }
.builder-grid tr.is-branch .rb-stop {
padding-left: 24px;
font-style: italic;
color: var(--ink-2);
}
.builder-tool {
width: 24px;
height: 24px;
padding: 0;
border: 0;
border-radius: 4px;
background: transparent;
color: var(--ink-dim);
font-size: var(--fs-sm);
line-height: 1;
}
.builder-tool:hover:not(:disabled) { background: var(--head); color: var(--ink); }
.builder-tool:disabled { opacity: 0.3; }
.builder-grid[aria-busy="true"] { opacity: 0.55; }
.builder-empty { padding: 16px; }
.builder-notice {
flex-shrink: 0;
margin-top: 12px;
}
.search-hints {
margin: 0;
padding-left: 18px;
line-height: 1.7;
}
.search-list tbody tr { cursor: pointer; }
.search-list tbody tr:has(.search-pick:focus-visible) {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.search-list .col-train { width: 156px; }
.search-list .col-end { width: 142px; }
.search-list .col-run {
width: 72px;
white-space: nowrap;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.search-line {
display: flex;
align-items: center;
gap: 6px;
}
.search-number {
display: inline-block;
font-weight: 600;
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.search-mark {
display: inline-block;
max-width: 100%;
height: var(--tag-height);
margin-top: 3px;
padding: 0 6px;
box-sizing: border-box;
border-radius: var(--radius-round);
background: var(--head);
color: var(--ink-2);
font-size: var(--fs-mark);
font-weight: 600;
line-height: var(--tag-height);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
.search-time {
display: block;
font-size: var(--fs-md);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.search-station {
display: block;
margin-top: 1px;
font-size: var(--fs-xs);
color: var(--ink-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-terms {
margin-top: 3px;
font-size: var(--fs-xs);
line-height: 1.5;
}
.search-terms.is-none { color: var(--ink-3); }
.search-terms.is-broken { color: var(--warn); }
table.grid.search-list tbody tr.is-picked td { background-color: var(--row-mark); }
table.grid.search-list tbody tr.is-picked td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.search-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 -16px -16px;
padding: 10px 16px;
border-top: 1px solid var(--line);
background: var(--row-alt);
border-radius: 0 0 var(--radius) var(--radius);
}
.search-dots {
display: flex;
gap: 8px;
}
.search-chosen { margin: 0; }
.search-range {
display: flex;
align-items: center;
gap: 10px;
margin-top: 12px;
}
.panel > .search-head:first-child {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: -16px -16px 0;
padding: 9px 16px;
}
.search-train {
font-size: var(--fs-lg);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.search-cover {
margin-left: auto;
display: flex;
align-items: center;
gap: 10px;
font-size: var(--fs-dense);
}
.search-cover .calendar-open,
.search-range .calendar-open {
height: 30px;
min-width: 0;
font-size: var(--fs-xs);
}
.search-box > .table-scroll { margin: 0 -16px; }
.search-more td {
background-color: var(--row-alt);
font-size: var(--fs-xs);
}
.search-preview { display: none; }
@media (min-width: 1200px) {
.search-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(360px, 26vw, 500px);
gap: 16px;
align-items: start;
}
.search-preview {
display: block;
position: sticky;
top: 16px;
margin-bottom: 0;
}
.search-box .search-actions { display: none; }
}
@media (min-width: 1680px) {
.search-list .col-end { width: 250px; white-space: nowrap; }
.search-list .search-time { display: inline; }
.search-list .search-station {
display: inline-block;
max-width: 170px;
margin: 0 0 0 8px;
vertical-align: bottom;
}
.search-list .search-terms {
display: inline-block;
max-width: calc(100% - 184px);
margin: 0 0 0 12px;
vertical-align: middle;
}
}
.search-preview.is-waiting [data-preview-body] { opacity: 0.55; }
.search-preview-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
}
.search-preview-title {
font-size: var(--fs-md);
font-weight: 600;
}
.search-preview-head .search-mark { margin-top: 0; }
.search-preview-sum { margin: 4px 0 14px; font-variant-numeric: tabular-nums; }
.search-preview .search-actions {
margin: 0;
padding: 8px 10px;
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
}
table.grid.search-stops thead th,
table.grid.search-stops tbody td {
padding: 3px 10px;
}
table.grid.search-stops tbody td { font-size: var(--fs-xs); }
table.grid.search-stops .col-time {
width: 64px;
text-align: center;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
table.grid.search-stops thead th.col-time { font-weight: 600; }
table.grid.search-stops tbody td.is-bus { background-color: var(--bus); }
.search-preview-terms {
margin: -8px 0 14px;
font-size: var(--fs-sm);
}
.search-key {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 6px;
margin: 0;
font-size: var(--fs-xs);
}
.paths-filters input[type="search"] { width: 220px; }
.paths-count {
margin-left: 5px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.paths-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"tree"
"side"
"map";
gap: 16px;
align-items: start;
}
.paths-main    { grid-area: tree; min-width: 0; }
.paths-side    { grid-area: side; }
.paths-map-col { grid-area: map; }
.paths-map-panel {
display: flex;
flex-direction: column;
height: 420px;
margin-bottom: 0;
}
@media (min-width: 1200px) {
.paths-layout {
grid-template-columns: minmax(0, 1fr) clamp(380px, 32vw, 560px);
grid-template-rows: max-content 1fr;
grid-template-areas:
"tree side"
"tree map";
}
.paths-map-col { align-self: stretch; }
.paths-map-panel {
position: sticky;
top: 16px;
}
}
@media (min-width: 1680px) {
.paths-layout.has-map {
grid-template-columns: minmax(0, 1fr) clamp(380px, 24vw, 480px) minmax(380px, 0.8fr);
grid-template-rows: auto;
grid-template-areas: "tree side map";
}
.paths-layout.has-map .paths-side {
position: sticky;
top: 16px;
}
}
@media (min-width: 1200px) {
.paths-layout:not(.has-map) .paths-side {
position: sticky;
top: 16px;
}
}
.paths-filters { gap: 10px 12px; }
.paths-refusal { margin: 12px 16px; }
.paths-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 64px 64px 170px;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 4px 12px;
border-bottom: 1px solid var(--line-2);
color: var(--ink);
text-decoration: none;
}
a.paths-row:hover { background-color: var(--row-mark); }
.paths-row.is-head {
min-height: 32px;
background: var(--head);
border-bottom-color: var(--line);
color: var(--ink-2);
font-size: var(--fs-dense);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.paths-row.is-rel.is-pair-end { border-bottom-color: var(--line); }
.paths-row.is-rel.is-selected { background-color: var(--row-alt); }
.paths-row.is-path { min-height: 38px; }
.paths-row.is-picked { background-color: var(--row-mark); }
.paths-row.is-trip {
min-height: 32px;
background: var(--panel-alt);
font-size: var(--fs-sm);
}
.paths-map {
min-height: 0;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
overflow: hidden;
}
.paths-map-notice {
bottom: 14px;
max-width: 88%;
}
.paths-map .leaflet-control-attribution { font-size: var(--fs-mark); }
.paths-map-key {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 6px;
margin: 8px 0 0;
color: var(--ink-3);
font-size: var(--fs-xs);
}
.paths-map-swatch {
display: inline-block;
width: 18px;
height: 4px;
margin-left: 6px;
border-radius: 2px;
}
.paths-map-swatch:first-child { margin-left: 0; }
.paths-map-swatch.is-picked { background: var(--accent); }
.paths-map-swatch.is-main   { height: 3px; background: var(--bar); opacity: 0.85; }
.paths-map-swatch.is-other  { height: 2px; background: var(--ink-dim); opacity: 0.6; }
.paths-map-ring {
display: inline-block;
width: 10px;
height: 10px;
margin-left: 6px;
box-sizing: border-box;
border: 2px solid var(--warn);
border-radius: 50%;
background: var(--warn-bg);
}
.paths-row.is-path .paths-name { padding-left: 22px; }
.paths-name {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.paths-chevron {
flex-shrink: 0;
width: 12px;
color: var(--ink-2);
font-size: var(--fs-mark);
}
.paths-chevron::before { content: '▸'; }
[aria-expanded="true"] .paths-chevron::before { content: '▾'; }
.paths-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.paths-title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
font-size: var(--fs-sm);
}
.paths-sub {
color: var(--ink-3);
font-size: var(--fs-xs);
font-variant-numeric: tabular-nums;
}
.paths-num {
color: var(--ink-2);
font-size: var(--fs-sm);
font-variant-numeric: tabular-nums;
text-align: right;
}
.paths-num.is-strong {
color: var(--ink);
font-weight: 600;
}
.paths-year {
display: flex;
justify-content: flex-end;
}
.paths-letter {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 4px;
background: var(--head);
color: var(--ink);
font-size: var(--fs-dense);
font-weight: 600;
text-decoration: none;
}
.is-picked > .paths-name .paths-letter,
.paths-letter.is-picked,
.paths-matrix th.is-picked .paths-letter {
background: var(--accent);
color: var(--on-band);
}
.paths-label {
min-width: 0;
overflow: hidden;
font-size: var(--fs-sm);
text-overflow: ellipsis;
white-space: nowrap;
}
.paths-label.is-main { font-weight: 600; }
.paths-trip {
grid-column: 1 / span 3;
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
padding-left: 58px;
}
.paths-number {
font-family: var(--mono);
font-weight: 600;
}
.paths-times {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.paths-trip > .paths-sub { white-space: nowrap; }
.paths-trip .terms-open {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.paths-reverse {
margin-left: auto;
font-size: var(--fs-sm);
white-space: nowrap;
}
.paths-meta {
margin: 0 0 12px;
color: var(--ink-3);
font-size: var(--fs-xs);
}
table.grid.paths-matrix { width: auto; }
table.grid.paths-matrix thead th {
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
table.grid.paths-matrix thead th:first-child { text-align: left; }
.paths-matrix-trips {
display: block;
margin-top: 2px;
color: var(--ink-3);
font-size: var(--fs-mark);
font-weight: 400;
letter-spacing: 0;
}
table.grid.paths-matrix tbody th {
padding: 3px 12px 3px 8px;
font-size: var(--fs-dense);
font-weight: 400;
text-align: left;
white-space: nowrap;
}
table.grid.paths-matrix tbody td {
padding: 3px 5px;
text-align: center;
}
table.grid.paths-matrix thead th.is-picked,
table.grid.paths-matrix tbody td.is-picked { background-color: var(--row-mark); }
.paths-dot {
display: inline-block;
width: 8px;
height: 8px;
box-sizing: border-box;
border-radius: 50%;
background: var(--ink);
vertical-align: middle;
}
td.is-pass .paths-dot {
width: 4px;
height: 4px;
background: var(--field);
}
td.is-picked.is-stop .paths-dot { background: var(--brand-mark); }
table.grid.paths-matrix tbody tr.is-diff th {
color: var(--warn);
font-weight: 600;
}
table.grid.paths-matrix tbody tr.is-diff td.is-picked { background-color: var(--warn-bg); }
tr.is-diff td.is-picked .paths-dot {
width: 10px;
height: 10px;
border: 2px solid var(--warn);
background: var(--warn-bg);
}
.paths-foot {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--line-2);
}
.paths-picked {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0;
}
.paths-years {
display: grid;
grid-template-columns: max-content max-content;
gap: 4px 10px;
align-items: center;
}
.paths-years .year-month,
.paths-months > span { width: 22px; }
.paths-months {
display: inline-flex;
gap: 1px;
color: var(--ink-3);
font-size: var(--fs-mark);
text-align: center;
}
.paths-hint {
margin: 0;
font-size: var(--fs-sm);
}
@media (max-width: 767px) {
.paths-row { grid-template-columns: minmax(0, 1fr) 44px 44px; }
.paths-row > .paths-year { display: none; }
.paths-trip { grid-column: 1 / -1; flex-wrap: wrap; padding-left: 22px; }
}
.trip {
--trip-stick: 16px;
--trip-tall:  calc(100vh - 32px);
display: grid;
grid-template-columns: 340px minmax(0, 1fr);
grid-template-rows: max-content 1fr;
grid-template-areas:
"side route"
"map  route";
gap: 16px;
align-items: start;
}
.trip > .panel:first-child { grid-area: route; margin-bottom: 0; }
.trip-side    { grid-area: side; }
.trip-map-col { grid-area: map; }
.trip-map-col { align-self: stretch; }
.trip-side {
display: flex;
flex-direction: column;
gap: 16px;
}
.trip-side > .panel { margin-bottom: 0; }
.panel > .trip-head:first-child {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin: -16px -16px 14px;
}
.trip-route tfoot td {
padding: 6px 10px;
border-top: 1px solid var(--line);
background: var(--panel);
}
.trip-sum {
font-size: var(--fs-xs);
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.trip .table-scroll {
border: 1px solid var(--line);
border-radius: 4px;
}
.trip-route .col-no {
width: 34px;
text-align: right;
color: var(--ink-3);
}
.trip-route .col-km {
width: 58px;
text-align: right;
color: var(--ink-2);
}
.trip-route .col-time {
width: 96px;
font-size: var(--fs-sm);
font-weight: 600;
}
.trip-route .col-mark {
width: 52px;
color: var(--ink-2);
}
.trip-route .col-action { width: 32px; }
.trip-route th.col-time,
.trip-route th.col-mark,
.trip-route td.col-time,
.trip-route td.col-mark { text-align: center; }
table.grid.trip-route thead th.col-time.is-departure,
table.grid.trip-route tbody td[data-cell="departure"] { padding-right: 36px; }
.trip-route td[data-cell="departure"] { position: relative; }
.trip-route .trip-station { font-size: var(--fs-sm); }
.trip-route tr.is-edge .trip-station { font-weight: 600; }
.trip-route td.col-axis,
.trip-route th.col-axis {
width: 26px;
min-width: 26px;
padding: 0;
}
.trip-route td.col-axis { position: relative; }
.trip-route td.col-axis::before,
.trip-route td.col-axis::after {
content: '';
position: absolute;
left: 13px;
}
.trip-route td.col-axis::before {
top: 0;
bottom: 0;
width: 2px;
margin-left: -1px;
background: var(--line);
}
.trip-route td.col-axis::after {
top: 50%;
width: 9px;
height: 9px;
transform: translate(-50%, -50%);
box-sizing: border-box;
border-radius: 50%;
background: var(--brand-mark);
}
.trip-route tbody tr:first-child td.col-axis::before,
.trip-route tbody tr.is-start td.col-axis::before { top: 50%; }
.trip-route tbody tr:last-child td.col-axis::before,
.trip-route tbody tr.is-end td.col-axis::before { bottom: 50%; }
.trip-route tbody tr.is-beyond td.col-axis::before {
background: repeating-linear-gradient(to bottom, var(--field) 0 4px, transparent 4px 8px);
}
.trip-route tbody tr.is-beyond + tr.is-start td.col-axis::before {
top: 0;
background:
linear-gradient(to bottom, transparent 50%, var(--line) 50%),
repeating-linear-gradient(to bottom, var(--field) 0 4px, transparent 4px 8px);
}
.trip-route tbody tr.is-end:has(+ tr.is-beyond) td.col-axis::before {
bottom: 0;
background:
linear-gradient(to bottom, var(--line) 50%, transparent 50%),
repeating-linear-gradient(to bottom, var(--field) 0 4px, transparent 4px 8px);
}
.trip-route tr.is-edge td.col-axis::after {
width: 11px;
height: 11px;
background: var(--brand-ink);
}
.trip-route tr.is-dropped td.col-axis::after {
background: var(--panel);
border: 2px dashed var(--field);
}
.trip-route tr.is-pass td.col-axis::after {
background: var(--panel);
border: 2px solid var(--ink-dim);
}
.trip-route tr[data-trip-add]:not(.is-dropped) td.col-axis::after {
background: var(--accent);
border: 0;
}
.trip-ride {
position: absolute;
left: 13px;
width: 4px;
margin-left: -2px;
background: var(--bus-edge);
display: none;
}
.trip-route td.col-axis.is-bus-up .trip-ride {
display: block;
top: 0;
bottom: 50%;
}
.trip-route td.col-axis.is-bus-down .trip-ride {
display: block;
top: 50%;
bottom: 0;
}
.trip-route td.col-axis.is-bus-up.is-bus-down .trip-ride {
top: 0;
bottom: 0;
}
.trip-route { font-size: var(--fs-sm); }
table.grid.trip-route tbody td { padding: 3px 10px; }
table.grid.trip-route tbody td.col-axis { padding: 0; }
table.grid.trip-route thead th {
padding-right: 10px;
padding-left: 10px;
}
table.grid.trip-route thead th.col-axis { padding: 0; }
table.grid.trip-route tbody .col-no,
table.grid.trip-route tbody .col-km,
table.grid.trip-route tbody .col-mark { font-size: var(--fs-dense); }
.trip-clock {
display: inline-flex;
align-items: center;
gap: 3px;
vertical-align: middle;
}
.trip-route td.col-time { white-space: nowrap; }
table.grid.trip-route tbody tr {
--row-now:  var(--panel);
--cell-now: var(--cell);
}
table.grid.trip-route tbody tr:nth-child(even) {
--row-now:  var(--row-alt);
--cell-now: var(--cell-alt);
}
table.grid.trip-route tbody tr:hover,
table.grid.trip-route tbody tr:focus-within,
table.grid.trip-route tbody tr.is-picked,
table.grid.trip-route tbody tr.is-lit {
--row-now:  var(--row-mark);
--cell-now: var(--row-mark);
}
table.grid.trip-route.is-editable tbody td.col-time,
table.grid.trip-route.is-editable tbody td.col-mark { background-color: var(--cell-now); }
.trip-route input.trip-time,
.trip-route input.trip-cell {
height: 22px;
padding: 0 2px;
border: 0;
border-radius: 3px;
background: transparent;
font-size: var(--fs-xs);
font-variant-numeric: tabular-nums;
}
.trip-route input.trip-time {
font-size: var(--fs-sm);
font-weight: 600;
width: 46px;
text-align: center;
cursor: default;
}
.trip-route input.trip-cell {
width: 44px;
text-align: center;
background: var(--cell);
}
.trip-route tbody tr:hover .trip-clock,
.trip-route tbody tr:focus-within .trip-clock,
.trip-route tbody tr.is-picked .trip-clock { background: transparent; }
.trip-route tbody tr:hover input.trip-time,
.trip-route tbody tr:hover input.trip-cell,
.trip-route tbody tr:focus-within input.trip-time,
.trip-route tbody tr:focus-within input.trip-cell,
.trip-route tbody tr.is-picked input.trip-time,
.trip-route tbody tr.is-picked input.trip-cell {
background: var(--panel);
box-shadow: inset 0 0 0 1px var(--field);
}
.trip-route tbody tr:focus-within input.trip-time:focus,
.trip-route tbody tr:focus-within input.trip-cell:focus {
box-shadow: inset 0 0 0 1px var(--accent);
outline: none;
}
.trip-step {
visibility: hidden;
user-select: none;
flex-shrink: 0;
width: 18px;
height: 22px;
padding: 0;
border: 1px solid var(--field);
border-radius: 3px;
background: var(--panel);
color: var(--ink-2);
font-size: var(--fs-xs);
font-weight: 600;
line-height: 1;
}
.trip-route tbody tr:hover .trip-step,
.trip-route tbody tr:focus-within .trip-step,
.trip-route tbody tr.is-picked .trip-step { visibility: visible; }
table.grid.trip-route tbody td.col-time.is-bus { background-color: var(--bus); }
table.grid.trip-route tbody td.is-bus .trip-clock { background: transparent; }
.trip-route td.is-changed input.trip-time,
.trip-route td.is-changed input.trip-cell { color: var(--link); }
table.grid.trip-route tbody td.col-time.is-fast { color: var(--warn); }
.trip-route td.is-fast input.trip-time { color: var(--warn); }
.trip-fast {
color: var(--warn);
font-weight: 600;
cursor: help;
}
.trip-confirm-lead { margin: 0 0 8px; font-size: var(--fs-sm); }
.trip-confirm-list {
margin: 0 0 12px;
padding-left: 18px;
font-size: var(--fs-sm);
line-height: 1.5;
color: var(--warn);
font-variant-numeric: tabular-nums;
}
.trip-mark:focus-visible + .trip-kz,
.trip-mark:focus-visible + .trip-x,
.trip-mark:focus-visible ~ .trip-add {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.trip-kz,
.trip-x,
.trip-add,
.trip-extend {
visibility: hidden;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
box-sizing: border-box;
border: 1px dashed var(--field);
border-radius: 3px;
background: var(--panel);
cursor: pointer;
}
.trip-kz {
margin-left: 4px;
vertical-align: middle;
color: var(--ink-dim);
font-size: var(--fs-mark);
font-weight: 600;
}
.trip-route td .trip-kz {
position: absolute;
top: 50%;
right: 10px;
margin: 0;
transform: translateY(-50%);
}
.trip-route tbody tr:hover .trip-kz,
.trip-route tbody tr:focus-within .trip-kz,
.trip-route tbody tr.is-picked .trip-kz,
.trip-kz-mark:checked + .trip-kz,
.trip-kz.is-shown { visibility: visible; }
.trip-kz-mark:checked + .trip-kz,
.trip-kz.is-shown {
border-style: solid;
border-color: var(--bus-edge);
background: var(--bus);
color: var(--warn);
}
.trip-kz.is-shown { cursor: default; }
.trip-x,
.trip-add {
line-height: 1;
}
.trip-x {
color: var(--err);
font-size: 15px;
}
.trip-x::before { content: '\00D7'; }
.trip-route tr.is-dropped .trip-x {
color: var(--link);
font-size: var(--fs-sm);
}
.trip-route tr.is-dropped .trip-x::before { content: '\21BA'; }
.trip-route tbody tr:hover .trip-x,
.trip-route tbody tr:focus-within .trip-x,
.trip-route tbody tr.is-picked .trip-x,
.trip-route tbody tr.is-dropped .trip-x { visibility: visible; }
.trip-route tr.is-pass.is-dropped .trip-x { display: none; }
.trip-add {
display: none;
color: var(--link);
font-size: var(--fs-md);
}
.trip-add::before { content: '\002B'; }
.trip-route tr.is-pass.is-dropped .trip-add { display: inline-flex; }
.trip-route tbody tr:hover .trip-add,
.trip-route tbody tr:focus-within .trip-add,
.trip-route tbody tr.is-picked .trip-add { visibility: visible; }
.trip-extend {
height: 22px;
padding: 0;
color: var(--link);
font-size: var(--fs-md);
font-weight: 400;
line-height: 1;
}
.trip-extend::before { content: '\002B'; }
.trip-route thead tr:hover .trip-extend,
.trip-route tfoot tr:hover .trip-extend,
.trip-extend:focus-visible { visibility: visible; }
@media (hover: none) {
.trip-route .trip-extend { visibility: visible; }
}
@media (pointer: coarse) {
.trip-route .trip-step,
.trip-route .trip-kz,
.trip-route .trip-x,
.trip-route .trip-add,
.trip-route .trip-extend { touch-action: manipulation; }
.trip-route .trip-step { -webkit-touch-callout: none; }
.trip-route .trip-step {
width: 28px;
height: 32px;
}
.trip-route td .trip-kz,
.trip-route .trip-x,
.trip-route .trip-add,
.trip-route .trip-extend {
width: 32px;
height: 32px;
}
.trip-route input.trip-time,
.trip-route input.trip-cell { height: 32px; }
table.grid.trip-route thead th.col-time.is-departure,
table.grid.trip-route tbody td[data-cell="departure"] { padding-right: 46px; }
.trip-route .col-action { width: 52px; }
}
.trip-x:hover,
.trip-add:hover,
.trip-extend:hover {
border-color: var(--ink-3);
background: var(--head);
}
.trip-extend-body {
display: flex;
flex-direction: column;
gap: 10px;
}
.trip-extend-body .field-hint { margin: 0; }
.trip-extend-list {
height: min(420px, 55vh);
overflow-y: auto;
margin: 0 -16px -16px;
border-top: 1px solid var(--line);
}
.trip-extend-list .builder-line {
height: auto;
font-size: var(--fs-sm);
}
.trip-extend-empty {
margin: 0;
padding: 12px 16px;
}
.trip-route tr.is-dropped { color: var(--ink-3); }
.trip-route tr.is-dropped:not(.is-pass) .trip-station {
text-decoration: line-through;
text-decoration-color: var(--field);
}
.trip-route tbody td.is-gone .trip-clock,
.trip-route tbody td.is-gone .trip-cell,
.trip-route tbody td.is-gone .trip-kz { display: none; }
.trip-gone { display: none; }
.trip-route td.is-gone .trip-gone {
display: inline-block;
min-width: 46px;
text-align: center;
color: var(--ink-dim);
font-size: var(--fs-sm);
font-weight: 600;
}
table.grid.trip-route.is-editable tbody td.is-gone { background-color: var(--row-now); }
.view:fullscreen .trip {
--trip-stick: 0px;
--trip-tall:  calc(100vh - 116px);
}
.trip-map-panel {
position: sticky;
top: var(--trip-stick);
display: flex;
flex-direction: column;
height: 420px;
margin-bottom: 0;
}
.trip-map {
min-height: 0;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
overflow: hidden;
}
.trip-map-notice {
bottom: 14px;
max-width: 88%;
}
.leaflet-tooltip.trip-map-tip { font-weight: 600; }
.trip-map .leaflet-control-attribution { font-size: var(--fs-mark); }
.trip-map-popup { font-size: var(--fs-sm); }
.trip-map-popup b { font-size: var(--fs-md); }
table.grid.trip-route tbody tr.is-lit > td { background-color: var(--row-mark); }
.trip-facts {
display: grid;
grid-template-columns: minmax(104px, auto) minmax(0, 1fr);
gap: 7px 14px;
align-items: center;
margin: 0;
}
.trip-facts.is-plain {
align-items: baseline;
font-size: var(--fs-sm);
}
.trip-facts dt {
font-size: var(--fs-xs);
color: var(--ink-2);
}
.trip-facts dd {
margin: 0;
min-width: 0;
word-break: break-word;
}
.trip-facts .is-none { color: var(--ink-3); }
.trip-facts .is-mono {
font-size: var(--fs-xs);
color: var(--ink-2);
}
.trip-state { color: var(--warn); }
.trip-attr {
display: inline-flex;
align-items: center;
height: var(--tag-height);
margin: 0 4px 3px 0;
padding: 0 6px;
border-radius: 3px;
background: var(--head);
color: var(--ink-2);
font-family: var(--mono);
font-size: var(--fs-dense);
}
input.trip-field {
width: 100%;
height: 28px;
padding: 0 8px;
border: 0;
border-radius: 4px;
background: var(--cell);
font-size: var(--fs-sm);
}
input.trip-field:hover { background: var(--cell-alt); }
input.trip-field:focus {
background: var(--panel);
box-shadow: inset 0 0 0 1px var(--accent);
}
.trip-field::placeholder { color: var(--ink-dim); }
.trip-start { max-width: 640px; }
.trip-start > form {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px;
margin-bottom: 12px;
}
.trip-start > form > .field { flex: 1 1 280px; }
.trip-start > form > .field input { width: 100%; }
.trip-whole {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.trip-copy-lead {
margin: 0 0 12px;
font-weight: 600;
}
.trip-todo {
margin: 12px 0 0;
padding-top: 10px;
border-top: 1px solid var(--line-2);
font-size: var(--fs-xs);
line-height: 1.5;
color: var(--ink-3);
}
.trip-dock {
position: sticky;
bottom: 12px;
z-index: 5;
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
}
.trip-dock:not(:has(> :not([hidden]))) { display: none; }
.trip-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 52px;
padding: 8px 14px;
box-sizing: border-box;
border: 1px solid var(--pick);
border-radius: 5px;
background: var(--row-mark);
box-shadow: 0 4px 14px rgb(12 58 87 / 0.14);
}
.trip-note { margin: 0; box-shadow: 0 4px 14px rgb(12 58 87 / 0.10); }
.trip-note .trip-reload { margin-left: 10px; vertical-align: baseline; }
.trip-terms { margin: 0 0 12px; }
.trip-terms.is-none { color: var(--ink-3); }
@media (min-width: 1500px) {
.trip {
grid-template-columns: 340px minmax(0, 800px) minmax(0, 1fr);
grid-template-rows: auto;
grid-template-areas: "side route map";
}
.trip-side {
position: sticky;
top: var(--trip-stick);
}
}
@media (max-width: 1099px) {
.trip {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
grid-template-areas:
"route"
"side"
"map";
}
.trip-map-panel {
position: static;
height: var(--trip-tall);
}
}
@media (max-width: 1023px) {
.menubar {
height: auto;
flex-wrap: wrap;
align-items: center;
padding: 0;
}
.menu-toggle {
order: 1;
display: flex;
align-items: center;
gap: 10px;
height: 44px;
padding: 0 var(--edge);
border: 0;
background: transparent;
color: var(--on-band);
font-size: var(--fs-md);
font-weight: 600;
}
.menu-toggle svg { fill: var(--on-band); }
.menu-search {
order: 2;
margin: 0 var(--edge) 0 auto;
}
.view-body.is-fill { overflow-y: auto; }
.builder {
flex-direction: column;
min-height: 0;
}
.builder-side { flex: 0 0 auto; }
.builder-list-grow {
flex: 0 0 auto;
max-height: 220px;
}
.builder-table { overflow-x: auto; }
.menu-panel { order: 3; flex: 0 0 100%; display: none; }
.menubar.is-expanded .menu-panel { display: block; }
.menu-groups { display: block; }
.menu-group  { position: static; }
.menu-option {
width: 100%;
height: 44px;
padding: 0 var(--edge);
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.menu-caret { margin-left: auto; }
.menu-group.is-open .menu-option,
.menu-group.is-current .menu-option { box-shadow: inset 3px 0 0 var(--accent); }
.menu-list {
position: static;
min-width: 0;
padding: 4px 0;
border: 0;
border-radius: 0;
box-shadow: none;
background: var(--menu-open);
}
.menu-list a {
margin: 0;
padding: 12px var(--edge) 12px calc(var(--edge) + 14px);
border-radius: 0;
}
}
@media (max-width: 767px) {
:root { --edge: 12px; }
.calendar-periods { flex: 1 1 100%; }
.wizard-nav { flex: 1 1 100%; }
.wizard-nav .button-save { margin-left: auto; }
.daterange-foot .button-save { margin-left: auto; }
.linemap { flex-direction: column; }
.linemap-side {
flex: 0 0 55%;
border-right: 0;
border-bottom: 1px solid var(--line);
}
.apphead {
height: auto;
flex-wrap: wrap;
row-gap: 10px;
padding: 10px var(--edge);
}
.identity { margin-left: auto; }
.identity-button { padding: 0 8px; gap: 6px; font-size: var(--fs-xs); }
.identity-name.is-mono { font-size: var(--fs-dense); }
.view-head {
flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 16px var(--edge) 0;
}
.view-title { font-size: var(--fs-xl); }
.view-actions > * { flex: 1; }
.view-actions { flex-wrap: wrap; }
.trip-bar > button { flex: 1; }
.lt-actions > * { flex: 1; }
.view-body { padding: 12px var(--edge); }
.panel     { padding: 12px; }
.panel > h2:first-child           { margin: -12px -12px 12px; padding: 12px 12px 0; }
.panel > .panel-head:first-child  { margin: -12px -12px 12px; padding: 8px 12px 0; }
.panel > .trip-head:first-child   { margin: -12px -12px 14px; padding: 12px 12px 0; }
.panel > .search-head:first-child { margin: -12px -12px 0;    padding: 9px 12px; }
.panel > .table-scroll:last-child { margin: 0 -12px -12px; }
table.grid thead th,
table.grid tbody td { padding: 9px 12px; }
input[type="text"], input[type="password"], input[type="search"], input[type="date"], select, textarea {
height: 42px;
font-size: 16px;
}
.menu-search input,
.menu-search input:focus { height: 26px; font-size: 16px; }
table.grid th, table.grid td { white-space: nowrap; }
.login {
max-width: none;
margin: 0;
border-radius: var(--radius);
}
.login-welcome { display: none; }
.login-form { padding: 24px 20px; }
}
@media print {
.apphead,
.menubar,
.app-version,
.filters,
.view-expand,
.lt-day,
.linetable-hint,
.linetable-key .linetable-more { display: none; }
.linetable-legends { display: block; }
.view-head { padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.panel, .panel-plain, .filters, .tile { box-shadow: none; }
.view-body { padding: 0; }
.panel {
margin-bottom: 12px;
border: 0;
padding: 0;
}
.panel > h2:first-child,
.panel > .panel-head:first-child { margin: 0 0 8px; padding: 0; }
.linetable-scroll {
margin: 0 0 10px;
overflow: visible;
}
.linetable-frame::after { content: none; }
.linetable .col-station,
.linetable .col-mark { position: static; }
.linetable .col-station {
width: auto;
min-width: 0;
max-width: none;
overflow: visible;
}
}
.pw-card {
max-width: 460px;
margin: 24px auto;
padding: 28px 32px 32px;
}
.pw-card-head {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 22px;
}
.pw-card-head h2 {
margin: 0;
font-size: var(--fs-xl);
}
.pw-card-head p {
margin: 2px 0 0;
font-size: var(--fs-sm);
}
.pw-panel .notice { margin-bottom: 14px; }
.pw-fields {
display: flex;
flex-direction: column;
gap: 14px;
}
.pw-fields input {
width: 100%;
height: 42px;
font-size: var(--fs-lg);
}
.pw-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
.pw-card .pw-actions > .button-save {
flex: 1;
height: 46px;
font-size: var(--fs-lg);
}
.pw-escape {
max-width: 460px;
margin: -8px auto 24px;
text-align: center;
}
.pw-escape > button {
border: 0;
padding: 6px;
background: transparent;
color: var(--ink-3);
font: inherit;
font-size: var(--fs-sm);
cursor: pointer;
}
.pw-escape > button:hover { color: var(--link); text-decoration: underline; }
.login-fields .notice { margin: 0 0 14px; }
.view-body > .notice { margin-bottom: 16px; }
.acct-columns {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: 16px;
align-items: start;
}
.acct-columns > .panel { min-width: 0; margin-bottom: 0; }
.acct-list td.acct-when,
.acct-list th.acct-when {
width: 1%;
white-space: nowrap;
}
.acct-row-head { font-weight: 600; }
.acct-row-head a {
color: var(--ink);
text-decoration: none;
}
.acct-row-head a:hover { text-decoration: underline; }
.acct-sub {
display: block;
margin-top: 2px;
font-size: var(--fs-sm);
font-weight: 400;
color: var(--ink-3);
white-space: normal;
}
table.grid .acct-row-tools {
width: 1%;
padding-top: 4px;
padding-bottom: 4px;
text-align: right;
white-space: nowrap;
}
.acct-row-tools > * + * { margin-left: 6px; }
.acct-row-tools .icon-button { vertical-align: middle; }
.acct-row-tools .icon-button { visibility: hidden; }
.acct-list tbody tr:hover .acct-row-tools .icon-button,
.acct-list tbody tr:focus-within .acct-row-tools .icon-button { visibility: visible; }
@media (hover: none) {
.acct-row-tools .icon-button { visibility: visible; }
}
.job-launch-lead { margin: 0; }
.job-launch { margin: 4px 0; padding-left: 18px; }
.run-log {
margin: 0 0 16px;
border: 1px solid var(--console);
border: 1px solid light-dark(var(--console), var(--line));
border-radius: var(--radius);
background: var(--console);
color: var(--console-ink);
overflow: hidden;
}
.run-log-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
padding: 9px 14px;
border-bottom: 1px solid var(--console-line);
}
.run-log-head h2 {
margin: 0;
font-size: var(--fs-sm);
font-weight: 600;
color: var(--console-ink);
}
.run-log-caption {
min-width: 0;
font-family: var(--mono);
font-size: var(--fs-xs);
color: var(--console-dim);
}
.run-log-filter {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: auto;
font-size: var(--fs-xs);
color: var(--console-dim);
cursor: pointer;
}
.run-log-lines {
min-height: 120px;
max-height: min(480px, 60vh);
margin: 0;
padding: 10px 14px;
overflow-y: auto;
list-style: none;
font-family: var(--mono);
font-size: var(--fs-xs);
line-height: 1.7;
}
.run-log-line {
display: grid;
grid-template-columns: 8ch auto minmax(0, 1fr);
column-gap: 10px;
}
.run-log-line time { color: var(--console-dim); }
.run-log-text { grid-column: 3; overflow-wrap: anywhere; }
.run-log-mark { font-weight: 600; }
.run-log-line.is-warn .run-log-mark,
.run-log-line.is-warn .run-log-text { color: var(--console-warn); }
.run-log-line.is-bad .run-log-mark,
.run-log-line.is-bad .run-log-text { color: var(--console-err); }
.run-log-line.is-meta .run-log-text { color: var(--console-meta); }
.run-log-empty { color: var(--console-dim); font-family: var(--font); }
.run-log:has([data-run-log-filter]:checked) .run-log-line:not(.is-warn, .is-bad, .is-meta) { display: none; }
.run-log-foot {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-top: 1px solid var(--console-line);
}
.run-log-bar {
--share: 0%;
flex: 1;
height: 8px;
border-radius: 4px;
background: linear-gradient(to right, var(--accent) var(--share), var(--console-track) 0);
}
.run-log-count {
font-family: var(--mono);
font-size: var(--fs-xs);
color: var(--console-dim);
white-space: nowrap;
}
.history-runs td:first-child { white-space: nowrap; }
.history-info { min-width: 18ch; overflow-wrap: anywhere; }
.history-list > .pager { margin-top: 12px; }
.history-hint { margin: 12px 0 0; }
.status-dbs td:first-child { white-space: nowrap; }
.status-sources { white-space: nowrap; }
.status-hint { margin: 12px 0 0; }
.diagnostics-skrj { margin: 0 0 12px; }
.diagnostics-checks td:first-child { white-space: nowrap; }
.diagnostics-checks td.diagnostics-label { min-width: 14ch; white-space: normal; }
.diagnostics-checks td.diagnostics-result { min-width: 24ch; white-space: normal; overflow-wrap: anywhere; }
.diagnostics-lines {
margin: 6px 0 0;
padding: 0;
list-style: none;
font-size: var(--fs-dense);
}
.diagnostics-lines li { margin-top: 2px; }
.diagnostics-lines .is-warn { color: var(--warn); }
.diagnostics-lines .is-bad { color: var(--err); }
.diagnostics-lines .is-mono { white-space: pre-wrap; }
.diagnostics-hint { margin: 12px 0 0; }
.stations-name { font-weight: 600; }
.stations-table .state.is-plain + .state.is-plain { margin-left: 4px; }
.stations-list > .pager { margin-top: 12px; }
.stations-hint { margin: 12px 0 0; }
.lines-nr { font-weight: 600; }
.lines-trips-cell,
.lines-crossing { white-space: nowrap; }
.lines-facts { margin: 0 0 12px; }
.lines-facts a { margin-left: 8px; }
.lines-points tr.is-junction td { color: var(--ink-3); }
.lines-list > .pager { margin-top: 12px; }
.lines-hint { margin: 12px 0 0; }
.terms-text { min-width: 24ch; white-space: normal; }
.terms-computed { display: block; font-size: var(--fs-dense); }
.terms-created { white-space: nowrap; }
.terms-list > .pager { margin-top: 12px; }
.terms-hint { margin: 12px 0 0; }
.registry-name { font-weight: 600; }
.registry-carriers td { white-space: nowrap; }
.panel.registry-year.is-current { box-shadow: inset 3px 0 0 var(--accent); }
.registry-facts { margin: 0 0 14px; }
.registry-readiness { margin: 0 0 16px; }
.registry-readiness h3 { margin: 0 0 8px; font-size: var(--fs-md); }
.readiness-list {
display: grid;
grid-template-columns: max-content 1fr;
gap: 6px 10px;
margin: 0;
padding: 0;
list-style: none;
}
.readiness-list li { display: contents; }
.readiness-list .state { justify-self: start; }
.registry-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 16px 24px;
align-items: start;
}
.registry-columns h3 { margin: 0 0 8px; font-size: var(--fs-md); }
.registry-hint { margin: 0 0 16px; }
.registry-tools { white-space: nowrap; }
.registry-coverage { margin: 10px 0 0; }
.registry-add {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
margin: 10px 0 0;
}
.registry-add .field-hint { margin: 0; }
.registry-period-form {
display: grid;
gap: 10px;
}
.import-name { margin-right: 6px; font-weight: 600; }
.import-sources-hint { margin: 12px 0 0; }
.source-notes .notice + .notice,
.clash-notes .notice + .notice { margin-top: 6px; }
table.grid .import-tools {
width: 1%;
white-space: nowrap;
text-align: right;
}
.import-tools .button-save + .button-cancel,
.import-tools .button-cancel + .button-save { margin-left: 6px; }
.import-release {
height: var(--pill-height);
font-family: var(--mono);
font-size: var(--fs-sm);
}
@media (max-width: 767px) {
.import-sources thead { display: none; }
.import-sources,
.import-sources tbody,
.import-sources tr,
.import-sources td { display: block; }
.import-sources tr { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.import-sources tr:last-child { border-bottom: 0; }
table.grid.import-sources tbody tr td {
width: auto;
padding: 3px 16px;
border-bottom: 0;
background: none;
text-align: left;
white-space: normal;
}
table.grid.import-sources td[data-label]::before {
content: attr(data-label) ' ';
color: var(--ink-3);
}
table.grid.import-sources tbody tr .import-tools { padding-top: 8px; }
}
.register-steps .panel-head { flex-wrap: wrap; }
.register-warning-question { margin: 0 0 10px; font-weight: 600; }
.register-reset > p { margin: 0; }
.register-reset > * + * { margin-top: 8px; }
.register-patches-lead { font-weight: 600; }
.register-patches {
margin-bottom: 0;
padding-left: 18px;
}
.register-patches li + li { margin-top: 3px; }
.register-trail { margin-top: 16px; }
.register-trail .panel-head { justify-content: space-between; }
.register-trail-actions {
text-align: right;
white-space: nowrap;
}
.register-trail-actions .is-small + .is-small { margin-left: 6px; }
.register-warnings {
margin: 0 0 12px;
padding: 8px 12px;
list-style: none;
border-left: 3px solid var(--warn);
background: var(--warn-bg);
font-family: var(--mono);
font-size: var(--fs-xs);
line-height: 1.6;
overflow-wrap: anywhere;
}
.register-warnings li + li { margin-top: 4px; }
.register-range {
display: flex;
flex: 1 1 100%;
align-items: center;
gap: 8px;
min-width: 0;
font-size: var(--fs-sm);
color: var(--ink-3);
}
.register-range select {
flex: 1 1 0;
min-width: 0;
height: var(--pill-height);
font-family: var(--mono);
font-size: var(--fs-sm);
}
.register-range .button-save,
.register-range .button-cancel { margin-left: 4px; }
.register-body {
display: grid;
gap: 16px;
margin-bottom: 16px;
}
.register-body.has-log { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
.register-body > .panel { margin: 0; }
.register-side {
display: flex;
flex-direction: column;
height: 0;
min-height: 100%;
}
.register-side > .run-log {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
margin: 0;
}
.register-side .run-log-lines {
flex: 1 1 auto;
min-height: 0;
max-height: none;
}
.register-flow {
display: grid;
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.register-step {
position: relative;
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
column-gap: 10px;
row-gap: 2px;
align-items: start;
}
.register-step > * { grid-column: 2; }
.register-step > .wizard-step-n { grid-column: 1; grid-row: 1 / span 4; }
.register-step > .state { justify-self: start; }
.register-step > [data-register-step-state] { margin-top: 2px; }
.register-step:not(:last-child)::after {
content: '';
position: absolute;
top: 22px;
bottom: -12px;
left: 9px;
width: 1px;
background: var(--field);
}
.register-step:is(.is-done, .is-warn):not(:last-child)::after { background: var(--accent); }
.register-name { font-family: var(--mono); font-weight: 600; }
.register-what {
color: var(--ink-3);
font-size: var(--fs-sm);
line-height: 1.4;
}
.register-step.is-warn .wizard-step-n {
border-color: var(--warn-edge);
background: var(--warn-bg);
color: var(--warn);
}
.register-step.is-bad .wizard-step-n {
border-color: var(--err);
background: var(--err);
color: var(--panel);
}
.register-step.is-outside { opacity: .45; }
@media (max-width: 1023px) {
.register-body.has-log { grid-template-columns: minmax(0, 1fr); }
.register-side {
height: auto;
min-height: 0;
}
.register-side .run-log-lines {
min-height: 120px;
max-height: min(480px, 60vh);
}
}
.export-action { margin: auto 0 0; padding-top: 8px; }
table.grid .export-tools {
width: 1%;
white-space: nowrap;
text-align: right;
}
.export-diff-lead { align-self: center; margin: 0; }
.export-diff-run { align-self: flex-end; }
.panel > .export-diff-wait { margin: 12px 0 0; }
.export-diff-copy { min-width: 19em; }
.panel > .export-diff-counts { margin: 16px 0 0; }
.export-diff-section > summary { cursor: pointer; }
.export-diff-section > summary > .state { margin-left: 8px; vertical-align: 2px; }
.export-diff-title { font-size: var(--fs-lg); font-weight: 600; }
.export-diff-lines {
margin: 12px 0 0;
padding: 0;
list-style: none;
font-size: var(--fs-sm);
line-height: var(--lh-text);
}
.export-diff-lines li + li { border-top: 1px solid var(--line-2); padding-top: 3px; margin-top: 3px; }
.state {
display: inline-flex;
align-items: center;
gap: 6px;
height: var(--tag-height);
padding: 0 7px 0 6px;
border-radius: 3px;
background: var(--head);
font-size: var(--fs-dense);
font-weight: 600;
color: var(--ink-2);
white-space: nowrap;
}
.state::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ink-dim);
}
.state.is-ok   { background: var(--ok-bg);   color: var(--ok-edge); }
.state.is-ok::before   { background: var(--ok); }
.state.is-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-edge); }
.state.is-warn::before { background: var(--bus-edge); }
.state.is-bad  { background: var(--err-bg);  color: var(--err); }
.state.is-bad::before  { background: var(--err); }
.state.is-off  { color: var(--ink-3); }
.state.is-plain { padding: 0 6px; }
.state.is-plain::before { display: none; }
.acct-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px 20px;
align-items: start;
}
.acct-grid .field { margin: 0; }
.acct-grid .acct-wide { grid-column: 1 / -1; }
.acct-section,
.search-preview-part {
margin: 20px 0 8px;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-2);
}
.acct-hint {
margin: 0 0 10px;
font-size: var(--fs-sm);
line-height: 1.5;
color: var(--ink-3);
}
.acct-row-form {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 10px 14px;
margin-top: 20px;
padding: 14px 0;
border-top: 1px solid var(--line-2);
}
.modal-body > .acct-row-form:last-child { padding-bottom: 0; }
.acct-dialog-error { margin-bottom: 14px; }
.acct-row-form .field { flex: 1 1 240px; }
.acct-row-form .field .acct-hint { margin: 0; }
.acct-row-form > .acct-hint { flex-basis: 100%; margin: 0; }
.choice-list {
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
overflow: hidden;
}
.choice {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 12px;
font-size: var(--fs-md);
line-height: 1.45;
cursor: pointer;
}
.choice-list .choice + .choice { border-top: 1px solid var(--line-2); }
.choice-list .choice:hover { background: var(--row-alt); }
.choice input {
flex-shrink: 0;
margin: 3px 0 0;
}
.choice:has(:disabled) {
color: var(--ink-3);
cursor: default;
}
.choice.is-plain {
align-items: center;
height: var(--control-height);
padding: 0;
}
.choice.is-plain input { margin: 0; }
.field-lock {
display: inline-flex;
margin-left: 6px;
vertical-align: -1px;
color: var(--ink-3);
cursor: help;
}
.source-lock-reason {
display: flex;
gap: 6px;
align-items: flex-start;
}
.source-lock-reason svg {
flex-shrink: 0;
margin-top: 3px;
}
.source-tables {
display: flex;
flex-wrap: wrap;
gap: 0 18px;
}
.choice.acct-all {
margin-bottom: 10px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
}
form:has(.acct-all :checked) .acct-matrix tbody { opacity: 0.5; }
table.grid td.acct-key,
.acct-list td.acct-key {
font-family: var(--mono);
font-size: var(--fs-sm);
color: var(--ink-2);
white-space: nowrap;
}
table.grid .acct-effective {
width: 1%;
text-align: center;
white-space: nowrap;
}
table.grid td.acct-choice {
width: 1%;
padding-top: 6px;
padding-bottom: 6px;
white-space: nowrap;
}
table.grid td.acct-effective input { margin: 0; vertical-align: middle; }
table.grid tr.acct-group td {
background: var(--head);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-2);
}
table.grid tr.acct-group:hover td { background: var(--head); }
.acct-matrix label { cursor: pointer; }
@media (max-width: 1199px) {
.acct-columns { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
.pw-card {
margin: 8px auto;
padding: 20px 16px 22px;
}
.acct-row-form > .button-cancel { flex: 1; }
}
.traffic {
flex: 1;
min-width: 0;
min-height: 560px;
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(400px, 38%, 680px);
gap: 16px;
}
.traffic.is-loading .traffic-main { opacity: 0.6; }
.traffic-main,
.traffic-mapbox,
.traffic-card {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
}
.traffic-main {
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.traffic-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
}
.traffic-day {
display: flex;
align-items: center;
gap: 6px;
}
.traffic-day input { width: 150px; }
.traffic-pick {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--fs-sm);
color: var(--ink-2);
}
.traffic-pick select { max-width: 340px; }
.traffic-report { margin-left: auto; }
.traffic-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.traffic-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-variant-numeric: tabular-nums;
}
.traffic-pill > span:last-child { color: var(--ink-3); font-weight: 400; }
.traffic-legend .traffic-pill[aria-pressed="false"] { opacity: 0.55; }
.traffic-tools {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
padding: 8px 14px;
border-bottom: 1px solid var(--line-2);
}
.traffic-title {
flex: 1 1 100%;
margin: 0;
font-size: var(--fs-sm);
color: var(--ink-2);
}
.traffic-title b { color: var(--ink); }
.traffic-zoom {
margin-left: auto;
display: flex;
align-items: center;
gap: 6px;
}
.traffic-span {
min-width: 104px;
text-align: center;
font-size: var(--fs-sm);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.traffic-src {
display: inline-flex;
align-items: center;
gap: 5px;
}
.traffic-src i {
width: 16px;
height: 3px;
border-radius: 2px;
background: var(--src, var(--ink-2));
}
.traffic-chart {
position: relative;
flex: 1;
min-height: 360px;
overflow: hidden;
cursor: crosshair;
touch-action: pan-y;
user-select: none;
}
.traffic-chart.is-dragging { cursor: grabbing; }
.traffic-svg {
position: absolute;
inset: 0;
display: block;
font-family: var(--font);
}
.traffic-hour  { stroke: var(--line); }
.traffic-minor { stroke: var(--line-3); }
.traffic-time {
font-size: var(--fs-xs);
font-weight: 600;
fill: var(--ink-2);
text-anchor: middle;
}
.traffic-station         { stroke: var(--line-2); }
.traffic-station.is-edge { stroke: var(--field); }
.traffic-station.is-node { stroke-dasharray: 2 3; }
.traffic-name {
font-size: var(--fs-dense);
fill: var(--ink-2);
text-anchor: end;
}
.traffic-name.is-edge { fill: var(--ink); font-weight: 600; }
.traffic-km {
font-family: var(--mono);
font-size: var(--fs-mark);
fill: var(--ink-dim);
text-anchor: end;
}
.traffic-name-hit {
fill: transparent;
cursor: pointer;
}
.traffic-name,
.traffic-km { pointer-events: none; }
.traffic-station.is-lit {
stroke: var(--warn);
stroke-width: 2;
stroke-dasharray: none;
}
.traffic-name.is-lit,
.traffic-km.is-lit {
fill: var(--warn);
font-weight: 600;
}
.traffic-trip path {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
.traffic-rail,
.traffic-bus {
stroke: var(--src, var(--ink-2));
stroke-width: 1.4;
}
.traffic-bus { stroke-dasharray: 4 3; }
.traffic-hit {
stroke: transparent;
stroke-width: 9;
pointer-events: stroke !important;
cursor: pointer;
}
.traffic-trip:hover .traffic-rail,
.traffic-trip:hover .traffic-bus { stroke-width: 2.4; }
.traffic-trips.has-pick .traffic-trip:not(.is-pick) { opacity: 0.45; }
.traffic-trip.is-pick .traffic-rail,
.traffic-trip.is-pick .traffic-bus { stroke-width: 3; }
.traffic-halo {
stroke: var(--panel);
stroke-width: 7;
}
.traffic-cursor {
stroke: var(--warn);
stroke-width: 1.5;
stroke-dasharray: 4 3;
}
.traffic-cursor-tag { fill: var(--warn); }
.traffic-cursor-time {
font-size: var(--fs-dense);
font-weight: 600;
fill: var(--panel);
text-anchor: middle;
}
.traffic-empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
color: var(--ink-3);
}
.traffic-tip {
position: absolute;
z-index: 2;
max-width: 320px;
padding: 7px 10px;
border: 1px solid var(--field);
border-radius: var(--radius-sm);
background: var(--panel);
box-shadow: var(--shadow-drop);
font-size: var(--fs-xs);
line-height: 1.45;
pointer-events: none;
}
.traffic-overview {
flex-shrink: 0;
padding: 8px 0 2px;
border-top: 1px solid var(--line-2);
cursor: pointer;
touch-action: none;
user-select: none;
}
.traffic-overview.is-dragging { cursor: grabbing; }
.traffic-ov-svg { display: block; overflow: visible; font-family: var(--font); }
.traffic-ov-bg   { fill: var(--row-alt); }
.traffic-ov-hour { stroke: var(--line-2); }
.traffic-ov-time,
.traffic-ov-name {
font-size: var(--fs-mark);
fill: var(--ink-3);
text-anchor: middle;
}
.traffic-ov-name { font-size: var(--fs-dense); text-anchor: end; }
.traffic-ov-trip {
fill: none;
stroke: var(--src, var(--ink-2));
stroke-width: 0.8;
stroke-opacity: 0.7;
}
.traffic-ov-window {
fill: color-mix(in srgb, var(--accent) 10%, transparent);
stroke: var(--accent);
stroke-width: 2;
cursor: grab;
}
.traffic-ov-grip {
fill: var(--panel);
stroke: var(--accent);
stroke-width: 1.5;
cursor: ew-resize;
}
.traffic-hint {
flex-shrink: 0;
margin: 0;
padding: 4px 14px 9px;
font-size: var(--fs-xs);
color: var(--ink-dim);
}
.traffic-side {
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.traffic-mapbox {
flex: 1;
min-height: 260px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.traffic-maphead {
margin: 0;
padding: 10px 14px;
border-bottom: 1px solid var(--line-2);
font-size: var(--fs-sm);
color: var(--ink-2);
}
.traffic-maphead strong { color: var(--warn); }
.traffic-map { min-height: 0; }
.traffic-card {
flex-shrink: 0;
max-height: 50%;
display: flex;
flex-direction: column;
padding: 12px 14px;
box-shadow: var(--shadow-card);
}
.traffic-card-head {
display: flex;
align-items: center;
gap: 10px;
}
.traffic-card-nr {
font-size: var(--fs-xl);
font-variant-numeric: tabular-nums;
}
.traffic-card-head .traffic-src { font-size: var(--fs-xs); color: var(--ink-2); }
.traffic-card-close { margin-left: auto; }
.traffic-card-name,
.traffic-card-rel,
.traffic-card-meta {
margin: 3px 0 0;
font-size: var(--fs-sm);
}
.traffic-card-name { color: var(--ink-2); }
.traffic-card-meta { color: var(--ink-3); font-size: var(--fs-xs); }
.traffic-card-stops {
min-height: 0;
margin: 10px 0;
overflow-y: auto;
border-top: 1px solid var(--line-2);
}
.traffic-card-stops table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-xs);
font-variant-numeric: tabular-nums;
}
.traffic-card-stops th,
.traffic-card-stops td {
padding: 3px 4px;
border-bottom: 1px solid var(--line-3);
text-align: right;
}
.traffic-card-stops th[scope="row"],
.traffic-card-stops thead th:first-child {
text-align: left;
font-weight: 400;
}
.traffic-card-stops thead th {
position: sticky;
top: 0;
background: var(--panel);
color: var(--ink-3);
font-weight: 400;
}
.traffic-card-stops tr.is-bus td:last-child {
background: var(--bus);
box-shadow: inset 0 0 0 1px var(--bus-edge);
}
.traffic-card-stops tr.is-off th,
.traffic-card-stops tr.is-off td { color: var(--ink-3); }
.traffic-card-stops tr.is-off th[scope="row"] { padding-left: 14px; }
.traffic-card .button-save { align-self: flex-start; }
#traffic-dir { max-width: 100%; overflow-x: auto; }
#traffic-dir .pill-part { white-space: nowrap; }
@media (max-width: 1099px) {
.view-body.is-fill:has(.traffic) { overflow-y: auto; }
.traffic { flex: none; min-height: 0; grid-template-columns: minmax(0, 1fr); }
.traffic-chart { flex: none; height: 520px; }
.traffic-mapbox { flex: none; height: 340px; }
.traffic-card { max-height: none; }
}
.sheet-panel {
--fill: var(--panel);
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.sheet-pick,
.sheet-tools,
.sheet-tool-group,
.sheet-fills {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
}
.sheet-tools { gap: 8px 22px; }
.sheet-tool-group { gap: 4px; }
.sheet-actions { margin-left: auto; gap: 8px; }
.sheet-field {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--fs-sm);
}
.sheet-field > span:first-child,
.sheet-tool-label {
font-size: var(--fs-xs);
color: var(--ink-3);
margin-right: 2px;
}
.sheet-zka input { width: 190px; font-family: var(--mono); }
.sheet-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
border-bottom: 1px solid var(--line);
}
.sheet-tab {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border: 1px solid transparent;
border-bottom: 0;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
font-size: var(--fs-sm);
color: var(--ink-2);
text-decoration: none;
}
.sheet-tab:hover { background: var(--head); }
.sheet-tab.is-current {
border-color: var(--line);
background: var(--panel);
color: var(--ink);
font-weight: 600;
margin-bottom: -1px;
}
.sheet-tab.is-hidden { font-style: italic; }
.sheet-tab-set { color: var(--ok); font-weight: 700; }
[data-role="row-carrier"],   tr[data-role="carrier"]   { --mark: #A88F00; --tint: rgb(200 170 0 / 0.26); }
[data-role="row-numbers"],   tr[data-role="numbers"]   { --mark: #2F4FD0; --tint: rgb(47 79 208 / 0.20); }
[data-role="row-name"],      tr[data-role="name"]      { --mark: #00807A; --tint: rgb(0 128 122 / 0.20); }
[data-role="row-calendars"], tr[data-role="calendars"] { --mark: #B0566A; --tint: rgb(176 86 106 / 0.22); }
[data-role="row-times"],     tr[data-role="times"]     { --mark: #6E7C89; --tint: rgb(110 124 137 / 0.16); }
[data-role="col-stop"],  [data-col-role="stop"]  { --mark: #C02B2B; --ctint: rgb(192 43 43 / 0.18); }
[data-role="col-inout"], [data-col-role="inout"] { --mark: #A03AA0; --ctint: rgb(160 58 160 / 0.18); }
[data-role="col-times"], [data-col-role="times"] { --mark: #3F7EA8; --ctint: rgb(63 126 168 / 0.14); }
.sheet-role {
height: var(--pill-height);
padding: 0 11px;
border: 1px solid var(--field);
border-radius: var(--radius-sm);
background: var(--panel);
box-shadow: inset 4px 0 0 var(--mark, var(--accent));
font-size: var(--fs-sm);
font-weight: 500;
color: var(--ink);
}
.sheet-role:hover:not(:disabled) { background: var(--head); }
.sheet-role:disabled { color: var(--ink-dim); cursor: default; }
.sheet-role-summary {
font-family: var(--mono);
font-size: var(--fs-xs);
color: var(--ink-2);
}
.sheet-role-summary:empty { display: none; }
.sheet-clear {
width: 22px;
height: 22px;
padding: 0;
border: 0;
border-radius: var(--radius-round);
background: none;
color: var(--err);
font-size: var(--fs-md);
font-weight: 700;
line-height: 1;
}
.sheet-clear:hover { background: var(--err-bg); }
.sheet-fill {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 8px;
border: 1px solid var(--field);
border-radius: var(--radius-sm);
background: var(--fill);
font-family: var(--mono);
font-size: var(--fs-xs);
}
.sheet-problems { margin: 0; padding-left: 28px; }
.sheet-info {
margin: 0;
min-height: 1.5em;
font-family: var(--mono);
font-size: var(--fs-xs);
color: var(--ink-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sheet-status > p,
.sheet-status > ul { margin: 0; }
.sheet-scroll {
flex: 1;
min-height: 240px;
overflow: auto;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--panel);
}
.sheet-grid {
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
font-size: var(--fs-dense);
font-variant-numeric: tabular-nums;
user-select: none;
-webkit-user-select: none;
}
.sheet-grid col.sheet-index-col { width: 42px; }
.sheet-grid td {
position: relative;
max-width: 0;
padding: 0 3px;
border-right: 1px solid var(--line-2);
border-bottom: 1px solid var(--line-2);
background-color: var(--fill);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: cell;
}
.sheet-grid tr[data-role] > td { background-image: linear-gradient(var(--tint), var(--tint)); }
.sheet-grid td[data-col-role] { box-shadow: inset 0 0 0 100vmax var(--ctint); }
.sheet-grid td.is-outside { opacity: 0.4; }
.sheet-grid td.is-selected::after {
content: "";
position: absolute;
inset: 0;
background: rgb(27 122 181 / 0.24);
box-shadow: inset 0 0 0 1px rgb(27 122 181 / 0.55);
pointer-events: none;
}
.sheet-grid th {
position: sticky;
z-index: 1;
padding: 0 3px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--head);
font-family: var(--mono);
font-size: var(--fs-mark);
font-weight: 500;
color: var(--ink-3);
text-align: center;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
}
.sheet-grid thead th { top: 0; height: 20px; }
.sheet-grid tbody th { left: 0; }
.sheet-grid .sheet-corner { left: 0; z-index: 2; }
.sheet-grid th.is-selected { background: color-mix(in srgb, var(--accent) 30%, var(--head)); color: var(--ink); }
.sheet-grid tr[data-role] > th { box-shadow: inset 4px 0 0 var(--mark); color: var(--ink); font-weight: 700; }
.sheet-grid th[data-col-role] { box-shadow: inset 0 -4px 0 var(--mark); color: var(--ink); font-weight: 700; }
.sheet-grid tr.is-hidden > td,
.sheet-grid tr.is-hidden > th,
.sheet-grid th.sheet-colhead.is-hidden {
padding: 0;
font-size: 0;
background-image: repeating-linear-gradient(45deg, var(--line) 0 2px, transparent 2px 5px);
}
.sheet-reading > summary {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--fs-sm);
cursor: pointer;
}
.sheet-reading[open] > summary { margin-bottom: 8px; }
.sheet-reading > .sheet-fills,
.sheet-reading > ul,
.sheet-reading > p { margin: 0 0 8px; }
.sheet-trips { max-height: 260px; overflow-y: auto; }
.sheet-trips tbody tr { cursor: pointer; }
.sheet-fill.is-plain { background: var(--panel); color: var(--ink-2); }
.sheet-dictionaries { margin-left: auto; }
.dict-panel { display: flex; flex-direction: column; gap: 14px; }
.dict-summary { margin: 0; }
.dict-errors { margin: 0; padding-left: 28px; }
.dict-tools { display: flex; gap: 8px; justify-content: flex-end; }
.dict-section > h2 { display: flex; align-items: center; gap: 10px; }
.dict-action { text-align: right; white-space: nowrap; }
.dict-section .combo { min-width: 240px; }
.import-sheet-problems {
margin: 4px 0 0;
padding-left: 18px;
font-size: var(--fs-xs);
color: var(--warn);
}