/* v0.4.0 feature layer. OFF + horizontal leaves the v0.3.2 reader styles intact. */
#kakomukun .kk-display-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px 16px; border-bottom: 1px solid #e9eee7; background: #f7faf5; }
#kakomukun .kk-display-controls .kk-v04-setting { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
#kakomukun .kk-display-controls .kk-v04-setting h3 { margin: 0; color: #273a32; font-size: .95rem; font-weight: 800; white-space: nowrap; }
#kakomukun .kk-display-controls .kk-segmented { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
#kakomukun .kk-display-controls .kk-segmented button { min-height: 44px; font-size: .92rem; font-weight: 700; }
#kakomukun .kk-feature-status { margin: 0; padding: 7px 16px; border-bottom: 1px solid #e9eee7; color: #405c35; font-size: .85rem; }
#kakomukun .kk-feature-status:empty, #kakomukun .kk-file-status:empty { display: none; }
#kakomukun .kk-input-actions { flex-wrap: wrap; align-items: center; gap: 8px; }
#kakomukun .kk-input-source-group { flex: 1 1 100%; min-width: 0; padding: 10px; border: 1px solid #dce8dd; border-radius: 12px; background: #f8fbf7; }
#kakomukun .kk-input-source-group h3 { margin: 0 0 7px; font-size: .95rem; }
#kakomukun .kk-input-source-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
#kakomukun .kk-input-source-buttons button { flex: 1 1 12rem; width: auto; min-height: 44px; padding: 8px 10px; }
#kakomukun .kk-ocr-status { margin: 7px 0; color: #405c35; }
#kakomukun .kk-ocr-status:empty { display: none; }
#kakomukun .kk-ocr-review { margin: 8px 0; padding: 12px; border: 1px solid #bfd3c1; border-radius: 12px; background: #f6fbf5; }
#kakomukun .kk-ocr-review[hidden] { display: none; }
#kakomukun .kk-ocr-review p { margin: 0 0 8px; font-weight: 700; }
#kakomukun .kk-ocr-review textarea { width: 100%; min-height: 6rem; max-height: 12rem; resize: vertical; }
#kakomukun .kk-ocr-review > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#kakomukun .kk-ocr-review button { width: auto; min-height: 44px; }
#kakomukun .kk-camera-dialog { width: min(95vw, 42rem); max-height: 95vh; margin: auto; padding: 0; border: 1px solid #cbd8c9; border-radius: 16px; background: white; color: #202020; }
#kakomukun .kk-camera-dialog video, #kakomukun .kk-camera-dialog img { display: block; width: 100%; max-height: 55vh; object-fit: contain; background: #111; }
#kakomukun .kk-camera-dialog video[hidden], #kakomukun .kk-camera-dialog img[hidden] { display: none; }
#kakomukun .kk-camera-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#kakomukun .kk-camera-actions button { width: auto; min-height: 44px; }
#kakomukun .kk-ocr-image-dialog { width: min(95vw, 48rem); max-height: 95dvh; margin: auto; padding: 0; border: 1px solid #cbd8c9; border-radius: 16px; background: white; color: #202020; }
#kakomukun .kk-ocr-image-dialog .kk-modal-body { overflow-y: auto; max-height: calc(95dvh - 9rem); }
#kakomukun .kk-ocr-image-dialog .kk-modal-header button { width: auto; flex: 0 0 auto; }
#kakomukun .kk-ocr-image-footer { padding: 10px 16px; border-top: 1px solid #dfe6dc; background: #fffdf8; }
#kakomukun .kk-ocr-crop { display: block; width: auto; height: auto; max-width: 100%; max-height: 45dvh; margin-inline: auto; touch-action: none; cursor: crosshair; }
#kakomukun .kk-ocr-crop:focus-visible { outline: 3px solid #16804a; outline-offset: 3px; }
#kakomukun .kk-ocr-image-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
#kakomukun .kk-ocr-image-controls button, #kakomukun .kk-ocr-read, #kakomukun .kk-ocr-stop { width: auto; min-height: 44px; }
#kakomukun .kk-ocr-image-controls select { min-height: 44px; max-width: 100%; }
#kakomukun .kk-ocr-crop-numbers { margin: 8px 0 16px; }
#kakomukun .kk-ocr-crop-numbers > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
#kakomukun .kk-ocr-crop-numbers label { display: flex; flex-direction: column; min-width: 0; }
#kakomukun .kk-ocr-crop-numbers input { width: 100%; min-width: 0; min-height: 44px; }
#kakomukun .kk-ocr-stop[hidden] { display: none; }
#kakomukun .kk-input-actions .kk-file-action { width: auto; min-height: 44px; padding: 8px 12px; }
#kakomukun .kk-file-status { margin: 8px 0; color: #405c35; font-size: .92rem; }
#kakomukun .kk-file-confirm { margin: 9px 0; padding: 12px; border: 1px solid #cbd8c9; border-radius: 12px; background: #f7faf4; }
#kakomukun .kk-file-confirm[hidden] { display: none; }
#kakomukun .kk-file-confirm p { overflow-wrap: anywhere; }
#kakomukun .kk-file-confirm button { width: auto; min-height: 44px; margin: 4px; }
#kakomukun dialog.kk-dictionary-dialog { width: min(92vw, 34rem); max-height: min(90vh, 34rem); margin: auto; padding: 0; border: 1px solid #cbd8c9; border-radius: 16px; background: white; color: #202020; box-shadow: 0 18px 60px #10201455; }
#kakomukun dialog.kk-dictionary-dialog[open] { display: flex; flex-direction: column; }
#kakomukun .kk-dictionary-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
#kakomukun .kk-dictionary-actions button { width: auto; min-height: 48px; }

