@import url('./design-tokens.css');
@import url('./tool-skin.css');
@import url('./navigation-polish.css');
@import url('./shared/tool-shell.css');
/*
 * にほんごツール共通レスポンシブ基盤
 * 各ツールの固有デザインを変えず、画面幅・タッチ操作・可変コンテンツの安全域を統一する。
 */
:root {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  --nt-ink:var(--nt-text); --nt-ink-soft:var(--nt-text-muted); --nt-sky:var(--nt-primary);
  --nt-mint:var(--nt-success); --nt-coral:#ee6c4d; --nt-violet:#7657d6;
  --nt-line:var(--nt-border);
  --nt-radius-sm:var(--nt-radius-control); --nt-radius-md:var(--nt-radius-card); --nt-radius-lg:var(--nt-radius-modal);
  --nt-shadow:var(--nt-shadow-card); --nt-focus:var(--nt-focus-ring);
}
html { overflow-x: clip; }
body { min-width: 320px; overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, canvas, video, iframe { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { max-width: 100%; }
button, [role="button"], input[type="checkbox"], input[type="radio"] { touch-action: manipulation; }
button, [role="button"], select, input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--nt-focus); }
:where(main, header, footer, section, article, form, .panel, .card, .modal, .dialog, .grid, .row, .actions, .tabs, .input-grid, .zones-grid, .result-bar) { min-width: 0; }
:where(.modal, .dialog, .settings, .settings-panel) { max-height: calc(100dvh - 24px); }

/* Shared long-text contract for every user-provided vocabulary and quiz label.
   It wraps mixed Japanese, Thai, English, numbers and punctuation without
   clipping content or forcing one character per line. */
:where([data-responsive-text]) {
  display: block;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-break: strict;
  hyphens: auto;
}
:where([data-responsive-card]) { min-width: 0; max-width: 100%; }

@media (max-width: 700px) {
  :where(.input-grid, .zones-grid) { flex-direction: column; }
  :where(.result-bar) { align-items: flex-start; flex-wrap: wrap; }
  :where(.action-row) { width: 100%; margin-left: 0; flex-wrap: wrap; }
  :where(.action-row > button) { flex: 1 1 140px; }
  :where(.word-card) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
  input, select, textarea { font-size: 16px !important; }
  :where(.modal, .dialog, .settings, .settings-panel) { width: calc(100% - 20px); }
}