@import url("./admin-tokens.css");
@import url("./material-symbols.css");
/* ログインの画面 (authCard)。Account の interaction.css も単独で読むため別ファイル。 */
@import url("./auth.css");
/* ログインの画面と共有する部品 (auth-parts.css)。auth.css の直後・下の規則の前に置き、元の規則の順を保つ。 */
@import url("./auth-parts.css");

.as-icon-button {
  background: transparent;
  border-radius: var(--as-shape-icon-button);
  min-height: var(--as-size-target-touch);
  padding: 0;
  min-width: var(--as-size-target-touch);
}

.as-icon-button:hover:not(:disabled) {
  background: var(--as-color-surface-hover);
}

.as-icon-button:active:not(:disabled) {
  background: var(--as-color-surface-pressed);
  border-radius: var(--as-shape-button-pressed);
}

.as-icon-button:disabled { color: var(--as-color-on-surface-disabled); cursor: default; }

/* Tooltipはtop layer上でhoverとfocusを保ち、clipと画面端を回避する。 */
.as-icon-button { anchor-name: --as-tooltip-trigger; anchor-scope: --as-tooltip-trigger; }
.as-tooltip {
  background: var(--as-color-surface-inverse);
  border: 0;
  border-radius: var(--as-shape-tooltip);
  color: var(--as-color-text-inverse);
  font-size: var(--as-font-metadata-size);
  inset: auto;
  margin: var(--as-space-1);
  max-width: calc(100vw - var(--as-space-8));
  padding: var(--as-space-2) var(--as-space-3);
  position: fixed;
  position-anchor: --as-tooltip-trigger;
  position-area: block-start span-inline-start;
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
  white-space: normal;
}
@supports not (position-area: block-start) {
  .as-tooltip { bottom: var(--as-space-4); left: var(--as-space-4); right: var(--as-space-4); }
}

.as-status {
  align-items: center;
  border-radius: var(--as-shape-pill);
  color: var(--as-color-text-secondary);
  display: inline-flex;
  font-size: var(--as-font-metadata-size);
  font-weight: var(--as-font-weight-medium);
  gap: var(--as-space-1);
  line-height: var(--as-font-metadata-line);
  min-height: var(--as-size-target-min);
  padding-inline: var(--as-space-2);
  white-space: nowrap;
}

.as-status .as-icon {
  font-size: var(--as-icon-size-compact);
  width: var(--as-icon-size-compact);
}

.as-status--info { color: var(--as-color-info); }
.as-status--success { color: var(--as-color-success); }
.as-status--warning { color: var(--as-color-warning); }
.as-status--danger { color: var(--as-color-danger); }

.as-app-shell {
  display: grid;
  grid-template-areas:
    "header header"
    "navigation workspace";
  grid-template-columns: var(--as-size-navigation) minmax(0, 1fr);
  grid-template-rows: var(--as-size-top-app-bar) minmax(0, 1fr);
  height: 100dvh;
  overflow: hidden;
}

.as-app-shell[data-page-scope="common"] {
  grid-template-areas:
    "header"
    "workspace";
  grid-template-columns: minmax(0, 1fr);
}

.as-global-header {
  align-items: center;
  background: var(--as-color-surface);
  display: flex;
  gap: var(--as-space-5);
  grid-area: header;
  min-width: 0;
  padding-inline: var(--as-space-4);
  position: relative;
  z-index: 5;
}

.as-global-header__brand {
  align-items: center;
  color: var(--as-color-text-primary);
  display: flex;
  flex: none;
  gap: var(--as-space-3);
  text-decoration: none;
}

.as-global-header__actions {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: var(--as-space-2);
  justify-content: flex-end;
  margin-inline-start: auto;
  min-width: 0;
}

.as-global-header__actions > .as-icon-button {
  display: none;
}

.as-module-switcher {
  align-items: center;
  display: flex;
  flex: none;
  gap: var(--as-space-1);
  min-width: 0;
}

.as-module-switcher__item {
  align-items: center;
  display: inline-flex;
  border-radius: var(--as-shape-navigation-indicator);
  color: var(--as-color-text-secondary);
  font-weight: var(--as-font-weight-medium);
  min-height: var(--as-size-action-standard);
  padding: var(--as-space-2) var(--as-space-4);
  text-decoration: none;
  white-space: nowrap;
}

.as-module-switcher__item:hover {
  background: var(--as-color-surface-hover);
}

.as-module-switcher__item.is-selected {
  font-weight: var(--as-font-weight-semibold);
  background: var(--as-color-surface-selected);
  color: var(--as-color-on-surface-selected);
}

