/* Klasselista shared design foundation.
   Loaded after legacy styles. Opt in by wrapping a page in .kl-page.
   Override --kl-* variables on a page wrapper when a variation is needed.

   Structure:
   .kl-page
     header.kl-page-header > .kl-eyebrow + h2.kl-title + .kl-intro
     .kl-panel
       section.kl-section > h3.kl-section-title (optional .kl-step)
         .kl-grid > fields (label + input/select.kl-control)
         .kl-field-group, .kl-summary, .kl-help, .kl-hint, .kl-note
         .kl-actions > button.kl-button-primary + secondary link
       .kl-results > h3.kl-section-title + ul
     .kl-footer

   .kl-control styles text inputs, selects and textareas only when explicitly
   applied. Do not apply it to checkboxes, radios, hidden inputs or buttons.
   Use .kl-control-data for pasted data that benefits from monospace text.
   MVC validation summaries are styled within .kl-page automatically.
   Keep page-specific IDs, event handlers and business logic in the view.
   The two-column grid stacks at 640px. Focus styles support keyboard users.
*/

.kl-page {
    --kl-text: #20334b;
    --kl-navy: #142f50;
    --kl-primary: #245b91;
    --kl-primary-hover: #194471;
    --kl-muted: #56677b;
    --kl-focus: #387ab9;
    --kl-surface: #fff;
    --kl-input-border: #bdcad8;
    --kl-border: #dce4ed;
}

.kl-page { max-width: 1080px; margin: 28px auto; color: var(--kl-text); }
.kl-page * { box-sizing: border-box; }
.kl-page .kl-page-header { padding: 30px 32px; background: var(--kl-navy); border-radius: 16px 16px 0 0; color: var(--kl-surface); }
.kl-page .kl-eyebrow { color: #b5cde8; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; }
.kl-page .kl-title { color: var(--kl-surface); font-size: 28px; font-weight: 600; margin: 0 0 12px; line-height: 1.25; }
.kl-page .kl-intro { color: #d7e3f1; margin: 0; max-width: 680px; line-height: 1.65; }
.kl-page .kl-panel { background: var(--kl-surface); border: 1px solid var(--kl-border); border-top: 0; border-radius: 0 0 16px 16px; padding: 32px; box-shadow: 0 8px 24px rgba(20,47,80,.06); }
.kl-page .kl-section + .kl-section { margin-top: 28px; padding-top: 28px; border-top: 1px solid #e6ecf2; }
.kl-page .kl-section-title { font-size: 18px; font-weight: 600; margin: 0 0 20px; color: var(--kl-text); }
.kl-page .kl-step { display: inline-block; width: 28px; height: 28px; line-height: 28px; text-align: center; background: #eaf1f9; color: #244f7b; border-radius: 50%; font-size: 13px; margin-right: 9px; }
.kl-page .kl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.kl-page label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 8px; }
.kl-page .kl-control { width: 100%; max-width: none; border: 1px solid var(--kl-input-border); border-radius: 8px; background: var(--kl-surface); color: var(--kl-text); padding: 11px 12px; font-size: 15px; }
.kl-page select.kl-control { height: 46px; }
.kl-page .kl-control:focus { outline: 2px solid var(--kl-focus); outline-offset: 2px; border-color: var(--kl-focus); }
.kl-page .kl-field-group { margin-top: 18px; }
.kl-page .kl-summary { background: #f3f6fa; border-radius: 8px; padding: 14px 16px; margin-top: 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.kl-page .kl-summary strong { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.kl-page .kl-help { color: var(--kl-muted); font-size: 14px; line-height: 1.65; margin: 0 0 14px; }
.kl-page .kl-hint { display: inline-block; background: #edf3f9; color: #385572; padding: 8px 12px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; word-spacing: 4px; }
.kl-page textarea.kl-control { min-height: 240px; resize: vertical; line-height: 1.7; font-size: 14px; }
.kl-page textarea.kl-control::placeholder { color: #718096; }
.kl-page .kl-note { color: var(--kl-muted); font-size: 13px; margin: 12px 0 0; line-height: 1.6; }
.kl-page .kl-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.kl-page .kl-button-primary { background: var(--kl-primary); color: var(--kl-surface); border: 0; border-radius: 8px; padding: 13px 24px; font-size: 15px; font-weight: 600; cursor: pointer; }
.kl-page .kl-button-primary:hover { background: var(--kl-primary-hover); }
.kl-page a { color: var(--kl-primary); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.kl-page a:focus, .kl-page button:focus { outline: 2px solid var(--kl-focus); outline-offset: 3px; }
.kl-page .validation-summary-errors { background: #fff3f2; color: #9c3028; border: 1px solid #efc5c1; padding: 16px; border-radius: 8px; margin-bottom: 24px; }
.kl-page .validation-summary-valid { display: none; }
.kl-page .validation-summary-errors ul { margin: 0; padding-left: 20px; }
.kl-page .kl-results { margin-top: 28px; border: 1px solid #c9dfd5; border-radius: 12px; padding: 24px; background: #f4faf7; }
.kl-page .kl-results .kl-section-title { color: #285d47; margin-bottom: 12px; }
.kl-page .kl-results ul { list-style: none; padding: 0; margin: 0; }
.kl-page .kl-results li { padding: 12px 0; border-top: 1px solid #dcebe3; line-height: 1.6; overflow-wrap: anywhere; font-size: 14px; }
.kl-page .kl-footer { margin-top: 20px; }
@media (max-width: 640px) {
    .kl-page { margin: 16px auto; }
    .kl-page .kl-page-header, .kl-page .kl-panel { padding: 22px 18px; }
    .kl-page .kl-title { font-size: 24px; }
    .kl-page .kl-grid { grid-template-columns: 1fr; }
    .kl-page .kl-button-primary { width: 100%; }
}
.kl-page .kl-control-data { font-family: Consolas, monospace; }