.hp-golden-answer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; margin: 12px 0 16px; border: 1px solid var(--fable-amber); border-radius: 16px; background: color-mix(in srgb, var(--fable-amber) 12%, var(--fable-surface-strong)); color: var(--fable-ink); }
.hp-golden-answer > div { min-width: 0; }
.hp-golden-answer p { display: flex; flex-wrap: wrap; gap: 3px 8px; margin: 0 0 6px; font-size: 13px; font-weight: 700; line-height: 1.5; }
.hp-golden-answer p small { color: var(--fable-muted); font-size: 12px; font-weight: 500; }
.hp-golden-answer strong { display: block; font-size: clamp(26px, 4vw, 34px); letter-spacing: -.02em; font-weight: 800; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hp-golden-answer > div > span { display: block; margin-top: 6px; color: var(--fable-muted); font-size: 12px; }
.hp-golden-answer button { flex: 0 0 auto; min-height: 44px; padding: 8px 12px; border: 1px solid var(--fable-line); border-radius: 10px; background: var(--fable-surface-strong); color: var(--fable-water-strong); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.hp-golden-answer button:focus-visible { outline: 3px solid var(--fable-focus); outline-offset: 3px; }
@media (max-width: 360px) {
.hp-golden-answer { flex-wrap: wrap; gap: 10px; padding: 13px; }
.hp-golden-answer button { margin-left: auto; }
}
.fable-page:has(.home-planner) .home-answer { padding-top: 4px; gap: 8px; }
.fable-page:has(.home-planner) .fable-header { min-height: 64px; }
.fable-page:has(.home-planner) .home-answer-head { display: flex; align-items: center; justify-content: space-between; padding: 0; gap: 8px; min-height: 44px; border: 0; background: transparent; box-shadow: none; }
.fable-page:has(.home-planner) .home-answer-date { font-size: 14px; }
.hp-intro-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.home-planner { min-width: 0; padding: 24px; border: 1px solid var(--fable-line); border-radius: 22px; background: var(--fable-surface-strong); color: var(--fable-ink); }
.hp-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.hp-heading > div { min-width: 0; }
.home-planner .hp-heading :is(h1,h2) { max-width: none; margin: 2px 0 5px; font-size: clamp(28px, 4vw, 40px); line-height: 1.2; }
.hp-heading p { margin: 0; font-size: 14px; color: var(--fable-muted); }
.hp-heading .hp-eyebrow { color: var(--fable-home-date); font-size: 13px; font-weight: 750; }
.hp-mascot { width: 80px; height: 80px; flex: 0 0 80px; object-fit: contain; }
.hp-controls { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--fable-line); }
.home-planner label { font-size: 14px; font-weight: 700; }
.hp-port-control, .hp-date-control { display: grid; min-width: 0; align-content: start; gap: 8px; margin: 0; }
.hp-port-control { grid-template-columns: minmax(0, 1fr) auto; }
.home-planner .hp-search { min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.hp-search summary { display: flex; min-height: 44px; min-width: 44px; align-items: center; cursor: pointer; font-size: 12px; color: var(--fable-water); white-space: nowrap; }
.hp-search summary::after { content: ' ▾'; margin-left: 4px; }
.hp-search[open] { grid-column: 1 / -1; }
.hp-search input { margin-bottom: 4px; }
.home-planner input, .home-planner select, .home-planner button { min-width: 0; min-height: 44px; border: 1px solid var(--fable-line); border-radius: 9px; background: var(--fable-surface-strong); color: var(--fable-ink); padding: 8px 12px; font: inherit; font-size: 14px; }
.home-planner input, .home-planner select { width: 100%; }
.home-planner button { cursor: pointer; white-space: nowrap; }
.home-planner button:hover { background: var(--fable-water-soft); }
.home-planner .hp-select-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hp-port-control small { min-height: 19px; font-size: 12px; color: var(--fable-muted); }
.hp-date-control > div:first-of-type { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.hp-date-control > div:first-of-type button { background: var(--fable-water); color: var(--fable-on-water); font-weight: 700; }
.hp-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.hp-actions a { display: inline-flex; min-height: 44px; align-items: center; color: var(--fable-water); font-size: 14px; text-underline-offset: 3px; }
.hp-feedback { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 12px; }
.hp-feedback[hidden] { display: none; }
.hp-feedback p { margin: 0; font-size: 13px; color: var(--fable-muted); }
.hp-feedback button { flex: 0 0 auto; font-size: 12px; }
.hp-day-title { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; margin-bottom: 16px; }
.home-planner .hp-day-title h2 { margin: 0; font-size: 22px; font-weight: 750; }
.hp-day-title > strong { font-size: 18px; color: var(--fable-home-date); }
.hp-day-title > span { color: var(--fable-muted); font-size: 13px; }
.hp-day-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; }
.hp-tide-answer { padding: 14px 16px; margin-bottom: 12px; border: 1px solid var(--fable-line); border-radius: 12px; background: var(--fable-surface); }
.hp-answer-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; }
.hp-tide-answer .hp-answer-heading h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.hp-answer-heading p { margin: 0; color: var(--fable-muted); font-size: .875rem; }
.hp-answer-heading strong { color: var(--fable-ink); }
.hp-tide-answer .hp-events { gap: 20px; }
.hp-tide-answer .hp-extreme+ .hp-extreme { border-left:1px solid var(--fable-line); padding-left:16px; }
.hp-extreme { padding: 4px 0; background: transparent; border-radius: 0; }
.hp-extreme dt { display: flex; align-items: center; gap: 8px; }
.hp-extreme .sea-icon { width: 22px; height: 22px; color: var(--fable-water); }
.hp-tide-answer .hp-events dt { font-size: .875rem; color: var(--fable-muted); }
.hp-tide-answer .hp-events dd { margin: 6px 0 0; gap: 6px; }
.hp-tide-answer .hp-events dd > span { gap: 2px 6px; font-size: 1.5rem; line-height: 1.3; }
.hp-tide-answer .hp-events time { color: var(--fable-ink); font-weight: 750; }
.hp-tide-answer .hp-events small { font-size: .8125rem; }
.hp-tide-answer .hp-events .hp-answer-missing { font-size: 1rem; font-weight: 500; color: var(--fable-muted); }
.hp-tide-answer .hp-answer-basis { margin: 10px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--fable-muted); overflow-wrap: anywhere; }
.hp-answer-basis > span { display: block; color: var(--fable-ink); }
.hp-change-label { font-size: .875rem; font-weight: 600; color: var(--fable-water); margin-inline-start: 8px; }
.ptl-interaction-hint { margin: 2px 0 8px; font-size: .8125rem; line-height: 1.5; color: var(--fable-muted); }
.hp-tides, .hp-marine { min-width: 0; }
.home-planner h3 { margin: 0 0 12px; font-size: 16px; }
.hp-events { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.hp-events dt { font-size: 14px; font-weight: 700; white-space: nowrap; }
.hp-events dd { display: grid; gap: 4px; margin: 6px 0 0; }
.hp-events dd > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 22px; font-weight: 750; }
.hp-events time { white-space: nowrap; }
.hp-events small { color: var(--fable-muted); font-size: 12px; font-weight: 500; }
.hp-timeline { display: block; width: 100%; height: auto; margin: 8px 0; overflow: visible; }
.hp-timeline path { fill: none; stroke: var(--fable-line); }
.hp-timeline .hp-high { fill: var(--fable-home-date); }
.hp-timeline .hp-low { fill: var(--fable-ink); }
.hp-timeline text { fill: var(--fable-muted); font-family: inherit; font-size: 18px; }
.hp-next { margin: 4px 0 8px; font-size: 14px; }
.hp-tide-range { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; color: var(--fable-muted); font-size: 13px; }
.hp-tide-range strong { margin-left: 6px; color: var(--fable-ink); font-size: 22px; font-variant-numeric: tabular-nums; }
.hp-tide-range small { font-size: 12px; }
.hp-range-comparison { display: grid; justify-items: end; gap: 3px; }
.hp-range-comparison meter { width: 112px; height: 12px; accent-color: var(--fable-home-date); }
.home-planner .hp-disclosure { margin: 8px 0 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.hp-disclosure > summary { display: flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; color: var(--fable-water); font-size: 14px; line-height: 1.5; list-style: none; }
.hp-disclosure > summary::before { content: '+'; flex: 0 0 auto; }
.hp-disclosure[open] > summary::before { content: '−'; }
.hp-disclosure > summary:focus-visible { outline: 2px solid var(--fable-water); outline-offset: 3px; border-radius: 4px; }
.hp-disclosure > summary::-webkit-details-marker { display: none; }
.hp-disclosure > .hp-facts { margin: 4px 0 12px; }
.home-planner .hp-data-state { margin: 0 0 12px; }
.hp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.hp-facts > div { min-width: 0; border-top: 2px solid var(--fable-line); padding-top: 8px; }
.hp-facts dt { color: var(--fable-muted); font-size: 13px; white-space: nowrap; }
.hp-facts dd { margin: 4px 0; font-size: 19px; font-weight: 750; line-height: 1.4; white-space: nowrap; }
.hp-facts small { display: block; color: var(--fable-muted); font-size: 12px; line-height: 1.5; }
.hp-range { display: block; width: 100%; max-width: 148px; height: auto; margin: 3px 0 6px; overflow: visible; }
.hp-range-axis { stroke: var(--fable-line); stroke-width: 1; }
.hp-range-span { stroke: var(--fable-home-date); stroke-width: 5; stroke-linecap: round; }
.hp-range.is-remote .hp-range-span { stroke-dasharray: 3 5; }
.hp-range circle { fill: var(--fable-ink); stroke: var(--fable-surface-strong); stroke-width: 1; }
.hp-range text { fill: var(--fable-muted); font: 16px sans-serif; }
.home-planner .hp-note { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: var(--fable-muted); overflow-wrap: anywhere; }
.hp-calendar-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--fable-line); }
.hp-calendar-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-planner .hp-calendar-heading h2 { margin: 0; font-size: 20px; line-height: 1.4; }
.hp-calendar-heading label { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.hp-calendar-heading select { width: auto; }
.hp-calendar { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 18px; }
.hp-calendar caption { text-align: left; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.hp-calendar th { padding: 6px 0; font-size: 13px; color: var(--fable-muted); }
.hp-calendar td { padding: 2px; vertical-align: top; }
.home-planner .hp-calendar button { display: grid; align-content: start; gap: 3px; width: 100%; min-height: 88px; padding: 8px; text-align: left; border-color: transparent; background: var(--fable-surface-soft); }
.hp-calendar button > strong { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px; font-size: 16px; }
.hp-calendar button > span, .hp-calendar button > small { font-size: 12px; line-height: 1.4; white-space: nowrap; }
.hp-calendar button > small { color: var(--fable-muted); }
.hp-calendar .hp-today { font-size: 12px; color: var(--fable-home-date); }
.home-planner .hp-calendar [aria-pressed="true"] { border: 2px solid var(--fable-water); background: var(--fable-water-soft); }
.fable-page .home-answer .hp-quick-title { margin: 10px 0 -6px; font-size: 18px; }
.fable-page:has(.home-planner) .home-port-list { box-shadow: none; }
.fable-page:has(.home-planner) .home-port-link { min-height: 118px; gap: 8px; padding: 16px; align-content: start; }
.fable-page:has(.home-planner) .home-port-name { font-size: 18px; }
.fable-page:has(.home-planner) .home-port-tide strong { font-size: 18px; }
.fable-page:has(.home-planner) .home-port-tide-meta, .fable-page:has(.home-planner) .home-port-location, .fable-page:has(.home-planner) .home-port-mul { font-size: 12px; }
@media (max-width: 1000px) {
.hp-day-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.hp-timeline { max-height: 132px; }
.fable-page:has(.home-planner) .home-port-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.fable-page:has(.home-planner) .home-answer-context { display: none; }
.home-planner { padding: 12px; border-radius: 16px; }
.hp-controls { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
.hp-heading { gap: 8px; }
.home-planner .hp-heading h1 { font-size: 28px; }
.hp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.hp-facts dd { font-size: 20px; }
.hp-calendar-heading { align-items: start; flex-direction: column; }
.home-planner .hp-calendar-heading h2 { font-size: 18px; }
.hp-calendar td { padding: 1px; }
.home-planner .hp-calendar button { padding: 6px 0; min-height: 90px; border-radius: 6px; }
.hp-calendar button > strong { flex-direction: column; font-size: 15px; }
.hp-calendar button > span { letter-spacing: -.025em; }
}
@media (max-width: 360px) {
.hp-mascot { display: none; }
.home-planner { margin-inline: -16px; padding-inline: 6px; border-inline: 0; border-radius: 0; }
.hp-calendar td { padding-inline: 0; }
.hp-date-control > div:first-of-type { gap: 5px; }
}
.hp-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hp-location-options { margin: 0 0 8px; }
.hp-location-options > summary { width: fit-content; font-weight: 700; }
.hp-location-options[open] { padding-bottom: 8px; }
.hp-location-options .hp-controls { padding: 8px 0 0; margin: 0; border: 0; }
.hp-essential { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 20px; margin-bottom: 16px; }
.hp-essential .hp-events { margin: 0; }
.hp-essential .hp-events dd { gap: 6px; margin: 6px 0 0; }
.hp-essential .hp-events dd span { font-size: 23px; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.hp-essential .hp-events dd small { font-size: 12px; font-weight: 500; color: var(--fable-muted); }
.hp-essential .hp-events dt { font-size: 13px; }
.hp-essential .hp-next { margin: 8px 0 0; font-size: 12px; }
.hp-essential .hp-station { margin: 4px 0 0; font-size: 12px; }
.hp-essential .hp-tide-source { margin-top: 0; }
.hp-essential .hp-tide-source > summary { min-height: 36px; font-size: 12px; }
.hp-sea-answer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.hp-sea-answer > div { padding: 0; border: 0; min-width: 0; }
.hp-sea-answer dt { font-size: 13px; }
.hp-sea-answer dd { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.hp-sea-answer > div > small { font-size: 12px; }
.hp-sea-answer .hp-range { max-width: 100%; height: 40px; margin-top: 0; }
.hp-day-title { margin-top: 8px; margin-bottom: 14px; }
.hp-day-title h2 { font-size: 18px; }
.hp-day-title > strong { margin-left: auto; padding: 4px 10px; border-radius: 8px; background: var(--fable-water-soft); color: var(--fable-water); font-size: 17px; }
.hp-week-reference .squid-visuals { margin-top: 12px; }
.hp-more-weather { margin-top: 8px; }
@media (max-width: 600px) {
.hp-essential { grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
.hp-essential .hp-tides { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; }
.hp-essential .hp-events { grid-column: 1 / -1; }
.hp-essential .hp-events dd { display: flex; flex-wrap: wrap; column-gap: 12px; }
.hp-essential .hp-events dd span { display: inline-flex; gap: 4px; font-size: 21px; }
.hp-essential .hp-station { grid-column: 1; }
.hp-essential .hp-tide-source { grid-column: 2; grid-row: 2 / 4; align-self: center; }
.hp-essential .hp-tide-source[open] { grid-column: 1 / -1; grid-row: auto; }
.hp-sea-answer { border-top: 1px solid var(--fable-line); padding-top: 8px; }
.hp-sea-answer > div { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; }
.hp-sea-answer dd { font-size: 20px; }
.hp-sea-answer .hp-range { grid-column: 1 / -1; width: 100%; max-width: 160px; height: 30px; }
.hp-sea-answer > div > small { grid-column: 1 / -1; }
.hp-heading { margin-bottom: 0; }
.hp-heading .hp-eyebrow { display: none; }
.hp-heading .hp-mascot { display: block; width: 58px; height: 58px; flex-basis: 58px; }
.home-planner .hp-heading h1 { font-size: 28px; }
.hp-day-title { margin-block: 4px 12px; }
}
.hp-official-index > summary { font-weight: 700; color: var(--fable-water); }
.hp-official-index > summary > small { margin-left: 6px; font-size: 12px; color: var(--fable-muted); font-weight: 400; }
.hp-index-point { font-size: 13px; margin: 8px 0; color: var(--fable-muted); }
.hp-index-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.hp-index-table th, .hp-index-table td { text-align: left; padding: 9px 4px; border-bottom: 1px solid var(--fable-line); }
.hp-index-table thead th { color: var(--fable-muted); font-size: 12px; font-weight: 500; }
.hp-index-grade { display: inline-flex; flex-direction: column; gap: 5px; }
.hp-index-grade b { font-size: 13px; }
.hp-index-dots { display: flex; gap: 3px; }
.hp-index-dots i { display: block; width: 12px; height: 6px; border-radius: 3px; background: var(--fable-surface-soft); border: 1px solid var(--fable-line); }
.hp-index-dots .is-on { background: var(--fable-water); border-color: var(--fable-water); }
@media (max-width: 600px) {
.hp-calendar button > .hp-grade { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; padding: 2px 1px; font-size: 12px; line-height: 1.25; }
.hp-calendar button > * { min-width: 0; }
}
@media (max-width: 360px) {
.hp-sea-answer > div { grid-template-columns: minmax(0, 1fr); }
.hp-sea-answer dd { white-space: nowrap; }
}
.pinned-timeline {
--ptl-accent: var(--fable-current-marker, var(--fable-water));
min-width: 0;
color: var(--fable-ink);
font-variant-numeric: tabular-nums;
}
.pinned-timeline *, .pinned-timeline *::before, .pinned-timeline *::after { box-sizing: border-box; }
.pinned-timeline button, .pinned-timeline input, .pinned-timeline summary { font: inherit; }
.pinned-timeline button {
min-height: 44px;
padding: 8px 12px;
border: 1px solid var(--fable-line);
border-radius: 12px;
background: var(--fable-surface-strong);
color: var(--fable-ink);
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.pinned-timeline button:disabled { cursor: default; opacity: .5; }
.pinned-timeline button:hover:not(:disabled) { background: var(--fable-water-soft); }
.pinned-timeline :is(button, input, summary):focus-visible { outline: 2px solid var(--fable-water); outline-offset: 3px; }
.pinned-timeline .ptl-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pinned-timeline .ptl-heading h3 { margin: 0 0 2px; font-size: 18px; line-height: 1.3; }
.pinned-timeline small { font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--fable-muted); }
.pinned-timeline .ptl-heading button { color: var(--fable-water); white-space: nowrap; }
.pinned-timeline .ptl-golden {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 12px;
margin-top: 14px;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--ptl-accent) 50%, var(--fable-surface-strong));
border-radius: 14px;
background: color-mix(in srgb, var(--ptl-accent) 9%, var(--fable-surface-strong));
}
.pinned-timeline .ptl-golden strong { display: block; font-size: 14px; }
.pinned-timeline .ptl-golden strong small { display: inline-block; margin-left: 4px; color: var(--ptl-accent); }
.pinned-timeline .ptl-golden span { display: block; margin-top: 3px; color: var(--ptl-accent); font-size: 20px; font-weight: 800; }
.pinned-timeline .ptl-golden span small { display: block; }
.pinned-timeline .ptl-golden button { flex-shrink: 0; }
.pinned-timeline .ptl-controls {
display: grid;
grid-template-columns: calc(50% - 36px) 100px minmax(0, 1fr);
align-items: center;
gap: 0;
margin: 14px 0 6px;
min-height: 64px;
}
.pinned-timeline .ptl-controls > button:first-child { justify-self: start; }
.pinned-timeline .ptl-controls > button:last-child { justify-self: end; }
.pinned-timeline .ptl-clock { position: relative; min-width: 0; text-align: center; z-index: 2; border: 0; padding: 0; margin: 0; background: transparent; box-shadow: none; }
.pinned-timeline .ptl-clock summary { list-style: none; cursor: pointer; border-radius: 10px; padding: 3px; }
.pinned-timeline .ptl-clock summary::-webkit-details-marker { display: none; }
.pinned-timeline .ptl-clock time { display: block; color: var(--ptl-accent); font-size: 30px; line-height: 1.1; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pinned-timeline .ptl-clock summary small { display: block; margin-top: 3px; }
.pinned-timeline .ptl-clock label {
position: absolute;
top: calc(100% + 8px);
left: 50%;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 8px;
width: 192px;
padding: 12px;
border: 1px solid var(--fable-line);
border-radius: 12px;
background: var(--fable-surface-strong);
font-size: 13px;
transform: translateX(-50%);
}
.pinned-timeline .ptl-clock input { min-width: 0; width: 100%; min-height: 44px; color: var(--fable-ink); background: var(--fable-surface-soft); border: 1px solid var(--fable-line); border-radius: 8px; padding: 4px; }
.pinned-timeline .ptl-stage { min-width: 0; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.pinned-timeline .ptl-stage.is-dragging { cursor: grabbing; }
.pinned-timeline .ptl-lane { min-width: 0; margin: 0; padding: 0; }
.pinned-timeline .ptl-lane + .ptl-lane { margin-top: 8px; }
.pinned-timeline .ptl-lane > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.pinned-timeline .ptl-lane h4 { font-size: 14px; margin: 0; }
.pinned-timeline .ptl-value { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 2px 8px; text-align: right; }
.pinned-timeline .ptl-value strong { font-size: 22px; font-weight: 800; line-height: 1.1; }
.pinned-timeline .ptl-value strong small { margin-left: 3px; }
.pinned-timeline [data-ptl-lane] { min-width: 0; }
.pinned-timeline [data-ptl-lane] > svg { display: block; width: 100%; height: auto; overflow: hidden; }
.pinned-timeline svg text { font-family: inherit; font-size: 12px; fill: var(--fable-muted); }
.pinned-timeline .ptl-plot { overflow: hidden; }
.pinned-timeline .ptl-event { font-weight: 700; fill: var(--fable-ink); }
.pinned-timeline .ptl-baseline { stroke: var(--fable-line); stroke-width: 1; opacity: .5; }
.pinned-timeline .ptl-golden-band { fill: var(--ptl-accent); opacity: .13; }
.pinned-timeline .ptl-golden-edge { stroke: var(--ptl-accent); stroke-width: 3; opacity: .8; }
.pinned-timeline .ptl-night { fill: var(--fable-ink); opacity: .055; }
.pinned-timeline .ptl-area { fill: var(--fable-water-soft); opacity: .8; }
.pinned-timeline .ptl-curve { fill: none; stroke: var(--fable-water); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pinned-timeline .ptl-curve-dot, .pinned-timeline .ptl-bar { fill: var(--fable-water); }
.pinned-timeline .ptl-bar { opacity: .75; }
.pinned-timeline .ptl-pin { stroke: var(--ptl-accent); stroke-width: 2; }
.pinned-timeline .ptl-pin-dot { fill: var(--fable-surface-strong); stroke: var(--ptl-accent); stroke-width: 2.5; }
.pinned-timeline .ptl-hint { margin: 8px 0; font-size: 12px; text-align: center; color: var(--fable-muted); }
.pinned-timeline .ptl-weather-icon { fill: none; stroke: var(--fable-water); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.pinned-timeline .ptl-selected-weather { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; margin-inline: 28px 0; text-align: center; }
.pinned-timeline .ptl-selected-weather > svg { width: 28px; height: 28px; flex: 0 0 28px; }
.pinned-timeline .ptl-selected-weather > span { min-width: 0; }
.pinned-timeline .ptl-selected-weather strong { display: block; font-size: 14px; line-height: 1.5; }
.pinned-timeline .ptl-selected-weather small { display: block; }
.pinned-timeline .ptl-weather-missing, .pinned-timeline .ptl-solar-missing { font-size: 12px; color: var(--fable-muted); }
.pinned-timeline .ptl-weather-hour { pointer-events: none; }
.pinned-timeline .ptl-weather-time { font-size: 12px; }
.pinned-timeline .ptl-weather-pop { fill: var(--fable-water); font-weight: 700; }
.pinned-timeline .ptl-solar { width: 100%; max-width: 320px; margin: 6px auto 10px; font-size: 12px; color: var(--fable-muted); }
.pinned-timeline .ptl-solar > svg { display: block; width: 100%; height: auto; overflow: visible; }
.pinned-timeline .ptl-solar-times { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding-inline: 10px; }
.pinned-timeline .ptl-solar-times span { white-space: nowrap; }
.pinned-timeline .ptl-solar time { color: var(--fable-ink); font-weight: 700; }
.pinned-timeline .ptl-solar-horizon { fill: none; stroke: var(--fable-line); stroke-width: 1; }
.pinned-timeline .ptl-solar-arc { fill: none; stroke: var(--fable-water); stroke-width: 1.5; stroke-dasharray: 3 4; }
.pinned-timeline .ptl-solar-event { fill: var(--fable-water); }
.pinned-timeline .ptl-solar-halo { fill: var(--fable-surface-strong); stroke: var(--fable-line); stroke-width: 1; }
.pinned-timeline .ptl-solar-selected .ptl-weather-icon { stroke: var(--ptl-accent); }
.pinned-timeline .ptl-solar-missing { text-align: center; margin: 8px 0; }
.pinned-timeline .ptl-source { margin: 10px 0 8px; color: var(--fable-muted); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.pinned-timeline .ptl-empty { padding: 20px 0; text-align: center; font-size: 14px; color: var(--fable-muted); }
.pinned-timeline .ptl-disclaimer { border-top: 1px solid var(--fable-line); }
.pinned-timeline .ptl-disclaimer summary { min-height: 44px; padding: 12px 0; color: var(--fable-muted); font-size: 12px; cursor: pointer; }
.pinned-timeline .ptl-disclaimer p { margin: 0 0 10px; color: var(--fable-muted); font-size: 13px; line-height: 1.65; }
.pinned-timeline .ptl-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 360px) {
.pinned-timeline .ptl-controls > button { padding: 8px; font-size: 12px; }
.pinned-timeline .ptl-clock time { font-size: 26px; }
.pinned-timeline .ptl-value { gap: 2px 5px; }
}
@media (prefers-reduced-motion: reduce) {
.pinned-timeline *, .pinned-timeline *::before, .pinned-timeline *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.fable-page .hp-start-paths { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; width:100%; padding:4px 0 12px; }
.fable-page .hp-start-paths .home-planner-cta { justify-self:start; width:auto; min-height:52px; margin:0; padding:12px 18px; border-radius:12px; background:var(--fable-water); color:var(--fable-on-water); font-size:16px; line-height:1.4; font-weight:700; word-break:keep-all; }
.fable-page .hp-start-secondary { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding:8px 12px; color:var(--fable-water); font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; }
.fable-page .hp-start-paths a:focus-visible { outline:3px solid var(--fable-focus); outline-offset:3px; }
.fable-page .home-planner :is(input,select,button) { border-radius:12px; }
.fable-page .home-planner .hp-date-control button { background:var(--fable-surface-strong); color:var(--fable-water); }
.fable-page .home-planner .hp-day-title { scroll-margin-top:16px; }
.fable-page .pathways .section-heading h2,
.fable-page .ports-section .section-heading h2 { font-size:clamp(24px,4vw,32px); font-weight:800; letter-spacing:0; line-height:1.3; }
@media(max-width:640px) {
.fable-page .hp-start-paths { grid-template-columns:1fr 1fr; gap:4px 12px; }
.fable-page .hp-start-paths .home-planner-cta { grid-column:1/-1; justify-self:stretch; text-align:center; justify-content:center; font-size:15px; }
.fable-page .hp-start-secondary { padding:6px; min-height:44px; }
}
.pinned-timeline .ptl-solar { max-width: none; margin: 5px 0 10px; }
.pinned-timeline .ptl-solar-times { min-height: 32px; padding: 0; }
.pinned-timeline .ptl-day-phase { display: inline-flex; align-items: center; gap: 5px; }
.pinned-timeline .ptl-day-phase svg { width: 22px; height: 22px; }
.pinned-timeline .ptl-tide-event circle { fill: var(--fable-surface-strong); stroke: var(--fable-water-strong); stroke-width: 2; }
.pinned-timeline .ptl-tide-high circle { stroke: var(--ptl-accent); }
.pinned-timeline .ptl-tide-event text { font-size: 12px; font-weight: 700; paint-order: stroke; stroke: var(--fable-surface-strong); stroke-width: 3px; stroke-linejoin: round; }
.pinned-timeline .ptl-lane-wind > header, .pinned-timeline .ptl-lane-rain > header { min-height: 34px; }
.pinned-timeline .ptl-lane-wind .ptl-value strong, .pinned-timeline .ptl-lane-rain .ptl-value strong { font-size: 18px; }
.pinned-timeline .ptl-lane-wind h4, .pinned-timeline .ptl-lane-rain h4 { font-size: 13px; }
.pinned-timeline .ptl-lane-rain .ptl-bar { fill: var(--fable-water); opacity: .7; }
.pinned-timeline .ptl-disclaimer summary { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--fable-line); border-radius: 50%; font-size: 20px; list-style: none; }
.pinned-timeline .ptl-disclaimer summary::-webkit-details-marker { display: none; }
.pinned-timeline .ptl-disclaimer { padding-top: 8px; border: 0; }
.pinned-timeline .ptl-disclaimer summary:focus-visible { outline: 3px solid var(--fable-focus); outline-offset: 3px; }
.ptl-event-leader { fill: none; stroke: var(--fable-muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: .65; }
.fable-page .home-answer-head.hp-screen-reader { position: absolute; width: 1px; height: 1px; min-height: 0; overflow: hidden; clip-path: inset(50%); }
.fable-page .hp-start-paths.ceph-home-paths { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 0 0 4px; }
.fable-page .ceph-entry-paths { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.fable-page .ceph-entry-paths a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 6px 10px; border: 1px solid var(--fable-line); border-radius: 12px; background: var(--fable-surface); color: var(--fable-ink); text-decoration: none; box-shadow: none; }
.fable-page .ceph-entry-paths a svg { width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: var(--fable-water); stroke-width: 2; }
.fable-page .ceph-entry-paths a strong { font-size: 14px; line-height: 1.35; }
.home-tools-more { position: relative; padding: 0; border: 0; background: transparent; }
.home-tools-more > summary { display: flex; min-width: 44px; min-height: 48px; align-items: center; justify-content: center; color: var(--fable-muted); font-size: 13px; cursor: pointer; }
.home-tools-more .ceph-plan-paths { position: absolute; z-index: 6; right: 0; top: 100%; display: grid; min-width: 155px; gap: 4px; padding: 8px; border: 1px solid var(--fable-line); border-radius: 12px; background: var(--fable-surface-strong); box-shadow: var(--fable-shadow); }
.fable-page .home-tools-more .ceph-plan-paths a { display: flex; justify-content: center; min-height: 44px; margin: 0; padding: 8px 12px; font-size: 14px; }
.hp-heading .home-location-button { margin-left: auto; flex-shrink: 0; }
@media(max-width: 430px) { .hp-heading .hp-mascot { width: 54px; height: 54px; flex-basis: 54px; } .fable-page .ceph-entry-paths a { padding: 6px; gap: 5px; } .fable-page .ceph-entry-paths a strong { font-size: 13px; } }
.hp-brief-layout { display: grid; gap: 20px; min-width: 0; margin-bottom: 12px; }
.hp-brief-summary { min-width: 0; }
.hp-brief-layout .hp-day-title { margin: 0 0 12px; min-height: 32px; }
.hp-brief-layout .hp-day-title h2 { font-size: 17px; text-wrap: balance; }
.hp-brief-layout .hp-day-title > strong { flex: 0 0 auto; white-space: nowrap; font-size: 15px; }
.hp-brief-layout .hp-golden-answer { display: block; padding: 14px; margin: 0 0 16px; border: 0; background: var(--fable-water-soft); box-shadow: inset 3px 0 var(--fable-water); }
.hp-brief-layout .hp-golden-answer p { margin: 0 0 4px; gap: 4px 8px; line-height: 1.5; }
.hp-brief-layout .hp-golden-answer p small { white-space: nowrap; }
.hp-golden-readout { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hp-brief-layout .hp-golden-answer strong { font-size: clamp(23px, 2.5vw, 30px); color: var(--fable-ink); }
.hp-brief-layout .hp-golden-answer button { margin: 0; padding: 8px; border: 0; background: transparent; color: var(--fable-water-strong); white-space: nowrap; }
.hp-brief-layout .hp-golden-answer button:hover { background: var(--fable-surface); }
.hp-day-range { margin-top: 8px; }
.hp-day-track { position: relative; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--fable-ink) 9%, transparent); }
.hp-day-track i { position: absolute; display: block; }
.hp-daylight-band { top: 4px; height: 6px; background: var(--fable-surface-strong); }
.hp-golden-band { top: 0; height: 14px; border-radius: 3px; background: var(--fable-water); }
.hp-low-marker { top: -3px; width: 2px; height: 20px; background: var(--fable-ink); }
.hp-day-hours { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; line-height: 1.3; color: var(--fable-muted); font-variant-numeric: tabular-nums; }
.hp-brief-layout .hp-golden-meta { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; }
.hp-brief-layout .hp-golden-meta > span { display: inline; margin: 0; font-size: 12px; line-height: 1.5; }
.hp-brief-layout [data-golden-clock] { color: var(--fable-water-strong); white-space: nowrap; }
.hp-brief-layout .hp-essential { grid-template-columns: 1fr; gap: 12px; margin: 0; }
.hp-brief-layout .hp-tides { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-width: 0; }
.hp-brief-layout .hp-brief-events { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; flex-basis: 100%; width: 100%; margin: 0 0 8px; }
.hp-brief-layout .hp-tide-event { min-width: 0; padding: 8px 2px; text-align: center; border-bottom: 2px solid var(--fable-line); }
.hp-brief-layout .hp-tide-event.is-high { border-bottom-color: var(--fable-water); }
.hp-brief-layout .hp-tide-event dt { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--fable-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.hp-tide-event svg { width: 32px; height: 20px; fill: none; stroke: var(--fable-water); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hp-brief-layout .hp-tide-event dd { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 6px 0 0; }
.hp-brief-layout .hp-tide-event dd time, .hp-brief-layout .hp-tide-event dd > span { font-size: clamp(18px, 2vw, 23px); line-height: 1.3; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.hp-brief-layout .hp-tide-event dd small { font-size: 12px; font-weight: 400; }
.hp-brief-layout .hp-next { margin: 0; white-space: nowrap; }
.hp-brief-layout .hp-station { flex: 1 1 auto; margin: 0; overflow-wrap: anywhere; }
.hp-brief-layout .hp-essential .hp-tide-source { margin: 0 0 0 auto; }
.hp-brief-layout .hp-essential .hp-tide-source > summary { min-height: 44px; padding: 8px 0; }
.hp-brief-layout .hp-essential .hp-tide-source[open] { flex-basis: 100%; }
.hp-brief-layout .hp-sea-answer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border: 0; padding: 0; }
.hp-brief-layout .hp-sea-answer > div { display: block; padding: 12px; border: 0; border-radius: 12px; background: var(--fable-surface-soft); }
.hp-brief-layout .hp-sea-answer dt { color: var(--fable-muted); font-size: 13px; }
.hp-brief-layout .hp-sea-answer dd { margin: 4px 0; font-size: clamp(18px, 2vw, 23px); line-height: 1.4; letter-spacing: -.03em; white-space: normal; overflow-wrap: anywhere; }
.hp-brief-layout .hp-sea-answer .hp-range { display: block; width: 100%; max-width: 100%; height: auto; margin: 4px 0 0; }
.hp-range-labels { display: flex; justify-content: space-between; margin: 0 4px 6px; color: var(--fable-muted); font-size: 12px; line-height: 1.5; }
.hp-brief-layout .hp-sea-answer > div > small { margin-top: 2px; }
.hp-brief-layout > .pinned-timeline { padding-top: 16px; border-top: 1px solid var(--fable-line); scroll-margin-top: 80px; }
.hp-brief-layout .ptl-heading h3 { font-size: 16px; }
.hp-brief-layout .ptl-controls { margin-top: 8px; }
.hp-brief-layout .ptl-hint { margin: 6px 0; }
.hp-brief-layout .ptl-source { display: inline-block; margin: 4px 0; }
.hp-brief-layout .ptl-disclaimer { display: inline-block; margin-left: 8px; border: 0; vertical-align: middle; }
.hp-brief-layout .ptl-disclaimer > summary { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; font-size: 16px; }
.hp-brief-layout .ptl-disclaimer[open] { display: block; margin-left: 0; }
.hp-brief-layout .ptl-disclaimer[open] > summary { justify-content: flex-start; }
.home-planner .hp-heading .hp-eyebrow { display: none; }
.home-planner .hp-heading h1 { font-size: clamp(28px, 3vw, 34px); text-wrap: balance; }
.home-planner .hp-heading .hp-mascot { width: 56px; height: 56px; flex-basis: 56px; }
.home-planner .hp-location-options { margin-bottom: 12px; }
.home-planner .hp-actions #homePortDetail { padding: 8px 14px; border-radius: 10px; background: var(--fable-water); color: var(--fable-on-water); text-decoration: none; font-weight: 700; }
.home-planner .hp-actions #homePlannerShare, .home-planner .hp-actions #homePlannerRetry { border-color: transparent; background: transparent; }
@media (min-width: 960px) {
.hp-brief-layout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.hp-brief-layout > .pinned-timeline { padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--fable-line); }
.hp-brief-layout .hp-sea-answer > div { padding: 14px; }
}
@media (max-width: 360px) {
.hp-brief-layout { gap: 16px; }
.hp-brief-layout .hp-golden-answer { padding: 12px; }
.hp-brief-layout .hp-golden-answer strong { font-size: 23px; }
.hp-brief-layout .hp-golden-answer button { font-size: 12px; padding: 6px; }
.hp-brief-layout .hp-sea-answer { gap: 8px; }
.hp-brief-layout .hp-sea-answer > div { padding: 10px; }
}
:root:has(.home-canvas-page),
:root[data-fable-scheme="light"]:has(.home-canvas-page) {
--fable-sky-top: #e4f3f0;
--fable-sky-mid: #f6f5f2;
--fable-sky-bottom: #f6f5f2;
--fable-text: #191f1d;
--fable-muted: #4d575b;
--fable-surface: #ffffff;
--fable-surface-strong: #ffffff;
--fable-surface-soft: #eeefec;
--fable-line: #d8dedb;
--fable-water: #0f766e;
--fable-water-strong: #0f766e;
--fable-water-soft: #e4f3f0;
--fable-home-date: #0f766e;
--fable-current-marker: #0f766e;
--fable-focus: #0f766e;
}
:root[data-fable-scheme="dark"]:has(.home-canvas-page) {
--fable-sky-top: #193832;
--fable-sky-mid: #17201d;
--fable-sky-bottom: #101715;
--fable-text: #f3f7f5;
--fable-muted: #aebab5;
--fable-surface: #17201d;
--fable-surface-strong: #17201d;
--fable-surface-soft: #202b27;
--fable-line: #35433e;
--fable-water: #5eead4;
--fable-water-strong: #5eead4;
--fable-water-soft: #193832;
--fable-home-date: #5eead4;
--fable-current-marker: #5eead4;
--fable-focus: #5eead4;
}
.home-canvas-page .fable-shell { padding-inline: clamp(16px, 4vw, 40px); }
:root .home-canvas-page .site-header { margin-bottom: 4px; }
.home-canvas-page .hp-start-paths.ceph-home-paths { gap: 8px; margin-bottom: 4px; padding: 0; }
.home-canvas-page .ceph-entry-paths { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; width: 100%; }
.home-canvas-page .hp-start-paths .ceph-entry-paths a { flex-direction: column; justify-content: center; gap: 5px; min-height: 64px; padding: 8px 2px; background: transparent; border: 0; border-radius: 12px; }
.home-canvas-page .ceph-entry-paths .ceph-entry-water { color: var(--fable-water); background: var(--fable-surface-soft); box-shadow: inset 0 -2px var(--fable-water); }
.home-canvas-page .ceph-entry-paths a strong { font-size: 13px; white-space: nowrap; }
.home-canvas-page .ceph-entry-paths a svg { width: 20px; height: 20px; flex-basis: 20px; }
.home-canvas-page .home-journey-intro { padding:12px 0 14px; }
.home-canvas-page .home-journey-intro p { margin:0 0 4px; color:var(--fable-water); font-size:13px; font-weight:750; }
.home-canvas-page .home-journey-intro h1 { max-width:760px; margin:0; font-size:clamp(23px,3.3vw,37px); line-height:1.3; letter-spacing:-.045em; word-break:keep-all; }
.home-canvas-page .home-journey-intro span { display:block; margin-top:6px; color:var(--fable-muted); font-size:14px; }
.home-canvas-page .ceph-entry-paths { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.home-canvas-page .hp-start-paths .ceph-entry-paths a { align-items:flex-start; min-height:78px; padding:12px 14px; border:1px solid var(--fable-line); border-radius:12px; background:var(--fable-surface); text-align:left; }
.home-canvas-page .ceph-entry-paths a strong { font-size:15px; white-space:normal; line-height:1.35; }
.home-canvas-page .ceph-entry-paths a span { color:var(--fable-muted); font-size:12px; line-height:1.4; }
.home-canvas-page .hp-start-paths .ceph-entry-paths a.ceph-entry-water { background:var(--fable-surface-soft); border-color:var(--fable-water); box-shadow:none; }
.home-canvas-page #homePlanner { scroll-margin-top:12px; }
@media(max-width:700px) { .home-canvas-page .ceph-entry-paths { grid-template-columns:1fr; } .home-canvas-page .hp-start-paths .ceph-entry-paths a { min-height:58px; padding:10px 14px; gap:2px; } }
.home-canvas-page .home-stage-preview { padding:20px 0; border-top:1px solid var(--fable-line); }
.home-canvas-page .home-stage-preview p { margin:0; color:var(--fable-water); font-size:13px; font-weight:750; }
.home-canvas-page .home-stage-preview h2 { margin:4px 0; font-size:25px; }
.home-canvas-page .home-stage-preview span { color:var(--fable-muted); font-size:13px; }
.home-canvas-page .home-stage-preview ol { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:18px 0 0; padding:0; list-style:none; counter-reset:stage; }
.home-canvas-page .home-stage-preview li { counter-increment:stage; }
.home-canvas-page .home-stage-preview li a { display:flex; min-height:100px; flex-direction:column; gap:5px; padding:12px; border:1px solid var(--fable-line); border-radius:12px; background:var(--fable-surface); text-decoration:none; color:var(--fable-ink); font-weight:700; }
.home-canvas-page .home-stage-preview li a::before { content:'0' counter(stage); color:var(--fable-water); font-size:12px; }
.home-canvas-page[data-home-mode="tide"] .home-stage-preview { display:none; }
.home-canvas-page[data-home-mode="entry"] .home-answer { padding-bottom:12px; }
@media(max-width:760px) { .home-canvas-page .home-stage-preview ol { grid-template-columns:repeat(2,minmax(0,1fr)); } .home-canvas-page .home-stage-preview li a { min-height:76px; } }
@media(max-width:959px) {
:root body.fable-page.home-canvas-page[data-home-mode="tide"] .hp-heading { min-height:84px; padding-block:8px; }
:root body.fable-page.home-canvas-page[data-home-mode="tide"] [data-minimal-modern] { display:flex; flex-direction:column; }
:root body.fable-page.home-canvas-page[data-home-mode="tide"] [data-minimal-modern] > .hp-canvas-date { order:0; }
:root body.fable-page.home-canvas-page[data-home-mode="tide"] [data-minimal-modern] > .mm-tide-core { display:contents; }
:root body.fable-page.home-canvas-page[data-home-mode="tide"] .mm-tide-core > [data-tide-answer] { order:1; padding:16px; border:1px solid var(--os-line); border-radius:18px; background:var(--os-panel); }
:root body.fable-page.home-canvas-page[data-home-mode="tide"] [data-minimal-modern] > .si-tide-hero { order:2; }
:root body.fable-page.home-canvas-page[data-home-mode="tide"] .mm-tide-core > [data-pinned-timeline] { order:3; }
:root body.fable-page.home-canvas-page[data-home-mode="tide"] [data-minimal-modern] > :is(.mm-almanac,.sea-overview,.sea-overview-empty,.hp-canvas-more) { order:4; }
}
.home-canvas-page .home-tools-more > summary { min-height: 44px; }
.home-canvas-page .home-planner { padding: 20px 24px 24px; border: 0; border-radius: 20px; }
.home-canvas-page .hp-heading { align-items: center; gap: 8px; margin: 0; }
.home-canvas-page .hp-heading > div { flex: 1 1 auto; }
.home-canvas-page .hp-heading .hp-eyebrow { display: none; }
.home-canvas-page .hp-port-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.home-canvas-page .home-planner .hp-heading :is(h1,h2) { margin: 0; font-size: clamp(23px, 2.4vw, 30px); line-height: 1.25; letter-spacing: -.02em; word-break: keep-all; }
.home-canvas-page .hp-port-title button { display:inline-flex; flex:0 0 auto; align-items:center; gap:4px; min-height:44px; padding:4px 8px; border:1px solid var(--fable-line); border-radius:8px; background:var(--fable-surface); color:var(--fable-water); font-size:.875rem; }
.home-canvas-page .hp-port-title button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.home-canvas-page .hp-heading p { font-size: 14px; line-height: 1.5; }
.home-canvas-page .hp-heading .hp-mascot { display:none; }
.home-canvas-page .hp-heading .home-location-button { min-height: 44px; margin: 0; border: 0; padding: 6px; background: transparent; font-size: 12px; color: var(--fable-muted); }
.home-canvas-page .hp-location-options { margin: 0; padding: 0 12px 12px; border: 1px solid var(--fable-line); border-radius: 12px; }
.home-canvas-page .hp-location-options > summary { min-height: 44px; cursor: pointer; }
.home-canvas-page .hp-feedback { margin: 4px 0; min-block-size: 0; font-size: 14px; line-height: 1.5; }
.home-canvas-page .hp-feedback p { margin: 0; }
.home-canvas-page #homeSelectedDay { min-block-size: 12rem; }
.home-canvas-page .hp-return { margin-block: 0; }
.home-canvas-page .hp-return > summary { min-height: 44px; }
.home-canvas-page .hp-return ul { margin: 0; padding: 0; list-style: none; }
.home-canvas-page .hp-return li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.home-canvas-page .hp-return a { display: inline-flex; align-items: center; min-height: 44px; }
.home-canvas-page .hp-return p, .home-canvas-page .hp-return li > span { font-size: 13px; }
.home-canvas-page [data-home-retry] { min-height: 44px; }
:root { --rb-paper: #f6f5f2; --rb-ink: #191f1d; --rb-accent: #0f766e; }
:root[data-fable-scheme="dark"] { --rb-paper: #101715; --rb-ink: #f3f7f5; --rb-accent: #5eead4; }
.home-canvas-page .hp-return { color: var(--rb-ink); background: var(--rb-paper); border-radius: 12px; padding-inline: 8px; }
.home-canvas-page .hp-return :is(summary, a) { color: var(--rb-accent); }
.home-canvas-page .hp-feedback p:not(:empty) { color: var(--rb-ink); background: var(--rb-paper); border-radius: 12px; }
#candidateAnnouncement:not(.sr-only), .selected-day-storage-note { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--rb-accent); border-radius: 12px; color: var(--rb-ink); background: var(--rb-paper); font-size: 14px; line-height: 1.5; }
#selectedDayPanel [data-save-date] { color: var(--rb-paper); background: var(--rb-accent); border: 1px solid var(--rb-accent); border-radius: 12px; }
#selectedDayPanel [data-save-date]:disabled { opacity: 1; color: var(--rb-ink); background: var(--rb-paper); border-color: var(--rb-ink); }
#selectedDayPanel [data-save-date]:focus-visible { outline: 2px solid var(--rb-accent); outline-offset: 2px; box-shadow: none; }
.home-canvas-page [data-home-retry] { border: 1px solid var(--rb-accent); border-radius: 12px; color: var(--rb-accent); background: var(--rb-paper); padding: 8px 12px; }
.home-canvas-page :is(.hp-return a, .hp-return summary, [data-home-retry]):focus-visible { outline: 2px solid var(--rb-accent); outline-offset: 2px; }
.hp-tide-canvas { min-width: 0; }
.hp-canvas-date { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 0; }
.home-planner .hp-canvas-date h2 { min-width: 0; margin: 0; line-height: 1.3; }
.home-planner .hp-canvas-date h2 button { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 44px; padding: 4px 0; border: 0; background: transparent; font-size: 16px; font-weight: 700; color: var(--fable-ink); }
.hp-canvas-date button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hp-canvas-date > strong { flex: 0 0 auto; color: var(--fable-water); font-size: 14px; font-weight: 700; white-space: nowrap; }
.ptl-home-canvas { --ptl-accent: var(--fable-water); padding-top: 0; }
.ptl-home-canvas .hp-canvas-date-action { flex: 0 0 auto; min-height: 44px; border: 0; padding: 6px; color: var(--fable-water); background: transparent; font-size: 12px; white-space: nowrap; }
.ptl-home-canvas .hp-canvas-golden { margin:0 0 12px; padding:10px 12px; border:1px solid var(--fable-line); border-radius:10px; background:var(--fable-surface-soft); }
.ptl-home-canvas .hp-canvas-golden-copy { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
.ptl-home-canvas .hp-canvas-golden h3 { display:flex; align-items:center; gap:6px; margin:0; font-size:.9375rem; }
.ptl-home-canvas .hp-canvas-golden :is(h3 small,[data-canvas-golden-status]) { font-size:.8125rem; color:var(--fable-muted); font-weight:500; }
.ptl-home-canvas .hp-canvas-golden-time { display:flex; align-items:center; gap:6px; margin-left:auto; min-height:44px; padding:0; border:0; background:transparent; color:var(--fable-ink); font-size:1.375rem; font-weight:750; }
.ptl-home-canvas .hp-canvas-golden-time>span { white-space:nowrap; }
.ptl-home-canvas .hp-canvas-golden-time svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.ptl-home-canvas .hp-canvas-golden[data-golden-state=active] [data-canvas-golden-status] { color:var(--fable-water); font-weight:700; }
.hp-canvas-golden .hp-window-rail { flex:0 0 100%; }
.hp-canvas-golden :is(.hp-window-scale,.hp-window-note) { flex:0 0 100%; }
.ptl-home-canvas .ptl-canvas-toolbar { position: relative; display: block; min-height: 56px; border-top: 1px solid var(--fable-line); }
.ptl-home-canvas .ptl-controls { display: grid; grid-template-columns: calc(50% - 36px) 100px minmax(0, 1fr); margin: 0; min-height: 52px; max-width: none; }
.ptl-home-canvas .ptl-controls > button:first-child { justify-self: end; }
.ptl-home-canvas .ptl-controls > button:last-child { justify-self: start; }
.ptl-home-canvas .ptl-controls > button { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px; border: 0; background: transparent; color: var(--fable-water); }
.ptl-home-canvas .ptl-controls > button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ptl-home-canvas .ptl-clock summary { display: grid; grid-template-columns: auto 16px; align-items: center; justify-content: center; min-height: 48px; column-gap: 4px; padding: 3px; }
.ptl-home-canvas .ptl-clock summary small { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.2; }
.ptl-home-canvas .ptl-clock summary time { font-size: 20px; line-height: 1.2; color: var(--fable-ink); }
.ptl-home-canvas .ptl-clock summary > svg { width: 16px; height: 16px; fill: none; stroke: var(--fable-muted); stroke-width: 1.8; }
.ptl-home-canvas .ptl-now { position: absolute; left: 0; top: 5px; min-height: 44px; min-width: 44px; padding: 8px; border: 0; background: var(--fable-water-soft); color: var(--fable-water); font-size: 12px; }
.ptl-home-canvas .ptl-lane-tide > header { min-height: 48px; gap: 8px; align-items: center; }
.ptl-home-canvas .ptl-lane-tide h3 { margin: 0; font-size: 13px; font-weight: 600; }
.ptl-home-canvas .ptl-lane-tide h3 small { display: block; font-size: 12px; font-weight: 400; }
.ptl-home-canvas .ptl-lane-tide .ptl-value { gap: 2px 4px; flex-direction: column; align-items: flex-end; }
.ptl-home-canvas .ptl-value strong { font-size: 20px; white-space: nowrap; }
.ptl-home-canvas .ptl-value > small { font-size: 12px; line-height: 1.2; }
.ptl-home-canvas .ptl-curve { stroke-width: 3; }
.ptl-home-canvas .ptl-area { opacity: .65; }
.ptl-home-canvas .ptl-pin { stroke-width: 1.5; stroke-dasharray: 3 3; }
.ptl-home-canvas .ptl-pin-dot { r: 5; }
.ptl-home-canvas .ptl-golden-band { opacity: .14; }
.ptl-home-canvas .ptl-golden-edge { stroke-width: 4; }
.ptl-home-canvas .ptl-tide-event text { font-size: 12px; stroke-width: 4px; }
.ptl-home-canvas .ptl-canvas-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; color: var(--fable-muted); font-size: 12px; }
.ptl-home-canvas .ptl-hint { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; }
.ptl-home-canvas .ptl-hint svg { width: 20px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ptl-home-canvas .ptl-canvas-legend { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ptl-home-canvas .ptl-canvas-legend i { display: inline-block; width: 14px; height: 8px; background: var(--fable-water-soft); border-top: 3px solid var(--fable-water); }
.ptl-home-canvas .ptl-canvas-reference { margin: 2px 0 12px; color: var(--fable-muted); font-size: 12px; line-height: 1.5; }
.hp-canvas-conditions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-block: 12px; border-block: 1px solid var(--fable-line); }
.hp-canvas-condition-group { min-width: 0; }
.hp-canvas-condition-group > header { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 36px; font-size: 12px; line-height: 1.5; }
.hp-canvas-condition-group > header > span { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.hp-canvas-condition-group > header > small { font-size: 12px; }
.hp-canvas-condition-group header svg { width: 20px; height: 20px; }
.hp-canvas-condition-group dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; }
.hp-canvas-condition-group dt { font-size: 12px; line-height: 1.5; color: var(--fable-muted); }
.hp-canvas-condition-group dd { margin: 2px 0 0; font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.hp-canvas-condition-group dd small { margin-left: 2px; }
.hp-canvas-condition-group > p { margin: 6px 0 0; color: var(--fable-muted); font-size: 12px; }
.ptl-home-canvas .ptl-more-lanes { margin-top: 0; }
.ptl-home-canvas .ptl-more-lanes .ptl-lane { margin-block: 12px; }
.ptl-home-canvas .ptl-canvas-evidence { margin-top: 0; }
.ptl-home-canvas .ptl-canvas-evidence > p { margin: 8px 0; color: var(--fable-muted); font-size: 13px; line-height: 1.6; }
.ptl-home-canvas .ptl-canvas-evidence .hp-tides { margin-block: 12px; }
.home-planner .hp-canvas-more .hp-disclosure { margin-top: 0; }
.home-canvas-page .hp-actions { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--fable-line); gap: 12px; }
.home-canvas-page .hp-actions button { border: 0; padding-inline: 0; background: transparent; color: var(--fable-water); font-size: 13px; }
.home-canvas-page .hp-actions a { font-size: 13px; }
.home-canvas-page .hp-calendar-section { margin-top: 16px; }
@media (min-width: 960px) {
.home-canvas-page .home-planner { padding-inline: 32px; }
.hp-canvas-conditions { gap: 32px; padding-block: 16px; }
.hp-canvas-condition-group > header { min-height: 24px; }
.hp-canvas-condition-group dd { font-size: 24px; }
}
@media (max-width: 600px) {
.home-canvas-page .home-planner { padding: 12px 16px 20px; }
.home-canvas-page .hp-heading .hp-mascot { width: 44px; height: 44px; flex-basis: 44px; }
.home-canvas-page .hp-heading .home-location-button { font-size: 12px; }
.home-canvas-page .hp-port-title button { padding-inline: 3px; }
.home-canvas-page .hp-port-title button span { display: inline; white-space: nowrap; font-size: .875rem; }
.home-canvas-page .hp-port-title button { min-width: 44px; }
.home-canvas-page .hp-heading > div { flex: 1 1 0; }
.home-canvas-page .hp-heading h1 { overflow-wrap: anywhere; }
.hp-canvas-date { margin-top: 4px; }
.home-planner .hp-canvas-date h2 button { font-size: 15px; }
.ptl-home-canvas .ptl-canvas-toolbar { gap: 8px; }
.ptl-home-canvas .ptl-controls { grid-template-columns: calc(50% - 36px) 100px minmax(0, 1fr); }
.ptl-home-canvas .ptl-clock summary time { font-size: 20px; }
.hp-canvas-conditions { gap: 12px; }
.hp-canvas-condition-group dl { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.hp-canvas-condition-group dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; flex-wrap: wrap; }
.hp-canvas-condition-group dd { font-size: 18px; }
.hp-canvas-condition-group > header { display: grid; align-content: start; min-height: 42px; }
}
@media (max-width: 360px) {
.home-canvas-page .home-planner { margin-inline: -8px; padding-inline: 12px; border-radius: 16px; }
.home-canvas-page .hp-heading .hp-mascot { display: none; }
.home-canvas-page .ceph-entry-paths { gap: 4px; }
.home-canvas-page .ceph-entry-paths a { padding-inline: 6px; }
.ptl-home-canvas .hp-canvas-date-action { font-size: 12px; padding-inline: 0; }
.hp-canvas-date > strong { font-size: 12px; }
.ptl-home-canvas .ptl-now { padding-inline: 8px; }
}
.home-planner .hp-calendar td { padding: 0; }
.home-planner .hp-calendar button { min-width: 44px; height: 92px; min-height: 92px; padding: 6px 0; }
.hp-calendar button > strong { display: grid; grid-template-rows: 20px 17px; }
.hp-calendar button > .hp-calendar-date-label { display: none; }
@media (max-width: 360px) {
.hp-calendar, .hp-calendar tbody, .hp-calendar tr, .hp-calendar td { display: block; }
.hp-calendar thead, .hp-calendar .hp-calendar-empty { display: none; }
.home-planner .hp-calendar button { display: flex; align-items: center; gap: 12px; height: auto; min-height: 44px; padding: 8px; }
.hp-calendar button > .hp-calendar-date-label { display: inline; }
.hp-calendar button > strong { display: none; }
}
.sea-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.sea-overview { margin: 0 0 16px; }
.sea-overview > dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 0; }
.sea-overview .sea-metric { min-width:0; padding:10px 8px; border:1px solid var(--fable-line); border-radius:10px; background:var(--fable-surface); }
.sea-metric dt { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px; color:var(--fable-muted); font-size:.875rem; }
.sea-metric .sea-icon { width: 22px; height: 22px; color: var(--fable-water); }
.sea-metric dd { display: grid; justify-items: center; margin: 8px 0 0; gap: 2px; text-align: center; }
.sea-metric strong { font-size: 1.125rem; font-weight: 700; overflow-wrap: anywhere; line-height: 1.3; }
.sea-metric small { font-size: .875rem; color: var(--fable-muted); }
.sea-overview > p { margin: 8px 3px 0; color: var(--fable-muted); font-size: .875rem; line-height: 1.55; overflow-wrap: anywhere; }
.hp-window-rail { position: relative; height: 8px; margin: 10px 0 4px; border-radius: 8px; background: var(--fable-line); }
.hp-window-rail > span { position: absolute; top: 0; bottom: 0; border-radius: inherit; background: var(--fable-water); }
.hp-window-scale { display: flex; justify-content: space-between; font-size: .6875rem; color: var(--fable-muted); }
.hp-window-note { margin: 7px 0 0; color: var(--fable-muted); font-size: .75rem; line-height: 1.5; }
[data-visual-scan] .hp-canvas-condition-group dt { display: flex; align-items: center; gap: 6px; }
[data-visual-scan] .hp-canvas-condition-group dt .sea-icon { width: 18px; height: 18px; }
[data-visual-scan] .hp-canvas-conditions { grid-template-columns: minmax(0,1fr); }
[data-visual-scan] .hp-canvas-conditions dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
[data-visual-scan] .hp-canvas-more { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 16px; }
[data-visual-scan] .hp-canvas-more > details[open] { grid-column: 1 / -1; }
@media(max-width:360px) {
.hp-tide-answer { padding: 12px; }
.hp-extreme { padding: 10px 8px; }
.hp-tide-answer .hp-events dd > span { font-size: 1.375rem; }
.sea-metric strong { font-size: .9375rem; }
[data-visual-scan] .hp-canvas-more { grid-template-columns: minmax(0,1fr); }
}
@media(min-width:960px) {
[data-visual-scan] { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 20px; align-items: start; }
[data-visual-scan] > :is(.hp-canvas-date,.pinned-timeline,.hp-canvas-more) { grid-column: 1 / -1; }
[data-visual-scan] > .sea-overview { align-self: stretch; display: flex; flex-direction: column; }
[data-visual-scan] > .sea-overview > dl { flex: 1; }
[data-visual-scan] .sea-metric { display: flex; flex-direction: column; justify-content: center; }
[data-visual-scan] .sea-metric strong { font-size: 1.375rem; }
[data-visual-scan] .sea-metric .sea-icon { width: 36px; height: 36px; }
}
:root .fable-page .hp-window-note { font-size:.875rem; line-height:1.6; }
:root .fable-page .ptl-home-canvas :is(.ptl-clock small,.ptl-lane h3 small,.ptl-value small,.hp-canvas-condition-group dt,.hp-canvas-condition-group dd small) { font-size:.875rem; line-height:1.5; }
:root .fable-page .hp-official-index summary small { font-size:.875rem; }
:root .fable-page .hp-calendar small { font-size:.8125rem; line-height:1.4; }
.sea-overview-empty { align-self:start; padding:12px 14px; border:1px solid var(--fable-line); border-radius:10px; background:var(--fable-surface-soft); }
.sea-overview-empty > strong { display:flex; align-items:flex-start; gap:8px; font-size:.9375rem; line-height:1.5; font-weight:650; }
.sea-overview-empty > strong .sea-icon { width:20px; height:20px; margin-top:2px; color:var(--fable-muted); }
.sea-overview-empty > p { margin:6px 0 0; font-size:.875rem; line-height:1.6; }
.sea-overview-empty > small { display:block; margin-top:6px; color:var(--fable-muted); font-size:.875rem; line-height:1.5; }
[data-visual-scan] > .sea-overview-empty { align-self:start; }
.hp-tide-answer .hp-events { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; font-variant-numeric:tabular-nums; }
.hp-tide-answer .hp-extreme + .hp-extreme { padding-left:12px; }
.hp-tide-answer .hp-events dd > span { display:flex; flex-wrap:nowrap; align-items:baseline; gap:6px; }
.hp-tide-answer .hp-events small { white-space:nowrap; font-size:.875rem; }
.hp-tide-answer .hp-answer-basis { font-size:.875rem; line-height:1.6; }
.hp-tide-answer .hp-answer-basis > span { display:block; }
.ptl-home-canvas .hp-canvas-golden { padding:8px 0; border:0; border-bottom:1px solid var(--fable-line); border-radius:0; background:transparent; }
.ptl-home-canvas .hp-canvas-golden h3 { font-size:.9375rem; line-height:1.5; }
.ptl-home-canvas .hp-canvas-golden-time { font-size:1.125rem; }
.ptl-home-canvas .hp-canvas-golden .hp-window-rail { height:4px; margin-block:6px 2px; }
.home-planner .hp-calendar [aria-pressed="true"] { outline:2px solid var(--fable-water); outline-offset:-2px; }
.home-planner .hp-calendar button { font-variant-numeric:tabular-nums; }
@media (max-width:380px) {
.hp-tide-answer .hp-events dd > span { flex-direction:column; align-items:flex-start; gap:0; }
.hp-tide-answer .hp-extreme { padding-inline:0; }
.hp-tide-answer .hp-events { gap:12px; }
}
.fable-page #homePortList { align-items: start; }
.fable-page #homePortList .home-port-link {
height: auto;
min-height: 0;
grid-template-areas: "heading" "mul" "tide";
grid-template-columns: minmax(0, 1fr);
gap: 8px;
padding: 0 0 12px;
}
.fable-page #homePortList .home-port-heading { grid-area: heading; }
.fable-page #homePortList .home-port-mul {
grid-area: mul;
justify-self: start;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--fable-ink);
font-size: 1.5rem;
font-weight: 800;
line-height: 1.3;
}
.fable-page #homePortList .home-port-tide { grid-area: tide; }
.fable-page #homePortList .home-port-tide > strong { font-size: 1rem; }
.fable-page #homePortList .home-port-evidence {
display: block;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.fable-page #homePortList .home-port-evidence > summary {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: none;
min-height: 44px;
padding: 8px 0;
border-top: 1px solid var(--fable-line);
cursor: pointer;
list-style: none;
}
.fable-page #homePortList .home-port-evidence > summary::after {
content: '';
flex: 0 0 7px;
width: 7px;
height: 7px;
margin: 0 4px 4px 12px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
}
.fable-page #homePortList .home-port-evidence[open] > summary {
margin-bottom: 8px;
}
.fable-page #homePortList .home-port-evidence[open] > summary::after {
transform: rotate(225deg);
}
.fable-page #homePortList .home-port-evidence > summary:focus-visible {
outline: 3px solid var(--fable-focus);
outline-offset: 3px;
border-radius: 4px;
}
.home-planner .home-task-shortcuts { display:flex; flex-wrap:wrap; gap:4px 14px; margin:6px 0 10px; }
.home-planner .home-task-shortcuts a { display:inline-flex; align-items:center; min-height:44px; font-size:.9375rem; }
.hp-answer-reference { margin:8px 0; font-size:.875rem; line-height:1.55; color:var(--fable-ink); overflow-wrap:anywhere; }
:root body.fable-page[data-site-identity][data-ocean-site] .hp-tide-canvas[data-document-console][data-reading-tide-first][data-minimal-modern] > .mm-tide-core { display:block; grid-column:1/-1; grid-row:2; order:1; }
:root body.fable-page[data-site-identity][data-ocean-site] .hp-tide-canvas[data-document-console][data-reading-tide-first][data-minimal-modern] > .hp-canvas-date { grid-column:1/-1; grid-row:1; }
:root body.fable-page[data-site-identity][data-ocean-site] .hp-tide-canvas[data-document-console][data-reading-tide-first][data-minimal-modern] > .sea-overview { grid-column:1; grid-row:3; order:2; }
:root body.fable-page[data-site-identity][data-ocean-site] .hp-tide-canvas[data-document-console][data-reading-tide-first][data-minimal-modern] > .si-tide-hero { grid-column:2; grid-row:3; order:3; }
:root body.fable-page[data-site-identity][data-ocean-site] .hp-tide-canvas[data-document-console][data-reading-tide-first][data-minimal-modern] > .mm-almanac { grid-column:1; grid-row:4; order:4; }
:root body.fable-page[data-site-identity][data-ocean-site] .hp-tide-canvas[data-document-console][data-reading-tide-first][data-minimal-modern] > .hp-canvas-more { grid-column:2; grid-row:4; order:5; }
@media(min-width:1200px) {
:root body.fable-page[data-site-identity][data-ocean-site] .hp-tide-canvas[data-document-console][data-reading-tide-first][data-minimal-modern] { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); }
:root body.fable-page[data-site-identity][data-ocean-site] .hp-tide-canvas[data-document-console][data-reading-tide-first][data-minimal-modern] > .mm-tide-core { display:grid; grid-template-columns:minmax(280px,2fr) minmax(0,5fr); gap:24px; align-items:start; }
:root body.fable-page[data-site-identity][data-ocean-site] .mm-tide-core > :is([data-tide-answer],[data-pinned-timeline]) { min-width:0; }
:root body.fable-page[data-site-identity][data-ocean-site] .mm-tide-core > [data-tide-answer] { grid-column:1; grid-row:1; }
:root body.fable-page[data-site-identity][data-ocean-site] .mm-tide-core > [data-pinned-timeline] { grid-column:2; grid-row:1; }
:root body.fable-page[data-site-identity][data-ocean-site] .hp-tide-canvas[data-reading-tide-first] .mm-tide-core > [data-tide-answer] { padding:0 24px 0 0; border:0; border-right:1px solid var(--os-line); }
:root body.fable-page[data-site-identity][data-ocean-site] .hp-tide-canvas[data-document-console][data-reading-tide-first][data-minimal-modern] > :is(.sea-overview,.sea-overview-empty,.si-tide-hero) { grid-column:1/-1; align-self:start; min-width:0; }
:root body.fable-page[data-site-identity][data-ocean-site] .hp-tide-canvas[data-document-console][data-reading-tide-first][data-minimal-modern] > :is(.sea-overview,.sea-overview-empty) { grid-row:3; }
:root body.fable-page[data-site-identity][data-ocean-site] .hp-tide-canvas[data-document-console][data-reading-tide-first][data-minimal-modern] > .si-tide-hero { grid-row:4; }
:root body.fable-page[data-site-identity][data-ocean-site] .hp-tide-canvas[data-document-console][data-reading-tide-first][data-minimal-modern] > .mm-almanac { grid-row:5; }
:root body.fable-page[data-site-identity][data-ocean-site] .hp-tide-canvas[data-document-console][data-reading-tide-first][data-minimal-modern] > .hp-canvas-more { grid-row:5; }
}
@media(max-width:1199px) {
:root body.fable-page[data-site-identity][data-ocean-site] .hp-tide-canvas[data-document-console][data-reading-tide-first][data-minimal-modern] { grid-template-columns:minmax(0,1fr); }
:root body.fable-page[data-site-identity][data-ocean-site] .hp-tide-canvas[data-document-console][data-reading-tide-first][data-minimal-modern] > :is(.hp-canvas-date,.mm-tide-core,.sea-overview,.sea-overview-empty,.si-tide-hero,.mm-almanac,.hp-canvas-more) { grid-column:1; grid-row:auto; }
}
@media(max-width:760px) {
:root body.fable-page[data-site-identity][data-ocean-site] .hp-tide-canvas[data-document-console][data-reading-tide-first][data-minimal-modern] { display:block; }
}