.where-watch { display: grid; gap: var(--space-6); margin-block: var(--space-6); }
.where-watch__heading { display: grid; gap: var(--space-2); }
.where-watch__heading h2,
.where-watch__heading p { margin: 0; }
.where-watch__diagram { margin: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fffaf1; box-shadow: var(--shadow-sm); }
.where-watch__diagram img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.where-watch__diagram figcaption { padding: var(--space-3) var(--space-4); color: var(--color-muted); font-size: .92rem; }
.where-watch__steps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.where-watch__steps li { display: grid; grid-template-columns: 42px 1fr; gap: var(--space-3); align-items: start; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.where-watch__steps li > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 1.25rem; font-weight: 800; }
.where-watch__steps strong { color: var(--color-heading); }
.where-watch__steps p { margin: 4px 0 0; }
.where-watch__navigator,
.where-watch__meanings { display: grid; gap: var(--space-5); padding: clamp(20px,4vw,36px); border: 1px solid var(--color-primary); border-radius: var(--radius-lg); background: linear-gradient(145deg,var(--color-primary-pale),var(--color-surface)); }
.where-watch__navigator h3,
.where-watch__navigator p,
.where-watch__meanings h3,
.where-watch__meanings p { margin-block: 0; }
.where-watch__navigator form { display: grid; gap: var(--space-4); }
.where-watch__field { display: grid; gap: var(--space-2); font-weight: 800; }
.where-watch__field select { width: 100%; min-height: var(--tap-size); padding: 10px 40px 10px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.where-watch__navigator fieldset { min-width: 0; margin: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.where-watch__navigator legend { padding-inline: var(--space-2); color: var(--color-heading); font-weight: 800; }
.where-watch__services { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.where-watch__service { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-size); padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-raised); cursor: pointer; }
.where-watch__service:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-heading); font-weight: 800; }
.where-watch__service:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.where-watch__service input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-primary); }
.where-watch__limit { min-height: 1.5em; margin-top: var(--space-2) !important; color: var(--color-muted); font-size: .9rem; }
.where-watch__privacy { color: var(--color-muted); font-size: .9rem; }
.where-watch__result { display: grid; gap: var(--space-3); min-height: 88px; padding: var(--space-4); border: 1px solid var(--color-confirmed-border); border-radius: var(--radius-md); background: var(--color-confirmed-soft); }
.where-watch__result h4,
.where-watch__result p { margin: 0; }
.where-watch__result ul { display: grid; gap: var(--space-2); margin: 0; padding-left: 1.4rem; }
.where-watch__result small { color: var(--color-muted); }
.where-watch__result-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.where-watch__result-links a { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.where-watch__fallback { padding: var(--space-4); border-radius: var(--radius-sm); background: var(--color-orange-soft); }
.where-watch__meaning-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.where-watch__meaning-tabs button { min-height: var(--tap-size); padding: 8px 14px; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface); color: var(--color-heading); font: inherit; font-weight: 800; cursor: pointer; }
.where-watch__meaning-tabs button[aria-selected="true"] { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.where-watch__meaning-tabs button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.where-watch__meaning-panels > div { padding: var(--space-4); border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--color-surface); }
.where-watch__meaning-panels h3 { margin-bottom: var(--space-2); }
.where-watch__source-note { margin: 0; }
@media (min-width: 700px) {
 .where-watch__steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .where-watch__steps li { grid-template-columns: 1fr; }
 .where-watch__services { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 1080px) { .where-watch__services { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 560px) {
 .where-watch__navigator,
 .where-watch__meanings { padding: 16px; border-radius: var(--radius-md); }
 .where-watch__navigator .c-button { width: 100%; }
}