/* APP website self-assessments. Built from the Claude Design file
   "ASC Pharmacy Assessments" (2026-10-22). Layout styles live inline in
   assessment/app.js, as in the design; this file holds the design-system
   pieces the design imported (Button, Badge) plus page basics. */
:root{
  --forest-800:#0e2219;--terracotta-50:#fcf2ec;--terracotta-500:#d4573a;--terracotta-600:#bc4a30;--paper:#f3f0eb;
  --danger-soft:#f7e2dc;--danger-700:#8f2f1d;--warning-soft:#f6ecd5;--warning-700:#8f6418;
  --info-soft:#deeaee;--info-700:#244c5a;--ink-100:#e9e6df;--ink-600:#4f5a53;
}
html,body{margin:0;background:#F3F0EB}
*{box-sizing:border-box}
a{color:#D4573A;text-decoration:none}
a:hover{color:#BC4A30;text-decoration:underline}
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,[role=button]:focus-visible{outline:3px solid #F0A880;outline-offset:3px}

/* Button (design system) */
.ascrx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'DM Sans',system-ui,sans-serif;font-weight:600;line-height:1;border:1.5px solid transparent;border-radius:8px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background 120ms cubic-bezier(.2,.6,.2,1),border-color 120ms,color 120ms,transform 120ms}
.ascrx-btn:hover{text-decoration:none}
.ascrx-btn:active{transform:translateY(1px)}
.ascrx-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.ascrx-btn--sm{font-size:14px;padding:10px 18px}
.ascrx-btn--md{font-size:16px;padding:14px 22px}
.ascrx-btn--lg{font-size:17px;padding:16px 28px}
.ascrx-btn--primary{background:var(--terracotta-500);color:var(--paper)}
.ascrx-btn--primary:hover{background:var(--terracotta-600);color:var(--paper)}
.ascrx-btn--secondary{background:transparent;color:var(--forest-800);border-color:var(--forest-800)}
.ascrx-btn--secondary:hover{background:var(--terracotta-500);border-color:var(--terracotta-500);color:var(--paper)}
.ascrx-btn--on-dark{background:transparent;color:#FBF8F2;border-color:#FBF8F2}
.ascrx-btn--on-dark:hover{background:var(--terracotta-500);border-color:var(--terracotta-500);color:var(--paper)}
.nav-menu[open] summary{background:var(--terracotta-500);border-color:var(--terracotta-500);color:var(--paper)}
.ascrx-btn--ghost{background:transparent;color:var(--terracotta-500)}
.ascrx-btn--ghost:hover{background:var(--terracotta-50);color:var(--terracotta-500)}

/* Badge (design system) */
.ascrx-badge{display:inline-flex;align-items:center;gap:6px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:6px 13px;border-radius:999px;line-height:1.4;white-space:nowrap}
.ascrx-badge--critical{background:var(--danger-soft);color:var(--danger-700)}
.ascrx-badge--attention{background:var(--warning-soft);color:var(--warning-700)}
.ascrx-badge--info{background:var(--info-soft);color:var(--info-700)}
.ascrx-badge--neutral{background:var(--ink-100);color:var(--ink-600)}

/* hover states the design declared with style-hover */
.lc-card{transition:transform .2s cubic-bezier(.2,.6,.2,1),border-color .2s}
.lc-card:hover{transform:translateY(-3px);border-color:#F0A880!important}
.lc-card:hover .ascrx-btn--primary{background:var(--terracotta-600)}
.q-opt:hover{border-color:#0E2219!important}

/* contact form, in the question-card style */
.f-field{display:flex;flex-direction:column;gap:6px;font:600 15px/1.3 'DM Sans',sans-serif;color:#0E2219;min-width:0}
.f-field .opt{font-weight:400;color:#5F6B62}
.f-field input,.f-field select{width:100%;font:400 17px/1.3 'DM Sans',sans-serif;color:#0E2219;background:#fff;border:1.5px solid #E8E3DA;border-radius:10px;padding:13px 14px;min-height:50px;transition:border-color .15s}
.f-field input:hover,.f-field select:hover{border-color:#9AA69D}
.f-field input:focus,.f-field select:focus{border-color:#0E2219;outline:none}
.f-field.invalid input{border-color:#9E3B26}
.f-err{font:500 14px/1.3 'DM Sans',sans-serif;color:#9E3B26}
.f-err:empty{display:none}

@media(max-width:640px){
  .topbar-inner{padding:12px 16px!important;gap:12px!important}
  .hide-sm{display:none!important}
  .topbar-inner svg{height:38px!important}
  .wrap-pad{padding-left:16px!important;padding-right:16px!important}
  .ascrx-btn--lg{padding:15px 22px}
  .prio{padding:22px 18px 24px!important}
}
@media print{
  [data-noprint]{display:none!important}
  body{background:#fff}
}