/* Keep ruby metrics after first annotation, including while OFF. */
#kakomukun .kk-token ruby { ruby-position: over; ruby-align: center; }
#kakomukun .kk-output .kk-kinsoku-group { display: inline-flex; align-items: baseline; max-width: 100%; overflow-x: auto; overflow-y: hidden; vertical-align: baseline; white-space: nowrap; }
#kakomukun .kk-output .kk-kinsoku-group > .kk-token { flex: none; white-space: nowrap; overflow-wrap: normal; }
#kakomukun .kk-output .kk-kinsoku-group > .kk-space { flex: none; }
#kakomukun .kk-token rt { font-size: .5em; font-weight: 500; line-height: 1; letter-spacing: 0; }
#kakomukun:not(.kk-furigana-on) .kk-token rt { visibility: hidden; }

/* Only the text region rotates; controls and settings stay horizontal. */
#kakomukun.kk-writing-vertical .output-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}
#kakomukun.kk-writing-vertical .kk-output {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  ruby-position: over;
  width: max-content;
  min-width: 100%;
  max-width: none;
  height: min(58vh, 36rem);
  min-height: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
#kakomukun.kk-writing-vertical .kk-output .kk-token { vertical-align: top; }
#kakomukun.kk-writing-vertical .kk-output .kk-token:hover,
#kakomukun.kk-writing-vertical .kk-output .kk-token:focus,
#kakomukun.kk-writing-vertical .kk-output .kk-token.is-active,
#kakomukun.kk-writing-vertical .kk-output .kk-token.is-current { transform: translateX(-.08em); }
#kakomukun.kk-writing-vertical.kk-zoom-enabled .output-wrap { max-height: none; overflow-x: auto; overflow-y: hidden; }
#kakomukun.kk-writing-vertical .kk-zoom-panel .kk-zoom-current {
  display: grid;
  place-items: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  width: 100%;
  height: clamp(12rem, 34vh, 20rem);
  min-width: 0;
  overflow: auto;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.1;
}
@media (max-width: 480px) {
  #kakomukun .kk-display-controls { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 9px 12px; }
  #kakomukun .kk-input-actions { justify-content: stretch; }
  #kakomukun .kk-input-actions .kk-file-action { flex: 1 1 45%; }
  #kakomukun .kk-input-actions #kkConvert { flex: 1 1 100%; }
  #kakomukun .kk-input-source-buttons button { flex-basis: 100%; }
  #kakomukun.kk-writing-vertical .kk-output { height: min(48vh, 28rem); }
  #kakomukun.kk-writing-vertical .kk-zoom-panel .kk-zoom-current { height: clamp(10rem, 28vh, 14rem); font-size: clamp(1.55rem, 7vw, 2.4rem); }
  #kakomukun:not(.kk-writing-vertical) .kk-zoom-panel .kk-zoom-current.kk-zoom-long-unit {
    height: 9rem;
    font-size: clamp(1.25rem, 5.5vw, 2rem);
  }
}
@media (max-width: 360px) {
  #kakomukun .kk-settings-drawer .kk-highlight-group { grid-template-columns: minmax(0, 1fr); }
  #kakomukun .kk-settings-drawer .kk-highlight-group .kk-choice-row { width: 100%; }
}
@media (forced-colors: active) {
  #kakomukun .kk-file-confirm, #kakomukun dialog.kk-dictionary-dialog { border: 1px solid CanvasText; }
}