/* The Pages job (mock 15, founder 2026-10-26): the explorer as the mock draws it —
   one row with the query field (filter inside) and the View button, a quiet summary,
   and the results in their own cards. Born token-only (shell_css_literal_ratchet). */

.kk-dash .kk-explorer { display: grid; gap: var(--kk-s-2); border: 0; background: none; box-shadow: none; }
.kk-dash .kk-explorer > * + * { border-top: 0; }
.kk-dash .kk-explorer-controls { display: flex; align-items: flex-start; gap: var(--kk-s-2); padding: 0; overflow: visible; }
.kk-dash .kk-explorer-controls > .kk-explorer-query { flex: 1 1 auto; min-width: 0; }
/* Compact, as the mock's .xbar: a 32px field with body-size text. The 16px field
   floor applies only on touch screens (founder 2026-10-25), never by width. */
.kk-dash .kk-explorer-controls .kk-sfilter-field {
  min-height: var(--kk-s-6); padding: 0 2px 0 var(--kk-s-2); align-items: center; border-radius: var(--kk-r-button); background: var(--kk-card);
}
.kk-dash .kk-explorer-controls .kk-sfilter-glass { margin-top: 0; }
.kk-dash .kk-explorer-controls .kk-sfilter-field input { height: calc(var(--kk-s-6) - var(--kk-s-1)); font-size: var(--kk-fs-body); }
@media (hover: none) and (pointer: coarse) {
  .kk-dash .kk-explorer-controls .kk-sfilter-field input { font-size: var(--kk-fs-input); }
}
.kk-dash .kk-explorer-summary { padding: 0; color: var(--kk-text-soft); font: 500 var(--kk-fs-meta) / 1.4 var(--kk-font-ui); letter-spacing: 0; text-transform: none; }
.kk-dash .kk-explorer-summary strong { color: var(--kk-ink); }

