/* HexCheck shared page-shell and component system */
:root{
  --hc-space-1:4px;
  --hc-space-2:8px;
  --hc-space-3:12px;
  --hc-space-4:16px;
  --hc-space-5:20px;
  --hc-space-6:24px;
  --hc-space-8:32px;
  --hc-space-10:40px;
  --hc-space-12:48px;
  --hc-radius-sm:6px;
  --hc-radius-md:10px;
  --hc-radius-lg:16px;
  --hc-radius-xl:24px;
  --hc-component-line:var(--hc-line,#dfe4e8);
  --hc-component-surface:var(--hc-surface,#fff);
  --hc-component-soft:var(--hc-surface-soft,#f6f8fa);
  --hc-component-text:var(--hc-text,#111827);
  --hc-component-muted:var(--hc-muted,#667085);
  --hc-component-primary:var(--hc-primary,#111827);
  --hc-component-primary-text:var(--hc-primary-text,#fff);
  --hc-component-accent:#0ea5e9;
  --hc-component-shadow:0 18px 50px rgba(16,24,40,.08);
}

main.hc-page-shell{
  width:min(1240px,calc(100% - 32px));
  margin:0 auto;
  padding:clamp(28px,5vw,64px) 0 calc(56px + env(safe-area-inset-bottom));
}

.hc-page-hero{
  display:grid;
  gap:var(--hc-space-6);
  align-items:start;
  margin:0 0 var(--hc-space-8);
}

.hc-page-title{
  max-width:820px!important;
  margin:var(--hc-space-2) 0 var(--hc-space-4)!important;
  color:var(--hc-component-text)!important;
  font-size:clamp(2rem,3vw,3rem)!important;
  line-height:1.04!important;
  letter-spacing:-.045em!important;
  text-wrap:balance;
}

.hc-page-lede{
  max-width:760px;
  margin:0;
  color:var(--hc-component-muted)!important;
  font-size:clamp(.96rem,1.4vw,1.08rem);
  line-height:1.65;
}

.hc-workspace{display:grid;gap:var(--hc-space-6);min-width:0}

.hc-panel,
.hc-card{
  min-width:0;
  border:1px solid var(--hc-component-line);
  border-radius:var(--hc-radius-lg);
  background:var(--hc-component-surface);
  color:var(--hc-component-text);
}

.hc-panel{padding:clamp(18px,2.5vw,28px);box-shadow:var(--hc-component-shadow)}
.hc-panel[data-density="compact"]{padding:18px}
.hc-panel[data-padding="none"],.hc-card[data-padding="none"]{padding:0}
.hc-card{padding:var(--hc-space-5);box-shadow:0 8px 24px rgba(16,24,40,.055)}

.hc-card[href],a.hc-card{
  display:grid;
  text-decoration:none;
  color:inherit;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.hc-card[href]:hover,a.hc-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--hc-component-text) 30%,var(--hc-component-line));
  box-shadow:0 16px 36px rgba(16,24,40,.1);
}

.hc-button{
  display:inline-flex;
  min-height:42px;
  align-items:center;
  justify-content:center;
  gap:var(--hc-space-2);
  border:1px solid var(--hc-component-primary);
  border-radius:var(--hc-radius-md);
  padding:0 14px;
  background:var(--hc-component-primary);
  color:var(--hc-component-primary-text)!important;
  -webkit-text-fill-color:var(--hc-component-primary-text)!important;
  text-decoration:none;
  font:800 .78rem/1 Inter,system-ui,sans-serif;
  cursor:pointer;
}
.hc-button[data-variant="secondary"]{
  border-color:var(--hc-component-line);
  background:var(--hc-component-surface);
  color:var(--hc-component-text)!important;
  -webkit-text-fill-color:var(--hc-component-text)!important;
}
.hc-button[data-variant="ghost"]{
  border-color:transparent;
  background:transparent;
  color:var(--hc-component-text)!important;
  -webkit-text-fill-color:var(--hc-component-text)!important;
}
.hc-button[data-size="small"]{min-height:34px;padding-inline:10px;font-size:.72rem}
.hc-button:hover{filter:brightness(.96)}
.hc-button:focus-visible{outline:3px solid color-mix(in srgb,var(--hc-component-accent) 24%,transparent);outline-offset:2px}
.hc-button:disabled,.hc-button[aria-disabled="true"]{cursor:not-allowed;opacity:.5}

.hc-field{display:grid;gap:7px;min-width:0}
.hc-field>label,.hc-field>span,.hc-field>legend{color:var(--hc-component-muted);font-size:.72rem;font-weight:800}
.hc-field :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  width:100%;
  min-height:44px;
  border:1px solid var(--hc-component-line);
  border-radius:var(--hc-radius-md);
  background:var(--hc-component-surface);
  color:var(--hc-component-text);
  padding:0 12px;
  font:600 .88rem Inter,system-ui,sans-serif;
}
.hc-field textarea{min-height:120px;padding-block:10px;resize:vertical}
.hc-field :is(input,select,textarea):focus{outline:3px solid color-mix(in srgb,var(--hc-component-accent) 18%,transparent);border-color:var(--hc-component-accent)}

.hc-modal{
  width:min(560px,calc(100vw - 28px));
  max-height:min(760px,calc(100vh - 28px));
  overflow:auto;
  border:1px solid var(--hc-component-line);
  border-radius:var(--hc-radius-xl);
  background:var(--hc-component-surface);
  color:var(--hc-component-text);
  padding:0;
  box-shadow:0 28px 90px rgba(16,24,40,.28);
}
.hc-modal::backdrop{background:rgba(16,24,40,.55);backdrop-filter:blur(5px)}

.hc-pro-gate{
  display:grid;
  gap:var(--hc-space-4);
  border:1px solid color-mix(in srgb,#7c3aed 24%,var(--hc-component-line));
  border-radius:var(--hc-radius-lg);
  background:linear-gradient(135deg,var(--hc-component-surface),color-mix(in srgb,#7c3aed 7%,var(--hc-component-surface)));
  padding:var(--hc-space-6);
}

.hc-empty-state{
  display:grid;
  min-height:180px;
  place-items:center;
  border:1px dashed color-mix(in srgb,var(--hc-component-muted) 42%,transparent);
  border-radius:var(--hc-radius-lg);
  background:var(--hc-component-surface);
  color:var(--hc-component-muted);
  padding:var(--hc-space-8);
  text-align:center;
}

.hc-status{
  display:inline-flex;
  min-height:28px;
  align-items:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  border-radius:999px;
  padding:4px 9px;
  background:var(--hc-component-soft);
  color:var(--hc-component-muted)!important;
  font-size:.68rem;
  font-weight:800;
  line-height:1.2;
}
.hc-status[data-tone="success"]{background:#e7f6ea;color:#126b24!important}
.hc-status[data-tone="pro"]{background:#ede9fe;color:#6d28d9!important}
.hc-status[data-tone="warning"]{background:#fff4d6;color:#805b00!important}
.hc-status[data-tone="danger"]{background:#fee4e2;color:#b42318!important}

/* Migrated pages opt in with data-hc-page. This block beats legacy page selectors. */
body[data-hc-page] .hc-page-lede{max-width:760px;margin:0;font-size:clamp(.96rem,1.4vw,1.08rem);line-height:1.65}
body[data-hc-page] .hc-panel,
body[data-hc-page] .hc-card{border:1px solid var(--hc-component-line);border-radius:var(--hc-radius-lg);background:var(--hc-component-surface);color:var(--hc-component-text)}
body[data-hc-page] .hc-panel{padding:clamp(18px,2.5vw,28px);box-shadow:var(--hc-component-shadow)}
body[data-hc-page] .hc-panel[data-density="compact"]{padding:18px}
body[data-hc-page] .hc-panel[data-padding="none"],body[data-hc-page] .hc-card[data-padding="none"]{padding:0}
body[data-hc-page] .hc-card{padding:var(--hc-space-5);box-shadow:0 8px 24px rgba(16,24,40,.055)}
body[data-hc-page] .hc-card[data-padding="none"]{padding:0}
body[data-hc-page] .hc-button{display:inline-flex;min-height:42px;align-items:center;justify-content:center;border:1px solid var(--hc-component-primary);border-radius:var(--hc-radius-md);padding:0 14px;background:var(--hc-component-primary);color:var(--hc-component-primary-text)!important;-webkit-text-fill-color:var(--hc-component-primary-text)!important;font:800 .78rem/1 Inter,system-ui,sans-serif}
body[data-hc-page] .hc-button[data-variant="secondary"]{border-color:var(--hc-component-line);background:var(--hc-component-surface);color:var(--hc-component-text)!important;-webkit-text-fill-color:var(--hc-component-text)!important}
body[data-hc-page] .hc-button[data-variant="ghost"]{border-color:transparent;background:transparent;color:var(--hc-component-text)!important;-webkit-text-fill-color:var(--hc-component-text)!important}
body[data-hc-page] .hc-button[data-size="small"]{min-height:34px;padding-inline:10px;font-size:.72rem}
body[data-hc-page] .hc-status{display:inline-flex;min-height:28px;align-items:center;width:max-content;max-width:100%;border-radius:999px;padding:4px 9px;background:var(--hc-component-soft);color:var(--hc-component-muted)!important;font-size:.68rem;font-weight:800;line-height:1.2}
body[data-hc-page] .hc-status[data-tone="success"]{background:#e7f6ea;color:#126b24!important}
body[data-hc-page] .hc-status[data-tone="pro"]{background:#ede9fe;color:#6d28d9!important}
body[data-hc-page] .hc-status[data-tone="warning"]{background:#fff4d6;color:#805b00!important}
body[data-hc-page] .hc-status[data-tone="danger"]{background:#fee4e2;color:#b42318!important}

body[data-hc-page="home-paint-match"] .pm-intro-links{
  align-self:end;
  align-items:center;
}
body[data-hc-page="home-paint-match"] .pm-intro-links .hc-button{
  align-self:center;
  min-height:40px;
  max-height:44px;
}

@media(max-width:900px){
  main.hc-page-shell{width:min(100% - 24px,1240px);padding-top:32px}
  .hc-page-title{font-size:clamp(1.9rem,5vw,2.5rem)!important}
}

@media(max-width:620px){
  main.hc-page-shell{width:min(100% - 20px,1240px);padding-top:24px}
  .hc-page-title{font-size:clamp(1.75rem,7.5vw,2.1rem)!important;line-height:1.08!important;letter-spacing:-.035em!important}
  .hc-panel:not([data-padding="none"]),.hc-card:not([data-padding="none"]),.hc-pro-gate{padding:16px}
  body[data-hc-page] .hc-panel:not([data-padding="none"]),body[data-hc-page] .hc-card:not([data-padding="none"]),body[data-hc-page] .hc-pro-gate{padding:16px}
  .hc-button:not([data-inline="true"]){width:100%}
}