:root {
  color-scheme: light;
  --background:       #f2e5bc;
  --background-deep:  #fbf1c7;
  --surface:          #ebdbb2;
  --surface-raised:   #d5c4a1;
  --surface-hover:    #d5c4a1;
  --feedback-surface: #f9f5df;
  --border:           #bdae93;
  --border-strong:    #a89984;
  --text:             #3c3836;
  --text-strong:      #282828;
  --text-muted:       #665c54;
  --accent:           #b57614;
  --accent-soft:      #d79921;
  --green:            #79740e;
  --red:              #9d0006;
  --radius:           3px;
  --rail-width:       42px;
  --top-height:       34px;
  --control-height:   22px;
  --font-interface:   Inter, "IBM Plex Sans", system-ui, sans-serif;
  --font-monospace:   "IBM Plex Mono", "Cascadia Mono", monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background:       #282828;
  --background-deep:  #1d2021;
  --surface:          #32302f;
  --surface-raised:   #3c3836;
  --surface-hover:    #504945;
  --feedback-surface: #292725;
  --border:           #504945;
  --border-strong:    #665c54;
  --text:             #ebdbb2;
  --text-strong:      #f2e5c4;
  --text-muted:       #a89984;
  --accent:           #d79921;
  --accent-soft:      #b57614;
  --green:            #98971a;
  --red:              #cc241d;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--background);
  color: var(--text);
  font: 11px/1.3 var(--font-interface);
}

body {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
}

.nav-rail {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  padding: 7px 5px;
  background: var(--background-deep);
  border-right: 1px solid var(--border);
  color: var(--text-muted);
  font: 9px/1 var(--font-monospace);
}

.brand-mark {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius);
  color: var(--accent);
  font: 700 15px/1 var(--font-monospace);
}

