/* V2.7 shared UI components (used by MyAccraHandyman, Business and Admin). Colours come only from tokens.css:
 * a component never names a brand colour, so the same markup is blue+yellow, navy+yellow or green+white by area scope.
 * Real data only: nothing here carries sample content. All interactive elements are >= 44px high and keyboard-focusable. */
.tahd{font-family:var(--tahd-font-body);color:var(--tahd-ink);line-height:1.5;box-sizing:border-box}
.tahd *,.tahd *::before,.tahd *::after{box-sizing:inherit}
.tahd h1,.tahd h2,.tahd h3,.tahd h4{font-family:var(--tahd-font);color:var(--tahd-ink);line-height:1.25;margin:0 0 var(--tahd-s2)}
.tahd h1{font-size:var(--tahd-h1)}.tahd h2{font-size:var(--tahd-h2)}.tahd h3{font-size:var(--tahd-h4)}.tahd h4{font-size:var(--tahd-h5)}
.tahd a{color:var(--tahd-primary)}
.tahd a:focus-visible,.tahd button:focus-visible,.tahd input:focus-visible,.tahd select:focus-visible,.tahd textarea:focus-visible,.tahd summary:focus-visible{outline:none;box-shadow:var(--tahd-focus-ring);border-radius:var(--tahd-radius-sm)}
/* shell: header band + sidebar + content */
.tahd-shell{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--tahd-s5);align-items:start}
.tahd-band{grid-column:1/-1;background:var(--tahd-primary);color:var(--tahd-on-primary);border-radius:var(--tahd-radius-lg);padding:var(--tahd-s5);display:flex;flex-wrap:wrap;gap:var(--tahd-s4);align-items:center;justify-content:space-between;position:relative;overflow:hidden}
.tahd-band::after{content:"";position:absolute;inset:0;background-image:var(--tahd-pattern);background-size:48px 48px;opacity:.55;pointer-events:none}
.tahd-band>*{position:relative;z-index:1}
.tahd-band h1,.tahd-band h2,.tahd-band p{color:var(--tahd-on-primary);margin:0}
.tahd-band .tahd-eyebrow{color:var(--tahd-accent);background:none;padding:0}
.tahd-eyebrow{display:inline-block;font:700 .75rem/1 var(--tahd-font);letter-spacing:.08em;text-transform:uppercase;color:var(--tahd-primary);margin-bottom:var(--tahd-s2)}
.tahd-nav{display:flex;flex-direction:column;gap:2px;background:var(--tahd-surface);border:1px solid var(--tahd-line);border-radius:var(--tahd-radius);padding:var(--tahd-s2);position:sticky;top:var(--tahd-s4)}
.tahd-nav a{display:flex;align-items:center;justify-content:space-between;gap:var(--tahd-s2);min-height:44px;padding:10px 12px;border-radius:var(--tahd-radius-sm);color:var(--tahd-ink);text-decoration:none;font:600 .95rem var(--tahd-font)}
.tahd-nav a:hover{background:var(--tahd-primary-light)}
.tahd-nav a[aria-current=page]{background:var(--tahd-primary);color:var(--tahd-on-primary)}
.tahd-nav .tahd-count{background:var(--tahd-accent);color:var(--tahd-on-accent);border-radius:var(--tahd-pill);min-width:22px;height:22px;padding:0 6px;font:700 .75rem/22px var(--tahd-font);text-align:center}
.tahd-main{min-width:0}
/* cards, tiles, sections */
.tahd-card{background:var(--tahd-surface);border:1px solid var(--tahd-line);border-radius:var(--tahd-radius);padding:var(--tahd-s4) var(--tahd-s5);margin:0 0 var(--tahd-s4);box-shadow:var(--tahd-shadow-1)}
.tahd-card--accent{border-left:4px solid var(--tahd-accent)}
.tahd-card--alert{border-left:4px solid var(--tahd-danger)}
.tahd-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--tahd-s3);margin:0 0 var(--tahd-s4)}
.tahd-tile{background:var(--tahd-surface);border:1px solid var(--tahd-line);border-radius:var(--tahd-radius);padding:var(--tahd-s4);text-decoration:none;color:var(--tahd-ink);display:block}
.tahd-tile .tahd-k{display:block;font:600 .8rem var(--tahd-font);color:var(--tahd-muted);margin-bottom:var(--tahd-s1)}
.tahd-tile .tahd-v{display:block;font:700 1.5rem/1.2 var(--tahd-font);color:var(--tahd-ink)}
.tahd-tile .tahd-s{display:block;font-size:.8rem;color:var(--tahd-muted);margin-top:2px}
.tahd-list{list-style:none;margin:0;padding:0}
.tahd-list>li{display:flex;flex-wrap:wrap;gap:var(--tahd-s2) var(--tahd-s4);align-items:center;justify-content:space-between;padding:var(--tahd-s3) 0;border-top:1px solid var(--tahd-line)}
.tahd-list>li:first-child{border-top:0}
.tahd-muted{color:var(--tahd-muted);font-size:var(--tahd-small)}
.tahd-empty{background:var(--tahd-grey-50);border:1px dashed var(--tahd-grey-300);border-radius:var(--tahd-radius);padding:var(--tahd-s5);text-align:center;color:var(--tahd-muted)}
/* buttons */
.tahd-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--tahd-s2);min-height:44px;padding:10px 20px;border-radius:var(--tahd-radius-sm);border:2px solid transparent;font:700 .95rem var(--tahd-font);text-decoration:none;cursor:pointer;line-height:1.2}
.tahd-btn--primary{background:var(--tahd-accent);color:var(--tahd-on-accent);border-color:var(--tahd-accent)}
.tahd-btn--primary:hover{filter:brightness(.95)}
.tahd-btn--secondary{background:var(--tahd-surface);color:var(--tahd-primary);border-color:var(--tahd-primary)}
.tahd-btn--ghost{background:transparent;color:var(--tahd-primary);border-color:var(--tahd-line)}
.tahd-btn--danger{background:var(--tahd-danger);color:#fff}
.tahd-btn[disabled]{opacity:.55;cursor:not-allowed}
.tahd-band .tahd-btn--secondary{background:transparent;color:var(--tahd-on-primary);border-color:var(--tahd-on-primary)}
/* status tags: text + shape, never colour alone */
.tahd-tag{display:inline-flex;align-items:center;gap:6px;border-radius:var(--tahd-pill);padding:3px 10px;font:700 .75rem/1.4 var(--tahd-font);background:var(--tahd-neutral-bg);color:var(--tahd-neutral);white-space:nowrap}
.tahd-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.tahd-tag--ok{background:var(--tahd-ok-bg);color:var(--tahd-ok)}
.tahd-tag--warn{background:var(--tahd-warn-bg);color:var(--tahd-warn)}
.tahd-tag--danger{background:var(--tahd-danger-bg);color:var(--tahd-danger)}
.tahd-tag--info{background:var(--tahd-info-bg);color:var(--tahd-info)}
.tahd-tag--purple{background:var(--tahd-purple-bg);color:var(--tahd-purple)}
/* forms */
.tahd-field{margin:0 0 var(--tahd-s3)}
.tahd-field label{display:block;font:600 .9rem var(--tahd-font);margin-bottom:4px}
.tahd-field input,.tahd-field select,.tahd-field textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--tahd-grey-300);border-radius:var(--tahd-radius-sm);font:inherit;background:#fff;color:var(--tahd-ink)}
.tahd-note{border-radius:var(--tahd-radius-sm);padding:var(--tahd-s3) var(--tahd-s4);margin:0 0 var(--tahd-s4);background:var(--tahd-info-bg);color:var(--tahd-info)}
.tahd-note--ok{background:var(--tahd-ok-bg);color:var(--tahd-ok)}
.tahd-note--err{background:var(--tahd-danger-bg);color:var(--tahd-danger)}
/* tables become stacked cards on phones */
.tahd-table{width:100%;border-collapse:collapse}
.tahd-table th{text-align:left;font:700 .75rem var(--tahd-font);text-transform:uppercase;letter-spacing:.05em;color:var(--tahd-muted);padding:8px 10px;border-bottom:2px solid var(--tahd-line)}
.tahd-table td{padding:10px;border-bottom:1px solid var(--tahd-line);vertical-align:top}
@media (max-width:900px){
 .tahd-shell{grid-template-columns:minmax(0,1fr)}
 .tahd-nav{flex-direction:row;overflow-x:auto;position:static;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:6px}
 .tahd-nav a{white-space:nowrap;scroll-snap-align:start}
}
@media (max-width:640px){
 .tahd-card{padding:var(--tahd-s4)}
 .tahd-band{padding:var(--tahd-s4)}
 .tahd-table thead{display:none}
 .tahd-table tr{display:block;border:1px solid var(--tahd-line);border-radius:var(--tahd-radius);margin:0 0 var(--tahd-s3);padding:var(--tahd-s2)}
 .tahd-table td{display:flex;justify-content:space-between;gap:var(--tahd-s3);border:0;padding:6px 8px}
 .tahd-table td::before{content:attr(data-label);font-weight:700;color:var(--tahd-muted)}
 .tahd-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.tahd *{transition:none!important;animation:none!important}}
.tahd-note--warn{background:var(--tahd-yellow-tint);color:var(--tahd-ink);border-left:4px solid var(--tahd-accent)}