.as-module-switcher__item.is-selected:hover { background: var(--as-color-surface-selected-hover); }
.as-module-switcher__item.is-selected:active { background: var(--as-color-surface-selected-pressed); }

.as-navigation {
  background: var(--as-color-surface-container-low);
  display: flex;
  flex-direction: column;
  gap: var(--as-space-5);
  grid-area: navigation;
  min-height: 0;
  overflow-y: auto;
  padding: var(--as-space-4);
}

.as-navigation[hidden] {
  display: none;
}

.as-navigation__header {
  align-items: center;
  display: flex;
  gap: var(--as-space-3);
  min-height: var(--as-size-top-app-bar);
}

.as-navigation__header .as-icon-button {
  display: none;
  margin-inline-start: auto;
}

.as-navigation__items {
  display: grid;
  gap: var(--as-space-1);
}

.as-navigation__item {
  align-items: center;
  border-radius: var(--as-shape-navigation-indicator);
  color: var(--as-color-text-primary);
  display: flex;
  gap: var(--as-space-3);
  min-height: var(--as-size-action-page);
  padding-inline: var(--as-space-4);
  text-decoration: none;
  transition:
    background var(--as-motion-state-duration) var(--as-motion-state-easing),
    color var(--as-motion-state-duration) var(--as-motion-state-easing);
}

.as-navigation__item:hover {
  background: var(--as-color-surface-hover);
}

.as-navigation__item.is-selected {
  background: var(--as-color-surface-selected);
  color: var(--as-color-on-surface-selected);
  font-weight: var(--as-font-weight-semibold);
  transition-timing-function: var(--as-motion-state-easing);
}

.as-navigation__item.is-selected:hover {
  background: var(--as-color-surface-selected-hover);
}

.as-navigation__item:active { background: var(--as-color-surface-pressed); }
.as-navigation__item.is-selected:active { background: var(--as-color-surface-selected-pressed); }

.as-navigation-scrim {
  display: none;
}

.as-workspace {
  grid-area: workspace;
  height: 100%;
  min-width: 0;
  overflow-y: auto;
}

.as-top-app-bar__title {
  display: none;
  font-size: var(--as-font-card-title-size);
}

.as-profile-menu {
  max-width: 100%;
  min-width: 0;
  position: relative;
}

.as-profile-menu__trigger,
.as-profile-menu__item {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--as-color-text-primary);
  cursor: pointer;
  display: flex;
  gap: var(--as-space-2);
}

.as-profile-menu__trigger {
  border-radius: var(--as-shape-button);
  color: var(--as-color-text-secondary);
  max-width: 100%;
  min-height: var(--as-size-action-standard);
  min-width: 0;
  padding-inline: var(--as-space-3);
}

.as-profile-menu__trigger > span:not(.as-icon, .as-avatar) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.as-profile-menu__trigger:hover,
.as-profile-menu__item:hover {
  background: var(--as-color-surface-hover);
  color: var(--as-color-text-primary);
}

.as-profile-menu__panel {
  background: var(--as-color-surface-container-lowest);
  border-radius: var(--as-shape-menu);
  box-shadow: var(--as-elevation-menu);
  display: grid;
  gap: var(--as-space-1);
  inset-inline-end: 0;
  min-width: var(--as-size-navigation-drawer);
  padding: var(--as-space-2);
  position: absolute;
  top: calc(100% + var(--as-space-2));
  z-index: 8;
}

.as-profile-menu__panel[hidden] {
  display: none;
}

.as-profile-menu__identity {
  display: grid;
  gap: var(--as-space-1);
  overflow-wrap: anywhere;
  padding: var(--as-space-3);
}

/* 本人の欄の email と役割は大文字にしない (email を大文字で出すと別の宛先に見える。DEC-56) */
.as-profile-menu__identity .as-metadata { text-transform: none; }

.as-profile-menu__items {
  display: grid;
  gap: var(--as-space-1);
}

.as-profile-menu__item {
  border-radius: var(--as-shape-button-square);
  min-height: var(--as-size-action-standard);
  padding-inline: var(--as-space-3);
  text-align: start;
  text-decoration: none;
  width: 100%;
}

.as-app-content {
  margin-inline: auto;
  max-width: var(--as-size-content);
  min-width: 0;
  padding: var(--as-space-6);
}

/* 本文 (main、tabindex="-1") は Tab では止まらず、画面の描画の後と、dialog を閉じて戻り先が消えたとき
   (components.ts の restoreFocus) にプログラムで focus する着地点。auth-parts.css の [tabindex]:focus-visible の
   outline が当たると、.as-workspace の overflow で下辺だけが横線として残るため外す (Issue 1334)。
   [tabindex="-1"] を付けて詳細度を上げ、後から読む CSS の [tabindex]:focus-visible に負けないようにする。 */
