/* Shared actions and form controls. Component-specific variants live with
 * their component (navigation or tables), after these defaults in the layout. */
.workspace .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-block: 1.25rem; }
.workspace .actions a, .workspace .button, .workspace input[type="submit"], .workspace button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; max-width: 100%; min-height: max(2.75em, 44px); padding: .75rem 1.25rem; border: 1px solid var(--action); border-radius: var(--radius); color: var(--on-action); background: var(--action); font: inherit; font-size: .8125rem; font-weight: 700; letter-spacing: normal; line-height: 1.5; text-align: center; text-decoration: none; text-transform: none; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.workspace .actions a, .workspace .button-outline { color: var(--action); background: var(--surface); }
.workspace .actions a:hover, .workspace .button:hover, .workspace input[type="submit"]:hover, .workspace button:hover { border-color: var(--action); color: var(--action); background: var(--surface); }
.workspace .actions a:hover, .workspace .button-outline:hover { color: var(--on-action); background: var(--action); }
.workspace button:disabled, .workspace input:disabled { cursor: not-allowed; }
.workspace .button_to { display: inline; margin: 0; }

/* Shared menu links and buttons retain their surrounding light or dark text.
 * Components supply only their spacing, selected background and danger color. */
.workspace .menu-item { display: inline-flex; align-items: center; justify-content: flex-start; gap: .5rem; width: 100%; min-height: 2.75rem; padding: .5rem .625rem; border: 0; border-radius: .4375rem; color: inherit; background: transparent; font: inherit; font-weight: 400; letter-spacing: normal; line-height: 1.5; text-align: left; text-decoration: none; text-transform: none; }
.workspace .menu-item:hover, .workspace .menu-item[aria-current="page"] { color: inherit; background: color-mix(in srgb, currentColor 10%, transparent); }