/* The View button and its menu (mock .vbtn / .vmenu / .vm-r). */
.kk-explorer-viewmenu { flex: none; }
.kk-explorer-vbtn {
  min-height: var(--kk-s-6); display: inline-flex; align-items: center; gap: var(--kk-s-2);
  padding: 0 var(--kk-s-2) 0 var(--kk-s-3); border: 0; border-radius: var(--kk-r-button); background: var(--kk-card);
  box-shadow: inset 0 0 0 1px var(--kk-border); color: var(--kk-text); font: 500 var(--kk-fs-body) / 1 var(--kk-font-ui);
  white-space: nowrap; cursor: pointer;
}
.kk-explorer-vbtn svg { color: var(--kk-text-soft); }
.kk-explorer-vbtn:hover, .kk-explorer-vbtn[aria-expanded="true"] { background: var(--kk-fill-soft, var(--kk-fill)); }
.kk-dash .kk-explorer-vmenu {
  width: 15rem; max-height: min(80vh, 36rem); display: grid; padding: var(--kk-s-1); border: 0;
  border-radius: var(--kk-r-cell); background: var(--kk-card); box-shadow: 0 0 0 1px var(--kk-line), var(--kk-shadow-lg);
}
.kk-dash .kk-explorer-vmenu[hidden] { display: none; }
.kk-explorer-vhead { padding: var(--kk-s-2) var(--kk-s-2) var(--kk-s-1); color: var(--kk-text-soft); font: 500 var(--kk-fs-meta) / 1 var(--kk-font-ui); }
.kk-dash .kk-explorer-vmenu .kk-explorer-views { display: grid; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.kk-dash .kk-explorer-vmenu a,
.kk-dash .kk-explorer-vmenu .kk-explorer-views a,
.kk-explorer-vrow > summary {
  width: auto; min-width: 0; height: auto; min-height: var(--kk-s-6); display: flex; align-items: center;
  justify-content: space-between; gap: var(--kk-s-2); padding: 0 var(--kk-s-2); border-radius: var(--kk-r-sm);
  background: none; box-shadow: none; color: var(--kk-text); font: 500 var(--kk-fs-body) / 1.2 var(--kk-font-ui); text-decoration: none;
}
.kk-dash .kk-explorer-vmenu a:hover,
.kk-dash .kk-explorer-vmenu .kk-explorer-views a.is-active,
.kk-dash .kk-explorer-vmenu a[aria-checked="true"],
.kk-explorer-vrow > summary:hover { background: var(--kk-fill-soft, var(--kk-fill)); color: var(--kk-ink); }
.kk-explorer-vlabel { display: inline-flex; align-items: center; gap: var(--kk-s-2); }
.kk-explorer-vlabel svg { color: var(--kk-text-soft); }
.kk-dash .kk-explorer-vmenu .kk-explorer-actions,
.kk-explorer-vfoot { display: grid; margin-top: var(--kk-s-1); padding-top: var(--kk-s-1); border-top: 1px solid var(--kk-line); }
.kk-explorer-vrow > summary { list-style: none; cursor: pointer; }
.kk-explorer-vrow > summary::-webkit-details-marker { display: none; }
.kk-explorer-vval { color: var(--kk-text-soft); font-size: var(--kk-fs-meta); }
.kk-explorer-vopts { display: grid; padding: 0 0 var(--kk-s-1) var(--kk-s-6); }
.kk-dash .kk-explorer-vopts a { min-height: var(--kk-s-6); font-size: var(--kk-fs-meta); }
.kk-dash .kk-explorer-vfoot .kk-explorer-reset { height: auto; }

/* Saved views in the filter panel: rows to open, one clear Save, tidy typing tips. */
.kk-dash .kk-explorer-controls > .kk-explorer-query { padding: 0; }
.kk-saved-rows { display: grid; }
.kk-saved-row { display: flex; align-items: center; gap: var(--kk-s-1); }
.kk-saved-row .kk-chip-saved {
  flex: 1; min-width: 0; min-height: var(--kk-s-6); display: inline-flex; align-items: center; gap: var(--kk-s-2);
  padding: 0 var(--kk-s-2); border-radius: var(--kk-r-sm); color: var(--kk-text); font: 500 var(--kk-fs-body) / 1.2 var(--kk-font-ui); text-decoration: none;
}
.kk-saved-row .kk-chip-saved span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-saved-row .kk-chip-saved svg { color: var(--kk-text-soft); }
.kk-saved-row .kk-chip-saved:hover, .kk-saved-row .kk-chip-saved.is-active { background: var(--kk-fill-soft, var(--kk-fill)); color: var(--kk-ink); }
.kk-saved-row .kk-chip-remove { width: var(--kk-s-5); height: var(--kk-s-5); display: grid; place-items: center; border: 0; border-radius: var(--kk-r-sm); background: none; color: var(--kk-text-soft); cursor: pointer; }
.kk-saved-row .kk-chip-remove:hover { background: var(--kk-fill); color: var(--kk-ink); }
.kk-sfilter-saved a.kk-chip-save {
  min-height: var(--kk-s-6); display: inline-flex; align-items: center; gap: var(--kk-s-2); padding: 0 var(--kk-s-2);
  border-radius: var(--kk-r-sm); color: var(--kk-ink); font: 600 var(--kk-fs-body) / 1 var(--kk-font-ui); text-decoration: none;
}
.kk-sfilter-saved a.kk-chip-save:hover { background: var(--kk-fill-soft, var(--kk-fill)); }
.kk-sfilter-saved .kk-chip-save.is-hint { display: block; padding: 0 var(--kk-s-2); color: var(--kk-text-soft); font: 400 var(--kk-fs-meta) / 1.5 var(--kk-font-ui); }
dl.kk-sfilter-hint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kk-s-1) var(--kk-s-2); margin: var(--kk-s-2) 0 0; padding: var(--kk-s-2) var(--kk-s-2) 0; border-top: 1px solid var(--kk-line); }
dl.kk-sfilter-hint dt { width: 100%; color: var(--kk-text-soft); font: 600 var(--kk-fs-micro) / 1.4 var(--kk-font-ui); }
dl.kk-sfilter-hint dd { margin: 0; color: var(--kk-text-soft); font-size: var(--kk-fs-meta); }

