/* file: public/assets/css/mobil.css */
.header-main {
    grid-template-columns: 128px 1fr auto;
    min-height: 60px;
    padding-inline: 14px;
}

.brand {
    width: 120px;
    height: 44px;
}

.header-status .status-item,
.header-actions .account-link {
    display: none;
}

.header-status {
    justify-content: end;
    padding-right: 8px;
}

.utc-clock {
    font-size: 0.66rem;
}

.local-clock { display: none; }

.nav-toggle {
    display: inline-flex;
}

.main-navigation {
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 14px 14px;
}

.main-navigation.is-open {
    display: flex;
}

.main-navigation a {
    padding: 10px;
    border-bottom: 1px solid var(--border);
}

.site-main {
    padding: 30px 14px 64px;
}

.koch-overview,
.koch-stat-grid,
.koch-setup,
.koch-mode-grid {
    grid-template-columns: 1fr;
}

.koch-setup > div:first-child,
.koch-mode-grid {
    grid-column: auto;
}

.koch-summary dl {
    grid-template-columns: 1fr;
}

.koch-summary dl div,
.koch-summary dl div:first-child {
    padding: 10px 0;
    border-top: 1px solid var(--border);
    border-left: 0;
}

.koch-mode-grid button {
    min-height: 112px;
}

.koch-device-panel {
    display: none;
}

body.trainer-focus-active {
    overflow: hidden;
}

body.trainer-focus-active .site-header,
body.trainer-focus-active .site-footer,
body.trainer-focus-active .koch-page-heading,
body.trainer-focus-active [data-koch-overview],
body.trainer-focus-active [data-koch-setup],
body.trainer-focus-active .koch-statistics,
body.trainer-focus-active .koch-legacy-link {
    display: none;
}

body.trainer-focus-active .site-main {
    width: 100%;
    height: 100dvh;
    padding: 0;
}

body.trainer-focus-active .koch-trainer,
body.trainer-focus-active .koch-stage {
    height: 100%;
}

body.trainer-focus-active .koch-stage {
    min-height: 0;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
}

.koch-stage-bar {
    position: sticky;
    z-index: 5;
    top: 0;
}

.koch-stage-bar > div {
    gap: 6px;
}

.koch-stage-bar span {
    display: none;
}

.koch-stage-body {
    padding: 18px 14px 28px;
}

.koch-stage-body h2 {
    font-size: 1.55rem;
}

.koch-stage-instruction {
    font-size: 0.88rem;
}

.koch-display {
    min-height: 108px;
    margin-top: 8px;
    font-size: clamp(2.8rem, 15vw, 5rem);
}

.koch-touch-key {
    min-height: 132px;
}

.koch-copy-answer,
.koch-stage-actions {
    grid-template-columns: 1fr;
    flex-direction: column;
}

.koch-copy-answer .button,
.koch-stage-actions .button {
    width: 100%;
}

.home-hero {
    padding: 8px 0 12px;
}

.home-hero h1 {
    font-size: clamp(2.8rem, 13vw, 4.4rem);
}

.home-primary-action { align-items: stretch; flex-direction: column; gap: 14px; }
.home-primary-action .button { width: 100%; }

.home-room,
.home-content-row,
.home-journal-list,
.home-development,
.journal-index article,
.admin-settings,
.admin-journal {
    grid-template-columns: 1fr;
}

.admin-overview-grid,
.admin-metrics {
    grid-template-columns: 1fr;
}

.section-heading-unified,
.page-heading.compact,
.rooms-heading,
.admin-content-heading,
.user-admin-hero,
.account-dashboard-hero { margin: 0 0 16px; padding: 18px; }
.section-heading-unified h1,
.page-heading.compact h1,
.rooms-heading h1,
.admin-content-heading h1,
.user-admin-hero h1,
.account-dashboard-hero h1 { font-size: clamp(2.1rem, 10vw, 3.2rem); }
.download-catalog-mark { min-width: 0; text-align: left; }
.download-catalog-mark strong { font-size: 2.3rem; }
.firmware-stable-card { align-items: stretch; flex-direction: column; padding: 20px; }
.firmware-page-heading { align-items: stretch; flex-direction: column; }
.firmware-page-heading .button { width: 100%; }
.firmware-stable-card .button { width: 100%; }
.documentation-task-grid { grid-template-columns: 1fr; gap: 8px; }
.documentation-task { min-height: 0; }
.account-section-nav { overflow-x: auto; }
.account-section-nav a { flex: 0 0 auto; }
.account-group > summary { align-items: flex-start; flex-direction: column; gap: 2px; }

