/* The Saros series browser and the Saros-Inex Panorama (saros.js). Every rule is scoped under
   #sarosRoot; colours come from style.css's :root. Two modes: modal (a centred panel over the page,
   full screen at 820px and below) and .embedded (a surface filling the host's pane). Each view's
   own width picks one or two columns, through the saros-panel container. */

#sarosRoot:not(.embedded) {
    position: fixed; inset: 0; z-index: 100;
    display: grid; place-items: center;
    padding: 24px;
    background: #05070acc;
}
#sarosRoot.embedded { display: flex; flex-direction: column; height: 100%; min-height: 0; }
#sarosRoot[hidden], #sarosRoot [hidden] { display: none; }
#sarosRoot .panel {
    container: saros-panel / inline-size;
    display: flex; flex-direction: column; min-height: 0;
    color: var(--on-surface); overflow: hidden; outline: none;
}
#sarosRoot:not(.embedded) .panel {
    width: min(640px, 100%); height: min(100%, 900px);
    background: var(--surface); border: 1px solid var(--outline); border-radius: 16px;
    box-shadow: 0 16px 48px #000a;
}
#sarosRoot:not(.embedded) .panel.pano { width: min(1280px, 100%); height: 100%; }
#sarosRoot.embedded .panel { flex: 1; width: 100%; }

#sarosRoot .head { display: flex; align-items: center; gap: 8px; padding: 12px var(--gutter) 2px; flex: none; }
#sarosRoot h2 { flex: 1; min-width: 0; margin: 0; font-size: 20px; font-weight: 700; }
#sarosRoot .close { width: 36px; height: 36px; margin-right: -6px; padding: 0; border: 0; background: transparent; font-size: 16px; color: var(--muted); }
#sarosRoot .close:hover { background: var(--surface-high); color: var(--on-surface); }
#sarosRoot .link, #sarosRoot .actions button {
    background: transparent; color: var(--gold); border: 1px solid #ffd70055; border-radius: 8px;
    padding: 4px 10px; font-size: 14px; text-decoration: none;
}
#sarosRoot .link:hover, #sarosRoot .actions button:hover { background: #ffd70014; }
#sarosRoot .intro { color: var(--muted); font-size: 12.5px; margin: 4px var(--gutter) 8px; flex: none; }

/* ---------- Series browser ---------- */
#sarosRoot .body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#sarosRoot .controls { flex: none; }
#sarosRoot .members { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: 8px; }
#sarosRoot .picker { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 0 var(--gutter) 10px; }
#sarosRoot .picker button {
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--gold); font-size: 24px; line-height: 1;
}
#sarosRoot .picker button:hover:not(:disabled) { background: var(--surface-high); }
#sarosRoot .picker button:disabled { opacity: .3; cursor: default; }
#sarosRoot .picker select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    font: 600 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--gold);
    background: var(--surface-high) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23ffd700'/%3E%3C/svg%3E") no-repeat right 14px center;
    border: 1px solid #ffd70099; border-radius: 20px;
    padding: 8px 34px 8px 16px;
}
#sarosRoot .picker select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

#sarosRoot .card { background: var(--surface-high); border-radius: 20px; padding: 16px 20px; margin: 4px var(--gutter) 0; }
#sarosRoot .card h3 { margin: 0 0 8px; color: var(--gold); font-size: 15px; font-weight: 500; }
#sarosRoot .card dl { margin: 0; }
#sarosRoot .card dl div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; }
#sarosRoot .card dt { color: var(--muted); }
#sarosRoot .card dd { margin: 0; text-align: right; font: 13px/1.45 ui-monospace, Menlo, monospace; }
#sarosRoot .wide-only { display: none; }

#sarosRoot .count { color: var(--muted); font-size: 12px; font-weight: 500; padding: 16px var(--gutter) 4px; }
#sarosRoot .list { list-style: none; margin: 0; padding: 0; }
#sarosRoot .list li + li { border-top: 1px solid #ffffff0d; margin-left: 52px; }
#sarosRoot .list li + li .row { margin-left: -52px; width: calc(100% + 52px); }
#sarosRoot .row {
    display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 12px;
    width: 100%; padding: 10px var(--gutter); text-align: left;
    background: transparent; border: 0; border-radius: 0;
}
#sarosRoot .row:hover { background: var(--surface-high); }
#sarosRoot .row.selected { background: #ffd70014; box-shadow: inset 3px 0 0 var(--gold); }
#sarosRoot .row .dot { width: 12px; height: 12px; border-radius: 50%; justify-self: center; }
#sarosRoot .row .txt { min-width: 0; }
#sarosRoot .row .date { display: block; font-weight: 500; }
#sarosRoot .row .meta { display: block; color: var(--muted); font-size: 12.5px; }
#sarosRoot .row .meta b { color: var(--gold); font: 500 12px ui-monospace, Menlo, monospace; }
#sarosRoot .row .go { color: var(--muted); font-size: 18px; }

#sarosRoot footer { flex: none; padding: 8px var(--gutter) max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #ffffff10; }
#sarosRoot .primary {
    width: 100%; height: 48px; border: 0; border-radius: 24px;
    background: var(--gold); color: #221b00; font-size: 15px; font-weight: 600;
}
#sarosRoot .primary:hover { background: #ffe14d; }

/* A modal widens on a big window, wide enough for two columns. */
@media (min-width: 1000px) {
    #sarosRoot:not(.embedded) .panel.series { width: min(960px, 100%); }
}
/* Two columns from 880px of the view's own width (SurfaceTwoColumnMinWidth in AdaptiveShell.kt): the
   picker and summary on the left, the member list on the right, as SarosView.kt's 0.48 / 0.52. */
@container saros-panel (min-width: 880px) {
    #sarosRoot .series .body { flex-direction: row; }
    #sarosRoot .series .controls { flex: 0 0 48%; overflow: auto; overscroll-behavior: contain; padding-bottom: 16px; border-right: 1px solid var(--outline); }
    #sarosRoot .wide-only { display: block; margin-top: 12px; }
    #sarosRoot .narrow-only { display: none; }
}

/* ---------- Panorama ---------- */
#sarosRoot .legend {
    display: flex; gap: 12px; flex: none; overflow-x: auto; white-space: nowrap;
    padding: 0 var(--gutter) 8px; font-size: 11.5px; color: var(--muted);
}
#sarosRoot .legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; }
#sarosRoot .legend i.dot { width: 8px; height: 8px; border-radius: 50%; vertical-align: 0; }
#sarosRoot .stage {
    flex: 1; min-height: 160px; position: relative;
    background: var(--bg-deep); border-top: 1px solid var(--outline); border-bottom: 1px solid var(--outline);
}
#sarosRoot .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#sarosRoot .stage canvas:active { cursor: grabbing; }
#sarosRoot .picked { flex: none; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
#sarosRoot .picked .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 var(--gutter) 10px 52px; }
#sarosRoot .picked .inex { margin-right: auto; color: var(--gold); font-weight: 600; }

/* ---------- Narrow screens: a modal goes full screen ---------- */
@media (max-width: 820px) {
    #sarosRoot:not(.embedded) { padding: 0; place-items: stretch; }
    #sarosRoot:not(.embedded) .panel { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
    #sarosRoot:not(.embedded) .head { padding-top: max(10px, env(safe-area-inset-top)); }
}