.date-switcher { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 99px; }
.date-button { min-width: 110px; padding: 8px 13px; border: 0; border-radius: 99px; background: transparent; color: var(--sand-dim); font: .62rem "DM Mono", monospace; cursor: pointer; }
.date-button[aria-selected="true"] { color: var(--ink); background: var(--aqua); }

.conditions-bar { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 22px; border-block: 1px solid var(--line-strong); }
.condition-item { min-width: 0; padding: 13px 16px; border-right: 1px solid var(--line); }
.condition-item:first-child { padding-left: 0; }
.condition-item:last-child { border-right: 0; }
.condition-label { display: block; color: var(--sand-dim); font: .56rem "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.condition-value { display: block; margin-top: 4px; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.condition-detail { display: block; margin-top: 2px; color: var(--sand-dim); font-size: .65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.safety-flag { margin-top: 18px; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; color: #2b1b08; background: var(--warning); font-size: .72rem; }
.safety-flag a { font-weight: 650; }

.matrix-section { --matrix-guide: #091f23; width: var(--page); margin: 24px auto 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 8px; background: #07191c; box-shadow: 0 24px 70px rgba(0, 0, 0, .18); }
.scroll-hint { display: none; }
.matrix-scroll { width: 100%; overflow: visible; }
.spot-matrix { min-width: 0; display: grid; grid-template-columns: minmax(180px, .82fr) repeat(4, minmax(0, 1fr)); }
.matrix-row { display: contents; }
.matrix-head { min-height: 62px; padding: 13px 16px; position: sticky; top: 0; z-index: 3; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line-strong); background: var(--matrix-guide); }
.matrix-head:first-child { left: 0; z-index: 4; padding-left: 20px; }
.matrix-head strong { display: block; font-size: .86rem; }
.matrix-head span { display: block; margin-top: 3px; color: var(--sand-dim); font: .59rem "DM Mono", monospace; }
.spot-label { min-height: 142px; position: sticky; left: 0; z-index: 2; padding: 16px 18px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); background: var(--matrix-guide); }
.spot-title-line { display: flex; align-items: center; gap: 8px; }
.spot-title-line > strong { display: block; font-size: 1.06rem; }
.spot-label small { display: block; margin-top: 22px; color: var(--aqua); font: .6rem/1.5 "DM Mono", monospace; }
.spot-links { display: flex; gap: 12px; margin-top: 8px; color: var(--sand-dim); font-size: .62rem; }
.spot-links a:hover { color: var(--aqua); }
.ideal-info { position: relative; width: 17px; height: 17px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--sand-dim); background: transparent; font: 500 .58rem "DM Mono", monospace; cursor: help; }
.ideal-info:hover, .ideal-info:focus-visible { color: var(--ink); border-color: var(--aqua); background: var(--aqua); outline: none; }
.ideal-tooltip { position: absolute; z-index: 20; left: -8px; top: calc(100% + 10px); width: 260px; padding: 13px 14px; display: grid; gap: 6px; color: var(--sand-dim); border: 1px solid var(--line-strong); background: #102f35; box-shadow: 0 16px 36px rgba(0, 0, 0, .4); font: .63rem/1.45 "DM Mono", monospace; text-align: left; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease; pointer-events: none; }
.ideal-tooltip > strong { color: var(--sand); font-family: "Instrument Sans", sans-serif; font-size: .78rem; }
.ideal-info:hover .ideal-tooltip, .ideal-info:focus .ideal-tooltip { opacity: 1; visibility: visible; transform: translateY(0); }
.spot-label:has(.ideal-info:hover), .spot-label:has(.ideal-info:focus) { z-index: 12; }

.window-cell { min-height: 142px; padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line-strong); position: relative; transition: background-color 160ms ease; }
.window-cell:hover { background-color: rgba(94, 230, 213, .06); }
.window-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.window-call { display: inline-block; padding: 3px 6px; border: 1px solid transparent; border-radius: 2px; font: 500 .55rem "DM Mono", monospace; letter-spacing: .08em; }
.window-score { margin: -3px -4px; padding: 3px 4px; border: 0; border-radius: 3px; color: var(--aqua); background: transparent; font: 500 1.05rem "DM Mono", monospace; text-decoration: underline dotted rgba(94, 230, 213, .42); text-underline-offset: 3px; cursor: pointer; }
.window-score:hover, .window-score[aria-expanded="true"] { background: rgba(94, 230, 213, .1); text-decoration-color: currentColor; }
.window-score:focus-visible { outline: 1px solid var(--aqua); outline-offset: 2px; }
.window-cell.go .window-call { color: var(--ink); background: var(--aqua); }
.window-cell.promising .window-call { color: var(--sand); border-color: rgba(238, 229, 209, .34); }
.window-cell.promising .window-score { color: var(--sand); }
.window-cell.best-go { background-color: rgba(94, 230, 213, .065); }
.window-cell.best-go:hover { background-color: rgba(94, 230, 213, .09); }
.window-cell.maybe .window-score, .window-cell.maybe .window-call { color: var(--warning); }
.window-cell.maybe .window-call { border-color: rgba(255, 177, 90, .4); }
.window-cell.wait .window-score, .window-cell.wait .window-call { color: var(--danger); }
.window-cell.wait .window-call { border-color: rgba(255, 117, 109, .4); }
.window-time { display: block; margin-top: 10px; font-size: 1.22rem; letter-spacing: -.02em; }
.window-size { margin-top: 6px; font-size: .75rem; }
.window-size strong { font-weight: 600; }
.window-detail { margin-top: 4px; color: var(--sand-dim); font: .62rem/1.45 "DM Mono", monospace; }
.window-empty { display: grid; place-content: center; color: var(--sand-dim); font: .62rem "DM Mono", monospace; }

