/* こかげ: container-width layout for Duo / foldables.
 * Keep in sync with app/globals.css (2026-09-17).
 * Load after the current global CSS. Same DOM across widths.
 * No Viewport Segments, no UA / hinge branch. Container + resize only.
 */
:root {
  --sheet-pad: clamp(1rem, 4vw, 3rem);
  --dock-clearance: 4.5rem;
}

.page-sheet {
  width: min(100%, 72rem);
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  font-size: 1rem;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

.sheet-x {
  padding-left: var(--sheet-pad);
  padding-right: var(--sheet-pad);
}

.sheet-y { padding-block: clamp(1.5rem, 5vw, 3.5rem); }
.sheet-y-hero { padding-block: clamp(2rem, 6vw, 4.5rem); }
.sheet-y-compact { padding-block: clamp(.75rem, 2vw, 1.5rem); }

@supports (width: 1cqi) {
  .sheet-x {
    padding-left: clamp(1rem, 4cqi, 3rem);
    padding-right: clamp(1rem, 4cqi, 3rem);
  }
  .sheet-y { padding-block: clamp(1.5rem, 5cqi, 3.5rem); }
  .sheet-y-hero { padding-block: clamp(2rem, 6cqi, 4.5rem); }
  .sheet-y-compact { padding-block: clamp(.75rem, 2cqi, 1.5rem); }
}

.page-sheet :is(.grid, .flex) > *,
.page-sheet fieldset { min-width: 0; }

.page-sheet :is(p, li, dd, dt, h1, h2, h3, code, pre, a, span, label, button),
.page-sheet .font-display,
.page-sheet .file-drop > span { overflow-wrap: anywhere; }

.page-sheet .font-display.leading-none { line-height: 1.3; }
.page-sheet .sheet-y-hero > p { max-width: 44rem; }

.page-sheet :is(ol, ul).even-grid-4,
.page-sheet ol[class~="@min-[50rem]/sheet:grid-cols-4"],
.page-sheet ul[class~="@min-[50rem]/sheet:grid-cols-4"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@container sheet (min-width: 32rem) {
  .page-sheet :is(ol, ul).even-grid-4,
  .page-sheet ol[class~="@min-[50rem]/sheet:grid-cols-4"],
  .page-sheet ul[class~="@min-[50rem]/sheet:grid-cols-4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container sheet (min-width: 64rem) {
  .page-sheet :is(ol, ul).even-grid-4,
  .page-sheet ol[class~="@min-[50rem]/sheet:grid-cols-4"],
  .page-sheet ul[class~="@min-[50rem]/sheet:grid-cols-4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page-sheet .even-grid-2,
.page-sheet [class~="@min-[50rem]/sheet:grid-cols-2"],
.page-sheet [class~="@min-[50rem]/sheet:grid-cols-3"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@container sheet (min-width: 50rem) {
  .page-sheet .even-grid-2,
  .page-sheet [class~="@min-[50rem]/sheet:grid-cols-2"],
  .page-sheet [class~="@min-[50rem]/sheet:grid-cols-3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-sheet .consult-split,
.page-sheet .flow-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  min-width: 0;
}
.page-sheet .consult-split {
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  flex: 1 1 auto;
}
.page-sheet .case-card-panel {
  max-height: 5.5rem;
  overflow: auto;
}
@container sheet (min-width: 48rem) {
  .page-sheet .consult-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }
  .page-sheet .flow-split {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: start;
  }
  .page-sheet .consult-chat,
  .page-sheet .case-card-panel {
    min-height: 0;
    max-height: 100%;
  }
  .page-sheet .case-card-panel {
    overflow: auto;
  }
}

.page-sheet .form-grid-2,
.page-sheet [class~="md:grid-cols-2"],
.page-sheet [class~="sm:grid-cols-2"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.page-sheet .form-span-2,
.page-sheet [class~="md:col-span-2"],
.page-sheet [class~="sm:col-span-2"] {
  grid-column: auto;
}
@container sheet (min-width: 48rem) {
  .page-sheet .form-grid-2,
  .page-sheet [class~="md:grid-cols-2"],
  .page-sheet [class~="sm:grid-cols-2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-sheet .form-span-2,
  .page-sheet [class~="md:col-span-2"],
  .page-sheet [class~="sm:col-span-2"] {
    grid-column: span 2 / span 2;
  }
}

.page-sheet .chip-scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.page-sheet .chip-scroller-inner {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}

.page-sheet .cta-cluster {
  display: flex;
  width: 100%;
  max-width: min(100%, 36rem);
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.75rem;
}

.page-sheet .guide-row,
.page-sheet .kv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@container sheet (min-width: 24rem) {
  .page-sheet .guide-row {
    grid-template-columns: minmax(0, 8em) minmax(0, 1fr);
  }
  .page-sheet .kv-row {
    grid-template-columns: minmax(0, 6.5em) minmax(0, 1fr);
  }
}

.page-sheet header nav a,
.page-sheet footer a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: .5rem;
}

.page-sheet button:not(.sr-only) { min-height: 2.75rem; }
.page-sheet :is(input, textarea, select) { font-size: max(1rem, 1em); }
.page-sheet .file-drop > span {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.page-sheet .file-drop input[type="file"] { width: 100%; max-width: 100%; }

@media (max-height: 30rem) {
  .sheet-y-hero { padding-block: 1.5rem; }
  .sheet-y { padding-block: 1.5rem; }
}

.outer-dock,
.outer-dock-space {
  display: none;
}
@container sheet (max-width: 32rem) {
  .outer-dock-space {
    display: block;
    flex-shrink: 0;
    height: var(--dock-clearance);
    pointer-events: none;
  }
  .outer-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding-top: 0.55rem;
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    padding-bottom: max(0.55rem, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-line, #2a3140);
    background: color-mix(in srgb, #1e2f4a 92%, transparent);
    backdrop-filter: blur(10px);
  }
  .outer-dock a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding-inline: 0.5rem;
    font-size: 0.95rem;
    text-align: center;
  }
  .page-sheet:has(.consult-page) > footer,
  .page-sheet:has(.consult-page) .outer-dock,
  .page-sheet:has(.consult-page) .outer-dock-space {
    display: none;
  }
}

.consult-page,
.consult-chat {
  min-height: 0;
}
html:has(.consult-page),
html:has(.consult-page) body {
  height: 100%;
  overflow: hidden;
}
html:has(.consult-page) .page-sheet {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}
html:has(.consult-page) .page-sheet > footer {
  display: none;
}

@media (max-height: 36rem) {
  .sheet-y-hero { padding-block: 1rem; }
  .sheet-y { padding-block: 0.85rem; }
  .page-sheet .consult-split {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
  }
  .page-sheet .flow-split {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .page-sheet .form-grid-2,
  .page-sheet [class~="md:grid-cols-2"],
  .page-sheet [class~="sm:grid-cols-2"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .page-sheet .form-span-2,
  .page-sheet [class~="md:col-span-2"],
  .page-sheet [class~="sm:col-span-2"] {
    grid-column: auto !important;
  }
  .page-sheet :is(ol, ul).even-grid-4,
  .page-sheet .even-grid-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .page-sheet .case-card-panel {
    max-height: 7.5rem;
    overflow: auto;
    order: 2;
  }
  .consult-chat { order: 1; min-height: 0; }
}

@media (orientation: landscape) and (max-height: 30rem) {
  .page-sheet .consult-split,
  .page-sheet .flow-split {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .page-sheet .cta-cluster {
    max-width: 100%;
  }
}