/* ===========================================================================
   ServicesCloud — 設計の考え方: four layers built bottom-up, IaC and monitoring
   rails on the sides, service chips per layer, glossary panel on the right.
   Without JS: both clouds' chips (labelled AWS / Google Cloud) and all glossary
   entries are listed. With JS (.is-live + data-cloud on [data-arch],
   svc-cloud-arch.js): one cloud at a time, one entry at a time.
   =========================================================================== */

.sc-arch { --pt: clamp(64px, 6.6vw, 96px); --pb: clamp(64px, 6.6vw, 96px); }
.sc-arch__lead { max-width: 880px; margin: 16px 0 0; }
.sc-arch__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin: 32px 0 28px; }
.sc-arch__bar[hidden] { display: none; }

/* cloud picker: two big logo cards (Phong 2026-10-04: the small pill did not read as pressable).
   Chosen = navy outline, pale blue, tick. Not chosen = white raised card that lifts on hover. */
.sc-cloud__k { flex: 1 1 100%; margin: 0; font-size: 14px; font-weight: 700; color: var(--navy); }
.sc-cloud__row { display: flex; gap: 16px; }
.sc-cloud { all: unset; box-sizing: border-box; position: relative; cursor: pointer; display: flex; align-items: center; gap: 14px; width: 220px; min-height: 64px; padding: 12px 20px 12px 16px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--white); box-shadow: 0 4px 14px rgba(16, 42, 67, .1); transition: transform .25s, box-shadow .25s, border-color .25s, background-color .25s; }
.sc-cloud__ck { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; box-sizing: border-box; border: 2px solid #C6D3E0; border-radius: 50%; background: var(--white); }
.sc-cloud__ck svg { width: 14px; height: 14px; opacity: 0; }
.sc-cloud__logo { flex: 1; display: flex; justify-content: center; }
.sc-cloud__logo img { display: block; width: auto; height: 32px; }
.sc-cloud[data-cloud="gcp"] .sc-cloud__logo img { height: 24px; }
.sc-cloud.is-on { border-color: var(--navy); background: #EEF6FF; box-shadow: 0 0 0 1.5px var(--navy); }
.sc-cloud.is-on .sc-cloud__ck { border-color: var(--navy); background: var(--navy); }
.sc-cloud.is-on .sc-cloud__ck svg { opacity: 1; }
@media (hover: hover) { .sc-cloud:not(.is-on):hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 12px 26px rgba(16, 42, 67, .16); } }
.sc-cloud:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 560px) {
  .sc-cloud__row { flex: 1 1 100%; gap: 12px; }
  .sc-cloud { flex: 1 1 0; width: auto; min-width: 0; gap: 10px; padding: 10px 12px; }
  .sc-cloud__logo img { height: 28px; }
  .sc-cloud[data-cloud="gcp"] .sc-cloud__logo img { height: 20px; }
}
.sc-arch__wrap { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; margin-top: 24px; }
.sc-arch__bar:not([hidden]) + .sc-arch__wrap { margin-top: 0; }

