/* Adapted from the approved public architecture preview. Scoped to Overview. */
.public-architecture { color-scheme:dark;--bg:#181a25;--panel:#1f2435;--edge:#35415b;--text:#c0caf5;--muted:#9aa8c9;--blue:#7aa2f7;--cyan:#7dcfff;--mint:#73daca;--amber:#e0af68;--purple:#bb9af7 }
.public-architecture * { box-sizing:border-box }
.public-architecture { margin:0;background:radial-gradient(ellipse at 80% 0,#232d46 0,transparent 50%),var(--bg);color:var(--text);font:15px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif }
.public-architecture { max-width:1480px;margin:auto;padding:40px 48px 26px }
.public-architecture header { display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:25px }
.public-architecture .arch-eyebrow, .public-architecture .arch-lane-label { font:600 11px/1.5 ui-monospace,monospace;letter-spacing:2px;color:var(--cyan);text-transform:uppercase }
.public-architecture .arch-eyebrow { margin:0 0 6px }
.public-architecture .arch-architecture-title { font-size:38px;line-height:1.15;letter-spacing:-1.3px;margin:0 0 10px }
.public-architecture header p { margin:0;color:var(--muted) }
.public-architecture .arch-preview { border:1px solid var(--edge);padding:8px 12px;border-radius:6px;font:11px ui-monospace,monospace;letter-spacing:1px;white-space:nowrap }
.public-architecture .arch-legend { display:flex;gap:23px;flex-wrap:wrap;font-size:12px;color:var(--muted);border-block:1px solid var(--edge);padding:14px 0;margin-bottom:25px }
.public-architecture .arch-legend span { display:flex;align-items:center;gap:8px }
.public-architecture .arch-dot { width:6px;height:6px;border-radius:50%;background:var(--mint) }
.public-architecture .arch-dot.arch-planned { background:var(--purple) }
.public-architecture .arch-sample { width:23px;border-top:2px solid var(--cyan) }
.public-architecture .arch-sample.management { border-color:var(--purple);border-top-style:dotted }
.public-architecture .arch-sample.arch-future { border-color:var(--purple);border-top-style:dashed }
.public-architecture .arch-lane-label { display:flex;align-items:center;gap:12px;margin:0 0 12px }
.public-architecture .arch-lane-label:after { content:'';height:1px;background:var(--edge);flex:1 }
.public-architecture .arch-lane-label em { font:12px ui-sans-serif,system-ui;letter-spacing:0;text-transform:none;color:var(--muted) }
.public-architecture .arch-hosts { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px }
.public-architecture .arch-host { border:1px solid var(--edge);background:linear-gradient(125deg,#232b40b3,#1d2130);border-radius:10px;padding:20px }
.public-architecture .arch-host-head { display:flex;gap:12px;align-items:center;margin-bottom:17px }
.public-architecture .arch-logo { width:25px;height:25px; }
.public-architecture .arch-host-title { margin:0;font-size:20px }
.public-architecture small { display:block;color:var(--muted);font-size:12px;line-height:1.5 }
.public-architecture .arch-tag { margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:10px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.7px;color:var(--mint);white-space:nowrap }
.public-architecture .arch-tag.arch-plan { color:var(--purple) }
.public-architecture .arch-services { display:grid;grid-template-columns:repeat(4,1fr);gap:9px }
.public-architecture .arch-service { display:flex;gap:8px;align-items:center;background:#181c2b;border:1px solid #303950;border-radius:6px;padding:10px }
.public-architecture .arch-service .arch-logo { width:20px;height:20px;flex-shrink:0 }
.public-architecture .arch-service b { font-size:12px;font-weight:600 }
.public-architecture .arch-service small { font-size:10px;line-height:1.4 }
.public-architecture .arch-mini { font-size:24px;color:var(--cyan);line-height:1 }
.public-architecture .host-foot { display:flex;gap:14px;flex-wrap:wrap;margin:13px 0 0;font-size:11px;color:var(--muted) }
.public-architecture .arch-private-path { display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr;align-items:center;gap:10px;margin-top:14px;background:#192130;border:1px solid #34465c;border-radius:7px;padding:12px 18px }
.public-architecture .arch-private-path b { font-size:13px }
.public-architecture .arch-private-path small { font-size:11px }
.public-architecture .arch-arrow { color:var(--cyan);font-size:24px;text-align:center }
.public-architecture .arch-path-caption { font-size:11px;color:var(--muted);margin:7px 0 25px }
.public-architecture .arch-export { display:grid;grid-template-columns:1.1fr 48px 1fr 48px .8fr 48px 1.1fr;align-items:stretch;margin-top:12px }
.public-architecture .arch-node { border:1px solid var(--edge);background:#1d2333;border-radius:8px;padding:16px;position:relative;min-width:0 }
.public-architecture .arch-node h3 { font-size:16px;margin:9px 0 3px }
.public-architecture .arch-node .arch-tag { margin:0 }
.public-architecture .arch-node .arch-logo { width:23px;height:23px }
.public-architecture .arch-node p { font-size:12px;color:var(--muted);margin:5px 0 0 }
.public-architecture .arch-node.arch-publisher { border-color:#42766f;background:linear-gradient(135deg,#20332f,#242535) }
.public-architecture .arch-join { display:flex;justify-content:center;align-items:center }
.public-architecture .arch-join svg { width:100%;height:18px;overflow:visible }
.public-architecture .arch-node-meta { margin-top:10px;font:10px ui-monospace,monospace;color:var(--cyan) }
.public-architecture .arch-notice { padding:10px 14px;margin:12px 0 25px;border-left:2px solid var(--mint);background:#73daca09;font-size:12px;color:var(--muted) }
.public-architecture .arch-bottom { display:grid;grid-template-columns:1.25fr 1fr;gap:22px }
.public-architecture .arch-section { border:1px solid var(--edge);border-radius:9px;padding:18px }
.public-architecture .arch-section h3 { font-size:15px;margin:0 0 14px }
.public-architecture .arch-iot { display:flex;align-items:center;gap:10px }
.public-architecture .arch-iot .arch-step { flex:1;font-size:12px }
.public-architecture .arch-iot b { display:block }
.public-architecture .arch-iot .arch-dash { color:var(--purple);font:20px ui-monospace,monospace }
.public-architecture .arch-iot .arch-step:first-child .arch-logo { filter:invert(80%) sepia(30%) saturate(700%) hue-rotate(170deg) }
.public-architecture .arch-iot .arch-logo { width:20px;height:20px;margin-bottom:5px }
.public-architecture .arch-section p { font-size:11px;color:var(--muted);margin:12px 0 0 }
.public-architecture .arch-ops-row { display:flex;gap:10px;align-items:flex-start;margin:9px 0 }
.public-architecture .arch-ops-row .arch-logo { width:20px;height:20px }
.public-architecture .arch-ops-row b { font-size:12px }
.public-architecture .arch-ops-row small { font-size:11px }
.public-architecture .mgmt-line { border-bottom:2px dotted var(--purple);display:inline-block;min-width:30px;margin:0 5px 3px }
.public-architecture .notes { margin-top:18px;border-top:1px solid var(--edge);padding-top:12px;font-size:12px;color:var(--muted) }
.public-architecture summary { cursor:pointer;list-style:none;color:var(--text) }
.public-architecture summary:before { content:'＋';color:var(--blue);margin-right:8px }
.public-architecture details[open] summary:before { content:'−' }
.public-architecture details ul { padding-left:24px;font-size:12px;columns:2 }
.public-architecture footer { display:flex;justify-content:space-between;font:10px ui-monospace,monospace;color:var(--muted);margin-top:23px;letter-spacing:.4px }
.public-architecture button:focus-visible, .public-architecture summary:focus-visible { outline:2px solid var(--cyan);outline-offset:5px }
@media(max-width:1350px) {
.public-architecture { padding:28px }
.public-architecture .arch-services { grid-template-columns:repeat(2,1fr) }
.public-architecture .arch-export { grid-template-columns:1fr 30px 1fr 30px .8fr 30px 1fr }
.public-architecture .arch-node { padding:13px }
.public-architecture .arch-bottom { grid-template-columns:1fr 1fr }
}
@media(max-width:700px) {
.public-architecture { padding:23px 18px }
.public-architecture header { align-items:flex-start }
.public-architecture .arch-architecture-title { font-size:30px;max-width:250px }
.public-architecture .arch-eyebrow { font-size:9px;letter-spacing:1.5px }
.public-architecture header p { font-size:12px }
.public-architecture .arch-preview { font-size:9px;padding:7px;margin-top:2px }
.public-architecture .arch-legend { gap:12px 18px;font-size:10px;margin-bottom:22px }
.public-architecture .arch-hosts { grid-template-columns:1fr;gap:14px }
.public-architecture .arch-host { padding:16px }
.public-architecture .arch-services { grid-template-columns:repeat(2,1fr) }
.public-architecture .arch-service b { font-size:12px }
.public-architecture .arch-service small { font-size:10px }
.public-architecture .arch-private-path { grid-template-columns:1fr;gap:6px;text-align:center;padding:15px }
.public-architecture .arch-private-path .arch-arrow { transform:rotate(90deg);font-size:19px;height:22px }
.public-architecture .arch-lane-label { font-size:10px;letter-spacing:1.2px }
.public-architecture .arch-lane-label em { display:none }
.public-architecture .arch-export { grid-template-columns:1fr }
.public-architecture .arch-node { padding:16px;display:grid;grid-template-columns:30px 1fr;column-gap:10px }
.public-architecture .arch-node>.arch-logo { grid-column:1;grid-row:1/4 }
.public-architecture .arch-node>.arch-tag, .public-architecture .arch-node>h3, .public-architecture .arch-node>p, .public-architecture .arch-node>.arch-node-meta { grid-column:2 }
.public-architecture .arch-node h3 { margin:4px 0 }
.public-architecture .arch-join { height:25px }
.public-architecture .arch-join svg { width:25px;transform:rotate(90deg) }
.public-architecture .arch-notice { font-size:11px }
.public-architecture .arch-bottom { grid-template-columns:1fr;gap:14px }
.public-architecture .arch-iot { display:grid;grid-template-columns:1fr;gap:4px }
.public-architecture .arch-iot .arch-step { min-width:0;display:grid;grid-template-columns:28px 1fr;column-gap:9px }
.public-architecture .arch-iot .arch-step .arch-logo { grid-column:1;grid-row:1/3;margin-top:3px }
.public-architecture .arch-iot .arch-step b, .public-architecture .arch-iot .arch-step small { grid-column:2 }
.public-architecture .arch-iot .arch-dash { height:20px;line-height:20px;margin-left:38px;transform:rotate(90deg);width:20px }
.public-architecture .arch-section { padding:16px }
.public-architecture .arch-section h3 { font-size:14px }
.public-architecture details ul { columns:1 }
.public-architecture footer { gap:20px;font-size:9px }
.public-architecture .arch-tag { font-size:9px }
.public-architecture .arch-host-head .arch-host-title { font-size:19px }
}
.public-architecture .arch-hosts .arch-services { grid-template-columns:repeat(2,minmax(0,1fr)) }
.public-architecture .arch-hosts .arch-host { align-self:stretch }
.public-architecture .arch-host-head { margin-bottom:16px }
.public-architecture .arch-host { padding-bottom:20px }
.public-architecture .arch-preview { font-size:10px }
@media(max-width:700px) {
.public-architecture header { display:block }
.public-architecture .arch-preview { display:inline-block;margin-top:16px }
.public-architecture .arch-host-head .arch-tag { font-size:9px }
}


/* Fit the approved diagram into the portfolio workspace, retaining readable labels. */
.public-architecture { padding: 28px 0 0; max-width: none; background: none; }
.public-architecture .arch-logo { flex-shrink: 0; }
.public-architecture .arch-service { min-width: 0; }
.public-architecture .arch-service small { font-size: 11px; }
.public-architecture .arch-lane-label { font-weight: 600; }
.public-architecture .arch-section { margin: 0; }
@media (max-width: 700px) {
  .public-architecture { padding: 20px 0 0; }
  .public-architecture .arch-host { padding: 14px; }
  .public-architecture .arch-service { padding: 9px 7px; gap: 6px; }
  .public-architecture .arch-host-head { gap: 9px; flex-wrap: wrap; }
  .public-architecture .arch-tag { letter-spacing: .3px; }
}
@media (min-width: 1201px) and (max-width: 1450px) {
  .public-architecture .arch-export { grid-template-columns: 1fr 24px 1fr 24px .8fr 24px 1fr; }
}