/* Provider-specific shells for the static portfolio. These rules only apply
 * after cloud-theme-switcher selects a provider; Default remains untouched.
 * Proprietary family names are optional system preferences, not font clones. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/brand/fonts/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/brand/fonts/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/brand/fonts/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/brand/fonts/source-sans-3-latin-variable.woff2') format('woff2'); }

#settings-menu fieldset:has(input[name="design-mode"]) { display: none; }
#settings-menu fieldset[data-cloud-theme-fieldset] .cloud-theme-option-icons { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
#settings-menu fieldset[data-cloud-theme-fieldset] label img { width: 18px; height: 18px; object-fit: contain; }
.service-monogram .service-icon { display: none; width: 20px; height: 20px; object-fit: contain; }
html[data-cloud-theme] { --cloud-radius: 4px; }
html[data-cloud-theme] button, html[data-cloud-theme] input { font-family: inherit; }
html[data-cloud-theme] :is(.console-widget, .service-catalog-widget, .welcome-widget, .health-widget, .skills-widget, .shell-help-widget) { border-radius: var(--cloud-radius); }
html[data-cloud-theme] :is(.workspace-heading h1, .page-header h1, .article-header h1, .display-heading-line),
html[data-cloud-theme] :is(.post-row h3, .console-widget h2, .widget-header h2, .widget-header h3) { letter-spacing: normal; border-left: 0; padding-left: 0; }

/* AWS: Cloudscape-style dense application shell: dark global navigation,
 * utility row, restrained containers, and rectangular controls. */
