/* ---------- the tide: the gauge on the bar (your colour from the left, the enemy's from the right, the water's edge between
   them), its note, the thin line a phone gets under the bar, and the chart on the report ---------- */
#tideBox{display:flex;align-items:center;gap:9px;min-width:0;cursor:default;outline-offset:3px}
#tideBox[hidden]{display:none}
#tideBox small{font:600 9.5px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim);white-space:nowrap}
#tideBox canvas{flex:none;width:clamp(120px,17vw,220px);height:18px;border:1px solid rgba(234,226,204,.32);border-radius:1px;box-shadow:0 1px 0 rgba(0,0,0,.6)}
#tideBox b{font:400 19px/1 var(--f-display);letter-spacing:.06em;white-space:nowrap;min-width:88px;color:var(--paper-dim);text-shadow:0 2px 0 rgba(0,0,0,.45)}
#tideBox b.with{color:var(--paper)} #tideBox b.against{color:var(--alt-2)}
/* (which of the label, the gauge and the word stay on a narrower window is the bar's own decision: css/x.css, js/x-bar.js) */
@media (max-width:720px),(max-height:500px){ #tideBox{display:none} }
#tideStrip{display:none;position:absolute;left:0;right:0;top:var(--bar-h);height:4px;z-index:10;pointer-events:none;background:var(--foe,#777);box-shadow:0 1px 0 rgba(0,0,0,.5)}
#tideStrip i{display:block;height:100%;background:var(--mine,#999);border-right:2px solid #f4eedc;transition:width .6s ease}
@media (max-width:720px),(max-height:500px){ #tideStrip:not([hidden]){display:block} }
#tideTip{position:absolute;z-index:31;top:calc(var(--bar-h) + 8px);width:300px;padding:10px 12px 9px;pointer-events:none}
#tideTip[hidden]{display:none}
#tideTip .th{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:1px dotted var(--hair-2);padding-bottom:6px;margin-bottom:6px}
#tideTip .th b{font:400 22px/1 var(--f-display);letter-spacing:.06em}
#tideTip .th span{font:600 11px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--brass-2)}
#tideTip .note{margin:0 0 6px}
#tideTip .tl{display:grid;gap:2px;margin:0 0 7px;padding:6px 0;border-top:1px dotted var(--hair);border-bottom:1px dotted var(--hair)}
#tideTip .tr{display:grid;grid-template-columns:34px 1fr auto;gap:8px;font:500 12.5px/1.35 var(--f-ui)}
#tideTip .tr .num{font-weight:700;text-align:right} #tideTip .tr.me .num{color:var(--good)} #tideTip .tr.foe .num{color:var(--bad)}
#tideTip .tr .when{color:var(--paper-faint);font-size:11px;white-space:nowrap}
.tideChart h3{margin-bottom:6px}
.tideChart svg{display:block;width:100%;height:auto;border:1px solid var(--hair);background:rgba(255,252,240,.25)}
.tideChart .zero{stroke:var(--hair-2);stroke-width:1;stroke-dasharray:3 3}
.tideChart .ln{fill:none;stroke:var(--paper);stroke-width:1.6;stroke-linejoin:round}
.tideChart .pk{fill:var(--pencil,#ae3322);stroke:#f1e7cd;stroke-width:1.5}