.room-mobile-toolbar {
    position: fixed;
    z-index: 18;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    display: grid;
    grid-template-columns: minmax(108px, 1fr) repeat(3, auto);
    gap: 6px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--border-strong);
    background: var(--header);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}
.room-mobile-toolbar > div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 7px; }
.room-mobile-toolbar > div small { grid-column: 2; color: var(--text-muted); }
.room-mobile-toolbar .button { min-height: 44px; padding: 9px 10px; }
.sdr-room { padding-bottom: 84px; }

.admin-navigation {
    margin-top: -16px;
    padding: 6px;
}

.admin-navigation a {
    padding: 9px 11px;
}

.user-admin-panel { padding: 0; }
.user-admin-card summary { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 16px; }
.user-admin-summary-role { grid-column: 1; }
.user-admin-open-label { grid-column: 2; grid-row: 1 / span 2; }
.user-admin-card-body { padding: 0 16px 18px; }
.user-admin-facts, .user-admin-actions { grid-template-columns: 1fr; }
.user-admin-action { min-width: 0; }
.audit-log article { grid-template-columns: 1fr; gap: 10px; }
.audit-log-meta { text-align: left; }

.home-room {
    gap: 20px;
}

.home-room dl {
    grid-template-columns: 1fr;
}

.home-room dl div {
    padding: 8px 0;
    border-top: 1px solid var(--border);
    border-left: 0;
}

.home-room .button {
    width: 100%;
}

.home-content-row {
    margin-bottom: 48px;
}

.contact-page,
.contact-form-grid {
    grid-template-columns: 1fr;
}

.contact-page {
    gap: 28px;
    margin: 24px 0 48px;
}

.home-journal-list article {
    grid-template-columns: 110px 1fr;
    border-right: 0;
    border-bottom: 1px solid var(--border);
}

.home-development {
    gap: 16px;
}

.admin-settings,
.admin-journal {
    padding: 20px;
}

.release-admin-bar,
.downloads-heading,
.firmware-install-future,
.release-categories,
.release-item > header,
.release-item > footer,
.release-existing-file {
    align-items: stretch;
    flex-direction: column;
}

.download-catalog-mark {
    text-align: left;
}

.release-facts {
    grid-template-columns: 1fr;
}

.release-facts div {
    border-right: 0;
    border-bottom: 1px solid var(--border);
}

.release-item > footer .button-row,
.release-item > footer .button {
    width: 100%;
}

.release-admin-links {
    justify-content: flex-start;
}

.rooms-heading,
.rooms-summary,
.rooms-empty {
    align-items: flex-start;
    flex-direction: column;
}

.rooms-heading {
    margin-top: 0;
}

.rooms-summary {
    width: 100%;
    justify-content: flex-start;
}

.rooms-summary .button,
.rooms-empty .button {
    width: 100%;
}

.radio-room-grid,
.room-management-page {
    grid-template-columns: 1fr;
}

.radio-room-display {
    align-items: flex-start;
}

.radio-room-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radio-room-metrics div:nth-child(3n) {
    border-right: 1px solid #293538;
}

.radio-room-metrics div:nth-child(2n) {
    border-right: 0;
}

.radio-room-metrics .radio-room-participants {
    border-right: 0;
}

.radio-room-actions {
    align-items: stretch;
    flex-direction: column;
}

.radio-room-manage {
    margin: 0;
    padding: 6px 0;
}

.room-management-page {
    margin-top: 0;
    padding: 22px;
}

.hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    min-height: auto;
}