.as-app-content[tabindex="-1"]:focus-visible {
  outline: none;
}

.as-page {
  display: grid;
  gap: var(--as-space-6);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.as-page-header {
  align-items: flex-start;
  display: flex;
  gap: var(--as-space-5);
  justify-content: space-between;
}

.as-page-header__copy,
.as-page-header__trailing {
  display: grid;
  gap: var(--as-space-2);
}

.as-page-header__trailing {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.as-page-action-bar {
  align-items: center;
  background: var(--as-color-surface-container-low);
  border-radius: var(--as-shape-pane);
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-space-3);
  padding: var(--as-space-3);
}

.as-search-field {
  align-items: center;
  background: var(--as-color-surface-container-high);
  display: inline-flex;
  gap: var(--as-space-2);
  min-height: var(--as-size-action-page);
  padding-inline: var(--as-space-4);
}

.as-search-field {
  border-radius: var(--as-shape-search);
  flex: 1 1 var(--as-size-detail);
}

.as-search-field input {
  background: transparent;
  border: 0;
  min-width: 0;
  outline: 0;
  width: 100%;
}

.as-search-field:focus-within { outline: var(--as-focus-width) solid var(--as-color-focus); outline-offset: var(--as-space-1); }
.as-search-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--as-space-3); width: 100%; }

.as-tabs {
  align-items: center;
  display: flex;
  gap: var(--as-space-1);
}

.as-tab {
  border-radius: var(--as-shape-button);
  color: var(--as-color-text-secondary);
  min-height: var(--as-size-action-standard);
  padding: var(--as-space-2) var(--as-space-4);
  text-decoration: none;
}

.as-tab:hover { background: var(--as-color-surface-hover); }

.as-tab.is-selected {
  background: var(--as-color-surface-selected);
  color: var(--as-color-on-surface-selected);
  font-weight: var(--as-font-weight-semibold);
}

.as-list-pattern,
.as-list-detail__list,
.as-list-detail__detail,
.as-settings-section,
.as-operations-pattern,
.as-danger-zone {
  border-radius: var(--as-shape-pane);
}

.as-list-detail__list {
  background: var(--as-color-surface-container-lowest);
  min-width: 0;
}

.as-list-detail {
  display: grid;
  gap: var(--as-space-4);
  grid-template-columns:
    minmax(var(--as-size-list-pane-min), var(--as-size-detail))
    minmax(var(--as-size-detail-pane-min), 1fr);
  min-height: var(--as-size-list-detail-min);
  min-width: 0;
}

.as-list-detail__list,
.as-list-detail__detail {
  min-width: 0;
  overflow: hidden;
}

.as-list-detail__detail {
  background: var(--as-color-surface-container-low);
}

.as-selection-list {
  display: grid;
  gap: var(--as-space-1);
  list-style: none;
  margin: 0;
  padding: var(--as-space-2);
}

.as-selection-list__item { min-width: 0; }

.as-list-row {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--as-shape-list-item-inner);
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: var(--as-space-3);
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  min-height: var(--as-size-row);
  padding: var(--as-space-2) var(--as-space-3);
  text-align: start;
  width: 100%;
}

.as-list-row:hover { background: var(--as-color-surface-hover); }

