/* Skylight:One app prototype — layout glue on top of sa.css (Skylight:One App Design System). */
html, body { height: 100%; }
body { display: flex; flex-direction: column; overflow: hidden; }
.proto-flag { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; padding: 6px var(--space-4); background: var(--warn-soft); color: var(--text); font: 500 13px/1.4 var(--font-body); border-bottom: 1px solid var(--line-strong); text-align: center; }
.proto-flag .sa-icon { font-size: 18px; color: var(--warn); }
.sa-app { flex: 1; min-height: 0; height: auto; }
.sa-glyph { color: inherit; }
.sa-rail { overflow-y: auto; overflow-x: hidden; }
.sa-rail__btn { width: 100%; }
.proto-menu { display: none; }
.proto-usage { font-size: 12px; color: var(--text-muted); }
.sa-main { position: relative; }
.sa-main:focus { outline: none; }
.sa-main.is-flush { padding: 0; }
.sa-wstab { min-height: 100%; }
.proto-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 19; }

/* Overlays */
.proto-layer { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-6); background: var(--scrim); }
.proto-layer .sa-dialog { max-height: calc(100vh - 48px); }
.proto-settings { width: min(980px, 100%); }
.proto-settings__grid { display: grid; grid-template-columns: 236px 1fr; min-height: 0; flex: 1; overflow: hidden; }
.proto-settings__nav { padding: var(--space-4); border-right: 1px solid var(--line); background: var(--bg-2); overflow-y: auto; }
.proto-settings__panel { overflow-y: auto; padding: var(--space-6); display: grid; gap: var(--space-6); align-content: start; }
.proto-toasts { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: var(--z-toast); display: grid; gap: var(--space-2); }
.proto-toasts .sa-toast { animation: proto-in var(--dur-slow) var(--ease); }
@keyframes proto-in { from { opacity: 0; transform: translateY(8px); } }

/* Home */
.proto-home-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-4); align-items: start; }
.proto-news-media { height: 150px; background: radial-gradient(120% 120% at 20% 0%, var(--accent-soft), transparent 60%), var(--bg-2); border-bottom: 1px solid var(--line); display: grid; place-items: center; }
.proto-news-media img { width: 72px; opacity: .95; }
.proto-guides { display: grid; gap: var(--space-3); }
.proto-guides .sa-card { display: grid; gap: 6px; text-align: left; cursor: pointer; color: var(--text); }
.proto-guides .sa-card:hover { border-color: var(--accent); }
.proto-recent td .sa-btn { margin: -6px 0; }

/* Session */
.proto-session { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.proto-session .sa-vbar__url input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: 400 14px/1 var(--font-body); padding: 0; }
.proto-session .sa-vbar__url input:focus-visible { outline: none; }
.proto-session .sa-vbar__url:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.proto-timer { font: 500 13px/1 var(--font-mono); color: var(--text-muted); min-width: 5ch; }
.proto-screen { margin: var(--space-3); border-radius: var(--r-sm); overflow: auto; background: var(--viewport-bg); position: relative; }
.proto-escape-hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 2; background: var(--tooltip-bg); color: var(--tooltip-text); font: 500 12px/1 var(--font-body); padding: 8px 12px; border-radius: var(--r-full); box-shadow: var(--shadow-popover); pointer-events: none; }
.proto-boot { height: 100%; display: grid; place-items: center; padding: var(--space-8); }
.proto-boot .sa-card { width: min(520px, 100%); display: grid; gap: var(--space-4); }
body.is-fs .proto-flag, body.is-fs .sa-topbar, body.is-fs .sa-rail, body.is-fs .sa-wstabs { display: none; }
body.is-fs .sa-app { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; }
body.is-fs .sa-main { grid-column: 1 / -1; grid-row: 1 / -1; }

