/* Personal performance editor: shared HR BASE type, palette and square controls. */
.hub-performance { --hp-sub: var(--sub, #62685e); --hp-line: var(--line, #e0e3da); color: var(--txt, #242820); font-size: 14px; line-height: 1.65; min-width: 0; }
.hub-performance *, .hub-performance *::before, .hub-performance *::after { box-sizing: border-box; }
.hub-performance button, .hub-performance input, .hub-performance select, .hub-performance textarea { font: inherit; }
.hub-performance button { cursor: pointer; }
.hub-performance button:disabled { cursor: wait; opacity: .6; }
.hub-performance :is(button, input, select, textarea):focus-visible { outline: 2px solid var(--txt, #242820); outline-offset: 3px; }
.hub-performance h3, .hub-performance p { margin: 0; }
.hub-performance h3 { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.hp-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 0 22px; }
.hp-toolbar .hp-field { max-width: 205px; }
.hp-cutoff { color: var(--hp-sub); font-size: 12px; padding-bottom: 9px; }
.hp-cutoff strong { margin-left: 12px; font-weight: 600; color: var(--txt, #242820); }
.hp-rank { border-top: 1px solid var(--hp-line); }
.hp-rank-overview { display: flex; align-items: center; gap: 38px; padding: 26px 0; }
.hp-kicker { font-size: 12px; font-weight: 600; color: var(--hp-sub); }
.hp-rank-value { font-size: 42px; line-height: 1.2; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-top: 5px; }
.hp-rank-value > span { font-size: 20px; padding-left: 8px; }
.hp-rank-comparison { margin: 0; display: flex; gap: 30px; }
.hp-rank-comparison dt { font-size: 12px; color: var(--hp-sub); }
.hp-rank-comparison dd { margin: 4px 0 0; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hp-check { margin-left: auto; font-size: 12px; color: #755d21; font-weight: 600; }
.hp-check-ok { color: #3b6447; }
.hp-table-wrap { overflow-x: auto; }
.hp-table { border-collapse: collapse; width: 100%; table-layout: auto; font-size: 13px; }
.hp-table th, .hp-table td { padding: 13px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hp-line); overflow-wrap: anywhere; }
.hp-table thead th { background: #f6f7f3; color: var(--hp-sub); font-size: 11px; font-weight: 600; white-space: nowrap; border-top: 1px solid var(--hp-line); }
.hp-table tbody th { font-weight: 600; min-width: 105px; }
.hp-table td small { display: block; font-size: 11px; color: var(--hp-sub); margin-top: 4px; }
.hp-table .hp-stars { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.hp-rank-table { min-width: 585px; }
.hp-rank-table td:nth-child(2) { max-width: 210px; }
.hp-rank-table td:last-child { min-width: 125px; }
.hp-needs-input { background: #fafbed; }
.hp-missing { display: block; color: #755d21; font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.hp-notes { padding-left: 18px; margin: 14px 0 0; font-size: 12px; color: var(--hp-sub); }
.hp-input-section { margin-top: 38px; }
.hp-tabs { display: flex; gap: 18px; overflow-x: auto; border-bottom: 1px solid var(--hp-line); padding: 0 2px; }
.hp-tabs button { flex: none; padding: 11px 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--hp-sub); font-size: 13px; font-weight: 600; white-space: nowrap; }
.hp-tabs button[aria-selected="true"] { border-bottom-color: var(--txt, #242820); color: var(--txt, #242820); }
.hp-tabs button:hover { color: var(--txt, #242820); }
.hp-section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px 22px; margin: 24px 0 20px; }
.hp-section-head > div { display: flex; align-items: baseline; gap: 14px; }
.hp-period, .hp-meta, .hp-readonly { font-size: 11px; color: var(--hp-sub); }
.hp-meta { overflow-wrap: anywhere; }
.hp-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.hp-hint { font-size: 12px; color: var(--hp-sub); padding: 0 0 20px; }
.hp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.hp-field { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.hp-field > span:first-child { font-size: 12px; font-weight: 600; }
.hp-field input, .hp-field select, .hp-field textarea { width: 100%; min-width: 0; min-height: 40px; border: 1px solid var(--line2, #bfc5b8); border-radius: 0; padding: 8px 10px; background: #fff; color: var(--txt, #242820); box-shadow: none; }
.hp-field textarea { resize: vertical; }
.hp-field input::placeholder, .hp-field textarea::placeholder { color: #747a70; font-size: 12px; font-weight: 400; }
.hp-field small { font-size: 11px; color: var(--hp-sub); }
.hp-input-unit { display: flex; align-items: center; gap: 9px; }
.hp-input-unit > span { flex: none; color: var(--hp-sub); font-size: 12px; min-width: 22px; }
.hp-wide { grid-column: 1 / -1; }
.hp-field.hp-wide { margin-top: 20px; }
.hp-fields .hp-wide { margin-top: 0; }
.hp-required { margin-left: 8px; font-size: 10px; font-weight: 500; color: var(--hp-sub); }
.hp-reason { padding-top: 18px; border-top: 1px solid var(--hp-line); }
.hp-confirmed { margin-bottom: 24px; max-width: 360px; }
.hp-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--hp-line); }
.hp-item:first-child { padding-top: 0; }
.hp-item-number { font-size: 11px; color: var(--hp-sub); padding-top: 3px; }
.hp-remove { align-self: start; color: #9a3d35; background: transparent; border: 0; min-height: 32px; padding: 2px 4px; font-size: 12px !important; }
.hp-remove:hover { text-decoration: underline; }
.hp-add { margin-top: 16px; }
.hp-empty { padding: 14px 0; font-size: 13px; color: var(--hp-sub); }
.hp-savebar { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.hp-savebar [data-dirty] { font-size: 12px; color: #755d21; }
.hp-save { min-width: 112px; min-height: 42px; background: #f3f3d7 !important; border: 1px solid #c6c7b1 !important; color: #282b23 !important; font-weight: 600; }
.hp-save:hover { background: #eaecc8 !important; }
.hp-form-error { border-left: 3px solid #ac463e; background: #fff5f3; color: #842f29; padding: 12px 14px; margin: 0 0 20px; font-size: 13px; }
.hp-form-error > button { display: block; margin-top: 12px; }
.hp-automatic { margin-top: 40px; padding-top: 10px; border-top: 1px solid var(--hp-line); }
.hp-load { padding: 30px 0; color: var(--hp-sub); }
.hp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .hp-toolbar { gap: 16px; align-items: flex-start; flex-wrap: wrap; }
  .hp-cutoff { padding-bottom: 0; }
  .hp-rank-overview { flex-wrap: wrap; gap: 18px 28px; }
  .hp-check { width: 100%; margin-left: 0; }
  .hp-fields { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hp-rank-comparison { gap: 24px; }
  .hp-item { grid-template-columns: 15px minmax(0, 1fr) auto; gap: 8px; }
}