/* Shared presentation rules. Keep document/print geometry in page styles. */
@import url("https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap");

.wk-mobile-navbar, .wk-mobile-navbar-space { display: none; }

@media screen and (max-width: 768px) {
  html body #wkMobileNavbar,
  html body #wkMobileNavbar * {
    font-family: "Patrick Hand", "Comic Sans MS", "Plus Jakarta Sans", cursive !important;
  }
  html body .wk-mobile-navbar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    flex: 0 0 auto;
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    color: #e6f3f3;
    font-family: "Patrick Hand", "Comic Sans MS", "Plus Jakarta Sans", cursive;
    background: #2f4f4f;
    border: 0;
    border-bottom: 1px solid #243d3d;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
  }
  html body .wk-mobile-navbar-inner {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    width: 100%;
    max-width: 1200px;
    min-height: 56px;
    margin: 0 auto;
    padding: 8px 16px;
  }
  html body .wk-mobile-navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    text-decoration: none;
    color: #fff;
    border: 0;
    background: transparent;
  }
  html body .wk-mobile-navbar-logo {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 8px;
    background: #0ea5e9;
    animation: wk-navbar-float 3s ease-in-out infinite;
  }
  html body .wk-mobile-navbar-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
  html body .wk-mobile-navbar-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 32px; white-space: nowrap; }
  html body .wk-mobile-navbar-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
  html body .wk-mobile-navbar-links a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #e6f3f3;
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
  }
  html body .wk-mobile-navbar-links a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
  html body .wk-mobile-navbar-space {
    display: block;
    width: 100%;
    height: var(--wk-mobile-navbar-height, 61px);
    min-height: var(--wk-mobile-navbar-height, 61px);
    flex: 0 0 auto;
    grid-column: 1 / -1;
  }
}
@media screen and (max-width: 360px) {
  html body .wk-mobile-navbar-brand { gap: 8px; }
  html body .wk-mobile-navbar-logo { flex-basis: 32px; width: 32px; height: 32px; }
}
@keyframes wk-navbar-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { html body .wk-mobile-navbar-logo { animation: none; } }
@media print { .wk-mobile-navbar, .wk-mobile-navbar-space { display: none !important; } }

@media screen {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .wk-table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .wk-paper-preview { width:100%; max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; }
  .wk-table-scroll:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }
  .wk-table-scroll[data-wk-scrollable="true"] { border-inline-end: 2px solid #94a3b8; }
  :where(.table-wrap, .table-wrapper, .table-responsive, .overflow-x-auto) {
    min-width: 0;
    max-width: 100%;
    overscroll-behavior-x: contain;
  }
  :where(button, a, input, select, textarea, summary):focus-visible {
    outline: 2px solid #0284c7;
    outline-offset: 3px;
  }
}