html[data-cloud-theme="aws"][data-theme="light"] {
  color-scheme: light; font-family: 'Amazon Ember', 'Source Sans 3', Arial, sans-serif;
  --background: #f2f3f3; --surface: #fff; --surface-raised: #fff; --surface-subtle: #f2f3f3;
  --header: #232f3e; --header-raised: #232f3e; --global-bar: #232f3e; --global-bar-raised: #232f3e; --global-bar-surface: #232f3e;
  --global-bar-hover: #354150; --global-bar-text: #fff; --global-bar-text-strong: #fff; --global-bar-muted: #d5dbdb; --global-bar-border: #687078; --global-bar-border-strong: #687078;
  --text: #16191f; --text-muted: #5f6b7a; --border: #aab7b8; --border-strong: #0972d3; --interactive: #0972d3; --interactive-strong: #033160; --interactive-soft: #e9f2fb;
  --terminal: #fff; --terminal-surface: #fff; --terminal-surface-raised: #fff; --terminal-surface-subtle: #f2f3f3; --terminal-surface-hover: #e9f2fb; --terminal-control: #0972d3; --terminal-control-hover: #033160; --terminal-input: #fff; --terminal-text: #16191f; --terminal-text-strong: #16191f; --terminal-muted: #5f6b7a; --terminal-border: #aab7b8; --terminal-border-strong: #0972d3; --terminal-focus: #0972d3; --availability: #037f0c; accent-color: #0972d3;
}
html[data-cloud-theme="aws"][data-theme="dark"] {
  color-scheme: dark; font-family: 'Amazon Ember', 'Source Sans 3', Arial, sans-serif;
  --background: #16191f; --surface: #1d252c; --surface-raised: #1d252c; --surface-subtle: #232f3e;
  --header: #232f3e; --header-raised: #232f3e; --global-bar: #232f3e; --global-bar-raised: #232f3e; --global-bar-surface: #232f3e;
  --global-bar-hover: #354150; --global-bar-text: #fff; --global-bar-text-strong: #fff; --global-bar-muted: #d5dbdb; --global-bar-border: #687078; --global-bar-border-strong: #687078;
  --text: #d5dbdb; --text-muted: #aab7b8; --border: #687078; --border-strong: #539fe5; --interactive: #539fe5; --interactive-strong: #8ec7fb; --interactive-soft: #232f3e;
  --terminal: #16191f; --terminal-surface: #1d252c; --terminal-surface-raised: #1d252c; --terminal-surface-subtle: #232f3e; --terminal-surface-hover: #354150; --terminal-control: #539fe5; --terminal-control-hover: #8ec7fb; --terminal-input: #16191f; --terminal-text: #d5dbdb; --terminal-text-strong: #fff; --terminal-muted: #aab7b8; --terminal-border: #687078; --terminal-border-strong: #539fe5; --terminal-focus: #539fe5; --availability: #56d364; accent-color: #539fe5;
}
html[data-cloud-theme="aws"] body { background: var(--background); color: var(--text); font-family: inherit; }
html[data-cloud-theme="aws"] :is([data-cloud-region="global-header"], .console-header) { background: #232f3e; color: #fff; border-bottom: 1px solid #687078; min-height: 40px; }
html[data-cloud-theme="aws"] :is([data-cloud-region="global-header"], .console-header) a { color: #fff; }
html[data-cloud-theme="aws"] :is([data-cloud-region="utility-nav"], .console-sub-bar) { background: #232f3e; border-top: 1px solid #687078; color: #d5dbdb; }
html[data-cloud-theme="aws"] :is([data-cloud-region="workspace"], .console-widget, .service-catalog-widget, .welcome-widget, .health-widget, .skills-widget, .shell-help-widget) { background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
html[data-cloud-theme="aws"] .widget-header { background: var(--surface); border-bottom: 1px solid var(--border); }
html[data-cloud-theme="aws"] :is(h1, h2, h3) { color: var(--text); font-family: 'Amazon Ember', 'Source Sans 3', Arial, sans-serif; }
html[data-cloud-theme="aws"] :is(.workspace-heading h1, .page-header h1, .article-header h1, .display-heading-line, .post-row h3, .console-widget h2, .widget-header h2, .widget-header h3) { font-weight: 700; }
html[data-cloud-theme="aws"] :is(a, .widget-link) { color: var(--interactive); }
html[data-cloud-theme="aws"] :is(button, .terminal-control, input[type="submit"], .cloud-theme-switcher__button) { border-radius: 2px; border-color: var(--border-strong); }
html[data-cloud-theme="aws"] :is(.terminal-control, input[type="submit"], .cloud-theme-switcher__button) { background: var(--terminal-control); color: #fff; }
html[data-cloud-theme="aws"] :is(.terminal-control, input[type="submit"], .cloud-theme-switcher__button):hover { background: var(--terminal-control-hover); color: #fff; }
html[data-cloud-theme="aws"] .service-monogram { border-color: var(--border-strong); }
html[data-cloud-theme="aws"] .service-monogram .service-icon[data-cloud="aws"] { display: block; }
html[data-cloud-theme="aws"] .service-monogram .monogram-letters { display: none; }
html[data-cloud-theme="aws"] .cloud-theme-switcher__menu { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 2px; }

/* Azure: portal hierarchy. The global header, command row, service menu, and
 * workspace are separate regions instead of a universal dark treatment. */
html[data-cloud-theme="azure"][data-theme="light"] {
  color-scheme: light; font-family: 'Segoe UI', Selawik, Arial, sans-serif;
  --background: #f5f5f5; --surface: #fff; --surface-raised: #fff; --surface-subtle: #f3f2f1;
  --header: #0078d4; --header-raised: #fff; --global-bar: #0078d4; --global-bar-raised: #106ebe; --global-bar-surface: #0078d4; --global-bar-hover: #005a9e; --global-bar-text: #fff; --global-bar-text-strong: #fff; --global-bar-muted: #d2d0ce; --global-bar-border: #005a9e; --global-bar-border-strong: #fff;
  --text: #323130; --text-muted: #605e5c; --border: #8a8886; --border-strong: #005a9e; --interactive: #0078d4; --interactive-strong: #005a9e; --interactive-soft: #deecf9; --terminal: #fff; --terminal-surface: #fff; --terminal-surface-raised: #fff; --terminal-surface-subtle: #f3f2f1; --terminal-surface-hover: #deecf9; --terminal-control: #0078d4; --terminal-control-hover: #005a9e; --terminal-input: #fff; --terminal-text: #323130; --terminal-text-strong: #323130; --terminal-muted: #605e5c; --terminal-border: #605e5c; --terminal-border-strong: #005a9e; --terminal-focus: #0078d4; --availability: #107c10; accent-color: #0078d4;
}
html[data-cloud-theme="azure"][data-theme="dark"] {
  color-scheme: dark; font-family: 'Segoe UI', Selawik, Arial, sans-serif;
  --background: #201f1e; --surface: #292827; --surface-raised: #292827; --surface-subtle: #323130;
  --header: #1b1a19; --header-raised: #292827; --global-bar: #1b1a19; --global-bar-raised: #292827; --global-bar-surface: #1b1a19; --global-bar-hover: #323130; --global-bar-text: #fff; --global-bar-text-strong: #fff; --global-bar-muted: #d2d0ce; --global-bar-border: #484644; --global-bar-border-strong: #4cc2ff;
  --text: #fff; --text-muted: #d2d0ce; --border: #605e5c; --border-strong: #4cc2ff; --interactive: #4cc2ff; --interactive-strong: #7fd5ff; --interactive-soft: #323130; --terminal: #201f1e; --terminal-surface: #292827; --terminal-surface-raised: #292827; --terminal-surface-subtle: #323130; --terminal-surface-hover: #323130; --terminal-control: #0078d4; --terminal-control-hover: #106ebe; --terminal-input: #201f1e; --terminal-text: #fff; --terminal-text-strong: #fff; --terminal-muted: #d2d0ce; --terminal-border: #605e5c; --terminal-border-strong: #4cc2ff; --terminal-focus: #4cc2ff; --availability: #6ccb5f; accent-color: #4cc2ff;
}
html[data-cloud-theme="azure"] body { background: var(--background); color: var(--text); font-family: inherit; }
html[data-cloud-theme="azure"] :is([data-cloud-region="global-header"], .console-header) { background: var(--header); color: #fff; border-bottom: 0; min-height: 48px; }
html[data-cloud-theme="azure"] :is([data-cloud-region="global-header"], .console-header) a { color: #fff; }
html:is([data-cloud-theme="azure"], [data-cloud-theme="aws"])[data-theme="light"] .console-header :is(.identity-mark-black, .identity-mark-color) { display: none; }
html:is([data-cloud-theme="azure"], [data-cloud-theme="aws"])[data-theme="light"] .console-header .identity-mark-white { display: block; }
html[data-cloud-theme="azure"][data-theme="light"] .account-cluster-identity { color: #fff; }
html[data-cloud-theme="azure"][data-theme="light"] .account-cluster-button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
html[data-cloud-theme="azure"] :is([data-cloud-region="command-bar"], .console-sub-bar) { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
html[data-cloud-theme="azure"] :is([data-cloud-region="service-menu"], .service-catalog-widget) { background: var(--surface-subtle); border-right: 1px solid var(--border); }
html[data-cloud-theme="azure"] :is([data-cloud-region="workspace"], .console-widget, .welcome-widget, .health-widget, .skills-widget, .shell-help-widget) { background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
html[data-cloud-theme="azure"] .widget-header { background: var(--surface); border-bottom: 1px solid var(--border); }
html[data-cloud-theme="azure"] :is(h1, h2, h3) { color: var(--text); font-family: 'Segoe UI', Selawik, Arial, sans-serif; font-weight: 600; }
html[data-cloud-theme="azure"] :is(a, .widget-link) { color: var(--interactive); }
html[data-cloud-theme="azure"] :is(button, .terminal-control, input[type="submit"], .cloud-theme-switcher__button) { border-radius: 2px; border-color: var(--border-strong); }
html[data-cloud-theme="azure"] :is(.terminal-control, input[type="submit"], .cloud-theme-switcher__button) { background: var(--terminal-control); color: #fff; }
html[data-cloud-theme="azure"] .service-monogram { border-color: var(--border-strong); }
html[data-cloud-theme="azure"] .service-monogram .service-icon[data-cloud="azure"] { display: block; }
html[data-cloud-theme="azure"] .service-monogram .monogram-letters { display: none; }
html[data-cloud-theme="azure"] .cloud-theme-switcher__menu { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 2px; }
/* Restore the Azure light breadcrumb as a deliberate context row. The base shell
 * compresses this navigation enough that its separator can become the only
 * visible cue; keep the existing landmark and links, but establish hierarchy. */
html[data-cloud-theme="azure"][data-theme="light"] .console-sub-bar { min-block-size: 44px; padding: 10px 20px; background: var(--surface); border-bottom-color: var(--border); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
html[data-cloud-theme="azure"][data-theme="light"] .console-sub-bar > nav { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 14px; font-weight: 400; line-height: 20px; }
html[data-cloud-theme="azure"][data-theme="light"] .console-sub-bar > nav > span { color: var(--text-muted); font-weight: 400; }
html[data-cloud-theme="azure"][data-theme="light"] .console-sub-bar > nav strong { display: inline; color: var(--text); font-weight: 600; }
html[data-cloud-theme="azure"][data-theme="light"] .console-sub-bar .sub-bar-status { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; color: var(--text-muted); font-size: 13px; font-weight: 400; line-height: 20px; }
html[data-cloud-theme="azure"][data-theme="light"] .console-sub-bar .sub-bar-status > span:first-child { color: var(--text); font-weight: 600; }
html[data-cloud-theme="azure"][data-theme="light"] .console-sub-bar a { display: inline; color: var(--interactive-strong); font-weight: 600; text-decoration: none; }
html[data-cloud-theme="azure"][data-theme="light"] .console-sub-bar a:hover { color: var(--interactive); text-decoration: underline; }

/* Google Cloud: neutral console/docs plane with a compact toolbar, drawer,
 * and context row. No rainbow stripe, tinted M3 canvas, or universal pills. */
html[data-cloud-theme="gcp"][data-theme="light"] {
  color-scheme: light; font-family: Roboto, 'Google Sans', Poppins, Arial, sans-serif;
  --background: #fff; --surface: #fff; --surface-raised: #fff; --surface-subtle: #f8f9fa;
  --header: #fff; --header-raised: #fff; --global-bar: #fff; --global-bar-raised: #fff; --global-bar-surface: #fff; --global-bar-hover: #f1f3f4; --global-bar-text: #202124; --global-bar-text-strong: #202124; --global-bar-muted: #5f6368; --global-bar-border: #dadce0; --global-bar-border-strong: #1a73e8;
  --text: #202124; --text-muted: #5f6368; --border: #dadce0; --border-strong: #1a73e8; --interactive: #1a73e8; --interactive-strong: #174ea6; --interactive-soft: #e8f0fe; --terminal: #fff; --terminal-surface: #fff; --terminal-surface-raised: #fff; --terminal-surface-subtle: #f8f9fa; --terminal-surface-hover: #f1f3f4; --terminal-control: #1a73e8; --terminal-control-hover: #174ea6; --terminal-input: #fff; --terminal-text: #202124; --terminal-text-strong: #202124; --terminal-muted: #5f6368; --terminal-border: #dadce0; --terminal-border-strong: #1a73e8; --terminal-focus: #1a73e8; --availability: #188038; accent-color: #1a73e8;
}
html[data-cloud-theme="gcp"][data-theme="dark"] {
  color-scheme: dark; font-family: Roboto, 'Google Sans', Poppins, Arial, sans-serif;
  --background: #202124; --surface: #292a2d; --surface-raised: #292a2d; --surface-subtle: #303134;
  --header: #202124; --header-raised: #202124; --global-bar: #202124; --global-bar-raised: #202124; --global-bar-surface: #202124; --global-bar-hover: #303134; --global-bar-text: #e8eaed; --global-bar-text-strong: #fff; --global-bar-muted: #bdc1c6; --global-bar-border: #5f6368; --global-bar-border-strong: #8ab4f8;
  --text: #e8eaed; --text-muted: #bdc1c6; --border: #5f6368; --border-strong: #8ab4f8; --interactive: #8ab4f8; --interactive-strong: #aecbfa; --interactive-soft: #303134; --terminal: #202124; --terminal-surface: #292a2d; --terminal-surface-raised: #292a2d; --terminal-surface-subtle: #303134; --terminal-surface-hover: #303134; --terminal-control: #8ab4f8; --terminal-control-hover: #aecbfa; --terminal-input: #202124; --terminal-text: #e8eaed; --terminal-text-strong: #fff; --terminal-muted: #bdc1c6; --terminal-border: #5f6368; --terminal-border-strong: #8ab4f8; --terminal-focus: #8ab4f8; --availability: #81c995; accent-color: #8ab4f8;
}
html[data-cloud-theme="gcp"] body { background: var(--background); color: var(--text); font-family: inherit; }
html[data-cloud-theme="gcp"] :is([data-cloud-region="global-header"], .console-header) { background: var(--header); color: var(--global-bar-text); border-bottom: 1px solid var(--border); box-shadow: 0 1px 2px rgb(60 64 67 / .12); min-height: 48px; }
html[data-cloud-theme="gcp"] :is([data-cloud-region="global-header"], .console-header) a { color: inherit; }
html[data-cloud-theme="gcp"] :is([data-cloud-region="toolbar"], .console-sub-bar) { background: var(--surface); border-bottom: 1px solid var(--border); color: var(--text); min-height: 36px; }
html[data-cloud-theme="gcp"] :is([data-cloud-region="navigation-drawer"], .service-catalog-widget) { background: var(--surface); border-right: 1px solid var(--border); }
html[data-cloud-theme="gcp"] :is([data-cloud-region="context"], .workspace-heading, .page-header, .article-header) { color: var(--text-muted); }
html[data-cloud-theme="gcp"] :is([data-cloud-region="workspace"], .console-widget, .welcome-widget, .health-widget, .skills-widget, .shell-help-widget) { background: var(--surface); border: 1px solid var(--border); box-shadow: none; }
html[data-cloud-theme="gcp"] .widget-header { background: var(--surface); border-bottom: 1px solid var(--border); }
html[data-cloud-theme="gcp"] :is(h1, h2, h3) { color: var(--text); font-family: 'Google Sans', Poppins, Roboto, Arial, sans-serif; }
html[data-cloud-theme="gcp"] :is(.workspace-heading h1, .page-header h1, .article-header h1, .display-heading-line) { font-weight: 400; }
html[data-cloud-theme="gcp"] :is(.post-row h3, .console-widget h2, .widget-header h2, .widget-header h3) { font-weight: 500; }
html[data-cloud-theme="gcp"] :is(a, .widget-link) { color: var(--interactive); }
html[data-cloud-theme="gcp"] :is(button, .terminal-control, input[type="submit"], .cloud-theme-switcher__button) { border-radius: 4px; border-color: var(--border-strong); }
html[data-cloud-theme="gcp"] :is(.terminal-control, input[type="submit"], .cloud-theme-switcher__button) { background: var(--terminal-control); color: #fff; }
html[data-cloud-theme="gcp"][data-theme="dark"] :is(.terminal-control, input[type="submit"], .cloud-theme-switcher__button) { color: #202124; }
html[data-cloud-theme="gcp"] .service-monogram { border-color: var(--border-strong); }
html[data-cloud-theme="gcp"] .service-monogram .service-icon[data-cloud="gcp"] { display: block; }
html[data-cloud-theme="gcp"] .service-monogram .monogram-letters { display: none; }
html[data-cloud-theme="gcp"] .cloud-theme-switcher__menu { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; }

html[data-cloud-theme] :is(.service-status i, .service-shell-status i, .health-label > span, .environment-status > span, .sub-status-live > span) { background: var(--availability); }
html[data-cloud-theme] :is(.service-status, .service-shell-status, .sub-status-live) { color: var(--availability); }
html[data-cloud-theme] .status-table div { border-bottom: 1px solid var(--border); }
html[data-cloud-theme] :is(button, a):focus-visible { outline: 2px solid var(--interactive); outline-offset: 2px; }

/* Shared page geometry, independent of provider, color mode and locale.
 * Measure the page AFTER the existing dock has allocated its available width.
 * Panel surfaces and the global header deliberately remain outside this scope. */
:is(.console-workspace, .page-shell, .article-shell) { container: portfolio-page / inline-size; min-width: 0; }
#main-content .console-widget { container: portfolio-card / inline-size; }
#main-content :is(.console-widget, .workspace-heading, .page-header, .article-header, .service-shell-layout) { overflow-wrap: anywhere; }
#main-content :is(.widget-header, .workspace-actions, .profile-links, .solution-tabs, .service-shell-view-tabs) { flex-wrap: wrap; }
#main-content :is(.widget-header, .workspace-heading, .contact-widget, .shell-help-widget) > * { min-width: 0; }
#main-content :is(.widget-meta, .health-label, .workspace-actions a) { white-space: normal; }
#main-content .display-heading-tilt-console-home { flex-wrap: wrap; white-space: normal; }
#main-content .display-heading-line { white-space: normal; word-break: normal; overflow-wrap: anywhere; }
#main-content :is(.contact-widget, .shell-help-widget) { flex-direction: row; flex-wrap: wrap; align-content: start; gap: 16px 24px; }
#main-content :is(.contact-widget, .shell-help-widget) > * { flex: 1 1 16rem; }
#main-content .shell-help-widget > p { max-width: none; text-align: start; }
#main-content .capability-groups section { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px 18px; }
#main-content .status-table div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#main-content .recent-list a { grid-template-columns: 28px minmax(0, 1fr) auto; }
#main-content .experience-list article { grid-template-columns: minmax(0, 100px) minmax(0, 1fr); }
#main-content .solution-rows article { grid-template-columns: minmax(0, 1fr) auto; }
#main-content :is(.capability-groups section, .status-table div, .experience-list article, .solution-rows article) > * { min-width: 0; }
#main-content .quick-start-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
#main-content .activity-metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
#main-content .service-shell-primary > .console-widget { grid-column: 1 / -1; }
#main-content :is(.service-name strong, .service-purpose, .service-column-route) { white-space: normal; overflow: visible; text-overflow: clip; }

/* Keep primary content readable before fixed sidebar/card tracks squeeze it.
 * Reset placement as well as track count to avoid implicit narrow columns. */
@container portfolio-page (max-width: 1080px) {
  #main-content .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #main-content .dashboard-grid > * { grid-column: 1 / -1; grid-row: auto; }
  #main-content .dashboard-grid > :is(.skills-widget, .shell-help-widget, .health-widget, .profile-widget) { grid-column: auto; }
  #main-content .console-home-grid { grid-template-columns: minmax(0, 1fr); }
  #main-content .console-home-grid > * { grid-column: 1 / -1; }
  #main-content .service-shell-layout { grid-template-columns: minmax(0, 1fr); }
  #main-content .service-shell-layout > * { grid-column: 1 / -1; position: static; }
  #main-content .service-shell-summary dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
  #main-content .service-shell-summary dl > div { border-right: 0; }
  #main-content .service-shell-section-list { display: flex; flex-wrap: wrap; gap: 8px 18px; }
}
@container portfolio-page (max-width: 700px) {
  #main-content .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  #main-content .dashboard-grid > * { grid-column: 1 / -1; }
  #main-content .workspace-heading { flex-direction: column; align-items: stretch; gap: 20px; }
  #main-content .workspace-actions { width: 100%; }
  #main-content .about-project-list { grid-template-columns: minmax(0, 1fr); }
  #main-content .about-project-list article { border-right: 0; }
}
@container portfolio-card (max-width: 620px) {
  #main-content :is(.service-catalog-columns, .service-catalog-row) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  #main-content :is(.service-column-route, .service-column-status) { display: block; }
  #main-content .service-status { justify-self: start; white-space: normal; }
}
@container portfolio-card (max-width: 480px) {
  #main-content :is(.capability-groups section, .status-table div, .experience-list article, .solution-rows article, .about-service-identity, .about-identity) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #main-content .status-table dd { text-align: start; }
  #main-content .row-action { justify-self: start; }
  #main-content .widget-header { align-items: flex-start; gap: 8px 16px; }
}
@container portfolio-card (max-width: 420px) {
  #main-content .service-catalog-columns { display: none; }
  #main-content .service-catalog-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #main-content .service-catalog-toolbar { grid-template-columns: minmax(0, 1fr); }
  #main-content .service-catalog-toolbar output { grid-area: auto; }
}

/* Own homepage placement instead of inheriting dashboard spans and auto tracks.
 * Inline-size containment removes content-based track contributions, so assign
 * card widths through explicit, shrinkable tracks rather than intrinsic sizing. */
#main-content .dashboard-grid.console-home-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
#main-content .console-home-grid > * { grid-column: 1 / -1; grid-row: auto; min-width: 0; }
#main-content .console-home-grid > .service-catalog-widget { grid-column: 1; grid-row: 1 / span 2; }
#main-content .console-home-grid > .welcome-widget { grid-column: 2; grid-row: 1; }
#main-content .console-home-grid > .health-widget { grid-column: 2; grid-row: 2; }
#main-content .console-home-grid > :is(.skills-widget, .shell-help-widget) { grid-column: 1 / -1; grid-row: auto; }
#main-content .console-home-grid .skills-widget .widget-header > div { flex: 1 1 14rem; }
#main-content .console-home-grid .skills-widget .widget-link { flex: 0 1 auto; min-width: 0; white-space: normal; }
#main-content .console-home-grid .capability-groups { min-width: 0; }
#main-content .console-home-grid .capability-groups li { min-width: 0; max-width: 100%; }
@container portfolio-page (max-width: 1080px) {
  #main-content .dashboard-grid.console-home-grid { grid-template-columns: minmax(0, 1fr); }
  #main-content .console-home-grid > :is(.service-catalog-widget, .welcome-widget, .health-widget, .skills-widget, .shell-help-widget) { grid-column: 1 / -1; grid-row: auto; }
}