/*
 * Arcology Project Interface Companion v1.0
 * Opt in with .arco-ui on an HTML UI island. Not a site-wide reset.
 * These defaults extend the 2026-09-09 review palette; map to existing tokens.
 * No font downloads, image requests, continuous animation or game-loop hooks.
 */
.arco-ui {
  --arco-bg: #0b0d12;
  --arco-surface: #141820;
  --arco-surface-raised: #1a2029;
  --arco-inset: #0e1218;
  --arco-archive: #1b1b1c;
  --arco-text: #ebe6d8;
  --arco-muted: #9aa3ad;
  --arco-gold: #c9a85c;
  --arco-teal: #3ec6d8;
  --arco-edge: #667581;
  --arco-line: #36414d;
  --arco-brass: #826c43;
  --arco-focus: #3ec6d8;
  --arco-danger: #ffb3b6;
  --arco-success: #9edbc4;
  --arco-warning: #f0ce88;
  --arco-radius: 6px;
  --arco-pad: clamp(1rem, 3vw, 1.75rem);
  --arco-fast: 120ms;
  color: var(--arco-text);
  font-family: inherit;
  color-scheme: dark;
  line-height: 1.55;
}
.arco-ui *, .arco-ui *::before, .arco-ui *::after { box-sizing: border-box; }
.arco-ui [hidden] { display: none !important; }
.arco-ui :where(h1,h2,h3,p,figure,dl) { margin-block: 0; }
.arco-ui :where(h1,h2,h3,p,a,button,label,dd,code) { overflow-wrap: anywhere; }
.arco-ui :where(h1,h2,h3) { line-height: 1.18; text-wrap: balance; }
.arco-ui :where(a) { color: var(--arco-teal); text-underline-offset: .22em; }
.arco-ui :where(button,input,textarea,select) { font: inherit; }
.arco-ui :where(a,button,input,textarea,select,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--arco-focus); outline-offset: 4px;
}
.arco-ui :where(h1,h2,h3,[id]) { scroll-margin-block-start: 6rem; }
.arco-ui .arco-muted { color: var(--arco-muted); }
.arco-ui .arco-eyebrow { color: var(--arco-gold); font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.arco-ui .arco-stack { display: grid; gap: 1rem; min-width: 0; }
.arco-ui .arco-row { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; }
.arco-ui .arco-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,17rem),1fr)); gap: 1rem; }
.arco-ui .arco-icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.arco-ui .arco-icon--small { width: 16px; height: 16px; }
.arco-ui .arco-icon--large { width: 32px; height: 32px; }
.arco-ui .arco-brand { display: inline-flex; gap: .8rem; align-items: center; text-decoration: none; color: var(--arco-text); }
.arco-ui .arco-brand img { width: 48px; height: 48px; flex: none; }
.arco-ui .arco-brand strong { display: block; font-size: .95rem; letter-spacing: .13em; line-height: 1.3; }
.arco-ui .arco-brand small { display: block; color: var(--arco-muted); font-size: .72rem; letter-spacing: .04em; }

