/* Tide Tribe · "The sea, right now". A black tank that fills with white water to today's tide height,
   then a 7-day planner on white. Text in the tank inverts where the water reaches it. Mobile first. */
.tc{--lvl:.45;background:#fff;color:#000}
.tc[hidden]{display:none}

/* tank */
.tc__tank{position:relative;height:78svh;min-height:520px;max-height:860px;overflow:hidden;background:#000}
.tc__water{position:absolute;left:0;right:0;bottom:0;height:calc(var(--lvl) * 100%);background:#fff;transition:height 2.2s cubic-bezier(.23,1,.32,1)}
.tc.is-empty .tc__water{height:0}
.tc__wave{position:absolute;left:0;bottom:calc(100% - 1px);width:200%;height:22px;fill:#fff;animation:tc-wave 9s linear infinite}
.tc__wave--back{height:30px;opacity:.35;animation-duration:14s;animation-direction:reverse}
@keyframes tc-wave{to{transform:translateX(-50%)}}

.tc__gauge{position:absolute;top:16%;bottom:12%;right:var(--page-margin);width:22px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;mix-blend-mode:difference;font-size:11px;letter-spacing:.08em;text-transform:uppercase;pointer-events:none;
  background:repeating-linear-gradient(180deg,#fff 0 1px,transparent 1px 12px) right/8px 100% no-repeat}
.tc__gauge span{transform:translateX(-100%);margin-left:-6px;line-height:1}

.tc__read{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding-top:40px;padding-bottom:36px;color:#fff;mix-blend-mode:difference;pointer-events:none}
.tc__now{margin:0 0 14px;font-size:.9375rem;opacity:.85;font-variant-numeric:tabular-nums}
.tc__title{margin:0;max-width:9ch;font-family:var(--font-heading);font-weight:400;font-size:clamp(44px,11.5vw,96px);line-height:.95;letter-spacing:-.03em;color:inherit}
.tc__state{margin-top:auto;padding-right:48px}
.tc__word{margin:0;font-family:var(--font-heading);font-size:clamp(72px,22vw,220px);line-height:.85;letter-spacing:-.04em}
.tc__next{margin:18px 0 0;font-size:1.125rem}
.tc__wind{margin:4px 0 0;font-size:.9375rem;opacity:.8}

/* planner */
.tc__plan{padding-top:44px;padding-bottom:88px}
.tc__none{margin:0;font-size:1.125rem}

.tc__days{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--page-margin) * -1);padding:0 var(--page-margin);border-bottom:1px solid #000;scroll-snap-type:x proximity}
.tc__days::-webkit-scrollbar{display:none}
.tc__day{flex:none;min-height:48px;padding:0 16px;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;font:inherit;font-size:.9375rem;color:rgba(0,0,0,.55);cursor:pointer;scroll-snap-align:start;user-select:none;-webkit-user-select:none;transition:color .2s ease,border-color .2s ease}
.tc__day[aria-selected="true"]{color:#000;border-bottom-color:#000}

.tc__curve{margin:28px 0 8px;min-height:194px}
.tc__curve svg{display:block;width:100%;height:auto;overflow:visible}
.tc__band{fill:rgba(0,0,0,.045);transition:fill .25s ease}
.tc__band.is-on{fill:rgba(0,0,0,.13)}
.tc__band.is-off{fill:rgba(0,0,0,.015)}
.tc__fill{fill:rgba(0,0,0,.06)}
.tc__line{fill:none;stroke:#000;stroke-width:2;stroke-linejoin:round}
.tc__turn{fill:#fff;stroke:#000;stroke-width:1.5}
.tc__lbl,.tc__tick,.tc__now text{font-family:var(--font-body);font-size:11px;fill:#000}
.tc__tick{fill:rgba(0,0,0,.55)}
.tc__tick--sun{fill:#000}
.tc__axis{stroke:#000;stroke-width:1}
.tc__sun line{stroke:#000;stroke-dasharray:2 4}
.tc__sun path{fill:#000}
.tc__now line{stroke:#000;stroke-width:1}
.tc__now circle{fill:#000;stroke:#fff;stroke-width:2}
.tc__now text{font-weight:600}

.tc__slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));border-top:1px solid #000;border-left:1px solid #000;margin-top:24px}
.tc__slot{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:76px;padding:12px 10px;background:#fff;color:#000;border:0;border-right:1px solid #000;border-bottom:1px solid #000;font:inherit;text-align:left;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color .2s ease,color .2s ease}
.tc__slot b{font-family:var(--font-heading);font-weight:400;font-size:28px;line-height:1;letter-spacing:-.02em}
.tc__slot b i{font-style:normal;font-family:var(--font-body);font-size:11px;margin-left:2px}
.tc__slot small{font-size:12px;line-height:1.25;color:rgba(0,0,0,.6)}
.tc__slot[aria-checked="true"]{background:#000;color:#fff}
.tc__slot[aria-checked="true"] small{color:rgba(255,255,255,.75)}
.tc__slot:disabled{cursor:default;color:rgba(0,0,0,.3)}
.tc__slot:disabled small{color:rgba(0,0,0,.3)}
.tc__slot:active:not(:disabled){transform:scale(.97)}

.tc__card{margin-top:32px}
.tc__when{margin:0 0 18px;font-family:var(--font-heading);font-weight:400;font-size:clamp(32px,8vw,56px);line-height:1;letter-spacing:-.02em}
.tc__when span{display:block;margin-top:8px;font-family:var(--font-body);font-size:1rem;letter-spacing:0;color:rgba(0,0,0,.6)}
.tc__card p{display:grid;grid-template-columns:64px 1fr;gap:12px;margin:0;padding:14px 0;border-top:1px solid rgba(0,0,0,.12);line-height:1.5}
.tc__card p b{font-weight:600}
.tc__book{margin-top:24px;width:100%}
.tc__src{margin:28px 0 0;font-size:.8125rem;color:rgba(0,0,0,.55);max-width:56ch}
.tc__src a{color:inherit;text-decoration:underline;text-underline-offset:3px}

@media (hover:hover) and (pointer:fine){
  .tc__day:hover{color:#000}
  .tc__slot:not(:disabled):not([aria-checked="true"]):hover{background:rgba(0,0,0,.06)}
}
@media(min-width:990px){
  .tc__tank{height:86svh}
  .tc__read{padding-top:64px;padding-bottom:56px}
  .tc__plan{display:grid;grid-template-columns:1.25fr 1fr;column-gap:80px;padding-top:88px;padding-bottom:140px}
  .tc__days{grid-column:1/-1}
  .tc__days{margin:0;padding:0}
  .tc__day:first-child{padding-left:0}
  .tc__curve{grid-column:1;margin-top:40px}
  .tc__slots{grid-column:1}
  .tc__card{grid-column:2;grid-row:2/span 2;margin-top:40px}
  .tc__book{width:auto}
  .tc__src{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .tc__wave{animation:none}
  .tc__water{transition:none}
}