.rail-rule { width: 22px; border-top: 1px solid var(--border); }
.rail-spacer { flex: 1; }
.rail-status { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px #98971a20; }

.application-shell { min-width: 0; height: 100vh; }

.top-tabs {
  display: flex;
  align-items: center;
  height: var(--top-height);
  gap: 2px;
  padding: 4px 7px;
  background: var(--background-deep);
  border-bottom: 1px solid var(--border);
}

.top-tabs strong {
  margin-right: 13px;
  color: var(--text);
  font: 600 12px/1 var(--font-interface);
  letter-spacing: .01em;
}

.top-tabs button {
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
}

.top-tabs button:hover,
.top-tabs button.selected {
  background: var(--surface-raised);
  color: var(--text);
}

.top-tabs button.selected { box-shadow: inset 0 -1px var(--accent); }
.top-status { margin-left: auto; color: var(--text-muted); font: 9px/1 var(--font-monospace); }
.top-tabs .theme-toggle { min-width: 43px; margin-left: 5px; border-color: var(--border); background: var(--surface); color: var(--text); }

button,
input,
select,
textarea {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: 0;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

button,
input,
select { height: var(--control-height); }

button { padding: 0 6px; cursor: pointer; }
button:hover { border-color: var(--border-strong); background: var(--surface-hover); }
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 1px #d7992138; }
input[readonly] { color: var(--text-muted); background: var(--background-deep); }
textarea { resize: none; }

.application-tab { display: none; height: calc(100vh - var(--top-height)); }
.application-tab.active { display: block; }

#useTab { grid-template-columns: minmax(600px, 58%) minmax(360px, 42%); }
#useTab.active { display: grid; }
#useForm,
#feedbackPane { min-width: 0; }
#useForm { overflow: hidden; border-right: 1px solid var(--border); }

.use-toolbar {
  display: grid;
  grid-template-columns: 90px minmax(130px, 185px) 42px minmax(125px, 1fr) 48px 38px;
  align-items: center;
  height: 30px;
  gap: 3px;
  padding: 4px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.use-toolbar select,
.use-toolbar input { width: 100%; }

#generatedAssessmentForm { padding: 4px; }

#generatedAssessmentForm table,
#generatedAssessmentForm tbody { display: block; }

#generatedAssessmentForm tr {
  display: flex;
  width: 100%;
}

#generatedAssessmentForm .step-heading th { flex: 1; }
#generatedAssessmentForm tr:not(.step-heading) > .row-label { flex: 0 0 104px; }
#generatedAssessmentForm tr:not(.step-heading) > td { flex: 0 0 auto; }
#generatedAssessmentForm tr:not(.step-heading) > td:has(.entry-text) { flex: 1 1 180px; min-width: 90px; }
#generatedAssessmentForm tr:not(.step-heading) > td:has(.entry-combo) { flex: 0 1 190px; min-width: 100px; }
#generatedAssessmentForm tr:not(.step-heading) > td:has(.entry-select) { flex: 0 0 76px; }
#generatedAssessmentForm tr:not(.step-heading) > td:last-child { flex: 0 0 23px; }

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

tr { height: 23px; }
th,
td {
  height: 23px;
  max-height: 23px;
  overflow: hidden;
  padding: 1px 3px;
  border: 1px solid var(--border);
  white-space: nowrap;
  text-align: left;
}

th { color: var(--text-muted); font-weight: 500; }
.step-heading th { height: 25px; padding-left: 6px; background: var(--background-deep); color: var(--accent); font-weight: 600; }
.row-label { width: 104px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.entry-text,
.entry-select,
.entry-combo { width: 100%; }
.entry-combo { overflow: hidden; text-align: left; text-overflow: ellipsis; }
.compact-options {
  display: inline-flex;
  height: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background-deep);
  vertical-align: middle;
}

.compact-options label {
  position: relative;
  display: grid;
  min-width: 21px;
  height: 16px;
  padding: 0 4px;
  place-items: center;
  border-left: 1px solid var(--border);
  color: var(--text-muted);
  line-height: 16px;
  cursor: pointer;
  user-select: none;
}

.compact-options label:first-child { border-left: 0; }
.compact-options label:hover { background: var(--surface-hover); color: var(--text); }
.compact-options label:has(input:checked) { background: var(--accent); color: var(--background-deep); }
.compact-options label:has(input:focus-visible) { box-shadow: inset 0 0 0 1px var(--text-strong); }
.compact-options input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.remove-row { float: right; width: 19px; padding: 0; color: var(--red); }
.mark-input { float: right; width: 42px; text-align: right; }

#feedbackPane { display: grid; grid-template-rows: minmax(0, 1fr) 31px; background: var(--feedback-surface); }
#feedbackPreview {
  height: auto;
  margin: 0;
  overflow: auto;
  padding: 17px 21px 30px;
  white-space: pre-wrap;
  color: var(--text-strong);
  font: 12px/1.52 var(--font-interface);
  scrollbar-color: var(--border-strong) transparent;
}

#feedbackPane footer {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 31px;
  padding: 4px 6px;
  background: var(--background-deep);
  border-top: 1px solid var(--border);
}

mark { border-radius: 2px; background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--text-strong); }

.setup-layout {
  display: grid;
  grid-template-columns: 190px 205px minmax(470px, 1fr);
  height: 100%;
  gap: 4px;
  padding: 4px;
  background: var(--background);
}

.setup-panel {
  min-width: 0;
  overflow: hidden;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.setup-panel > b,
.editor-block > b { display: block; margin: 1px 0 5px; color: var(--accent); font-weight: 600; }
.setup-panel select,
.setup-panel input,
.setup-panel textarea { width: 100%; margin-bottom: 3px; }
.setup-list { height: calc(100% - 83px); }
#substepList { height: 124px; }
#entryTableWrap { height: 178px; overflow: auto; }
#entryTableWrap input,
#entryTableWrap select { margin: 0; }
#patternTemplateEditor { display: grid; grid-template-columns: 1fr 1fr; height: calc(100% - 239px); gap: 4px; margin-top: 4px; }
.editor-block { min-width: 0; overflow: hidden; padding: 4px; border: 1px solid var(--border); background: var(--background-deep); }
.editor-block textarea { width: 100%; height: 86px; font-family: var(--font-monospace); }

dialog {
  width: min(540px, calc(100vw - 40px));
  height: 430px;
  padding: 7px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--background-deep);
  box-shadow: 0 18px 50px #000a;
}

