/* Compact layouts use the same query as PokerAdaptiveLayout. All dialogs
   share the visible viewport budget, including safe areas and the keyboard. */
.mobile-tools-sheet:not([open]) { display: none; }
@media (max-width: 1399px), (max-height: 599px) {
  body.mobile-tools-ready .workspace > .checkpoint-rail,
  body.mobile-tools-ready .workspace > .coach-panel { display: none; }
  .mobile-tools-sheet, .action-feedback-sheet, .preflop-workbook, .modal-sheet {
    --dialog-safe-top: max(8px, env(safe-area-inset-top));
    --dialog-safe-bottom: max(8px, env(safe-area-inset-bottom));
    --dialog-safe-left: max(8px, env(safe-area-inset-left));
    --dialog-safe-right: max(8px, env(safe-area-inset-right));
    --dialog-available-height: calc(var(--compact-dialog-height, 100dvh) - var(--dialog-safe-top) - var(--dialog-safe-bottom));
    --dialog-available-width: calc(var(--compact-dialog-width, 100vw) - var(--dialog-safe-left) - var(--dialog-safe-right));
    box-sizing: border-box; position: fixed;
    top: calc(var(--compact-dialog-top, 0px) + var(--dialog-safe-top));
    left: calc(var(--compact-dialog-left, 0px) + var(--dialog-safe-left));
    right: auto; bottom: auto; width: var(--dialog-available-width);
    max-width: none; max-height: var(--dialog-available-height); margin: 0;
    transform: none; border-radius: 16px;
  }
  .mobile-tools-sheet {
    height: var(--dialog-available-height); padding: 0; overflow: hidden;
    border: 1px solid #4b4437; border-top: 2px solid #bda26c; border-radius: 16px;
    background: #111; color: #f0eee7; box-shadow: 0 12px 60px #0009;
    font-family: inherit; color-scheme: dark;
  }
  .mobile-tools-sheet[open] { display: flex; flex-direction: column; animation: mobile-tools-rise 220ms ease-out; }
  .mobile-tools-sheet::backdrop { background: #0009; }
  .mobile-tools-head {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; min-height: 58px; padding: 7px 12px 7px 16px; border-bottom: 1px solid #33362e;
    background: #171915;
  }
  .mobile-tools-head h2 { margin: 0; font-size: 18px; line-height: 1.3; }
  .mobile-tools-head button {
    min-width: 60px; min-height: 44px; padding: 8px 12px;
    border: 1px solid #4d5146; border-radius: 8px; background: #23271f; color: #dedbcf; font: inherit; font-size: 13px;
  }
  .mobile-tools-body { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scroll-padding-block: 124px 16px; }
  .mobile-tools-body > .checkpoint-rail, .mobile-tools-body > .coach-panel {
    position: static; inset: auto; display: flex; flex-direction: column; gap: 0;
    height: auto; max-height: none; width: 100%; margin: 0; padding: 0 14px 16px;
    border: 0; overflow: visible; transform: none; box-shadow: none; box-sizing: border-box;
    font-size: 14px; line-height: 1.6;
  }
  .mobile-tools-body .mobile-return-table { display: none; }
  .mobile-tools-body .audit-head {
    order: 0; position: sticky; top: 0; z-index: 3; flex: 0 0 60px; height: 60px;
    margin: 0; padding: 8px 0; align-items: center; background: #111; border: 0;
  }
  .mobile-tools-body .audit-head h3 { display: none; }
  .mobile-tools-body .audit-head > div > span { font-size: 11px; }
  .mobile-tools-body .audit-head-controls { flex-direction: row; align-items: center; gap: 10px; }
  .mobile-tools-body .audit-toggle { min-height: 44px; }
  .mobile-tools-body .audit-stages {
    order: 1; position: sticky; top: 60px; z-index: 3; flex-shrink: 0;
    margin: 0; padding: 0 0 8px; background: #111; grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .mobile-tools-body .audit-stage-button { min-height: 52px; padding: 6px 2px; gap: 4px; }
  .mobile-tools-body .audit-stage-button > span { display: none; }
  .mobile-tools-body .audit-stage-button strong { font-size: 12px; }
  .mobile-tools-body .audit-stage-button small { font-size: 11px; }
  .mobile-tools-body .audit-checks { order: 2; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mobile-tools-body .audit-stage-note { order: 3; margin: 12px 0; }
  .mobile-tools-body .training-glossary { order: 4; margin: 0; font-size: 13px; }
  .mobile-tools-body .observation-score { order: 3; margin: 2px 0; padding: 10px 0; }
  .mobile-tools-body .observation-question { padding: 11px; }
  .mobile-tools-body .observation-question h3 { margin: 5px 0 8px; font-size: 14px; line-height: 1.5; }
  .mobile-tools-body .observation-help { margin-bottom: 10px; font-size: 13px; line-height: 1.7; }
  .mobile-tools-body .observation-options button { min-height: 44px; }
  .mobile-tools-body .observation-options:has(> button:nth-child(7)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mobile-tools-body .observation-options:has(> button:nth-child(7)) > button:last-child { grid-column: auto; }
  .mobile-tools-body .observation-options:has(> button:nth-child(10)) > button:first-child { grid-column: 1 / -1; }
  .mobile-tools-body .coach-console-head { order: 0; min-height: 48px; padding: 10px 0; }
  .mobile-tools-body .coach-console-head h2, .mobile-tools-body .console-kicker { display: none; }
  .mobile-tools-body .panel-tabs { order: 1; position: sticky; top: 0; z-index: 2; padding: 0; background: #171915; }
  .mobile-tools-body .panel-tab { min-width: 0; min-height: 48px; padding: 8px 3px; font-size: 12px; }
  .mobile-tools-body .panel-tab[aria-selected="true"] { background: #342d20; color: #f0d39a; }
  .mobile-tools-body .panel-view { order: 2; padding: 16px 0; }
  .mobile-tools-body .coach-empty { min-height: 0; padding: 12px 0; }
  .mobile-tools-body .hand-summary { order: 3; }
  .mobile-tools-body .action-thread { order: 4; }
  .mobile-tools-body .coach-situation, .mobile-tools-body .context-strip { order: 5; }
  .mobile-tools-body .seat-advice, .mobile-tools-body .opponent-focus { order: 6; }
  .mobile-tools-body .coach-utilities { order: 7; margin-top: 14px; }
  .mobile-tools-body .coach-utilities button { min-height: 44px; }
  .mobile-tools-body :is(input, select, textarea) { max-width: 100%; font-size: 16px; }
  .mobile-tools-tabs {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
    flex: 0 0 auto; padding: 10px; border-top: 1px solid #33362e; background: #171915;
  }
  .mobile-tools-tabs button {
    min-width: 0; min-height: 44px; padding: 7px 3px; border: 1px solid #3e4338; border-radius: 7px;
    background: #20251d; color: #c0c7b6; font: inherit; font-size: 12px; line-height: 1.4;
  }
  .mobile-tools-tabs button[aria-expanded="true"] { color: #f0d39a; border-color: #bda26c; background: #342d20; }
  :is(.mobile-tools-sheet, .action-feedback-sheet, .preflop-workbook, .modal-sheet) :is(button, input, select, textarea, a, summary):focus-visible {
    outline: 2px solid #e8c77d; outline-offset: 2px;
  }
  /* Headers and footers stay visible while their content scrolls independently. */
  .action-feedback-sheet {
    height: var(--dialog-available-height); padding: 12px 16px;
  }
  .action-feedback-sheet:focus { outline: none; }
  .action-feedback-sheet .feedback-handle { display: none; }
  .action-feedback-sheet .feedback-heading { padding-bottom: 10px; }
  .action-feedback-sheet .feedback-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; }
  .action-feedback-sheet .feedback-text-button { min-height: 44px; }
  .action-feedback-sheet .feedback-footer { gap: 6px 10px; padding-top: 8px; }
  .preflop-workbook { height: var(--dialog-available-height); }
  .preflop-workbook .pf-header { padding: 12px 16px; }
  .preflop-workbook .pf-header h2 { font-size: 19px; }
  .preflop-workbook #preflop-content { flex: 1 1 auto; min-height: 0; overflow-x: hidden; }
  .modal-sheet { overscroll-behavior: contain; scrollbar-width: thin; scroll-padding-block: 92px 16px; }
  .modal-head { position: sticky; top: 0; padding: 12px 16px; }
  .modal-head h2 { font-size: 20px; line-height: 1.4; }
  :is(.mobile-tools-head, .feedback-heading, .pf-header, .modal-head) { min-width: 0; }
  :is(.mobile-tools-head, .feedback-heading, .pf-header, .modal-head) > div { min-width: 0; overflow-wrap: anywhere; }
  :is(.mobile-tools-head, .feedback-heading, .pf-header, .modal-head) > button {
    flex-shrink: 0; min-width: 44px; min-height: 44px;
  }
}
@media (min-width: 900px) and (max-width: 1399px) and (orientation: landscape), (min-width: 900px) and (max-height: 599px) and (orientation: landscape) {
  .mobile-tools-sheet, .action-feedback-sheet {
    width: min(420px, 48vw, var(--dialog-available-width));
    left: calc(var(--compact-dialog-left, 0px) + var(--compact-dialog-width, 100vw) - var(--dialog-safe-right) - min(420px, 48vw, var(--dialog-available-width)));
    border-radius: 12px;
  }
}
@media (max-height: 599px) {
  .action-feedback-sheet .feedback-heading { padding-bottom: 6px; }
  .action-feedback-sheet .feedback-heading h2 { font-size: 19px; }
  .action-feedback-sheet .feedback-score { font-size: 28px; }
  .action-feedback-sheet .feedback-eyebrow { margin-bottom: 2px; font-size: 11px; }
  .action-feedback-sheet .feedback-footer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .action-feedback-sheet .feedback-text-button { grid-column: auto; }
  .action-feedback-sheet .feedback-pause-note { font-size: 10px; margin: 0; }
  .preflop-workbook .pf-header > div > span { display: none; }
  .preflop-workbook .pf-header h2 { margin: 0; }
  .mobile-tools-head, .preflop-workbook .pf-header, .modal-head { padding-block: 6px; }
  .mobile-tools-tabs { padding-block: 6px; }
  .mobile-tools-body .audit-head { position: static; }
  .mobile-tools-body .audit-stages { top: 0; }
  .mobile-tools-body { scroll-padding-top: 70px; }
}
@media (max-width: 899px) {
  .preflop-workbook .pf-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preflop-workbook .pf-workspace { grid-template-columns: minmax(0, 1fr); }
  .preflop-workbook .pf-answer-panel { padding: 18px 0 0; border-inline-start: 0; border-top: 1px solid #39412f; }
  .preflop-workbook .pf-mode-bar { align-items: flex-start; flex-direction: column; }
  .preflop-workbook .pf-mode-bar > div { flex-wrap: wrap; }
  .preflop-workbook .pf-filters select { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-tools-sheet[open] { animation: none; }
  :is(.mobile-tools-sheet, .action-feedback-sheet, .preflop-workbook, .modal-sheet),
  :is(.mobile-tools-sheet, .action-feedback-sheet, .preflop-workbook, .modal-sheet) * {
    scroll-behavior: auto; transition: none;
  }
}
@keyframes mobile-tools-rise { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } }