/* HK-UX-005 · Compact recipe card and private saved-library contract.
 * Loaded after the old visual system. Scoped to HK28 components; no theme or editor overrides.
 */
body:not(.wp-admin) .hk28-grid.hk28-cards-v2 {
  align-items:start;
  row-gap:clamp(20px,2.15vw,32px);
  column-gap:clamp(12px,1.6vw,22px);
}
body:not(.wp-admin) .hk28-card-v2 {
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:visible;
  border:0;
  border-radius:8px;
  padding:0 0 8px;
  background:#fff;
  box-shadow:0 0 0 0 rgb(20 37 57 / 0%);
  transition:box-shadow .18s ease;
  isolation:isolate;
}
body:not(.wp-admin) .hk28-card-v2:hover,
body:not(.wp-admin) .hk28-card-v2:focus-within {
  box-shadow:0 4px 19px rgb(22 43 70 / 11%);
}
body:not(.wp-admin) .hk28-card-v2.is-menu-open {z-index:25;}
body:not(.wp-admin) .hk28-card-v2 .hk28-card-hit {
  position:absolute;
  inset:0;
  display:block;
  z-index:1;
  border-radius:8px;
  text-decoration:none;
}
body:not(.wp-admin) .hk28-card-v2 .hk28-card-hit:focus-visible {
  outline:3px solid var(--hk28-accent,#215fcb);
  outline-offset:4px;
}
body:not(.wp-admin) .hk28-card-v2 .hk28-card-visual {
  position:relative;
  flex:0 0 auto;
  min-width:0;
}
body:not(.wp-admin) .hk28-card-v2 .hk28-card-media {
  aspect-ratio:var(--hk28-ratio,3/2);
  border-radius:5px;
  overflow:hidden;
  background:#eef2f5;
}
body:not(.wp-admin) .hk28-card-v2 .hk28-card-media img {
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:var(--hk28-card-focal,center center);
  transform:none !important;
  transition:none !important;
}
body:not(.wp-admin) .hk28-card-v2:hover .hk28-card-media img,
body:not(.wp-admin) .hk28-card-v2:focus-within .hk28-card-media img {
  transform:none !important;
}
body:not(.wp-admin) .hk28-card-v2 .hk28-image-control {
  position:absolute;
  right:9px;
  bottom:9px;
  top:auto;
  z-index:4;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:rgb(23 32 42 / 76%) !important;
  color:#fff !important;
  box-shadow:0 1px 5px rgb(0 0 0 / 16%);
  cursor:pointer;
}
body:not(.wp-admin) .hk28-card-v2 .hk28-image-control:hover {
  background:rgb(19 33 53 / 95%) !important;
  box-shadow:0 2px 8px rgb(0 0 0 / 24%);
}
body:not(.wp-admin) .hk28-card-v2 .hk28-image-control .hk28-icon {
  display:inline-block;inline-size:20px;block-size:20px;
  color:#fff !important;
}
body:not(.wp-admin) .hk28-card-v2 .hk28-image-control:focus-visible {
  outline:3px solid #9fc8ff !important;
  outline-offset:2px;
}
body:not(.wp-admin) .hk28-card-v2 .hk28-card-badge {
  position:absolute;
  z-index:3;
  bottom:-11px;
  left:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  padding:2px 9px;
  border-radius:999px;
  font-size:10px;
  line-height:1;
  letter-spacing:.025em;
  font-weight:750;
  color:#fff;
  background:#5995cf;
  pointer-events:none;
}
body:not(.wp-admin) .hk28-card-v2 .hk28-badge-easy {background:#5797ce}
body:not(.wp-admin) .hk28-card-v2 .hk28-badge-moderate {background:#718b51}
body:not(.wp-admin) .hk28-card-v2 .hk28-badge-advanced {background:#976a46}
body:not(.wp-admin) .hk28-card-v2 .hk28-card-copy {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:8px 0 0;
}
body:not(.wp-admin) .hk28-card-v2 .hk28-card-copy.hk28-card-has-badge{padding-top:14px}
body:not(.wp-admin) .hk28-card-v2 .hk28-card-title {
  font-family:inherit;
  font-size:clamp(15px,1.28vw,19px) !important;
  font-weight:700 !important;
  letter-spacing:-.018em;
  line-height:1.31 !important;
  color:var(--hk28-ink,#17283b);
  margin:0 !important;
  min-height:0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}
body:not(.wp-admin) .hk28-card-v2 .hk28-card-category,
body:not(.wp-admin) .hk28-card-v2 .hk28-card-time {
  color:var(--hk28-ink,#17283b);
  font-size:12.5px;
  line-height:1.38;
  margin:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
body:not(.wp-admin) .hk28-card-v2 .hk28-card-category{color:var(--hk28-muted,#5e6d7b)}
body:not(.wp-admin) .hk28-card-v2 .hk28-card-rating {
  display:flex;align-items:center;gap:5px;
  font-size:12px;line-height:1.35;
  min-height:18px;
  color:var(--hk28-ink,#17283b);
}
body:not(.wp-admin) .hk28-card-v2 .hk28-card-unrated{color:#6b7888;font-size:11.5px}
body:not(.wp-admin) .hk28-card-v2 .hk28-rating-stars {
  position:relative;
  color:#b9c2ce;
  font-size:15px;
  letter-spacing:0;
  white-space:nowrap;
  line-height:1;
}
body:not(.wp-admin) .hk28-card-v2 .hk28-rating-filled {
  position:absolute;inset:0 auto 0 0;
  display:block;
  color:#182536;
  overflow:hidden;
  white-space:nowrap;
}
body:not(.wp-admin) .hk28-card-v2 .hk28-rating-count {font-size:12px;}
/* Contextual saved card action menu. Menu and trigger are separate from the stretched card link. */
body:not(.wp-admin) .hk28-card-v2 .hk28-card-popover {
  position:absolute;
  right:2px;
  top:calc(100% - 1px);
  z-index:40;
  width:max-content;
  min-width:220px;
  max-width:min(290px,calc(100vw - 40px));
  border-radius:8px;
  border:1px solid #dbe3ed;
  padding:5px;
  background:#fff;
  box-shadow:0 9px 25px rgb(20 35 54 / 18%);
}
body:not(.wp-admin) .hk28-card-v2 .hk28-card-popover[hidden] {display:none !important}
body:not(.wp-admin) .hk28-card-v2 .hk28-card-popover button {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  min-height:42px;
  padding:8px 10px !important;
  border:0 !important;
  border-radius:6px;
  background:#fff !important;
  color:var(--hk28-ink,#17283b) !important;
  font-size:13px;
  line-height:1.4;
  text-align:left;
  white-space:normal;
  cursor:pointer;
}
body:not(.wp-admin) .hk28-card-v2 .hk28-card-popover button:hover,
body:not(.wp-admin) .hk28-card-v2 .hk28-card-popover button:focus-visible{
  background:#eff4fb !important;
}
body:not(.wp-admin) .hk28-card-v2 .hk28-card-popover .hk28-icon {
  inline-size:18px;
  block-size:18px;
  flex:0 0 18px;
}
body:not(.wp-admin) .hk28-card-v2 .hk28-card-popover .hk28-organize {display:flex !important;}
body:not(.wp-admin) .hk28-card-v2 .hk28-card-popover .hk28-folder-remove {color:#b5323d !important;}
/* Saved workspace: title, count, search and modal filter panel. */
body:not(.wp-admin) .hk28-saved-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin:0 0 19px;
}
body:not(.wp-admin) .hk28-saved-title {min-width:0;}
body:not(.wp-admin) .hk28-saved-title h2 {
  margin:0 0 2px;
  font-size:25px;
  line-height:1.25;
  letter-spacing:-.022em;
}
body:not(.wp-admin) .hk28-saved-title p {
  font-size:13px;
  color:var(--hk28-muted,#586a7d);
  margin:0;
}
body:not(.wp-admin) .hk28-saved-search {
  width:min(340px,45%);
  min-width:210px;
  height:43px;
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid #d3dbe5;
  border-radius:6px;
  background:#fff;
  padding:0 9px;
}
body:not(.wp-admin) .hk28-saved-search > .hk28-icon {
  flex:0 0 18px;inline-size:18px;block-size:18px;color:#8290a2;
}
body:not(.wp-admin) .hk28-saved-search input[type=search] {
  flex:1;
  min-width:0;min-height:0;
  width:100%;height:100%;
  border:0 !important;
  background:transparent;
  box-shadow:none;
  outline:none;
  padding:0 !important;
  font-size:13px;
}
body:not(.wp-admin) .hk28-saved-search:focus-within {
  border-color:var(--hk28-accent,#215fcb);
  box-shadow:0 0 0 2px rgb(33 95 203 / 12%);
}
body:not(.wp-admin) .hk28-saved-search .hk28-search-submit {
  border:0!important;background:transparent!important;
  width:32px;height:32px;min-width:32px;
  padding:6px!important;display:grid;place-items:center;
  color:var(--hk28-ink,#17283b);
}
body:not(.wp-admin) .hk28-saved-filter-bar {
  display:flex;align-items:center;gap:14px;
  margin:0 0 20px;
}
body:not(.wp-admin) .hk28-open-saved-filters {
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid #d1dae5;
  background:#fff;
  border-radius:999px;
  padding:8px 13px;
  min-height:40px;
  color:var(--hk28-ink,#17283b);
  font-weight:650;font-size:13px;
}
body:not(.wp-admin) .hk28-open-saved-filters .hk28-icon {inline-size:18px;block-size:18px}
body:not(.wp-admin) .hk28-filter-indicator {width:7px;height:7px;border-radius:50%;background:var(--hk28-accent,#215fcb)}
body:not(.wp-admin) .hk28-clear-filters {color:var(--hk28-accent,#215fcb);font-size:12px;text-decoration:underline}
body:not(.wp-admin) .hk28-saved-results {margin:0 0 13px;font-size:12px;color:var(--hk28-muted,#586a7d)}
body:not(.wp-admin) .hk28-saved-pagination {display:flex;justify-content:center;align-items:center;gap:16px;margin:22px 0;font-size:13px}
body:not(.wp-admin) .hk28-saved-pagination a {padding:8px 12px;border:1px solid var(--hk28-line);border-radius:6px;text-decoration:none}
/* Flex column keeps filter header/footer fixed while only the options scroll. */
body:not(.wp-admin) .hk28-saved-filter-dialog {
  position:fixed;
  top:50%;left:50%;right:auto;bottom:auto;
  transform:translate(-50%,-50%);
  margin:0;
  width:min(570px,calc(100vw - 28px));
  max-width:calc(100vw - 28px);
  max-height:min(82dvh,740px);
  height:min(68dvh,620px);
  padding:0;
  border:1px solid #d8e0e8;
  border-radius:11px;
  background:#fff;
  box-shadow:0 15px 45px rgb(12 26 42 / 22%);
  overflow:hidden;
}
body:not(.wp-admin) .hk28-saved-filter-dialog:not([open]) {display:none}
body:not(.wp-admin) .hk28-saved-filter-dialog[open] {display:flex;flex-direction:column}
body:not(.wp-admin) .hk28-saved-filter-dialog::backdrop {background:rgb(11 23 38 / 40%)}
body:not(.wp-admin) .hk28-saved-filter-form {
  width:100%;height:100%;max-height:100%;min-height:0;
  display:flex;flex-direction:column;
}
body:not(.wp-admin) .hk28-filter-dialog-head {
  display:flex;align-items:center;justify-content:space-between;
  flex:0 0 auto;
  padding:14px 17px;
  border-bottom:1px solid #e1e6ee;
}
body:not(.wp-admin) .hk28-filter-dialog-head h3{margin:0;font-size:18px;line-height:1.4}
body:not(.wp-admin) .hk28-filter-dialog-head button {
  width:38px;height:38px;
  display:grid;place-items:center;
  border:0!important;background:transparent!important;
  padding:7px!important;
}
body:not(.wp-admin) .hk28-filter-dialog-body {
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  padding:17px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 24px;
  align-content:start;
}
body:not(.wp-admin) .hk28-filter-group {
  min-width:0;
  border:0;
  padding:0;
  margin:0;
}
body:not(.wp-admin) .hk28-filter-group legend {
  display:block;
  width:100%;
  margin:0 0 9px;
  padding:0;
  font-size:12px;font-weight:750;letter-spacing:.025em;
  text-transform:uppercase;
  color:var(--hk28-ink,#17283b);
}
body:not(.wp-admin) .hk28-filter-option {
  display:flex;align-items:flex-start;gap:9px;
  min-height:32px;padding:5px 0;
  color:var(--hk28-ink,#17283b);
  font-size:13px;line-height:1.4;
  cursor:pointer;
}
body:not(.wp-admin) .hk28-filter-option input {
  flex:0 0 17px;inline-size:17px;block-size:17px;margin:1px 0 0;
  accent-color:var(--hk28-accent,#215fcb);
}
body:not(.wp-admin) .hk28-filter-option small{color:var(--hk28-muted,#586a7d);font-size:12px}
body:not(.wp-admin) .hk28-filter-group select{width:100%;min-height:42px;font-size:13px}
body:not(.wp-admin) .hk28-filter-dialog-footer {
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 17px;
  border-top:1px solid #e1e6ee;
  background:#fff;
}
body:not(.wp-admin) .hk28-filter-dialog-footer .hk28-filter-reset,
body:not(.wp-admin) .hk28-filter-dialog-footer .hk28-filter-apply {
  flex:1 1 0;
  min-height:42px;
  border-radius:7px;
  padding:10px 13px;
  text-decoration:none;
  text-align:center;
  display:flex;align-items:center;justify-content:center;
  font-weight:650;font-size:13px;
}
body:not(.wp-admin) .hk28-filter-dialog-footer .hk28-filter-reset {
  background:#fff;color:var(--hk28-ink,#17283b);
  border:1px solid #d4dde8;
}
body:not(.wp-admin) .hk28-filter-dialog-footer .hk28-filter-apply {
  background:var(--hk28-accent,#215fcb) !important;
  color:#fff !important;border:1px solid var(--hk28-accent,#215fcb) !important;
}
@media(max-width:760px){
 body:not(.wp-admin) .hk28-grid.hk28-cards-v2{column-gap:10px;row-gap:20px}
 body:not(.wp-admin) .hk28-card-v2 .hk28-card-title{font-size:14px!important}
 body:not(.wp-admin) .hk28-card-v2 .hk28-card-category,
 body:not(.wp-admin) .hk28-card-v2 .hk28-card-time{font-size:11.5px}
 body:not(.wp-admin) .hk28-card-v2 .hk28-image-control{width:44px;height:44px;min-width:44px;min-height:44px;right:5px;bottom:5px}
 body:not(.wp-admin) .hk28-card-v2 .hk28-card-copy{gap:2px;padding-top:7px}
 body:not(.wp-admin) .hk28-card-v2 .hk28-card-copy.hk28-card-has-badge{padding-top:15px}
 body:not(.wp-admin) .hk28-card-v2 .hk28-rating-stars{font-size:13px}
 body:not(.wp-admin) .hk28-saved-top{flex-wrap:wrap;gap:12px}
 body:not(.wp-admin) .hk28-saved-title{flex:1 1 auto}
 body:not(.wp-admin) .hk28-saved-search{flex:1 1 100%;width:100%;min-width:0}
 body:not(.wp-admin) .hk28-saved-filter-dialog{top:auto;bottom:0;left:0;right:0;transform:none;width:100%;max-width:100%;height:min(83dvh,720px);max-height:90dvh;border-radius:16px 16px 0 0;border-bottom:0}
 body:not(.wp-admin) .hk28-saved-filter-form{height:100%}
 body:not(.wp-admin) .hk28-filter-dialog-body{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 12px;padding:14px}
 body:not(.wp-admin) .hk28-filter-dialog-footer{padding-bottom:max(12px,env(safe-area-inset-bottom))}
}
@media(max-width:390px){
 body:not(.wp-admin) .hk28-filter-dialog-body{grid-template-columns:minmax(0,1fr)}
 body:not(.wp-admin) .hk28-card-v2 .hk28-card-title{font-size:13px!important}
 body:not(.wp-admin) .hk28-card-v2 .hk28-card-badge{font-size:9px;height:20px;bottom:-10px}
}
@media(hover:none){
 body:not(.wp-admin) .hk28-card-v2:hover{box-shadow:none}
 body:not(.wp-admin) .hk28-card-v2:focus-within{box-shadow:0 3px 14px rgb(22 43 70 / 9%)}
}
@media(prefers-reduced-motion:reduce){
 body:not(.wp-admin) .hk28-card-v2{transition:none}
}