:root{
    --ink:#0c2733; --ink-soft:#3a5563; --haze:#7d95a0;
    --paper:#f3efe4; --paper-line:#e2dccb; --card:#fbf8f0;
    --sea:#123a4a; --buoy:#e0552b; --rule:#cfc7b2;
    --shadow:rgba(12,39,51,.14);
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    background:repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(18,58,74,.04) 27px,rgba(18,58,74,.04) 28px),var(--paper);
    color:var(--ink);font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;line-height:1.45;
  }
  .wrap{max-width:1080px;margin:0 auto;padding:26px 20px 80px}
  header.mast{border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:8px;
    display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
  .mast h1{font-size:clamp(26px,4.4vw,40px);line-height:.98;margin:0;font-weight:700;letter-spacing:.5px}
  .kicker{font-family:"Helvetica Neue",Arial,sans-serif;text-transform:uppercase;letter-spacing:.32em;
    font-size:11px;color:var(--buoy);font-weight:700;margin:0 0 6px}
  .sub{font-family:"Helvetica Neue",Arial,sans-serif;font-size:12px;color:var(--ink-soft);text-align:right;line-height:1.5}
  .sub b{color:var(--ink)}

  .toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 0 14px;
    border-bottom:1px solid var(--rule);margin-bottom:20px}
  .lbl{font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;text-transform:uppercase;
    letter-spacing:.16em;color:var(--haze);font-weight:700}
  select,input{font-family:"Helvetica Neue",Arial,sans-serif;font-size:13px;
    border:1px solid var(--rule);background:var(--card);color:var(--ink);padding:6px 9px;border-radius:2px}
  input[type=number]{width:64px}
  select:focus,input:focus{outline:2px solid #3f8fa3;outline-offset:1px}
  button{font-family:"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;
    cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
    padding:7px 13px;border-radius:2px;text-transform:uppercase}
  button.ghost{background:transparent;color:var(--ink)}
  button.ghost:hover{background:var(--ink);color:var(--paper)}
  .grp{display:flex;align-items:center;gap:7px}
  .spacer{flex:1}
  .ovlchips{display:flex;gap:6px;flex-wrap:wrap}
  .chip{display:flex;align-items:center;gap:5px;cursor:pointer;font-family:"Helvetica Neue",Arial,sans-serif;
    font-size:12px;font-weight:700;border:1px solid var(--rule);background:var(--card);
    padding:4px 9px;border-radius:2px;user-select:none}
  .chip input{accent-color:var(--ink);margin:0}
  .chip:has(input:checked){border-color:var(--ink);background:var(--ink);color:var(--paper)}
  .ovl-legend{padding:2px 20px 6px;font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;
    color:var(--ink-soft);letter-spacing:.02em}

  /* tag filter menu */
  .filtermenu{position:relative}
  #filterbtn .badge{display:inline-block;margin-left:6px;background:var(--buoy);color:#fff;
    border-radius:9px;padding:0 6px;font-size:10px;line-height:16px;min-width:16px;text-align:center}
  .filterpanel{position:absolute;top:calc(100% + 6px);left:0;z-index:20;width:max-content;max-width:340px;
    background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:12px;
    box-shadow:0 14px 34px -16px rgba(12,39,51,.5)}
  .filterpanel .fp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
  .seg{display:inline-flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
  .seg button{border:none;border-radius:0;background:var(--card);color:var(--ink-soft);padding:4px 10px}
  .seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
  .fp-clear{font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:.1em;color:var(--buoy);background:none;border:none;
    padding:0;cursor:pointer}
  .fp-facet{margin-top:8px}
  .fp-facet .fp-lbl{font-family:"Helvetica Neue",Arial,sans-serif;font-size:10px;font-weight:700;
    text-transform:uppercase;letter-spacing:.14em;color:var(--haze);margin-bottom:5px}
  .fp-tags{display:flex;gap:6px;flex-wrap:wrap}

  /* season: vertical list of full-width months */
  .mon{background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:16px 16px 18px;
    box-shadow:0 1px 0 var(--paper-line),0 8px 22px -18px var(--shadow);margin-bottom:22px}
  .mtitle{font-size:19px;font-weight:700;padding:0 2px 10px;border-bottom:2px solid var(--ink);margin-bottom:10px}
  .dow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center;
    font-family:"Helvetica Neue",Arial,sans-serif;font-size:10px;letter-spacing:.14em;
    color:var(--haze);font-weight:700;margin-bottom:6px;text-transform:uppercase}
  .mgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
  .cell{position:relative;border-radius:2px;padding:4px 6px 3px;min-height:58px;
    font-family:"Helvetica Neue",Arial,sans-serif;background:#f7f3e8;border:1px solid var(--paper-line);
    display:flex;flex-direction:column}
  .cell.blank{visibility:hidden}
  .cell.off{opacity:.35}
  .cell.live{cursor:pointer}
  .cell.live:hover,.cell.live:focus{outline:2px solid var(--buoy);outline-offset:0;z-index:1}
  .cell .dn{font-size:11px;font-weight:700;color:var(--ink-soft)}
  .cell .mini{margin-top:auto;width:100%;height:40px;display:block}

  /* modal */
  .ovl{position:fixed;inset:0;background:rgba(12,39,51,.45);display:none;
    align-items:flex-start;justify-content:center;padding:4vh 14px;z-index:10;overflow:auto}
  .ovl.open{display:flex}
  .modal{background:var(--card);border:1px solid var(--rule);border-radius:4px;width:min(980px,100%);
    box-shadow:0 24px 60px -20px rgba(12,39,51,.5)}
  .dayhead{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
    padding:16px 20px 12px;border-bottom:1px solid var(--paper-line)}
  .dstamp{font-size:22px;font-weight:700}
  .dstamp span{color:var(--haze);font-weight:400;font-size:16px;margin-left:8px}
  .gauge{font-family:"Helvetica Neue",Arial,sans-serif;font-size:12px;color:var(--ink-soft);text-align:right}
  .gauge b{font-size:19px;color:var(--ink);letter-spacing:-.02em}
  .chartbox{padding:12px 20px 2px}
  .chartbox svg{width:100%;height:auto;display:block}

  /* ship detail blocks: leader lines drop from each ship's arrival on the chart
     down to a block below, latest arrival first (see dayHTML). */
  .shipmap{position:relative;margin:0 20px 16px}
  .sc-rail{position:absolute;top:0;width:2px;margin-left:-1px;background:var(--c);pointer-events:none}
  .scard{position:absolute;right:0;background:var(--card);border:1px solid var(--paper-line);
    border-left:4px solid var(--c);border-radius:3px;padding:7px 11px;
    font-family:"Helvetica Neue",Arial,sans-serif;box-shadow:0 2px 8px -5px var(--shadow)}
  .sc-name{font-size:14px;font-weight:700;color:var(--ink);line-height:1.15;letter-spacing:.01em}
  .sc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;margin-top:5px;font-size:12px}
  .sc-time{font-weight:700;color:var(--c)}
  .sc-pax{color:var(--ink-soft)}
  .sc-berth{margin-top:5px;font-size:11px;color:var(--ink-soft)}
  .sc-tag{background:var(--paper-line);color:var(--ink-soft);font-size:11px;font-weight:700;
    letter-spacing:.06em;padding:1px 6px;border-radius:2px}
  /* ship traits (ships.yaml tags); .on marks one the active filter selected */
  .sc-trait{border:1px solid var(--rule);color:var(--ink-soft);font-size:10px;font-weight:700;
    text-transform:uppercase;letter-spacing:.07em;padding:1px 6px;border-radius:9px;white-space:nowrap}
  .sc-trait.on{border-color:var(--buoy);background:var(--buoy);color:#fff}
  .modalfoot{display:flex;gap:8px;padding:0 20px 16px}
  .empty{padding:22px 20px;color:var(--haze);font-family:"Helvetica Neue",Arial,sans-serif;font-size:14px}

  details.panel{margin:0 0 18px;border:1px solid var(--rule);border-radius:3px;background:var(--card)}
  details.panel summary{cursor:pointer;padding:10px 14px;font-family:"Helvetica Neue",Arial,sans-serif;
    font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft)}
  .panelbody{padding:4px 14px 14px;border-top:1px solid var(--paper-line)}
  table.params{border-collapse:collapse;font-family:"Helvetica Neue",Arial,sans-serif;font-size:12px}
  table.params th,table.params td{padding:5px 10px 5px 0;text-align:left;color:var(--ink-soft)}
  table.params th{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--haze)}
  .hint{font-family:"Helvetica Neue",Arial,sans-serif;font-size:12px;color:var(--ink-soft);margin-top:8px}
  .note{font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;color:var(--haze);
    border-top:1px solid var(--rule);padding-top:14px;line-height:1.6}
  .note b{color:var(--ink-soft)}
  @media(max-width:640px){.sub{text-align:left}.cell{min-height:52px}
    .cell .mini{height:34px}}