.as-list-row--without-leading {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.as-list-row:active { background: var(--as-color-surface-pressed); }

.as-list-row.is-selected {
  background: var(--as-color-surface-selected);
  border-radius: var(--as-shape-list-item-selected);
  color: var(--as-color-on-surface-selected);
}

.as-list-row.is-selected:hover { background: var(--as-color-surface-selected-hover); }
.as-list-row.is-selected:active { background: var(--as-color-surface-selected-pressed); }
.as-list-row strong { font-weight: var(--as-font-weight-medium); }
.as-list-row.is-selected strong { font-weight: var(--as-font-weight-semibold); }

.as-team-membership-row {
  cursor: default;
  grid-template-columns: minmax(0, 1fr) auto;
}

.as-team-membership-row:hover { background: transparent; }

.as-team-membership-row .as-button {
  padding-inline: var(--as-space-3);
  white-space: nowrap;
}

.as-list-row__copy {
  display: grid;
  min-width: 0;
}

.as-list-row__copy > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.as-avatar {
  align-items: center;
  background: var(--as-color-action-secondary);
  border-radius: var(--as-shape-icon-button);
  color: var(--as-color-on-action-secondary);
  display: inline-flex;
  height: var(--as-size-action-standard);
  justify-content: center;
  width: var(--as-size-action-standard);
}

.as-avatar--large {
  font-size: var(--as-font-section-title-size);
  height: var(--as-size-avatar-large);
  width: var(--as-size-avatar-large);
}

.as-avatar--profile { height: var(--as-size-avatar-profile); width: var(--as-size-avatar-profile); }
.as-avatar--header { height: var(--as-size-avatar-header); width: var(--as-size-avatar-header); }
.as-avatar { overflow: hidden; flex-shrink: 0; }
.as-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.as-profile-summary__name { overflow-wrap: anywhere; }
.as-profile-summary__actions { display: flex; flex-wrap: wrap; gap: var(--as-space-2); }
.as-settings-stack > .as-button { justify-self: start; }
.as-file-field { display: grid; gap: var(--as-space-3); justify-items: start; }
.as-file-field > [role='alert'] { color: var(--as-color-danger); }

.as-avatar[data-avatar-color='teal'] {
  background: var(--as-color-info-surface);
  color: var(--as-color-info);
}

.as-avatar[data-avatar-color='green'] {
  background: var(--as-color-success-surface);
  color: var(--as-color-success);
}

.as-avatar[data-avatar-color='amber'] {
  background: var(--as-color-warning-surface);
  color: var(--as-color-warning);
}

.as-avatar[data-avatar-color='purple'] {
  background: var(--as-color-action-secondary);
  color: var(--as-color-on-action-secondary);
}

.as-avatar[data-avatar-color='neutral'] {
  background: var(--as-color-surface-container-high);
  color: var(--as-color-text-primary);
}

.as-profile-summary {
  align-items: center;
  display: grid;
  gap: var(--as-space-4);
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.as-profile-summary > div {
  display: grid;
  gap: var(--as-space-1);
  min-width: 0;
}

.as-detail-panel {
  display: grid;
  gap: var(--as-space-5);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--as-space-5);
}

.as-detail-panel__header {
  align-items: flex-start;
  display: flex;
  gap: var(--as-space-3);
  justify-content: space-between;
}

.as-detail-panel__header > div { flex: 1; min-width: 0; }
.as-detail-panel__header h2 { overflow-wrap: anywhere; }

.as-detail-panel__back { display: none; }

.as-detail-panel--standalone .as-detail-panel__back { display: inline-flex; }

.as-detail-list {
  display: grid;
  gap: var(--as-space-1);
  margin: 0;
}

.as-detail-list > div {
  display: grid;
  gap: var(--as-space-4);
  grid-template-columns: minmax(0, var(--as-size-detail-label)) minmax(0, 1fr);
  padding-block: var(--as-space-2);
}

.as-detail-list dt { color: var(--as-color-text-secondary); }
.as-detail-list dd { margin: 0; overflow-wrap: anywhere; }

.as-sensitive-value {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  margin: 0;
}

.as-detail-panel__actions,
.as-dialog__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-space-2);
  justify-content: flex-end;
}

.as-table-container {
  background: var(--as-color-surface-container-lowest);
  border-radius: var(--as-shape-pane);
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
  overscroll-behavior-x: contain;
  width: 100%;
}

.as-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: var(--as-size-table-min);
  width: 100%;
}

.as-table tbody td { border-top: var(--as-border-width) solid var(--as-color-outline-variant); }

.as-table th,
.as-table td {
  padding: var(--as-space-3) var(--as-space-4);
  text-align: start;
  vertical-align: middle;
}

.as-table th {
  color: var(--as-color-text-secondary);
  font-size: var(--as-font-metadata-size);
  font-weight: var(--as-font-weight-medium);
  white-space: nowrap;
}

.as-table--nowrap td { white-space: nowrap; }

/* 列の多い監視表用 (dataassist のバッチ一覧)。標準の余白のままだと Large 幅でも操作列が画面外に出る。 */
.as-table--dense th,
.as-table--dense td { padding-inline: var(--as-space-3); }

.as-table-hint {
  color: var(--as-color-text-secondary);
  display: none;
  font-size: var(--as-font-metadata-size);
  padding: var(--as-space-3) var(--as-space-4);
}

.as-disclosure {
  border-top: var(--as-border-width) solid var(--as-color-outline-variant);
  padding-block: var(--as-space-3);
}

.as-disclosure > summary {
  color: var(--as-color-text-secondary);
  cursor: pointer;
  min-height: var(--as-size-target-touch);
  padding-block: var(--as-space-3);
}

.as-table__link {
  color: var(--as-color-text-primary);
  font-weight: var(--as-font-weight-semibold);
  text-decoration: none;
}

.as-table__link:hover { text-decoration: underline; }

.as-settings-section,
.as-operations-pattern {
  background: var(--as-color-surface-container-low);
  display: grid;
  gap: var(--as-space-5);
  padding: var(--as-space-5);
}

