:root{
    --bg:#F4F7F8;
    --card:#FFFFFF;
    --route-bg:#E7F0F1;
    --ink:#122024;
    --teal:#0E5C63;
    --teal-deep:#0A464C;
    --teal-tint:#E3F3EF;
    --mint:#DFF5EC;
    --mint-ink:#0E7A54;
    --gold:#F3C548;
    --secondary:#6E7A7D;
    --tertiary:#A2ACAE;
    --sep:#E6EBEA;
    --live:#22B573;
    --sky:#CFE3E9;
    --sky-deep:#9FC3CE;
    --radius-lg:22px;
    --radius-md:16px;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0; overscroll-behavior-y:none; overflow-x:hidden;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    padding-bottom:80px;
    overscroll-behavior-y:none;
    overflow-x:hidden;
    width:100%;
  }
  .wrap{max-width:520px; margin:0 auto; padding:18px 16px 0 16px;}

  /* ---------- HEADER ---------- */
  .app-header{ display:flex; align-items:flex-start; justify-content:space-between; }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand svg{ width:34px; height:34px; flex-shrink:0; }
  .brand-title{ font-size:21px; font-weight:800; color:var(--teal-deep); line-height:1.1; letter-spacing:-0.01em; }
  .lang-toggle{
    border:none; background:var(--card); color:var(--teal-deep);
    font-size:12.5px; font-weight:800; padding:8px 13px; border-radius:20px;
    cursor:pointer; box-shadow:0 1px 3px rgba(18,32,36,0.08);
    flex-shrink:0;
  }

  /* ---------- TRAFFIC STATUS ---------- */
  .traffic-card{
    display:flex; align-items:flex-start; gap:6px;
    background:var(--card); border:1px solid transparent;
    border-radius:var(--radius-md);
    padding:12px 14px; margin-bottom:14px;
    transition:background .3s ease, border-color .3s ease;
  }
  /* The whole card body is the tap target that opens the full message. */
  .traffic-open{
    display:flex; align-items:flex-start; gap:11px; flex:1; min-width:0;
    border:none; background:none; padding:0; margin:0;
    font:inherit; text-align:left; cursor:pointer; color:inherit;
  }
  .traffic-open:active{ opacity:0.6; }
  .traffic-icon{ flex-shrink:0; width:26px; height:26px; color:var(--tertiary); }
  .traffic-icon svg{ width:100%; height:100%; display:block; }
  .traffic-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
  .traffic-title{ font-size:13px; font-weight:800; color:var(--ink); }
  .traffic-sub{
    font-size:12px; color:var(--secondary); margin-top:2px; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .traffic-meta{ font-size:9.5px; color:var(--tertiary); margin-top:4px; }
  .traffic-chev{ flex-shrink:0; color:var(--tertiary); font-size:17px; line-height:1.1; }
  .traffic-refresh{
    border:none; background:none; color:var(--tertiary);
    font-size:15px; line-height:1; cursor:pointer; flex-shrink:0; padding:2px;
  }
  .traffic-refresh.spinning{ animation:traffic-spin .7s linear infinite; }
  @keyframes traffic-spin{ to{ transform:rotate(360deg); } }

  /* Severity drives colour. Information stays quiet; cancelled shouts. */
  .traffic-card[data-status="normal"] .traffic-icon{ color:var(--live); }
  .traffic-card[data-status="information"]{ background:#EAF2FB; }
  .traffic-card[data-status="information"] .traffic-icon{ color:#3B82C4; }
  .traffic-card[data-status="delay"]{ background:#FDF3DC; border-color:#F0D48A; }
  .traffic-card[data-status="delay"] .traffic-icon{ color:#D08A0E; }
  .traffic-card[data-status="delay"] .traffic-title{ color:#7A5300; }
  .traffic-card[data-status="delay"] .traffic-sub{ color:#8A6420; }
  .traffic-card[data-status="disruption"]{ background:#FBE9E4; border-color:#F0B7A4; }
  .traffic-card[data-status="disruption"] .traffic-icon{ color:#C9502E; }
  .traffic-card[data-status="disruption"] .traffic-title{ color:#8A2E14; }
  .traffic-card[data-status="disruption"] .traffic-sub{ color:#96432A; }
  .traffic-card[data-status="cancelled"]{ background:#FBE4E4; border-color:#EFA9A9; }
  .traffic-card[data-status="cancelled"] .traffic-icon{ color:#D9432C; }
  .traffic-card[data-status="cancelled"] .traffic-title{ color:#8A1414; }
  .traffic-card[data-status="cancelled"] .traffic-sub{ color:#96322A; }
  .traffic-card[data-status="unknown"]{ background:var(--bg); border-color:var(--sep); }
  .traffic-card[data-status="unknown"] .traffic-icon{ color:var(--tertiary); }
  .traffic-card[data-status="unknown"] .traffic-title{ color:var(--secondary); font-style:italic; }

  /* ---------- TRAFFIC SHEET ---------- */
  .sheet-backdrop{
    position:fixed; inset:0; background:rgba(18,32,36,0.38);
    z-index:60; animation:sheet-fade .2s ease;
  }
  .sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:61;
    background:var(--card);
    border-radius:22px 22px 0 0;
    padding:10px 22px calc(26px + env(safe-area-inset-bottom)) 22px;
    max-height:76vh; overflow-y:auto;
    animation:sheet-up .26s cubic-bezier(.22,.9,.3,1);
  }
  .sheet-grabber{
    width:38px; height:5px; border-radius:3px; background:var(--sep);
    margin:0 auto 16px auto;
  }
  .sheet-head{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
  .sheet-x{
    margin-left:auto; flex-shrink:0;
    width:28px; height:28px; border-radius:50%;
    border:none; background:var(--route-bg); color:var(--secondary);
    font-size:18px; line-height:1; font-family:inherit; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .sheet-head .traffic-icon{ width:30px; height:30px; }
  .sheet-title{ font-size:19px; font-weight:800; color:var(--ink); }
  .sheet-message{ font-size:15px; line-height:1.5; color:var(--ink); white-space:pre-line; }
  .sheet-meta{ font-size:11.5px; color:var(--tertiary); margin-top:14px; }
  .sheet-source{ font-size:11.5px; color:var(--tertiary); margin-top:3px; }
  .sheet-close{
    width:100%; margin-top:20px; padding:14px;
    border:none; border-radius:14px;
    background:var(--route-bg); color:var(--ink);
    font-size:15px; font-weight:700; font-family:inherit; cursor:pointer;
  }
  @keyframes sheet-up{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
  @keyframes sheet-fade{ from{ opacity:0; } to{ opacity:1; } }

  /* ---------- BOAT SHEET ---------- */
  .boat-sheet-body p{ font-size:14.5px; line-height:1.55; color:var(--ink); margin:0 0 12px 0; }
  .boat-sheet-tagline{ font-size:13px; font-weight:700; color:var(--teal); margin:0 0 14px 0; }
  .boat-sheet-section-title{ font-size:13px; font-weight:800; color:var(--ink); margin:18px 0 8px 0; }
  .boat-sheet-facts{
    display:grid; grid-template-columns:auto 1fr; gap:6px 12px;
    font-size:13.5px;
  }
  .boat-sheet-facts span:nth-child(odd){ color:var(--secondary); }
  .boat-sheet-facts span:nth-child(even){ color:var(--ink); font-weight:600; text-align:right; }
  .boat-sheet-list{ margin:0; padding-left:18px; }
  .boat-sheet-list li{ font-size:14px; line-height:1.5; color:var(--ink); margin-bottom:8px; }

  /* ---------- ROUTE CARD ---------- */
  .route-card{
    background:var(--route-bg);
    border-radius:var(--radius-lg);
    padding:20px 18px 16px 18px;
    margin-bottom:14px;
  }
  .route-eyebrow{
    font-size:11px; font-weight:700; letter-spacing:0.09em;
    text-transform:uppercase; color:var(--secondary);
    margin:0 2px 2px 2px;
  }

  .track-line-wrap{ position:relative; height:3px; margin:58px 40px 0 40px; }
  .track-line{ position:absolute; inset:0; background:#CFDBDA; border-radius:3px; }
  .track-fill{ position:absolute; top:0; left:0; height:100%; background:var(--teal); border-radius:3px; transition:width .6s ease; }
  .boat-wrap{ position:absolute; top:0; left:0; width:100%; height:0; transition:transform .6s ease; }
  .boat-pin{
    position:absolute; left:0; bottom:9px;
    width:46px; height:auto;
    transform:translateX(-50%);
    filter:drop-shadow(0 3px 4px rgba(18,32,36,0.35));
    z-index:3;
  }

  .nodes{ position:relative; height:26px; margin:14px 40px 0 40px; }
  .track-empty{
    display:none;
    text-align:center; padding:4px 10px 14px 10px;
    font-size:14.5px; font-weight:600; color:var(--secondary);
  }
  .node{
    position:absolute; top:0;
    display:flex; flex-direction:column; align-items:center;
    width:86px; transform:translateX(-50%);
  }
  .node .dot{
    width:12px; height:12px; border-radius:50%;
    background:#fff; border:2.5px solid var(--tertiary);
    margin-top:-15.5px; transform:translateY(-50%);
    position:relative; z-index:1;
  }
  .node.done .dot{background:var(--teal); border-color:var(--teal);}
  .node.current .dot{ background:var(--gold); border-color:var(--ink); width:14px; height:14px; }
  .node .lbl{ font-size:11px; font-weight:600; color:var(--secondary); text-align:center; margin-top:4px; line-height:1.2; }
  .node.current .lbl{color:var(--ink); font-weight:800;}

  /* ---------- BOAT IDENTITY ROW ---------- */
  .boat-identity{
    display:flex; align-items:center; gap:12px;
    background:var(--card); border-radius:var(--radius-md);
    padding:12px 14px; margin-top:16px;
  }
  button.boat-identity{
    width:100%; border:none; font-family:inherit; text-align:left; cursor:pointer;
    color:var(--ink);
  }
  .boat-avatar{
    width:46px; height:46px; border-radius:50%; overflow:hidden; flex-shrink:0;
    box-shadow:0 1px 3px rgba(18,32,36,0.15);
  }
  .boat-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
  .boat-info{ flex:1; min-width:0; }
  .boat-name-row{ display:flex; align-items:center; gap:7px; }
  .boat-name-row b{ font-size:14.5px; font-weight:800; }
  .boat-status{ font-size:12.5px; color:var(--secondary); margin-top:2px; line-height:1.35; }

  /* ---------- NEXT DEPARTURE CARD ---------- */
  .kai-chips{
    display:flex; gap:7px; overflow-x:auto;
    padding:2px 2px 12px 2px;
    scrollbar-width:none; -ms-overflow-style:none;
    /* Fade the trailing edge so a scrollable row doesn't look like a hard cutoff. */
    -webkit-mask-image:linear-gradient(to right, black 90%, transparent 100%);
    mask-image:linear-gradient(to right, black 90%, transparent 100%);
  }
  .kai-chips::-webkit-scrollbar{ display:none; }
  .kai-chip{
    flex-shrink:0; border:none; cursor:pointer;
    background:var(--card); color:var(--secondary);
    font-size:12.5px; font-weight:600;
    padding:8px 14px; border-radius:20px;
    white-space:nowrap;
    box-shadow:0 1px 2px rgba(18,32,36,0.06);
    transition:background .18s ease, color .18s ease;
  }
  .kai-chip.active{ background:var(--teal-deep); color:#fff; font-weight:700; }

  .next-card{
    background:var(--card); border-radius:var(--radius-lg);
    padding:16px 18px 18px 18px; margin-bottom:14px;
  }
  .next-label{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--secondary); font-weight:600; margin-bottom:10px;}
  .next-label svg{ width:14px; height:14px; }
  .next-row{ display:flex; align-items:stretch; justify-content:space-between; gap:12px; }
  .next-time-block{ display:flex; flex-direction:column; justify-content:center; }
  .next-time{ font-size:38px; font-weight:800; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1; }
  .next-from{ font-size:13px; color:var(--secondary); font-weight:600; margin-top:5px; }
  .countdown-box{
    background:var(--mint); border-radius:var(--radius-md);
    padding:10px 18px; text-align:center; min-width:118px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .countdown-box .om{ font-size:11px; font-weight:700; color:var(--mint-ink); opacity:0.8; }
  .countdown-box .val{ font-size:26px; font-weight:800; color:var(--mint-ink); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
  .countdown-box .unit{ font-size:10px; font-weight:600; color:var(--mint-ink); opacity:0.7; letter-spacing:0.02em; }

  /* ---------- UPCOMING LIST ---------- */
  .upcoming-card{ background:var(--card); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:14px; }
  .route-map-card{ background:var(--card); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:14px; }
  .route-map-img{ display:block; width:100%; height:auto; margin-bottom:-4px; }
  .upcoming-header{ display:flex; justify-content:space-between; align-items:center; padding:16px 18px 8px 18px; }
  .upcoming-header span{ font-size:15px; font-weight:800; }
  .see-all{ background:none; border:none; color:var(--teal); font-size:13px; font-weight:700; cursor:pointer; padding:0; }
  .upcoming-row{
    display:flex; align-items:center; gap:12px;
    padding:11px 18px; border-top:0.5px solid var(--sep);
  }
  .upcoming-row .time{ font-size:14.5px; font-weight:800; font-variant-numeric:tabular-nums; width:52px; flex-shrink:0; }
  .upcoming-row .stop{ flex:1; font-size:14px; color:var(--ink); font-weight:600; }
  .upcoming-row .chev{ color:var(--tertiary); font-size:14px; }
  .upcoming-empty{ padding:18px; text-align:center; color:var(--secondary); font-size:13.5px; }

  /* ---------- AD SLOT ---------- */
  .ad-card{
    display:flex; align-items:center; gap:12px;
    background:var(--teal-tint); border-radius:var(--radius-lg);
    padding:12px 14px; margin-bottom:14px;
  }
  .ad-card[hidden]{ display:none; }
  .ad-thumb{
    width:48px; height:48px; border-radius:12px; flex-shrink:0;
    background:linear-gradient(160deg,#0E5C63,#1F8A83);
    display:flex; align-items:center; justify-content:center;
  }
  .ad-thumb svg{ width:24px; height:24px; }
  .ad-info{ flex:1; min-width:0; }
  .ad-label{ font-size:9.5px; font-weight:700; color:var(--tertiary); text-transform:uppercase; letter-spacing:0.03em; }
  .ad-title{ font-size:13.5px; font-weight:800; color:var(--ink); margin-top:1px; }
  .ad-sub{ font-size:11.5px; color:var(--secondary); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ad-cta{
    flex-shrink:0; border:none; background:var(--card); color:var(--teal);
    font-size:12px; font-weight:700; padding:8px 13px; border-radius:20px; cursor:pointer;
  }
  /* ---------- CONTACT SHEET ---------- */
  .contact-intro{ font-size:13.5px; color:var(--secondary); margin-bottom:16px; }
  .contact-field{ margin-bottom:14px; }
  .contact-field label{
    display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:6px;
  }
  .contact-field input, .contact-field textarea{
    width:100%; border:1px solid var(--sep); border-radius:12px;
    background:var(--bg); color:var(--ink);
    font-size:15px; font-family:inherit; padding:11px 13px;
    box-sizing:border-box; resize:vertical;
  }
  .contact-field input:focus, .contact-field textarea:focus{
    outline:none; border-color:var(--teal);
  }
  .contact-error{ font-size:13px; color:#C0392B; margin-bottom:10px; }
  .contact-submit{
    width:100%; margin-top:4px; padding:14px;
    border:none; border-radius:14px;
    background:var(--teal); color:#fff;
    font-size:15px; font-weight:700; font-family:inherit; cursor:pointer;
  }
  .contact-submit:disabled{ opacity:0.6; cursor:default; }
  .contact-success{ font-size:15px; color:var(--ink); text-align:center; padding:24px 0; }

  /* ---------- FULL SCHEDULE (toggled) ---------- */
  .full-schedule{ display:none; }
  .full-schedule.show{ display:block; }
  .route-section{ padding-bottom:6px; }
  .route-section + .route-section{ border-top:1px solid var(--sep); margin-top:4px; }
  .route-section-title{ padding:12px 18px 2px 18px; font-size:12.5px; font-weight:700; color:var(--ink); }
  .list-legend{
    display:grid; grid-template-columns:repeat(4,1fr);
    padding:8px 18px 4px 18px; font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.01em; color:var(--secondary); text-align:center;
  }
  .trip-row{
    display:grid; grid-template-columns:repeat(4,1fr);
    padding:9px 14px; border-top:0.5px solid var(--sep);
    font-size:13px; font-variant-numeric:tabular-nums; text-align:center; font-weight:600;
  }
  .trip-row.past{color:var(--tertiary); font-weight:500;}
  .now-divider{
    display:flex; align-items:center; gap:10px;
    padding:8px 16px;
    border-top:0.5px solid var(--sep);
  }
  .now-divider::before,
  .now-divider::after{
    content:""; flex:1; height:1px; background:#E0A020; opacity:0.55;
  }
  .now-divider span{
    font-size:10.5px; font-weight:800; letter-spacing:0.08em;
    color:#C4870F; white-space:nowrap;
  }
  .trip-row.active-row{background:var(--teal-tint);}
  .no-service-row{ padding:20px 18px 22px 18px; text-align:center; color:var(--secondary); font-size:13.5px; }

  /* ---------- ACTION ROW ---------- */
  .action-row{ display:flex; gap:10px; margin-bottom:14px; }
  .action-btn{
    flex:1; background:var(--card); border:none; border-radius:var(--radius-md);
    padding:13px 6px; display:flex; flex-direction:column; align-items:center; gap:6px;
    font-size:11.5px; font-weight:700; color:var(--ink); cursor:pointer;
  }
  .action-btn svg{ width:19px; height:19px; color:var(--teal); }

  /* ---------- SCREENS ---------- */
  .screen{ display:none; }
  .screen.active{ display:block; animation:screen-in .22s ease; }
  @keyframes screen-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
  .screen-title{ font-size:24px; font-weight:800; letter-spacing:-0.02em; margin:2px 2px 2px 2px; }
  #screenMer .screen-title{ margin:32px 2px 28px 2px; }
  .screen-lead{ font-size:13px; color:var(--secondary); margin:0 2px 14px 2px; }

  .date-nav{
    display:flex; align-items:center; justify-content:space-between;
    background:var(--card); border-radius:var(--radius-lg);
    padding:10px 8px; margin:8px 0 0 0;
  }
  .date-arrow{
    border:none; background:none; color:var(--teal);
    font-size:26px; line-height:1; font-weight:600;
    width:44px; height:40px; cursor:pointer; border-radius:12px;
  }
  .date-arrow:active{ background:var(--teal-tint); }
  .date-center{ text-align:center; flex:1; min-width:0; }
  .date-label{ font-size:15px; font-weight:800; color:var(--ink); }
  .date-sub{ font-size:11.5px; color:var(--secondary); margin-top:1px; text-transform:capitalize; }
  .date-today-wrap{ text-align:center; height:26px; margin-bottom:6px; }
  .date-today{
    border:none; background:var(--teal-tint); color:var(--teal);
    font-size:11.5px; font-weight:700; padding:5px 14px;
    border-radius:20px; cursor:pointer; margin-top:8px;
  }

  .settings-card{ background:var(--card); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:14px; }
  .settings-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; font-size:14px; font-weight:600;
  }
  .settings-row + .settings-row{ border-top:0.5px solid var(--sep); }
  a.settings-row{ color:var(--ink); text-decoration:none; }
  button.settings-row{
    width:100%; border:none; background:none; font-family:inherit;
    text-align:left; color:var(--ink); cursor:pointer;
  }
  .add-home-card{ padding:14px 18px; }
  .add-home-title{ font-size:14px; font-weight:700; margin-bottom:4px; }
  .add-home-note{ font-size:12.5px; color:var(--secondary); line-height:1.45; }
  .settings-value{
    background:none; border:none; padding:0;
    color:var(--teal); font-size:14px; font-weight:700;
    text-decoration:none; cursor:pointer;
  }

  .info-panel{ display:none; background:var(--card); border-radius:var(--radius-lg); padding:16px 18px; margin-bottom:14px; font-size:13px; color:var(--secondary); line-height:1.55; }
  .info-panel .info-title{ font-size:15px; font-weight:800; color:var(--ink); margin-bottom:10px; }
  .info-panel p{ margin:0 0 10px 0; }
  .info-panel p:last-child{ margin-bottom:0; }
  .info-panel.show{ display:block; }
  .info-panel a{ color:var(--teal); font-weight:700; text-decoration:none; }

  /* ---------- BANNER ---------- */
  .banner{
    display:flex; align-items:center; gap:12px;
    background:var(--teal-tint); border-radius:var(--radius-lg);
    padding:14px 16px; margin-bottom:10px;
  }
  .banner svg{ width:20px; height:20px; color:var(--teal); flex-shrink:0; }
  .banner-title{ font-size:13.5px; font-weight:800; color:var(--teal-deep); }
  .banner-sub{ font-size:11.5px; color:var(--secondary); margin-top:1px; }

  /* ---------- SKYLINE ---------- */
  .skyline-wrap{ margin:6px -16px 0 -16px; overflow:hidden; }
  .skyline-wrap img{ display:block; width:100%; height:auto; }

  /* ---------- TAB BAR (floating pill) ---------- */
  .tabbar{
    position:fixed; left:12px; right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,0.86);
    backdrop-filter:blur(18px) saturate(1.6);
    -webkit-backdrop-filter:blur(18px) saturate(1.6);
    border:1.5px solid rgba(18,32,36,0.14);
    border-radius:999px;
    display:flex; justify-content:space-around; align-items:center;
    padding:7px 8px;
    max-width:496px; margin:0 auto;
    box-shadow:0 10px 28px -6px rgba(18,32,36,0.26), 0 3px 10px rgba(18,32,36,0.10);
  }
  .tab{
    flex:1;
    background:none; border:none; border-radius:999px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    font-size:10.5px; font-weight:600; color:var(--secondary); cursor:pointer;
    padding:9px 4px;
    transition:background .22s ease, color .22s ease;
  }
  .tab svg{ width:21px; height:21px; }
  .tab.active{
    color:var(--teal-deep);
    font-weight:700;
    background:rgba(14,92,99,0.10);
  }
  .tab.active svg{ stroke-width:2.1; }

  @media (prefers-reduced-motion: reduce){
    .track-fill,.boat-wrap{transition:none; animation:none;}
    .sheet,.sheet-backdrop{animation:none;}
  }