/* Publisher extranet — Kidsono tokens, Brice (titles) + Raisonne Pro (body). */

@font-face { font-family: "Brice"; src: url("../landing/fonts/Brice-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Raisonne Pro"; src: url("../landing/fonts/RaisonnePro-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Raisonne Pro"; src: url("../landing/fonts/RaisonnePro-DemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --ks-cream: #FEF8D7;
  --ks-yellow: #FFD700;
  --ks-blue: #007AFF;
  --ks-green: #34C759;
  --ks-red: #FF3B30;
  --ks-pink: #FF2D55;
  --ks-black: #1A1A1A;
  --ks-white: #FFFFFF;
  --ks-text-secondary: #595959;
  --ks-line: #E8E1BC;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: "Raisonne Pro", system-ui, sans-serif; background: var(--ks-cream); color: var(--ks-black); }
h1, h2 { font-family: "Brice", system-ui, sans-serif; font-weight: 700; }
h1 { margin: 4px 0 16px; font-size: 28px; }
h2 { margin: 0; font-size: 18px; }
a { color: var(--ks-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--ks-text-secondary); }
[title]:not(a):not(canvas) { cursor: help; text-decoration: underline dotted #C8C2A0; text-underline-offset: 3px; }
.error { color: var(--ks-red); }

.topbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background: var(--ks-white); border-bottom: 1px solid var(--ks-line); }
.brand { font-family: "Brice", system-ui, sans-serif; font-size: 20px; color: var(--ks-black); }
.brand span { font-family: "Raisonne Pro", system-ui, sans-serif; font-size: 14px; color: var(--ks-text-secondary); margin-left: 8px; }
button.link { background: none; border: 0; color: var(--ks-blue); cursor: pointer; font: inherit; }

main { max-width: 1280px; margin: 0 auto; padding: 16px 24px 48px; }
.crumbs { font-size: 14px; color: var(--ks-text-secondary); min-height: 1em; }

.picker { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; background: var(--ks-white); border-radius: 12px; padding: 12px 16px; }
.picker .step { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.picker .arrow { font-size: 14px; padding: 4px 8px; border-radius: 8px; background: var(--ks-cream); }
.picker .arrow.off { color: #C8C2A0; }
.picker .presets, .picker .options { display: flex; flex-wrap: wrap; gap: 4px; }
.picker .presets a, .picker .options a { padding: 4px 10px; border-radius: 999px; font-size: 14px; color: var(--ks-black); }
.picker a.active { background: var(--ks-yellow); }
.note { font-size: 13px; color: var(--ks-text-secondary); margin: 8px 2px 16px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.card { background: var(--ks-white); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.card .k { font-size: 13px; color: var(--ks-text-secondary); }
.card .v { font-family: "Brice", system-ui, sans-serif; font-size: 26px; }
.d { font-size: 13px; white-space: nowrap; }
.d.up { color: #1F8A3B; }
.d.down { color: var(--ks-red); }
.d.flat { color: var(--ks-text-secondary); }

.panel { background: var(--ks-white); border-radius: 12px; padding: 16px; margin-top: 16px; overflow-x: auto; }
.panel > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.csv { font-size: 13px; border: 1px solid var(--ks-line); border-radius: 8px; padding: 2px 10px; }
.chart { position: relative; height: 280px; }
.blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.blocks .panel { margin-top: 16px; }
.block h2 a { color: var(--ks-black); }
.block h2 a::after { content: " ›"; color: var(--ks-blue); }
.block ol { margin: 0; padding-left: 22px; font-size: 14px; }
.block li { padding: 4px 0; border-bottom: 1px solid #F4EFD2; }
.block li .n { float: right; margin-left: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.block li.suppressed { color: var(--ks-text-secondary); }
.featured { color: var(--ks-pink); text-decoration: none; }
.featured-line { margin: -8px 0 16px; color: var(--ks-pink); font-weight: 600; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 600; color: var(--ks-text-secondary); border-bottom: 1px solid var(--ks-line); padding: 6px 8px; white-space: nowrap; }
td { padding: 6px 8px; border-bottom: 1px solid #F4EFD2; }
td.n { text-align: right; font-variant-numeric: tabular-nums; }
tr.suppressed td { color: var(--ks-text-secondary); }
.quality ul { margin: 0; padding-left: 20px; line-height: 1.8; }

.login { max-width: 360px; margin: 64px auto; }
.login form { display: flex; flex-direction: column; gap: 6px; }
.login input[type=text], .login input[type=password] { padding: 8px 10px; border: 1px solid var(--ks-line); border-radius: 8px; font: inherit; }
.login button { margin-top: 12px; padding: 10px; border: 0; border-radius: 10px; background: var(--ks-yellow); font: inherit; font-weight: 600; cursor: pointer; }