.as-settings-section__header,
.as-settings-stack,
.as-setting-values,
.as-form-stack,
.as-operation-list {
  display: grid;
  gap: var(--as-space-3);
  grid-template-columns: minmax(0, 1fr);
}

.as-setting-action {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-space-3);
  justify-content: space-between;
}

.as-field {
  display: grid;
  gap: var(--as-space-1);
  min-width: 0;
}

fieldset.as-field { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
fieldset.as-field > legend { padding: 0; margin-bottom: var(--as-space-2); }

.as-field__label {
  font-size: var(--as-font-label-size);
  font-weight: var(--as-font-weight-medium);
}

.as-field__control {
  align-items: center;
  background: var(--as-color-surface-container-lowest);
  border: var(--as-border-width) solid var(--as-color-outline);
  border-radius: var(--as-shape-text-field);
  display: flex;
  min-height: var(--as-size-field);
  padding-inline: var(--as-space-4);
}

.as-field__control input,
.as-field__control textarea {
  background: transparent;
  border: 0;
  font-size: var(--as-font-input-size);
  min-width: 0;
  outline: 0;
  width: 100%;
}

.as-field:focus-within .as-field__control {
  border-color: var(--as-color-focus);
  outline: var(--as-focus-width) solid var(--as-color-focus);
  outline-offset: var(--as-space-1);
}

.as-field__control input:focus-visible,
.as-field__control textarea:focus-visible { outline: 0; }

.as-field__control textarea { resize: vertical; padding-block: var(--as-space-3); min-height: calc(var(--as-size-field) * 2); }

.as-field__control:hover { border-color: var(--as-color-text-primary); }

.as-select { anchor-scope: --as-select-control; }
.as-select .as-field__control { anchor-name: --as-select-control; gap: var(--as-space-2); }
.as-select input[readonly] { cursor: pointer; }
.as-select__chevron { transform: rotate(90deg); pointer-events: none; }
.as-select:has([aria-expanded="true"]) .as-select__chevron { transform: rotate(-90deg); }

.as-select__menu {
  background: var(--as-color-surface-container);
  border: 0;
  border-radius: var(--as-shape-menu);
  box-shadow: var(--as-elevation-menu);
  color: var(--as-color-text-primary);
  inset: auto;
  left: anchor(left);
  margin: var(--as-space-1) 0;
  max-height: min(var(--as-size-select-menu-max), var(--as-size-select-menu-viewport-max));
  max-width: calc(100vw - var(--as-space-4));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--as-space-2) 0;
  position: fixed;
  position-anchor: --as-select-control;
  position-try-fallbacks: flip-block;
  scrollbar-gutter: stable;
  top: anchor(bottom);
  width: anchor-size(width);
}

@supports not (anchor-scope: --as-select-control) {
  .as-select__menu {
    inset: auto var(--as-space-2) var(--as-space-2);
    margin-inline: auto;
    width: min(var(--as-size-dialog), calc(100vw - var(--as-space-4)));
  }
}

.as-select__option {
  align-items: center;
  cursor: pointer;
  display: grid;
  font-size: var(--as-font-input-size);
  gap: var(--as-space-3);
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: var(--as-size-target-touch);
  padding: var(--as-space-3) var(--as-space-4);
}

.as-select__option > span:first-child { display: grid; overflow-wrap: anywhere; }
html[data-icons-ready="true"] .as-select__option:not([aria-selected="true"]) > .as-icon { visibility: hidden; }
.as-select__option[aria-selected="true"] { background: var(--as-color-surface-selected); }
html[data-icons-ready="true"] .as-select__option[aria-selected="true"] > .as-icon { visibility: visible; }
.as-select__option:hover,
.as-select__option.is-active { background: var(--as-color-surface-hover); }
.as-select__option[aria-selected="true"]:hover,
.as-select__option[aria-selected="true"].is-active { background: var(--as-color-surface-selected-hover); }
.as-select__option.is-active { outline: var(--as-border-width) solid var(--as-color-focus); outline-offset: calc(-1 * var(--as-border-width)); }
.as-select__option:active { background: var(--as-color-surface-pressed); }
.as-select__empty { padding: var(--as-space-4); }

label.as-list-row { grid-template-columns: auto minmax(0, 1fr); }
label.as-list-row:has(input:checked) { background: var(--as-color-surface-selected); }
label.as-list-row:has(input:checked):hover { background: var(--as-color-surface-selected-hover); }
label.as-list-row input { accent-color: var(--as-color-action-primary); }

.as-field--error .as-field__control {
  border-color: var(--as-color-danger);
}

.as-field--error .as-field__supporting { color: var(--as-color-danger); }

