/* Grades by Designs24hr — consolidated responsive stylesheet */
:root {
  font: 16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color: #171717;
  background: #fafafa;
  --dark: #000;
  --red: #d30000;
  --line: #e8e8eb;
  --shadow: 0 3px 14px #1616220c;
  --rail: 248px;
  --header: 64px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header) + 12px); }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; margin: 0; padding-top: var(--header); }
a { color: inherit; text-decoration: none; text-underline-offset: .25em; }
a:hover { color: var(--red); }
button,input,select,textarea { font: inherit; }
button,select,summary { cursor: pointer; }
button,input,select,textarea { max-width: 100%; border: 1px solid #bcbcc0; border-radius: 8px; padding: .55rem .7rem; background: #fff; color: inherit; }
button,input,select { min-height: 44px; }
button { font-size: 13px; font-weight: 700; line-height: 1.35; }
button:hover { color: var(--red); border-color: var(--red); }
button:disabled { opacity: .55; cursor: default; }
:focus-visible { outline: 3px solid #1770b8; outline-offset: 3px; }
[hidden], form label[hidden] { display: none !important; }
h1,h2,h3 { margin-top: 0; line-height: 1.2; }
h1 { font-size: clamp(27px,2.58vw,38px); font-weight: 800; letter-spacing: -.03em; margin-bottom: 0; }
h2 { font-size: 20px; font-weight: 750; letter-spacing: -.018em; margin-bottom: .9rem; }
h3 { font-size: 16px; font-weight: 700; margin: 1.5rem 0 .35rem; }
p { margin: .5rem 0 1rem; }
summary { font-size: 13px; font-weight: 700; line-height: 1.35; }
details[open] > summary { margin-bottom: .75rem; }

/* Header, desktop rail, and mobile navigation */
header,footer { color: #fff; background: var(--dark); }
header { position: fixed; z-index: 10; inset: 0 0 auto; height: var(--header); border-bottom: 1px solid #37383a; }
.head,.foot { min-height: var(--header); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.head { padding: 0 26px; }
.logo { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.025em; white-space: nowrap; }
.logo span { color: #ff4040; }
.header-note { color: #ddd; font-size: 13px; }
.skip { position: fixed; z-index: 20; top: 8px; left: 8px; padding: .6rem; background: #fff; color: #111; border-radius: 6px; font-weight: 700; }
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sidebar { position: fixed; z-index: 8; inset: var(--header) auto 0 0; display: flex; flex-direction: column; gap: 18px; width: var(--rail); padding: 14px 10px; overflow: auto; background: #fff; border-right: 1px solid var(--line); }
.rail-nav,.rail-work,.rail-group[open] { display: grid; align-content: start; gap: 4px; }
.rail-nav h2,.rail-group > summary { margin: 0; padding: 9px 10px; font-size: 11px; font-weight: 800; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; color: #111; }
.rail-group { border: 0; border-top: 1px solid var(--line); padding: 10px 0 0; margin-top: 8px; }
.rail-nav a { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 8px 10px; border-radius: 8px; font-size: 12px; font-weight: 550; line-height: 1.4; color: #263244; }
.rail-nav a:hover { background: #f1f1f3; color: #a80000; }
.rail-nav a[aria-current="page"] { background: #fff0f0; color: #b90000; font-weight: 750; }
.line-icon { width: 17px; height: 17px; flex: none; }
.rail-nav .line-icon { width: 15px; height: 15px; }
.rail-brand { margin-top: auto; padding: 13px; border: 1px solid #d6d6da; border-radius: 10px; font-size: 12px; color: #111; background: #fff; }
.rail-brand strong { display: block; }
.rail-brand p { margin: 3px 0 9px; font-size: 11px; }
.rail-brand a { font-size: 11px; font-weight: 750; color: var(--red); }
.mobile-nav { display: none; }

/* Main layout and content */
.frame { width: min(1100px,calc(100% - 40px)); margin-inline: auto; }
main.frame,.foot.frame { width: auto; margin-left: var(--rail); margin-right: 0; padding-inline: clamp(16px,3vw,36px); }
main.frame { flex: 1; min-width: 0; }
footer { margin-top: auto; }
.foot { padding-block: .6rem; flex-wrap: wrap; }
.foot nav { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.foot a { font-size: 13px; }
.hero { margin: .75rem 0; padding: clamp(1.05rem,1.5vw,1.35rem) clamp(1.2rem,3vw,2.25rem); border-radius: 14px; background-color: var(--dark); background-image: linear-gradient(135deg, var(--dark), #20222a); color: #fff; box-shadow: var(--shadow); }
.hero p { max-width: 74ch; margin: .45rem 0 0; color: #e0e1e3; font-size: 14px; line-height: 1.55; }
.panel { min-width: 0; padding: clamp(1rem,3vw,1.55rem); border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.chart,.guide { margin-top: 1rem; }
.guide { line-height: 1.65; }
.guide p { font-size: 14px; }
.guide a,.skip { font-weight: 700; }
.guide a:hover { color: #850000; }
.related { margin: 1.35rem 0; }
.tool-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,205px),1fr)); gap: .65rem; }
.tool-cards a { display: flex; align-items: flex-start; gap: 10px; padding: .85rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.tool-cards a:hover { border-color: var(--red); }
.tool-cards span { display: block; font-size: 13px; color: #50535a; }
.tool-cards .line-icon { margin-top: 3px; color: #a80000; }
.task-links { display: flex; flex-wrap: wrap; gap: .55rem; margin: .85rem 0; }
.task-links a { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border: 1px solid #e6e6e8; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; box-shadow: var(--shadow); }
.task-links a:hover { color: #b90000; background: #fff4f4; border-color: #f0caca; }
.task-links .line-icon { width: 15px; height: 15px; }

/* Calculator with a separate, readable result card */
.workspace { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); align-items: start; gap: 1.2rem; padding: clamp(1rem,2.3vw,1.75rem); border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.workspace h2 { margin: 0 0 .7rem; font-size: 17px; line-height: 1.3; }
.workspace form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem .7rem; }
.workspace form > label:first-child, .workspace form > details, .workspace form > #rows, .workspace form > .actions, .workspace form > .wide, .workspace form > .cutoffs { grid-column: 1/-1; }
.workspace form label { display: block; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.45; }
.workspace label input, .workspace label select { display: block; width: 100%; margin-top: .27rem; }
.workspace :is(button,select,input:not([type="checkbox"])) { min-width: 0; min-height: 40px; }
.workspace textarea { display: block; width: 100%; max-height: 40vh; min-height: 76px; margin-top: .27rem; font-size: 15px; font-weight: 650; line-height: 1.45; resize: vertical; }
.workspace input,.workspace select { font-size: 15px; font-weight: 650; line-height: 1.45; }
.workspace form > details { border-top: 1px solid var(--line); padding-top: .55rem; }
.workspace form > details > summary { padding: .25rem 0; }
.workspace form .check { display: flex; align-items: center; gap: .4rem; }
.workspace .check input { width: 1.15rem; min-height: auto; margin: 0; }
.cutoffs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
.grade-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: .5rem; align-items: end; margin: .35rem 0; }
.grade-row.single { grid-template-columns: minmax(0,1fr) auto; }
.grade-row button { min-width: 44px; }
.grade-row label[hidden] { display: none; }
.actions,.line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }
.actions:has(.score-steps) { justify-content: flex-start; }
.line h2 { margin: 0; }
.score-steps { display: flex; gap: .35rem; }
.score-steps button { min-width: 44px; }
.result-card { min-width: 0; padding: clamp(1rem,2vw,1.5rem); border: 1px solid #e3e6eb; border-radius: 15px; background: #f7f8fa; color: #17191d; }
.workspace .result-card h2 { margin: 0 0 .65rem; color: #393e48; font-size: .875rem; }
.result-card output { display: block; overflow-wrap: anywhere; font-size: clamp(2.25rem,4.4vw,3.5rem); font-weight: 800; line-height: 1.04; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.result-card p { margin: .4rem 0 0; color: #484f5b; line-height: 1.45; }
.result-card p:empty { display: none; }
.result-card #detail { font-weight: 650; }
.tool-options { grid-column: 1/-1; display: grid; gap: .4rem; border-top: 1px solid var(--line); padding-top: .55rem; }
.tool-options details { border: 0; padding: 0; }
.tool-options summary { padding: .38rem 0; font-size: 14px; font-weight: 700; }
.tool-options ol { padding-inline-start: 1.2rem; margin: .3rem 0 .5rem; }
.tool-options .session-panel { margin: 0; padding: 0; border: 0; box-shadow: none; }
.session-panel summary { font-size: 16px; }
.session-panel .line { justify-content: flex-start; }
.note { color: #4b5563; }
.print-action,#download { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; background: #b90000; border-color: #b90000; color: #fff; font-weight: 750; }
.print-action { width: 100%; margin-top: .9rem; }
.print-action:hover,#download:hover { background: #930000; border-color: #930000; color: #fff; }
body[data-tool="batch"] .workspace textarea { height: 88px; }

/* Tables and charts */
.table-wrap { max-height: 330px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; text-align: left; font-variant-numeric: tabular-nums; }
caption { padding: .5rem; text-align: left; font-weight: 650; }
th,td,caption { font-size: 14px; line-height: 1.45; }
th,td { padding: .45rem .75rem; border-bottom: 1px solid var(--line); }
thead { background: #ededee; }
tr.current { background: #ffebeb; color: #8b0000; font-weight: 750; }
.chart > p:empty { margin: .65rem 0; }

@media(max-width: 850px) {
  .workspace { grid-template-columns: minmax(0,1fr); }
}
@media(max-width: 830px) {
  :root { --rail: 0px; }
  .sidebar,.header-note { display: none; }
  .mobile-nav { display: block; border: 0; padding: 0; }
  .mobile-nav > summary { padding: .4rem .75rem; background: #36373b; border-radius: 8px; color: #fff; }
  .mobile-nav[open] .rail-nav { position: fixed; z-index: 15; top: calc(var(--header) + 6px); right: 12px; display: grid; width: min(300px,calc(100vw - 24px)); max-height: calc(100dvh - var(--header) - 18px); overflow: auto; padding: .7rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #222326; box-shadow: 0 12px 28px #0003; }
  .mobile-nav .rail-nav a { color: #263244; }
  .mobile-nav .rail-nav a[aria-current="page"] { color: #b90000; }
  main.frame,.foot.frame { margin-left: 0; }
}
@media(max-width: 690px) {
  .head { padding-inline: 15px; }
  .hero p { font-size: 14px; }
  .workspace form { gap: .45rem .55rem; }
  input,select,textarea { font-size: 16px !important; }
}
@media(max-width: 400px) {
  .workspace { gap: .8rem; padding: .8rem; }
  .workspace .cutoffs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workspace :is(button,select,input:not([type="checkbox"])) { min-height: 44px; }
  .actions { justify-content: flex-start; }
}
@media print {
  :root { background: #fff; }
  html,body { width: 100%; min-height: 0; height: auto; overflow: visible; padding: 0; background: #fff; }
  header,footer,.sidebar,.mobile-nav,.skip { display: none !important; }
  main.frame { width: 100%; max-width: none; margin: 0; padding: 0; }
  .panel,.workspace { box-shadow: none; }
  .table-wrap { max-height: none; height: auto; overflow: visible; }
  tr { break-inside: avoid; }
  body.print-chart .hero,body.print-chart .workspace,body.print-chart .guide,body.print-chart .related,body.print-chart .task-links,body.print-chart .session-panel,body.print-chart [data-print-chart] { display: none !important; }
  body.print-chart #chart-section { margin: 0; padding: 0; border: 0; box-shadow: none; }
  body.print-chart #chart-section .table-wrap { width: 100%; border: 0; }
  body.print-chart #chart-section table { width: 100%; table-layout: fixed; }
  body.print-chart #chart-section thead { display: table-header-group; }
  body.print-chart #chart-section :is(th,td) { position: static; padding: 3pt 6pt; font-size: 10pt; }
}