/* One architectural frame per main view; repeated cards use the plain variant. */
.arco-ui .arco-panel { position: relative; isolation: isolate; min-width: 0; border: 1px solid var(--arco-line); border-radius: var(--arco-radius); background: var(--arco-surface); }
.arco-ui .arco-panel--framed {
  border-color: var(--arco-brass); padding: 8px;
  background: linear-gradient(135deg,#3b3830 0%,#202630 27%,#111720 67%,#373023 100%);
  box-shadow: 0 16px 40px #0003, inset 0 1px 0 #e4d6b128, inset 0 -1px 0 #0009;
}
.arco-ui .arco-panel--framed::before {
  content: ""; position: absolute; inset: 3px; border: 1px solid #b4a07933; border-radius: 3px;
  pointer-events: none; z-index: -1;
}
.arco-ui .arco-panel__inside { min-width: 0; border: 1px solid #090b10; border-radius: 2px; background: linear-gradient(#1a2029,#141820 8rem); box-shadow: inset 0 1px 0 #82909924; }
.arco-ui .arco-panel__rail { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; min-height: 52px; padding: .65rem 1rem; border-bottom: 1px solid var(--arco-line); background: linear-gradient(#222a34,#19202a); }
.arco-ui .arco-panel__rail .arco-icon { color: var(--arco-gold); }
.arco-ui .arco-panel__rail h2, .arco-ui .arco-panel__rail h3 { font-size: 1rem; font-weight: 600; }
.arco-ui .arco-panel__rail-tail { margin-inline-start: auto; display: flex; align-items: center; gap: .5rem; }
.arco-ui .arco-panel__body { padding: var(--arco-pad); min-width: 0; }
.arco-ui .arco-panel--compact { --arco-pad: 1rem; }
.arco-ui .arco-panel--archive { background: var(--arco-archive); border-color: var(--arco-brass); }
.arco-ui .arco-panel--steel { --arco-brass: #657d88; }
.arco-ui .arco-panel--steel .arco-panel__rail .arco-icon { color: #a8c4d2; }
.arco-ui .arco-fastener {
  position: absolute; width: 5px; height: 5px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(145deg,#cab884,#76613d); box-shadow: 0 1px 1px #0008;
}
.arco-ui .arco-fastener--tl { top: 2px; left: 2px; }
.arco-ui .arco-fastener--tr { top: 2px; right: 2px; }
.arco-ui .arco-fastener--bl { bottom: 2px; left: 2px; }
.arco-ui .arco-fastener--br { bottom: 2px; right: 2px; }
.arco-ui .arco-title-rail { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.arco-ui .arco-title-rail > .arco-icon { color: var(--arco-gold); }
.arco-ui .arco-title-rail::after { content: ""; height: 1px; flex: 1; min-width: 16px; background: linear-gradient(90deg,var(--arco-brass),transparent); }
.arco-ui .arco-divider { border: 0; height: 9px; margin: 1.25rem 0; background: linear-gradient(var(--arco-brass),var(--arco-brass)) center/100% 1px no-repeat, linear-gradient(var(--arco-brass),var(--arco-brass)) left center/1px 9px no-repeat; opacity: .65; }
.arco-ui .arco-seam { position: relative; padding-inline-start: 1.1rem; border-inline-start: 1px solid var(--arco-line); }
.arco-ui .arco-seam::before { content: ""; position: absolute; top: 1rem; inset-inline-start: -1px; width: 8px; height: 20px; border-block: 1px solid var(--arco-brass); pointer-events: none; }

/* Real HTML buttons: state follows :disabled / aria-pressed / aria-busy. */
.arco-ui .arco-button {
  display: inline-flex; gap: .6rem; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: .65rem 1.05rem;
  border: 1px solid #74ccda; border-radius: 4px; color: #eefaff;
  background: linear-gradient(#1c697b,#124856); box-shadow: inset 0 1px 0 #c4f6ff26, 0 2px 2px #0002;
  font-size: .95rem; font-weight: 650; line-height: 1.35; text-align: center; text-decoration: none;
  cursor: pointer; transition: border-color var(--arco-fast), background-color var(--arco-fast), transform var(--arco-fast);
}
.arco-ui .arco-button--gold { background: linear-gradient(#dbc182,#b89a57); border-color: #e0c78c; color: #16171a; }
.arco-ui .arco-button--secondary { background: linear-gradient(#252e3a,#1a222d); border-color: var(--arco-edge); color: var(--arco-text); }
.arco-ui .arco-button--quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--arco-text); }
.arco-ui .arco-button--danger { background: #4e272f; border-color: #c98087; color: #ffe6e8; }
.arco-ui .arco-button--icon { padding: .55rem; }
@media (hover:hover) {
  .arco-ui .arco-button:hover:not(:disabled):not([aria-disabled=true]) { border-color: #f1e5ca; box-shadow: inset 0 1px 0 #ffffff40, 0 2px 2px #0002; }
  .arco-ui .arco-button--quiet:hover:not(:disabled):not([aria-disabled=true]) { background: #ffffff09; }
}
.arco-ui .arco-button:active:not(:disabled):not([aria-disabled=true]) { transform: translateY(1px); box-shadow: inset 0 2px 3px #0005; }
.arco-ui .arco-button[aria-pressed=true] { border-color: var(--arco-gold); box-shadow: inset 0 -3px 0 var(--arco-gold); }
.arco-ui .arco-button:disabled, .arco-ui .arco-button[aria-disabled=true] { background: #222831; color: #9aa3ad; border-color: #46515b; box-shadow: none; cursor: not-allowed; }
.arco-ui .arco-button[aria-busy=true] { cursor: progress; }
.arco-ui .arco-state-mark { display: inline-block; width: .6rem; height: .6rem; border: 2px solid currentColor; transform: rotate(45deg); margin-inline: .15rem; flex: none; }
.arco-ui .arco-field { display: grid; gap: .4rem; }
.arco-ui .arco-label { font-weight: 600; font-size: .95rem; }
.arco-ui .arco-input {
  width: 100%; min-height: 44px; padding: .7rem .8rem; background: var(--arco-inset); border: 1px solid var(--arco-edge); border-radius: 4px; color: var(--arco-text); box-shadow: inset 0 2px 3px #0003;
}
.arco-ui .arco-input::placeholder { color: var(--arco-muted); opacity: 1; }
.arco-ui .arco-input[aria-invalid=true] { border-color: var(--arco-danger); }
.arco-ui .arco-helper { color: var(--arco-muted); font-size: .85rem; }
.arco-ui .arco-error { color: var(--arco-danger); font-size: .9rem; }
.arco-ui .arco-check { display: flex; align-items: flex-start; gap: .7rem; padding-block: .65rem; min-height: 44px; cursor: pointer; }
.arco-ui .arco-check input { width: 20px; height: 20px; margin: .17rem 0 0; accent-color: var(--arco-gold); flex: none; }
.arco-ui .arco-nav { display: flex; align-items: center; gap: .25rem .6rem; flex-wrap: wrap; }
.arco-ui .arco-nav a { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .6rem .5rem; border-block-end: 2px solid transparent; color: var(--arco-muted); text-decoration: none; font-size: .9rem; }
.arco-ui .arco-nav a[aria-current]:not([aria-current="false"]) { color: var(--arco-text); border-block-end-color: var(--arco-gold); }
.arco-ui .arco-nav a:hover { color: var(--arco-text); }
.arco-ui .arco-breadcrumb { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; font-size: .85rem; color: var(--arco-muted); }
.arco-ui .arco-breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; }
.arco-ui .arco-filter { display: flex; gap: .5rem; flex-wrap: wrap; }
.arco-ui .arco-badge { display: inline-flex; gap: .4rem; align-items: center; font-size: .75rem; padding: .25rem .5rem; border: 1px solid var(--arco-line); border-radius: 3px; color: var(--arco-muted); }
.arco-ui .arco-state { padding: 1.25rem; border-inline-start: 2px solid var(--arco-gold); background: #111720; display: grid; gap: .5rem; }
.arco-ui .arco-state--error { border-color: var(--arco-danger); }
.arco-ui .arco-state--success { border-color: var(--arco-success); }
.arco-ui .arco-state > .arco-icon { color: var(--arco-gold); }
.arco-ui .arco-kbd { display: inline-block; border: 1px solid var(--arco-edge); border-bottom-width: 2px; border-radius: 3px; padding: .05rem .4rem; background: var(--arco-inset); font-size: .8rem; }
.arco-ui .arco-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion:reduce) { .arco-ui .arco-button { transition: none; } .arco-ui .arco-button:active:not(:disabled) { transform: none; } }
@media (forced-colors:active) {
  .arco-ui .arco-panel, .arco-ui .arco-panel__inside, .arco-ui .arco-panel__rail, .arco-ui .arco-state, .arco-ui .arco-input { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
  .arco-ui .arco-button { background: ButtonFace; color: ButtonText; border-color: ButtonText; box-shadow: none; }
  .arco-ui .arco-button:disabled { color: GrayText; border-color: GrayText; }
  .arco-ui .arco-button[aria-pressed=true], .arco-ui .arco-nav a[aria-current]:not([aria-current="false"]) { border: 2px solid Highlight; }
  .arco-ui .arco-fastener, .arco-ui .arco-panel--framed::before { display: none; }
  .arco-ui :focus-visible { outline-color: Highlight; }
}