.as-field__supporting,
.as-field__error {
  color: var(--as-color-text-secondary);
  font-size: var(--as-font-metadata-size);
}

.as-field__error {
  align-items: center;
  color: var(--as-color-danger);
  display: flex;
  gap: var(--as-space-1);
}

.as-state-panel {
  align-items: flex-start;
  background: var(--as-color-surface-container-low);
  border-radius: var(--as-shape-pane);
  display: flex;
  gap: var(--as-space-4);
  min-height: var(--as-size-state-panel);
  padding: var(--as-space-5);
}

.as-state-panel--danger { color: var(--as-color-danger); }
.as-state-panel--warning { color: var(--as-color-warning); }
.as-state-panel--success { color: var(--as-color-success); }

.as-inline-notice {
  align-items: flex-start;
  background: var(--as-color-info-surface);
  border-radius: var(--as-shape-card);
  display: flex;
  gap: var(--as-space-3);
  padding: var(--as-space-3) var(--as-space-4);
}

.as-inline-notice p { color: var(--as-color-text-secondary); }
.as-inline-notice--warning { background: var(--as-color-warning-surface); }
.as-inline-notice--danger { background: var(--as-color-danger-surface); color: var(--as-color-on-danger-surface); }
.as-inline-notice--success { background: var(--as-color-success-surface); }

.as-operation-status {
  align-items: flex-start;
  background: var(--as-color-surface-container-lowest);
  border-radius: var(--as-shape-card);
  display: flex;
  gap: var(--as-space-3);
  padding: var(--as-space-4);
}

.as-operation-status--success > .as-icon { color: var(--as-color-success); }
.as-operation-status--warning > .as-icon { color: var(--as-color-warning); }
.as-operation-status--error > .as-icon { color: var(--as-color-danger); }

.as-copy-value {
  align-items: center;
  background: var(--as-color-surface-container-lowest);
  border-radius: var(--as-shape-card);
  display: grid;
  gap: var(--as-space-2);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--as-space-3) var(--as-space-4);
}

.as-copy-value > .as-metadata { grid-column: 1 / -1; }
.as-copy-value__value { overflow-wrap: anywhere; }

.as-copy-value .as-icon-button::after {
  left: auto;
  right: 0;
  transform: none;
}

.as-danger-zone {
  background: var(--as-color-danger-surface);
  color: var(--as-color-on-danger-surface);
  display: grid;
  gap: var(--as-space-4);
  padding: var(--as-space-5);
}

.as-danger-zone__header,
.as-danger-action {
  align-items: center;
  display: flex;
  gap: var(--as-space-4);
  justify-content: space-between;
}

.as-impact-summary {
  display: grid;
  gap: var(--as-space-2);
  grid-template-columns: repeat(auto-fit, minmax(var(--as-size-list-pane-min), 1fr));
  margin: 0;
}

.as-impact-summary__item {
  background: var(--as-color-surface-container-low);
  border-radius: var(--as-shape-card);
  display: grid;
  gap: var(--as-space-1) var(--as-space-2);
  grid-template-columns: auto minmax(0, 1fr);
  padding: var(--as-space-3);
}

.as-impact-summary__item .as-icon { grid-row: 1 / 3; }
.as-impact-summary__item dt { color: var(--as-color-text-secondary); }
.as-impact-summary__item dd { font-weight: var(--as-font-weight-semibold); margin: 0; }

.as-dialog {
  box-shadow: var(--as-elevation-dialog);
  background: var(--as-color-surface-container-high);
  border-radius: var(--as-shape-dialog);
  border: 0;
  color: inherit;
  overflow: hidden;
  max-height: calc(100% - var(--as-space-8));
  max-width: var(--as-size-dialog);
  padding: 0;
  width: calc(100% - var(--as-space-8));
}

.as-dialog::backdrop { background: var(--as-color-scrim); }

.as-dialog__body {
  background: var(--as-color-surface-container-high);
  border-radius: var(--as-shape-dialog);
  display: grid;
  gap: var(--as-space-5);
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - var(--as-space-8));
  overflow: hidden;
  padding: var(--as-space-6);
}

.as-dialog__content { overflow-y: auto; min-height: 0; padding: var(--as-space-1); display: grid; gap: var(--as-space-5); }
.as-dialog__error:empty, .as-field__supporting:empty, .as-field__error:empty { display: none; }

.as-dialog__header {
  align-items: flex-start;
  display: flex;
  gap: var(--as-space-4);
}

.as-dialog__icon {
  align-items: center;
  background: var(--as-color-action-secondary);
  border-radius: var(--as-shape-icon-button);
  color: var(--as-color-on-action-secondary);
  display: inline-flex;
  flex: none;
  height: var(--as-size-action-page);
  justify-content: center;
  width: var(--as-size-action-page);
}

