/* ── Kurdinator responsive layer ────────────────────────────────────────────
   These pages were laid out for a desktop canvas with inline styles, so there
   are no classes to hook and no breakpoints to extend. responsive.js measures
   the live layout on a narrow screen and tags the containers that failed —
   a grid whose columns have collapsed to a few characters wide, a block still
   sized for a wide viewport, a pane pinned to the full height. The rules below
   are what those tags mean. Nothing here applies above 820px.
   ------------------------------------------------------------------------- */
@media (max-width: 820px) {

  /* Grid items are floored at zero so a long cell cannot widen its track past
     the viewport. This is what stops a single-column layout overflowing. */
  html.k-rsp [data-k-minw="1"] > * { min-width: 0; }

  /* A multi-column grid squeezed under ~150px per column stops being a layout
     and becomes a word ladder. One column, full width. */
  html.k-rsp [data-k-stack="1"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Card rows of four or more stay two-up: they read as a set, and at this
     width one-up would turn a glance into a scroll. */
  html.k-rsp [data-k-stack="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Cells placed with grid-column / grid-row create their own extra tracks, so
     changing the template alone leaves the old columns standing. Releasing the
     placement is what actually collapses the layout. */
  html.k-rsp [data-k-stack] > * {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* Long unbroken strings (slugs, emails, ids) must not set the page width. */
  html.k-rsp [data-k-stack] > *,
  html.k-rsp [data-k-wrap="1"] {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* A row of controls that had room on a desktop and now sits on top of its
     own label: let it wrap instead. */
  html.k-rsp [data-k-flexwrap="1"] {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
    align-items: flex-start !important;
  }

  /* A block still sized for a wide viewport — a Gantt strip, a date ruler, a
     wide table — scrolls inside its own container rather than widening the
     page. Momentum scrolling, no visible bar. */
  html.k-rsp [data-k-scrollx="1"] {
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html.k-rsp [data-k-scrollx="1"]::-webkit-scrollbar { display: none; }

  /* A full-height pinned pane (the workspace sidebar) becomes a normal band at
     the top of the page once the shell is a single column. */
  html.k-rsp [data-k-unpin="1"] {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Anything scaled down to fit a desktop column was scaled against a width
     that no longer exists, which is what clips it. */
  html.k-rsp [data-k-unscale="1"] {
    transform: none !important;
    zoom: 1 !important;
  }

  /* A desktop gutter on a phone. box-sizing is set as well: where it was
     never declared, the padding is what pushed the element past the viewport. */
  html.k-rsp [data-k-pad="1"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* A finger-sized hit area drawn over the control rather than around it, so
     the visual rhythm of the design does not move at all. */
  html.k-rsp [data-k-tap="1"] { position: relative; }
  html.k-rsp [data-k-tap="1"]::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    min-width: 44px; min-height: 44px;
    border-radius: inherit;
  }

  /* Deliberately NOT overflow-x:hidden on html or body. It would hide a
     sideways scroll rather than fix one, and it makes the html element its own
     scroll container, which breaks position:sticky and momentum scrolling on
     iOS and makes documentElement.scrollHeight report a single viewport — so
     the page would also stop being measurable. Overflow is fixed at its
     source, above. */
}