.sc-dia { flex: 2.4 1 640px; min-width: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr) 160px; gap: 10px; }
.sc-rail { grid-row: 1 / span 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px 10px; border: 1.5px dashed #9BB0C4; border-radius: 14px; background: var(--white); text-align: center; }
.sc-rail--l { grid-column: 1; } .sc-rail--r { grid-column: 3; }
.sc-rail__t { font-size: 13px; font-weight: 700; color: var(--navy); }
.sc-rail__s { font-size: 13px; line-height: 1.6; color: var(--muted); }
.sc-lay { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 14px 16px; border-radius: 14px; }
.sc-lay__h { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.sc-lay__n { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--sc-blue-text); }
.sc-lay__t { font-size: 16px; font-weight: 700; color: var(--navy); }
.sc-lay__s { font-size: 13px; line-height: 1.6; color: var(--muted); }
.sc-lay--4 { background: var(--surface); }
.sc-lay--3 { background: var(--blue); }
.sc-lay--3 .sc-lay__n, .sc-lay--3 .sc-lay__t, .sc-lay--3 .sc-lay__s { color: var(--white); }   /* pale blues on --blue were 3.8–4.3:1 */
.sc-lay--2 { background: #DCEEFC; }
.sc-lay--1 { background: #EEF6FF; }
/* layers settle from the bottom up when the diagram comes into view */
html.js .sc-dia .sc-lay, html.js .sc-dia .sc-rail { opacity: 0; transform: translateY(12px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
html.js .sc-dia.is-in .sc-lay, html.js .sc-dia.is-in .sc-rail { opacity: 1; transform: none; }
html.js .sc-dia .sc-lay--1 { transition-delay: .06s; } html.js .sc-dia .sc-lay--2 { transition-delay: .24s; }
html.js .sc-dia .sc-lay--3 { transition-delay: .42s; } html.js .sc-dia .sc-lay--4 { transition-delay: .6s; }
html.js .sc-dia .sc-rail { transition-delay: .7s; }

.sc-chips { display: flex; flex: 1 1 300px; flex-wrap: wrap; align-items: center; gap: 10px; }
.sc-chips__k { flex: 1 1 100%; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.sc-lay--3 .sc-chips__k { color: var(--white); }
.sc-rail .sc-chips { flex: 0 0 auto; flex-direction: column; flex-wrap: nowrap; justify-content: center; }
.sc-rail .sc-chips__k { flex: none; text-align: center; }
.sc-chip { all: unset; position: relative; box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px 8px 8px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--white); box-shadow: 0 2px 6px rgba(16, 42, 67, .06); transition: transform .25s, box-shadow .25s, border-color .25s; }
.sc-chip img, .sc-chip svg { display: block; flex: none; width: 32px; height: 32px; }
.sc-chip__n { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; color: var(--navy); }
.sc-chip__r { display: block; font-size: 13px; color: var(--muted); }
.sc-rail .sc-chip__n { white-space: normal; }   /* 「Cloud Monitoring」 wraps inside the 160px rail instead of overflowing it */
.sc-rail .sc-chip { flex-direction: column; gap: 6px; padding: 10px 12px; text-align: center; }
/* chips only act (pointer, lift, selected ring, amber dot from svc-cloud-base.css) once the script runs */
.sc-arch__wrap.is-live .sc-chip { cursor: pointer; }
.sc-arch__wrap.is-live .sc-chip.is-on { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy); }
@media (hover: hover) { .sc-arch__wrap.is-live .sc-chip:not(.is-on):hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16, 42, 67, .12); } }
.sc-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.sc-gl { flex: 1 1 280px; min-width: 0; box-sizing: border-box; padding: 26px 24px; border-radius: 14px; background: var(--navy); color: var(--white); }
.sc-gl__k { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--blue-pale); }
.sc-gl__list { margin: 0; }
.sc-gl__item { display: flex; flex-direction: column; gap: 10px; }
.sc-gl__item + .sc-gl__item { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(143, 201, 245, .25); }
.sc-gl__name { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.45; }
.sc-gl__dd { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sc-gl__role { margin: 0; font-size: 13px; color: var(--blue-pale); }
.sc-gl__desc { margin: 4px 0 0; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 1.95; color: var(--line); }
.sc-gl__pair { margin: 0; padding-top: 14px; border-top: 1px solid rgba(143, 201, 245, .25); font-size: 13px; line-height: 1.8; color: #C6D3E0; }

/* JS on: one cloud, one entry */
.sc-arch__wrap.is-live .sc-chips__k { display: none; }
.sc-arch__wrap.is-live [data-cloud-set] { display: none; }
.sc-arch__wrap.is-live[data-cloud="aws"] [data-cloud-set="aws"], .sc-arch__wrap.is-live[data-cloud="gcp"] [data-cloud-set="gcp"] { display: flex; }
.sc-arch__wrap.is-live .sc-chip { animation: sc-pop .35s both; }
.sc-arch__wrap.is-live .sc-chip:nth-child(3) { animation-delay: .06s; } .sc-arch__wrap.is-live .sc-chip:nth-child(4) { animation-delay: .12s; }
.sc-arch__wrap.is-live .sc-gl { min-height: 320px; }
.sc-arch__wrap.is-live .sc-gl__item { display: none; margin: 0; padding: 0; border: 0; }
.sc-arch__wrap.is-live .sc-gl__item.is-on { display: flex; animation: sc-rise .3s both; }

@media (max-width: 760px) {
  .sc-dia { grid-template-columns: 1fr; }
  .sc-rail, .sc-lay { grid-column: auto; grid-row: auto; }
  .sc-rail { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; text-align: left; }
  .sc-rail .sc-chips { flex-direction: row; }
}