/* Console — a cloud console: dark top bar, tabs, console home, service grid, stacks. */
:root { --t-font-display: "Inter", system-ui, sans-serif; --t-font-body: "Inter", system-ui, sans-serif; --t-max: 1200px; --t-radius: 8px; --t-radius-sm: 4px; --t-radius-pill: 4px; --t-shadow: none; }

/* top bar */
.t-con__bar { background: color-mix(in srgb, var(--t-text) 92%, var(--t-bg)); color: var(--t-bg); display: flex; align-items: center; gap: 16px; padding: 10px var(--t-gutter); font-size: var(--t-size-0); }
[data-mode="dark"] .t-con__bar { background: color-mix(in srgb, var(--t-surface) 70%, #000); color: var(--t-text); }
.t-con__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .02em; text-transform: lowercase; }
.t-con__brand .t-icon { width: 18px; height: 18px; color: var(--t-accent); }
.t-con__search { flex: 1; max-width: 520px; padding: 6px 12px; border-radius: 4px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.75); }
[data-mode="light"] .t-con__search { color: rgba(255,255,255,.75); }
.t-con__right { margin-inline-start: auto; display: inline-flex; gap: 16px; align-items: center; white-space: nowrap; }
.t-con__region { display: inline-flex; align-items: center; gap: 6px; }
.t-con__region .t-icon { width: 16px; height: 16px; }
.t-con__user { font-weight: 600; }
@media (max-width: 599px) { .t-con__search, .t-con__user { display: none; } }
.t-con__nav { display: flex; gap: 2px; overflow-x: auto; border-block-end: 1px solid var(--t-line); margin-block-end: 8px; scrollbar-width: thin; }
.t-con__nav a { padding: 10px 12px; text-decoration: none; color: var(--t-muted); font-size: var(--t-size-0); font-weight: 600; white-space: nowrap; border-block-end: 2px solid transparent; }
.t-con__nav a[aria-current] { color: var(--t-text); border-color: var(--t-accent); }
.t-con__nav a:hover { color: var(--t-text); }

/* console home */
.t-hero--console .t-hero__inner { grid-template-columns: 1fr; gap: 16px; padding-block: 0 clamp(24px, 4vw, 40px); }
.t-con__home { display: grid; gap: 16px 24px; grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: clamp(16px, 2.5vw, 24px); background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-radius); border-inline-start: 4px solid var(--t-accent); }
.t-hero--console .t-photo { width: clamp(88px, 11vw, 120px); border-radius: 8px; box-shadow: none; }
.t-con__welcome { margin: 0; font-size: var(--t-size-0); color: var(--t-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.t-hero--console .t-name { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -0.01em; margin: 2px 0 0; }
.t-hero--console .t-eyebrow { margin: 2px 0 0; text-transform: none; letter-spacing: 0; font-size: var(--t-size-1); color: var(--t-accent-text); }
.t-hero--console .t-headline { font-weight: 500; }
.t-hero--console .t-actions { margin-block-start: 16px; }
.btn { --bs-btn-border-radius: 4px; --bs-btn-font-weight: 700; }
.t-link { border-radius: 4px; }
.t-con__panel { padding: clamp(14px, 2vw, 20px); background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-radius); }
.t-con__h { font-size: var(--t-size-2); font-weight: 700; margin: 0 0 12px; }
.t-con__h span { color: var(--t-muted); font-weight: 400; font-size: var(--t-size-0); }
.t-hero--console .t-hero__inner > .t-con__panel .t-stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.t-hero--console .t-stats li { background: var(--t-surface2); border-radius: var(--t-radius-sm); padding: 12px 14px; }
.t-hero--console .t-stats strong { font-weight: 700; color: var(--t-accent-text); }

/* the service grid (the Console signature) */
.t-svc { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.t-svc__tile { display: grid; gap: 8px; padding: 12px; background: var(--t-surface2); border: 1px solid var(--t-line); border-radius: var(--t-radius-sm); min-width: 0; position: relative; }
.t-svc__icon { width: 44px; height: 44px; border-radius: 8px; background: var(--t-accent); color: var(--t-on-accent); display: grid; place-items: center; font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.t-svc__name { font-size: var(--t-size-0); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.t-svc__meter { height: 4px; border-radius: 2px; background: var(--t-line); overflow: hidden; display: block; }
.t-svc__meter::after { content: ""; display: block; height: 100%; width: calc(var(--lvl, 0) * 20%); background: var(--t-accent); }
.t-svc__tile[data-level="1"] { --lvl: 1; } .t-svc__tile[data-level="2"] { --lvl: 2; } .t-svc__tile[data-level="3"] { --lvl: 3; } .t-svc__tile[data-level="4"] { --lvl: 4; } .t-svc__tile[data-level="5"] { --lvl: 5; }

/* sections as console panels */
.t-section { background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-radius); padding: clamp(16px, 2.5vw, 24px); }
.t-main { gap: 16px; }
.t-section__title { font-size: var(--t-size-2); font-weight: 700; margin-block-end: 14px; padding-block-end: 10px; border-block-end: 1px solid var(--t-line); }
.t-section--summary .t-section__title { display: none; }
.t-summary { font-size: clamp(1.15rem, 2vw, 1.4rem); max-width: 64ch; }
/* stacks */
.t-stacks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.t-stack { padding: 14px 16px; background: var(--t-surface2); border: 1px solid var(--t-line); border-radius: var(--t-radius-sm); display: grid; gap: 8px; }
.t-stack__head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.t-stack__head .t-item__title { margin: 0; font-weight: 700; }
.t-stack__status { font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--t-accent-text); border: 1px solid var(--t-accent); border-radius: 3px; padding: 2px 8px; }
.t-stack__meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: var(--t-size-0); }
.t-stack__meta dt { color: var(--t-muted); font-weight: 600; }
.t-stack__meta dd { margin: 0; }
.t-stack__meta .badge { background: var(--t-surface); color: var(--t-text); font-weight: 500; border: 1px solid var(--t-line); }
.t-stack__desc { margin: 0; }
/* compliance */
.t-section--certifications .t-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; background: var(--t-surface2); border-radius: var(--t-radius-sm); }
.t-section--certifications .t-list li::after { content: "✓ Compliant"; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t-accent-text); }
.t-section--certifications .t-list li span, .t-section--certifications .t-list li p { grid-column: 1; }
.t-list li strong { font-weight: 600; }
.t-chip { border-radius: 4px; background: var(--t-surface2); }
.t-timeline__when { font-family: ui-monospace, monospace; font-size: var(--t-size-0); }
.t-quote { background: var(--t-surface2); border: 0; }
.t-footer { border: 0; }