/* Shared UI skin. Section styles own composition, never redefine these roles. */
body { font-family:var(--font-family); font-size:var(--type-body); line-height:var(--leading-body); }
html { scrollbar-color:var(--field-border) var(--ink); scrollbar-gutter:stable; }
input,select,textarea { caret-color:var(--accent); }
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
  outline:var(--focus-width) solid var(--accent); outline-offset:var(--focus-offset);
}
/* A clipped drawing surface or segmented zoom needs its ring inside the surface. */
canvas:focus-visible,.sky-zoom-controls button:focus-visible { outline:var(--focus-width) solid var(--accent); outline-offset:-3px; }
.ui-button {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3);
  min-width:var(--ui-compact-height); min-height:var(--ui-control-height);
  padding:var(--space-3) var(--space-4); border:1px solid var(--line); border-radius:var(--ui-radius);
  background:transparent; color:var(--paper); font:inherit; font-size:var(--type-control); line-height:var(--leading-control);
  text-align:center; text-decoration:none;
  transition:transform var(--motion-press) var(--ease-out),background-color var(--motion-hover) ease,border-color var(--motion-hover) ease,color var(--motion-hover) ease;
}
.ui-button--solid { background:var(--accent); border-color:var(--accent); color:var(--ink); }
.ui-button--outline { border-color:var(--line); color:var(--paper); }
.ui-button--accent { border-color:var(--accent); color:var(--accent); }
.ui-button--ghost { border-color:transparent; }
.ui-button--compact { min-height:var(--ui-compact-height); }
.ui-button--pill { min-height:var(--ui-editor-height); border-radius:var(--pill-radius); padding-inline:var(--space-6); }
.ui-icon-button { display:inline-grid; place-items:center; flex-shrink:0; width:var(--ui-compact-height); height:var(--ui-compact-height); min-height:var(--ui-compact-height); padding:0; }
.ui-button:focus-visible { outline:var(--focus-width) solid var(--accent); outline-offset:var(--focus-offset); }
.ui-button svg,.ui-icon-button svg { width:var(--icon-md); height:var(--icon-md); flex-shrink:0; fill:none; stroke:currentColor; stroke-width:var(--icon-stroke); }
.ui-button:not(:disabled):not([aria-disabled="true"]):active { transform:scale(.98); }
@media(hover:hover) and (pointer:fine) {
  .ui-button:not(:disabled):not([aria-disabled="true"]):hover {
    background:var(--ui-surface); border-color:var(--accent); color:var(--accent);
  }
}
button:disabled,select:disabled,input:disabled,textarea:disabled,[aria-disabled="true"] {
  opacity:var(--disabled-opacity); cursor:default;
}
/* Busy remains distinguishable from unavailable. Native disabled still blocks submission. */
[aria-busy="true"],form[aria-busy="true"] button[type="submit"] { cursor:progress; }
.ui-field {
  box-sizing:border-box; width:100%; min-width:0; max-width:100%; min-height:var(--ui-control-height);
  border:1px solid var(--field-border); border-radius:var(--ui-radius); padding:var(--space-3);
  background:var(--ui-surface); color:var(--paper); font:inherit; font-size:var(--type-input); line-height:var(--leading-control);
}
.ui-field::placeholder { color:var(--muted); opacity:1; }
.ui-field:focus-visible { outline-offset:2px; }
.ui-field[aria-invalid="true"] { border-color:var(--field-error); }
.ui-field[readonly] { color:var(--muted); }
/* Labelled compound controls own the outer border and one focus-within ring. */
.ui-field--embedded { border:0; border-radius:0; background:transparent; }
.ui-field--embedded:focus-visible { outline:none; }
.ui-field--overlay { opacity:0; cursor:pointer; }
.ui-field--filter { width:auto; }
.ui-label { display:flex; flex-direction:column; min-width:0; gap:var(--space-2); color:var(--paper); font-size:var(--type-label); }
.ui-feedback,.experience-status,.experience-note,.experience-sources {
  color:var(--muted); font-size:var(--type-caption); line-height:var(--leading-body); overflow-wrap:anywhere;
}
.ui-feedback:empty { display:none; }
.ui-feedback[data-tone="error"],.ui-field-error { color:var(--feedback-error); }
.ui-feedback[data-tone="success"] { color:var(--feedback-success); }
.ui-field-error { font-size:var(--type-caption); line-height:1.5; }
.ui-dialog { width:min(var(--dialog-width,520px),calc(100% - 32px)); max-width:none; max-height:calc(100vh - 32px); max-height:min(var(--dialog-height,100svh),calc(100svh - 32px)); margin:auto; padding:0; border:1px solid var(--line); border-radius:var(--panel-radius); background:var(--ink); color:var(--paper); overflow:hidden; }
.ui-dialog:not([open]) { display:none; }
.ui-dialog[open] { display:flex; flex-direction:column; }
.ui-dialog::backdrop { background:rgb(0 0 0 / .64); }
.ui-dialog--sources { --dialog-width:544px; --dialog-height:600px; }
.ui-dialog-header { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:var(--space-4); padding:var(--space-4) var(--space-4) var(--space-4) var(--space-6); border-bottom:1px solid var(--line); }
.ui-dialog-header h2 { min-width:0; font-size:24px; font-weight:500; line-height:1.3; letter-spacing:-.025em; }
.ui-dialog-body { padding:var(--space-6); min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
/* Trigger-anchored panels; their owners keep layout and native disclosure state. */
.compact-panel { opacity:1; transform:none; transition:opacity var(--motion-hover) var(--ease-out),transform var(--motion-hover) var(--ease-out); }
.compact-panel[data-panel-state="closed"],.compact-panel[data-panel-state="closing"] { opacity:0; transform:translateY(-4px) scale(.98); }
.compact-panel[data-panel-state="closing"] { transition-duration:var(--motion-press); pointer-events:none; }
.compact-panel[data-panel-motion="reduced"] { transform:none; transition-duration:100ms; }
.compact-panel[data-panel-motion="instant"] { transform:none; transition:none; }
body.motion-paused .compact-panel { transform:none; transition:none; }
@media(prefers-reduced-motion:reduce) { .compact-panel,.compact-panel[data-panel-state] { transform:none; transition-duration:100ms; } }
/* Scene timelines keep their own duration; interface motion follows the preference. */
body.motion-paused :is(.ui-button,.planet-choice,.navigation-line,.sound-toggle,.menu-toggle),
body.motion-paused .planet-choice::after,
body.motion-paused .contact-dialog[data-contact-entry]::backdrop { transition:none; animation:none; }
body.motion-paused .ui-button:not(:disabled):not([aria-disabled="true"]):active,body.motion-paused .planet-choice:active { transform:none; }
@media(prefers-reduced-motion:reduce) {
  .ui-button,.planet-choice,.planet-choice::after,.navigation-line,.sound-toggle,.menu-toggle { transition:none; }
  .ui-button:not(:disabled):not([aria-disabled="true"]):active,.planet-choice:active { transform:none; }
  .contact-dialog[data-contact-entry]::backdrop { animation:none; }
}
@media(max-width:420px) {
  .ui-dialog-header { padding-left:var(--space-4); }
  .ui-dialog-body { padding:var(--space-4); }
}