.morality-workspace { padding: 22px; }
.morality-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.morality-header h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 23px; }
.morality-header h2 .ui-icon { width: 25px; height: 25px; color: var(--accent); }
.morality-header p { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 8px 0 0; }
.morality-header button { min-height: 44px; }
.morality-overview { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 20px 0; color: var(--muted); font-size: 13px; }
.morality-legend { display: flex; align-items: center; gap: 8px; }
.morality-gradient { width: 130px; height: 8px; border-radius: 6px; background: linear-gradient(90deg, #cf3434, #d99b28, #9bb62b, #25a274); }
.morality-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 14px; }
.morality-card {
  --score-color: hsl(var(--score-hue) 65% 38%);
  min-width: 0; position: relative; text-align: center; padding: 16px 12px 10px;
  border: 1px solid color-mix(in srgb, var(--score-color) 28%, var(--line));
  border-top: 4px solid var(--score-color); border-radius: 12px;
  background: color-mix(in srgb, var(--score-color) 9%, var(--surface));
}
.morality-seat { display: block; text-align: left; color: var(--muted); font-size: 12px; }
.morality-card h3 { margin: 8px 0 6px; font-size: 18px; overflow-wrap: anywhere; }
.morality-score { display: flex; justify-content: center; align-items: baseline; gap: 4px; color: color-mix(in srgb, var(--score-color) 70%, var(--ink)); }
.morality-score strong { font-size: 44px; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.morality-score span { font-size: 13px; }
.morality-card-status { min-height: 20px; margin: 7px 0 12px; font-size: 12px; color: var(--muted); }
.morality-card.is-warning { border-color: #d94444; background: color-mix(in srgb, #d94444 12%, var(--surface)); }
.morality-card.is-warning .morality-card-status { color: color-mix(in srgb, #d94444 70%, var(--ink)); font-weight: 750; }
.morality-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.morality-card-actions button { min-width: 0; min-height: 44px; padding: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 7px; font-size: 13px; }
.morality-card-actions button span { font-size: 20px; margin-right: 4px; }
.morality-card-actions button:hover { border-color: var(--score-color); }
.morality-history-button { width: 100%; min-height: 36px; margin-top: 8px; background: transparent; border: 0; color: var(--muted); font-size: 12px; }
.morality-empty { grid-column: 1 / -1; text-align: center; padding: 60px 12px; }
.morality-empty p, .morality-notice { color: var(--muted); font-size: 13px; line-height: 1.7; }
.morality-dialog { box-sizing: border-box; width: min(660px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); margin: auto; border: 1px solid var(--line); border-radius: 14px; padding: 0; color: var(--ink); background: var(--surface); overflow-y: auto; }
.morality-dialog::backdrop { background: rgb(15 23 42 / 42%); }
.morality-dialog > header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.morality-dialog h2 { margin: 0; font-size: 19px; overflow-wrap: anywhere; }
.morality-dialog button { min-height: 44px; }
.morality-dialog-content { padding: 0 20px 20px; }
.morality-dialog-content > p, #moralityForm > p { color: var(--muted); line-height: 1.7; font-size: 13px; }
.morality-form-grid { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px; align-items: start; }
.morality-amount { display: grid; gap: 8px; font-size: 14px; }
.morality-amount select { appearance: auto; height: 205px; background: var(--surface); padding: 4px; border: 1px solid var(--line); border-radius: 8px; font-size: 17px; }
.morality-amount option { padding: 8px 12px; }
.morality-amount small { color: var(--muted); font-size: 11px; }
.morality-reasons { display: grid; min-width: 0; margin: 0; padding: 0; gap: 7px; border: 0; }
.morality-reasons legend { margin-bottom: 10px; font-size: 14px; }
.morality-reasons label { display: flex; align-items: center; gap: 8px; min-height: 42px; font-size: 13px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 7px; padding: 8px; cursor: pointer; }
.morality-reasons label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.morality-reasons input[type=radio] { width: 17px; height: 17px; margin: 0; flex: 0 0 17px; accent-color: var(--accent); }
.morality-reasons > input { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; padding: 8px; }
#moralityForm footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.morality-form-error { color: var(--accent) !important; }
.morality-records { list-style: none; padding: 0; }
.morality-records li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.morality-records li > div { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.morality-records time { font-size: 12px; color: var(--muted); }
.morality-records p { overflow-wrap: anywhere; font-size: 14px; }
.morality-records .is-voided { opacity: .65; }
@media screen and (max-width: 760px) {
  #primaryNavigation { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .morality-workspace { padding: 12px; }
  .morality-header { gap: 10px; }
  .morality-header h2 { font-size: 20px; }
  .morality-header p { font-size: 12px; }
  .morality-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .morality-card { padding: 12px 8px 6px; }
  .morality-card h3 { font-size: 17px; }
  .morality-score strong { font-size: 38px; }
  .morality-card-actions { gap: 6px; }
  .morality-card-actions button { padding: 6px 2px; font-size: 12px; }
  .morality-card-actions button span { font-size: 17px; margin-right: 2px; }
  .morality-dialog > header { padding: 12px; }
  .morality-dialog-content { padding: 0 12px 14px; }
  .morality-form-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .morality-amount select { height: 135px; }
  .morality-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .morality-reasons > input, .morality-reasons > label:first-of-type { grid-column: 1 / -1; }
  .morality-overview { margin: 12px 0; }
}
.morality-dialog > header > button { width: auto; flex: 0 0 auto; min-width: 64px; }
.morality-header > button { width: auto; flex: 0 0 auto; } @media screen and (max-width: 760px) { .morality-header > button { width: 100%; } }
/* Compact classroom header and interactive display layout. */
.header-class-line { display:flex; align-items:center; gap:8px; min-width:0; color:var(--muted); font-size:12px; white-space:nowrap; }
.header-class-line #mobileClassSummary { overflow:hidden; text-overflow:ellipsis; }
.header-class-line #classSwitchButton { width:auto; min-height:28px; padding:3px 10px; flex:0 0 auto; font-size:12px; color:var(--accent); }
#classSwitchDialog { width:min(580px, calc(100vw - 24px)); max-height:90dvh; overflow:auto; padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); }
#classSwitchDialog::backdrop { background:rgb(15 23 42 / 45%); }
#classSwitchDialog h2 { margin:0 0 10px; }
#classSwitchDialog p { font-size:13px; color:var(--muted); }
#classSwitchDialog #classContextControls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#classSwitchDialog #classContextControls label { display:grid; gap:6px; }
#classSwitchDialog #classContextControls select { min-height:44px; width:100%; }
#classSwitchDialog footer { display:flex; gap:12px; margin-top:18px; }
#classSwitchError { color:var(--accent) !important; }
.morality-workspace { padding:12px; }
.morality-header { margin-bottom:10px; }
.morality-header h2 { font-size:20px; }
.morality-header > button { min-height:36px; padding:6px 14px; }
.morality-grid { gap:7px; }
.morality-card { padding:4px 5px 6px; border-radius:8px; border-top-width:3px; }
.morality-card-detail { display:block; width:100%; min-height:0; padding:0; background:transparent; border:0; box-shadow:none; color:var(--ink); cursor:pointer; }
.morality-card-detail:hover { background:transparent; transform:none; }
.morality-card-detail h3 { margin:2px 0; font-size:16px; line-height:1.25; }
.morality-card-detail .morality-seat { font-size:10px; line-height:12px; }
.morality-card-detail .morality-score strong { font-size:30px; line-height:1.1; }
.morality-card-detail .morality-card-status { display:block; font-size:10px; line-height:12px; min-height:0; margin:0; color:#bd2929; }
.morality-card-actions { margin-top:4px; gap:4px; }
.morality-card-actions button { min-height:30px; padding:2px; font-size:11px; }
@media screen and (min-width:1100px) {
  .morality-grid { grid-template-columns:repeat(10,minmax(0,1fr)); }
  .morality-card { min-height:clamp(100px, calc((100dvh - 230px) / 5), 155px); display:flex; flex-direction:column; justify-content:space-between; }
  body:has(#moralityWorkspace:not([hidden])) .page { padding-top:8px; padding-bottom:8px; }
  body:has(#moralityWorkspace:not([hidden])) .primary-nav-item { min-height:38px; padding-top:6px; padding-bottom:6px; }
  body:has(#moralityWorkspace:not([hidden])) .portal-workspace { min-height:0; }
}
@media screen and (min-width:761px) and (max-width:1099px) { .morality-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media screen and (max-width:760px) {
  .brand-hero .brand-copy { min-width:0; }
  .header-class-line { font-size:10px; gap:3px; }
  .header-class-line #classSwitchButton { min-height:30px; padding:3px 5px; }
  .morality-header { flex-wrap:nowrap; }
  .morality-header > button { width:auto; font-size:12px; }
  .morality-card-detail { min-height:80px; }
  .morality-card-actions button { min-height:40px; }
}
.morality-card-actions button { line-height:1; white-space:nowrap; }
.morality-card-actions button span { margin:0; font-size:22px; }
.morality-card-detail .morality-score { gap:2px; }
.morality-card-detail .morality-score span { font-size:10px; }
@media screen and (min-width:1100px) {
  .morality-card { height:clamp(106px, calc((100dvh - 205px) / 5 - 7px),155px); min-height:106px; }
  .morality-card-detail h3 { font-size:14px; }
  .morality-card-detail .morality-score strong { font-size:28px; }
  .morality-card-actions button { height:30px; }
}