/* Named tag colors keep badges legible on every school palette. */
.workspace .tag-badge[data-color] { display: inline-block; max-width: 100%; padding: .25rem .65rem; border: 1px solid currentColor; border-radius: 100px; color: var(--tag-ink, var(--ink)); background: var(--tag-background, var(--canvas)); font-size: .8125rem; line-height: 1.5; overflow-wrap: anywhere; }
.workspace .tag-badge[data-color="slate"] { --tag-background: #e2e8f0; --tag-ink: #334155; }
.workspace .tag-badge[data-color="blue"] { --tag-background: #dbeafe; --tag-ink: #1e40af; }
.workspace .tag-badge[data-color="teal"] { --tag-background: #ccfbf1; --tag-ink: #115e59; }
.workspace .tag-badge[data-color="green"] { --tag-background: #dcfce7; --tag-ink: #166534; }
.workspace .tag-badge[data-color="amber"] { --tag-background: #fef3c7; --tag-ink: #92400e; }
.workspace .tag-badge[data-color="orange"] { --tag-background: #ffedd5; --tag-ink: #9a3412; }
.workspace .tag-badge[data-color="rose"] { --tag-background: #ffe4e6; --tag-ink: #9f1239; }
.workspace .tag-badge[data-color="purple"] { --tag-background: #f3e8ff; --tag-ink: #6b21a8; }
@supports (color: light-dark(white, black)) {
  .workspace .tag-badge[data-color="slate"] { --tag-background: light-dark(#e2e8f0, #334155); --tag-ink: light-dark(#334155, #e2e8f0); }
  .workspace .tag-badge[data-color="blue"] { --tag-background: light-dark(#dbeafe, #1e3a8a); --tag-ink: light-dark(#1e40af, #dbeafe); }
  .workspace .tag-badge[data-color="teal"] { --tag-background: light-dark(#ccfbf1, #134e4a); --tag-ink: light-dark(#115e59, #ccfbf1); }
  .workspace .tag-badge[data-color="green"] { --tag-background: light-dark(#dcfce7, #14532d); --tag-ink: light-dark(#166534, #dcfce7); }
  .workspace .tag-badge[data-color="amber"] { --tag-background: light-dark(#fef3c7, #78350f); --tag-ink: light-dark(#92400e, #fef3c7); }
  .workspace .tag-badge[data-color="orange"] { --tag-background: light-dark(#ffedd5, #7c2d12); --tag-ink: light-dark(#9a3412, #ffedd5); }
  .workspace .tag-badge[data-color="rose"] { --tag-background: light-dark(#ffe4e6, #881337); --tag-ink: light-dark(#9f1239, #ffe4e6); }
  .workspace .tag-badge[data-color="purple"] { --tag-background: light-dark(#f3e8ff, #581c87); --tag-ink: light-dark(#6b21a8, #f3e8ff); }
}
.workspace .tag-color-options { display: flex; flex-wrap: wrap; column-gap: 1.5rem; }
.workspace .tag-color-options .choice { align-items: center; }
.workspace .tag-color-options .choice label { padding-top: 0; }
.workspace .tag-preview { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* Form layout, fields, choices and validation. Field exclusions deliberately
 * carry no specificity, so validation and component rules can override them. */
.workspace .form { max-width: 38rem; }
/* Center the title, form, errors and navigation as one readable column. */
.workspace main.form-page { max-width: 42.25rem; }
.workspace form + p { margin-top: 1rem; }
.workspace .field { margin-block: 1.25rem; }
.workspace label, .workspace legend { font-weight: 700; }
.workspace label { display: block; margin-bottom: .375rem; }
.workspace input:where(:not([type="checkbox"], [type="radio"], [type="submit"], [type="hidden"])), .workspace textarea, .workspace select { width: 100%; min-width: 0; min-height: max(2.75em, 44px); padding: .625rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); background: var(--surface); font: inherit; font-size: 1rem; }
/* A focused field's ring covers its border, with a soft glow outside. The
 * solid ring provides the contrast; the glow is decoration. */
.workspace :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="hidden"]), textarea, select):focus-visible { outline-offset: -1px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 25%, transparent); }
.workspace input::placeholder, .workspace textarea::placeholder { color: var(--muted); opacity: 1; }
.workspace textarea { min-height: 6rem; resize: vertical; }
.workspace fieldset { min-width: 0; margin-block: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); }
.workspace input[type="checkbox"], .workspace input[type="radio"] { width: 1.5rem; height: 1.5rem; margin: 0 .5rem .25rem 0; vertical-align: middle; accent-color: var(--action); }
/* A checkbox or radio button with its label beside it. Long labels wrap next
 * to the box rather than under it. */
.workspace .choice { display: flex; align-items: flex-start; gap: .5rem; }
.workspace fieldset .choice { margin-block: .5rem; }
.workspace .choice input { flex: none; margin: 0; }
.workspace .choice label { margin: 0; padding-top: .125rem; }
/* School settings' theme color choices: a grid of radio buttons, each label
 * starting with a decorative swatch of its color in the current theme. */
.workspace .theme-color-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: .5rem 1rem; }
.workspace .theme-color-options .choice label { display: inline-flex; align-items: center; gap: .5rem; padding-top: 0; font-weight: 400; }
.workspace .theme-color-swatch { flex: none; width: 1.5rem; height: 1.5rem; border: 1px solid var(--border); border-radius: 50%; background: var(--action); }
.workspace .hint { color: var(--muted); }
.workspace .error, .workspace [role="alert"] { color: var(--error); }
.workspace [aria-invalid="true"] { border: 2px solid var(--error); }
/* Keep an invalid field's red border visible inside its focus ring. */
.workspace :is(input, textarea, select)[aria-invalid="true"]:focus-visible { outline-offset: 0; }
.workspace .error-summary { margin-block: 1.5rem; padding: 1rem; border: 2px solid var(--error); border-radius: var(--radius); background: var(--surface); }
.workspace .error-summary h2 { margin-top: 0; }
/* Stacked error links each need a 24px-tall target (WCAG 2.5.8); one line of
 * text leaves them too short and too close together. */
.workspace .error-summary a { display: inline-flex; align-items: center; min-height: 24px; }

/* Uploaded-image previews in settings and the account menu. */
.workspace .school-logo-preview { display: block; max-width: 100%; width: 16rem; height: 10rem; object-fit: contain; object-position: left center; }
.workspace .school-favicon-preview { display: block; width: 4rem; height: 4rem; object-fit: contain; }
.workspace .profile-photo-preview { display: block; width: 6rem; height: 6rem; margin-block: .5rem; border-radius: 50%; object-fit: cover; }

@media (max-width: 35rem) {
  .workspace .actions > *, .workspace .actions .button_to button { max-width: 100%; }
}