/* Summary tiles: one shared phone rule for every tile row in the app
   (CLAUDE.md §8b, Phone layout rules). Desktop is each page's own tile CSS,
   untouched; under 900px every row that opts in collapses to ONE compact
   line of numbers, e.g. "1 active · 0 this week · 7 stuck › · 20 done".

   Markup, added alongside a page's own classes:
     row     class="kt-row"
     tile    class="kt" data-s="active"      data-s: the short phone label, after the number
             + kt-att                         needs attention: warning colour
             + kt-go                          tappable on the line (gets "›"); give the tile its own
                                              onclick / data-act, or a kt-go-only handler
             + kt-on                          its filter is on: underlined on the line
     value   class="kt-n"                     the number (or a short value) shown on the line
     prefix  class="kt-p"                     optional, shown before the value ("REI 12 h")
             or data-p="oldest" on the tile   a phone-only prefix ("oldest Oct 3")
     wrapper class="kt-w"                     an inner box holding kt-p / kt-n: flattened
   Everything else in a tile (long label, icon, sub-line, chevron) is hidden
   on the line. Anything in the row that isn't a .kt (a drawer, a note) takes
   a full line below it. Linked from index.html, dashboard.html, products.html,
   admin.html and ipm-dashboard.html. */
@media (max-width: 900px) {
  .kt-row {
    display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 2px 0 !important;
    grid-template-columns: none !important; padding: 0 !important; background: none !important;
    border: 0 !important; box-shadow: none !important; min-height: 0 !important;
    margin: 0 0 10px !important; font-size: 13.5px; line-height: 1.5; color: var(--ink2, #5b6560);
  }
  .kt-row > .kt {
    display: inline-flex !important; align-items: baseline; gap: 4px; flex: 0 0 auto !important;
    width: auto !important; min-width: 0 !important; min-height: 0 !important; height: auto !important;
    margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important;
    border-radius: 0 !important; box-shadow: none !important; grid-column: auto !important; order: 0 !important;
    font: inherit !important; color: inherit !important; text-align: left; white-space: nowrap;
    animation: none !important; transform: none !important; opacity: 1 !important; cursor: default;
  }
  .kt-row > .kt::before { content: attr(data-p); }
  /* the separator: a dot at the END of each item that has another after it, so
     a line that wraps ends in "·" and the next one never starts with it */
  .kt-row > .kt:has(+ .kt) {
    padding-right: 17px !important;
    background: radial-gradient(circle, var(--ink3, #7c857f) 0 1.6px, transparent 2.1px) no-repeat right 5px center / 6px 6px !important;
  }
  .kt-row > .kt::after { content: attr(data-s); }
  .kt-row > .kt.kt-go::after { content: attr(data-s) " \203a"; }
  .kt-row .kt > :not(.kt-n):not(.kt-p):not(.kt-w),
  .kt-row .kt-w > :not(.kt-n):not(.kt-p) { display: none !important; }
  .kt-row .kt-w { display: contents !important; }
  .kt-row .kt-n, .kt-row .kt-p {
    display: inline !important; font-size: inherit !important; line-height: inherit !important;
    margin: 0 !important; padding: 0 !important; letter-spacing: normal !important; text-transform: none !important;
  }
  .kt-row .kt-n { font-weight: 700 !important; color: var(--ink, #1d2b21) !important; }
  .kt-row .kt-p { font-weight: 400 !important; color: inherit !important; }
  .kt-row .kt-n small { font-size: inherit !important; font-weight: 700 !important; color: inherit !important; margin-left: 3px !important; }
  .kt-row > .kt.kt-att, .kt-row > .kt.kt-att .kt-n { color: var(--warn, #b4552f) !important; }
  .kt-row > .kt.kt-att { font-weight: 600 !important; }
  .kt-row > .kt.kt-go { cursor: pointer; }
  .kt-row > .kt.kt-go:active { opacity: .6 !important; }
  .kt-row > .kt.kt-on { text-decoration: underline !important; text-underline-offset: 3px; }
  .kt-row > :not(.kt) { flex: 0 0 100% !important; order: 99 !important; }
}