/* Service explorer: shares the application's RTL palette and typography. */
[hidden] { display:none !important; }
.explorer-entry, #explorer button, #explorer select { font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:9px 12px; }
.explorer-entry, #explorer button { cursor:pointer; min-height:44px; }
.explorer-entry { color:var(--green-ink); white-space:nowrap; }
#explorer button:hover { background:var(--green-soft); }
#explorer button:disabled { opacity:.55; cursor:default; }
.topbar { max-width:1200px; }
.welcome { padding-block:32px 20px; }
.welcome .examples { margin-top:20px; }
#explorer { position:fixed; inset:72px 0 90px; z-index:25; display:grid; grid-template-columns:380px minmax(0,1fr); pointer-events:none; gap:24px; padding:0 20px; min-height:0; }
.explorer-dock, .explorer-detail { pointer-events:auto; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:auto; overscroll-behavior:contain; }
.explorer-dock { display:flex; flex-direction:column; min-height:0; height:100%; overflow:hidden; }
.explorer-tools { position:sticky; top:0; z-index:2; flex:none; background:var(--surface); padding:16px; border-bottom:1px solid var(--line); }
.explorer-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.explorer-toolbar h2 { font-size:18px; margin:0; flex:1; }
#explorer label { display:block; margin-top:12px; color:var(--ink-2); font-size:13px; }
#explorer select { width:100%; min-width:0; }
.explorer-note { font-size:13px; color:var(--ink-2); line-height:1.7; margin:10px 0 0; }
#explorer-list { overflow-y:scroll; overflow-x:hidden; scrollbar-width:auto; scrollbar-gutter:stable; overscroll-behavior:contain; flex:1 1 0; min-height:0; padding:8px; }
.explorer-row { padding:6px; border-bottom:1px solid var(--line); }
#explorer .explorer-row-button { display:block; text-align:start; width:100%; min-height:64px; border:0; background:transparent; }
#explorer .explorer-row-button:hover, #explorer .explorer-row-button:focus-visible, #explorer .explorer-row-button[aria-current="true"] { background:var(--green-soft); outline:2px solid var(--green); outline-offset:-2px; }
.explorer-row strong { display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.explorer-row strong, .explorer-row small { display:block; overflow-wrap:anywhere; }
.explorer-row small { color:var(--ink-2); margin-top:4px; font-size:12px; }
#explorer .variant-toggle { padding:4px 10px; font-size:12px; min-height:36px; margin:0 12px 6px; }
.explorer-variants { border-inline-start:2px solid var(--green); margin-inline:15px 0; }
.explorer-pagination { position:sticky; bottom:0; z-index:2; flex:none; background:var(--surface); display:flex; gap:8px; align-items:center; justify-content:space-between; padding:12px; border-top:1px solid var(--line); font-size:13px; }
.explorer-detail { padding:clamp(18px,3vw,42px); align-self:start; max-height:100%; }
.explorer-detail h2 { font-size:clamp(20px,2vw,28px); line-height:1.6; }
.explorer-detail p,.explorer-detail li { overflow-wrap:anywhere; }
#explorer .explorer-start { background:#166b42; color:#fff; font-weight:700; width:100%; margin-top:24px; }
#explorer .explorer-start:hover { background:#115433; }
.explorer-open #scroller, .explorer-open footer { margin-inline-start:420px; }
.explorer-wide #explorer { background:var(--bg); padding-block:10px; grid-template-columns:minmax(380px,62%) minmax(0,1fr); }
.explorer-fullscreen > header, .explorer-fullscreen > main, .explorer-fullscreen > footer { visibility:hidden; }
.explorer-fullscreen #explorer { inset:0; padding:12px; background:var(--bg); z-index:100; grid-template-columns:minmax(380px,62%) minmax(0,1fr); }
.explorer-fullscreen #explorer[data-view="list"] { grid-template-columns:minmax(0,1fr); }
@media (min-width:1200px) {
  .explorer-wide #explorer-list, .explorer-fullscreen #explorer-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:8px; }
}
.explorer-status { padding:24px 14px; color:var(--ink-2); }
.explorer-skeleton { height:70px; border-radius:10px; margin:12px; background:var(--surface-2); animation:explorer-pulse 1.2s ease-in-out infinite alternate; }
@keyframes explorer-pulse { to { opacity:.4; } }
@media (max-width:900px) and (min-width:680px) { #explorer { grid-template-columns:380px minmax(0,1fr); gap:10px; padding:0 10px; } .explorer-open #scroller,.explorer-open footer { margin-inline-start:400px; } }
@media (max-width:679px) {
  .topbar { gap:6px; padding:8px 10px; }
  .topbar { flex-wrap:wrap; }
  #explorer, .explorer-wide #explorer, .explorer-fullscreen #explorer { inset:0; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); display:block; background:var(--bg); pointer-events:auto; z-index:100; }
  .explorer-dock,.explorer-detail { height:100%; max-height:100%; border:0; border-radius:0; }
  #explorer[data-view="detail"] .explorer-dock { display:none; }
  #explorer[data-view="list"] .explorer-detail { display:none; }
  #explorer-widen, #explorer-fullscreen { display:none; }
  .explorer-open #scroller,.explorer-open footer { margin-inline-start:0; }
  .explorer-entry { font-size:12px; padding:8px; white-space:normal; max-width:120px; }
}
@media (prefers-reduced-motion:reduce) { .explorer-skeleton { animation:none; } }