.as-dialog--medium .as-dialog__icon,
.as-dialog--high .as-dialog__icon,
.as-dialog--critical .as-dialog__icon {
  background: var(--as-color-danger-surface);
  color: var(--as-color-on-danger-surface);
}

.as-dialog__error.is-error { color: var(--as-color-danger); }

.as-snackbar {
  overflow-wrap: anywhere;
  width: max-content;
  align-items: center;
  background: var(--as-color-surface-inverse);
  border-radius: var(--as-shape-card);
  bottom: var(--as-space-5);
  box-shadow: var(--as-elevation-menu);
  color: var(--as-color-text-inverse);
  display: flex;
  gap: var(--as-space-3);
  left: 50%;
  max-width: calc(100% - var(--as-space-8));
  padding: var(--as-space-3) var(--as-space-4);
  position: fixed;
  transform: translateX(-50%);
  z-index: 8;
}

.as-snackbar .as-icon-button { color: inherit; }

.as-pagination {
  align-items: center;
  display: flex;
  gap: var(--as-space-3);
  justify-content: center;
}

@media (max-width: 74.999rem) {
  .as-app-shell {
    grid-template-columns: var(--as-size-navigation-rail) minmax(0, 1fr);
  }

  .as-navigation__header {
    justify-content: center;
  }

  .as-navigation__title { display: none; }
  .as-navigation__item {
    flex-direction: column;
    gap: var(--as-space-1);
    font-size: var(--as-font-metadata-size);
    text-align: center;
    justify-content: center;
    padding-inline: 0;
  }
}

@media (max-width: 52.499rem) {
  .as-list-detail .as-list-row.is-selected { background: transparent; border-radius: var(--as-shape-list-item-inner); color: inherit; }
  .as-list-detail .as-list-row.is-selected strong { font-weight: var(--as-font-weight-medium); }
  .as-list-detail .as-list-row.is-selected:hover { background: var(--as-color-surface-hover); }
  .as-list-detail .as-list-row.is-selected:active { background: var(--as-color-surface-pressed); }

  .as-table-hint { display: block; }
  .as-list-detail {
    display: block;
  }

  .as-list-detail__detail {
    display: none;
  }

  .as-list-detail[data-compact-detail="true"] .as-list-detail__list {
    display: none;
  }

  .as-list-detail[data-compact-detail="true"] .as-list-detail__detail {
    display: block;
  }

  .as-detail-panel__back { display: inline-flex; }

  .as-page--compact-detail > .as-page-header,
  .as-page--compact-detail > .as-page-action-bar {
    display: none;
  }

  .as-page-header,
  .as-danger-action {
    align-items: stretch;
    flex-direction: column;
  }

  .as-page-header__trailing {
    justify-content: flex-start;
  }
}

