/* Timberline · Security → Architecture feature image. CSS-only 14s loop. All classes/keyframes prefixed tl-arch-. */
.tl-arch{--tl-arch-blue:#4a7cff;--tl-arch-blue-text:#2c5ad6;--tl-arch-tint:#e9eeff;--tl-arch-ink:#1b1b19;--tl-arch-mute:#5e5b55;--tl-arch-field:#ece9e1;--tl-arch-line:#dedad1;--tl-arch-ease:cubic-bezier(.4,0,.2,1);--tl-arch-cycle:14s;
  container-type:inline-size;margin:0;width:100%;max-width:1296px;box-sizing:border-box;
  font-family:"Jakarta","Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;color:var(--tl-arch-ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;text-align:left}
.tl-arch *,.tl-arch *::before,.tl-arch *::after{box-sizing:border-box}
.tl-arch p,.tl-arch ul{margin:0;padding:0}
.tl-arch ul{list-style:none}

.tl-arch-tile{background:#f4f2ec;border:1px solid #e5e2da;border-radius:28px;padding:clamp(12px,2.8cqi,36px);overflow:hidden}
.tl-arch-grid{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,2.35fr) 40px minmax(0,1fr);align-items:stretch}

.tl-arch-ico{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--tl-arch-mute)}
.tl-arch-ico--sm{width:14px;height:14px}
.tl-arch-ico--xs{width:12px;height:12px}