dialog::backdrop { background: #1d2021c9; }
#frameworkCategory,
#frameworkSearch { width: 100%; height: 25px; margin-bottom: 4px; }
#frameworkOptions { width: 100%; height: 334px; }
.dialog-buttons { display: flex; gap: 4px; margin-top: 4px; }

select[size] option { padding: 3px 5px; }
select[size] option:checked { background: var(--accent-soft); color: var(--text-strong); }

@media (max-width: 980px) {
  #useTab { grid-template-columns: 61% 39%; }
  .use-toolbar { grid-template-columns: 78px 130px 40px minmax(95px, 1fr) 44px 34px; }
  .row-label { width: 88px; }
}

@media (max-width: 700px) {
  body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 32px minmax(0, 1fr);
  }

  .nav-rail {
    flex-direction: row;
    width: 100%;
    height: 32px;
    padding: 3px 6px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .brand-mark { width: 24px; height: 24px; font-size: 13px; }
  .rail-rule { width: 1px; height: 19px; border-top: 0; border-left: 1px solid var(--border); }
  .rail-status { margin-left: auto; }
  .rail-spacer { display: none; }
  .application-shell { height: calc(100vh - 32px); }
  .top-tabs strong { margin-right: 4px; }
  .top-status { display: none; }
  .application-tab { height: calc(100vh - 66px); }

  #useTab.active {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #useForm {
    flex: 0 0 auto;
    overflow: visible;
    border-right: 0;
  }

  .use-toolbar {
    position: sticky;
    top: 0;
    z-index: 4;
    grid-template-columns: 74px minmax(0, 1fr) 42px 43px 34px;
    height: 52px;
    padding: 4px;
  }

  .use-toolbar #studentName { grid-column: 1 / 4; }
  .use-toolbar #totalMark { grid-column: 4; }
  .use-toolbar #gradeBand { grid-column: 5; }

  #generatedAssessmentForm { padding: 4px; }
  #generatedAssessmentForm tr:not(.step-heading) {
    flex-wrap: wrap;
    height: auto;
    min-height: 43px;
    padding-bottom: 2px;
    border: 1px solid var(--border);
    border-top: 0;
  }

  #generatedAssessmentForm tr:not(.step-heading) > .row-label {
    flex: 0 0 100%;
    height: 19px;
    min-height: 19px;
    padding: 2px 5px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface-raised);
  }

  #generatedAssessmentForm tr:not(.step-heading) > td {
    height: 21px;
    padding: 1px 2px;
    border: 0;
    border-left: 1px solid var(--border);
  }

  #generatedAssessmentForm tr:not(.step-heading) > td:nth-child(2) { border-left: 0; }
  #generatedAssessmentForm tr:not(.step-heading) > td:has(.entry-text) { flex: 1 1 160px; min-width: 110px; }
  #generatedAssessmentForm tr:not(.step-heading) > td:has(.entry-combo) { flex: 1 1 150px; min-width: 120px; }
  #generatedAssessmentForm tr:not(.step-heading) > td:has(.entry-select) { flex: 0 0 70px; }
  #generatedAssessmentForm tr:not(.step-heading) > td:last-child { flex: 0 0 23px; margin-left: auto; }
  .step-heading th { height: 25px; }
  .compact-options label { min-width: 25px; padding-inline: 5px; }

  #feedbackPane {
    flex: 0 0 auto;
    grid-template-rows: auto 33px;
    min-height: 72vh;
    border-top: 2px solid var(--border-strong);
  }

  #feedbackPreview {
    min-height: calc(72vh - 33px);
    overflow: visible;
    padding: 18px 16px 28px;
    font-size: 13px;
    line-height: 1.55;
  }

  #feedbackPane footer { position: sticky; bottom: 0; }

  #setupTab.active { overflow-y: auto; }
  .setup-layout {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100%;
  }

  .setup-panel { flex: 0 0 auto; overflow: visible; }
  .setup-list { height: 116px; }
  #substepList { height: 116px; }
  #entryTableWrap { height: 190px; overflow: auto; }
  #patternTemplateEditor { grid-template-columns: minmax(0, 1fr); height: auto; }
  .editor-block { overflow: visible; }
  .editor-block textarea { height: 92px; }
}