.swma-machine-view { min-height: 100vh; padding: clamp(72px, 8vw, 120px) 20px 100px;
  background: #080b10; color: #d8dee9; }
.swma-machine-view[hidden] { display: none; }
.swma-machine-inner { width: min(980px, 100%); margin: 0 auto; }
.swma-machine-head { display: flex; align-items: center; justify-content: space-between;
  gap: 18px; margin-bottom: 22px; color: #8d98a8; font: 600 .78rem/1.4 ui-monospace,
  SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-transform: uppercase;
  letter-spacing: .08em; }
.swma-machine-head nav { display: flex; flex-wrap: wrap; gap: 14px; }
.swma-machine-head a { color: #57d6bf; text-decoration: none; text-transform: none;
  letter-spacing: 0; }
.swma-machine-head a:hover { text-decoration: underline; }
.swma-machine-view pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 500 clamp(.78rem, 1.25vw, .94rem)/1.72 ui-monospace, SFMono-Regular, Menlo,
  Monaco, Consolas, monospace; color: #d8dee9; background: transparent; border: 0;
  border-radius: 0; padding: 0; box-shadow: none; }
.swma-crawler-view { min-height: 100vh; padding: clamp(58px, 7vw, 92px) 20px 110px;
  background: #f4f7fb; color: #172033; }
.swma-crawler-view[hidden] { display: none; }
.swma-crawler-inner { width: min(1120px, 100%); margin: 0 auto; }
.swma-crawler-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 28px; margin-bottom: 26px; }
.swma-crawler-head h1 { margin: 5px 0 8px; color: #172033; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.swma-crawler-head p { max-width: 760px; margin: 0; color: #59677e; }
.swma-crawler-kicker { color: #1769e0; font: 750 .76rem/1.2 ui-monospace, SFMono-Regular,
  Menlo, Monaco, Consolas, monospace; text-transform: uppercase; letter-spacing: .08em; }
.swma-crawler-status { flex: 0 0 auto; padding: 7px 11px; border: 1px solid #b9d5ff;
  border-radius: 999px; background: #eaf3ff; color: #1259bd; font-size: .78rem; font-weight: 750; }
.swma-crawler-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  margin-bottom: 18px; }
.swma-crawler-grid > div { padding: 14px 16px; border: 1px solid #dce3ed; border-radius: 10px;
  background: #fff; box-shadow: 0 2px 7px rgba(32,48,74,.04); }
.swma-crawler-grid > div:first-child, .swma-crawler-grid > div:nth-child(2) { grid-column: 1 / -1; }
.swma-crawler-grid span { display: block; margin-bottom: 4px; color: #6c788b; font-size: .72rem;
  font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.swma-crawler-grid strong { display: block; color: #172033; font-size: .9rem; overflow-wrap: anywhere; }
.swma-crawler-card { margin-top: 16px; padding: clamp(18px, 3vw, 28px); border: 1px solid #dce3ed;
  border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(32,48,74,.05); }
.swma-crawler-card h2 { margin: 0 0 16px; color: #172033; font-size: 1.12rem; }
.swma-crawler-card pre { max-height: 620px; margin: 0; padding: 16px; overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid #dde5ef; border-radius: 8px;
  background: #f8fafc; color: #25334a; font: 500 .78rem/1.62 ui-monospace, SFMono-Regular,
  Menlo, Monaco, Consolas, monospace; }
.swma-crawler-card details + details { margin-top: 10px; }
.swma-crawler-card summary { padding: 8px 0; color: #1769e0; cursor: pointer; font-weight: 750; }
.swma-crawler-rendered { max-height: 720px; padding: 22px; overflow: auto; border: 1px solid #dde5ef;
  border-radius: 8px; color: #172033; background: #fff; }
.swma-crawler-rendered img { max-width: 100%; height: auto; }
.swma-crawler-rendered a { color: #125fc7; }
.swma-crawler-rendered + details { margin-top: 12px; }
.swma-crawler-empty { margin: 0; color: #6c788b; }
.swma-view-toggle { position: fixed; z-index: 950; left: 50%; bottom: 18px;
  transform: translateX(-50%); display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  background: rgba(13,17,24,.9); box-shadow: 0 7px 24px rgba(0,0,0,.3);
  backdrop-filter: blur(12px); }
.swma-view-toggle button { display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 13px; border: 0; border-radius: 999px;
  background: transparent; color: rgba(255,255,255,.58); cursor: pointer;
  font: 650 .78rem/1 system-ui, sans-serif; letter-spacing: -.01em; }
.swma-view-toggle button:hover { color: #fff; }
.swma-view-toggle button[aria-checked="true"] { color: #fff; background: rgba(255,255,255,.1); }
.swma-view-toggle i { width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.28); }
.swma-view-toggle button[aria-checked="true"] i { background: #12bfa6; }
@media (max-width: 620px) {
  .swma-machine-view { padding-inline: 16px; }
  .swma-machine-head { align-items: flex-start; flex-direction: column; }
  .swma-crawler-view { padding-inline: 12px; }
  .swma-crawler-head { flex-direction: column; }
  .swma-crawler-grid { grid-template-columns: 1fr; }
  .swma-crawler-grid > div { grid-column: auto !important; }
  /* The fixed three-mode pill obscures form and article text at phone widths.
     Machine discovery remains available through the alternate links in <head>. */
  .swma-view-toggle button { padding: 0 10px; min-height: 38px; }
}


.swma-view-hidden { display:none !important; }
#swma-views { font:16px/1.6 system-ui,sans-serif; text-align:left; }
#swma-views *, #swma-views *::before, #swma-views *::after { box-sizing:border-box; }
#swma-views [hidden] { display:none !important; }
#swma-views .swma-view-toggle { z-index:99999; max-width:calc(100vw - 16px); bottom:max(18px,env(safe-area-inset-bottom)); }
#swma-views button:focus-visible, #swma-views a:focus-visible { outline:2px solid #12bfa6; outline-offset:3px; }
#swma-views h2 { line-height:1.25; }
#swma-views .swma-crawler-head h2 { margin:5px 0 8px; color:#172033; font-size:clamp(1.8rem,4vw,2.8rem); }
#swma-views .swma-crawler-rendered { overflow-wrap:anywhere; }
#swma-views .swma-crawler-rendered * { color:inherit; font-family:inherit; }
#swma-views .swma-crawler-rendered h1 { font-size:2rem; line-height:1.2; }
#swma-views .swma-crawler-rendered h2 { font-size:1.5rem; }
#swma-views .swma-crawler-rendered a { color:#125fc7; }
html[data-swma-view="agents"] body { background:#080b10; }
html[data-swma-view="crawlers"] body { background:#f4f7fb; }
@media print { #swma-views { display:none !important; } .swma-view-hidden { display:revert !important; } }