/* 共通部品の外観。ページ側は配置・幅・内容固有の差だけを指定する。 */
:root {
  --ui-radius-control: 8px;
  --ui-radius-panel: 8px;
  --ui-radius-tag: 4px;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 24px;
  --ui-control-height: 48px;
  --ui-action-width: 16rem;
  --ui-compact-width: 7rem;
  --ui-control-border: #becbc2;
  --ui-focus-color: var(--green, #245445);
  --ui-counter-background: var(--green, #245445);
  --ui-control-disabled-background: #eceff1;
  --ui-control-disabled-color: #66717c;
  --ui-control-disabled-border: #c9cfd5;
  --ui-surface-subtle: #f1f5f0;
  --ui-info-background: #e1ecfb;
  --ui-info-color: #28527b;
  --ui-success-background: #e3efe6;
  --ui-success-color: #245445;
  --ui-warning-background: #fff0d6;
  --ui-warning-color: #825210;
  --ui-warning-action-hover: #f5dfb7;
  --ui-danger-background: #fbe2e2;
  --ui-danger-color: #912b3c;
  --ui-neutral-background: #ecebe5;
  --ui-neutral-color: #595b53;
  --ui-danger-action: #a33124;
  --ui-danger-action-hover: #83281d;
  --ui-dialog-backdrop: rgb(0 0 0 / .45);
}

/* 通常入力。select の外観は引き続き select.css が所有する。 */
:where(.stack-form, .search-form, .filter-grid, .dashboard-create-form, .home-assignment-form, .taxonomy-picker)
  :where(input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]), textarea) {
  min-height: var(--ui-control-height);
  padding: 10px 12px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-radius-control);
  background: var(--paper);
  color: var(--ink);
}
.stack-form .form-field { display: grid; gap: 5px; min-width: 0; }
.stack-form .field { margin-block: var(--ui-space-3); }
.stack-form .form-field > label { display: block; margin: 0; font-size: .9rem; font-weight: 700; }
.stack-form .form-field :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) { width: 100%; }
.form-field .helptext { margin: 0; color: var(--ink-soft); font-size: .83rem; font-weight: 400; }
.form-field .errorlist { margin: 0; padding-left: 1.25rem; color: var(--ui-danger-color); font-size: .85rem; }
.has-error :is(input, textarea), input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--ui-danger-color); }
.stack-form :is(input, textarea):disabled { background: var(--ui-control-disabled-background); color: var(--ui-control-disabled-color); border-color: var(--ui-control-disabled-border); }
:is(.stack-form, .university-mode-options, .want-notice-choices, .availability-choice) label:has(> :is(input[type="checkbox"], input[type="radio"])),
.checkbox-field .checkbox-label {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 10px;
  min-height: 44px;
  padding-block: var(--ui-space-2);
  font-weight: 400;
  cursor: pointer;
}
:is(.stack-form, .university-mode-options, .want-notice-choices, .availability-choice, .checkbox-field) :is(input[type="checkbox"], input[type="radio"]) {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 5px 0 0;
  padding: 0;
  accent-color: var(--green);
}
label:has(> :is(input[type="checkbox"], input[type="radio"]):disabled) { cursor: not-allowed; }

/* 枠・カード・開いた操作欄。内容の配置は各ページに残す。 */
:where(.card, .panel, .connection-card, .resource-context) {
  min-width: 0;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-panel);
  background: var(--paper);
}
.card { overflow: hidden; box-shadow: var(--shadow); }
/* 折り返したタイトルの行間も同じリンクとして操作できるようにする。 */
.card :is(h2, h3) > a, .group-card h2 > a { display: block; }
:where(.panel) { padding: var(--ui-panel-padding, 23px); margin-bottom: 18px; }
.connection-card { padding: var(--ui-space-5); }
.resource-context { padding: var(--ui-space-3) var(--ui-space-4); }
.form-disclosure, .search-options, .resource-extra { border: 1px solid var(--line); border-radius: var(--ui-radius-panel); }
.resource-extra { background: var(--paper); }
.dashboard-create-form, .home-assignment-form, .dashboard-attendance-form {
  padding: var(--ui-space-4);
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface-subtle);
}

.badge { position: relative; display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding-inline: 4px; border-radius: 10px; background: var(--ui-counter-background); color: #fff; font-size: .75rem; font-variant-numeric: tabular-nums; }

/* 同じ案内の強さを同じ外観で表す。重要通知と通常の状態は区別する。 */
.message, .connection-notice, .profile-missing-notice {
  padding: var(--ui-space-3) var(--ui-space-4);
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-panel);
  background: var(--paper);
}
.message { margin-top: 14px; background: var(--ui-success-background); border-color: #c7dbc9; }
.message-error { background: var(--ui-danger-background); border-color: #e9c4b9; color: var(--ui-danger-color); }
.message-warning { background: var(--ui-warning-background); color: var(--ui-warning-color); }
.message-info { background: var(--ui-info-background); color: var(--ui-info-color); }
.resource-permission-note, .resource-mode-copy { padding: var(--ui-space-3) var(--ui-space-4); border-left: 3px solid var(--green); background: var(--ui-surface-subtle); }
.ui-notification { min-width: 0; overflow-wrap: anywhere; }
.ui-notification-content { flex: 1 1 20rem; min-width: 0; }
.ui-notification-actions { margin-top: var(--ui-space-3); }
.ui-notification-actions form { margin: 0; max-width: 100%; }
.ui-notification-actions .button { margin: 0; }
.ui-deadline { margin-block: var(--ui-space-2); font-size: .9rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-session-info, .ui-resource-row { min-width: 0; overflow-wrap: anywhere; }
.ui-session-info .session-meeting-actions { margin: var(--ui-space-2) 0 0; }
.ui-resource-row { padding-block: var(--ui-space-4); }
.action-attention-note { margin-block: var(--ui-space-3); padding: var(--ui-space-3) var(--ui-space-4); border: 1px solid var(--ui-warning-color); border-radius: var(--ui-radius-panel); background: var(--ui-warning-background); color: var(--ui-warning-color); white-space: pre-line; font-size: 1rem; }
.action-attention-note--danger { border-color: var(--ui-danger-action); background: var(--ui-danger-background); color: var(--ui-danger-color); }

/* 結果と次の操作を共通のリズムで表示する。 */
.empty-state { padding: 40px 24px; border: 1px dashed var(--ui-control-border); border-radius: var(--ui-radius-panel); background: var(--paper); text-align: center; }
.empty-state h2 { margin-top: 0; font-family: inherit; font-size: 1.2rem; font-weight: 600; }
.empty-state .action-row, .catalog-empty-actions { justify-content: center; }
.result-count, .group-search-results { margin-block: var(--ui-space-5) var(--ui-space-3); color: var(--ink-soft); font-size: .9rem; }
.ui-external-link { gap: var(--ui-space-2); }
.ui-external-link:not(.button)::after { margin-inline-start: .2em; vertical-align: -.12em; }

@media (max-width: 760px) {
  :where(.panel) { --ui-panel-padding: 16px; margin-bottom: 16px; }
  .card-body { padding: var(--ui-space-4); }
  .card-grid, .group-list { gap: var(--ui-space-4); }
}