.score-popover { position: fixed; z-index: 60; width: min(310px, calc(100vw - 20px)); padding: 14px 15px 10px; border: 1px solid rgba(94, 230, 213, .5); border-radius: 5px; color: var(--sand); background: #0d292e; box-shadow: 0 22px 55px rgba(0, 0, 0, .55); font: .63rem/1.4 "DM Mono", monospace; animation: score-popover-in 140ms ease-out; }
@keyframes score-popover-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } }
.score-popover-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.score-popover-head > span { color: var(--sand-dim); text-transform: uppercase; letter-spacing: .08em; }
.score-popover-head > strong { color: var(--aqua); font-size: 1.25rem; }
.score-popover-head small { margin-left: 2px; color: var(--sand-dim); font-size: .58rem; font-weight: 400; }
.score-equation { margin-top: 7px; padding-bottom: 10px; color: var(--sand); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.score-part { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.score-part > span { color: var(--sand-dim); }
.score-part > strong { color: var(--sand); font-weight: 500; }
.score-part > small { grid-column: 1 / -1; color: var(--sand-dim); font-size: .58rem; }
.score-part.penalty > strong { color: var(--danger); }
.score-popover-hint { margin-top: 8px; color: var(--sand-dim); font-size: .53rem; }

.methodology { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.methodology-grid { display: grid; grid-template-columns: 1.05fr 1fr 1.2fr; gap: 46px; margin-top: 22px; }
.method-block { color: var(--sand-dim); font-size: .74rem; line-height: 1.55; }
.method-block > p:last-child { margin-top: 10px; }
.method-label { color: var(--aqua); font: 500 .65rem "DM Mono", monospace; letter-spacing: .12em; }
.rating-key { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.rating-chip { padding: 4px 7px; border: 1px solid var(--line-strong); border-radius: 2px; font: .58rem "DM Mono", monospace; }
.rating-chip.go { color: var(--ink); border-color: var(--aqua); background: var(--aqua); }
.rating-chip.promising { color: var(--sand); }
.rating-chip.maybe { color: var(--warning); border-color: rgba(255, 177, 90, .42); }
.rating-chip.wait { color: var(--danger); border-color: rgba(255, 117, 109, .42); }
.source-chips { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 9px; }
.source-chip { display: flex; align-items: center; gap: 6px; color: var(--sand-dim); font-size: .68rem; }
.source-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); }
.source-chip i.delayed { background: var(--warning); }
.source-chip i.unavailable { background: var(--danger); }
.source-chip i.manual { border: 1px solid var(--sand-dim); background: transparent; }

@media (max-width: 900px) {
  .conditions-bar { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; }
  .condition-item:first-child { padding-left: 16px; }
  .methodology-grid { grid-template-columns: 1fr 1fr; }
  .method-block:last-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .date-switcher { width: 100%; }
  .date-button { flex: 1; min-width: 0; }
  .conditions-bar { width: 100%; grid-template-columns: repeat(5, 150px); margin-top: 14px; padding-left: 14px; }
  .safety-flag { grid-template-columns: 1fr auto; gap: 5px 12px; }
  .safety-flag span { grid-row: 2; }
  .safety-flag a { grid-column: 2; grid-row: 1 / 3; }
  .matrix-section { width: calc(100vw - 28px); margin-top: 18px; }
  .scroll-hint { display: block; padding: 9px 14px; color: var(--sand-dim); border-bottom: 1px solid var(--line); font: .58rem "DM Mono", monospace; }
  .matrix-scroll {
    overflow-x: auto;
    overscroll-behavior-x: auto;
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }
  .spot-matrix { min-width: 1040px; grid-template-columns: 184px repeat(4, 214px); }
  .matrix-head:first-child, .spot-label { padding-left: 14px; }
  .spot-label, .window-cell { min-height: 142px; }
  .ideal-tooltip { width: 250px; }
  .methodology { margin-top: 42px; }
  .methodology-grid { grid-template-columns: 1fr; gap: 28px; }
  .method-block:last-child { grid-column: auto; }
}