/* KYBOND DATA UI v1 — shared shell for search/list/data pages.
   Page-specific CSS remains authoritative for business details; this file
   standardizes density, spacing and mobile behavior across compatible pages. */
:root {
  --ky-orange:#ff7a00;
  --ky-ink:#111;
  --ky-muted:#6a6862;
  --ky-paper:#efeee8;
  --ky-surface:#fff;
  --ky-soft:#f7f6f2;
  --ky-line:#b5b2aa;
  --ky-line-soft:#d9d6cf;
  --ky-radius:0;
  --ky-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --ky-sans:Inter,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --ky-page:min(1480px,calc(100% - 40px));
  --ky-section-gap:18px;
}
body.ky-data-page {
  background:var(--ky-paper);
  color:var(--ky-ink);
  font-family:var(--ky-sans);
}
.ky-data-page .ky-ui-eyebrow {
  color:#7a450f;
  font:850 10px/1.25 var(--ky-mono);
  letter-spacing:1.25px;
  text-transform:uppercase;
}
.ky-data-page .ky-ui-soft-action {
  min-height:34px;
  padding:0;
  border:0;
  border-bottom:1px solid currentColor;
  color:#5f5c55;
  background:transparent;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
}
.ky-data-page .ky-ui-soft-action:hover,
.ky-data-page .ky-ui-soft-action:focus-visible { color:var(--ky-orange); }
.ky-data-page .ky-ui-chipbar {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}
.ky-data-page .ky-ui-chipbar[hidden]{display:none}
.ky-data-page .ky-ui-chip {
  min-height:30px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 10px;
  border:1px solid #aaa79f;
  background:#f5f3ee;
  color:#292824;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.ky-data-page .ky-ui-chip:hover,
.ky-data-page .ky-ui-chip:focus-visible {
  border-color:var(--ky-orange);
  background:#fff3e7;
}
.ky-data-page .ky-ui-chip b {
  color:#8a4b10;
  font:900 12px/1 var(--ky-mono);
}
.ky-data-page .ky-ui-filter-toggle {
  display:none;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:42px;
  margin-top:14px;
  padding:0 12px;
  border:1px solid #aaa79f;
  background:#f7f5f0;
  color:#24231f;
  font-weight:850;
  cursor:pointer;
}
.ky-data-page .ky-ui-filter-toggle::after {
  content:"＋";
  color:#8a4b10;
  font:900 16px/1 var(--ky-mono);
}
.ky-data-page .ky-ui-filter-toggle[aria-expanded="true"]::after { content:"－"; }

/* Rules sample page */
.rules-data-page .rules-page { padding-top:24px; }
.rules-data-page .rules-hero {
  grid-template-columns:minmax(0,1fr) 280px;
  gap:22px;
  align-items:stretch;
  padding:30px 34px;
}
.rules-data-page .rules-hero h1 {
  font-size:clamp(34px,4.2vw,58px);
  line-height:1;
  letter-spacing:-2.4px;
}
.rules-data-page .hero-summary {
  max-width:920px;
  margin-top:18px;
  font-size:14px;
  line-height:1.72;
}
.rules-data-page .scope-card {
  min-height:0;
  align-content:center;
  padding:18px 20px;
}
.rules-data-page .scope-card strong { font-size:17px; line-height:1.5; }
.rules-data-page .stats div { min-height:90px; padding:16px 20px; }
.rules-data-page .stats span { font-size:29px; }
.rules-data-page .search-panel,
.rules-data-page .results,
.rules-data-page .source-note { margin-top:16px; }
.rules-data-page .search-panel { padding:24px; }
.rules-data-page .search-box { margin-top:20px; }
.rules-data-page .search-input-wrap input { height:52px; }
.rules-data-page .filters { margin-top:12px; }
.rules-data-page .filter-chip-row { margin-top:12px; padding-top:11px; border-top:1px solid #ddd9d1; }
.rules-data-page .rule-card {
  grid-template-columns:185px minmax(0,1fr) 145px;
  gap:20px;
  padding:20px 0;
}
.rules-data-page .rule-card__source { gap:6px; }
.rules-data-page .rule-card h3 { font-size:17px; line-height:1.48; }
.rules-data-page .excerpt {
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  margin-top:9px;
  line-height:1.65;
}
.rules-data-page .rule-card__meta { gap:7px; }

/* Monitor + punishment pages share the same data-page rhythm without
   flattening their business-specific controls. */
.monitor-data-page .monitor-main,
.punish-data-page .punish-main { padding-top:22px; }
.monitor-data-page .monitor-hero__inner,
.punish-data-page .punish-hero__inner { min-height:0; }
.monitor-data-page .monitor-hero__copy>p,
.punish-data-page .punish-hero__copy>p { max-width:880px; }
.monitor-data-page .market-metric,
.punish-data-page .summary-metric { min-height:118px; }
.monitor-data-page .workspace-panel,
.punish-data-page .workspace-panel { box-shadow:none; }

/* Mobile: get users to search/results fast. */
@media (max-width:760px) {
  :root { --ky-page:calc(100% - 24px); --ky-section-gap:12px; }

  .ky-data-page .ky-ui-filter-toggle { display:flex; }

  /* Rules: compact hero + swipeable KPI strip */
  .rules-data-page .rules-page {
    width:calc(100% - 24px);
    padding:12px 0 42px;
  }
  .rules-data-page .rules-hero {
    grid-template-columns:1fr;
    gap:14px;
    padding:20px 18px;
    border-top-width:4px;
  }
  .rules-data-page .rules-hero .eyebrow { margin-bottom:9px; font-size:9px; }
  .rules-data-page .rules-hero h1 {
    font-size:clamp(31px,9vw,39px);
    line-height:1.05;
    letter-spacing:-1.5px;
  }
  .rules-data-page .hero-summary {
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    margin-top:13px;
    font-size:13px;
    line-height:1.65;
  }
  .rules-data-page .scope-card {
    display:grid;
    min-height:0;
    gap:4px;
    padding:11px 12px;
    border-left-width:3px;
    color:#fff;
    background:#171717;
  }
  .rules-data-page .scope-card span,
  .rules-data-page .scope-card small { color:#aaa; font-size:9px; }
  .rules-data-page .scope-card strong { color:#fff; font-size:13px; line-height:1.45; }

  .rules-data-page .stats {
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:8px 0 10px;
    border:0;
    background:transparent;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .rules-data-page .stats::-webkit-scrollbar { display:none; }
  .rules-data-page .stats div,
  .rules-data-page .stats div:nth-child(n) {
    flex:0 0 126px;
    min-height:82px;
    align-content:center;
    padding:12px 14px;
    border:1px solid #c7c4bc;
    background:#fff;
    scroll-snap-align:start;
  }
  .rules-data-page .stats span { font-size:27px; }
  .rules-data-page .stats small { font-size:10px; }

  .rules-data-page .search-panel,
  .rules-data-page .results,
  .rules-data-page .source-note { margin-top:12px; }
  .rules-data-page .search-panel { padding:17px 16px 18px; }
  .rules-data-page .section-heading { align-items:center; }
  .rules-data-page .section-heading .eyebrow { margin-bottom:7px; }
  .rules-data-page .section-heading h2 { font-size:20px; line-height:1.25; }
  .rules-data-page .text-button {
    min-height:30px;
    padding:0;
    border:0;
    border-bottom:1px solid currentColor;
    font-size:10px;
  }
  .rules-data-page .text-button:hover { color:var(--ky-orange); background:transparent; }
  .rules-data-page .search-box { margin-top:17px; }
  .rules-data-page .search-box>label { font-size:11px; }
  .rules-data-page .search-input-wrap { margin-top:6px; }
  .rules-data-page .search-input-wrap input {
    height:48px;
    padding-left:42px;
    font-size:14px;
  }
  .rules-data-page .search-input-wrap>span { left:14px; font-size:19px; }
  .rules-data-page .filters {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin-top:10px;
  }
  .rules-data-page .filters[data-collapsed="true"] { display:none; }
  .rules-data-page .filters label { gap:6px; font-size:10px; }
  .rules-data-page .filters select {
    height:40px;
    padding:0 27px 0 9px;
    font-size:12px;
  }
  .rules-data-page .filter-chip-row { margin-top:10px; padding-top:10px; }

  .rules-data-page .results { padding:0 16px 16px; }
  .rules-data-page .results-bar {
    min-height:62px;
    align-items:center;
  }
  .rules-data-page .results-bar h2 { font-size:21px; }
  .rules-data-page .results-bar p { font-size:9px; }
  .rules-data-page .rule-card {
    grid-template-columns:1fr;
    gap:8px;
    padding:16px 0;
  }
  .rules-data-page .rule-card__source {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:5px 9px;
  }
  .rules-data-page .rule-card__source .authority { font-size:12px; }
  .rules-data-page .rule-card__source .market,
  .rules-data-page .rule-card__source .date { font-size:9px; }
  .rules-data-page .rule-card h3 { font-size:16px; line-height:1.48; }
  .rules-data-page .document-number { margin-top:5px; font-size:9px; }
  .rules-data-page .excerpt {
    margin-top:7px;
    -webkit-line-clamp:2;
    font-size:12px;
    line-height:1.6;
  }
  .rules-data-page .rule-card__meta {
    grid-column:1;
    grid-row:auto;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-items:start;
    gap:6px;
  }
  .rules-data-page .category { max-width:none; text-align:left; }
  .rules-data-page .rule-dialog {
    width:100vw;
    max-width:none;
    height:100dvh;
    max-height:100dvh;
    margin:0;
    border-width:0;
    border-top:4px solid var(--ky-orange);
  }
  .rules-data-page .dialog-head {
    padding:16px;
    padding-top:max(16px,env(safe-area-inset-top));
  }
  .rules-data-page .dialog-head h2 { font-size:18px; }
  .rules-data-page .dialog-meta,
  .rules-data-page .dialog-links,
  .rules-data-page .dialog-changes,
  .rules-data-page .dialog-text { margin-left:14px; margin-right:14px; }
  .rules-data-page .dialog-meta { margin-top:14px; }
  .rules-data-page .dialog-meta p { min-height:64px; padding:11px 12px; }

  /* Monitor */
  .monitor-data-page .monitor-hero__inner,
  .monitor-data-page .monitor-main { width:calc(100% - 24px); }
  .monitor-data-page .monitor-hero__inner { padding:20px 0 18px; }
  .monitor-data-page .monitor-kicker { gap:5px; }
  .monitor-data-page .monitor-hero h1 {
    font-size:clamp(31px,9vw,39px);
    line-height:1.05;
  }
  .monitor-data-page .monitor-hero__copy>p {
    margin-top:12px;
    font-size:13px;
    line-height:1.62;
  }
  .monitor-data-page .monitor-hero__meta {
    margin-top:16px;
    padding:4px 12px;
    background:#151515;
  }
  .monitor-data-page .monitor-hero__meta>div,
  .monitor-data-page .monitor-hero__meta>div+div {
    grid-template-columns:74px 1fr;
    padding:9px 0;
  }
  .monitor-data-page .monitor-main { padding-top:14px; }
  .monitor-data-page .market-strip {
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:8px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .monitor-data-page .market-strip::-webkit-scrollbar{display:none}
  .monitor-data-page .market-metric,
  .monitor-data-page .market-metric--primary {
    flex:0 0 142px;
    min-height:96px;
    padding:13px 13px 12px;
    scroll-snap-align:start;
  }
  .monitor-data-page .market-metric__head { display:flex; }
  .monitor-data-page .market-code { display:inline; margin-top:0; }
  .monitor-data-page .market-metric strong {
    margin:11px 0 4px;
    font-size:29px;
  }
  .monitor-data-page .market-metric p {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:9px;
  }
  .monitor-data-page .context-grid { gap:10px; margin-top:12px; }
  .monitor-data-page .status-panel,
  .monitor-data-page .changes-panel { padding:15px; }
  .monitor-data-page .workspace-panel { margin-top:12px; }
  .monitor-data-page .workspace-panel__head { padding:15px; }
  .monitor-data-page .toolbar { gap:10px; padding:14px; }

  /* Punishment */
  .punish-data-page .punish-hero__inner,
  .punish-data-page .punish-main { width:calc(100% - 24px); }
  .punish-data-page .punish-hero__inner { padding:20px 0 18px; }
  .punish-data-page .punish-hero h1 {
    font-size:clamp(31px,9vw,39px);
    line-height:1.05;
  }
  .punish-data-page .punish-hero__copy>p {
    margin-top:12px;
    font-size:13px;
    line-height:1.62;
  }
  .punish-data-page .punish-hero__meta {
    margin-top:14px;
    padding:4px 12px;
  }
  .punish-data-page .punish-hero__meta>div,
  .punish-data-page .punish-hero__meta>div+div {
    grid-template-columns:74px 1fr;
    padding:9px 0;
  }
  .punish-data-page .punish-main { padding-top:14px; }
  .punish-data-page .summary-strip--six {
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:8px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .punish-data-page .summary-strip--six::-webkit-scrollbar{display:none}
  .punish-data-page .summary-strip--six .summary-metric {
    flex:0 0 142px;
    min-height:96px;
    padding:13px 13px 12px;
    scroll-snap-align:start;
  }
  .punish-data-page .summary-metric strong { margin-top:11px; font-size:29px; }
  .punish-data-page .summary-metric p {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:9px;
  }
  .punish-data-page .scope-note,
  .punish-data-page .punish-insights,
  .punish-data-page .workspace-panel { margin-top:12px; }
  .punish-data-page .workspace-panel__head { padding:15px; }
  .punish-data-page .toolbar--v2 { gap:10px; padding:14px; }
  .punish-data-page .detail-dialog {
    width:100vw;
    max-width:none;
    height:100dvh;
    max-height:100dvh;
    margin:0;
    border-width:0;
    border-top:4px solid var(--ky-orange);
  }
}