@media (max-width: 37.499rem) {
  .as-app-shell {
    grid-template-areas:
      "header"
      "workspace";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .as-global-header {
    flex-wrap: wrap;
    padding-block: var(--as-space-2);
    gap: var(--as-space-2);
    padding-inline: var(--as-space-2);
  }

  /* 狭い画面ではサービス名を見た目からだけ外し、ロゴと開閉のアイコンを残す。読み上げの名前には残す (Issue 1075)。 */
  .as-service-switcher__label {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: var(--as-border-width);
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: var(--as-border-width);
  }

  .as-service-switcher__trigger {
    gap: var(--as-space-1);
  }

  .as-global-header__brand .as-brand-mark {
    height: var(--as-size-action-standard);
    width: var(--as-size-action-standard);
  }

  .as-module-switcher {
    order: 3;
    flex: 1 1 100%;
  }

  .as-module-switcher__item {
    flex: 1;
    justify-content: center;
    min-height: var(--as-size-target-touch);
    font-size: var(--as-font-metadata-size);
    padding-inline: var(--as-space-2);
  }

  .as-global-header__actions {
    flex: none;
    gap: 0;
    margin-inline-start: auto;
  }

  .as-global-header__actions > .as-icon-button {
    display: inline-flex;
  }

  .as-global-header__actions > .as-icon-button[hidden] {
    display: none;
  }

  .as-profile-menu__trigger {
    min-height: var(--as-size-target-touch);
    justify-content: center;
    padding: 0;
    min-width: var(--as-size-target-touch);
  }

  .as-profile-menu__trigger > span:not(.as-icon, .as-avatar) {
    display: none;
  }

  .as-profile-menu__panel {
    max-width: calc(100vw - var(--as-space-4));
  }

  .as-navigation {
    border-radius: 0 var(--as-shape-drawer) var(--as-shape-drawer) 0;
    box-shadow: var(--as-elevation-drawer);
    left: 0;
    max-width: var(--as-size-navigation-drawer);
    height: 100dvh;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition: transform var(--as-motion-spatial-default-duration) var(--as-motion-spatial-easing);
    width: calc(100% - var(--as-space-8));
    z-index: 7;
  }

  .as-app-shell[data-navigation-open="true"] .as-navigation {
    transform: translateX(0);
  }

  .as-navigation__header {
    justify-content: flex-start;
  }

  .as-navigation__title,
  .as-navigation__item > span:not(.as-icon),
  .as-navigation__header .as-icon-button {
    display: inline-flex;
  }

  .as-navigation__header .as-icon-button { margin-inline-start: auto; }

  .as-navigation__item {
    flex-direction: row;
    text-align: start;
    font-size: var(--as-font-label-size);
    justify-content: flex-start;
    padding-inline: var(--as-space-4);
  }

  .as-navigation-scrim {
    background: var(--as-color-scrim);
    border: 0;
    display: none;
    inset: 0;
    position: fixed;
    z-index: 6;
  }

  .as-app-shell[data-navigation-open="true"] .as-navigation-scrim {
    display: block;
  }

  .as-profile-summary {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .as-profile-summary > button {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .as-app-content {
    padding: var(--as-space-4);
  }

  .as-page-action-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .as-tabs {
    overflow-x: auto;
    width: 100%;
  }

  .as-search-field {
    flex: 0 0 auto;
    width: 100%;
  }

  .as-detail-list > div {
    gap: var(--as-space-1);
    grid-template-columns: 1fr;
  }

  .as-detail-panel__header { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .as-detail-panel__header > div { grid-column: 1 / -1; grid-row: 2; }
  .as-detail-panel__header > .as-status { grid-column: 2; grid-row: 1; justify-self: end; }

  .as-dialog__header .as-dialog__icon { display: none; }

  .as-dialog { max-height: 100dvh; max-width: 100%; width: 100%; margin: 0; border-radius: 0; }

  .as-dialog__body {
    align-content: start;
    max-height: 100dvh;
    border-radius: 0;
  }
}

@media (pointer: coarse) {
  .as-profile-menu__trigger,
  .as-module-switcher__item,
  .as-icon-button,
  .as-tab {
    min-height: var(--as-size-target-touch);
    min-width: var(--as-size-target-touch);
  }
}

/* サービス切替: profile menuと同じsurface・focus契約。トリガーはブランドマーク・サービス名・開閉のアイコンの1つのボタン (Issue 1075)。 */
.as-service-switcher { position: relative; min-width: 0; }
.as-service-switcher__trigger {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--as-shape-button);
  color: var(--as-color-text-primary);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: var(--as-font-weight-semibold);
  gap: var(--as-space-3);
  max-width: 100%;
  min-height: var(--as-size-target-touch);
  min-width: 0;
  padding-block: 0;
  padding-inline: 0 var(--as-space-2);
}
.as-service-switcher__trigger:hover { background: var(--as-color-surface-hover); }
.as-service-switcher__trigger:active { background: var(--as-color-surface-pressed); }
.as-service-switcher__trigger[aria-expanded="true"] { background: var(--as-color-surface-container-high); }
.as-service-switcher__trigger > .as-brand-mark { flex: none; }
.as-service-switcher__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.as-service-switcher__chevron { color: var(--as-color-text-secondary); flex: none; }
.as-service-switcher__trigger[aria-expanded="true"] .as-service-switcher__chevron { transform: rotate(180deg); }
.as-service-switcher__panel {
  position: absolute;
  z-index: 20;
  inset-inline-start: 0;
  inset-block-start: 100%;
  max-width: calc(100vw - var(--as-space-8));
  min-width: min(var(--as-size-detail), calc(100vw - var(--as-space-8)));
  padding: var(--as-space-2);
  border-radius: var(--as-shape-menu);
  background: var(--as-color-surface-container-lowest);
  box-shadow: var(--as-elevation-menu);
}
.as-service-switcher__item {
  display: flex;
  align-items: center;
  gap: var(--as-space-3);
  width: 100%;
  min-height: var(--as-size-target-touch);
  padding: var(--as-space-3);
  border: 0;
  border-radius: var(--as-shape-menu);
  background: transparent;
  color: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.as-service-switcher__item[aria-current] { background: var(--as-color-surface-selected); color: var(--as-color-on-surface-selected); }
.as-service-switcher__item:hover { background: var(--as-color-surface-container-high); }
.as-service-switcher__copy { display: grid; gap: var(--as-space-1); }