/* SAGE Architecture & AI Control workspace */
.arch-page {
  --arch-navy: #0a2440;
  --arch-navy-2: #113a5d;
  --arch-teal: #10a7a4;
  --arch-teal-dark: #087b80;
  --arch-blue: #2d6fd2;
  --arch-purple: #6257d8;
  --arch-green: #178f6b;
  --arch-amber: #c8790a;
  --arch-red: #cc4646;
  --arch-surface: #ffffff;
  --arch-soft: #f7f9fc;
  --arch-line: #dce5ee;
  --arch-muted: #64758b;
  --arch-text: #10243f;
  max-width: 1600px;
}

.arch-page * { box-sizing: border-box; }
.arch-page button, .arch-page input, .arch-page select { font: inherit; }
.arch-page svg { display: block; }
.arch-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.arch-loading,
.arch-error {
  min-height: 360px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 13px;
  color: var(--arch-muted);
  text-align: center;
}
.arch-loading-ring {
  width: 34px;
  height: 34px;
  border: 3px solid #dce8ef;
  border-top-color: var(--arch-teal);
  border-radius: 50%;
  animation: archSpin .75s linear infinite;
}
@keyframes archSpin { to { transform: rotate(360deg); } }

.arch-hero {
  position: relative;
  overflow: hidden;
  padding: 24px 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 83% 10%, rgba(45, 201, 192, .22), transparent 29%),
    radial-gradient(circle at 7% 115%, rgba(50, 113, 184, .25), transparent 40%),
    linear-gradient(120deg, #09213c, #103452 58%, #0b4459);
  border: 1px solid rgba(12, 72, 92, .38);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(8, 31, 55, .17);
}
.arch-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, #000, transparent 92%);
}
.arch-hero-main { position: relative; z-index: 1; min-width: 0; display: flex; align-items: center; gap: 18px; }
.arch-hero-mark {
  width: 58px; height: 58px; flex: none; display: grid; place-items: center;
  color: #dffffc; background: rgba(28, 187, 178, .19); border: 1px solid rgba(82, 224, 214, .25); border-radius: 15px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 24px rgba(4, 23, 41, .22);
}
.arch-hero-mark .arch-icon { width: 29px; height: 29px; }
.arch-eyebrow { color: #7ce0d9; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.arch-hero h1 { margin: 5px 0 6px; font-size: clamp(27px, 2.4vw, 37px); line-height: 1.08; letter-spacing: -.035em; }
.arch-hero p { max-width: 860px; margin: 0; color: #c6d7e5; font-size: 14px; line-height: 1.55; }
.arch-hero-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.arch-button {
  min-height: 39px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  color: var(--arch-text); background: #fff; border: 1px solid #d5e0ea; border-radius: 8px; box-shadow: 0 2px 8px rgba(12, 35, 59, .06);
  font-size: 13px; font-weight: 740; cursor: pointer; transition: transform .14s, border-color .14s, box-shadow .14s;
}
.arch-button:hover:not(:disabled) { transform: translateY(-1px); border-color: #b7c9d9; box-shadow: 0 8px 18px rgba(12, 35, 59, .11); }
.arch-button.primary { color: #fff; background: linear-gradient(135deg, #1bbab1, #0c8f93); border-color: #0b8589; box-shadow: 0 8px 20px rgba(13, 151, 151, .23); }
.arch-button.soft { color: #e9ffff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); box-shadow: none; }
.arch-button.danger { color: var(--arch-red); background: #fff5f5; border-color: #f0c8c8; }
.arch-button.small { min-height: 32px; padding-inline: 10px; font-size: 12px; }
.arch-button:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
.arch-button .arch-icon { width: 15px; height: 15px; }

.arch-status-pill {
  min-height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 7px; border-radius: 999px;
  color: #eaffff; background: rgba(17, 168, 167, .18); border: 1px solid rgba(77, 218, 210, .25); font-size: 12px; font-weight: 720;
}
.arch-status-pill i { width: 7px; height: 7px; background: #53d39c; border-radius: 50%; box-shadow: 0 0 0 4px rgba(83, 211, 156, .1); }
.arch-status-pill.warning i { background: #f4b556; box-shadow: 0 0 0 4px rgba(244, 181, 86, .11); }

.arch-metrics {
  margin-top: 15px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
}
.arch-metric {
  min-width: 0; min-height: 84px; padding: 13px; display: grid; grid-template-columns: 37px minmax(0,1fr); align-items: center; gap: 10px;
  background: var(--arch-surface); border: 1px solid var(--arch-line); border-radius: 11px; box-shadow: 0 5px 16px rgba(19, 43, 71, .055);
}
.arch-metric-icon { width: 37px; height: 37px; display: grid; place-items: center; color: var(--arch-blue); background: #eaf2ff; border-radius: 9px; }
.arch-metric.purple .arch-metric-icon { color: var(--arch-purple); background: #efedff; }
.arch-metric.green .arch-metric-icon { color: var(--arch-green); background: #e7f7f0; }
.arch-metric.amber .arch-metric-icon { color: var(--arch-amber); background: #fff3df; }
.arch-metric.red .arch-metric-icon { color: var(--arch-red); background: #feeeee; }
.arch-metric.teal .arch-metric-icon { color: var(--arch-teal-dark); background: #e0f7f4; }
.arch-metric-copy { min-width: 0; display: grid; gap: 3px; }
.arch-metric-copy small { color: var(--arch-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.arch-metric-copy strong { overflow: hidden; color: var(--arch-text); font-size: 21px; line-height: 1; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.arch-metric-copy em { overflow: hidden; color: #8b9aab; font-size: 9.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.arch-control-grid { margin-top: 15px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); gap: 14px; align-items: stretch; }
.arch-panel { min-width: 0; background: #fff; border: 1px solid var(--arch-line); border-radius: 13px; box-shadow: 0 7px 20px rgba(18, 42, 70, .06); overflow: hidden; }
.arch-panel-head { min-height: 61px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--arch-line); }
.arch-panel-title { min-width: 0; display: flex; align-items: center; gap: 10px; }
.arch-panel-title > span:first-child { width: 36px; height: 36px; flex: none; display: grid; place-items: center; color: var(--arch-teal-dark); background: #e3f8f5; border-radius: 9px; }
.arch-panel-title strong { display: block; color: var(--arch-text); font-size: 15px; }
.arch-panel-title small { display: block; margin-top: 3px; color: var(--arch-muted); font-size: 11px; line-height: 1.4; }
.arch-panel-body { padding: 16px; }

.arch-control-body { padding: 15px 16px 16px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; }
.arch-control-section > label { display: block; margin-bottom: 8px; color: #5b6c83; font-size: 11px; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; }
.arch-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.arch-choice {
  position: relative; min-height: 87px; padding: 12px; display: grid; grid-template-columns: 33px minmax(0,1fr); align-items: stretch; gap: 12px;
  color: var(--arch-text); text-align: left; background: #f9fbfd; border: 1px solid #dfe7ef; border-radius: 10px; cursor: pointer;
  transition: border-color .14s, background .14s, box-shadow .14s, transform .14s;
}
.arch-choice:hover:not(:disabled) { transform: translateY(-1px); border-color: #b9d2dc; box-shadow: 0 7px 18px rgba(17, 49, 78, .07); }
.arch-choice.selected { background: linear-gradient(180deg, #effbfa, #f9fdfd); border-color: #72d3cd; box-shadow: 0 0 0 3px rgba(17,168,167,.07); }
.arch-choice:disabled { cursor: not-allowed; opacity: .53; }
.arch-choice-icon { width: 33px; min-height: 100%; display: grid; place-items: center; color: var(--arch-blue); background: #eaf2ff; border-radius: 8px; }
.arch-choice-icon .arch-icon { width: 17px; height: 17px; }
.arch-choice.model .arch-choice-icon { color: var(--arch-purple); background: #efedff; }
.arch-choice-copy { min-width: 0; align-self: center; display: grid; gap: 3px; }
.arch-choice-copy strong { font-size: 12px; }
.arch-choice-copy small { color: var(--arch-muted); font-size: 9.8px; line-height: 1.4; }
.arch-choice-state { position: absolute; right: 8px; top: 8px; min-height: 19px; padding: 0 6px; display: inline-flex; align-items: center; color: #62758b; background: #eef3f7; border-radius: 999px; font-size: 8.5px; font-weight: 750; }
.arch-choice.selected .arch-choice-state { color: #0c7376; background: #dff7f4; }
.arch-choice-state.missing { color: #a1680d; background: #fff2dd; }
.arch-control-footer { grid-column: 1 / -1; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--arch-line); }
.arch-control-note { color: var(--arch-muted); font-size: 10.5px; line-height: 1.5; }
.arch-control-note b { color: var(--arch-text); }
.arch-control-actions { flex: none; display: flex; gap: 8px; }

.arch-runtime-summary { height: 100%; padding: 16px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; background: linear-gradient(145deg, #f8fcfc, #f7f9fc); }
.arch-runtime-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.arch-runtime-badge { min-height: 28px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; color: #176c5a; background: #e8f8f1; border: 1px solid #bee8d6; border-radius: 999px; font-size: 10px; font-weight: 760; }
.arch-runtime-badge.fallback { color: #95610b; background: #fff4df; border-color: #efd7ac; }
.arch-runtime-model { padding: 14px; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 11px; background: #fff; border: 1px solid var(--arch-line); border-radius: 10px; }
.arch-runtime-model > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #6359df, #2e6fd0); border-radius: 10px; box-shadow: 0 8px 17px rgba(71, 87, 196, .17); }
.arch-runtime-model small, .arch-runtime-model strong, .arch-runtime-model em { display: block; }
.arch-runtime-model small { color: var(--arch-muted); font-size: 10px; }
.arch-runtime-model strong { margin-top: 3px; font-size: 17px; }
.arch-runtime-model em { margin-top: 4px; overflow: hidden; color: #8a99aa; font-size: 9.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.arch-runtime-guardrails { display: grid; gap: 7px; align-content: start; }
.arch-runtime-guardrails span { min-height: 28px; padding: 0 9px; display: flex; align-items: center; gap: 7px; color: #53677e; background: #fff; border: 1px solid #e1e8ef; border-radius: 7px; font-size: 10px; }
.arch-runtime-guardrails .arch-icon { width: 12px; height: 12px; color: var(--arch-green); }
.arch-runtime-link { color: var(--arch-teal-dark); font-size: 10.5px; font-weight: 720; text-decoration: none; }

.arch-tabs { margin-top: 15px; min-height: 52px; padding: 0 8px; display: flex; align-items: stretch; gap: 3px; overflow-x: auto; background: #fff; border: 1px solid var(--arch-line); border-radius: 12px; box-shadow: 0 5px 16px rgba(19,43,71,.05); scrollbar-width: none; }
.arch-tabs::-webkit-scrollbar { display: none; }
.arch-tab { position: relative; min-width: max-content; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; color: #67788e; background: transparent; border: 0; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.arch-tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 999px 999px 0 0; background: transparent; }
.arch-tab:hover { color: var(--arch-text); }
.arch-tab.active { color: var(--arch-teal-dark); }
.arch-tab.active::after { background: var(--arch-teal); }
.arch-tab .arch-icon { width: 14px; height: 14px; }
.arch-workspace { margin-top: 14px; }
.arch-section-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
.arch-section-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.arch-section-stack { display: grid; gap: 13px; }

.arch-principle { padding: 14px; display: grid; grid-template-columns: 31px minmax(0,1fr); align-items: stretch; gap: 10px; background: #fff; border: 1px solid var(--arch-line); border-radius: 10px; }
.arch-principle > span { width: 31px; min-height: 100%; display: grid; place-items: center; color: var(--arch-green); background: #e8f8f1; border-radius: 8px; }
.arch-principle > span .arch-icon { width: 15px; height: 15px; }
.arch-principle strong { display: block; color: var(--arch-text); font-size: 12px; }
.arch-principle p { margin: 4px 0 0; color: var(--arch-muted); font-size: 10px; line-height: 1.55; }

.arch-layer-list { display: grid; gap: 8px; }
.arch-layer { position: relative; padding: 13px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: stretch; gap: 11px; background: #fff; border: 1px solid var(--arch-line); border-radius: 10px; }
.arch-layer + .arch-layer::before { content: ""; position: absolute; left: 30px; top: -9px; width: 1px; height: 9px; background: #b9d4dc; }
.arch-layer-index { width: 36px; min-height: 100%; display: grid; place-items: center; color: var(--arch-teal-dark); background: #e3f8f5; border-radius: 9px; font-size: 12px; font-weight: 800; }
.arch-layer > .arch-authority { align-self: center; }
.arch-layer-copy { min-width: 0; }
.arch-layer-copy strong { display: block; font-size: 12px; }
.arch-layer-copy p { margin: 4px 0 0; color: var(--arch-muted); font-size: 10px; line-height: 1.45; }
.arch-layer-tags { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px; }
.arch-mini-tag { min-height: 20px; padding: 0 6px; display: inline-flex; align-items: center; color: #51667e; background: #f0f4f8; border-radius: 5px; font-size: 8.5px; font-weight: 670; }
.arch-authority { min-height: 25px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 9px; font-weight: 760; text-transform: capitalize; }
.arch-authority.deterministic { color: #176c5a; background: #e8f8f1; }
.arch-authority.llm { color: #5146ba; background: #efedff; }
.arch-authority.hybrid { color: #176086; background: #e9f3fb; }
.arch-authority.human { color: #9a620a; background: #fff4df; }

.arch-flow { display: grid; gap: 0; }
.arch-flow-step { position: relative; min-height: 44px; padding: 7px 8px; display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 9px; }
.arch-flow-step:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 35px; bottom: -7px; width: 1px; background: #c8dbe2; }
.arch-flow-step > span { width: 28px; height: 28px; z-index: 1; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #1bb8af, #0a858a); border-radius: 50%; font-size: 10px; font-weight: 780; }
.arch-flow-step strong { color: var(--arch-text); font-size: 10.5px; font-weight: 660; }

.arch-agent-card { padding: 14px; background: #fff; border: 1px solid var(--arch-line); border-radius: 10px; box-shadow: 0 4px 13px rgba(18,42,70,.045); }
.arch-agent-top { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.arch-agent-icon { width: 33px; height: 33px; display: grid; place-items: center; color: var(--arch-purple); background: #efedff; border-radius: 8px; }
.arch-agent-card h3 { margin: 10px 0 4px; color: var(--arch-text); font-size: 13px; }
.arch-agent-card p { min-height: 34px; margin: 0; color: var(--arch-muted); font-size: 10px; line-height: 1.5; }
.arch-agent-skills { margin-top: 10px; padding-top: 9px; display: flex; flex-wrap: wrap; gap: 5px; border-top: 1px solid var(--arch-line); }
.arch-status-tag { min-height: 21px; padding: 0 7px; display: inline-flex; align-items: center; color: #5f6f83; background: #edf2f6; border-radius: 999px; font-size: 8.5px; font-weight: 760; text-transform: capitalize; }
.arch-status-tag.active { color: #176c5a; background: #e8f8f1; }
.arch-status-tag.evolving { color: #8f5e0d; background: #fff4df; }

.arch-group-card { padding: 13px; background: #fff; border: 1px solid var(--arch-line); border-radius: 10px; }
.arch-group-card strong { display: block; color: var(--arch-text); font-size: 12px; }
.arch-group-list { margin: 9px 0 0; padding: 0; display: grid; gap: 6px; list-style: none; }
.arch-group-list li { display: flex; align-items: center; gap: 7px; color: var(--arch-muted); font-size: 10px; }
.arch-group-list li::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--arch-teal); box-shadow: 0 0 0 3px rgba(17,168,167,.08); }

.arch-table-wrap { width: 100%; overflow-x: auto; }
.arch-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.arch-table th, .arch-table td { padding: 11px 12px; border-bottom: 1px solid var(--arch-line); vertical-align: top; text-align: left; }
.arch-table th { color: #64758a; background: #f8fafc; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.arch-table td { color: #40536b; font-size: 10px; line-height: 1.45; }
.arch-table tbody tr:hover { background: #fbfdff; }
.arch-table tbody tr:last-child td { border-bottom: 0; }
.arch-table strong { color: var(--arch-text); font-size: 10.5px; }
.arch-code { color: #304b68; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 9.5px; }
.arch-table-link { color: var(--arch-teal-dark); font-weight: 720; text-decoration: none; }

.arch-control-card, .arch-risk-card { padding: 13px; display: grid; grid-template-columns: 31px minmax(0,1fr); align-items: stretch; gap: 10px; background: #fff; border: 1px solid var(--arch-line); border-radius: 10px; }
.arch-control-card > span, .arch-risk-card > span { width: 31px; min-height: 100%; display: grid; place-items: center; border-radius: 8px; }
.arch-control-card > span .arch-icon, .arch-risk-card > span .arch-icon { width: 15px; height: 15px; }
.arch-control-card > span { color: var(--arch-green); background: #e8f8f1; }
.arch-risk-card > span { color: var(--arch-amber); background: #fff4df; }
.arch-risk-card.high > span { color: var(--arch-red); background: #feeeee; }
.arch-control-card strong, .arch-risk-card strong { display: block; color: var(--arch-text); font-size: 11.5px; }
.arch-control-card p, .arch-risk-card p { margin: 4px 0 0; color: var(--arch-muted); font-size: 10px; line-height: 1.5; }
.arch-risk-level { margin-left: 5px; color: #8d9bad; font-size: 8.5px; font-weight: 800; text-transform: uppercase; }

.arch-quality-toolbar { padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--arch-line); }
.arch-quality-filters { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.arch-input, .arch-select { height: 34px; padding: 0 10px; color: var(--arch-text); background: #fff; border: 1px solid #cfdae5; border-radius: 7px; font-size: 10.5px; outline: none; }
.arch-input { width: min(280px, 58vw); }
.arch-select { min-width: 130px; }
.arch-input:focus, .arch-select:focus { border-color: var(--arch-teal); box-shadow: 0 0 0 3px rgba(17,168,167,.08); }
.arch-quality-segments { display: flex; gap: 5px; }
.arch-quality-segment { min-height: 31px; padding: 0 9px; color: #607187; background: #f4f7fa; border: 1px solid #dfe6ed; border-radius: 7px; font-size: 10px; font-weight: 700; cursor: pointer; }
.arch-quality-segment.active { color: var(--arch-teal-dark); background: #eaf9f7; border-color: #9ddfd9; }
.arch-empty { min-height: 160px; padding: 28px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--arch-muted); text-align: center; }
.arch-empty > span { width: 43px; height: 43px; display: grid; place-items: center; color: #71849a; background: #eef3f7; border-radius: 11px; }
.arch-empty strong { color: var(--arch-text); font-size: 12px; }
.arch-empty p { margin: 0; font-size: 10px; }
.arch-outcome { min-height: 22px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 999px; color: #63758a; background: #eef2f6; font-size: 8.8px; font-weight: 760; text-transform: capitalize; }
.arch-outcome.passed, .arch-outcome.active, .arch-outcome.approved, .arch-outcome.healthy, .arch-outcome.completed { color: #176c5a; background: #e8f8f1; }
.arch-outcome.failed, .arch-outcome.error, .arch-outcome.deprecated { color: #ab3e3e; background: #feeeee; }
.arch-outcome.running, .arch-outcome.in_progress, .arch-outcome.queued { color: #265fa9; background: #eaf2ff; }
.arch-outcome.attention, .arch-outcome.needs_review, .arch-outcome.needs_maintenance { color: #95610b; background: #fff4df; }

.arch-prompt-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.arch-prompt { min-height: 54px; padding: 10px; display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 8px; color: #36506b; text-align: left; background: #f8fbfd; border: 1px solid #dfe8ef; border-radius: 9px; cursor: pointer; }
.arch-prompt:hover { border-color: #a8d9d5; background: #f1fbfa; }
.arch-prompt > span { width: 28px; height: 28px; display: grid; place-items: center; color: var(--arch-purple); background: #efedff; border-radius: 7px; }
.arch-prompt strong { font-size: 10px; font-weight: 650; line-height: 1.45; }

.arch-roadmap { display: grid; gap: 9px; }
.arch-roadmap-item { position: relative; padding: 13px; display: grid; grid-template-columns: 43px minmax(0,1fr) auto; align-items: start; gap: 11px; background: #fff; border: 1px solid var(--arch-line); border-radius: 10px; }
.arch-roadmap-item + .arch-roadmap-item::before { content: ""; position: absolute; left: 34px; top: -10px; width: 1px; height: 10px; background: #bed5dd; }
.arch-roadmap-phase { width: 43px; height: 43px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #286fd0, #6157d7); border-radius: 11px; font-size: 13px; font-weight: 800; }
.arch-roadmap-copy strong { display: block; color: var(--arch-text); font-size: 12px; }
.arch-roadmap-outcomes { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px; }

.arch-notice { padding: 11px 13px; display: flex; align-items: flex-start; gap: 9px; color: #3c5c78; background: #eef6fd; border: 1px solid #d5e7f7; border-radius: 9px; font-size: 10px; line-height: 1.5; }
.arch-notice.warning { color: #7b571a; background: #fff8eb; border-color: #f0ddbb; }
.arch-notice .arch-icon { width: 15px; height: 15px; flex: none; color: var(--arch-blue); }
.arch-notice.warning .arch-icon { color: var(--arch-amber); }

/* Reclaim the outer page margin/gutter and let the layout use the full available width. */
.view.arch-page { max-width: none; padding: 20px 22px 48px; }
.arch-hero p { max-width: none; }

@media (max-width: 1300px) {
  .arch-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .arch-section-grid.three { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 1050px) {
  .arch-control-grid { grid-template-columns: 1fr; }
  .arch-control-body { grid-template-columns: 1fr; }
  .arch-control-footer { grid-column: auto; }
  .arch-runtime-summary { min-height: 300px; }
}
@media (max-width: 760px) {
  .arch-hero { grid-template-columns: 1fr; padding: 19px; }
  .arch-hero-actions { justify-content: flex-start; }
  .arch-metrics, .arch-section-grid, .arch-section-grid.three, .arch-prompt-grid { grid-template-columns: 1fr; }
  .arch-choice-grid { grid-template-columns: 1fr; }
  .arch-control-footer { align-items: stretch; flex-direction: column; }
  .arch-control-actions, .arch-control-actions .arch-button { width: 100%; }
  .arch-quality-toolbar { align-items: stretch; flex-direction: column; }
  .arch-quality-filters, .arch-input, .arch-select { width: 100%; }
  .arch-quality-segments { overflow-x: auto; }
  .arch-layer { grid-template-columns: 36px minmax(0,1fr); }
  .arch-authority { grid-column: 2; justify-self: start; }
  .arch-roadmap-item { grid-template-columns: 43px minmax(0,1fr); }
  .arch-roadmap-item > .arch-status-tag { grid-column: 2; justify-self: start; }
}