@media screen and (max-width: 768px) {
  body { line-height: 1.5; }
  html body :where(.flex, .grid, .container-wide, .card, .panel, .page, .wrap, .shell, .admin-main, .lesson-page, .rich-lesson) {
    min-width: 0;
  }
  html body :where(.flex, .grid, .actions, .form-grid, .filter-grid) > :where(div, section, article, form, label) {
    min-width: 0;
  }
  html body :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]) {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    font-size: 16px;
    min-height: 44px;
  }
  html body textarea { resize: vertical; }
  /* The landing page has ID-scoped compact controls; keep them readable on phones. */
  html body #beranda .year-panel select {
    font-size: 16px;
    min-height: 44px;
  }
  html body #beranda .year-panel .btn-primary { min-height: 44px; }
  html body label:has(input:is([type="checkbox"], [type="radio"])) { min-height: 44px; padding-block: 8px; }
  html body input:is([type="checkbox"], [type="radio"]) { flex-shrink: 0; width: 20px; height: 20px; }
  /* Feature headers were desktop-only while the bottom bar supplied navigation. */
  html body :where(header, body > nav, .no-print > nav):has(.brand-title).hidden { display: block !important; }
  html body .no-print.hidden:has(> :is(header, nav) .brand-title) { display: block !important; }
  html body :where(body > nav, .no-print > nav).fixed:has(.brand-title) { position: static; }
  html body .cover-nav-offset { padding-top: 24px !important; }
  html body > nav.hidden:has(.logo-anim) { display: block !important; }
  html body > nav:has(.logo-anim) .h-16.flex { height: auto; min-height: 56px; flex-wrap: wrap; gap: 8px; padding-block: 8px; }
  html body > nav:has(.logo-anim) a:has(.logo-anim) { min-width: 0; }
  html body > nav:has(.logo-anim) a:has(.logo-anim) > span { font-size: 18px; overflow-wrap: anywhere; }
  html body :where(header, body > nav, .no-print > nav):has(.brand-title) > :where(div.flex, div:has(> a .floating-logo)) {
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding-block: 8px;
  }
  html body :where(header, body > nav, .no-print > nav):has(.brand-title) :where(a:has(.floating-logo), .brand-link) { min-width: 0; }
  html body :where(header, body > nav, .no-print > nav) .brand-title { font-size: 18px; overflow-wrap: anywhere; }
  html body :where(header, body > nav, .no-print > nav) .floating-logo { flex-shrink: 0; }
  /* Headers without a menu toggle keep their short navigation row visible. */
  html body :where(header, body > nav, .no-print > nav):has(.brand-title):not(:has(.burger-btn, button[aria-controls])) > div > .hidden:has(> a.nav-underline) {
    display: flex !important;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 8px;
  }
  html body :where(header, body > nav, .no-print > nav):has(.brand-title) a.nav-underline { display: inline-flex; align-items: center; min-height: 44px; }
  html body header:has(.brand-title) nav { flex-wrap: wrap; max-width: 100%; }
  html body header:has(.brand-title) nav a { display: inline-flex; align-items: center; min-height: 44px; }
  html body :where(button, .btn, .button, .btn-icon, .burger-btn, .toggle-password, .page-link, .pagination a, .pagination button, summary) {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  html body :where(.btn-icon, .burger-btn, .toggle-password, .page-link, .pagination a, .pagination button) { min-width: 44px; }
  html body .toggle-password { right: .35rem; }
  html body :where(.actions, .card-header, .card-footer, .form-actions, .filter-actions, .toolbar, .pagination, .breadcrumb) {
    flex-wrap: wrap;
    max-width: 100%;
  }
  html body :where(.card-title, .page-title, .hero-text, .flash-message, .notice, .alert, .doc-title, .recent-title, .dashboard-card-title, .dashboard-card-description) {
    overflow-wrap: anywhere;
  }
  html body :where(p, .notice, .alert, .help) code { overflow-wrap: anywhere; }
  html body pre { min-width: 0; max-width: 100%; overflow-x: auto; }
  html body :where(.card, .panel, .rich-lesson) :where(img, video, iframe) { max-width: 100%; }
  html body :where(.modal-card, .onb-modal-card, .modal-panel, .popup-card, .modal-backdrop > .modal, .modal-enter, dialog, [role="dialog"]):not(.shared-admin-sidebar):not(.modal-layer):not(.modal-overlay):not(.modal-backdrop):not(.modal-wrap) {
    box-sizing: border-box;
    min-width: 0;
    max-width: calc(100vw - 24px);
    max-height: calc(var(--wk-visual-height, 100dvh) - 24px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  html body :where(.modal-overlay, .onb-modal-overlay, .modal-layer, .modal-backdrop, .modal-wrap) {
    padding: 12px;
    overflow-y: auto;
  }
  html body :where(.modal-header, .modal-head, .image-modal-actions) {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: inherit;
  }
  html body :where(.dropdown-menu, .user-menu, .admin-mobile-menu nav) {
    max-width: calc(100vw - 24px);
    max-height: calc(var(--wk-visual-height, 100dvh) - 96px);
    overflow-y: auto;
  }
  html body :where(.wk-table-scroll, .table-wrap, .table-wrapper, .table-responsive, .overflow-x-auto) :where(th, td) {
    overflow-wrap: break-word;
  }
}

@media screen and (max-width: 360px) {
  html body :where(header, body > nav, .no-print > nav):has(.brand-title) > div.flex { column-gap: 8px; }
  html body :where(header, body > nav, .no-print > nav) a:has(.brand-title) { gap: 8px; }
  html body :where(header, body > nav, .no-print > nav):has(.brand-title) :where(.logo-anim, .floating-logo) { width: 32px; height: 32px; }
  html body :where(header, body > nav, .no-print > nav):has(.brand-title) :where(.logo-anim, .floating-logo) img { width: 32px; height: 32px; }
}

.wk-pdf-pages { display: none; }

/* Complete paper previews and vertical data records on phones. All overrides
   are screen-only so the original paper size, columns and page breaks print. */
@media screen and (max-width: 768px) {
  html body .wk-document-host {
    box-sizing: border-box;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: visible !important;
  }
  html body :is(.stage, .sheet-wrap, .sheet-mobile-stage, .sheet-mobile-pages, .screen-document, .wk-paper-preview, #previewViewport).wk-document-host {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  html body .wk-fit-document {
    box-sizing: border-box;
    width: var(--wk-document-width) !important;
    min-width: var(--wk-document-width) !important;
    max-width: none !important;
    zoom: var(--wk-document-scale, 1);
    transform: none !important;
    margin: 0 auto 28px !important;
  }
  html body .wk-fit-document :is(.table-wrap, .table-wrapper, .table-scroll, .table-scroll-wrap, .wk-table-scroll, .overflow-x-auto) {
    overflow: visible !important;
  }
  html body .wk-fit-document:is(.table-scroll-wrap, .table-scroll-inner, .table-wrapper) {
    overflow: visible !important;
  }
  html body .wk-provider-document {
    width: 960px;
    min-width: 960px;
    height: var(--wk-provider-height, 1358px) !important;
    max-width: none;
    position: static !important;
    display: block;
  }
  html body .wk-frame-document-host,
  html body .iframe-shell:has(.wk-frame-document-host) {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    position: static !important;
    overflow: visible !important;
  }
  html body .wk-pdf-native { display: none !important; }
  html body .wk-provider-stage {
    position: relative !important;
    height: var(--wk-provider-stage-height, 1358px) !important;
    overflow: hidden !important;
  }
  html body iframe.wk-provider-document.wk-fit-document {
    position: absolute !important;
    inset: 0 auto auto 0;
    margin: 0 !important;
    zoom: 1;
    transform: scale(var(--wk-document-scale, 1)) !important;
    transform-origin: top left;
  }
  html body > iframe.viewer {
    height: max(1px, calc(var(--wk-visual-height, 100dvh) - var(--wk-mobile-navbar-height, 0px) - var(--wk-viewer-toolbar-height, 92px))) !important;
  }
  html body .wk-pdf-pages {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 8px;
    background: #e2e8f0;
  }
  html body .wk-pdf-pages[hidden] { display: none !important; }
  html body .wk-pdf-page {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0 0 12px;
    position: relative;
    background: #fff;
    box-shadow: 0 1px 4px #0f172033;
  }
  html body .wk-pdf-page canvas { display: block; width: 100%; height: auto; }
  html body .wk-pdf-page-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  html:has(body.wk-pdf-mobile-active), html body.wk-pdf-mobile-active {
    height: auto !important;
    min-height: 100%;
    overflow-y: auto !important;
  }
  html body.wk-pdf-mobile-active .toolbar-title,
  html body.wk-pdf-mobile-active .toolbar-meta { white-space: normal; overflow-wrap: anywhere; }
  html body .wk-fluid-document {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto 16px !important;
    transform: none !important;
  }
  html body .wk-fluid-document .frame {
    box-sizing: border-box;
    min-height: 0 !important;
    min-width: 0;
    max-width: 100%;
    padding: 12px !important;
  }
  html body .wk-fluid-document :is(.title, .subtitle) { overflow-wrap: anywhere; }
  html body .wk-document-toolbar { top: var(--wk-mobile-navbar-height, 0px); }
  html body table.wk-table-cards {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto;
    border: 0;
    background: transparent;
    font-size: 14px;
  }
  html body table.wk-table-cards > :is(thead, .wk-table-card-heading),
  html body table.wk-table-cards .wk-table-card-heading {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html body table.wk-table-cards > colgroup { display: none; }
  html body table.wk-table-cards > caption { display: block; width: 100%; }
  html body table.wk-table-cards > :is(tbody, tfoot) {
    display: grid;
    width: 100% !important;
    min-width: 0;
    gap: 12px;
  }
  html body table.wk-table-cards > :is(tbody, tfoot) > tr:not(.wk-table-card-heading) {
    display: grid;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    margin: 0;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
  }
  html body table.wk-table-cards > :is(tbody, tfoot) > tr[data-wk-row-context]::before {
    content: attr(data-wk-row-context);
    display: block;
    padding: 10px 12px;
    background: #f0f9ff;
    border-bottom: 1px solid #dbe3ef;
    overflow-wrap: anywhere;
    font-weight: 700;
  }
  html body table.wk-table-cards > :is(tbody, tfoot) > tr > :is(td, th) {
    display: block;
    position: static !important;
    box-sizing: border-box;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  html body table.wk-table-cards > :is(tbody, tfoot) > tr > :is(td, th):last-child { border-bottom: 0; }
  html body table.wk-table-cards > :is(tbody, tfoot) > tr > [data-wk-cell-label]::before {
    content: attr(data-wk-cell-label);
    display: block;
    margin-bottom: 4px;
    color: #475569;
    font-size: 14px;
    font-weight: 700;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  html body table.wk-table-cards :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    width: 100%;
    min-width: 0 !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }
  html body table.wk-table-cards :is(.flex, .actions, .inline-flex) { flex-wrap: wrap; }
  html body table.wk-table-cards :is(.measure-field, .table-input) { min-width: 0 !important; }
  html body :is(.status-row, .action-row, .chapter-row, .jump-links, .tabs, .tab-list) {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    overflow-x: visible;
  }
  html body table.wk-table-cards .cell-body {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  html body .wk-document-host :is(.signature-grid, .headmaster-signature, .report-signatures, .signature-scroll-grid):not(.wk-fit-document *) {
    box-sizing: border-box;
    min-width: 0 !important;
    max-width: 100%;
    width: 100%;
  }
  html body .wk-document-host .signature-grid:not(.wk-fit-document *) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  html body .wk-document-host .signature-grid:not(.wk-fit-document *) .sig-card {
    min-width: 0;
    max-width: 100%;
    width: auto;
    margin-inline: 0;
    overflow-wrap: anywhere;
  }
  html body .matching-scroll { overflow-x: visible; padding-inline: 0; }
  html body .matching-stage {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  html body .match-item { min-width: 0; overflow-wrap: anywhere; }
  html body .hero-wrap > .grid { grid-template-columns: minmax(0, 1fr); }
  html body .hero-panel :is(.hero-copy, .soft-panel) { min-width: 0; overflow-wrap: anywhere; }
  html body pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}

@media print {
  .wk-pdf-pages { display: none !important; }
  .wk-table-scroll { display: contents; overflow: visible; border: 0; }
  .wk-paper-preview { display:contents; overflow:visible; }
  .shared-admin-scrim, .shared-admin-close, .shared-admin-mobile { display: none !important; }
}

@media screen and (max-width: 768px) {
  html body header.wk-mobile-original-nav[data-wk-mobile-original-nav],
  html body nav.wk-mobile-original-nav[data-wk-mobile-original-nav],
  html body div.wk-mobile-original-nav[data-wk-mobile-original-nav],
  html body #mainNavbar.wk-mobile-original-nav[data-wk-mobile-original-nav] { display: none !important; }
  html body .shared-admin-mobile-brand { display: none; }
  html body .shared-admin-mobile { justify-content: flex-end; background: #f8fafc; border-bottom: 1px solid #cbd5e1; padding: 8px 16px; }
  html body .shared-admin-menu-toggle { color: #0f766e; border-color: #94a3b8; }
}