/* Apointly — additions layered on the starter stylesheet.
   Forms, cards, tables, auth, accessibility helpers. */

.skip-link{position:absolute;left:-9999px;top:0;background:#00aaa8;color:#fff;padding:10px 16px;z-index:100}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid #19d0c6;outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

.messages{max-width:var(--max);margin:18px auto 0;padding:0 5.5%}
.message{padding:12px 16px;font-size:13px;border-radius:3px;margin:0 0 8px}
.message-success{background:#e0f6f2;color:#06585a;border:1px solid #9fded6}
.message-error{background:#fdecec;color:#7a2222;border:1px solid #f0b8b8}
.message-warning{background:#fff6e0;color:#6b4d00;border:1px solid #f0d79a}
.message-info{background:#eef4f6;color:#29464f;border:1px solid #cfdde2}

.page-hero{background:var(--deep);color:#fff;padding:64px 5.5% 58px}
.page-hero-inner{max-width:var(--max);margin:auto}
.page-hero h1{font-family:Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:-.035em;line-height:1.05;font-size:clamp(36px,4.4vw,58px);margin:0 0 14px;max-width:780px}
.page-hero p.lede{color:#c8dcdc;max-width:620px;font-size:15px;margin:0}
.breadcrumb{font:11px 'DM Mono',monospace;letter-spacing:.12em;color:#8fb0b0;margin:0 0 18px}
.breadcrumb a{color:#8fb0b0}
.breadcrumb a:hover{color:var(--teal-bright)}

.content-section{max-width:var(--max);margin:auto;padding:60px 5.5%}
.content-section h2{font-family:Georgia,'Times New Roman',serif;font-weight:500;font-size:clamp(26px,2.8vw,36px);letter-spacing:-.03em;margin:0 0 16px}
.content-section h3{font-size:16px;margin:28px 0 8px}
.content-section p,.content-section li{font-size:14px;color:#2b4a52}
.prose{max-width:720px}
.prose p{margin:0 0 14px}

.form-grid{display:grid;gap:16px;max-width:640px}
.form-row{display:grid;gap:6px}
.form-row label{font-size:12px;font-weight:700;color:#29464f}
.form-row input,.form-row textarea,.form-row select{
  border:1px solid var(--line);padding:12px 13px;font:inherit;font-size:14px;border-radius:3px;background:#fff;color:var(--ink);width:100%}
.form-row input:focus,.form-row textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px #00aaa833}
.form-row .helptext{font-size:11px;color:var(--muted)}
.errorlist{color:#a32020;font-size:12px;margin:0;padding-left:18px}
.hp-field{position:absolute;left:-9999px}
.form-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card{border:1px solid var(--line);background:#fff;padding:24px 22px;display:flex;flex-direction:column;gap:10px;transition:.25s}
.card:hover{border-color:#6dcac4;box-shadow:0 16px 35px #123d3b0d}
.card h3{margin:0;font-size:17px}
.card p{margin:0;font-size:13px;color:var(--muted);flex:1}
.card .tag{font:9px 'DM Mono',monospace;letter-spacing:.14em;color:#008f8c}
.card-dark{background:var(--deep);color:#fff;border-color:var(--deep)}
.card-dark p{color:#c0d3d3}

.tag-pill{display:inline-block;font:10px 'DM Mono',monospace;letter-spacing:.1em;border:1px solid var(--line);padding:5px 10px;border-radius:20px;color:#3d5a62;background:#fff}
.tag-example{background:#fff6e0;border-color:#f0d79a;color:#6b4d00}

.detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:44px;align-items:start}
.detail-panel{border:1px solid var(--line);padding:24px;background:var(--paper);position:sticky;top:20px}
.detail-panel dl{margin:0;display:grid;gap:12px}
.detail-panel dt{font:10px 'DM Mono',monospace;letter-spacing:.12em;color:#82969a}
.detail-panel dd{margin:2px 0 0;font-size:13px}
.checksum{font-family:'DM Mono',monospace;font-size:11px;word-break:break-all;color:#3d5a62}

.screenshot-placeholder{
  border:1px dashed #9fc7c3;background:repeating-linear-gradient(45deg,#f3faf8,#f3faf8 12px,#eef7f5 12px,#eef7f5 24px);
  min-height:180px;display:grid;place-items:center;text-align:center;padding:24px;color:#4d6b72;font-size:12px}
.screenshot-placeholder b{display:block;font:10px 'DM Mono',monospace;letter-spacing:.14em;color:#008f8c;margin-bottom:6px}
.shot{border:1px solid var(--line);background:#fff}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{font-size:11px;color:var(--muted);padding:8px 10px;border-top:1px solid var(--line)}

.note{font-size:12px;color:var(--muted);border-left:3px solid #f0d79a;padding-left:12px;margin:22px 0 0}
.draft-banner{background:#fff6e0;border-bottom:1px solid #f0d79a;color:#6b4d00;font-size:12px;padding:10px 5.5%}
.draft-banner strong{font-family:'DM Mono',monospace;letter-spacing:.1em;font-size:10px}

.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px}
.auth-card{border:1px solid var(--line);padding:28px 26px;background:#fff}
.auth-card h2{font-family:Georgia,serif;font-weight:500;font-size:24px;margin:0 0 6px}
.auth-card p.hint{font-size:12px;color:var(--muted);margin:0 0 18px}
.auth-button{width:100%;justify-content:center;cursor:pointer;font:inherit}
.auth-divider{margin:18px 0;font:10px 'DM Mono',monospace;letter-spacing:.16em;color:#82969a;text-align:center}
.auth-error{background:#fdecec;color:#7a2222;font-size:12px;padding:10px 12px;border-radius:3px;margin:0 0 12px}
.auth-status{font-size:12px;color:var(--muted);min-height:18px}
.phone-row{display:flex;gap:8px}
.phone-row input{flex:1}
#recaptcha-container{margin:12px 0}
.code-row{display:flex;gap:8px;margin-top:10px}
.code-row input{flex:1}

.table-wrap{overflow-x:auto;border:1px solid var(--line)}
table.data{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
table.data th{font:10px 'DM Mono',monospace;letter-spacing:.12em;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);color:#82969a;background:var(--paper)}
table.data td{padding:10px 12px;border-bottom:1px solid #eef4f2;vertical-align:top}
table.data tr:last-child td{border-bottom:none}
.outcome-success{color:#078e8c;font-weight:700}
.outcome-denied,.outcome-rate_limited,.outcome-error{color:#a32020;font-weight:700}
.outcome-not_found{color:#6b4d00;font-weight:700}

.profile-grid{display:grid;grid-template-columns:1fr 2fr;gap:36px;align-items:start}
.provider-list{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}
.mini-button{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);background:#fff;padding:8px 12px;font-size:12px;font-weight:700;cursor:pointer;border-radius:3px}
.mini-button:hover{border-color:var(--teal);color:#008f8c}
.mini-button.danger{border-color:#f0b8b8;color:#a32020}

.demo-meta{display:grid;gap:10px;margin:18px 0}
.demo-meta div{display:grid;gap:2px}
.demo-meta dt,.demo-meta .k{font:10px 'DM Mono',monospace;letter-spacing:.12em;color:#82969a}
.demo-meta dd,.demo-meta .v{margin:0;font-size:14px}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.value-card{border:1px solid var(--line);padding:20px;background:#fff}
.value-card span{font:10px 'DM Mono',monospace;color:var(--teal)}
.value-card h3{margin:10px 0 6px;font-size:15px}
.value-card p{margin:0;font-size:12px;color:var(--muted)}

@media (max-width:900px){
  .detail-grid,.profile-grid,.auth-grid,.two-col{grid-template-columns:1fr}
  .detail-panel{position:static}
  .values-grid{grid-template-columns:1fr}
}

.tag-pill-active{background:var(--teal);border-color:var(--teal);color:#fff}
a.tag-pill:hover,a.tag-pill:focus{border-color:var(--teal);color:#008f8c}
.placeholder-note{font-size:11px;color:#8a6d1a}
.feature-list{padding-left:20px}