.class-tabs { display:flex; flex-wrap:wrap; gap:.25rem; border-bottom:1px solid var(--line); margin:1rem 0 1.5rem; }
.class-tabs a { display:flex; align-items:center; padding:.75rem .9rem; min-height:44px; border-bottom:3px solid transparent; text-decoration:none; color:var(--muted); }
.class-tabs a[aria-current="page"] { color:var(--brand); border-bottom-color:var(--brand); font-weight:700; }
.class-card { display:flex; flex-direction:column; gap:.8rem; }
.class-card-top,.class-card-footer,.class-assignment-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.class-card-footer { margin-top:auto; padding-top:1rem; border-top:1px solid var(--line); }
.class-card h2,.class-assignment-row h3 { overflow-wrap:anywhere; }
.class-card h2 a,.class-assignment-row h3 a { display:block; }
.class-group-heading { margin:1.5rem 0 .8rem; }
.class-search { display:flex; align-items:center; gap:.6rem; max-width:100%; }
.class-search input { flex:1 1 auto; min-width:0; max-width:22rem; }
.class-search button { flex:0 0 auto; white-space:nowrap; }
.class-overview-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(15rem,1fr); gap:1.3rem; align-items:start; }
.class-assignment-list { margin-top:1rem; }
.class-assignment-row { padding:1.2rem 0; border-bottom:1px solid var(--line); }
.class-assignment-row>div:first-child { min-width:0; flex:1 1 15rem; }
.class-assignment-row .heading-actions { flex:0 1 auto; }
button.class-pin[type="submit"] { display:inline-flex; align-items:center; justify-content:center; width:44px; min-width:44px; height:44px; padding:0; border:1px solid transparent; border-radius:10px; background:transparent; color:#737b89; box-shadow:none; cursor:pointer; }
button.class-pin[type="submit"]:hover { background:#f1f3f5; border-color:transparent; color:#535d6a; box-shadow:none; }
.class-pin svg { display:block; flex-shrink:0; transform:rotate(35deg); }
button.class-pin[type="submit"][aria-pressed="true"] { background:#eef0f3; color:#606a78; }
.class-pin[aria-pressed="true"] svg { transform:none; }
.class-pin[aria-pressed="true"] .pin-head { fill:currentColor; }
.submission-context { padding:1rem; margin:1rem 0; border:1px solid var(--line); border-radius:12px; overflow-wrap:anywhere; }
.submission-navigation { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; margin:1rem 0; }
.submission-navigation .heading-actions { flex-wrap:wrap; }
@media(max-width:850px) { .class-overview-grid { grid-template-columns:1fr; } }
@media(max-width:480px) { .class-search { width:100%; } .class-search input { width:100%; } .class-tabs a { padding:.7rem .6rem; } }
.submission-navigation [aria-current="page"] { border-color: var(--brand); color: var(--brand); font-weight: 700; }
.receipt-id { overflow-wrap: anywhere; }
.management-card > a:not(.button) { text-decoration: underline; text-underline-offset: .18em; }
.table-wrap td > a:not(.button) { text-decoration: underline; text-underline-offset: .18em; }
.table-wrap td > small.meta { display:block; margin-top:.25rem; }
.content-column { max-width: 880px; margin: 0 auto; }
.content-prose { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; margin: 1rem 0; }
.content-actions { margin-top: 1.2rem; }
.teacher-note { border-top: 1px dashed var(--line); margin-top: 1.5rem; padding-top: 1rem; }
.revision-entry { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.segmented-control a[aria-current="page"] { border-color:var(--brand); font-weight:700; }
.content-column details > summary { cursor: pointer; padding: .5rem 0; }
.content-column .stacked-form { margin: 1.5rem 0; }

.content-column > .heading-actions { margin-bottom: 1rem; }

.local-feedback:not(.visually-hidden) { position:fixed; right:1rem; bottom:1rem; z-index:50; max-width:min(30rem,calc(100vw - 2rem)); padding:.8rem 1rem; border:1px solid var(--line); border-radius:10px; background:var(--cd-surface,#fff); box-shadow:0 4px 20px #13213718; }
.local-feedback.is-error { border-color:var(--danger); }
.local-feedback a { text-decoration:underline; text-underline-offset:.15em; }
[data-local-interaction] [aria-disabled="true"] { opacity:.6; cursor:wait; }

/* Keep whole local dates readable when comparing class timezones. */
.timezone-comparison-table th[scope="row"] {
  padding: .8rem;
  min-width: 5rem;
  text-align: left;
  vertical-align: top;
}
.timezone-comparison-table td { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .timezone-comparison-table, .timezone-comparison-table tbody,
  .timezone-comparison-table tr, .timezone-comparison-table th,
  .timezone-comparison-table td { display: block; }
  .timezone-comparison-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .timezone-comparison-table tr { padding: .75rem; border-bottom: 1px solid var(--line); }
  .timezone-comparison-table tr:last-child { border-bottom: 0; }
  .timezone-comparison-table th[scope="row"] { padding: 0 0 .35rem; }
  .timezone-comparison-table td {
    display: grid;
    grid-template-columns: 3.7rem minmax(0, 1fr);
    gap: .5rem;
    padding: .4rem 0;
    border: 0;
  }
  .timezone-comparison-table td::before {
    content: attr(data-label);
    color: var(--cd-muted);
    font-weight: 500;
  }
}

/* UIA-03/04/05/07: compact class context, with touch-friendly navigation. */
.class-card-grid { grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr)); align-items: stretch; }
.class-card { gap: .4rem; }
.class-card p { margin: .15rem 0; }
.class-card .class-card-course { color: var(--muted); font-size: .88rem; line-height: 1.6; overflow-wrap: anywhere; }
.class-card h2 { margin-bottom: .35rem; }
.class-card-footer { padding-top: .7rem; gap: .5rem; }
.class-card-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.class-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; margin-bottom: .5rem; }
.class-heading .class-course { color: var(--muted); font-size: .95rem; margin: .2rem 0; }
.class-heading .eyebrow, .class-heading .meta { margin: .25rem 0; }
.class-heading h1 { margin: .1rem 0; font-size: 1.65rem; }
.class-heading .heading-actions { align-self: start; }
.class-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; margin: .65rem 0 1rem; gap: .15rem; }
.class-tabs a { flex: 0 0 auto; padding: .6rem .8rem; white-space: nowrap; }
.class-overview-grid .compact-heading { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin-bottom: .5rem; }
.class-overview-grid .compact-heading h2 { margin: .25rem 0; }
.class-overview-grid .compact-heading a { min-height: 44px; display: inline-flex; align-items: center; }
.class-assignment-row { padding: .85rem 0; gap: .65rem; }
.class-assignment-row h3, .class-assignment-row p { margin-block: .4rem; }
.class-overview-grid .class-assignment-list { margin-top: .2rem; }
.settings-actions { margin-top: 1rem; gap: .75rem; flex-wrap: wrap; }
.settings-actions a { min-height: 44px; display: inline-flex; align-items: center; }
.submission-table .status-badge { white-space: nowrap; }
@media (max-width: 40rem) {
  .class-heading h1 { font-size: 1.45rem; }
  .class-heading .class-course { font-size: .85rem; }
  .class-heading .meta { font-size: .78rem; }
  .class-heading .heading-actions { width: auto; }
  .class-tabs a { padding-inline: .65rem; }
  .submission-table-wrap { border: 0; background: transparent; overflow: visible; }
  .submission-table, .submission-table tbody { display: block; width: 100%; }
  .submission-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .submission-table tr { display: block; padding: .85rem; margin-bottom: .75rem; border: 1px solid var(--line); border-radius: var(--cd-radius); background: #fff; }
  .submission-table td { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .35rem .7rem; padding: .4rem 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .submission-table td::before { content: attr(data-label); color: var(--muted); grid-column: 1; grid-row: 1 / span 4; }
  .submission-table td > * { min-width: 0; grid-column: 2; }
  .submission-table td .status-badge { justify-self: start; }
  .submission-table td.table-actions .button { justify-self: start; max-width: 100%; }
}