.hero-copy h1 {
    font-size: clamp(3.15rem, 16vw, 5.4rem);
}

.system-panel {
    box-shadow: none;
}

.metric-strip {
    grid-template-columns: repeat(2, 1fr);
    margin: 56px 0 72px;
}

.metric-strip div:nth-child(2) {
    border-right: 0;
}

.metric-strip div:nth-child(-n+2) {
    border-bottom: 1px solid var(--border);
}

.content-section {
    margin: 72px 0;
}

.section-heading,
.feature-grid,
.document-grid,
.callout,
.technical-layout,
.protocol-section,
.release-card,
.empty-device,
.room-columns,
.room-editor,
.room-form-grid,
.account-shell,
.register-layout,
.account-overview,
.simulator-grid {
    grid-template-columns: 1fr;
}

.room-login-note {
    align-items: flex-start;
    flex-direction: column;
}

.room-session-heading {
    align-items: flex-start;
    flex-direction: column;
}

.room-session-summary,
.room-workspace {
    grid-template-columns: 1fr;
}

.room-session-summary div + div,
.room-workspace > div + div {
    border-top: 1px solid var(--border);
    border-left: 0;
}

.realtime-room-test > summary {
    align-items: flex-start;
}

.realtime-room-test-body .lab-endpoint code {
    overflow-wrap: anywhere;
}

.sdr-room {
    padding-top: 4px;
}

.sdr-radio-bar {
    align-items: flex-start;
}

.sdr-radio-bar > div:first-child {
    display: grid;
    gap: 2px;
}

.sdr-radio-display {
    grid-template-columns: 1fr;
}

.sdr-radio-display > div + div {
    border-top: 1px solid #293538;
    border-left: 0;
}

.sdr-radio-display > div {
    padding: 18px;
}

.sdr-frequency {
    min-height: 150px;
}

.sdr-waterfall-panel canvas {
    height: 82px;
}

.sdr-meter-strip {
    grid-template-columns: repeat(2, 1fr);
}

.sdr-meter-strip div {
    border-bottom: 1px solid #293538;
}

.sdr-meter-strip div:nth-child(2n) {
    border-right: 0;
}

.room-phase-boundary {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
}

.morse-room-layout {
    grid-template-columns: 1fr;
}

.morse-chat-heading {
    align-items: flex-start;
    flex-direction: column;
}

.morse-chat-legend {
    max-width: none;
    justify-content: flex-start;
}

.morse-message-stream {
    min-height: 380px;
    max-height: 58vh;
}

.sdr-latest-activity {
    grid-template-columns: auto minmax(0, 1fr);
}

.sdr-latest-activity p {
    grid-column: 1 / -1;
}

.morse-message {
    grid-template-columns: 1fr;
}

.morse-message > div {
    grid-template-columns: 12px minmax(0, 1fr) auto;
    padding: 11px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
}

.morse-message time {
    grid-column: 3;
    grid-row: 1;
}

.morse-message > p {
    padding: 16px 18px;
}

.morse-message > .morse-plain {
    grid-column: 1;
    margin-top: -8px;
    padding-top: 0;
}

.morse-composer {
    grid-template-columns: 1fr;
}

.morse-composer-heading {
    align-items: flex-start;
    flex-direction: column;
}

.morse-composer textarea,
.morse-composer-actions {
    grid-column: 1;
}

.morse-composer-actions {
    grid-template-columns: 42px 42px;
    justify-content: end;
}

.morse-composer-actions > span {
    grid-column: 1 / -1;
    max-width: none;
    text-align: left;
}

.morse-composer-actions .button {
    grid-column: auto;
}

.room-side-panel {
    grid-template-columns: 1fr;
}

.lab-safety,
.lab-toolbar,
.lab-endpoint {
    align-items: flex-start;
    flex-direction: column;
}

.lab-metrics {
    grid-template-columns: repeat(2, 1fr);
}

.lab-metrics div {
    border-bottom: 1px solid var(--border);
}

.lab-details {
    grid-template-columns: 1fr;
}

.lab-details > div + div {
    border-top: 1px solid var(--border);
    border-left: 0;
}