/* Neighbors: same silhouette, ghosted, cropped by the tile edge */
.tl-arch-nb{position:relative;min-width:0}
.tl-arch-ghost{position:absolute;top:84px;bottom:18px;width:212%;display:flex;flex-direction:column;gap:10px;padding:26px 18px 18px;border:1px solid #e9e6df;border-radius:22px}
.tl-arch-nb--l .tl-arch-ghost{right:6px}
.tl-arch-nb--r .tl-arch-ghost{left:6px}
.tl-arch-nb-label{position:absolute;top:-9px;padding:0 6px;background:#f4f2ec;font-size:12px;font-weight:600;line-height:18px;color:var(--tl-arch-mute);white-space:nowrap}
.tl-arch-nb--l .tl-arch-nb-label{right:16px}
.tl-arch-nb--r .tl-arch-nb-label{left:16px}
.tl-arch-gh-card{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding:16px;background:#f9f8f5;border:1px solid #edeae4;border-radius:18px;overflow:hidden}
.tl-arch-gh-head{flex:none;height:10px;width:44%;border-radius:5px;background:#efece6}
.tl-arch-gh-body{flex:1;min-height:0;display:grid;grid-template-columns:28% minmax(0,1fr);gap:12px}
.tl-arch-gh-side{border-radius:10px;background:#f3f1ec}
.tl-arch-gh-rows{display:flex;flex-direction:column;gap:8px}
.tl-arch-gh-rows span{flex:1;max-height:34px;border-radius:10px;background:#f3f1ec}
.tl-arch-gh-found{flex:none;display:flex;flex-direction:column;gap:6px}
.tl-arch-gh-found span{height:28px;border-radius:11px;background:#efece6}

/* Boundaries */
.tl-arch-div{position:relative;min-width:0}
.tl-arch-div-line{position:absolute;left:50%;top:0;height:100%;margin-left:-1px;overflow:visible}
.tl-arch-div-line line{stroke:#d9d6ce;stroke-width:1.5;stroke-dasharray:4 5;stroke-linecap:round;
  animation:tl-arch-divider var(--tl-arch-cycle) var(--tl-arch-ease) infinite}
.tl-arch-div-lock{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:#fff;border:1px solid #e5e2da;color:var(--tl-arch-mute);box-shadow:0 1px 1px rgba(27,27,25,.04);
  animation:tl-arch-lockmark var(--tl-arch-cycle) var(--tl-arch-ease) infinite}
.tl-arch-div-lock .tl-arch-ico{width:13px;height:13px;color:inherit}
.tl-arch-settle{transform-box:fill-box;transform-origin:50% 70%;animation:tl-arch-settle var(--tl-arch-cycle) var(--tl-arch-ease) infinite}

/* Center column */
.tl-arch-center{display:flex;flex-direction:column;align-items:center;min-width:0}
.tl-arch-user{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-height:32px}
.tl-arch-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e9e5dc;color:var(--tl-arch-mute)}
.tl-arch-avatar .tl-arch-ico{width:16px;height:16px}
.tl-arch-badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 9px;border-radius:999px;background:#f6f5f1;border:1px solid #e5e2da;font-size:12px;font-weight:600;line-height:1;color:#4f4c46;white-space:nowrap;
  animation:tl-arch-badge var(--tl-arch-cycle) var(--tl-arch-ease) infinite}
.tl-arch-badge .tl-arch-ico{color:inherit}
.tl-arch-check{stroke-dasharray:1;stroke-dashoffset:0}
.tl-arch-check--sso{animation:tl-arch-check-sso var(--tl-arch-cycle) var(--tl-arch-ease) infinite}
.tl-arch-check--inf{stroke-width:2.2;animation:tl-arch-check-inf var(--tl-arch-cycle) var(--tl-arch-ease) infinite}

.tl-arch-conn{position:relative;z-index:1;display:block;flex:none;margin:6px 0 -20px;overflow:visible}
.tl-arch-conn path{fill:none;stroke:#a8a49b;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tl-arch-conn-line{stroke-dasharray:1;stroke-dashoffset:0;animation:tl-arch-draw var(--tl-arch-cycle) var(--tl-arch-ease) infinite}
.tl-arch-conn-head{animation:tl-arch-head var(--tl-arch-cycle) var(--tl-arch-ease) infinite}

.tl-arch-env{position:relative;width:100%;display:flex;flex-direction:column;gap:12px;padding:24px 20px 20px;border:1px solid #dcd8cf;border-radius:24px}
.tl-arch-env-label{position:absolute;top:-10px;left:16px;padding:0 6px;background:#f4f2ec;font-size:12px;font-weight:600;line-height:20px;color:var(--tl-arch-mute);white-space:nowrap}
.tl-arch-blocked{position:absolute;top:-15px;right:16px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;background:#f7f6f2;border:1px dashed #cfcbc2;font-size:12px;font-weight:500;line-height:1;color:#5f5c56;white-space:nowrap}
.tl-arch-blocked .tl-arch-ico{color:inherit}
.tl-arch-strike{position:relative}
.tl-arch-strike::after{content:"";position:absolute;left:-1px;right:-1px;top:52%;height:1.5px;border-radius:1px;background:currentColor}

/* Workspace card */
.tl-arch-card{position:relative;padding:16px 18px 16px 20px;background:#fff;border:1px solid transparent;border-radius:20px;
  box-shadow:0 0 0 0 rgba(74,124,255,0),0 1px 2px rgba(27,27,25,.04),0 12px 32px -14px rgba(27,27,25,.14),0 32px 64px -36px rgba(27,27,25,.12);
  animation:tl-arch-ring var(--tl-arch-cycle) var(--tl-arch-ease) infinite}
.tl-arch-card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #efede8}
.tl-arch-card-title{font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:-.005em;color:var(--tl-arch-ink);min-width:0}
.tl-arch-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;background:#fff;border:1px solid #e2e0da;font-size:12px;font-weight:500;line-height:1;color:var(--tl-arch-ink);white-space:nowrap;box-shadow:0 1px 1px rgba(27,27,25,.04)}
.tl-arch-infer{animation:tl-arch-infer var(--tl-arch-cycle) var(--tl-arch-ease) infinite}
.tl-arch-infer .tl-arch-ico{color:inherit}

.tl-arch-app{display:grid;grid-template-columns:128px minmax(0,1fr);gap:14px}
.tl-arch-side{display:flex;flex-direction:column;gap:2px;padding-right:12px;border-right:1px solid #efede8}
.tl-arch-nav{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--tl-arch-mute);white-space:nowrap;min-width:0}
.tl-arch-nav .tl-arch-ico{width:14px;height:14px}
.tl-arch-nav--on{background:#f3f1ec;color:var(--tl-arch-ink)}
.tl-arch-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.tl-arch-row{display:flex;align-items:center;gap:10px;min-height:38px;padding:7px 10px;border-radius:10px;background:#fbfaf7;border:1px solid #efede8}
.tl-arch-row-ico{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#f1efea;color:var(--tl-arch-mute)}
.tl-arch-row-ico .tl-arch-ico{color:inherit}
.tl-arch-lines{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.tl-arch-sk{display:block;height:6px;border-radius:3px;background:#e8e5de}
.tl-arch-sk--title{width:34%;height:8px;margin:2px 0 4px}
.tl-arch-sk--a{width:62%}.tl-arch-sk--b{width:38%;background:#efede7}
.tl-arch-sk--c{width:70%}.tl-arch-sk--d{width:44%}
.tl-arch-sk--e{width:54%}.tl-arch-sk--f{width:30%;background:#efede7}
.tl-arch-row--on{background:var(--tl-arch-tint);border-color:rgba(74,124,255,.28);
  animation:tl-arch-rowlift var(--tl-arch-cycle) var(--tl-arch-ease) infinite}
.tl-arch-row--on .tl-arch-row-ico{background:#fff;color:var(--tl-arch-blue)}
.tl-arch-row--on .tl-arch-sk{background:#c6d4fb}
.tl-arch-row--on .tl-arch-sk--d{background:#d6e0fc}

/* Foundations */
.tl-arch-found{display:flex;flex-direction:column;gap:6px}
.tl-arch-layer{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 10px 6px 7px;border-radius:12px;background:var(--tl-arch-field);border:1px solid transparent;
  animation:tl-arch-layer var(--tl-arch-cycle) var(--tl-arch-ease) var(--tl-arch-d) infinite}
.tl-arch-layer-ico{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#fff;border:1px solid #e2e0da;color:var(--tl-arch-mute);box-shadow:0 1px 1px rgba(27,27,25,.04);
  animation:tl-arch-layer-ico var(--tl-arch-cycle) var(--tl-arch-ease) var(--tl-arch-d) infinite}
.tl-arch-layer-ico .tl-arch-ico{width:14px;height:14px;color:inherit}
.tl-arch-layer-name{min-width:0;font-size:13px;font-weight:600;line-height:1.3;color:var(--tl-arch-ink);overflow-wrap:anywhere}
.tl-arch-l4{--tl-arch-d:6s}
.tl-arch-l3{--tl-arch-d:7.2s}
.tl-arch-l2{--tl-arch-d:8.4s}
.tl-arch-l1{--tl-arch-d:9.6s}

/* Pause on hover */
.tl-arch-tile:hover *,.tl-arch-tile:hover *::before,.tl-arch-tile:hover *::after{animation-play-state:paused}

/* Keyframes · 14s cycle (1s ≈ 7.14%) */
/* 1 · SSO, 0–3s */
@keyframes tl-arch-draw{0%{stroke-dashoffset:1;opacity:1}8.5%,94%{stroke-dashoffset:0;opacity:1}98.5%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes tl-arch-head{0%,7%{opacity:0}10%,94%{opacity:1}98.5%,100%{opacity:0}}
@keyframes tl-arch-check-sso{0%,9%{stroke-dashoffset:1;opacity:1}13%,94%{stroke-dashoffset:0;opacity:1}98.5%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes tl-arch-badge{
  0%,9%{background:#f6f5f1;border-color:#e5e2da;color:#4f4c46}
  12%,20%{background:#e9eeff;border-color:#cdd9fd;color:#2c5ad6}
  24%,100%{background:#f6f5f1;border-color:#e5e2da;color:#4f4c46}}
@keyframes tl-arch-ring{
  0%,11%{border-color:transparent;box-shadow:0 0 0 0 rgba(74,124,255,0),0 1px 2px rgba(27,27,25,.04),0 12px 32px -14px rgba(27,27,25,.14),0 32px 64px -36px rgba(27,27,25,.12)}
  14%,19.5%{border-color:#4a7cff;box-shadow:0 0 0 3px rgba(74,124,255,.18),0 1px 2px rgba(27,27,25,.04),0 12px 32px -14px rgba(27,27,25,.14),0 32px 64px -36px rgba(27,27,25,.12)}
  23%,100%{border-color:transparent;box-shadow:0 0 0 0 rgba(74,124,255,0),0 1px 2px rgba(27,27,25,.04),0 12px 32px -14px rgba(27,27,25,.14),0 32px 64px -36px rgba(27,27,25,.12)}}
/* 2 · Workspace, 3–6s */
@keyframes tl-arch-rowlift{
  0%,22%{transform:translateY(0);box-shadow:0 0 0 0 rgba(40,60,120,0)}
  25%,40%{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(40,60,120,.24)}
  43.5%,100%{transform:translateY(0);box-shadow:0 0 0 0 rgba(40,60,120,0)}}
@keyframes tl-arch-check-inf{0%,25%{stroke-dashoffset:1;opacity:1}29.5%,94%{stroke-dashoffset:0;opacity:1}98.5%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes tl-arch-infer{
  0%,25%{background:#fff;border-color:#e2e0da;color:#1b1b19;transform:translateY(0)}
  28%,40%{background:#e9eeff;border-color:#cdd9fd;color:#2c5ad6;transform:translateY(-2px)}
  43.5%,100%{background:#fff;border-color:#e2e0da;color:#1b1b19;transform:translateY(0)}}
/* 3 · Foundations, 6–11s (each layer offset by --tl-arch-d) */
@keyframes tl-arch-layer{0%{background:#ece9e1;border-color:transparent}2.5%,8.5%{background:#e9eeff;border-color:rgba(74,124,255,.32)}11%,100%{background:#ece9e1;border-color:transparent}}
@keyframes tl-arch-layer-ico{
  0%{transform:translateY(0);color:#5e5b55;border-color:#e2e0da;box-shadow:0 1px 1px rgba(27,27,25,.04)}
  2.5%,8.5%{transform:translateY(-2px);color:#4a7cff;border-color:#cdd9fd;box-shadow:0 1px 2px rgba(27,27,25,.06),0 6px 12px -6px rgba(27,27,25,.16)}
  11%,100%{transform:translateY(0);color:#5e5b55;border-color:#e2e0da;box-shadow:0 1px 1px rgba(27,27,25,.04)}}
/* 4 · Boundaries, 11–14s */
@keyframes tl-arch-divider{0%,78.5%{stroke:#d9d6ce}82%,93%{stroke:#9db3f6}96.5%,100%{stroke:#d9d6ce}}
@keyframes tl-arch-lockmark{
  0%,78.5%{background:#fff;border-color:#e5e2da;color:#5e5b55}
  82%,93%{background:#e9eeff;border-color:#cdd9fd;color:#4a7cff}
  96.5%,100%{background:#fff;border-color:#e5e2da;color:#5e5b55}}
@keyframes tl-arch-settle{0%,79%{transform:none;opacity:1}82%{transform:translateY(-3px) rotate(-8deg);opacity:.6}87.5%,100%{transform:none;opacity:1}}

/* Narrow: neighbors become ghosted slivers at the edges */
@container (max-width:720px){
  .tl-arch-grid{grid-template-columns:12px 24px minmax(0,1fr) 24px 12px}
  .tl-arch-ghost{width:300px;top:92px}
  .tl-arch-nb-label{display:none}
  .tl-arch-div-lock{width:24px;height:24px;margin:-12px 0 0 -12px}
  .tl-arch-div-lock .tl-arch-ico{width:12px;height:12px}
}
@container (max-width:560px){
  .tl-arch-env{padding:24px 14px 18px}
  .tl-arch-blocked{position:static;align-self:flex-start}
  .tl-arch-app{grid-template-columns:104px minmax(0,1fr);gap:10px}
  .tl-arch-side{padding-right:8px}
}
@container (max-width:460px){
  .tl-arch-tile{padding:10px;border-radius:22px}
  .tl-arch-env{padding:22px 10px 12px;border-radius:18px}
  .tl-arch-env-label{left:10px;font-size:11.5px}
  .tl-arch-card{padding:12px 12px 12px 14px;border-radius:16px}
  .tl-arch-app{grid-template-columns:34px minmax(0,1fr)}
  .tl-arch-side{padding-right:6px}
  .tl-arch-nav{justify-content:center;padding:0}
  .tl-arch-nav span{display:none}
  .tl-arch-row{padding:6px 8px;gap:8px}
  .tl-arch-layer-name{font-size:12.5px}
}

/* Reduced motion: complete resting diagram, static */
@media (prefers-reduced-motion:reduce){
  .tl-arch *,.tl-arch *::before,.tl-arch *::after{animation:none!important;transition:none!important}
}