/* =========================================================
   HAPPY PENS CORE — DATE CODE REFERENCE FRONTEND
   DCP V1
========================================================= */

/* =========================================================
   ROOT / TYPOGRAPHY
========================================================= */
.hpc-dcr {
    --dcr-text: #171411;
    --dcr-muted: #6b645c;
    --dcr-border: #ddd5ca;
    --dcr-soft: #f7f3ed;
    --dcr-gold: #b08a52;
    --dcr-gold-dark: #8E6D36;
    --dcr-highlight: #f4ead9;
    width: 100%;
    color: var(--dcr-text);
    font-family: var(--global-body-font-family);
    font-weight: 400;
    box-sizing: border-box;
}
.hpc-dcr p,.hpc-dcr span,.hpc-dcr strong,.hpc-dcr a,.hpc-dcr input,.hpc-dcr select,.hpc-dcr button,.hpc-dcr option,.hpc-dcr label,.hpc-dcr div,.hpc-dcr table,.hpc-dcr thead,.hpc-dcr tbody,.hpc-dcr tr,.hpc-dcr th,.hpc-dcr td {
    font-family: var(--global-body-font-family);
    font-weight: 400;
}
.hpc-dcr *, .hpc-dcr *::before, .hpc-dcr *::after { box-sizing: border-box; }

/* =========================================================
   TOOLBAR
========================================================= */
.hpc-dcr-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) minmax(145px,auto) auto auto; gap:8px; align-items:center; margin-bottom:10px; }

.hpc-dcr-search,
.hpc-dcr-decade-filter {
    min-height:38px;
    width:100%;
    padding:7px 10px;
    border:1px solid var(--dcr-border);
    border-radius:3px;
    background:#fff;
    color:var(--dcr-text);
    font:inherit;
}

.hpc-dcr-reset,
.hpc-dcr-sort,
.hpc-dcr-show-all {
    min-height:38px;
    border:1px solid var(--dcr-gold);
    border-radius:3px;
    background:var(--dcr-gold);
    color:#fff;
    font:inherit;
    cursor:pointer;
    transition:background .18s ease,border-color .18s ease,color .14s ease;
}

.hpc-dcr-reset { padding:7px 13px; font-size:12.5px; font-weight:700; letter-spacing:.045em; text-transform:uppercase; }
.hpc-dcr-toolbar-icons { display:inline-flex; gap:6px; justify-content:flex-end; }
.hpc-dcr-sort,.hpc-dcr-show-all { display:inline-flex; width:38px; min-width:38px; padding:0; align-items:center; justify-content:center; }
.hpc-dcr-sort svg,.hpc-dcr-show-all svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hpc-dcr-result-line { min-height:18px; margin-bottom:6px; color:var(--dcr-muted); font-size:12px; line-height:1.4; }

/* =========================================================
   TOOLBAR CONTROL STATES
   Mirrors Variant Registry toolbar UX.
========================================================= */
.hpc-dcr-search:focus,.hpc-dcr-decade-filter:focus { border-color:var(--dcr-gold); outline:none; }

.hpc-dcr-reset:hover,.hpc-dcr-reset:focus-visible,
.hpc-dcr-sort:hover,.hpc-dcr-sort:focus-visible,
.hpc-dcr-show-all:not(:disabled):hover,.hpc-dcr-show-all:not(:disabled):focus-visible,
.hpc-dcr-show-all.is-active {
    background:var(--dcr-text);
    border-color:var(--dcr-text);
    color:#fff;
    outline:none;
}

.hpc-dcr-reset:focus:not(:focus-visible),
.hpc-dcr-sort:focus:not(:focus-visible),
.hpc-dcr-show-all:not(.is-active):focus:not(:focus-visible) {
    background:var(--dcr-gold);
    border-color:var(--dcr-gold);
    color:#fff;
    outline:none;
}

.hpc-dcr-show-all:disabled { opacity:.42; cursor:default; }

/* =========================================================
   ROW ICON CONTROL STATES
   Mirrors Variant Registry row-icon UX.
========================================================= */
.hpc-dcr-decade-toggle,.hpc-dcr-note-toggle { transition:background-color .14s ease,border-color .14s ease,color .14s ease; }

.hpc-dcr-decade-toggle:not([aria-expanded="true"]):hover,
.hpc-dcr-decade-toggle:not([aria-expanded="true"]):focus-visible,
.hpc-dcr-note-toggle:not(.is-disabled):not([aria-expanded="true"]):hover,
.hpc-dcr-note-toggle:not(.is-disabled):not([aria-expanded="true"]):focus-visible {
    border-color:var(--dcr-gold);
    background:var(--dcr-gold);
    color:#fff;
    outline:none;
}

.hpc-dcr-decade-toggle[aria-expanded="true"],
.hpc-dcr-decade-toggle[aria-expanded="true"]:hover,
.hpc-dcr-decade-toggle[aria-expanded="true"]:focus-visible,
.hpc-dcr-note-toggle[aria-expanded="true"],
.hpc-dcr-note-toggle[aria-expanded="true"]:hover,
.hpc-dcr-note-toggle[aria-expanded="true"]:focus-visible {
    border-color:var(--dcr-text);
    background:rgba(23,20,17,.06);
    color:var(--dcr-text);
    outline:none;
}