.feature-card,
.document-grid article {
    min-height: 230px;
}

.callout {
    gap: 24px;
    padding: 24px;
}

.page-heading {
    margin: 28px 0 54px;
}

.page-heading h1,
.page-heading.compact h1 {
    font-size: clamp(2.8rem, 14vw, 4.8rem);
}

.data-list article {
    grid-template-columns: 42px 1fr;
    gap: 14px;
}

.data-list article p {
    grid-column: 2;
}

.technical-row,
.status-grid div {
    grid-template-columns: 1fr;
    gap: 3px;
}

.protocol-section {
    gap: 20px;
    margin-top: 72px;
}

.protocol-grid {
    grid-template-columns: 1fr;
}

.release-card,
.empty-device {
    align-items: start;
}

.release-card .button {
    width: 100%;
}

.empty-device {
    padding: 24px;
}

.device-connect-panel,
.device-status-layout,
.device-value-grid,
.device-capability-list {
    grid-template-columns: 1fr;
}

.device-connect-panel,
.device-status-card {
    padding: 20px;
}

.device-status-actions .button {
    width: 100%;
}

.device-self-test {
    padding: 20px;
}

.device-configuration-panel {
    padding: 20px;
}

.device-configuration-heading,
.device-configuration-fields {
    grid-template-columns: 1fr;
}

.device-configuration-heading {
    flex-direction: column;
}

.device-self-test-heading,
.device-self-test-list,
.device-self-test-list li {
    grid-template-columns: 1fr;
}

.browser-update-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.device-self-test-heading,
.device-self-test-list li {
    align-items: flex-start;
    flex-direction: column;
}

.device-self-test-heading .button {
    width: 100%;
}

.device-update-guide {
    padding: 20px;
}

.device-update-heading,
.device-update-facts {
    grid-template-columns: 1fr;
}

.device-update-heading {
    align-items: flex-start;
    flex-direction: column;
}

.device-update-guide .button-row .button {
    width: 100%;
}

.browser-update-confirm {
    line-height: 1.45;
}

.simulator-grid > * + * {
    border-top: 1px solid var(--border);
    border-left: 0;
}

.room-columns > div + div {
    border-top: 1px solid var(--border);
    border-left: 0;
}

.account-shell {
    min-height: auto;
}

.register-layout .page-heading {
    position: static;
    margin-top: 28px;
}

.register-layout .account-status {
    padding: 22px;
}

.account-links {
    flex-direction: column;
}

.account-overview {
    min-height: auto;
    padding-top: 20px;
}

.account-dashboard {
    gap: 16px;
    padding-top: 8px;
}

.account-dashboard-hero,
.account-panel,
.account-destinations {
    padding: 22px;
}

.account-dashboard-hero,
.account-dashboard-footer,
.account-panel-heading {
    align-items: flex-start;
    flex-direction: column;
}

.account-hero-badges {
    justify-content: flex-start;
}

.account-dashboard-grid,
.account-destination-grid {
    grid-template-columns: 1fr;
}

.account-fact-list div,
.account-device-facts div,
.account-update-alert {
    grid-template-columns: 1fr;
    gap: 5px;
}

.account-update-alert .button {
    width: 100%;
    margin-top: 8px;
}

.account-destination {
    min-height: 150px;
}

.account-overview .button-row,
.account-overview .logout-form {
    grid-column: 1;
}

.logout-form {
    margin-top: 0;
    justify-self: start;
}

.site-footer {
    grid-template-columns: 1fr;
    padding-inline: 14px;
}

.user-admin-shell {
    gap: 16px;
    padding-top: 8px;
}

.user-admin-hero,
.user-admin-panel {
    padding: 22px;
}

.user-admin-hero,
.user-admin-filter {
    align-items: stretch;
    flex-direction: column;
}

.user-admin-hero .button,
.user-admin-filter .button {
    width: 100%;
}

.user-admin-action {
    min-width: 240px;
}

.site-footer > div,
.site-footer nav {
    flex-direction: column;
    gap: 8px;
}