:root {
  color-scheme: light;
  --high: #e33b32;
  --middle: #ffd24d;
  --none: #fff;
  --missing: #e6e6e6;
  --border: #a9a9a9;
}

body { margin: 0; color: #222; background: #f9f9f9; font: 14px/1.45 Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
.page-header { padding: .7rem 1rem; color: #fff; text-align: center; text-shadow: 0 -1px 0 #111; background: linear-gradient(#5f5f5f, #292929); border-bottom: 1px solid #111; }
h1 { margin: 0; font-size: 1.2rem; }
.page-content { padding: .65rem; }
.message-panel { padding: .4rem .65rem; text-align: center; background: #fff; border: 1px solid #ccc; border-radius: 4px; }
#status, #notices { margin-top: .35rem; }
.status-ok { color: #176b35; font-weight: 700; }
.status-nuke, .warning { color: #9c1c12; font-weight: 700; }
#controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; padding: .55rem 0; }
#archive-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: .4rem .6rem; background: #eee; border: 1px solid #bbb; border-radius: 4px; }
#archive-controls legend { padding: 0 .25rem; font-weight: 700; }
#archive-controls button, #archive-controls input, #archive-controls select { min-height: 2rem; font: inherit; }
#archive-controls button { padding: .25rem .75rem; border: 1px solid #888; border-radius: 4px; background: linear-gradient(#fff, #ddd); }
#archive-controls button:disabled { cursor: not-allowed; opacity: .45; }
.rank-HIGH { color: #fff; background: var(--high); font-weight: 800; }
.rank-MIDDLE { color: #111; background: var(--middle); font-weight: 800; }
.rank-NONE { color: #52606d; background: var(--none); }
.rank-MISSING { color: #59636d; background: repeating-linear-gradient(135deg, var(--missing), var(--missing) 4px, #eef0f2 4px, #eef0f2 8px); }
.rank-UNKNOWN { color: #fff; background: #5d3f8c; }
.table-wrap { overflow: auto; margin-top: .25rem; background: #fff; border: 1px solid #999; border-radius: 3px; }
table { width: max-content; min-width: 100%; border-collapse: collapse; }
caption { padding: .65rem .4rem; color: #222; text-align: center; background: #fff; border-bottom: 1px solid #999; }
caption strong { font-size: 1.05rem; }
.table-options { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .75rem; margin-top: .45rem; font-size: .92em; }
#element-filters { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .25rem .65rem; }
th, td { padding: .32rem .42rem; border: 1px solid var(--border); white-space: nowrap; text-align: center; }
thead th { position: sticky; top: 0; z-index: 3; color: #222; text-shadow: 0 1px 0 #fff; background: linear-gradient(#f7f7f7, #d2d2d2); }
th:first-child, td:first-child { position: sticky; left: 0; z-index: 2; }
td:first-child { background: #fff; }
thead th:first-child { z-index: 5; background: linear-gradient(#f7f7f7, #d2d2d2); }
.office { color: #333; }
.area { text-align: left; }
.element { font-weight: 700; }
.element-rain { background: #dceeff; }
.element-snow { background: #eef0ff; }
.element-wind { background: #ffe4d5; }
.element-wave { background: #dce6ff; }
.element-tide { background: #dff4ea; }
.element-other { background: #eee; }
td.rank { min-width: 3.25rem; }
#kikan { margin: .65rem .25rem 1rem; font-size: .92em; }
.note { margin-top: .45rem; color: #555; }
.hidden-row { display: none; }
.error { color: #9c1c12; font-weight: 700; }
.info { color: #35536b; font-weight: 700; }
@media (max-width: 700px) {
  body { font-size: 12px; }
  .page-content { padding: .35rem; }
  th, td { padding: .28rem; }
  #archive-controls { justify-content: center; }
}