.hpc-dcr-decade-toggle:not([aria-expanded="true"]):focus:not(:focus-visible),
.hpc-dcr-note-toggle:not(.is-disabled):not([aria-expanded="true"]):focus:not(:focus-visible) {
    border-color:transparent;
    background:transparent;
    color:#77716B;
    outline:none;
}

/* =========================================================
   TABLE
========================================================= */
.hpc-dcr-table-wrap { width:100%; overflow-x:auto; overflow-y:clip; border:1px solid var(--dcr-border); background:#fff; }
.hpc-dcr-table { width:100%; min-width:780px; border-collapse:collapse; table-layout:fixed; }
.hpc-dcr-table th,.hpc-dcr-table td { padding:10px 11px; border-bottom:1px solid var(--dcr-border); border-right:1px solid #eee8e0; text-align:center; vertical-align:middle; }
.hpc-dcr-table th:last-child,.hpc-dcr-table td:last-child { border-right:0; }
.hpc-dcr-table tbody tr:last-child th,.hpc-dcr-table tbody tr:last-child td { border-bottom:0; }
.hpc-dcr-table thead th { background:var(--dcr-soft); font-size:16px; font-weight:600; line-height:1.25; white-space:nowrap; }
.hpc-dcr-row[hidden] { display:none !important; }
.hpc-dcr--compact .hpc-dcr-table { min-width:560px; }
.hpc-dcr-message { padding:12px 14px; border:1px solid var(--dcr-border); background:#fffdf9; }

/* =========================================================
   YEAR
========================================================= */
.hpc-dcr-year-head,.hpc-dcr-year-cell { width:97px; }
.hpc-dcr-year-cell { position:relative; background:#fffdf9; font-family:"Libre Baskerville",Georgia,serif; font-size:16px; font-weight:400; }
.hpc-dcr-year-inner { display:flex; width:100%; align-items:center; justify-content:space-between; gap:6px; }
.hpc-dcr-year-value { display:inline-block; flex:0 0 auto; }
.hpc-dcr-decade-toggle { display:inline-flex; flex:0 0 22px; width:22px; height:22px; margin-left:auto; padding:0; align-items:center; justify-content:center; border:1px solid transparent; border-radius:50%; background:transparent; color:#77716B; font-size:17px; font-weight:500; line-height:1; cursor:pointer; }
.hpc-dcr-decade-toggle[hidden] { display:none !important; }

/* =========================================================
   DATE CODES
========================================================= */
.hpc-dcr-code { position:relative; overflow:visible; font-size:16px; font-weight:650; letter-spacing:.01em; white-space:nowrap; }
.hpc-dcr-code-value { position:relative; z-index:1; display:inline-block; transform:scale(1); transform-origin:center center; transition:transform .14s ease; will-change:transform; }
.hpc-dcr-code:hover .hpc-dcr-code-value { z-index:20; transform:scale(3); }
.hpc-dcr-empty { color:#aaa198; font-weight:400; }
.hpc-dcr-code.is-match,.hpc-dcr-year-cell.is-match { background:var(--dcr-highlight); box-shadow:inset 0 -2px 0 var(--dcr-gold); }

/* =========================================================
   NOTES
========================================================= */
.hpc-dcr-note-head { width:38%; }
.hpc-dcr-table td.hpc-dcr-note { color:var(--dcr-muted); font-size:12px; line-height:1.45; text-align:left; vertical-align:middle; }
.hpc-dcr-note-inner { display:flex; width:100%; min-width:0; align-items:center; gap:8px; }
.hpc-dcr-note-toggle { display:inline-flex; flex:0 0 25px; width:25px; height:25px; padding:0; align-items:center; justify-content:center; border:1px solid transparent; border-radius:50%; background:transparent; color:#77716B; font-family:Georgia,serif; font-size:16px; font-weight:700; font-style:italic; line-height:1; cursor:pointer; }
.hpc-dcr-note-toggle.is-disabled { border-color:transparent; background:transparent; color:#b9b1a7; cursor:default; opacity:.72; }
.hpc-dcr-note-text { flex:1 1 auto; min-width:0; margin:0; color:var(--dcr-muted); font-size:12px; font-weight:400; line-height:1.45; text-align:left; }
.hpc-dcr-note-text[hidden] { display:none !important; }

/* =========================================================
   DECADE DIVIDERS — SHOW ALL ONLY
========================================================= */
.hpc-dcr.is-show-all:not(.is-filter-mode) .hpc-dcr-row.is-decade-start > th,
.hpc-dcr.is-show-all:not(.is-filter-mode) .hpc-dcr-row.is-decade-start > td {
    border-top:1.5px solid var(--dcr-gold-dark);
}

/* =========================================================
   ROW HOVER
========================================================= */
.hpc-dcr-table tbody tr td,.hpc-dcr-table tbody tr th { transition:background-color .14s ease; }
.hpc-dcr-table tbody tr:hover td,.hpc-dcr-table tbody tr:hover th { background:rgba(176,138,82,.08); }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:760px) {
    .hpc-dcr-toolbar { grid-template-columns:minmax(0,1fr) auto; }
    .hpc-dcr-search-wrap { grid-column:1 / -1; }
    .hpc-dcr-decade-filter { min-width:0; }
    .hpc-dcr-reset { justify-self:stretch; }
    .hpc-dcr-toolbar-icons { grid-column:1 / -1; justify-content:flex-end; }
    .hpc-dcr-table th,.hpc-dcr-table td { padding:9px 9px; }
}