:root {
  --navy: #09283f;
  --blue: #0d5d7c;
  --sea: #0b8b8c;
  --foam: #e9f5f6;
  --sand: #fbfaf6;
  --ink: #17232c;
  --muted: #586873;
  --line: #d5e0e3;
  --danger: #8f2835;
  --success: #166c56;
  --shadow: 0 10px 30px rgba(9, 40, 63, .09);
}
* { box-sizing: border-box; }
/* Login screen: styles are scoped so the study area keeps its existing layout. */
body:has(.login-screen) {
  min-height: 100vh;
  min-height: 100svh;
  background-color: #163950;
  background-image: linear-gradient(112deg, rgba(5, 31, 50, .24), rgba(5, 31, 50, .04) 70%), url("fondo-inicio-navega.png");
  background-repeat: no-repeat;
  background-position: center 54%;
  background-size: cover;
  background-attachment: fixed;
}
body:has(.login-screen) .site-header,
body:has(.login-screen) > footer { display: none; }
body:has(.login-screen) .page-shell {
  display: grid;
  align-items: center;
  justify-content: start;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
}
.login-screen { width: 100%; max-width: 28rem; margin-left: clamp(0rem, 8vw, 8rem); }
.login-logo {
  position: fixed;
  z-index: 0;
  top: 50%;
  right: clamp(2rem, 7vw, 7rem);
  width: min(28vw, 25rem);
  max-height: 78svh;
  height: auto;
  object-fit: contain;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
}
.login-panel {
  position: relative;
  z-index: 1;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 24px 70px rgba(4, 24, 39, .28), inset 0 1px 0 rgba(255, 255, 255, .8);
  color: #09283f;
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
}
.login-brand { margin: 0 0 .2rem; color: #09283f; font-size: clamp(2.3rem, 5vw, 3rem); font-weight: 850; letter-spacing: .1em; line-height: 1.05; }
.login-subtitle { margin: 0 0 1.8rem; color: #294d62; font-size: 1.04rem; font-style: italic; }
.login-form { display: grid; gap: .65rem; }
.login-form label { margin-top: .25rem; color: #12384e; font-size: .93rem; font-weight: 750; }
.login-form > input:not([type="hidden"]), .login-password-field input {
  width: 100%;
  min-width: 0;
  min-height: 3.15rem;
  padding: .75rem .9rem;
  border: 1px solid rgba(9, 40, 63, .25);
  border-radius: .75rem;
  background: rgba(255, 255, 255, .88);
  color: #102e41;
  font: inherit;
}
.login-form input:focus-visible, .login-password-toggle:focus-visible, .login-submit:focus-visible {
  outline: 3px solid #087f9e;
  outline-offset: 3px;
}
.login-password-field { display: flex; min-width: 0; align-items: center; }
.login-password-field input { padding-right: 5.4rem; }
.login-password-toggle {
  flex: 0 0 auto;
  margin-left: -5.15rem;
  padding: .45rem .55rem;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: #0c5f7b;
  font: inherit;
  font-size: .83rem;
  font-weight: 800;
  cursor: pointer;
}
.login-submit {
  width: 100%;
  min-height: 3.2rem;
  margin-top: .7rem;
  padding: .75rem 1rem;
  border: 1px solid #0a4f70;
  border-radius: .8rem;
  background: linear-gradient(135deg, #0d6687, #093d5d);
  box-shadow: 0 8px 20px rgba(9, 61, 93, .22);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.login-submit:hover { transform: translateY(-1px); background: linear-gradient(135deg, #0b7597, #082f4b); box-shadow: 0 11px 25px rgba(9, 61, 93, .3); }
.login-submit:active { transform: translateY(0); }
.login-error { margin: 0 0 .5rem; padding: .7rem .8rem; border: 1px solid rgba(143, 40, 53, .25); border-radius: .7rem; background: rgba(255, 240, 241, .92); color: #68202a; font-size: .9rem; }
@supports not (backdrop-filter: blur(1px)) {
  .login-panel { background: rgba(255, 255, 255, .94); }
}
@media (max-width: 900px) {
  body:has(.login-screen) { background-position: 86% 53%; background-attachment: scroll; }
  body:has(.login-screen) .page-shell { justify-content: center; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
  .login-logo { display: none; }
  .login-screen { max-width: 27rem; margin-left: 0; }
  .login-panel { padding: clamp(1.4rem, 6vw, 2rem); }
}
@media (max-height: 560px) and (orientation: landscape) {
  body:has(.login-screen) .page-shell { align-items: start; }
  .login-screen { margin-top: .25rem; margin-bottom: .25rem; }
  .login-panel { padding: 1.1rem 1.5rem; }
  .login-brand { font-size: 2rem; }
  .login-subtitle { margin-bottom: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .login-submit { transition: none; }
}
body { margin: 0; background: var(--sand); color: var(--ink); font-family: ui-rounded, "Avenir Next", Avenir, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; }
a { color: var(--blue); }
.site-header { min-height: 64px; padding: .75rem clamp(1rem, 4vw, 4rem); background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .08rem; color: #fff; text-decoration: none; font-size: 1.2rem; font-weight: 800; letter-spacing: .02em; }.brand__logo { display: block; width: 2.8rem; height: 2.8rem; object-fit: contain; }.brand .brand__name { color: #fff; font-size: 1.08rem; font-weight: 850; letter-spacing: .1em; line-height: 1; }
.site-header nav { display: flex; align-items: center; gap: 1rem; }.site-header nav a, .link-button { color: #e6f5f5; font-size: .92rem; }
.logout-form { margin: 0; }.link-button { background: transparent; border: 0; padding: .35rem 0; cursor: pointer; text-decoration: underline; }
.page-shell { max-width: 1040px; margin: 0 auto; padding: clamp(1.4rem, 4vw, 3.5rem) clamp(1rem, 4vw, 2rem) 3rem; }
footer { padding: 1.5rem; text-align: center; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
h1, h2, p { margin-top: 0; } h1 { color: var(--navy); font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.16; } h2 { color: var(--navy); font-size: 1.15rem; }
.eyebrow { margin-bottom: .45rem; color: var(--sea); font-weight: 800; text-transform: uppercase; font-size: .76rem; letter-spacing: .1em; }.muted, .recurrence-note { color: var(--muted); }
.intro { max-width: 640px; margin-bottom: 2rem; }.intro p:last-child { font-size: 1.08rem; color: var(--muted); }
.tools-prompt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0; padding: 1.25rem; border: 1px solid #b6d9d8; border-radius: 16px; background: var(--foam); }.tools-prompt h2 { margin-bottom: .25rem; }.tools-prompt p:last-child { margin-bottom: 0; color: var(--muted); }
.tools-intro { margin-bottom: 1.5rem; }.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }.tool-card { display: flex; gap: 1rem; padding: 1.3rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease; }.tool-card:hover { transform: translateY(-2px); border-color: var(--sea); }.tool-card h2 { margin-bottom: .45rem; }.tool-card p:not(.eyebrow) { margin-bottom: 1rem; color: var(--muted); }.tool-card__icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--foam); color: var(--sea); font-size: 1.7rem; font-weight: 800; }.tool-card__cta { color: var(--blue); font-weight: 800; }.educational-note { margin-top: 2rem; color: var(--muted); font-size: .84rem; text-align: center; }
.calculator-heading { max-width: 700px; margin: .8rem 0 1.75rem; }.calculator-heading p:last-child { color: var(--muted); font-size: 1.06rem; }.rhumb-form, .rhumb-result, .calculation-explanation { padding: clamp(1rem, 4vw, 1.75rem); border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }.coordinate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }.coordinate-card { min-width: 0; margin: 0; padding: 1.1rem; border: 1px solid var(--line); border-radius: 12px; }.coordinate-card legend { padding: 0 .35rem; color: var(--navy); font-weight: 800; }.coordinate-row + .coordinate-row { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }.coordinate-row h2 { margin-bottom: .75rem; font-size: 1rem; }.coordinate-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 78px; gap: .6rem; }.coordinate-fields label { display: grid; gap: .3rem; min-width: 0; color: var(--muted); font-size: .78rem; font-weight: 800; }.coordinate-fields input, .coordinate-fields select { width: 100%; min-height: 46px; padding: .65rem; border: 1px solid #a8bac0; border-radius: 9px; background: #fff; color: var(--ink); font: inherit; }.coordinate-fields input:focus, .coordinate-fields select:focus { outline: 3px solid rgba(11, 139, 140, .22); border-color: var(--sea); }.field-help { margin: 1rem 0; color: var(--muted); font-size: .85rem; }.calculator-submit { width: 100%; margin-top: .25rem; }.rhumb-result { margin-top: 1.25rem; border-color: #b6d9d8; background: #f9ffff; }.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }.result-grid > div { padding: 1rem; border-radius: 12px; background: var(--foam); }.result-grid span { display: block; color: var(--muted); font-size: .85rem; font-weight: 700; }.result-grid strong { display: block; margin-top: .15rem; color: var(--navy); font-size: clamp(1.55rem, 6vw, 2.3rem); line-height: 1.12; }.result-interpretation { margin: 1rem 0; font-weight: 700; }.calculation-explanation { margin-top: 1.25rem; }.explanation-steps { display: grid; gap: 1rem; margin: 1.25rem 0 0; padding: 0; list-style: none; counter-reset: calculation; }.explanation-steps li { counter-increment: calculation; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; }.explanation-steps h3 { margin: 0 0 .75rem; color: var(--navy); font-size: 1rem; }.explanation-steps strong { color: var(--sea); font-size: .86rem; }.explanation-steps p { margin: .15rem 0 0; }.explanation-steps .calculation { margin-top: .85rem; padding: .85rem; border-radius: 8px; background: var(--foam); overflow-wrap: anywhere; }
.angular-form { padding: clamp(1rem, 4vw, 1.75rem); border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }.operation-selector { display: grid; gap: .35rem; color: var(--navy); font-weight: 800; }.operation-selector select, .angular-fields input, .angular-fields select { width: 100%; min-height: 46px; padding: .65rem; border: 1px solid #a8bac0; border-radius: 9px; background: #fff; color: var(--ink); font: inherit; }.angular-operation { margin: 1.25rem 0 0; padding: 1.1rem; border: 1px solid var(--line); border-radius: 12px; }.angular-operation legend { padding: 0 .35rem; color: var(--navy); font-weight: 800; }.angular-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }.angular-fields--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }.angular-fields label { display: grid; gap: .35rem; min-width: 0; color: var(--muted); font-size: .82rem; font-weight: 800; }.angular-fields label > select { margin-top: -.2rem; }.angular-fields input:focus, .angular-fields select:focus, .operation-selector select:focus { outline: 3px solid rgba(11, 139, 140, .22); border-color: var(--sea); }
.block-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }.block-card { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; min-height: 132px; padding: 1.25rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease; }.block-card:hover { transform: translateY(-2px); border-color: var(--sea); }.block-card__number { grid-row: span 2; color: var(--sea); font-size: 2.2rem; font-weight: 800; }.block-card strong { align-self: end; color: var(--navy); font-size: 1.08rem; }.block-card small { color: var(--muted); }
.login-card { max-width: 430px; margin: clamp(2rem, 10vh, 6rem) auto; padding: clamp(1.35rem, 5vw, 2.35rem); background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }.stack-form { display: grid; gap: 1rem; }.stack-form label { display: grid; gap: .35rem; font-weight: 700; }.stack-form input { width: 100%; padding: .78rem; font: inherit; border: 1px solid #a8bac0; border-radius: 9px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .7rem 1rem; border-radius: 9px; border: 1px solid transparent; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }.primary { background: var(--sea); color: #fff; }.primary:hover { background: #087779; }.secondary { background: #fff; color: var(--navy); border-color: #a9bfc4; }
.crumb { font-size: .9rem; color: var(--muted); }.block-heading { margin-bottom: 1.2rem; }.filters { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.2rem 0 .7rem; }.filter { padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; text-decoration: none; font-size: .92rem; }.filter.active { background: var(--navy); color: #fff; border-color: var(--navy); }.question-list { display: grid; gap: .55rem; padding: 0; list-style: none; }.question-list a { display: grid; grid-template-columns: 70px 1fr auto; gap: .75rem; align-items: center; padding: .8rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; }.question-list small { color: var(--muted); }.stars { color: #b66516; font-weight: 800; letter-spacing: .05em; }
.question-progress { margin-bottom: 1rem; color: var(--muted); font-size: .92rem; }.question-card { padding: clamp(1rem, 4vw, 2rem); border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }.question-card h1 { font-size: clamp(1.2rem, 3.5vw, 1.55rem); font-weight: 750; }.answer-form fieldset { margin: 1.3rem 0; padding: 0; border: 0; }.answer-form legend { margin-bottom: .75rem; font-weight: 800; }.option { display: flex; gap: .75rem; align-items: flex-start; margin: .65rem 0; padding: .85rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }.option:has(input:checked) { border-color: var(--sea); background: var(--foam); }.option input { margin-top: .28rem; min-width: 18px; min-height: 18px; accent-color: var(--sea); }.option span { flex: 1; }.notice { margin: 1rem 0; padding: .85rem 1rem; border-left: 4px solid var(--blue); background: #edf6fa; border-radius: 7px; }.notice.error { color: #68202a; border-color: var(--danger); background: #fbeef0; }.notice.success { color: #0d513f; border-color: var(--success); background: #eaf7f1; }.notice.annulled, .annulled { border-color: #b56a14; background: #fff5e8; color: #71420b; }.history { margin-top: 1.5rem; padding: 1.1rem 1.25rem; border-left: 4px solid var(--sea); background: #fff; }.history p { margin-bottom: .35rem; }.history ul { margin-bottom: 0; padding-left: 1.25rem; }.question-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; margin-top: 1.5rem; }.question-nav .primary:last-child { justify-self: end; }
@media (max-width: 620px) { .site-header { min-height: 60px; align-items: center; gap: .6rem; }.brand { gap: .04rem; }.brand__logo { width: 2.4rem; height: 2.4rem; }.brand .brand__name { font-size: .98rem; letter-spacing: .08em; }.site-header nav { flex-wrap: wrap; justify-content: flex-end; gap: .35rem .7rem; }.site-header nav a, .link-button { font-size: .82rem; }.tools-prompt { display: grid; }.tools-prompt .button { width: 100%; }.block-grid, .coordinate-grid, .angular-fields, .angular-fields--three { grid-template-columns: 1fr; }.coordinate-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 72px; }.result-grid { grid-template-columns: 1fr; }.question-list a { grid-template-columns: 60px 1fr; }.question-list small { grid-column: 2; }.question-nav { grid-template-columns: 1fr 1fr; }.question-nav .secondary { grid-column: span 2; grid-row: 2; }.question-nav .primary:last-child { justify-self: stretch; }.question-card { padding: 1rem; } }
.angular-control-pair { display: flex; gap: .45rem; min-width: 0; }.angular-control-pair input { min-width: 0; flex: 1 1 auto; }.angular-control-pair select { flex: 0 0 5.25rem; margin-top: 0 !important; }
.chart-lab-heading { max-width: 760px; margin-bottom: 1.25rem; }.chart-lab-heading p:last-child { color: var(--muted); font-size: 1.05rem; }.chart-lab-warning { border-left-color: #b56a14; background: #fff5e8; color: #71420b; }.chart-lab-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .55fr); gap: 1rem; margin: 1.25rem 0; }.chart-coordinate-form, .chart-course-controls, .chart-actions { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }.chart-coordinate-form fieldset { margin: 0; padding: 0; border: 0; }.chart-coordinate-form legend { margin-bottom: .8rem; color: var(--navy); font-weight: 800; }.chart-coordinate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-bottom: .85rem; }.chart-coordinate-grid h2 { margin-bottom: .5rem; font-size: .92rem; }.chart-coordinate-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 70px; gap: .45rem; }.chart-coordinate-fields label, .chart-course-controls > label { display: grid; gap: .25rem; color: var(--muted); font-size: .75rem; font-weight: 800; }.chart-coordinate-fields input, .chart-coordinate-fields select, .chart-course-controls input { min-width: 0; min-height: 42px; padding: .55rem; border: 1px solid #a8bac0; border-radius: 8px; background: #fff; color: var(--ink); font: inherit; }.chart-coordinate-fields input:focus, .chart-coordinate-fields select:focus, .chart-course-controls input:focus { outline: 3px solid rgba(11, 139, 140, .22); border-color: var(--sea); }.chart-course-controls { display: grid; align-content: start; gap: .55rem; }.chart-course-controls > div { display: flex; gap: .5rem; }.chart-course-controls input { width: 100%; }.chart-course-controls p { margin: 0; font-size: .82rem; }.chart-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; box-shadow: none; }.chart-actions .button { min-height: 40px; }.chart-actions .is-active { border-color: var(--sea); color: var(--sea); background: var(--foam); }.chart-readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0; }.chart-readout > div { padding: .85rem 1rem; border: 1px solid #b6d9d8; border-radius: 12px; background: #f9ffff; }.chart-readout span { display: block; color: var(--muted); font-size: .77rem; font-weight: 800; }.chart-readout strong { display: block; margin-top: .25rem; color: var(--navy); font-size: .94rem; overflow-wrap: anywhere; }.chart-viewer-section { overflow: hidden; border: 1px solid #9eb8bd; border-radius: 16px; background: #dfe9e9; box-shadow: var(--shadow); }.chart-viewport { position: relative; width: 100%; overflow: hidden; background: #d5e0e3; touch-action: none; user-select: none; aspect-ratio: 4961 / 3508; }.chart-scene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform; }.chart-scene img, .chart-scene svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }.chart-scene img { pointer-events: none; }.chart-scene svg { overflow: visible; }.chart-point-halo { fill: #fff; stroke: #09283f; stroke-width: .0025; }.chart-point { fill: #c83647; stroke: #fff; stroke-width: .0015; }.chart-line-visible { stroke: #075f8a; stroke-width: .0035; stroke-linecap: round; pointer-events: none; }.chart-line-hit { stroke: transparent; stroke-width: .028; cursor: grab; }.chart-line-handle { fill: #fff; stroke: #075f8a; stroke-width: .0035; cursor: grab; }.chart-line-hit:active, .chart-line-handle:active { cursor: grabbing; }.chart-interaction-status { margin: 0; padding: .75rem 1rem; background: #fff; color: var(--muted); font-size: .88rem; }.chart-lab-details { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.chart-lab-details summary { color: var(--navy); font-weight: 800; cursor: pointer; }.chart-lab-details dl { display: grid; grid-template-columns: minmax(150px, .4fr) 1fr; gap: .55rem .75rem; margin: 1rem 0 0; font-size: .84rem; }.chart-lab-details dt { color: var(--muted); font-weight: 800; }.chart-lab-details dd { margin: 0; overflow-wrap: anywhere; }.chart-lab-details code { font-size: .75rem; }
@media (max-width: 720px) { .chart-lab-controls { grid-template-columns: 1fr; }.chart-coordinate-grid { grid-template-columns: 1fr; }.chart-actions { grid-column: auto; }.chart-readout { grid-template-columns: 1fr; }.chart-lab-details dl { grid-template-columns: 1fr; gap: .15rem; }.chart-lab-details dd { margin-bottom: .5rem; } }
.chart-exercise-panel { margin: 1rem 0 1.5rem; padding: 1rem; border: 1px solid #b6d9d8; border-radius: 16px; background: #f7ffff; box-shadow: var(--shadow); }
.chart-exercise-panel__heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.chart-exercise-panel__heading h2 { margin: 0; color: var(--navy); }
.chart-exercise-panel__heading .eyebrow { margin: 0 0 .2rem; }
.chart-exercise-selector { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; align-items: end; gap: .65rem; margin: .9rem 0; }
.chart-exercise-selector label, .chart-exercise-question legend { color: var(--navy); font-weight: 800; }
.chart-exercise-selector select { min-width: 0; min-height: 44px; padding: .55rem; border: 1px solid #a8bac0; border-radius: 8px; background: #fff; font: inherit; }
.chart-exercise-question { padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.chart-exercise-provenance { margin: 0 0 .6rem; color: var(--sea); font-size: .85rem; font-weight: 800; }
.chart-exercise-statement { margin-bottom: 1rem; line-height: 1.55; white-space: normal; }
.chart-exercise-question fieldset { display: grid; gap: .45rem; margin: 0; padding: 0; border: 0; }
.chart-exercise-question legend { margin-bottom: .45rem; }
.chart-exercise-option { display: grid; grid-template-columns: 22px 1fr; gap: .5rem; align-items: start; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.chart-exercise-option:has(input:checked) { border-color: var(--sea); background: var(--foam); }
.chart-exercise-option input { margin-top: .22rem; }
.chart-exercise-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .85rem; }
.chart-exercise-result { min-height: 1.5em; margin: .65rem 0 0; font-weight: 800; }
.chart-exercise-result.is-correct { color: #146b3a; }.chart-exercise-result.is-incorrect { color: #a12e36; }
.chart-exercise-guide { margin: .7rem 0 0; color: var(--muted); font-size: .9rem; }
@media (max-width: 720px) { .chart-exercise-panel__heading { align-items: flex-start; flex-direction: column; }.chart-exercise-selector { grid-template-columns: 1fr; }.chart-exercise-selector .button { width: 100%; }.chart-exercise-actions .button { flex: 1 1 100%; } }
.chart-point-halo { stroke-width: 8; }.chart-point { stroke-width: 5; }.chart-line-visible { stroke-width: 11; }.chart-line-hit { stroke-width: 70; }.chart-line-handle { stroke-width: 8; }
.qualification-page { max-width: 1280px; margin: 0 auto; }
.qualification-heading { margin: clamp(1.5rem, 5vh, 3.5rem) 0 clamp(1.5rem, 4vh, 2.75rem); text-align: center; }
.qualification-heading .eyebrow { margin-bottom: .55rem; }
.qualification-heading h1 { margin-bottom: .6rem; }
.qualification-heading > p:last-child { margin-bottom: 0; color: var(--muted); font-size: clamp(1rem, 2vw, 1.15rem); }
.qualification-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.qualification-card { position: relative; display: flex; min-width: 0; min-height: clamp(340px, 48vh, 500px); overflow: hidden; align-items: flex-end; border: 1px solid rgba(9, 40, 63, .13); border-radius: 20px; background: var(--navy); box-shadow: 0 14px 34px rgba(9, 40, 63, .14); color: #fff; text-decoration: none; isolation: isolate; transition: transform .22s ease, box-shadow .22s ease; }
.qualification-card[href]:hover { transform: translateY(-5px); box-shadow: 0 20px 42px rgba(9, 40, 63, .22); }
.qualification-card[href]:focus-visible { outline: 3px solid #087f9e; outline-offset: 4px; }
.qualification-card__image, .qualification-card__shade { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; }
.qualification-card__image { display: block; object-fit: cover; object-position: center; transition: transform .35s ease; }
.qualification-card[href]:hover .qualification-card__image { transform: scale(1.035); }
.qualification-card__shade { background: linear-gradient(180deg, rgba(5, 26, 42, .02) 26%, rgba(5, 26, 42, .18) 48%, rgba(5, 26, 42, .88) 100%); }
.qualification-card__content { display: grid; gap: .55rem; width: 100%; padding: clamp(1.25rem, 2.2vw, 1.8rem); }
.qualification-card__eyebrow { color: #c6eeee; font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.qualification-card__content strong { max-width: 22rem; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.22; text-wrap: balance; }
.qualification-card__action { display: flex; align-items: center; gap: .55rem; margin-top: .25rem; color: #e6f5f5; font-weight: 750; }
.qualification-card--soon { filter: saturate(.42); opacity: .74; }
.qualification-card--soon .qualification-card__eyebrow { display: inline-flex; width: fit-content; padding: .35rem .6rem; border: 1px solid rgba(255, 255, 255, .42); border-radius: 999px; background: rgba(8, 33, 51, .48); color: #fff; letter-spacing: .04em; }
.per-coming-soon { max-width: 720px; margin: clamp(3rem, 12vh, 8rem) auto; padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.per-coming-soon h1 { margin-bottom: 0; font-size: clamp(1.6rem, 4vw, 2.4rem); }
@media (max-width: 900px) { .qualification-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }.qualification-card { min-height: clamp(260px, 43vh, 390px); }.qualification-heading { margin-top: 1rem; } }
@media (prefers-reduced-motion: reduce) { .qualification-card, .qualification-card__image { transition: none; } }
.qualification-dashboard { max-width: 1120px; margin: 0 auto; }
.qualification-dashboard__heading { max-width: 760px; margin: clamp(1rem, 4vh, 2.5rem) auto clamp(1.5rem, 4vh, 2.5rem); text-align: center; }
.qualification-dashboard__heading .eyebrow { margin-bottom: .45rem; }
.qualification-dashboard__heading h1 { margin-bottom: .55rem; }
.qualification-dashboard__heading > p:last-child { margin-bottom: 0; color: var(--muted); font-size: 1.05rem; }
.qualification-dashboard__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.85rem, 2vw, 1.35rem); }
.qualification-dashboard-card { display: flex; min-width: 0; min-height: 210px; flex-direction: column; gap: .7rem; padding: clamp(1rem, 2vw, 1.4rem); border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 8px 24px rgba(9, 40, 63, .07); color: var(--ink); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.qualification-dashboard-card:hover { transform: translateY(-3px); border-color: #94c9c9; box-shadow: 0 14px 30px rgba(9, 40, 63, .13); }
.qualification-dashboard-card:focus-visible { outline: 3px solid #087f9e; outline-offset: 3px; }
.qualification-dashboard-card__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.qualification-dashboard-card__icon { display: grid; width: 3rem; height: 3rem; flex: 0 0 3rem; place-items: center; border: 1px solid #d7eaea; border-radius: 13px; background: #edf7f7; font-size: 1.55rem; }
.qualification-dashboard-card__status { padding: .24rem .5rem; border-radius: 999px; font-size: .67rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.qualification-dashboard-card__status--available { background: #e7f5ef; color: #166c56; }
.qualification-dashboard-card__status--pending { background: #f1f4f5; color: #586873; }
.qualification-dashboard-card__status--experimental { background: #fff4e3; color: #805115; }
.qualification-dashboard-card > strong { color: var(--navy); font-size: 1.12rem; line-height: 1.25; }
.qualification-dashboard-card__description { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.qualification-dashboard-card__action { display: flex; align-items: center; gap: .4rem; margin-top: auto; color: var(--blue); font-size: .88rem; font-weight: 800; }
.qualification-placeholder { max-width: 760px; margin: clamp(2rem, 8vh, 5rem) auto; padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.qualification-placeholder h1 { margin-bottom: .75rem; font-size: clamp(1.5rem, 4vw, 2.2rem); }
.qualification-placeholder p:last-child { margin-bottom: 0; color: var(--muted); }
@media (max-width: 900px) { .qualification-dashboard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.qualification-dashboard-card { min-height: 190px; } }
@media (max-width: 620px) { .qualification-dashboard__grid { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }.qualification-dashboard-card { min-height: 175px; } }
@media (prefers-reduced-motion: reduce) { .qualification-dashboard-card { transition: none; } }
.per-exams-page, .per-exam-attempt { max-width: 1120px; margin: 0 auto; }
.per-exams-heading, .per-exam-attempt__heading { max-width: 790px; margin: 0 auto 1.6rem; text-align: center; }
.per-exams-heading h1, .per-exam-attempt__heading h1 { margin-bottom: .55rem; }
.per-exams-heading > p:last-child, .per-exam-attempt__heading > p:last-child { margin-bottom: 0; color: var(--muted); font-size: 1.04rem; }
.per-exam-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.per-exam-mode { display: flex; min-width: 0; flex-direction: column; padding: clamp(1rem, 2vw, 1.4rem); border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }
.per-exam-mode h2 { margin-bottom: .4rem; font-size: 1.2rem; }
.per-exam-mode > p:not(.eyebrow) { color: var(--muted); }
.per-exam-mode form { display: grid; gap: .7rem; margin-top: auto; }
.per-exam-mode form > label { color: var(--navy); font-size: .88rem; font-weight: 800; }
.per-exam-mode input[type="number"], .per-exam-mode select { width: 100%; min-width: 0; min-height: 46px; padding: .65rem .75rem; border: 1px solid #a8bac0; border-radius: 9px; background: #fff; color: var(--ink); font: inherit; }
.per-exam-mode input:focus-visible, .per-exam-mode select:focus-visible, .per-exam-mode button:focus-visible, .per-exam-submit:focus-visible { outline: 3px solid rgba(11, 139, 140, .34); outline-offset: 2px; }
.per-exam-mode .button { width: 100%; }
.per-exam-mode--featured { border-color: #9bcaca; background: linear-gradient(145deg, #fff, #f1fafa); }
.per-matter-picker { display: grid; gap: .4rem; max-height: 330px; overflow: auto; margin: .15rem 0; padding: .7rem; border: 1px solid var(--line); border-radius: 11px; }
.per-matter-picker legend { padding: 0 .3rem; color: var(--navy); font-weight: 800; }
.per-matter-choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding: .42rem; border-radius: 7px; cursor: pointer; }
.per-matter-choice:hover { background: #f0f8f8; }
.per-matter-choice input { width: 18px; height: 18px; accent-color: var(--sea); }
.per-matter-choice span { color: var(--ink); font-size: .86rem; }
.per-matter-choice small { color: var(--muted); font-size: .7rem; text-align: right; }
.per-distribution { margin: 0 0 .85rem; color: var(--navy); font-size: .9rem; }
.per-distribution summary { font-weight: 800; cursor: pointer; }
.per-distribution ul { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; margin: .55rem 0 0; padding: .7rem .8rem; border-radius: 10px; background: #fff; list-style: none; }
.per-distribution li { display: contents; }
.per-distribution li strong { color: var(--sea); }
.per-exam-policy-note { margin: 1.25rem 0; padding: 1rem 1.1rem; border-left: 4px solid #b56a14; border-radius: 8px; background: #fff5e8; color: #71420b; }
.per-exam-policy-note p { margin: .25rem 0 0; font-size: .88rem; line-height: 1.55; }
.per-attempt-history { margin-top: 1.8rem; }
.per-attempt-history > ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.per-attempt-history li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .8rem; align-items: center; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); text-decoration: none; }
.per-attempt-history li a:hover, .per-attempt-history li a:focus-visible { border-color: var(--sea); background: #f7fcfc; }
.per-attempt-history li small { color: var(--muted); }
.per-attempt-history li strong { grid-column: 2; grid-row: 1 / span 2; color: var(--blue); font-size: .85rem; text-align: right; }
.per-exam-timer { position: sticky; z-index: 2; top: .5rem; width: fit-content; margin: 0 auto 1rem; padding: .55rem 1rem; border: 1px solid #a8ced0; border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: 0 5px 16px rgba(9,40,63,.12); color: var(--navy); font-weight: 800; }
.per-exam-timer strong { color: #a33236; font-variant-numeric: tabular-nums; }
.per-exam-answer-form { display: grid; gap: .9rem; }
.per-answer-save-status { position: sticky; z-index: 1; top: 3.3rem; width: fit-content; max-width: 100%; margin: 0 auto; padding: .4rem .75rem; border: 1px solid #d5e0e3; border-radius: 999px; background: rgba(255,255,255,.96); color: var(--muted); font-size: .78rem; }
.per-exam-unit-heading { display: flex; width: 100%; min-width: 0; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .45rem .8rem; margin: .65rem 0 0; padding: .8rem 1rem; border: 1px solid #c8d9df; border-left: 4px solid var(--sea); border-radius: 11px; background: linear-gradient(105deg, #f2f9fa, #fff 72%); color: var(--navy); }
.per-exam-unit-heading h2 { min-width: 0; margin: 0; color: var(--navy); font-size: clamp(.98rem, 1.8vw, 1.15rem); font-weight: 850; line-height: 1.35; letter-spacing: .015em; overflow-wrap: anywhere; }
.per-exam-unit-heading__limit { flex: 0 0 auto; padding: .25rem .55rem; border: 1px solid #ead5b6; border-radius: 999px; background: #fff8ed; color: #76501e; font-size: .76rem; font-weight: 750; line-height: 1.35; }
.per-exam-question { min-width: 0; margin: 0; padding: clamp(.9rem, 2.5vw, 1.4rem); border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 6px 18px rgba(9,40,63,.05); scroll-margin-top: 5rem; }
.per-exam-question legend { display: flex; flex-wrap: wrap; gap: .35rem .7rem; align-items: center; width: 100%; margin-bottom: .75rem; color: var(--navy); font-weight: 850; }
.per-exam-question legend small { padding: .16rem .45rem; border-radius: 999px; background: var(--foam); color: var(--blue); font-size: .72rem; font-weight: 750; }
.per-exam-question__statement { margin-bottom: .85rem; color: var(--ink); font-size: 1.03rem; font-weight: 650; line-height: 1.55; overflow-wrap: anywhere; }
.per-exam-option { display: grid; grid-template-columns: auto 1.5rem minmax(0, 1fr); gap: .55rem; align-items: start; margin: .42rem 0; padding: .7rem .75rem; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.per-exam-option:hover { border-color: #9bcaca; background: #f7fcfc; }
.per-exam-option:has(input:checked) { border-color: var(--sea); background: var(--foam); }
.per-exam-option:focus-within { outline: 3px solid rgba(11, 139, 140, .25); outline-offset: 2px; }
.per-exam-option input { width: 18px; height: 18px; margin: .16rem 0 0; accent-color: var(--sea); }
.per-exam-option strong { color: var(--navy); }
.per-exam-option span { min-width: 0; overflow-wrap: anywhere; }
.per-exam-reference { padding: .65rem .75rem; border-left: 3px solid var(--blue); border-radius: 5px; background: #edf6fa; color: #294d62; font-size: .82rem; overflow-wrap: anywhere; }
.per-exam-annulled-note { margin: .8rem 0 0; padding: .65rem .75rem; border-left: 3px solid #b56a14; border-radius: 5px; background: #fff5e8; color: #71420b; font-size: .85rem; font-weight: 750; }
.per-exam-submit { position: sticky; bottom: .6rem; z-index: 2; justify-self: end; min-width: min(100%, 15rem); box-shadow: 0 7px 20px rgba(9,40,63,.2); }
.per-exam-result { margin: 1rem 0 1.4rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.per-exam-result h2 { margin-bottom: .8rem; }
.per-exam-result__counts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; margin: 0; }
.per-exam-result__counts > div { padding: .75rem; border-radius: 10px; background: #f1f7f7; text-align: center; }
.per-exam-result__counts dt { color: var(--muted); font-size: .77rem; font-weight: 750; }
.per-exam-result__counts dd { margin: .15rem 0 0; color: var(--navy); font-size: 1.25rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.per-exam-review { display: grid; gap: .7rem; margin: 1rem 0 1.5rem; }
.per-exam-review-item { padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.per-exam-review-item .eyebrow { margin-bottom: .35rem; font-size: .69rem; }
.per-exam-review-item__eliminatory { display: inline-block; margin-bottom: .35rem; padding: .16rem .45rem; border-radius: 999px; background: #fff2e3; color: #82500e; font-size: .7rem; font-weight: 800; }
.per-exam-review-item h2 { margin-bottom: .5rem; font-size: 1rem; line-height: 1.5; }
.per-exam-review-item p { margin-bottom: .3rem; font-size: .88rem; }
.per-answer-correct { color: var(--success); font-weight: 800; }
.per-answer-incorrect { color: var(--danger); font-weight: 800; }
.per-exam-rules { margin: 0 auto 1rem; max-width: 800px; border: 1px solid #c9dadd; border-radius: 12px; background: #f8fcfc; color: var(--navy); }
.per-exam-rules summary { padding: .65rem .85rem; cursor: pointer; font-size: .88rem; font-weight: 800; }
.per-exam-rules summary:focus-visible { outline: 3px solid rgba(11,139,140,.3); outline-offset: 2px; border-radius: 10px; }
.per-exam-rules__content { padding: 0 .9rem .75rem; font-size: .84rem; line-height: 1.5; }
.per-exam-rules__content p { margin: .4rem 0; }
.per-exam-rules__content ul { margin: .4rem 0; padding-left: 1.25rem; }
.per-exam-timer { font-variant-numeric: tabular-nums; }
.per-exam-question--eliminatory { border-left: 4px solid #bc7a35; }
.per-exam-question__legend { min-width: 0; }
.per-exam-question legend .per-exam-unit { background: #e6f1f7; color: #184b6b; }
.per-exam-question legend .per-exam-matter { background: #edf5f2; color: #28584e; }
.per-exam-question legend .per-exam-eliminatory-badge { background: #fff2e3; color: #82500e; }
.per-exam-result-blocks { margin-top: 1.25rem; }
.per-exam-result-blocks h3, .per-exam-failure-reasons h3 { margin: 0 0 .65rem; font-size: 1rem; }
.per-exam-result-blocks__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.per-exam-result-block { min-width: 0; padding: .8rem; border: 1px solid var(--line); border-radius: 11px; background: #f8fbfb; }
.per-exam-result-block h4 { margin: 0 0 .35rem; color: var(--navy); font-size: .9rem; line-height: 1.35; }
.per-exam-result-block > strong { font-size: .78rem; }
.per-exam-result-block p { margin: .4rem 0 .2rem; font-size: .8rem; line-height: 1.4; }
.per-exam-result-block small { color: var(--muted); font-size: .74rem; }
.per-exam-result-block.is-pass { border-color: #b5d9c6; background: #f1faf4; }
.per-exam-result-block.is-pass > strong { color: #276b46; }
.per-exam-result-block.is-fail { border-color: #e3b9b8; background: #fff5f4; }
.per-exam-result-block.is-fail > strong { color: #9a3030; }
.per-exam-result-block.is-pending { border-color: #e8d3ad; background: #fff9ef; }
.per-exam-result-block.is-pending > strong { color: #85520c; }
.per-exam-failure-reasons { margin-top: 1rem; padding: .8rem 1rem; border-left: 4px solid var(--danger); border-radius: 8px; background: #fff5f4; color: #672b2c; }
.per-exam-failure-reasons ul { margin: 0; padding-left: 1.2rem; font-size: .86rem; line-height: 1.5; }
.per-exam-pass-reason { margin: 1rem 0 0; color: #276b46; font-weight: 750; }
@media (max-width: 800px) { .per-exam-modes { grid-template-columns: 1fr; }.per-exam-result__counts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .per-exam-result-blocks__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .per-matter-choice { grid-template-columns: auto minmax(0, 1fr); }.per-matter-choice small { grid-column: 2; text-align: left; }.per-attempt-history li a { grid-template-columns: 1fr; }.per-attempt-history li strong { grid-column: 1; grid-row: auto; text-align: left; }.per-exam-result__counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }.per-exam-submit { justify-self: stretch; }.per-exam-question { padding: .8rem; }.per-exam-question legend { gap: .3rem; }.per-exam-question legend small { white-space: normal; }.per-exam-rules__content { font-size: .8rem; }.per-exam-unit-heading { align-items: flex-start; padding: .75rem .8rem; }.per-exam-unit-heading__limit { font-size: .73rem; } }
@media (prefers-reduced-motion: reduce) { .per-exam-mode, .per-exam-option { scroll-behavior: auto; transition: none; } }

/* PY tests landing page: PER-like presentation, isolated from PER behavior. */
.py-exams-page { max-width: 1120px; margin: 0 auto; }
.py-exams-heading { max-width: 790px; margin: 0 auto 1.6rem; text-align: center; }
.py-exams-heading h1 { margin-bottom: .55rem; }
.py-exams-heading > p:not(.eyebrow) { margin-bottom: 0; color: var(--muted); font-size: 1.04rem; }
.py-exams-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .65rem; margin-top: .8rem; font-size: .88rem !important; }
.py-exams-summary strong { color: var(--navy); }
.py-exam-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.py-exam-mode { display: flex; min-width: 0; flex-direction: column; padding: clamp(1rem, 2vw, 1.4rem); border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }
.py-exam-mode h2 { margin-bottom: .4rem; font-size: 1.2rem; }
.py-exam-mode > p:not(.eyebrow) { color: var(--muted); }
.py-exam-form, .py-exam-placeholder { display: grid; gap: .7rem; margin-top: auto; padding-top: .6rem; }
.py-exam-form > label, .py-matter-picker legend { color: var(--navy); font-size: .88rem; font-weight: 800; }
.py-exam-mode select { width: 100%; min-width: 0; min-height: 46px; padding: .65rem .75rem; border: 1px solid #a8bac0; border-radius: 9px; background: #f4f6f7; color: var(--muted); font: inherit; }
.py-exam-mode .button { width: 100%; }
.py-exam-mode button:disabled { cursor: not-allowed; opacity: .62; }
.py-exam-mode--featured { border-color: #9bcaca; background: linear-gradient(145deg, #fff, #f1fafa); }
.py-exam-disabled-note { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.py-matter-picker { display: grid; gap: .45rem; margin: 0; padding: 0; border: 0; }
.py-matter-picker legend { margin-bottom: .15rem; }
.py-matter-picker label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .55rem; align-items: center; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); font-size: .86rem; }
.py-matter-picker input { width: 18px; height: 18px; margin: 0; accent-color: var(--sea); }
.py-matter-picker small { color: var(--muted); font-size: .72rem; text-align: right; }
.py-exam-distribution { margin: .25rem 0 .75rem; border: 1px solid #c9dadd; border-radius: 10px; background: rgba(255,255,255,.72); color: var(--navy); }
.py-exam-distribution summary { padding: .65rem .85rem; cursor: pointer; font-size: .88rem; font-weight: 800; }
.py-exam-distribution ul { display: grid; gap: .3rem; margin: 0; padding: 0 .85rem .75rem; list-style: none; }
.py-exam-distribution li { display: flex; justify-content: space-between; gap: .75rem; font-size: .84rem; }
.py-exam-note { display: grid; justify-items: start; gap: .45rem; margin: 1.25rem 0; padding: 1rem 1.1rem; border-left: 4px solid var(--sea); border-radius: 8px; background: #edf7f7; color: var(--navy); }
.py-exam-note p { margin: 0 0 .35rem; color: #365467; font-size: .9rem; }
.py-exam-note .button { min-height: 44px; }
.py-exams-navigation { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 1.5rem 0 .5rem; }
.py-exams-navigation .button { min-height: 44px; }
.py-exam-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .8fr); gap: 1rem; align-items: center; margin: 1.2rem 0; padding: 1rem 1.1rem; border: 1px solid #b7d5d7; border-radius: 14px; background: #f1f9f9; }
.py-exam-review h2 { margin: 0 0 .25rem; font-size: 1.1rem; }
.py-exam-review p { margin: 0; color: #365467; font-size: .9rem; }
.py-exam-review form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.py-exam-review form label { grid-column: 1 / -1; color: var(--navy); font-size: .85rem; font-weight: 800; }
.py-exam-review select, .py-preview-nav select { min-width: 0; min-height: 44px; padding: .55rem .7rem; border: 1px solid #8baeb2; border-radius: 9px; background: white; color: var(--navy); font: inherit; }
.py-preview-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .8fr) minmax(0, 1fr); gap: .65rem; align-items: center; margin-top: 1rem; }
.py-preview-nav form { display: flex; gap: .4rem; }
.py-preview-nav form select { width: 100%; }
.py-preview-nav > a:last-child { text-align: right; }
.py-preview-report { display: grid; gap: .25rem; margin: 1rem 0; padding: .8rem 1rem; border: 1px solid #8fc29d; border-radius: 10px; background: #f0faf2; color: #176738; }
.py-preview-report > span { font-size: .88rem; }
.py-preview-report ul { margin: .25rem 0 0; padding-left: 1.25rem; color: #7c2d1c; }
.py-preview .py-attempt-question h3 { margin: 0; }
.py-preview .py-answer-option { cursor: default; grid-template-columns: 1.65rem minmax(0, 1fr); }
@media (max-width: 800px) { .py-exam-modes { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .py-exam-review { grid-template-columns: 1fr; }.py-preview-nav { grid-template-columns: 1fr 1fr; }.py-preview-nav form { grid-column: 1 / -1; grid-row: 1; }.py-preview-nav > a, .py-preview-nav > span { grid-row: 2; }.py-preview-nav > a:last-child { text-align: right; } }
@media (max-width: 560px) { .py-matter-picker label { grid-template-columns: auto minmax(0, 1fr); }.py-matter-picker small { grid-column: 2; text-align: left; }.py-exams-navigation { flex-direction: column; }.py-exams-navigation .button { width: 100%; }.py-exam-note .button { width: 100%; text-align: center; }.py-exam-review form { grid-template-columns: 1fr; }.py-exam-review form label { grid-column: auto; }.py-preview-nav { grid-template-columns: 1fr; }.py-preview-nav form, .py-preview-nav > a, .py-preview-nav > span { grid-column: auto; grid-row: auto; }.py-preview-nav > a:last-child { text-align: left; } }
@media (prefers-reduced-motion: reduce) { .py-exam-mode { scroll-behavior: auto; transition: none; } }

/* PY historical exam engine: scoped styles, independent from PER exam behavior. */
.py-exam-alert { margin: 0 0 1rem; padding: .85rem 1rem; border: 1px solid #d98c79; border-radius: 10px; background: #fff4f1; color: #7c2d1c; }
.py-exam-resume { margin: 1.25rem 0; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.py-exam-resume h2 { margin: 0 0 .7rem; font-size: 1.1rem; }
.py-exam-resume ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.py-exam-resume li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.py-exam-resume a { font-weight: 800; }
.py-attempt { max-width: 1060px; margin: 0 auto; }
.py-attempt__heading { max-width: 820px; margin: 0 auto 1rem; text-align: center; }
.py-attempt__heading h1 { font-size: clamp(1.55rem, 3vw, 2.25rem); }
.py-attempt__heading > p { color: var(--muted); }
.py-attempt__policy { padding: .7rem .9rem; border-radius: 9px; background: #edf7f7; color: var(--navy) !important; font-size: .9rem; }
.py-exam-timer { position: sticky; z-index: 3; top: .5rem; width: fit-content; margin: 0 auto 1rem; padding: .55rem 1rem; border: 1px solid #a8ced0; border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: 0 5px 16px rgba(9,40,63,.12); color: var(--navy); font-weight: 800; }
.py-exam-timer strong { color: #a33236; font-variant-numeric: tabular-nums; }
.py-save-status { position: sticky; z-index: 2; top: .5rem; width: fit-content; max-width: 100%; margin: 0 auto .8rem; padding: .45rem .8rem; border: 1px solid #b6d3d3; border-radius: 999px; background: #f1fbfb; color: var(--navy); font-size: .85rem; box-shadow: var(--shadow); }
.py-save-status.is-error { border-color: #d98c79; background: #fff4f1; color: #7c2d1c; }
.py-exam-mode select:enabled { border-color: #8baeb2; background: white; color: var(--navy); }
.py-attempt-matter { display: grid; gap: .8rem; margin: 1rem 0 1.4rem; }
.py-attempt-matter > h2 { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 0; padding: .85rem 1rem; border-radius: 12px; background: var(--navy); color: white; font-size: 1.18rem; }
.py-attempt-matter > h2 span { color: #d5e7e9; font-size: .83rem; font-weight: 600; }
.py-attempt-question { min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow); }
.py-attempt-question.is-annulled { border-color: #d4b972; background: #fffdf5; }
.py-attempt-question legend { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; width: 100%; padding: 0; color: var(--navy); font-weight: 800; }
.py-question-number { font-size: 1rem; }
.py-question-status { display: flex; flex-wrap: wrap; gap: .35rem; }
.py-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .22rem .55rem; font-size: .72rem; font-weight: 800; }
.py-badge--annulled { background: #f6edcf; color: #705616; }
.py-badge--pending { background: #fff0d9; color: #754b0c; }
.py-badge--correct { background: #e2f5e8; color: #176738; }
.py-badge--incorrect { background: #fce8e4; color: #8a3020; }
.py-question-statement { margin: .65rem 0; white-space: normal; font-size: 1rem; line-height: 1.55; }
.py-question-source { margin: .5rem 0; padding: .55rem .7rem; border-left: 3px solid var(--sea); background: #f2f8f8; color: #365467; font-size: .82rem; }
.py-question-options { display: grid; gap: .45rem; }
.py-answer-option { display: grid; grid-template-columns: 1.2rem 1.65rem minmax(0, 1fr) auto; align-items: start; gap: .55rem; padding: .62rem .7rem; border: 1px solid #d6e0e2; border-radius: 9px; cursor: pointer; line-height: 1.45; }
.py-answer-option:has(input:checked) { border-color: #257c88; background: #eff9f9; }
.py-answer-option input { width: 1.1rem; height: 1.1rem; margin: .12rem 0 0; accent-color: #126f79; }
.py-answer-option__letter { color: var(--navy); font-weight: 900; }
.py-answer-option strong { color: #176738; font-size: .78rem; }
.py-answer-option.is-correct { border-color: #5ca975; background: #f0faf2; }
.py-answer-option.is-selected-wrong { border-color: #c55a45; background: #fff4f1; }
.py-attempt-submit-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0; padding: 1rem; border: 1px solid #bfd7d9; border-radius: 13px; background: #eef8f8; }
.py-attempt-submit-bar p { flex: 1 1 260px; margin: 0; color: #365467; }
.py-attempt-submit-bar .button { min-height: 48px; }
.py-attempt-result { margin: 1rem 0; padding: 1rem; border: 1px solid #b7d5d7; border-radius: 13px; background: #f1f9f9; }
.py-attempt-result h2 { margin: 0 0 .35rem; font-size: 1.15rem; }
.py-attempt-result > p { margin: .25rem 0 .8rem; color: #365467; }
.py-attempt-result dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: 0; }
.py-attempt-result dl > div { padding: .65rem; border-radius: 8px; background: white; }
.py-attempt-result dt { color: var(--muted); font-size: .78rem; }
.py-attempt-result dd { margin: .1rem 0 0; color: var(--navy); font-size: 1.3rem; font-weight: 900; }
.py-result-warning { margin: .8rem 0 0 !important; padding: .65rem .8rem; border-radius: 8px; background: #fff0d9; color: #754b0c !important; font-size: .88rem; }
.py-attempt-return { margin: 1.25rem 0; }
@media (max-width: 700px) {
  .py-attempt-question { padding: .8rem; }
  .py-attempt-result dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .py-answer-option { grid-template-columns: 1.1rem 1.4rem minmax(0, 1fr); gap: .4rem; padding: .6rem; }
  .py-answer-option strong { grid-column: 3; }
}
@media (max-width: 420px) {
  .py-attempt-matter > h2 { align-items: flex-start; flex-direction: column; gap: .15rem; }
  .py-attempt-result dl { grid-template-columns: 1fr 1fr; }
  .py-attempt-submit-bar .button { width: 100%; }
}

.audit-report-page { max-width: 1120px; margin: 0 auto; }
.audit-report-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin: .25rem 0 1.25rem; }
.audit-report-prose { min-width: 0; padding: clamp(1rem, 3vw, 2.5rem); border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); color: var(--ink); line-height: 1.65; overflow-wrap: anywhere; }
.audit-report-prose > :first-child { margin-top: 0; }
.audit-report-prose h1, .audit-report-prose h2, .audit-report-prose h3, .audit-report-prose h4, .audit-report-prose h5, .audit-report-prose h6 { color: var(--navy); line-height: 1.3; }
.audit-report-prose h1 { padding-bottom: .55rem; border-bottom: 2px solid #dce9eb; font-size: clamp(1.65rem, 4vw, 2.25rem); }
.audit-report-prose h2 { margin-top: 2rem; padding-bottom: .4rem; border-bottom: 1px solid #e1e9eb; font-size: clamp(1.25rem, 2.8vw, 1.6rem); }
.audit-report-prose h3 { margin-top: 1.5rem; font-size: 1.12rem; }
.audit-report-prose p, .audit-report-prose ul, .audit-report-prose ol, .audit-report-prose blockquote { margin: .85rem 0; }
.audit-report-prose ul, .audit-report-prose ol { padding-left: 1.5rem; }
.audit-report-prose li + li { margin-top: .3rem; }
.audit-report-prose a { color: #075f8a; text-decoration-thickness: .08em; text-underline-offset: .16em; }
.audit-report-prose a:focus-visible { outline: 3px solid rgba(11,139,140,.3); outline-offset: 2px; }
.audit-report-prose code { padding: .12em .35em; border-radius: 5px; background: #edf3f5; color: #193d51; font-size: .88em; overflow-wrap: anywhere; }
.audit-report-prose pre.report-code { max-width: 100%; overflow: auto; padding: 1rem; border-radius: 10px; background: #102b3a; color: #f2f8fa; line-height: 1.5; }
.audit-report-prose pre.report-code code { padding: 0; background: transparent; color: inherit; white-space: pre; }
.report-table-wrap { max-width: 100%; margin: 1rem 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; }
.audit-report-prose table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.audit-report-prose th, .audit-report-prose td { padding: .65rem .8rem; border-bottom: 1px solid #e0e8ea; vertical-align: top; }
.audit-report-prose th { background: #edf5f5; color: var(--navy); font-weight: 800; }
.audit-report-prose tbody tr:last-child td { border-bottom: 0; }
.audit-report-prose blockquote { margin-left: 0; padding: .4rem 1rem; border-left: 4px solid var(--sea); color: var(--muted); }
.audit-report-prose hr { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--line); }
@media print {
    .site-header, body > footer, .audit-report-toolbar, .audit-report-page > script { display: none !important; }
    body, .page-shell { margin: 0; padding: 0; background: #fff !important; }
    .audit-report-page { max-width: none; }
    .audit-report-prose { padding: 0; border: 0; border-radius: 0; box-shadow: none; color: #111; font-size: 10pt; line-height: 1.45; }
    .audit-report-prose h1, .audit-report-prose h2, .audit-report-prose h3 { break-after: avoid; }
    .audit-report-prose table, .audit-report-prose pre { break-inside: avoid; }
    .report-table-wrap { overflow: visible; border: 0; }
    .audit-report-prose a { color: inherit; text-decoration: none; }
}

/* Fixed coordinate frame around the transformed chart scene. */
.chart-frame { display: grid; grid-template-columns: 58px minmax(0, 1fr) 58px; grid-template-rows: 34px auto 34px; align-items: stretch; width: 100%; overflow: hidden; background: #edf3f3; }
.chart-ruler { position: relative; min-width: 0; min-height: 0; overflow: hidden; color: #16394b; background: #f7fbfb; font: 600 10px/1.1 system-ui, sans-serif; pointer-events: none; user-select: none; }
.chart-ruler--horizontal { grid-column: 2; }.chart-ruler--top { grid-row: 1; }.chart-ruler--bottom { grid-row: 3; }
.chart-ruler--vertical { grid-row: 2; }.chart-ruler--left { grid-column: 1; }.chart-ruler--right { grid-column: 3; }
.chart-frame > .chart-viewport { grid-column: 2; grid-row: 2; }
.chart-ruler-track { position: absolute; inset: 0; }
.chart-ruler--horizontal .chart-ruler-track::before { position: absolute; top: 2px; right: 0; left: 0; border-top: 1px solid #476673; content: ''; }
.chart-ruler--bottom .chart-ruler-track::before { top: auto; bottom: 2px; }
.chart-ruler--vertical .chart-ruler-track::before { position: absolute; top: 0; right: 2px; bottom: 0; border-right: 1px solid #476673; content: ''; }
.chart-ruler--right .chart-ruler-track::before { right: auto; left: 2px; }
.chart-ruler-tick { position: absolute; z-index: 1; background: #476673; }
.chart-ruler--horizontal .chart-ruler-tick { top: 2px; width: 1px; height: 6px; }.chart-ruler--horizontal .chart-ruler-tick.is-major { height: 11px; }
.chart-ruler--bottom .chart-ruler-tick { top: auto; bottom: 2px; }
.chart-ruler--vertical .chart-ruler-tick { top: 0; right: 2px; width: 6px; height: 1px; }.chart-ruler--vertical .chart-ruler-tick.is-major { width: 11px; }
.chart-ruler--right .chart-ruler-tick { right: auto; left: 2px; }
.chart-ruler-label { position: absolute; z-index: 2; white-space: nowrap; color: #16394b; font-size: 9px; font-variant-numeric: tabular-nums; }
.chart-ruler--horizontal .chart-ruler-label { top: 14px; transform: translateX(-50%); }.chart-ruler--horizontal .chart-ruler-label.is-edge-start { transform: none; }.chart-ruler--horizontal .chart-ruler-label.is-edge-end { transform: translateX(-100%); }
.chart-ruler--bottom .chart-ruler-label { top: auto; bottom: 14px; }
.chart-ruler--vertical .chart-ruler-label { top: 0; right: 13px; transform: translateY(-50%); }.chart-ruler--vertical .chart-ruler-label.is-edge-start { transform: none; }.chart-ruler--vertical .chart-ruler-label.is-edge-end { transform: translateY(-100%); }
.chart-ruler--right .chart-ruler-label { right: auto; left: 13px; }
.chart-ruler-indicator { position: absolute; z-index: 3; display: block; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #c83647; box-shadow: 0 0 0 1px #8d1f31; }
.chart-ruler-indicator[hidden] { display: none; }
.chart-ruler--horizontal .chart-ruler-indicator { top: 0; transform: translateX(-50%); }.chart-ruler--bottom .chart-ruler-indicator { top: auto; bottom: 0; }
.chart-ruler--vertical .chart-ruler-indicator { right: 0; transform: translateY(-50%); }.chart-ruler--right .chart-ruler-indicator { right: auto; left: 0; }
.chart-ruler-indicator output { position: absolute; padding: 2px 4px; border-radius: 3px; color: #fff; background: #8d1f31; font: 700 9px/1.2 system-ui, sans-serif; white-space: nowrap; }
.chart-ruler--horizontal .chart-ruler-indicator output { top: 8px; left: 50%; transform: translateX(-50%); }.chart-ruler--bottom .chart-ruler-indicator output { top: auto; bottom: 8px; }
.chart-ruler--vertical .chart-ruler-indicator output { top: 50%; right: 8px; transform: translateY(-50%); }.chart-ruler--right .chart-ruler-indicator output { right: auto; left: 8px; }
.chart-instruments-layer { position: absolute; z-index: 4; inset: 0; overflow: hidden; pointer-events: none; }
.chart-instrument { position: absolute; overflow: visible; transform-origin: center; touch-action: none; cursor: move; pointer-events: auto; filter: drop-shadow(0 2px 2px rgba(9,40,63,.24)); user-select: none; }
.chart-instrument[data-locked="true"] { cursor: not-allowed; }
.chart-instrument-glass { fill: rgba(155, 211, 214, .34); stroke: #0b596b; stroke-width: 2; }
.chart-instrument-axis, .chart-protractor-north-axis { stroke: #0a5365; stroke-width: 2; }
.chart-protractor-cross-axis { stroke: #0a5365; stroke-width: 1; stroke-dasharray: 5 4; opacity: .8; }
.chart-instrument-tick, .chart-protractor-perimeter-tick { stroke: #123c4c; stroke-width: 1; }
.chart-instrument-tick.is-medium, .chart-protractor-perimeter-tick.is-medium { stroke-width: 1.5; }
.chart-instrument-tick.is-major, .chart-protractor-perimeter-tick.is-major { stroke-width: 2; }
.chart-instrument-mark-label, .chart-protractor-edge-label { fill: #103b4b; font: 800 15px/1 sans-serif; paint-order: stroke; stroke: rgba(230,249,248,.92); stroke-width: 3px; stroke-linejoin: round; }
.chart-instrument-unit-label { fill: #103b4b; font: 800 13px/1 sans-serif; paint-order: stroke; stroke: rgba(230,249,248,.92); stroke-width: 2px; }
.chart-protractor-edge-label { font-size: 15px; stroke-width: 2px; }
.chart-protractor-edge-label.is-cardinal { fill: #8d2634; font-weight: 900; }
.chart-ruler-scale-edge { stroke: #123c4c; stroke-width: 2; }
.chart-protractor-grid { stroke: #176b79; stroke-width: .7; opacity: .42; }
.chart-protractor-grid .chart-protractor-diagonal { stroke: #922e3e; stroke-width: 1.3; stroke-dasharray: 7 4; opacity: .85; }
.chart-protractor-center { fill: #fff; stroke: #982d3c; stroke-width: 2; }
.chart-instrument-rotate-handle { fill: #fff; stroke: #b36b18; stroke-width: 2; cursor: grab; pointer-events: auto; }
.chart-instrument-handle-glyph { fill: #74440d; font: 700 17px/1 sans-serif; }
.chart-north-reference { position: absolute; z-index: 20; top: 8px; left: 8px; display: flex; align-items: center; gap: .35rem; padding: .3rem .45rem; border: 1px solid rgba(9,40,63,.55); border-radius: 7px; color: #09283f; background: rgba(255,255,255,.9); box-shadow: 0 1px 4px rgba(9,40,63,.2); font: 800 10px/1.05 system-ui, sans-serif; pointer-events: none; }
.chart-north-reference__arrow { color: #b12435; font-size: 26px; line-height: .8; }
.chart-instruments-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: .75rem 0; }
.chart-instrument-panel { min-width: 0; padding: .75rem; border: 1px solid #a9c1c5; border-radius: 12px; background: #f7fbfb; }
.chart-instrument-panel__heading, .chart-instrument-panel__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.chart-instrument-panel__heading { justify-content: space-between; margin-bottom: .5rem; }
.chart-instrument-panel h2 { margin: 0; color: var(--navy); font-size: .95rem; }
.chart-instrument-panel__heading label { display: flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 700; }
.chart-instrument-panel__actions .button { min-height: 36px; padding: .45rem .65rem; font-size: .78rem; }
.chart-instrument-panel__settings { display: grid; grid-template-columns: 1fr 1fr minmax(150px, .8fr); gap: .55rem; margin-top: .55rem; }
.chart-instrument-panel__settings label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem .4rem; color: var(--muted); font-size: .72rem; font-weight: 700; }
.chart-instrument-panel__settings input[type="range"] { grid-column: 1 / -1; width: 100%; min-width: 50px; accent-color: var(--sea); }
.chart-instrument-panel__settings input[type="number"] { grid-column: 1 / -1; width: 100%; min-height: 34px; padding: .3rem .45rem; border: 1px solid #9fb4b9; border-radius: 6px; color: var(--ink); font: inherit; }
@media (max-width: 600px) {
  .chart-protractor-edge-label { font-size: 20px; }
}
.chart-instrument-panel__settings output { color: var(--navy); font-variant-numeric: tabular-nums; }
.chart-instrument-help { margin: .45rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.35; }
.chart-instrument-result { display: block; margin-top: .35rem; color: #075f8a; font-size: .78rem; font-weight: 800; }
.chart-instrument-line { stroke: #b12435; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; pointer-events: none; }
@media (max-width: 600px) {
  .chart-frame { grid-template-columns: 56px minmax(0, 1fr) 56px; grid-template-rows: 30px auto 30px; }
  .chart-ruler { font-size: 8px; }.chart-ruler-label { font-size: 8px; }
  .chart-ruler--vertical .chart-ruler-label { right: 11px; }.chart-ruler--right .chart-ruler-label { right: auto; left: 11px; }
  .chart-ruler-indicator output { font-size: 8px; }
}
@media (max-width: 760px) {
  .chart-instruments-controls { grid-template-columns: 1fr; }
  .chart-instrument-panel__settings { grid-template-columns: 1fr 1fr; }
  .chart-instrument-panel__settings label:last-child { grid-column: 1 / -1; grid-template-columns: auto minmax(90px, 1fr) auto; align-items: center; }
  .chart-instrument-panel__settings label:last-child input[type="number"] { grid-column: 2; }
  .chart-north-reference { top: 4px; left: 4px; padding: .25rem .35rem; font-size: 9px; }
}