:root {
    --paper-w: 11in;
    --paper-h: 8.5in;
    --ink: #111;
    --line: #222;
    --grid: #555;
    --soft: #e6e6e6;
    --blue: #cfe2f3;
    --field: #fffef6;
  }

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    background: #eeeeee;
    color: var(--ink);
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  }

  .toolbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: #1f1f1f;
    color: #fff;
    font-size: 13px;
  }

  .toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
  }

  .toolbar-info {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid #555;
    border-radius: 4px;
    background: #2b2b2b;
    color: #fff;
    font-weight: 700;
  }

  .toolbar-info strong {
    color: #fff;
    font-weight: 900;
  }

  .toolbar select,
  .toolbar button {
    border: 1px solid #aaa;
    border-radius: 4px;
    background: #fff;
    color: #111;
    padding: 6px 9px;
    font: inherit;
    font-weight: 700;
  }

  .toolbar button {
    cursor: pointer;
  }

  .cache-notice {
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 8px 12px;
    background: #fff8dc;
    border-bottom: 1px solid #c7a64b;
    color: #111;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
  }

  .cache-notice strong {
    font-weight: 800;
  }


  /* Keep the black toolbar/header fitted to the visible mobile screen,
     without changing the wide training table layout below it. */
  .toolbar {
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  @media screen and (max-width: 700px) {
    .toolbar {
      justify-content: flex-start;
      gap: 6px;
      padding: 8px;
    }

    .toolbar label,
    .editor-status {
      flex: 0 0 auto;
    }

    .toolbar button,
    .toolbar select {
      flex: 0 0 auto;
      white-space: nowrap;
    }
  }

  .page {
    width: var(--paper-w);
    min-height: var(--paper-h);
    margin: 18px auto;
    padding: .22in;
    background: #fff;
    box-shadow: 0 0 8px rgba(0,0,0,.24);
    overflow: hidden;
  }

  .print-page-break {
    page-break-after: always;
  }

  input,
  textarea,
  select {
    font-family: Arial, Helvetica, sans-serif;
  }

  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="tel"],
  textarea {
    width: 100%;
    border: none;
    background: var(--field);
    color: #111;
    font-size: inherit;
  }

  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="tel"] {
    min-height: 20px;
    padding: 1px 3px;
    border-bottom: 1px solid #777;
    text-align: center;
  }

  input[readonly] {
    background: #eef6ff;
  }

  .top-header {
    display: grid;
    grid-template-columns: 3.2in 2.55in 4.65in;
    border: 1.5px solid var(--line);
    min-height: 1.55in;
  }

  .brand-box,
  .record-title,
  .student-box {
    border-right: 1px solid var(--line);
  }

  .student-box {
    border-right: none;
  }

  .brand-box {
    display: grid;
    grid-template-rows: 1fr auto;
    padding: 8px;
  }

  .brand-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .irsc-logo {
    width: 2.45in;
    height: auto;
    max-height: .82in;
    object-fit: contain;
    object-position: left top;
  }

  .left-meta {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 5px 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
  }

  .record-title {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 6px;
  }

  .record-title h1 {
    margin: 0;
    font-size: 31px;
    line-height: 1.35;
  }

  .student-box {
    display: grid;
    grid-template-rows: .36in .36in .58in .44in;
  }

  .student-row {
    display: grid;
    border-bottom: 1px solid var(--line);
    min-height: 100%;
  }

  .student-row:last-child {
    border-bottom: none;
  }

  .two-col {
    grid-template-columns: 2.85in 1.78in;
  }

  .three-col {
    grid-template-columns: 1.57in 1.57in 1.49in;
  }

  .student-field {
    border-right: 1px solid var(--line);
    padding: 4px 6px;
    font-size: 13px;
    font-weight: 700;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px;
  }

  .student-field.full {
    grid-template-columns: auto 1fr;
  }

  .student-field:last-child {
    border-right: none;
  }

  .student-field.stacked {
    grid-template-columns: 1fr;
    gap: 2px;
    align-items: start;
  }

  .student-field.stacked input {
    text-align: left;
    font-weight: 700;
  }

  .student-field .field-label {
    white-space: nowrap;
  }

  .page-caption {
    margin: 10px 0 4px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    font-weight: 700;
    font-size: 13px;
  }

  .template-note {
    color: #333;
    font-size: 12px;
    font-weight: 700;
    max-width: 45%;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  table.record-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1.5px solid var(--line);
    font-size: 10.2px;
    font-weight: 400;
  }

  .record-table th,
  .record-table td {
    border: 1px solid var(--grid);
    padding: 0;
    text-align: center;
    vertical-align: middle;
  }

  .record-table thead th {
    background: #fff;
    font-weight: 400;
  }

  .score-info {
    height: .32in;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.15;
  }

  .score-title {
    height: .32in;
    font-size: 15px;
    font-weight: 500;
  }

  .score-scale {
    height: .32in;
    font-size: 12px;
    font-weight: 500;
  }

  .date-heading {
    height: .45in;
    font-size: 16px;
  }

  .text-heading {
    height: .45in;
    font-size: 15px;
    line-height: 1.15;
  }

  .vertical-heading {
    height: 1.42in;
    padding: 0;
    overflow: hidden;
    position: relative;
  }

  .vertical-heading > span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center;
    display: block;
    width: 1.22in;
    white-space: nowrap;
    line-height: 1.05;
    font-size: 10.1px;
    font-weight: 400;
    text-align: center;
    letter-spacing: .1px;
  }

  .record-table tbody td {
    height: .34in;
  }

  .record-table input[type="text"],
  .record-table input[type="number"],
  .record-table input[type="date"],
  .record-table input[type="time"],
  .record-table select {
    height: .31in;
    min-height: .31in;
    border: none;
    padding: 1px 2px;
    font-size: 10.2px;
    background: var(--field);
    width: 100%;
    text-align: center;
    font-weight: 400;
  }

  .record-table input[type="date"] {
    font-size: 9.2px;
    min-width: 0;
  }

  .record-table input[type="time"] {
    font-size: 10.2px;
    min-width: 0;
  }

  .record-table td:nth-child(1) input[type="date"] {
    font-size: 8.8px;
  }

  .record-table .score-select {
    font-size: 10.5px;
    font-weight: 400;
    padding: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
  }

  .record-table .score-select::-ms-expand {
    display: none;
  }

  .record-table .hour-select {
    font-size: 10.1px;
    font-weight: 400;
    padding: 0;
    cursor: pointer;
  }

  /* Remove visible picker/dropdown arrows while keeping the field behavior. */
  input[type="date"],
  input[type="time"],
  select,
  .score-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
  }

  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
  }

  input[type="date"]::-webkit-inner-spin-button,
  input[type="time"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }

  .record-table select::-ms-expand,
  .score-select::-ms-expand,
  .hour-select::-ms-expand {
    display: none;
  }

  .hour-select-control {
    position: relative;
    width: 100%;
    height: .31in;
  }

  .hour-select-value {
    display: none !important;
  }

  .hour-select-button {
    width: 100%;
    height: .31in;
    min-height: .31in;
    border: none;
    border-radius: 0;
    background: var(--field);
    color: #111;
    font: inherit;
    font-size: 10.1px;
    font-weight: 400;
    text-align: center;
    padding: 1px 2px;
    cursor: pointer;
  }

  .hour-select-button:focus {
    outline: 1px solid #555;
    outline-offset: -1px;
  }

  .hour-dropdown-menu {
    position: fixed;
    display: none;
    z-index: 9999;
    min-width: 64px;
    max-height: 1.35in;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #222;
    box-shadow: 0 2px 8px rgba(0,0,0,.24);
  }

  .hour-dropdown-menu button {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #ddd;
    background: #fff;
    color: #111;
    padding: 5px 6px;
    font: 12px "Segoe UI", Arial, Helvetica, sans-serif;
    text-align: center;
    cursor: pointer;
  }

  .hour-dropdown-menu button:hover,
  .hour-dropdown-menu button:focus {
    background: #eaf2ff;
  }


  .picker-field {
    cursor: pointer;
  }

  .picker-field::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
    left: 0;
  }

  .record-table input[type="date"],
  .record-table input[type="time"] {
    position: relative;
  }




  .instructor-initials,
  .license-number,
  .student-initials {
    text-transform: uppercase;
  }


  .sig-field,
  .auto-instructor,
  .auto-license,
  .auto-student,
  .instructor-initials,
  .license-number,
  .student-initials {
    text-transform: uppercase;
  }

  .uppercase-field {
    text-transform: uppercase;
  }

  .top-date-field {
    font-size: 11px;
  }

  .student-field .masked-picker,
  .left-meta .masked-picker {
    height: 22px;
    min-height: 22px;
    border-bottom: 1px solid #777;
  }

  .student-field .masked-picker-input,
  .left-meta .masked-picker-input {
    height: 22px;
    min-height: 22px;
  }

  .student-field .masked-picker-text,
  .left-meta .masked-picker-text {
    font-size: 11px;
  }

  .masked-picker {
    position: relative;
    width: 100%;
    height: .31in;
    min-height: .31in;
    background: var(--field);
    overflow: hidden;
  }

  .masked-picker-input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: .31in;
    opacity: 0;
    cursor: pointer;
  }

  .masked-picker-text {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px 2px;
    color: #111;
    font-size: 9.4px;
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
  }

  .masked-picker-time .masked-picker-text {
    font-size: 10px;
  }

  .totals-row td {
    height: .34in;
    font-weight: 900;
    font-size: 12px;
    background: #fff;
  }

  .totals-row .blue-total {
    background: var(--blue);
  }

  .totals-row input {
    background: transparent !important;
    font-weight: 900;
  }

  .cert-page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 12px;
  }

  .cert-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1.5px solid var(--line);
    padding-bottom: 8px;
  }

  .cert-header img {
    width: 3.2in;
    height: auto;
    object-fit: contain;
  }

  .cert-header-title {
    font-size: 20px;
    font-weight: 900;
    text-align: right;
  }

  .cert-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-self: start;
  }

  .cert-box {
    border: 1.5px solid var(--line);
    min-height: .95in;
    padding: 10px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
  }

  .total-summary {
    margin-top: 14px;
    border: 1.5px solid var(--line);
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    font-size: 13px;
    font-weight: 900;
  }

  .signature-grid {
    display: grid;
    grid-template-columns: 2.3fr .7fr 2.3fr .7fr;
    gap: 12px;
    align-items: end;
    margin-top: 16px;
    font-size: 11.5px;
    font-weight: 900;
  }

  .signature-line {
    min-height: .5in;
    border-bottom: 1.5px solid var(--line);
  }

  .signature-line input {
    height: .46in;
    font-size: 23px;
    font-family: "Segoe Script", "Brush Script MT", "Lucida Handwriting", cursive;
    font-weight: 400;
    text-align: left;
    padding-left: 8px;
  }


  .date-signature .masked-picker {
    height: .46in;
    min-height: .46in;
    border-bottom: none;
    background: var(--field);
  }

  .date-signature .masked-picker-input {
    height: .46in;
    min-height: .46in;
  }

  .date-signature .masked-picker-text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-align: center;
  }

  .date-signature input {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-align: center;
    padding-left: 0;
  }

  .help-strip {
    margin: 8px 0 0;
    padding: 6px 8px;
    border: 1px solid #bbb;
    background: #fbfbfb;
    font-size: 11.5px;
    line-height: 1.32;
  }

  .abbr-key {
    margin-top: 5px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px 10px;
    font-size: 10.5px;
  }

  .abbr-key div {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .abbr-key b {
    font-weight: 700;
  }

  .screen-instructions {
    display: block;
    margin-bottom: 4px;
  }


  input[data-save="permit"] {
    font-weight: 400 !important;
  }

  .run-hours-note {
    margin: 4px 0 5px;
    font-size: 10.8px;
    line-height: 1.25;
    font-weight: 700;
  }


  /* Left-justify filled text outside of the training table. */
  .page input[type="text"],
  .page input[type="number"],
  .page input[type="date"],
  .page input[type="time"],
  .page input[type="tel"],
  .page textarea {
    text-align: left;
  }

  .page .masked-picker-text {
    justify-content: flex-start;
    text-align: left;
    padding-left: 4px;
  }

  .date-signature input {
    text-align: left;
  }

  /* Keep the training table centered. */
  .record-table input[type="text"],
  .record-table input[type="number"],
  .record-table input[type="date"],
  .record-table input[type="time"],
  .record-table select,
  .record-table .masked-picker-text,
  .record-table .hour-select-button,
  .record-table .score-select {
    text-align: center;
  }

  /* Score cells must read BLACK and CENTERED on iPad. iOS Safari paints a native
     <select> value in its blue system tint and left-aligns it, ignoring a plain
     text-align, so force the fill color and last-line alignment explicitly. */
  .record-table .score-select,
  .record-table .score-select option {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    text-align: center !important;
    text-align-last: center !important;
    -moz-text-align-last: center !important;
  }

  .record-table .masked-picker-text {
    justify-content: center;
    padding-left: 2px;
  }


  /* Certification summary totals and report year stay centered. */
  .total-summary input {
    text-align: center !important;
  }


  .editor-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid #666;
    border-radius: 4px;
    background: #111;
    color: #fff;
    font-weight: 700;
  }

  .editor-status strong {
    color: #fff;
  }

  .editor-change-btn {
    padding: 5px 8px !important;
  }

  .editor-gate {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.74);
    padding: 20px;
  }

  .editor-gate.active {
    display: flex;
  }

  .editor-card {
    width: min(430px, 94vw);
    background: #fff;
    color: #111;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.38);
    padding: 22px;
    font-size: 15px;
  }

  .editor-card h2 {
    margin: 0 0 8px;
    font-size: 22px;
  }

  .editor-card p {
    margin: 0 0 14px;
    line-height: 1.35;
  }

  .editor-card select {
    width: 100%;
    padding: 9px;
    font-size: 15px;
    margin-bottom: 14px;
  }

  .editor-card button {
    width: 100%;
    padding: 10px;
    border: 1px solid #222;
    border-radius: 5px;
    background: #1f1f1f;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
  }

  .draft-summary {
    display: grid;
    gap: 8px;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid #ccc;
    background: #f7f7f7;
    border-radius: 6px;
  }

  .draft-summary div {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px;
  }

  .draft-summary span {
    font-weight: 700;
    color: #444;
  }

  .editor-card .draft-secondary {
    margin-top: 8px;
    background: #fff;
    color: #111;
  }

  .editor-card .draft-danger {
    margin-top: 8px;
    background: #7a1f1f;
    border-color: #7a1f1f;
  }

  .editor-card button:disabled {
    opacity: .55;
    cursor: not-allowed;
  }

  .audit-page {
    max-width: var(--paper-w);
    width: var(--paper-w);
    min-height: auto;
  }

  .audit-page h2 {
    margin: 0 0 8px;
    font-size: 20px;
  }

  .audit-page p {
    margin: 0 0 10px;
    font-size: 12px;
  }

  .audit-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
  }

  .audit-log-table th,
  .audit-log-table td {
    border: 1px solid #bbb;
    padding: 5px;
    text-align: left;
    vertical-align: top;
  }

  .audit-log-table th {
    background: #eee;
    font-weight: 900;
  }


  .top-header.top-locked input,
  .top-header.top-locked textarea,
  .top-header.top-locked select,
  .top-header.top-locked .masked-picker-text {
    background: #eeeeee !important;
    color: #333 !important;
    cursor: not-allowed !important;
  }

  .top-header.top-locked .masked-picker {
    pointer-events: none;
  }

  .toolbar .locked-control,
  .toolbar select.locked-control {
    opacity: .68;
    cursor: not-allowed !important;
  }


  .record-table .hour-select-value.calculated-hour + .hour-select-button {
    background: #eef6ff;
    color: #111;
    cursor: not-allowed;
  }

  .row-lock-button {
    width: 100%;
    min-height: .31in;
    border: 1px solid #333;
    border-radius: 3px;
    background: #fff;
    color: #111;
    font-size: 9.5px;
    font-weight: 700;
    cursor: pointer;
  }

  .row-lock-button.locked {
    background: #333;
    color: #fff;
    cursor: pointer;
  }

  .record-table tr.row-locked td {
    background: #f0f0f0;
  }

  .record-table tr.row-locked input,
  .record-table tr.row-locked select,
  .record-table tr.row-locked .hour-select-button,
  .record-table tr.row-locked .masked-picker-text {
    background: #e8e8e8 !important;
    color: #444 !important;
  }

  .lock-heading,
  .lock-cell {
    background: #fff;
  }

  @page {
    size: letter landscape;
    margin: .2in;
  }

  @media screen and (max-width: 1100px) {
  
  /* Keep the black toolbar/header fitted to the visible mobile screen,
     without changing the wide training table layout below it. */
  .toolbar {
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  @media screen and (max-width: 700px) {
    .toolbar {
      justify-content: flex-start;
      gap: 6px;
      padding: 8px;
    }

    .toolbar label,
    .editor-status {
      flex: 0 0 auto;
    }

    .toolbar button,
    .toolbar select {
      flex: 0 0 auto;
      white-space: nowrap;
    }
  }

  .page {
      margin-left: 8px;
      margin-right: 8px;
    }
  }


  .mobile-scroll-note {
    display: none;
  }

  @media screen and (max-width: 900px) {
    html,
    body {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      -webkit-text-size-adjust: 100%;
    }

    body {
      background: #dcdcdc;
    }

    .toolbar {
      position: sticky;
      top: 0;
      left: 0;
      width: 100vw;
      max-width: 100vw;
      margin-left: 0;
      margin-right: 0;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      gap: 7px;
      padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left));
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
    }

    .toolbar label,
    .toolbar button,
    .toolbar select,
    .editor-status {
      flex: 0 0 auto;
      white-space: nowrap;
      scroll-snap-align: start;
    }

    .toolbar button,
    .toolbar select,
    .editor-status {
      min-height: 42px;
      font-size: 14px;
    }

    .toolbar button {
      padding: 8px 10px;
    }

    .editor-status {
      padding: 8px 10px;
    }

    .mobile-scroll-note {
      display: block;
      position: sticky;
      top: 58px;
      z-index: 20;
      width: 100vw;
      max-width: 100vw;
      padding: 7px 10px;
      background: #fff7d6;
      border-bottom: 1px solid #d0b55a;
      color: #111;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.25;
    }

    #trainingPages {
      width: max-content;
      min-width: var(--paper-w);
    }

    .page {
      margin: 8px 0 12px 8px;
      box-shadow: 0 0 6px rgba(0,0,0,.20);
    }

    .cert-page,
    .audit-page {
      margin-left: 8px;
    }

    .editor-gate {
      align-items: flex-start;
      padding: max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 14px max(14px, env(safe-area-inset-left));
      overflow-y: auto;
    }

    .editor-card {
      width: min(460px, 100%);
      margin-top: 12px;
      border-radius: 8px;
    }

    .editor-card select,
    .editor-card button {
      min-height: 44px;
      font-size: 16px;
    }
  }

  @media screen and (max-width: 480px) {
    .toolbar {
      font-size: 12px;
      gap: 6px;
    }

    .toolbar button,
    .toolbar select,
    .editor-status {
      min-height: 40px;
      font-size: 13px;
    }

    .mobile-scroll-note {
      top: 56px;
      font-size: 12px;
    }

    .page {
      margin-left: 6px;
    }

    .cert-page,
    .audit-page {
      margin-left: 6px;
    }
  }


  /* Mobile polish: keep the record page wide, but make the black toolbar work like a compact control panel. */
  @media screen and (max-width: 900px) {
    body {
      background: #d8d8d8;
    }

    .toolbar {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: 100vw;
      max-width: 100vw;
      margin: 0;
      padding: 10px max(10px, env(safe-area-inset-right)) 10px max(10px, env(safe-area-inset-left));
      gap: 8px;
      background: #151515;
      border-bottom: 1px solid #000;
      box-shadow: 0 3px 12px rgba(0,0,0,.30);
      overflow: visible;
      flex-wrap: initial;
      justify-content: initial;
      align-items: stretch;
    }

    .toolbar label,
    .toolbar button,
    .toolbar select,
    .editor-status {
      min-width: 0;
      white-space: normal;
    }

    .editor-status {
      grid-column: 1 / -1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 42px;
      padding: 9px 10px;
      border-radius: 9px;
      border-color: #4b4b4b;
      background: #262626;
      font-size: 13px;
    }

    .editor-status strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 62vw;
    }

    .account-button {
      grid-column: 1 / -1;
      background: #2f2f2f !important;
      color: #fff !important;
      border-color: #555 !important;
    }

    .toolbar-field {
      display: grid !important;
      grid-template-columns: 1fr;
      gap: 4px !important;
      align-items: stretch !important;
      padding: 8px;
      border: 1px solid #444;
      border-radius: 9px;
      background: #242424;
      color: #fff;
      font-size: 12px;
    }

    .toolbar-field select {
      width: 100%;
      min-height: 40px;
      padding: 7px 8px;
      border-radius: 7px;
      font-size: 14px;
    }

    .toolbar-check {
      display: flex !important;
      justify-content: center;
      align-items: center !important;
      gap: 7px !important;
      min-height: 40px;
      padding: 8px;
      border: 1px solid #3f3f3f;
      border-radius: 9px;
      background: #202020;
      color: #fff;
      font-size: 12px;
      text-align: center;
    }

    .toolbar-check input {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
    }

    .toolbar-button {
      min-height: 42px;
      padding: 9px 8px !important;
      border-radius: 9px !important;
      font-size: 14px !important;
      line-height: 1.1;
      white-space: nowrap !important;
    }

    .primary-button {
      background: #ffffff !important;
      color: #000 !important;
      border-color: #fff !important;
      font-weight: 900 !important;
    }

    .secondary-button {
      grid-column: 1 / -1;
    }

    .clear-button {
      background: #e9e9e9 !important;
      color: #111 !important;
      border-color: #cfcfcf !important;
      font-size: 13px !important;
    }

    .mobile-scroll-note {
      position: static;
      top: auto;
      z-index: 1;
      width: 100vw;
      max-width: 100vw;
      margin: 0;
      padding: 8px 10px;
      background: #fff7d6;
      border-top: 1px solid #ead57a;
      border-bottom: 1px solid #d0b55a;
      color: #111;
      text-align: center;
      font-size: 12.5px;
      font-weight: 800;
    }

    #trainingPages,
    .cert-page,
    .audit-page {
      margin-top: 8px;
    }
  }

  @media screen and (max-width: 480px) {
    .toolbar {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
      padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left));
    }

    .editor-status {
      font-size: 12.5px;
      min-height: 40px;
    }

    .toolbar-field,
    .toolbar-check {
      border-radius: 8px;
      padding: 7px;
    }

    .toolbar-field select {
      font-size: 13px;
      min-height: 38px;
    }

    .toolbar-button {
      min-height: 40px;
      font-size: 13px !important;
      border-radius: 8px !important;
    }

    .mobile-scroll-note {
      font-size: 12px;
      padding: 7px 8px;
    }
  }

  @media print {
    body {
      background: #fff;
    }

    .toolbar,
    .screen-instructions,
    .editor-gate,
    .audit-page {
      display: none !important;
    }

    .help-strip {
      display: block !important;
      background: #fff !important;
      border-color: #444 !important;
    }

  
  /* Keep the black toolbar/header fitted to the visible mobile screen,
     without changing the wide training table layout below it. */
  .toolbar {
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  @media screen and (max-width: 700px) {
    .toolbar {
      justify-content: flex-start;
      gap: 6px;
      padding: 8px;
    }

    .toolbar label,
    .editor-status {
      flex: 0 0 auto;
    }

    .toolbar button,
    .toolbar select {
      flex: 0 0 auto;
      white-space: nowrap;
    }
  }

  .page {
      margin: 0;
      padding: 0;
      width: auto;
      min-height: 8.1in;
      box-shadow: none;
      overflow: hidden;
    }

    input,
    textarea,
    select {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
      background: #fff !important;
    }

    .record-table input,
    .record-table select,
    .totals-row .blue-total,
    .blue-total,
    .total-summary input {
      background: #fff !important;
    }

    .score-select {
      appearance: none !important;
      -webkit-appearance: none !important;
      -moz-appearance: none !important;
      background-image: none !important;
    }

    .score-select::-ms-expand,
    .hour-select::-ms-expand,
    .record-table select::-ms-expand {
      display: none !important;
    }

    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator,
    .hour-dropdown-menu {
      display: none !important;
    }

    .hour-select-button {
      background: #fff !important;
    }

    input::placeholder {
      color: transparent;
    }
  }

  @media print {
    .cache-notice {
      display: none !important;
    }
  }


  @media print {
    .lock-col,
    .lock-heading,
    .lock-cell,
    .row-action-col,
    .untested-heading,
    .untested-cell {
      display: none !important;
    }
  }


  .editor-card.wide-card {
    max-width: 780px;
    width: min(780px, calc(100vw - 24px));
  }

  .panel-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 8px;
    margin: 12px 0 14px;
  }

  .panel-actions button,
  .recent-card button {
    width: auto;
    border: 1px solid #333;
    background: #fff;
    color: #111;
    border-radius: 4px;
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    line-height: 1.2;
  }

  .panel-actions button:hover,
  .recent-card button:hover {
    background: #f0f0f0;
  }

  .panel-actions button.admin-primary {
    background: #003a70;
    border-color: #003a70;
    color: #fff;
  }

  .panel-actions button.admin-danger {
    background: #7a1f1f;
    border-color: #7a1f1f;
    color: #fff;
  }

  .panel-actions button.admin-close {
    background: #1f1f1f;
    border-color: #1f1f1f;
    color: #fff;
  }

  .recent-list,
  .admin-list {
    max-height: 46vh;
    overflow: auto;
    border: 1px solid #ccc;
    background: #fff;
    color: #111;
    margin-top: 10px;
    padding: 8px;
    text-align: left;
  }

  .recent-card {
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 8px;
    background: #f9f9f9;
    font-size: 13px;
  }

  .recent-card strong {
    display: block;
    margin-bottom: 4px;
  }

  .recent-meta {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 3px 8px;
  }

  .admin-list ul {
    margin: 6px 0 0 18px;
    padding: 0;
  }

  .admin-only[hidden] {
    display: none !important;
  }

  .untested-cell,
  .untested-heading {
    background: #fff;
  }

  .row-untested-button {
    width: 100%;
    min-height: .31in;
    border: 1px solid #333;
    border-radius: 3px;
    background: #fff;
    color: #111;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
  }

  .row-untested-button:disabled {
    background: #e8e8e8;
    color: #777;
    cursor: not-allowed;
  }

  .record-table tr.incomplete-row td {
    background: #fff8c7;
  }

  .record-table tr.incomplete-row td:first-child {
    box-shadow: inset 4px 0 0 #9a6a00;
  }

  .record-table tr.incomplete-row.row-locked td:not(.lock-cell):not(.untested-cell) {
    background: #efe6bd;
  }

  @media print {
    .row-action-col,
    .untested-heading,
    .untested-cell,
    .row-action-rail,
    #recentRecordsPanel {
      display: none !important;
    }
  }


  .table-action-layout {
    display: flex;
    align-items: flex-start;
    gap: .04in;
    width: 100%;
    overflow: visible;
  }

  .table-action-layout .record-table {
    flex: 0 0 calc(100% - 1.12in);
    width: calc(100% - 1.12in);
  }

  .row-action-rail {
    flex: 0 0 1.08in;
    width: 1.08in;
    margin-top: 1.42in;
    display: grid;
    grid-template-rows: repeat(8, .34in);
    gap: 0;
  }

  .row-action-buttons {
    height: .34in;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    align-items: center;
  }

  .row-action-buttons .row-lock-button,
  .row-action-buttons .row-untested-button {
    width: 100%;
    height: .31in;
    min-height: .31in;
    border: 1px solid #333;
    border-radius: 3px;
    background: #fff;
    color: #111;
    font-size: 8.1px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    line-height: 1;
  }

  .row-action-buttons .row-lock-button.locked {
    background: #333;
    color: #fff;
  }

  .row-action-buttons .row-untested-button:disabled {
    background: #e8e8e8;
    color: #777;
    cursor: not-allowed;
  }

  .row-action-buttons.row-locked {
    opacity: .95;
  }


  .editor-card .panel-actions button {
    color: #111;
  }

  .editor-card .panel-actions button.admin-primary,
  .editor-card .panel-actions button.admin-danger,
  .editor-card .panel-actions button.admin-close {
    color: #fff;
  }


  @media screen {
    .page.training-page {
      width: calc(var(--paper-w) + 1.25in);
      overflow: visible;
    }

    .page.training-page .top-header,
    .page.training-page .page-caption,
    .page.training-page .help-strip {
      width: calc(var(--paper-w) - .44in);
    }

    .page.training-page .table-action-layout {
      width: calc(var(--paper-w) + .82in);
    }

    .page.training-page .table-action-layout .record-table {
      flex: 0 0 calc(var(--paper-w) - .44in);
      width: calc(var(--paper-w) - .44in);
    }

    .page.training-page .row-action-rail {
      flex: 0 0 1.08in;
      width: 1.08in;
    }
  }

  @media print {
    .page.training-page {
      width: var(--paper-w) !important;
      overflow: hidden !important;
    }

    .page.training-page .top-header,
    .page.training-page .page-caption,
    .page.training-page .help-strip,
    .page.training-page .table-action-layout,
    .page.training-page .table-action-layout .record-table {
      width: auto !important;
    }
  }


  @media print {
    .page.training-page .table-action-layout {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      overflow: hidden !important;
    }

    .page.training-page .table-action-layout .record-table {
      display: table !important;
      flex: none !important;
      width: 100% !important;
      max-width: 100% !important;
      table-layout: fixed !important;
    }

    .page.training-page .row-action-rail,
    .row-action-rail {
      display: none !important;
    }
  }


  .recent-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .recent-card button.recent-load-button {
    background: #003a70;
    border-color: #003a70;
    color: #fff;
  }

  .recent-card button.recent-load-button:disabled {
    background: #777;
    border-color: #777;
    color: #fff;
    cursor: not-allowed;
  }

  .recent-load-note {
    margin-top: 6px;
    font-size: 12px;
    color: #555;
  }


  /* Final print override for iPad/tablet: one training page + one certification page should print as landscape pages. */
  @page {
    size: 11in 8.5in;
    margin: 0.12in;
  }

  @media print {
    html,
    body {
      width: 11in !important;
      max-width: 11in !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: visible !important;
      background: #fff !important;
    }

    #trainingPages {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      overflow: visible !important;
    }

    .page {
      width: 10.76in !important;
      max-width: 10.76in !important;
      min-height: 8.26in !important;
      height: auto !important;
      margin: 0 auto !important;
      padding: 0.10in !important;
      box-shadow: none !important;
      overflow: hidden !important;
      break-after: page !important;
      page-break-after: always !important;
      page-break-inside: avoid !important;
      box-sizing: border-box !important;
    }

    .cert-page {
      min-height: 8.26in !important;
    }

    .page.training-page {
      width: 10.76in !important;
      max-width: 10.76in !important;
      overflow: hidden !important;
    }

    .page.training-page .top-header,
    .page.training-page .page-caption,
    .page.training-page .help-strip,
    .page.training-page .table-action-layout,
    .page.training-page .table-action-layout .record-table,
    table.record-table {
      width: 100% !important;
      max-width: 100% !important;
    }

    .page.training-page .table-action-layout {
      display: block !important;
    }

    .record-table {
      table-layout: fixed !important;
    }

    .row-action-rail,
    .mobile-scroll-note,
    .cache-notice,
    .toolbar,
    .editor-gate,
    .audit-page {
      display: none !important;
    }

    .help-strip {
      margin-top: 4px !important;
      padding: 4px !important;
      font-size: 9px !important;
      line-height: 1.1 !important;
    }

    .page-caption {
      margin: 5px 0 3px !important;
    }

    .print-page-break:last-of-type {
      page-break-after: auto !important;
      break-after: auto !important;
    }
  }


  /* v64 print cleanup: reduce page height pressure from tablet browser footers/headers. */
  @page {
    size: landscape;
    margin: 0.10in;
  }

  @media print {
    html,
    body {
      width: 11in !important;
      height: auto !important;
      max-width: 11in !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: visible !important;
      background: #fff !important;
    }

    #trainingPages {
      display: block !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: visible !important;
    }

    .page {
      width: 10.72in !important;
      max-width: 10.72in !important;
      min-height: 0 !important;
      height: auto !important;
      margin: 0 auto !important;
      padding: 0.06in !important;
      box-shadow: none !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
      page-break-inside: avoid !important;
      break-inside: avoid-page !important;
    }

    .training-page {
      page-break-after: always !important;
      break-after: page !important;
    }

    .cert-page {
      display: block !important;
      page-break-after: auto !important;
      break-after: auto !important;
      min-height: 0 !important;
      height: auto !important;
    }

    .cert-header {
      padding-bottom: 4px !important;
      margin-bottom: 8px !important;
    }

    .cert-header img {
      width: 2.55in !important;
    }

    .cert-header-title {
      font-size: 18px !important;
    }

    .cert-grid {
      gap: 8px !important;
      margin-top: 0 !important;
    }

    .cert-box {
      min-height: 0.70in !important;
      padding: 7px !important;
      font-size: 12px !important;
      line-height: 1.18 !important;
    }

    .total-summary {
      margin-top: 9px !important;
      padding: 6px !important;
      gap: 8px !important;
      font-size: 12px !important;
    }

    .total-summary label {
      min-height: 0.42in !important;
    }

    .signature-grid {
      margin-top: 0.38in !important;
      gap: 10px !important;
      font-size: 10.8px !important;
      align-items: end !important;
      page-break-inside: avoid !important;
      break-inside: avoid-page !important;
    }

    .signature-line {
      min-height: 0.34in !important;
    }

    .signature-line input,
    .date-signature .masked-picker,
    .date-signature .masked-picker-input {
      height: 0.32in !important;
      min-height: 0.32in !important;
    }

    .date-signature .masked-picker-text,
    .date-signature input {
      font-size: 11px !important;
    }

    .page.training-page {
      width: 10.72in !important;
      max-width: 10.72in !important;
      overflow: hidden !important;
    }

    .page.training-page .top-header,
    .page.training-page .page-caption,
    .page.training-page .help-strip,
    .page.training-page .table-action-layout,
    .page.training-page .table-action-layout .record-table,
    table.record-table {
      width: 100% !important;
      max-width: 100% !important;
    }

    .page.training-page .table-action-layout {
      display: block !important;
    }

    .row-action-rail,
    .mobile-scroll-note,
    .cache-notice,
    .toolbar,
    .editor-gate,
    .audit-page {
      display: none !important;
    }

    .help-strip {
      margin-top: 3px !important;
      padding: 3px 4px !important;
      font-size: 8.5px !important;
      line-height: 1.05 !important;
    }

    .abbr-key {
      margin-top: 3px !important;
      gap: 1px 7px !important;
      font-size: 8.2px !important;
      line-height: 1.05 !important;
    }

    .run-hours-note {
      margin: 2px 0 3px !important;
      font-size: 8.3px !important;
      line-height: 1.05 !important;
    }

    .page-caption {
      margin: 4px 0 2px !important;
      font-size: 11px !important;
    }
  }


  .pdf-capture-root {
    position: fixed;
    left: -20000px;
    top: 0;
    width: 1056px;
    background: #fff;
    color: #111;
    z-index: -1;
    pointer-events: none;
  }

  .pdf-capture-root .page {
    width: 1056px !important;
    max-width: 1056px !important;
    min-height: 816px !important;
    height: 816px !important;
    margin: 0 !important;
    padding: 10px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #fff !important;
  }

  .pdf-capture-root .training-page .top-header,
  .pdf-capture-root .training-page .page-caption,
  .pdf-capture-root .training-page .help-strip,
  .pdf-capture-root .training-page .table-action-layout,
  .pdf-capture-root .training-page .record-table {
    width: 100% !important;
    max-width: 100% !important;
  }

  .pdf-capture-root .training-page .table-action-layout {
    display: block !important;
  }

  .pdf-capture-root .row-action-rail,
  .pdf-capture-root .mobile-scroll-note,
  .pdf-capture-root .cache-notice,
  .pdf-capture-root .toolbar,
  .pdf-capture-root .audit-page {
    display: none !important;
  }

  .pdf-capture-root .cert-page {
    display: block !important;
  }


  /* v67: keep row-lock shading on screen, but remove it from generated PDFs and printed output. */
  .pdf-capture-root .record-table tr.row-locked td,
  .pdf-capture-root .record-table tr.row-locked.incomplete-row td,
  .pdf-capture-root .record-table tr.incomplete-row.row-locked td,
  .pdf-capture-root .record-table tr.row-locked input,
  .pdf-capture-root .record-table tr.row-locked select,
  .pdf-capture-root .record-table tr.row-locked .hour-select-button,
  .pdf-capture-root .record-table tr.row-locked .masked-picker-text {
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
  }

  .pdf-capture-root .record-table tr.row-locked td:first-child,
  .pdf-capture-root .record-table tr.incomplete-row td:first-child {
    box-shadow: none !important;
  }

  @media print {
    .record-table tr.row-locked td,
    .record-table tr.row-locked.incomplete-row td,
    .record-table tr.incomplete-row.row-locked td,
    .record-table tr.row-locked input,
    .record-table tr.row-locked select,
    .record-table tr.row-locked .hour-select-button,
    .record-table tr.row-locked .masked-picker-text {
      background: #fff !important;
      color: #111 !important;
      box-shadow: none !important;
    }

    .record-table tr.row-locked td:first-child,
    .record-table tr.incomplete-row td:first-child {
      box-shadow: none !important;
    }
  }


  /* Final-PDF screenshot wrapper. Each page is serialized into an SVG
     <foreignObject> inside a .pdf-page-export div, so the print geometry is
     pinned here (independent of the responsive screen media queries) and score
     dropdowns become .pdf-static-field spans during capture. */
  .pdf-page-export {
    width: 1056px;
    background: #fff;
    color: #111;
  }

  .pdf-page-export .page,
  .pdf-page-export .page.training-page,
  .pdf-page-export .page.cert-page {
    width: 1056px !important;
    max-width: 1056px !important;
    min-height: 816px !important;
    height: 816px !important;
    margin: 0 !important;
    padding: 10px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #fff !important;
  }

  .pdf-page-export .training-page .top-header,
  .pdf-page-export .training-page .page-caption,
  .pdf-page-export .training-page .help-strip,
  .pdf-page-export .training-page .table-action-layout,
  .pdf-page-export .training-page .table-action-layout .record-table,
  .pdf-page-export table.record-table {
    width: 100% !important;
    max-width: 100% !important;
  }

  .pdf-page-export .training-page .table-action-layout {
    display: block !important;
  }

  .pdf-page-export .record-table {
    table-layout: fixed !important;
  }

  .pdf-page-export .row-action-rail,
  .pdf-page-export .mobile-scroll-note,
  .pdf-page-export .cache-notice,
  .pdf-page-export .toolbar,
  .pdf-page-export .audit-page {
    display: none !important;
  }

  .pdf-page-export .cert-page {
    display: block !important;
  }

  .pdf-page-export .record-table tr.row-locked td,
  .pdf-page-export .record-table tr.row-locked.incomplete-row td,
  .pdf-page-export .record-table tr.incomplete-row.row-locked td,
  .pdf-page-export .record-table tr.row-locked input,
  .pdf-page-export .record-table tr.row-locked select,
  .pdf-page-export .record-table tr.row-locked .hour-select-button,
  .pdf-page-export .record-table tr.row-locked .masked-picker-text {
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
  }

  .pdf-page-export .record-table tr.row-locked td:first-child,
  .pdf-page-export .record-table tr.incomplete-row td:first-child {
    box-shadow: none !important;
  }

  /* Static stand-in for the score dropdowns so the chosen value stays centered
     and visible in the captured image. */
  .pdf-static-field {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: .31in !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    color: #111 !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .pdf-page-export .record-table td {
    text-align: center !important;
    vertical-align: middle !important;
  }