/* Vui Học Tiếng Trung v2.5.10 - homepage balance + writing overflow fixes */

/* ---------- Shared layout guards ---------- */
.dashboard-grid,
.main-column,
.right-column,
.content-pair,
.study-grid,
.panel,
.writing-studio,
.writing-search-panel,
.writing-workbench,
.writing-sidebar,
.writing-main,
.writing-mode-panel {
  min-width: 0;
  max-width: 100%;
}

/* ---------- Homepage: keep typography and card rhythm balanced ---------- */
.hero-content h1,
.hero-content > p,
.panel-heading h2,
.study-card h2,
.study-card > p {
  text-wrap: balance;
}

.panel-heading h2,
.study-card h2 {
  line-height: 1.28;
}

.panel-heading .text-link {
  flex: 0 0 auto;
  white-space: nowrap;
}

.study-grid {
  align-items: stretch;
}

.study-grid > .study-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.study-grid > .study-card > h2,
.study-grid > .study-card > p {
  width: 100%;
}

.study-grid > .study-card > p {
  line-height: 1.45;
}

.study-grid > .study-card > .wide-primary {
  width: 100%;
  margin-top: auto;
}

.study-grid > .study-card.center-card .big-emoji,
.study-grid > .study-card.center-card .hanzi-grid {
  margin-inline: auto;
}

/* Avoid the very narrow left card at medium desktop widths. */
@media (min-width: 1180px) and (max-width: 1320px) {
  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 34%);
  }

  .content-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .word-card,
  .recent-card {
    overflow: hidden;
  }

  .word-card .word-main,
  .word-card .word-meta,
  .recent-row {
    min-width: 0;
  }

  .recent-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ---------- Writing studio: hard overflow containment ---------- */
.writing-studio-dialog {
  overflow: hidden;
}

.writing-studio-dialog .modal-body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

.writing-studio {
  width: 100%;
  overflow-x: hidden;
}

.writing-search-panel,
.writing-workbench,
.writing-sidebar,
.writing-main,
.writing-current-header,
.writing-mode-panel,
.writing-order-layout,
.writing-quiz-layout,
.writing-free-layout {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.writing-search-form {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(108px, 140px) auto;
}

.writing-search-box,
.writing-search-box input,
.writing-search-form select,
.writing-search-submit {
  min-width: 0;
  max-width: 100%;
}

.writing-search-results {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overscroll-behavior-inline: contain;
}

.writing-search-result {
  flex: 0 0 min(220px, 78vw);
  min-width: 0;
  max-width: min(240px, 82vw);
  overflow: hidden;
}

.writing-search-result strong,
.writing-search-result span,
.writing-search-result small,
.writing-search-result i {
  min-width: 0;
  max-width: 100%;
}

.writing-word-main,
.writing-word-main > div,
.writing-current-header > div,
.writing-current-line,
.writing-current-meta,
.writing-header-actions {
  min-width: 0;
  max-width: 100%;
}

.writing-word-main p,
.writing-current-meta span,
.writing-word-example,
.writing-word-example b,
.writing-word-example span,
.writing-word-example small {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.writer-grid-shell,
.free-canvas-shell {
  width: min(100%, 520px);
  max-width: 100%;
  margin-inline: auto;
}

.free-canvas-shell {
  width: min(100%, 560px);
}

.writer-grid-shell > *,
.free-canvas-shell > *,
.writer-grid-shell svg,
.free-canvas-shell canvas {
  max-width: 100%;
}

/* ---------- Mobile homepage ---------- */
@media (max-width: 900px) {
  .dashboard-grid {
    align-items: stretch;
  }

  .hero-content h1 {
    max-width: min(88%, 420px);
  }

  .panel-heading {
    align-items: center;
  }

  .study-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
  }

  .study-grid > .study-card {
    min-height: 184px;
  }

  .study-grid > .study-card:first-child {
    grid-column: 1 / -1;
    min-height: 0;
  }

  .study-grid > .study-card.center-card {
    text-align: center;
  }

  .study-grid > .study-card.center-card > p {
    min-height: 2.9em;
    display: grid;
    place-items: start center;
  }

  .study-grid > .study-card.center-card .big-emoji,
  .study-grid > .study-card.center-card .hanzi-grid {
    margin-top: auto;
    margin-bottom: 10px;
  }

  /* Writing dialog must stay inside the physical viewport. */
  .writing-studio-dialog,
  .writing-studio-dialog .modal-body {
    max-width: 100dvw !important;
  }

  .writing-studio-dialog .modal-body {
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
  }

  .writing-search-panel {
    overflow: hidden;
    padding: 10px;
  }

  .writing-search-form {
    grid-template-columns: minmax(0, 1fr) 108px;
  }

  .writing-search-results {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(164px, min(72vw, 220px));
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 0 2px;
    margin: 0;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .writing-search-result {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    scroll-snap-align: start;
  }

  .writing-workbench {
    overflow: hidden;
  }

  .writing-sidebar,
  .writing-main {
    overflow: hidden;
  }

  .writing-mode-tabs {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
  }

  .writing-mode-tabs button {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .stroke-step-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .hero-content h1 {
    max-width: 92%;
  }

  .study-grid {
    gap: 9px;
  }

  .study-grid > .study-card {
    min-height: 176px;
  }

  .study-grid > .study-card h2 {
    min-height: 2.56em;
    display: grid;
    align-items: end;
  }

  .study-grid > .study-card:first-child h2 {
    min-height: 0;
    display: block;
  }

  .study-grid > .study-card.center-card > p {
    min-height: 3.1em;
  }

  .study-grid > .study-card .wide-primary {
    white-space: normal;
    line-height: 1.2;
  }

  .writing-search-form {
    grid-template-columns: 1fr;
  }

  .writing-search-form select {
    width: 100%;
  }

  .writing-search-results {
    grid-auto-columns: minmax(0, 86vw);
  }

  .writing-word-main {
    align-items: flex-start;
  }

  .writing-word-main > strong {
    flex: 0 0 auto;
  }

  .writing-current-line {
    flex-wrap: wrap;
  }

  .writing-header-actions {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .writing-header-actions button {
    min-width: 0;
    white-space: normal;
  }

  .stroke-step-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .study-grid {
    grid-template-columns: 1fr;
  }

  .study-grid > .study-card,
  .study-grid > .study-card:first-child {
    grid-column: 1;
    min-height: 0;
  }

  .study-grid > .study-card h2,
  .study-grid > .study-card.center-card > p {
    min-height: 0;
  }

  .writing-search-results {
    grid-auto-columns: minmax(0, calc(100dvw - 38px));
  }
}