/* The remote page is a third-party website streamed into the viewport: it keeps its own neutral colours in both themes. */
.remote { --r-bg: #ffffff; --r-ink: #1f2328; --r-muted: #59636e; --r-link: #0b57d0; --r-line: #e3e6ea; background: var(--r-bg); color: var(--r-ink); min-height: 100%; font: 400 15px/1.55 Arial, Helvetica, sans-serif; }
.remote__bar { display: flex; gap: 12px; align-items: center; padding: 16px 28px; border-bottom: 1px solid var(--r-line); }
.remote__logo { font: 700 20px/1 Georgia, serif; color: var(--r-ink); }
.remote__q { flex: 1; max-width: 560px; border: 1px solid var(--r-line); border-radius: 999px; padding: 9px 16px; color: var(--r-ink); background: #f6f8fa; }
.remote__body { padding: 20px 28px 40px; max-width: 760px; }
.remote__meta { color: var(--r-muted); font-size: 13px; margin: 0 0 18px; }
.remote__hit { margin: 0 0 22px; }
.remote__hit a { color: var(--r-link); font-size: 18px; text-decoration: none; cursor: pointer; }
.remote__hit a:hover { text-decoration: underline; }
.remote__hit cite { display: block; color: #146c2e; font-style: normal; font-size: 13px; }
.remote__hit p { margin: 4px 0 0; color: var(--r-muted); }
.remote__article h1 { font: 700 26px/1.25 Georgia, serif; margin: 6px 0 12px; }
.remote__article p { margin: 0 0 12px; }
.remote mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }

/* Drive */
.proto-drive { height: 100%; }
.proto-drive .sa-drive__list { overflow: hidden; }
.proto-drive__rows { overflow-y: auto; }
.proto-drive__detail { padding: var(--space-6); display: grid; gap: var(--space-4); align-content: start; overflow-y: auto; }
.proto-drive__back { display: none; }

/* Wizard */
.proto-country-list { max-height: 228px; overflow-y: auto; padding: var(--space-1); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.proto-search { position: relative; }
.proto-search .sa-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.proto-search .sa-input { padding-left: 38px; }

/* Responsive */
@media (max-width: 1023px) {
  .sa-app, .sa-app--open { grid-template-columns: 1fr; }
  .sa-rail { position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w-open); transform: translateX(-100%); transition: transform var(--dur-base) var(--ease); z-index: 20; box-shadow: var(--shadow-modal); }
  .sa-rail .sa-rail__label { display: inline; }
  .sa-rail .sa-rail__meta { justify-items: start; padding: var(--space-2) 10px; }
  .sa-app.rail-open .sa-rail { transform: none; }
  #railToggle { display: none; }
  .proto-menu { display: inline-flex; }
  .sa-wstabs, .sa-main { grid-column: 1; }
  .proto-home-grid { grid-template-columns: 1fr; }
  .sa-drive { grid-template-columns: 1fr; }
  .proto-drive.has-detail .sa-drive__list { display: none; }
  .proto-drive:not(.has-detail) .proto-drive__detail { display: none; }
  .proto-drive__back { display: inline-flex; }
  .proto-settings__grid { grid-template-columns: 1fr; }
  .proto-settings__nav { border-right: 0; border-bottom: 1px solid var(--line); }
  .proto-settings__nav .sa-vnav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
}
@media (max-width: 600px) {
  .proto-layer { padding: 0; }
  .proto-layer .sa-dialog { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; }
  .proto-hide-sm { display: none; }
  .sa-main { padding: var(--space-6) var(--space-4); }
  .sa-choices { --cols: 1 !important; }
  .sa-vbar__url { order: 10; flex-basis: 100%; }
}
.sa-app > * { min-width: 0; }
.sa-main__inner { grid-template-columns: minmax(0, 1fr); }
.proto-toasts .sa-toast:nth-last-child(n+4) { display: none; }
.sa-wstabs { overflow-x: auto; overflow-y: hidden; }
@media (max-width: 600px) { .sa-wstab { padding: 0 var(--space-3); } .sa-wstabs { padding: 0 var(--space-1); } }