/* こかげ: container-width layout for Duo / foldables.
 * Keep in sync with app/globals.css (2026-09-11).
 * Load after the current global CSS. Same DOM across widths.
 */
:root {
  --sheet-pad: clamp(1rem, 4vw, 3rem);
}

.page-sheet {
  width: min(100%, 72rem);
  min-width: 0;
  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),
.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: 28rem) {
  .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 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
@container sheet (min-width: 60rem) {
  .page-sheet .consult-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.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; }
.page-sheet .chip-scroller-inner { width: max-content; }
@container sheet (min-width: 48rem) {
  .page-sheet .chip-scroller {
    margin-inline: 0;
    overflow: visible;
    padding-inline: 0;
  }
  .page-sheet .chip-scroller-inner {
    width: auto;
    flex-wrap: wrap;
  }
}

.page-sheet .cta-cluster {
  display: flex;
  width: fit-content;
  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%; }
.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; }
}