@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&family=Open+Sans:wght@400;500;600;700;800&display=swap");

:root{
  --red:#e5303c;--text:#252525;--muted:#737373;--line:#e6e3df;
  --soft:#faf8f5;--green:#3d8062;--delay:#a96a00;--major:#c92828;
  --blue:#1c6e92;--button-green:#669620;
}
*{box-sizing:border-box}
html,body{margin:0;background:transparent;color:var(--text);font-family:"Open Sans",Arial,Helvetica,sans-serif}
body{padding:4px}
button{font:inherit}
.board{width:100%;max-width:1050px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.board-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px 10px;border-bottom:1px solid var(--line)}
h2{margin:0;color:var(--red);font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.live{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;white-space:nowrap}
.live i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.direction{border-bottom:1px solid var(--line)}
.direction:nth-child(even){background:var(--soft)}
.direction-main{
  display:grid;grid-template-columns:minmax(165px,1.15fr) 62px 105px minmax(175px,1.65fr) 75px 78px;
  align-items:center;gap:8px;min-height:51px;padding:6px 14px
}
.where-line{display:flex;align-items:baseline;gap:7px;min-width:0}
.where{font-size:15px;font-weight:700}
.more{padding:0;border:0;background:none;color:#555;text-decoration:underline;text-underline-offset:3px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap}
.time{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.train{font-size:14px;font-weight:700}
.destination{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.track{font-size:12px;color:var(--muted)}
.track strong{color:var(--text);font-size:13px}
.status{text-align:right;font-size:12px;font-weight:700;color:var(--green)}
.status.delay{color:var(--delay)}
.status.major-delay,.status.cancel{color:var(--major)!important}
.extra{border-top:1px dashed #e9e5df}
.extra[hidden]{display:none}
.extra .direction-main{min-height:45px;padding-top:4px;padding-bottom:4px}
.empty{padding:10px 14px;color:var(--muted);font-size:13px}
.board-footer{display:flex;justify-content:flex-end;padding:10px 13px}
.primary{
  border:0;border-radius:11px;background:linear-gradient(90deg,var(--blue),var(--button-green));
  color:#fff;padding:9px 17px;min-height:38px;font-size:14px;font-weight:500;cursor:pointer
}
.primary:hover{filter:brightness(.96)}
.full-board{border-top:1px solid var(--line)}
.tabs{display:flex;background:var(--soft);border-bottom:1px solid var(--line)}
.tab{border:0;background:transparent;padding:10px 14px;color:var(--muted);font-size:13px;font-weight:700;cursor:pointer}
.tab.active{background:#fff;color:var(--red);box-shadow:inset 0 -2px var(--red)}
.columns,.full-row{display:grid;grid-template-columns:68px 105px minmax(0,1fr) 70px 88px;align-items:center;gap:8px;padding:7px 14px}
.columns{color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line)}
.full-row{min-height:43px;border-bottom:1px solid #efedea;font-size:13px}
.full-row:last-child{border-bottom:0}
.full-row .time{font-size:15px}
.full-row .train{font-size:13px}
@media(max-width:720px){
  body{padding:0}.board{border-left:0;border-right:0;border-radius:0}
  .board-head{padding:11px 11px 8px}h2{font-size:19px}
  .direction-main{
    grid-template-columns:minmax(0,1fr) 54px 73px 57px;
    grid-template-areas:"where time train status" "dest dest track status";
    min-height:58px;gap:1px 7px;padding:7px 11px
  }
  .where-line{grid-area:where;gap:5px}.time{grid-area:time;font-size:16px}
  .train{grid-area:train;font-size:12px}.destination{grid-area:dest;color:var(--muted);font-size:11px}
  .track{grid-area:track;font-size:11px}.status{grid-area:status;font-size:11px}.more{font-size:10px}
  .board-footer{padding:8px 11px}.primary{width:100%}
  .columns,.full-row{grid-template-columns:57px 73px minmax(0,1fr) 52px;padding-left:11px;padding-right:11px}
  .columns span:last-child,.full-row .status{display:none}
  .full-row .destination{color:var(--text);font-size:12px}
}

h1,h2,h3,.where,.primary{font-family:Montserrat,"Open Sans",sans-serif}

.mobile-track-label{display:none}
@media(max-width:720px){
  .board-head{flex-wrap:wrap}
  .where-line{flex-wrap:wrap}
  .columns{display:none}
  .full-row{grid-template-columns:58px minmax(0,1fr) 85px;grid-template-areas:"time train track" "dest dest dest" "status status status";gap:4px 8px;padding:10px 11px;text-align:left}
  .full-row>*{min-width:0;justify-self:stretch}
  .full-row .time{grid-area:time}
  .full-row .train{grid-area:train;overflow-wrap:anywhere}
  .full-row .destination{grid-area:dest;white-space:normal;overflow:visible;font-size:14px}
  .full-row .track{grid-area:track;text-align:right}
  .full-row .status{grid-area:status;display:block;text-align:left;font-size:12px}
  .mobile-track-label{display:inline}
}

body[data-custom-board]{font-family:var(--board-font)}
body[data-custom-board] h2,body[data-custom-board] .where,body[data-custom-board] .primary{font-family:var(--board-heading-font)}
body[data-custom-board] .direction-main,body[data-custom-board] .extra .direction-main,body[data-custom-board] .full-row{padding-top:var(--board-row-padding);padding-bottom:var(--board-row-padding)}
#custom-footer,#station-notice{padding:8px 14px;white-space:pre-line;font-size:13px;line-height:1.5}

/* Railway-inspired layouts preserve the same accessible departure data and controls. */
body[data-board-design]:not([data-board-design=standard]){--muted:var(--text);--green:var(--text);--delay:var(--text);--major:#ff7777;--line:color-mix(in srgb,var(--text) 25%,transparent)}
body[data-board-design]:not([data-board-design=standard]) .board{border-radius:0}
body[data-board-design]:not([data-board-design=standard]) .more{color:var(--text)}
body[data-board-design]:not([data-board-design=standard]) .full-row{border-color:var(--line)}
body[data-board-design]:not([data-board-design=standard]) .full-row:nth-child(even){background:var(--soft)}
body[data-board-design]:not([data-board-design=standard]) .tab.active{background:transparent;color:var(--text);box-shadow:inset 0 -3px var(--red)}
body[data-board-design]:not([data-board-design=standard]) .primary{border:1px solid var(--line);border-radius:4px;color:var(--text)}
body[data-board-design]:not([data-board-design=standard]) #swiss-source{color:var(--text)}
body[data-board-design]:not([data-board-design=standard]) .extra{border-color:var(--line)}
body[data-board-design=db]{--major:#b51f1f!important;--green:#003082;--delay:#914600}
body[data-board-design=db] .board-head{background:#c8e2f0;border-bottom:2px solid var(--text)}
body[data-board-design=db] .primary{color:white!important}
body:is([data-board-design=db],[data-board-design=trenitalia]) .columns{display:none}
body:is([data-board-design=db],[data-board-design=trenitalia]) .full-row{grid-template-columns:90px minmax(0,1fr) 90px;grid-template-areas:'time train track' 'dest dest dest' 'status status status';gap:7px 10px;padding:14px 18px;text-align:left}
body:is([data-board-design=db],[data-board-design=trenitalia]) .full-row .time{grid-area:time;font-size:24px;font-weight:900}
body:is([data-board-design=db],[data-board-design=trenitalia]) .full-row .train{grid-area:train;font-size:20px}
body:is([data-board-design=db],[data-board-design=trenitalia]) .full-row .track{grid-area:track;text-align:right}
body:is([data-board-design=db],[data-board-design=trenitalia]) .full-row .track strong{font-size:18px}
body:is([data-board-design=db],[data-board-design=trenitalia]) .full-row .destination{grid-area:dest;white-space:normal;font-size:15px;font-weight:700}
body:is([data-board-design=db],[data-board-design=trenitalia]) .full-row .status{grid-area:status;display:block;text-align:left}
body[data-board-design=uk] .time,body[data-board-design=uk] .destination,body[data-board-design=uk] .train{font-family:ui-monospace,Consolas,monospace;letter-spacing:.02em}
body[data-board-design=uk] .board-head{border-bottom:3px solid var(--red)}
body[data-board-design=uk] .full-row{min-height:54px}
body[data-board-design=sncf] .board-head{background:#702d91}
body[data-board-design=sncf] .time{font-size:22px}
body[data-board-design=sncf] .full-row{min-height:62px}
body[data-board-design=sncf] .track strong{display:inline-block;padding:4px 8px;border:1px solid currentColor;border-radius:5px}
@media(max-width:720px){
 body:is([data-board-design=db],[data-board-design=trenitalia]) .full-row{grid-template-columns:70px minmax(0,1fr) 75px;padding-left:11px;padding-right:11px}
 body:is([data-board-design=db],[data-board-design=trenitalia]) .full-row .time{font-size:21px}
 body:is([data-board-design=db],[data-board-design=trenitalia]) .full-row .train{font-size:17px;overflow-wrap:anywhere}
 body[data-board-design]:not([data-board-design=standard]) .direction-main{grid-template-columns:minmax(0,1fr) 58px 70px;grid-template-areas:'where where where' 'time train track' 'dest dest dest' 'status status status';gap:5px 8px}
 body[data-board-design]:not([data-board-design=standard]) .direction-main .destination{white-space:normal}
 body[data-board-design]:not([data-board-design=standard]) .direction-main .status{text-align:left}
}
body[data-board-design]:not([data-board-design=standard]) .board-footer{flex-wrap:wrap;gap:8px}
body[data-board-design]:not([data-board-design=standard]) #swiss-source{flex-basis:100%;font-size:11px;overflow-wrap:anywhere}

/* Sources follow the complete departure board. */
.board-sources{display:block;padding:10px 14px 12px;border-top:1px solid var(--line);font-size:10px;line-height:1.5;color:var(--muted)}
.board-sources:empty{display:none}
.board-sources a,body[data-board-design] .board-sources a{display:block;font-size:10px;color:inherit;overflow-wrap:anywhere;text-decoration:none}
.board-sources a:hover{text-decoration:underline}
body[data-custom-board][data-board-design=treinreiziger]{--muted:#777;--green:#22844b;--delay:#b45b00;--major:#bd2431;--line:#e4e4e4}
body[data-custom-board][data-board-design=treinreiziger] .board{border:0}
body[data-custom-board][data-board-design=treinreiziger] h2{font-weight:400;line-height:1.35;font-size:25px}
body[data-custom-board][data-board-design=treinreiziger] .where{font-weight:600}
body[data-custom-board][data-board-design=treinreiziger] .primary{color:white;border:0;background:linear-gradient(90deg,var(--blue),var(--button-green))}
body[data-custom-board][data-board-design=treinreiziger] .board-head{padding:16px 14px;border-bottom:2px solid var(--red)}
body[data-custom-board][data-board-design=treinreiziger] .full-row{min-height:48px}
@media(max-width:560px){body[data-custom-board][data-board-design=treinreiziger] h2{font-size:21px}}
body[data-custom-board][data-board-design=treinreiziger] .primary{color:#fff!important}