/* 全ロール共通。認可・業務状態は各画面が所有する。 */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('./noto-sans-jp-c4175dd5829d.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --gs-font: 'Noto Sans JP', 'Noto Sans CJK JP', Meiryo, sans-serif;
  font-family: var(--gs-font);
  --gs-primary: #2055c9;
  --gs-on-primary: #fff;
  --gs-primary-container: #dce7ff;
  --gs-on-primary-container: #12346f;
  --gs-surface: #f6f8ff;
  --gs-surface-container: #edf2fc;
  --gs-surface-high: #e5ecf8;
  --gs-on-surface: #18243a;
  --gs-secondary: #4c5e7c;
  --gs-outline: #728099;
  --gs-outline-variant: #c9d3e4;
  --gs-error: #a82d30;
  --gs-radius: 24px;
  --gs-motion: 220ms;
  --gs-easing: cubic-bezier(.2, 0, 0, 1);
  --gs-spring: cubic-bezier(.2, .8, .25, 1.15);
  --gs-green: #176b50;
  --gs-green-container: #c5f0dc;
  --gs-purple: #634596;
  --gs-purple-container: #eadfff;
  --gs-warm: #8b4726;
  --gs-warm-container: #ffdecf;
  --bg: var(--gs-surface);
  --surface: #fff;
  --surface-soft: var(--gs-surface-container);
  --text: var(--gs-on-surface);
  --muted: var(--gs-secondary);
  --line: var(--gs-outline-variant);
  --blue: var(--gs-primary);
  --blue-dark: var(--gs-on-primary-container);
  --blue-soft: var(--gs-primary-container);
}
html { min-width: 0; scroll-padding-block: 100px 32px; }
body { color: var(--gs-on-surface); background: var(--gs-surface); font-family: var(--gs-font); }
button, input, select, textarea { font: inherit; }
button, input:not([type=checkbox]):not([type=radio]), select { min-height: 44px; }
button { border-radius: 24px; transition: background var(--gs-motion), border-radius var(--gs-motion), transform var(--gs-motion); }
button:active:not(:disabled) { transform: scale(.98); border-radius: 14px; }
:focus-visible { outline: 3px solid var(--gs-primary); outline-offset: 4px; }
.gs-admin input:focus, .gs-admin select:focus, .gs-admin textarea:focus, .gs-admin button:focus-visible, .gs-admin a:focus-visible { outline: 3px solid var(--gs-primary); outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
a { color: var(--gs-primary); text-underline-offset: 4px; }
button.primary, .primary-button, .btn-primary { background: var(--gs-primary); color: var(--gs-on-primary); border-color: var(--gs-primary); }
button.primary:hover { background: #1746ac; }
dialog { border: 1px solid var(--gs-outline-variant); border-radius: 28px; background: #fff; color: var(--gs-on-surface); box-shadow: 0 24px 80px #12244530; max-height: calc(100dvh - 48px); overscroll-behavior: contain; }
dialog[open] { animation: gs-enter var(--gs-motion) var(--gs-easing); }
dialog::backdrop { background: #152b5266; }
dialog h2 { font-size: 1.5rem; line-height: 1.35; }
dialog form { min-width: 0; }
input, select, textarea { accent-color: var(--gs-primary); }
input:not([type=checkbox]):not([type=radio]), select, textarea { border-radius: 12px; border: 1px solid var(--gs-outline); color: var(--gs-on-surface); background: #fff; padding: 12px 14px; }
input, select, textarea { max-width: 100%; }
.gs-password { display: flex; align-items: stretch; gap: 8px; }
.gs-password input { flex: 1; min-width: 0; }
.gs-password button { flex: none; font-size: .875rem; }
.gs-skip { position: fixed; inset: 8px auto auto 8px; z-index: 100; padding: 12px; background: #fff; transform: translateY(-180%); }
.gs-skip:focus { transform: none; }
.gs-admin { font-family: var(--gs-font); line-height: 1.65; margin: 0; }
.gs-admin * { box-sizing: border-box; }
.gs-admin [hidden] { display: none !important; }
.gs-admin header { background: var(--gs-surface); border-bottom: 1px solid var(--gs-outline-variant); min-height: 80px; height: auto; padding: 16px 32px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.gs-admin header nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.gs-admin .brand { color: var(--gs-on-primary-container); font-weight: 800; font-size: 1.45rem; text-decoration: none; }
.gs-admin .brand span { background: var(--gs-primary-container); border: 0; border-radius: 20px; padding: 5px 12px; font-size: .8rem; margin-left: 12px; }
.gs-admin main { max-width: 1440px; margin: 0 auto; padding: 40px 40px 80px; min-width: 0; }
.gs-admin h1 { font-size: clamp(1.75rem, 3vw, 2.6rem); letter-spacing: -.035em; margin: 0 0 12px; line-height: 1.25; }
.gs-admin h2 { font-size: 1.5rem; line-height: 1.4; }
.gs-admin h3 { font-size: 1.125rem; }
.gs-admin p { color: var(--gs-secondary); overflow-wrap: anywhere; }
.gs-admin .eyebrow { color: var(--gs-primary); font-size: .75rem; font-weight: 750; letter-spacing: .12em; }
.gs-admin button { border: 1px solid var(--gs-outline-variant); background: #fff; color: var(--gs-primary); padding: 10px 20px; font-weight: 650; cursor: pointer; line-height: 1.5; }
.gs-admin button:hover { background: var(--gs-primary-container); }
.gs-admin button.primary { background: var(--gs-primary); color: #fff; border-color: var(--gs-primary); }
.gs-admin button:disabled { opacity: .55; cursor: not-allowed; }
.gs-admin label { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; font-size: .9rem; font-weight: 650; color: var(--gs-on-surface); }
.gs-admin label.inline, .gs-admin label:has(> input[type=checkbox]) { flex-direction: row; align-items: center; }
.gs-admin label input[type=checkbox] { flex: none; width: 20px; height: 20px; }
.gs-admin .panel { border-radius: 24px; background: #fff; border: 1px solid var(--gs-outline-variant); padding: 28px; margin-block: 24px; }
.gs-admin .gs-login-panel {
  padding: clamp(20px, 4vw, 32px);
  border-radius: 28px;
  background: var(--gs-surface);
}
.gs-admin .gs-login-panel h2 {
  margin-block-start: 0;
  color: var(--gs-on-primary-container);
}
.gs-admin .gs-google-login {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  justify-items: start;
  margin-block: 16px;
  min-height: 40px;
}
.gs-admin .gs-google-login #google-button {
  justify-self: stretch;
  margin: 0;
}
.gs-admin .gs-google-login p {
  margin: 0;
}
.gs-admin .narrow { max-width: 540px; margin-inline: auto; }
.gs-admin:not(.gs-signed-in) .heading { max-width: 540px; margin: 0 auto 28px; }
.gs-admin .scope-bar { background: var(--gs-surface-container); border-radius: 20px; padding: 16px 20px; gap: 16px; display: flex; flex-wrap: wrap; align-items: end; margin: 24px 0; }
.gs-admin .scope-bar label { margin: 0; min-width: 0; flex: 1 1 170px; }
.gs-admin .scope-bar span { margin: 0 0 10px; color: var(--gs-on-primary-container); }
#gs-scope-summary { flex-basis: 100%; margin: 0; overflow-wrap: anywhere; font-size: 14px; }
.gs-admin .stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 24px 0 32px; }
.gs-admin .stats article { border-radius: 24px; border: 0; background: var(--gs-primary-container); padding: 24px; color: var(--gs-on-primary-container); }
.gs-admin .stats strong { display: block; font-size: 2.25rem; }
.gs-admin .stats span { font-size: .9rem; }
.gs-admin .organizations { display: grid; gap: 16px; }
.gs-admin .organization { background: #fff; border: 1px solid var(--gs-outline-variant); border-radius: 24px; padding: 24px; }
.gs-admin .organization .detail, .gs-admin .actions, .gs-admin .section-title { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.gs-admin .section-title { justify-content: space-between; }
.gs-admin .section-title > *, .gs-admin .actions > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.gs-admin .section-title button { white-space: normal; }
.gs-admin .organization .detail { margin: 14px 0; }
.gs-admin .badge { background: var(--gs-surface-high); color: var(--gs-on-primary-container); border-radius: 20px; padding: 4px 12px; font-size: .8rem; }
.gs-admin #message, .gs-admin [role=alert] { border-radius: 16px; border: 1px solid var(--gs-outline-variant); background: var(--gs-surface-container); padding: 16px; color: var(--gs-on-surface); }
.gs-admin #message:empty, .gs-admin [role=alert]:empty { margin: 0; border: 0; padding: 0; }
.gs-admin #google-button { width: 100%; max-width: 400px; margin: 20px auto; }
.gs-admin #google-button:empty { display: none; }
.gs-admin #google-button > div { max-width: 100%; }
.gs-admin .gs-list-state { padding: 20px; background: var(--gs-surface-container); border-radius: 20px; margin-block: 24px; }
.gs-admin #mfa-state { color: var(--gs-on-primary-container); background: var(--gs-primary-container); border-radius: 16px; padding: 16px; }
.gs-admin.gs-signed-in[data-gs-app=ops] #mfa { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; max-width: none; margin-inline: 0; padding: 20px; }
.gs-admin.gs-signed-in[data-gs-app=ops] #mfa-heading { margin: 0; font-size: 1.125rem; }
.gs-admin.gs-signed-in[data-gs-app=ops] #mfa-state { flex: 1 1 20rem; margin: 0; padding: 0; background: transparent; }
.gs-admin.gs-signed-in[data-gs-app=ops] #mfa > form,
.gs-admin.gs-signed-in[data-gs-app=ops] #enrollment,
.gs-admin.gs-signed-in[data-gs-app=ops] #enrollment-expired { flex-basis: 100%; min-width: 0; }
.ops-security-summary, .ops-security-card-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.ops-security-summary { margin-bottom: 20px; }
.ops-security-summary p { flex: 1 1 30ch; margin: 0; }
.ops-security-summary button { flex: none; }
.ops-security-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.ops-security-card { min-width: 0; padding: 20px; border: 1px solid var(--gs-outline-variant); border-radius: 20px; background: var(--gs-surface); }
.ops-security-card h3 { margin: 0 0 12px; }
.ops-security-card-heading h3 { margin: 0; }
.ops-security-card #identities { padding-left: 20px; overflow-wrap: anywhere; }
.ops-security-card #identities button { margin: 4px; }
.ops-security-form { display: grid; gap: 16px; }
.gs-admin .ops-security-form label { min-width: 0; margin: 0; }
.ops-security-form input, .ops-security-form textarea { width: 100%; min-width: 0; max-width: 56ch; }
.ops-security-form input[type=email] { max-width: 42ch; }
.gs-admin .ops-security-form .ops-security-days { flex-direction: row; align-items: center; gap: 12px; }
.ops-security-days span { flex: 1; min-width: 0; }
.ops-security-form .ops-security-days input { flex: 0 0 7rem; width: 7rem; }
.ops-security-form textarea { min-height: 6rem; resize: vertical; }
.ops-security-form > button { justify-self: start; max-width: 100%; }
.ops-security-audit { grid-column: 1 / -1; }
@media (min-width: 1100px) {
  .ops-security-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 460px) {
  .ops-security-card { padding: 16px; }
  .gs-admin .ops-security-form .ops-security-days { flex-direction: column; align-items: flex-start; }
  .ops-security-form .ops-security-days input { flex-basis: auto; }
}
.gs-admin dialog { width: min(640px, calc(100vw - 48px)); padding: 28px; }
.gs-admin pre, .gs-admin code { overflow-wrap: anywhere; white-space: pre-wrap; }
.gs-work-nav { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0; margin: 0; }
.gs-work-nav button { border: 0; background: transparent; }
.gs-work-nav button[aria-current=page] { background: var(--gs-primary); color: #fff; }
.gs-panel-inactive { display: none !important; }
.gs-page-intro { margin-bottom: 24px; }
.gs-page-intro h2 { margin-bottom: 6px; }
.gs-signed-in > main > .heading { display: none; }
.gs-signed-in .gs-page-intro h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 8px; }
.gs-signed-in .gs-page-intro h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gs-admin-sidebar { display: flex; flex-direction: column; gap: 20px; padding: 24px 16px; background: var(--gs-surface-container); border-right: 1px solid var(--gs-outline-variant); overflow-y: auto; overflow-wrap: anywhere; }
.gs-admin .gs-admin-sidebar .brand { font-size: 1.3rem; }
.gs-admin .gs-admin-sidebar .brand span { display: block; width: fit-content; margin: 8px 0 0; }
.gs-admin .gs-sidebar-current { font-size: 1.3rem; line-height: 1.4; font-weight: 750; color: var(--gs-on-primary-container); margin: 0; }
.gs-admin .gs-work-nav button { text-align: left; padding: 14px 16px; white-space: normal; }
.gs-sidebar-account { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--gs-outline-variant); }
.gs-sidebar-account a { min-height: 44px; padding: 10px 12px; }
[data-gs-close-sidebar] { display: none; }
.gs-admin dialog.gs-sidebar-dialog, dialog.gs-sidebar-dialog { position: fixed; inset: 0 auto 0 0; margin: 0; width: min(320px, calc(100vw - 40px)); max-width: none; height: 100dvh; max-height: none; padding: 0; border: 0; border-radius: 0 28px 28px 0; overflow: auto; background: var(--gs-surface-container); }
.gs-sidebar-dialog [data-gs-sidebar] { display: flex; position: relative; width: 100%; min-height: 100dvh; height: auto; max-height: none; border: 0; }
.gs-sidebar-dialog [data-gs-close-sidebar] { display: block; align-self: flex-end; min-height: 44px; }
html:has(.gs-sidebar-dialog[open]) { overflow: hidden; }
.gs-admin.gs-signed-in main { padding-top: 8px; }
.gs-admin.gs-signed-in .scope-bar { margin-top: 12px; }
.gs-admin.gs-signed-in #gs-scope-bar { padding: 12px 16px; }
.gs-admin .gs-guide-picker { width: min(880px, calc(100vw - 40px)); }
@media (min-width: 840px) {
  .gs-admin.gs-signed-in main { margin-left: 240px; padding: 24px 24px 48px; }
  .gs-admin.gs-signed-in > header { display: none; }
  .gs-admin-sidebar { position: fixed; inset: 0 auto 0 0; width: 240px; height: 100dvh; }
}
@media (max-width: 839px) {
  .gs-admin-sidebar { display: none; }
  .gs-admin.gs-signed-in main { padding-top: 16px; }
}
.gs-admin .gs-danger { color: var(--gs-error); }
.gs-admin details { border: 1px solid var(--gs-outline-variant); border-radius: 18px; padding: 16px; margin-block: 16px; }
.gs-admin summary { cursor: pointer; min-height: 44px; display: list-item; align-content: center; font-weight: 650; }
.gs-admin table { border-collapse: collapse; max-width: 100%; }
.gs-report-table { overflow-x: auto; max-width: 100%; margin-block: 16px; border: 1px solid var(--gs-outline-variant); border-radius: 16px; }
.gs-report-table table { min-width: 600px; width: 100%; }
.gs-report-table th, .gs-report-table td { min-width: 90px; padding: 12px; text-align: left; }
.gs-admin pre, .gs-admin #secret { background: var(--gs-surface-container); border-radius: 16px; }
.gs-admin .notice-meta { color: var(--gs-secondary); }
.gs-admin #lifecycle-editor details, .gs-admin #lifecycle-editor textarea, .gs-admin #content-panel fieldset, .gs-admin #content-panel textarea { border-color: var(--gs-outline-variant); border-radius: 16px; }
.gs-admin #lifecycle-editor { scroll-padding-top: 150px; }
.gs-admin #contract-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; margin-block: 24px; }
.gs-admin #contract-list button { width: 100%; text-align: left; background: var(--gs-surface-container); border-radius: 20px; padding: 20px; }
.gs-admin #contract-heading { padding-top: 24px; border-top: 1px solid var(--gs-outline-variant); font-size: 1.4rem; }
@media (min-width: 760px) {
  .gs-admin #contract-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .gs-admin #contract-form > label { display: flex; flex-direction: column; justify-content: flex-end; }
  .gs-admin #contract-form > :is(p, button), .gs-admin #contract-form > label:last-of-type { grid-column: 1 / -1; }
  .gs-admin #contract-form > button { justify-self: start; }
}
.gs-admin th, .gs-admin td { padding: 12px; border-bottom: 1px solid var(--gs-outline-variant); text-align: left; }
@keyframes gs-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.gs-help-entry { position: static; width: 100%; text-align: left; background: transparent; color: var(--gs-primary); border: 0; padding: 12px 16px; border-radius: 24px; font-weight: 600; }
.gs-introduction { position: static; padding: 20px; border: 1px solid var(--gs-outline-variant); background: var(--gs-surface-container); border-radius: 24px; margin-block: 20px; }
.gs-introduction[hidden] { display: none !important; }
.gs-introduction button { min-height: 44px; padding: 10px 16px; margin: 4px; color: var(--gs-primary); background: var(--gs-primary-container); border: 0; }
.gs-guide-picker { max-width: 1120px; margin-inline: auto; padding: 28px; }
.gs-guide-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-block: 24px; }
.gs-guide-card { border-radius: 20px; padding: 20px; background: var(--gs-surface-container); border: 1px solid var(--gs-outline-variant); }
.gs-guide-card h3 { margin-top: 0; }
.gs-guide-card button, .gs-guide-picker > button { margin: 4px; min-height: 44px; padding: 10px 16px; color: var(--gs-primary); border: 1px solid var(--gs-outline-variant); background: #fff; }
.gs-guide { position: fixed; right: 20px; bottom: 20px; width: 330px; z-index: 100; border: 2px solid var(--gs-primary); border-radius: 24px; background: #fff; color: var(--gs-on-surface); padding: 20px; box-shadow: 0 12px 48px #163a772b; max-height: calc(100dvh - 40px); overflow: auto; text-align: left; font: 15px/1.6 var(--gs-font); }
.gs-guide[hidden], .gs-help-entry[hidden] { display: none !important; }
.gs-guide h2 { font-size: 1.05rem; line-height: 1.55; margin: 0 0 12px; }
.gs-guide p { margin: 10px 0; }
.gs-guide-expectation { background: var(--gs-primary-container); padding: 12px; border-radius: 12px; }
.gs-guide-save { font-size: .75rem; color: var(--gs-secondary); }
.gs-guide-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-guide { display: flex; flex-direction: column; overflow: hidden; }
.gs-admin fieldset { min-inline-size: 0; max-width: 100%; }
.gs-guide-copy { overflow: auto; min-height: 0; }
.gs-guide-actions { flex-shrink: 0; margin-top: 12px; }
.gs-guide button { border: 1px solid var(--gs-outline-variant); background: #fff; color: var(--gs-primary); padding: 10px 14px; min-height: 44px; }
.gs-guide button.primary { background: var(--gs-primary); color: #fff; }
.gs-guide button:disabled { opacity: .45; }
.gs-guide-target { outline: 3px solid var(--gs-primary) !important; outline-offset: 5px; scroll-margin-block: 24px; }
body.gs-guiding { padding-right: 370px; }
body.gs-guiding .gs-help-entry { display: none; }
body.gs-guiding .task-layout:has(.supporting-pane:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
body.gs-guiding .supporting-pane { position: static; }
.gs-admin dialog.gs-guided-dialog, dialog.gs-guided-dialog { margin-left: max(20px, calc((100vw - 1010px)/2)); margin-right: 390px; width: min(600px, calc(100vw - 410px)); max-width: min(600px, calc(100vw - 410px)); }
.gs-guide-picker > button { padding: 10px 18px; min-height: 44px; }
/* 学習の主操作を通知より先に置き、共通の面・文字・形に揃える。 */
.application-shell, .app-stage, .app-frame, .view { background: var(--gs-surface); }
.navigation-sidebar { background: var(--gs-surface-container); border-right-color: var(--gs-outline-variant); }
.navigation-sidebar .sidebar-current-page { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.navigation-sidebar .rail-nav { flex: 0 0 auto; align-content: start; gap: 8px; }
.rail-item.active, .bottom-nav .active { background: var(--gs-primary-container); color: var(--gs-on-primary-container); border-radius: 28px; }
.primary-button { border-radius: 28px; background: var(--gs-primary); box-shadow: none; }
.login-panel { border-radius: 28px; }
.contract-card button, .contract-actions button, .contract-notice button { border-radius: 24px; border-color: var(--gs-outline-variant); color: var(--gs-primary); font-weight: 650; }
.app-root :is(.study-card,.lesson-study-header,.module-card,.contract-card,.settings-card,.result-card,.score-card,.task-pane-card) { border-radius: 24px; border-color: var(--gs-outline-variant); box-shadow: none; }
.app-root :is(.ghost-button, .secondary-button, .text-button, .primary-button, .back-inline) { border-radius: 24px; min-height: 44px; }
.app-root .service-type-notice { border-radius: 20px; background: var(--gs-surface-container); padding: 16px 20px; }
.app-root .service-type-notice summary { min-height: 44px; align-content: center; cursor: pointer; font-weight: 750; line-height: 1.65; }
.app-root .service-type-notice[open] summary { margin-bottom: 12px; }
.app-root .stage-card { border-radius: 24px; }
.app-root .stage-card.active { background: var(--gs-primary-container); color: var(--gs-on-primary-container); }
.app-root .choice-button { border-radius: 20px; }
@media (max-width: 599px) {
  .gs-help-entry { bottom: 94px; right: 16px; padding: 12px 18px; }
  .gs-introduction { bottom: 160px; right: 16px; }
  .gs-admin .gs-introduction { bottom: 82px; }
  .gs-admin .gs-help-entry { bottom: 16px; }
  body.gs-guiding { padding-right: 0; padding-bottom: calc(var(--gs-guide-height, 260px) + 24px); }
  .gs-guide { inset: auto 8px 8px; width: auto; max-height: 42dvh; border-radius: 20px; padding: 16px; }
  body:not(.gs-admin) .gs-guide { bottom: 84px; }
  .gs-guide-target { scroll-margin-bottom: calc(var(--gs-guide-height, 260px) + 32px); }
  .gs-admin dialog.gs-guided-dialog, dialog.gs-guided-dialog { width: 100%; max-width: 100%; margin: auto 0 0; padding-bottom: calc(var(--gs-guide-height, 260px) + 32px); }
  .gs-admin header { padding: 16px; flex-wrap: wrap; }
  .gs-admin main { padding: 24px 16px 48px; }
  .gs-admin .panel, .gs-admin .organization { padding: 20px; border-radius: 20px; }
  .gs-admin .stats { gap: 8px; }
  .gs-admin .stats article { padding: 16px 12px; border-radius: 20px; }
  .gs-admin .stats strong { font-size: 1.75rem; }
  .gs-admin .stats span { font-size: .75rem; }
  .gs-admin dialog { width: 100%; max-width: 100%; margin: auto 0 0; max-height: calc(100dvh - 24px); border-radius: 28px 28px 0 0; padding: 24px 20px max(24px, env(safe-area-inset-bottom)); }
  .gs-admin .scope-bar { padding: 16px; }
  .gs-work-nav { gap: 4px; padding: 8px; border-radius: 20px; }
  .gs-work-nav button { padding: 10px 12px; flex: 1 1 auto; }
  .gs-admin .organization .actions > button { flex: 1 1 auto; }
}
.gs-admin .divider { color: var(--gs-secondary); }
/* 目的を選ぶページは文書全体でスクロールし、本文を覆う固定入口を作らない。 */
.gs-help-page .app-stage > .task-layout,
.gs-help-page.gs-admin main > :not(#gs-guide-picker):not(#gs-work-nav) { display: none !important; }
.gs-help-page .app-stage > .content-status { display: none; }
.gs-help-page .rail-item.active { color: var(--muted); background: transparent; }
.gs-help-page .rail-item.active span { color: #53627b; background: #eef3fb; }
.gs-help-entry[aria-current=page] { background: var(--gs-primary); color: var(--gs-on-primary); }
#gs-guide-picker[hidden] { display: none !important; }
.gs-admin #gs-guide-picker, #gs-guide-picker { width: 100%; border: 0; background: transparent; box-shadow: none; overflow: visible; max-height: none; }
.gs-help-eyebrow { color: var(--gs-primary); font-weight: 700; margin: 24px 0 8px; }
.gs-guide-picker h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.4; margin: 0 0 12px; letter-spacing: -.025em; }
.gs-help-description { color: var(--gs-secondary); max-width: 48em; line-height: 1.8; }
.gs-help-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, .3fr); gap: 16px; padding: 20px; border-radius: 24px; background: var(--gs-surface-high); margin-top: 28px; }
.gs-help-filters label, .gs-help-select { display: grid; gap: 8px; margin: 0; font-weight: 600; font-size: .9rem; }
.gs-help-filters input { width: 100%; padding: 10px 14px; border: 1px solid var(--gs-outline); border-radius: 12px; background: #fff; color: var(--gs-on-surface); }
.gs-help-select { position: relative; min-width: 0; }
.gs-help-filters .gs-help-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 10px 16px; border: 1px solid var(--gs-outline-variant); border-radius: 16px; background: var(--gs-surface-container); color: var(--gs-on-surface); font-weight: 650; text-align: left; cursor: pointer; }
.gs-help-filters .gs-help-select-trigger:hover { background: var(--gs-primary-container); }
.gs-help-filters .gs-help-select-trigger[aria-expanded=true] { border-color: var(--gs-primary); background: var(--gs-primary-container); color: var(--gs-on-primary-container); }
.gs-help-select-arrow { color: var(--gs-primary); font-size: 1.2rem; transition: transform var(--gs-motion) var(--gs-easing); }
[aria-expanded=true] > .gs-help-select-arrow { transform: rotate(180deg); }
.gs-help-select-menu { position: absolute; z-index: 10; inset: calc(100% + 8px) 0 auto; display: grid; gap: 4px; padding: 8px; border: 1px solid var(--gs-outline-variant); border-radius: 20px; background: var(--gs-surface-container); box-shadow: 0 8px 24px #18243a26; animation: gs-enter var(--gs-motion) var(--gs-easing); }
.gs-help-select-menu[hidden] { display: none !important; }
.gs-help-select-menu [role=option] { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--gs-on-surface); font-weight: 500; text-align: left; cursor: pointer; }
.gs-help-select-menu [role=option]::before { content: ''; width: 1em; flex: none; }
.gs-help-select-menu [role=option][aria-selected=true] { background: var(--gs-primary-container); color: var(--gs-on-primary-container); font-weight: 700; }
.gs-help-select-menu [role=option][aria-selected=true]::before { content: '✓'; }
.gs-help-select-menu [role=option]:hover, .gs-help-select-menu [role=option]:focus-visible { background: var(--gs-surface-high); }
.gs-help-count { color: var(--gs-secondary); margin: 20px 0 0; }
.gs-guide-card { display: flex; flex-direction: column; align-items: flex-start; background: #fff; padding: 24px; }
.gs-guide-card h3 { font-size: 1.15rem; line-height: 1.65; margin: 0 0 8px; }
.gs-guide-card p { line-height: 1.8; color: var(--gs-secondary); margin: 0 0 16px; }
.gs-guide-card > p:nth-of-type(2) { font-size: .8rem; font-weight: 600; margin-top: auto; color: var(--gs-primary); }
.gs-guide-card button:first-of-type { background: var(--gs-primary-container); border: 0; color: var(--gs-on-primary-container); font-weight: 700; }
.gs-help-recovery { margin-top: 24px; padding: 16px; border-top: 1px solid var(--gs-outline-variant); color: var(--gs-secondary); }
.gs-help-recovery summary { cursor: pointer; min-height: 44px; align-content: center; }
.gs-help-recovery button { padding: 10px 16px; margin: 4px; background: #fff; border: 1px solid var(--gs-outline-variant); color: var(--gs-primary); }
html { scrollbar-color: #a9b9d5 var(--gs-surface); scrollbar-width: thin; }
.gs-guide-copy { scrollbar-color: #a9b9d5 transparent; scrollbar-width: thin; }
.home-heading h1 { font-weight: 750; line-height: 1.45; }
.gs-admin header { position: sticky; top: 0; z-index: 30; min-height: 64px; padding-block: 10px; }
.gs-admin-sidebar { scrollbar-width: thin; }
@media (max-width: 599px) {
  .topbar { height: 56px; min-height: 56px; padding-inline: 12px; }
  .topbar .brand-mark { width: 28px; height: 28px; }
  .topbar .brand-name { font-size: 1.1rem; }
  .topbar-account, .topbar .back-button { min-width: 44px; min-height: 44px; }
  .app-frame { min-height: calc(100dvh - 56px); padding-top: 16px; }
  .home-heading h1 { font-size: 1.65rem; margin-block: 4px 8px; }
  .home-heading { margin-bottom: 0; }
  #gs-guide-picker { padding: 20px 16px 96px; }
  .gs-help-filters { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 12px; }
  .gs-guide-list { grid-template-columns: minmax(0, 1fr); }
  .gs-help-entry { position: static; }
  .gs-admin header { flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 56px; padding: 6px 12px; gap: 6px; }
  .gs-admin header nav { flex-wrap: wrap; max-width: 100%; gap: 6px; font-size: .8rem; }
  .gs-admin header nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
  .gs-admin header nav button { padding: 8px 12px; white-space: nowrap; }
  .gs-admin .brand { font-size: .95rem; white-space: nowrap; }
  .gs-admin .brand span { margin-left: 4px; padding: 2px 6px; font-size: .65rem; }
  .gs-admin .gs-work-nav { flex-wrap: nowrap; gap: 8px; padding: 0; }
  .gs-admin .gs-work-nav button { flex: none; width: 100%; white-space: normal; }
}
@media (max-width: 359px) { .gs-admin header .brand span { display: none; } }
/* 利用可能な幅に適応し、ページ全体を自然にスクロールする業務/学習レイアウト。 */
:root { --gs-page-gutter: clamp(12px, 1vw, 16px); --gs-layout-gap: 12px; --gs-sidebar-motion: 280ms var(--gs-easing); }
.gs-admin main { max-width: none; padding-inline: var(--gs-page-gutter); }
.gs-admin.gs-signed-in .panel { margin-block: 16px; padding: 24px; }
.gs-admin.gs-signed-in .scope-bar { margin-block: 12px 16px; }
.gs-admin .scope-bar label { flex: 0 1 36rem; }
.gs-admin .heading, .gs-admin .gs-page-intro { margin-bottom: 16px; }
.gs-admin .gs-page-intro p { margin-block: 0 16px; }
.gs-admin.gs-signed-in .gs-page-intro h1 { position: static; width: auto; height: auto; clip-path: none; overflow: visible; white-space: normal; margin-block: 0 8px; }
.gs-header-title { font-weight: 750; color: var(--gs-on-primary-container); }
.gs-admin :where(input:not([type=checkbox]):not([type=radio]), select, textarea, .gs-password) { width: 100%; max-width: 56ch; min-width: 0; }
.gs-admin input[type=email] { max-width: 42ch; }
.gs-admin input:is([type=number], [type=time]) { max-width: 12ch; }
.gs-admin input:is([type=date], [type=datetime-local]) { max-width: 27ch; }
.gs-admin select { max-width: 36ch; }
.gs-admin textarea { max-width: none; min-height: 7rem; resize: vertical; }
.gs-admin .gs-form-grid,
.gs-admin :is(#member-profile-fields, #support-profile, #content-fields, #notification-rules > fieldset, #content-nested fieldset, #lifecycle-notices > details[open]) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 16px; align-items: start;
}
.gs-admin .gs-form-grid > label,
.gs-admin :is(#member-profile-fields, #support-profile, #content-fields, #notification-rules > fieldset, #content-nested fieldset, #lifecycle-notices > details) > label { margin: 0; min-width: 0; align-self: end; }
.gs-admin .gs-form-grid > :not(label):not(button),
.gs-admin :is(#notification-rules > fieldset, #content-nested fieldset, #lifecycle-notices > details) > :not(label),
.gs-admin form > label:has(textarea), .gs-admin form > label:has(input[name=reason], input[id$="-reason"], #reason),
.gs-admin :is(#notification-rules, #content-nested, #lifecycle-notices) label:has(textarea) { grid-column: 1 / -1; }
.gs-admin .gs-form-grid > button { justify-self: start; align-self: end; width: auto; }
.gs-admin .gs-form-grid > p { margin: 0; }
.gs-admin #notification-form { grid-template-columns: minmax(0, 1fr); }
.gs-admin .gs-notification-settings { display: flex; flex-wrap: wrap; align-items: end; gap: 16px 24px; }
.gs-admin .gs-notification-settings > label { margin: 0; }
.gs-admin .gs-notification-settings > label:has([name=timezone]) { flex: 0 1 20rem; }
.gs-admin .gs-notification-settings > label:has([name=enabled]) { min-height: 48px; }
.gs-admin #notification-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: start; gap: 16px; }
.gs-admin #notification-rules > .gs-notification-rule { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: clamp(12px, 1.4vw, 20px); border: 1px solid var(--gs-outline-variant); border-radius: 20px; background: var(--gs-surface); }
.gs-admin .gs-notification-rule > legend { padding-inline: 8px; font-weight: 750; color: var(--gs-on-primary-container); }
.gs-admin .gs-notification-rule > label { align-self: start; }
.gs-admin .gs-notification-rule :is(input:not([type=checkbox]), textarea) { max-width: none; }
.gs-admin .gs-notification-rule > .gs-notification-choices { display: flex; flex-wrap: wrap; gap: 4px 8px; border: 0; padding: 0; margin: 0; }
.gs-admin .gs-notification-choices > legend { width: 100%; margin-bottom: 6px; font-weight: 600; }
.gs-admin .gs-notification-choices > label { min-height: 44px; margin: 0; padding: 6px 8px; gap: 8px; border-radius: 12px; background: var(--gs-surface-high); }
.gs-admin .gs-notification-choices input[type=checkbox] { margin: 0; }
.gs-admin .gs-notification-rule > button { width: auto; justify-self: end; }
.gs-admin .gs-notification-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-admin .gs-notification-actions > button { width: auto; }
.gs-admin #content-limits-form > p:has(> label) { grid-column: auto; margin: 0; }
.gs-admin #content-limits-form > p:has(input[name=reason]) { grid-column: 1 / -1; }
.gs-admin #content-limits-form > p > label { margin: 0; }
.gs-admin #content-limits-form label > br { display: none; }
.gs-admin :is(.organizations, #support-requests) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: start; }
.gs-admin .organizations > :not(.organization) { grid-column: 1 / -1; }
.gs-admin .organization { min-width: 0; padding: 20px; }
.gs-admin .organization .detail { gap: 8px 16px; }
.gs-admin :is(.stats, .ops-security-grid) { gap: var(--gs-layout-gap); }
.gs-admin .stats article { padding: 16px 20px; }
.gs-admin #support-form { max-width: none; }
.gs-admin #report-result { min-width: 0; }
.application-shell .task-layout { max-width: none; padding: 0 var(--gs-page-gutter) 32px; }
.gs-guide-picker { max-width: none; }
.application-shell .view { max-width: none; padding: 20px 0 calc(32px + env(safe-area-inset-bottom)); }
.application-shell :is(.learning-list,.module-grid) { gap: var(--gs-layout-gap); }
.application-shell :is(.profile-form, .session-name-form) { min-width: 0; }
.application-shell :is(.profile-form, .session-name-form) input { width: 100%; max-width: 42ch; }
.application-shell .auth-method-row { flex-wrap: wrap; justify-content: flex-start; }
.application-shell .auth-method-row > div { flex: 1 1 14rem; min-width: 0; }
.application-shell .auth-method-row > button { flex: 0 0 auto; max-width: 100%; white-space: nowrap; }
.application-shell .settings-card > .primary-button { width: auto; max-width: 100%; justify-self: start; }
.application-shell .settings-information-column .settings-item { display: grid; grid-template-columns: minmax(5em, auto) minmax(0, 1fr); gap: 12px; }
.application-shell .settings-information-column dd { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 840px) {
  [data-gs-sidebar] { transition: width var(--gs-sidebar-motion); }
  .application-shell { transition: grid-template-columns var(--gs-sidebar-motion); }
  .gs-admin.gs-signed-in main { transition: margin-left var(--gs-sidebar-motion); }
  .gs-sidebar-collapsed [data-gs-sidebar] { width: 96px; padding-inline: 12px; }
  .gs-sidebar-collapsed .application-shell { grid-template-columns: 96px minmax(0, 1fr); }
  .gs-admin.gs-signed-in.gs-sidebar-collapsed main { margin-left: 96px; }
  .gs-sidebar-collapsed [data-gs-sidebar] > .gs-sidebar-current,
  .gs-sidebar-collapsed .sidebar-release-identity { display: none; }
  .gs-sidebar-collapsed [data-gs-sidebar] > .brand { opacity: 0; visibility: hidden; pointer-events: none; }
  .gs-sidebar-collapsed [data-gs-sidebar] :is(.rail-item, .gs-work-nav > button, .gs-help-entry, .gs-account-trigger) { width: 100%; min-height: 56px; justify-content: center; padding: 12px; gap: 0; }
  .gs-sidebar-collapsed [data-gs-sidebar] :is(.rail-item > strong, .gs-nav-label, .account-entry-copy) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .gs-sidebar-collapsed [data-gs-sidebar] > [data-gs-close-sidebar] { right: 24px; }
}
@media (max-width: 599px) {
  .gs-admin.gs-signed-in .panel { padding: 16px; }
  .gs-admin .scope-bar label { flex-basis: 100%; }
  .gs-admin .organization .actions > button { flex: 1 1 12rem; }
}
/* 同じnavigationを展開/縮小し、操作対象と現在地を左側に残す。 */
[data-gs-sidebar] { gap: 12px; padding: 76px 12px 16px; }
[data-gs-sidebar] > .brand {
  position: absolute; top: 16px; left: 20px; right: 68px; min-height: 48px; padding: 0;
  display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden;
  transition: opacity 140ms var(--gs-easing), visibility 140ms;
}
.gs-admin .gs-admin-sidebar > .brand { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; font-size: 1.125rem; line-height: 1.2; }
.gs-admin .gs-admin-sidebar > .brand span { margin: 2px 0 0; }
[data-gs-sidebar] :is(.gs-work-nav > button, .rail-item, .gs-help-entry, .gs-account-trigger) {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 16px;
  border: 0; border-radius: 28px; background: transparent; color: var(--gs-secondary);
  font-size: .9rem; font-weight: 600; line-height: 1.5; text-align: left; text-decoration: none;
}
[data-gs-sidebar] :is(.gs-work-nav > button, .rail-item, .gs-help-entry, .gs-account-trigger):hover { background: var(--gs-surface-high); color: var(--gs-on-surface); }
[data-gs-sidebar] :is(.gs-work-nav > button, .rail-item, .gs-help-entry, .gs-account-trigger)[aria-current=page],
[data-gs-sidebar] .gs-account-trigger.active { background: var(--gs-primary-container); color: var(--gs-on-primary-container); }
[data-gs-sidebar] .rail-item > strong { font-weight: 600; }
[data-gs-sidebar] .rail-item > .nav-icon { flex: 0 0 24px; width: 24px; height: 24px; padding: 0; background-color: transparent; border-radius: 0; }
.gs-nav-icon { display: block; flex: 0 0 24px; width: 24px; height: 24px; }
.gs-nav-label { min-width: 0; overflow-wrap: anywhere; }
[data-gs-close-sidebar], .gs-admin [data-gs-open-sidebar] {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  width: 48px; min-width: 48px; height: 48px; padding: 12px; border: 0; border-radius: 50%;
  background: transparent; color: var(--gs-on-surface); box-shadow: none;
}
[data-gs-close-sidebar]:hover, .gs-admin [data-gs-open-sidebar]:hover { background: var(--gs-surface-high); }
[data-gs-sidebar] > [data-gs-close-sidebar] {
  position: absolute; top: 16px; right: 12px; color: var(--gs-secondary); border-radius: 16px;
  transition: right var(--gs-sidebar-motion), background var(--gs-motion);
}
[data-gs-close-sidebar] .gs-nav-label, [data-gs-open-sidebar] .gs-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gs-sidebar-dialog [data-gs-close-sidebar] { display: inline-flex; }
[data-gs-sidebar] :is(.account-nav, .gs-sidebar-account) { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
[data-gs-sidebar] .account-entry .sidebar-avatar { width: 32px; height: 32px; flex-basis: 32px; box-shadow: none; border: 0; }
[data-gs-sidebar] .account-entry-copy { flex: 1; }
.gs-admin .gs-account-panel, .gs-account-panel {
  position: fixed; inset: auto; margin: 0; width: 240px; max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px); overflow: auto; padding: 8px; border: 1px solid var(--gs-outline-variant);
  border-radius: 20px; background: var(--gs-surface-container); color: var(--gs-on-surface); box-shadow: 0 8px 32px #18243a26;
}
.gs-account-panel:popover-open { display: grid; gap: 4px; }
.gs-admin .gs-account-panel > :is(a, button), .gs-account-panel > :is(a, button) {
  display: flex; align-items: center; width: 100%; min-height: 48px; padding: 12px 16px;
  border: 0; border-radius: 12px; background: transparent; color: var(--gs-on-surface); text-decoration: none;
  font: 500 .9rem/1.5 var(--gs-font); text-align: left; cursor: pointer;
}
.gs-account-panel > :is(a, button):hover, .gs-account-panel > [aria-current=page] { background: var(--gs-surface-high); }
.gs-nav-tooltip {
  position: fixed; inset: auto; margin: 0; max-width: min(28rem, calc(100vw - 16px)); padding: 8px 12px;
  border: 0; border-radius: 8px; background: var(--gs-on-surface); color: var(--gs-surface);
  font: 500 .875rem/1.5 var(--gs-font); overflow-wrap: anywhere; box-shadow: 0 2px 8px #18243a26;
}
/* native dialogのfocus復帰を保ち、表示層の解除だけを閉じる動きの後まで遅らせる。 */
dialog.gs-sidebar-dialog {
  animation: none; transform: translateX(-100%); opacity: 0;
  transition: transform var(--gs-sidebar-motion), opacity var(--gs-motion), display 280ms allow-discrete, overlay 280ms allow-discrete;
}
dialog.gs-sidebar-dialog[open] { transform: translateX(0); opacity: 1; }
dialog.gs-sidebar-dialog::backdrop {
  background: #152b5200;
  transition: background var(--gs-motion), display 280ms allow-discrete, overlay 280ms allow-discrete;
}
dialog.gs-sidebar-dialog[open]::backdrop { background: #152b5266; }
@starting-style {
  dialog.gs-sidebar-dialog[open] { transform: translateX(-100%); opacity: 0; }
  dialog.gs-sidebar-dialog[open]::backdrop { background: #152b5200; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Expressiveの共通表現。色は用途、形はまとまり、動きは操作の変化を伝える。 */
button, .rail-item { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:is(button, .rail-item):not(:disabled) { transition: background-color 180ms var(--gs-easing), color 180ms var(--gs-easing), border-radius 280ms var(--gs-spring), transform 280ms var(--gs-spring); }
button:active:not(:disabled) { transform: scale(.97); border-radius: 14px; }
:is(button.primary, .primary-button, .btn-primary) { min-height: 48px; font-weight: 750; }
:is(.page-heading, .gs-page-intro) h1 { font-weight: 800; text-wrap: balance; }
:is(.page-heading, .gs-page-intro) p { max-width: 68ch; }
.gs-admin .gs-page-intro { display: flex; align-items: center; gap: 20px; padding: 24px; border-radius: 28px 28px 12px 28px; background: var(--gs-primary-container); color: var(--gs-on-primary-container); }
.gs-admin .gs-page-intro p { margin: 0; color: inherit; }
.gs-page-symbol { display: grid; place-items: center; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 24px 16px 24px 16px; background: #ffffffa6; }
.gs-page-symbol .gs-symbol { width: 36px; height: 36px; }
.gs-page-intro[data-gs-section=people], .gs-page-intro[data-gs-section=content] { background: var(--gs-green-container); color: var(--gs-green); }
.gs-page-intro[data-gs-section=reports], .gs-page-intro[data-gs-section=notifications], .gs-page-intro[data-gs-section=notices] { background: var(--gs-purple-container); color: var(--gs-purple); }
.gs-admin .stats article:nth-child(2) { background: var(--gs-green-container); color: var(--gs-green); }
.gs-admin .stats article:nth-child(3) { background: var(--gs-warm-container); color: var(--gs-warm); }
.gs-admin .organization { border-top: 4px solid var(--gs-green-container); }
.gs-admin :is(.panel, .organization, .ops-security-card) > :first-child { margin-top: 0; }
.gs-admin :is(.panel, .organization, .ops-security-card) > :last-child { margin-bottom: 0; }
.gs-admin :is(.panel, .organization) p { max-width: 76ch; }
.gs-admin .gs-list-state { border: 1px dashed var(--gs-outline-variant); background: var(--gs-surface); border-radius: 16px; }
.gs-admin .badge { font-weight: 650; }
.gs-admin :is(#contract-form, #seat-schedule-form, #invitation-form, #capability-form) { max-width: 72rem; }
.gs-admin .gs-form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 20px 24px; }
.gs-admin :is(.gs-field-group, #content-nested fieldset) { min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--gs-outline-variant); border-radius: 20px; background: var(--gs-surface); }
.gs-admin .gs-field-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 16px; grid-column: 1 / -1; }
.gs-admin .gs-field-group legend { padding-inline: 8px; font-weight: 750; color: var(--gs-on-primary-container); }
.gs-admin .gs-field-group > :is(label,p) { margin: 0; min-width: 0; }
.gs-admin .gs-field-group > label { align-self: end; }
.gs-admin .gs-field-group > p:not(:has(label)), .gs-admin .gs-field-group > label:has(textarea) { grid-column: 1 / -1; }
.gs-admin .gs-field-group p > label { margin: 0; }
.gs-admin .gs-field-group label > br { display: none; }
.gs-admin #lifecycle-notices > details { background: #fff; }
.gs-admin :is(#content-fields, #content-nested) label:has(textarea) { grid-column: 1 / -1; }
.gs-admin :is(#content-fields, #content-nested) textarea { min-height: 9rem; max-width: 80ch; }
input:not([type=checkbox]):not([type=radio]), select, textarea { background-color: #fff; border-radius: 16px; line-height: 1.5; transition: border-color 160ms, background-color 160ms; }
input:not([type=checkbox]):not([type=radio]):hover, textarea:hover, select:hover { border-color: var(--gs-primary); }
input:disabled, select:disabled, textarea:disabled { background-color: var(--gs-surface-high); color: var(--gs-secondary); }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--gs-primary); }
label:has(> input:is([type=checkbox],[type=radio])) { min-height: 48px; cursor: pointer; }
select:not([multiple]):not([size]) { appearance: none; padding-right: 44px; background-image: var(--gs-symbol-expand-more); background-repeat: no-repeat; background-position: right 12px center; background-size: 24px; cursor: pointer; }
/* タッチ端末はOSの選択UIを使う。PC対応ブラウザーは同じselectをExpressiveの面にする。 */
@supports (appearance: base-select) {
  @media (pointer: fine) and (min-width: 600px) {
    select:not([multiple]):not([size]), select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
    select:not([multiple]):not([size]) { background-image: none; padding: 12px 16px; align-items: center; gap: 12px; }
    select::picker-icon { color: var(--gs-primary); transition: rotate 220ms var(--gs-easing); }
    select:open::picker-icon { rotate: 180deg; }
    select::picker(select) { margin-block: 6px; padding: 8px; border: 1px solid var(--gs-outline-variant); border-radius: 20px; background: var(--gs-surface-container); color: var(--gs-on-surface); box-shadow: 0 8px 24px #18243a26; max-height: min(60dvh, 400px); }
    select option { min-height: 48px; padding: 12px; border-radius: 12px; white-space: normal; overflow-wrap: anywhere; }
    select option:checked { background: var(--gs-primary-container); color: var(--gs-on-primary-container); font-weight: 700; }
    select option:hover, select option:focus { background: var(--gs-surface-high); }
    select option::checkmark { color: var(--gs-primary); }
  }
}
.gs-report-table { background: #fff; }
.gs-report-table th { background: var(--gs-surface-container); font-weight: 700; }
.gs-report-table tr:hover td { background: var(--gs-surface); }
.gs-cell-label { display: none; }
.gs-admin .gs-adaptive-table { min-width: 0; width: 100%; }
.gs-adaptive-table td { overflow-wrap: anywhere; }
/* 既存Leptosの装飾領域も、管理と同じライセンス付きアイコンに揃える。 */
.visual-home, .nav-home { --gs-icon: var(--gs-symbol-home); }
.visual-learn, .nav-learn { --gs-icon: var(--gs-symbol-menu-book); }
.visual-roleplay, .nav-roleplay { --gs-icon: var(--gs-symbol-forum); }
.visual-results, .nav-results { --gs-icon: var(--gs-symbol-insights); }
.visual-settings, .nav-settings { --gs-icon: var(--gs-symbol-settings); }
.visual-staff, .staff-avatar { --gs-icon: var(--gs-symbol-support-agent); }
.visual-station, .visual-intro-refueling { --gs-icon: var(--gs-symbol-local-gas-station); }
.visual-intro-service, .visual-intro-customer { --gs-icon: var(--gs-symbol-handshake); }
.visual-ss-equipment { --gs-icon: var(--gs-symbol-build); }
.visual-ss-safety, .visual-ss-emergency { --gs-icon: var(--gs-symbol-health-and-safety); }
.visual-ss-law { --gs-icon: var(--gs-symbol-gavel); }
.visual-product, .visual-tire { --gs-icon: var(--gs-symbol-tire-repair); }
.visual-oil { --gs-icon: var(--gs-symbol-oil-barrel); }
.visual-inspection { --gs-icon: var(--gs-symbol-fact-check); }
.visual-coating { --gs-icon: var(--gs-symbol-water-drop); }
.visual-proposal, .visual-proposal-recommendation { --gs-icon: var(--gs-symbol-recommend); }
.visual-proposal-observation { --gs-icon: var(--gs-symbol-visibility); }
.visual-proposal-approach, .visual-proposal-explanation { --gs-icon: var(--gs-symbol-chat); }
.visual-proposal-hearing { --gs-icon: var(--gs-symbol-hearing); }
.visual-proposal-closing { --gs-icon: var(--gs-symbol-task-alt); }
.visual-proposal-refusal { --gs-icon: var(--gs-symbol-person); }
:is(.category-media, .module-photo, .product-thumb, .nav-icon)::before { inset: 20%; background: currentColor; mask: var(--gs-icon, var(--gs-symbol-school)) center / contain no-repeat; }
.nav-icon::before { inset: 0; }
.rail-item.active > .nav-icon, .bottom-nav .active > .nav-icon { color: var(--gs-on-primary-container); background-color: transparent; }
.category-media::after { display: none; }
:is(.category-media, .module-photo, .product-thumb) { background: var(--gs-green-container); color: var(--gs-green); border: 0; box-shadow: none; border-radius: 28px 16px 28px 16px; }
:is(.visual-station, .visual-ss-equipment, .visual-ss-safety, .visual-ss-law, .visual-ss-emergency) { background-color: var(--gs-primary-container); color: var(--gs-on-primary-container); }
:is(.visual-product, .visual-tire, .visual-oil, .visual-inspection, .visual-coating) { background-color: var(--gs-warm-container); color: var(--gs-warm); }
:is(.visual-proposal, .visual-roleplay, .visual-results) { background-color: var(--gs-purple-container); color: var(--gs-purple); }
.module-photo { min-height: 104px; height: 104px; border-radius: 20px 20px 8px 8px; }
.module-photo::before { inset: 24px; }
.brand-mark { background: var(--gs-primary); mask: var(--gs-symbol-school) center / contain no-repeat; }
.chat-avatar { background: var(--gs-green-container); color: var(--gs-green); background-image: none; border-radius: 16px; position: relative; }
.customer-avatar { --gs-icon: var(--gs-symbol-person); background: var(--gs-purple-container); color: var(--gs-purple); }
.chat-avatar::before { content: ''; position: absolute; inset: 7px; background: currentColor; mask: var(--gs-icon, var(--gs-symbol-person)) center / contain no-repeat; }
.application-shell .learning-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem),1fr)); align-items: stretch; }
.application-shell :is(.page-heading,.roleplay-header) { padding: 24px; border-radius: 28px 28px 12px 28px; background: var(--gs-primary-container); }
.application-shell :is(.page-heading,.roleplay-header) h1 { font-size: clamp(1.5rem,2.4vw,2.3rem); line-height: 1.45; }
.application-shell .page-heading p { margin-block: 8px 0; }
#view-learn > .page-heading { background: var(--gs-green-container); }
#view-roleplay > .roleplay-header, #view-results > .page-heading { background: var(--gs-purple-container); }
.application-shell :is(.coach-panel) { border-radius: 24px; box-shadow: none; }
.application-shell .category-detail-hero { border-radius: 28px; background: var(--gs-surface-container); box-shadow: none; }
.application-shell .supporting-pane > section { border-radius: 24px; box-shadow: none; }
@media (min-width: 1100px) {
  .application-shell .learning-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.application-shell .module-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,18rem),1fr)); }
.module-body { min-width: 0; }
.module-card .module-title-row { flex-wrap: wrap; }
.application-shell :is(.study-card, .lesson-study-header) { width: 100%; min-width: 0; max-width: none; margin-inline: 0; }
.application-shell .study-card { padding: clamp(20px,3vw,36px); }
.study-card .question-choice-list { gap: 12px; }
.application-shell .choice-button { min-height: 56px; padding: 16px 20px; line-height: 1.65; text-align: left; }
.answer-feedback { position: relative; padding: 24px; border-radius: 24px 24px 8px 24px; }
.answer-feedback.correct { background: var(--gs-green-container); color: #114d39; border-color: var(--gs-green); }
.answer-feedback.correct > strong { display: flex; gap: 10px; align-items: center; }
.answer-feedback.correct > strong::before { content: ''; width: 28px; height: 28px; flex: none; background: currentColor; mask: var(--gs-symbol-verified) center / contain no-repeat; }
.login-screen, .launch-screen { background: var(--gs-surface); }
.login-scene, .launch-scene { background: radial-gradient(ellipse at 14% 25%, var(--gs-green-container), transparent 50%), radial-gradient(ellipse at 86% 80%, var(--gs-purple-container), transparent 55%); }
.login-panel { box-shadow: 0 16px 48px #18243a12; border: 1px solid var(--gs-outline-variant); }
@media (prefers-reduced-motion: no-preference) {
  .answer-feedback.correct { animation: gs-achieve 420ms var(--gs-spring) both; }
  .answer-feedback.correct > strong::before { animation: gs-badge 550ms var(--gs-spring) both; }
  .gs-admin .gs-page-intro, .view.active > .page-heading { animation: gs-enter 260ms var(--gs-easing) both; }
  @media (hover: hover) {
    .module-card:has(button:hover) { border-color: var(--gs-primary); background-color: var(--gs-surface-container); }
  }
}
@keyframes gs-welcome { from { opacity: 0; transform: translateY(16px) rotate(-16deg) scale(.9); } to { opacity: 1; transform: rotate(-8deg); } }
@keyframes gs-achieve { from { opacity: .5; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes gs-badge { from { transform: rotate(-18deg) scale(.6); } to { transform: none; } }
@media (max-width: 839px) {
  .gs-admin .gs-page-intro { padding: 20px; gap: 16px; }
  .gs-page-symbol { width: 52px; height: 52px; flex-basis: 52px; }
}
@media (max-width: 599px) {
  :root { --gs-page-gutter: 16px; }
  .gs-admin .gs-page-intro { align-items: flex-start; border-radius: 24px 24px 8px 24px; padding: 16px; gap: 12px; }
  .gs-admin .gs-page-intro h1 { font-size: 1.45rem; }
  .gs-admin .gs-page-intro p { font-size: .875rem; line-height: 1.7; }
  .gs-page-symbol { width: 44px; height: 44px; flex-basis: 44px; border-radius: 16px; }
  .gs-page-symbol .gs-symbol { width: 28px; height: 28px; }
  .gs-admin :is(.gs-field-group, #content-nested fieldset) { padding: 16px; }
  .gs-admin .stats { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .gs-admin .stats article { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-radius: 16px; }
  .gs-admin .stats span { font-size: .875rem; }
  .gs-admin .stats strong { font-size: 1.65rem; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }
  .gs-admin .actions { gap: 8px; }
  .gs-admin .actions > button { flex: 1 1 10rem; }
  .gs-admin dialog form > button.primary { width: 100%; }
  .gs-report-table { border: 0; border-radius: 0; background: transparent; }
  .gs-adaptive-table, .gs-adaptive-table tbody { display: block; }
  #report-result .monthly-report-scroll .gs-adaptive-table { min-width: 0; }
  #report-result .gs-adaptive-table :is(th,td) { white-space: normal; }
  .gs-adaptive-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .gs-adaptive-table tbody tr { display: grid; margin-block: 12px; padding: 12px 16px; border: 1px solid var(--gs-outline-variant); border-radius: 20px; background: #fff; }
  .gs-report-table .gs-adaptive-table td { display: grid; grid-template-columns: minmax(5em,.8fr) minmax(0,1.2fr); gap: 16px; min-width: 0; padding: 10px 0; align-items: start; }
  .gs-adaptive-table td:last-child { border: 0; }
  .gs-cell-label { display: block; color: var(--gs-secondary); font-size: .85rem; }
  .application-shell .study-card { padding: 20px 16px; }
  .application-shell :is(.page-heading,.roleplay-header) { padding: 20px 16px; border-radius: 24px 24px 8px 24px; }
  .application-shell .choice-button { padding: 14px 16px; }
  .answer-feedback { padding: 20px 16px; }
  .gs-admin details { padding: 12px 16px; }
}
@media (forced-colors: active) {
  .gs-symbol, .nav-icon::before, .brand-mark, .category-media::before, .module-photo::before { background-color: CanvasText; }
}

/* 操作に必要な大きさは保ち、導入バナーと重複する余白を省く。 */
.gs-page-title { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
.gs-page-heading { margin: 0; padding: 0; }
.gs-introduction { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; margin-block: 0 12px; border-radius: 12px; }
.gs-introduction > strong { flex: 1 1 16rem; font-size: .9rem; }
.gs-introduction > button { margin: 0; }
.gs-guide-picker { padding: 16px; }
.gs-guide-picker h1 { font-size: 1.25rem; line-height: 1.4; }
.application-shell .view { padding-block: 12px calc(16px + env(safe-area-inset-bottom)); }
.application-shell .task-layout { padding-bottom: 16px; }
.application-shell :is(.study-card,.lesson-study-header,.category-detail-hero,.settings-card,.result-card,.task-pane-card,.coach-panel,.answer-feedback,.contract-card) { padding: 16px; border-radius: 16px; }
.application-shell :is(.settings-primary-column,.settings-information-column,.lesson-content) { gap: 12px; }
.application-shell :is(.gs-introduction,.proposal-choice-bubble,.proposal-free-input-guide) { padding: 12px; }
.application-shell :is(.lesson-study-header,.category-detail-hero,.settings-card) :is(h1,h2) { font-size: 1.25rem; line-height: 1.4; margin-block: 0 8px; }
.application-shell .detail-hero-layout { grid-template-columns: 48px minmax(0,1fr); gap: 12px; }
.application-shell .detail-hero-layout > .category-media { width: 48px; height: 48px; }
.application-shell .lesson-study-header { padding: 12px 16px; }
.application-shell .lesson-study-header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; }
.application-shell .lesson-study-header .back-inline { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
.application-shell #lesson-title { grid-column: 1; grid-row: 1; margin: 0; }
.application-shell #lesson-breadcrumb { grid-column: 1; grid-row: 2; }
.application-shell .lesson-study-header > :is(#lesson-summary,#lesson-service-note,.lesson-progress,.lesson-save-status) { grid-column: 1 / -1; }
.application-shell .lesson-study-header #lesson-summary { margin-top: 0; }
.application-shell .lesson-study-header :is(.lesson-progress,.lesson-save-status) { margin-top: 8px; }
.application-shell .service-type-notice { padding: 8px 12px; margin-top: 8px; }
.application-shell .service-type-notice summary { min-height: 36px; align-content: center; }
.application-shell .lesson-overview { display: grid; gap: 12px; margin-top: 10px; min-width: 0; }
.application-shell .lesson-overview > * { min-width: 0; }
.application-shell .lesson-overview :is(.scenario-slide,.scenario-carousel) { margin: 0; }
.application-shell .lesson-overview .scenario-slide img { height: 180px; aspect-ratio: auto; object-fit: contain; }
.application-shell .lesson-overview p { margin-block: 8px 0; line-height: 1.65; }
.application-shell .lesson-block-list { grid-template-columns: repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap: 8px; margin-top: 12px; align-items: start; }
.application-shell .lesson-block { padding: 12px; border-radius: 12px; }
.application-shell .lesson-block h3 { margin-bottom: 6px; }
.application-shell .lesson-block :is(p,li) { line-height: 1.6; }
.application-shell .lesson-checklist { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-block: 8px 0; padding-left: 20px; }
.application-shell .study-actions { margin-top: 12px; gap: 8px; }
.application-shell :is(.choice,.choice-button,.proposal-chat-choice) { min-height: 44px; padding: 10px 12px; line-height: 1.6; }
.application-shell :is(.proposal-choice-options,.question-choice-list,.chat-log) { gap: 8px; }
.application-shell :is(.coach-panel,.answer-feedback) { margin-block: 12px; }
.application-shell .proposal-next-question { margin-block: 12px 0; min-height: 44px; }
.application-shell .supporting-pane > section { padding: 12px; }
.application-shell .supporting-facts > div { padding-block: 8px; }
.gs-admin.gs-signed-in .panel, .gs-admin :is(.organization,.ops-security-card) { padding: 16px; margin-block: 12px; border-radius: 16px; }
.gs-admin :is(.gs-form-grid,.ops-security-form) { gap: 12px 16px; }
.gs-admin :is(.gs-field-group,#content-nested fieldset) { padding: 12px; gap: 12px; border-radius: 12px; }
.gs-admin :is(.stats,.ops-security-grid,.organizations) { gap: 12px; }
.gs-admin .stats article { padding: 12px 16px; }
.gs-admin .stats strong { font-size: 1.5rem; }
.gs-admin :is(input:not([type=checkbox]):not([type=radio]),select,button), .application-shell :is(.primary-button,.ghost-button) { min-height: 44px; }
.gs-admin #notification-rules > .gs-notification-rule { padding: 12px; gap: 12px; }
@media (min-width: 840px) {
  .application-shell .lesson-overview:has(> figure) { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: center; }
  .application-shell .topbar.contextual { height: 52px; padding-inline: var(--gs-page-gutter); }
}
@media (min-width: 1100px) {
  .application-shell .task-layout:has(.supporting-pane:not([hidden])) { grid-template-columns: minmax(0,1fr) minmax(220px,260px); gap: 16px; }
}
@media (max-width: 599px) {
  :root { --gs-page-gutter: 12px; }
  .application-shell :is(.study-card,.coach-panel,.answer-feedback) { padding: 12px; }
  .gs-admin.gs-signed-in .panel, .gs-admin :is(.organization,.ops-security-card) { padding: 12px; }
}
:where(.gs-entry) main { max-width: 640px; }
:where(.gs-entry) .panel { max-width: none; }
:where(.gs-entry) .entry-choice { display: block; padding: 16px 20px; border-radius: 16px; background: var(--gs-primary-container); color: var(--gs-on-primary-container); font-weight: 700; text-decoration: none; }
:where(.gs-entry) .entry-choice:hover { outline: 2px solid var(--gs-primary); }
:where(.gs-entry) p { overflow-wrap: anywhere; }