/* The count line is the field's placeholder; kept for screen readers only. */
.kk-dash .kk-explorer-summary.is-quiet {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* The Bookmarked head reads as a quiet label in sentence case (founder 2026-10-26:
   "change to title not capital all"). */
.kk-dash [data-starred] .kk-group-head .g-name {
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--kk-text-soft); font: 600 var(--kk-fs-meta) / 1.4 var(--kk-font-ui); letter-spacing: 0; text-transform: none;
}

/* The Type group's hand-off to canvases, and a greyed top-bar action. */
.kk-sfilter-canvases {
  display: flex; align-items: center; gap: var(--kk-s-2); margin-top: var(--kk-s-2); padding: var(--kk-s-1) var(--kk-s-2);
  border-radius: var(--kk-r-sm); color: var(--kk-text-soft); font: 500 var(--kk-fs-meta) / 1.4 var(--kk-font-ui); text-decoration: none;
}
a.kk-sfilter-canvases:hover { background: var(--kk-fill-soft, var(--kk-fill)); color: var(--kk-ink); }
.kk-sfilter-canvases.is-greyed { opacity: .6; }
.kk-command-control.is-greyed { opacity: .55; }
.kk-command-control .lbl { margin-left: var(--kk-s-1); font-size: var(--kk-fs-meta); }

/* Job pages (Publish, Collect): an intro line, Running now, then compact cards in a
   grid — one line each; the sheet carries the rest (progressive disclosure). */
.kk-job-intro { margin: 0; color: var(--kk-text-soft); font-size: var(--kk-fs-body); }
.kk-job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--kk-s-2); }
.kk-job-card {
  display: flex; align-items: flex-start; gap: var(--kk-s-3); min-width: 0; padding: var(--kk-s-3); border-radius: var(--kk-r-cell);
  background: var(--kk-card); box-shadow: 0 0 0 1px var(--kk-line); color: var(--kk-text);
}
button.kk-job-card-t { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.kk-job-card-open {
  justify-self: start; margin-top: var(--kk-s-1); padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--kk-accent-text); font: 600 var(--kk-fs-meta) / 1.4 var(--kk-font-ui); text-decoration: none;
}
.kk-job-card-open:hover { text-decoration: underline; text-underline-offset: 3px; }
.kk-job-facts { display: flex; flex-wrap: wrap; gap: var(--kk-s-1) var(--kk-s-4); margin: 0; font-size: var(--kk-fs-body); }
.kk-job-addr { font-family: var(--kk-font-mono); }
.kk-job-state { padding: 0 var(--kk-s-1); border-radius: var(--kk-r-xs); background: var(--kk-fill); color: var(--kk-text-soft); font: 600 var(--kk-fs-micro) / 1.6 var(--kk-font-mono); text-transform: uppercase; }
.kk-job-state.is-live { background: var(--kk-ok-soft, var(--kk-fill)); color: var(--kk-ok, var(--kk-ink)); }
.kk-job-card:hover { box-shadow: 0 0 0 1px var(--kk-border), var(--kk-shadow-sm); }
.kk-job-card.is-greyed { opacity: .6; }
.kk-job-card-m { display: grid; gap: 2px; min-width: 0; }
.kk-job-card-t { color: var(--kk-ink); font: 600 var(--kk-fs-body) / 1.3 var(--kk-font-ui); }
.kk-job-card-s { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--kk-text-soft); font-size: var(--kk-fs-meta); line-height: 1.4; }
.kk-job-tag { margin-left: var(--kk-s-1); padding: 0 var(--kk-s-1); border-radius: var(--kk-r-xs); background: var(--kk-fill); color: var(--kk-text-soft); font: 600 var(--kk-fs-micro) / 1.6 var(--kk-font-ui); }
.kk-job-sheet-h { margin: var(--kk-s-2) 0 0; color: var(--kk-text-soft); font: 600 var(--kk-fs-micro) / 1.4 var(--kk-font-ui); }
.kk-job-sheet-h code { margin-left: var(--kk-s-1); font-family: var(--kk-font-mono); }
.kk-job-where { margin: 0; color: var(--kk-ink); font-size: var(--kk-fs-meta); }
/* The job page's cards sit in a Turbo frame; give its sections the page's own rhythm. */
.kk-job > turbo-frame { display: grid; gap: var(--kk-s-5); }