/* ── Corpus V3 — Design Tokens ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --white: #FFFFFF; --ivory: #F7F7F5; --gray: #E8E8E6; --mid: #A1A1A1;
  --dark-text: #71717A; --black: #09090B;
  --accent: #1a1a4a; --accent-hover: #2c2c5e;
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
body { font-family: var(--sans); color: var(--black); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; background: var(--white); }
a { color: inherit; text-decoration: none; }

.shell { max-width: 1400px; margin: 0 auto; padding: 1.5rem 1.4rem 4rem; }
.topbar { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1.2rem; }
.topbar h1 { font-family: var(--serif); font-size: 1.8rem; font-weight: 400; margin: 0; }
.back-link { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; border-radius: 999px; border: 1px solid var(--gray); color: var(--dark-text); text-decoration: none; font-size: .74rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.back-link:hover { border-color: var(--accent); color: var(--accent); }

.sync-bar { display: flex; gap: 1.5rem; align-items: center; padding: .7rem 1rem; background: #f7f7f5; border-radius: 8px; font-size: .82rem; color: var(--dark-text); margin-bottom: 1.2rem; flex-wrap: wrap; }
.sync-bar .num { font-weight: 600; color: var(--black); }

.filters { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filters input, .filters select { border: 1px solid var(--gray); border-radius: 8px; padding: .6rem .8rem; font-family: var(--sans); font-size: .85rem; background: var(--white); }
.filters input { flex: 1; min-width: 200px; }

.law-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.law-table th { text-align: left; padding: .6rem .8rem; border-bottom: 2px solid var(--gray); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dark-text); cursor: pointer; user-select: none; }
.law-table th:hover { color: var(--accent); }
.law-table td { padding: .65rem .8rem; border-bottom: 1px solid #eee; vertical-align: top; }
.law-table tr:hover td { background: #fafaf8; }
.law-table .doc-id { font-family: monospace; font-size: .78rem; color: var(--dark-text); }
.law-table .title-cell { font-size: .84rem; line-height: 1.4; }
.law-table .title-cell a { color: var(--black); text-decoration: none; }
.law-table .title-cell a:hover { color: var(--accent); }
.law-table .num-cell { text-align: right; font-variant-numeric: tabular-nums; }

.badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: .68rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.badge-v  { background: #e4edf7; color: #2d5a8a; }
.badge-vr { background: #e8f5ee; color: #2d7a4f; }
.badge-d  { background: #fce8e8; color: #a63d40; }
.badge-m  { background: #fdf0e2; color: #b8651a; }
.badge-vl { background: #f0eaf7; color: #6a4c93; }

.detail-header { margin-bottom: 1.5rem; }
.detail-header .doc-tag { display: inline-block; background: var(--black); color: #c9a84c; font-size: .7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 10px; border-radius: 3px; margin-bottom: .5rem; }
.detail-header h2 { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; margin: 0 0 .5rem; }
.detail-meta { display: flex; gap: 1.5rem; font-size: .82rem; color: var(--dark-text); flex-wrap: wrap; }

.version-select-row { display: flex; align-items: center; gap: .8rem; margin: 1rem 0; flex-wrap: wrap; }
.version-select-row select { border: 1px solid var(--gray); border-radius: 8px; padding: .5rem .8rem; font-family: var(--sans); font-size: .85rem; background: var(--white); min-width: 260px; }
.version-select-row label { font-size: .82rem; color: var(--dark-text); font-weight: 500; }

.graph-panel { background: #f7f7f5; border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.graph-panel h3 { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .6rem; color: var(--dark-text); }
.graph-list { margin: 0; padding: 0; list-style: none; }
.graph-list li { padding: .3rem 0; font-size: .82rem; display: flex; gap: .4rem; align-items: baseline; }
.graph-list a { color: var(--accent); text-decoration: none; font-weight: 500; }
.graph-list a:hover { text-decoration: underline; }
.graph-list .edge-count { background: #e4edf7; color: #2d5a8a; font-size: .68rem; padding: 1px 5px; border-radius: 3px; }

.unit-card { border: 1px solid #eee; border-radius: 8px; margin-bottom: .6rem; overflow: hidden; }
.unit-card.derogated { opacity: .55; }
.unit-head { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem 1rem; cursor: pointer; user-select: none; }
.unit-head:hover { background: #fafaf8; }
.unit-head .expand { flex-shrink: 0; font-size: .65rem; color: var(--dark-text); margin-top: .3rem; transition: transform .15s; }
.unit-head.open .expand { transform: rotate(90deg); }
.unit-head .label { flex: 1; }
.unit-head .type-num { font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dark-text); }
.unit-head .unit-title { font-family: var(--serif); font-size: .95rem; font-weight: 400; color: var(--black); font-style: normal; }
.unit-body { display: none; padding: 0 1rem 1rem; }
.unit-body.open { display: block; }

.mod-pill { display: inline-flex; align-items: baseline; gap: .3rem; font-size: .75rem; padding: .3rem .6rem; border-radius: 4px; margin: .15rem; border: 1px solid; line-height: 1.3; }
.mod-pill.afegeix { background: #e8f5ee; border-color: #c2e0cc; color: #2d7a4f; }
.mod-pill.modifica { background: #fdf0e2; border-color: #e8d4b8; color: #b8651a; }
.mod-pill.deroga { background: #fce8e8; border-color: #e8c4c4; color: #a63d40; }
.mod-pill .action { font-weight: 700; font-size: .65rem; letter-spacing: .03em; text-transform: uppercase; }
.mod-pill a { color: inherit; font-weight: 600; text-decoration: none; }
.mod-pill a:hover { text-decoration: underline; }

.unit-notes { background: #fdf8e8; border: 1px solid #e8dfc0; border-radius: 4px; padding: .5rem .8rem; margin-bottom: .6rem; font-size: .8rem; color: #8a7530; font-style: italic; }
.unit-content { font-family: var(--sans); font-size: .88rem; line-height: 1.75; white-space: pre-wrap; word-wrap: break-word; color: #2a2a2a; }

.loading { text-align: center; padding: 4rem; color: var(--dark-text); }
.empty-state { text-align: center; padding: 2rem; color: var(--dark-text); font-size: .88rem; }