/* Image Alt Text Checker — page-specific UI */
.at-tool{overflow:visible}
.at-entry{padding:1.4rem 1.75rem 1.2rem}
.at-entry__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem}
.at-entry__head .pn-label{margin:0}
.at-urlrow{display:flex;gap:.6rem}
.at-urlrow .pn-input{flex:1;min-width:0}
.at-html{width:100%;min-height:140px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.84rem;line-height:1.5}
.at-pastefoot{display:flex;gap:.6rem;margin-top:.6rem}
.at-pastefoot .pn-input{flex:1;min-width:0}
.at-entry__note{font-size:var(--pn-xs);color:var(--pn-muted);margin-top:.7rem}
.at-message{font-size:var(--pn-sm);color:var(--pn-red-ink);margin-top:.5rem}
.at-message.is-ok{color:var(--pn-gray)}
.at-message:empty{display:none}

.at-report{border-top:1px solid var(--pn-line-soft);padding:1.4rem 1.75rem 1.6rem}
.at-report.is-sample{background:linear-gradient(180deg,var(--pn-cream),transparent 240px)}
.at-report__top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.at-report__title h2{font-size:1.45rem;line-height:1.2}
.at-report__title p{font-size:var(--pn-sm);color:var(--pn-muted);margin-top:.15rem;overflow-wrap:anywhere}
.at-report.is-sample .at-report__title p{display:inline-block;background:var(--pn-yellow);color:var(--pn-black);font-weight:600;font-size:var(--pn-xs);border-radius:999px;padding:.2rem .65rem;margin-top:.4rem}
.at-health{margin:1.1rem 0 1rem;background:#fff;border:1px solid var(--pn-line);border-radius:16px;padding:.9rem 1.1rem}
.at-health__text{font-size:var(--pn-sm);color:var(--pn-gray)}
.at-health__text b{font-family:var(--pn-font-display);font-weight:400;font-size:1.35rem;color:var(--pn-black);margin-right:.2rem}
.at-health__text span{display:block;font-size:var(--pn-xs);color:var(--pn-muted);margin-top:.15rem}
.at-health__track{height:10px;border-radius:999px;background:var(--pn-linen);margin-top:.7rem;overflow:hidden}
.at-health__track i{display:block;height:100%;border-radius:999px;background:#ef7f6d;transition:width .4s ease,background .4s ease}
.at-health__track i[data-level=mid]{background:#f2c94c}.at-health__track i[data-level=good]{background:#21c49a}
.at-controls{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.9rem}
.at-filters{display:flex;gap:.4rem;flex-wrap:wrap}
.at-filters button{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--pn-line);border-radius:999px;background:#fff;padding:.38rem .8rem;font:inherit;font-size:var(--pn-xs);font-weight:600;color:var(--pn-charcoal);cursor:pointer}
.at-filters button b{font-weight:700;color:var(--pn-black);font-variant-numeric:tabular-nums}
.at-filters button i{width:8px;height:8px;border-radius:50%}
.at-filters .is-action i{background:var(--pn-red)}.at-filters .is-review i{background:#f2c94c}.at-filters .is-good i{background:#21c49a}.at-filters .is-skip i{background:#c4c7c5}
.at-filters button[aria-pressed=true]{background:var(--pn-black);border-color:var(--pn-black);color:#fff}
.at-filters button[aria-pressed=true] b{color:#fff}
.at-sort{display:flex;align-items:center;gap:.5rem;font-size:var(--pn-xs);color:var(--pn-muted)}
.at-sort .pn-select{padding:.35rem 2rem .35rem .6rem;font-size:var(--pn-xs);min-height:0}

.at-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1rem;align-items:start}
.at-results{display:grid;gap:.7rem;min-width:0}
.at-none{font-size:var(--pn-sm);color:var(--pn-muted);padding:1.5rem;text-align:center;border:1px dashed var(--pn-line);border-radius:14px}
.at-item{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1.1rem;padding:.9rem;border:1px solid var(--pn-line);border-left:4px solid var(--c,var(--pn-line));border-radius:16px;background:#fff;transition:box-shadow .3s}
.at-item--action{--c:var(--pn-red)}.at-item--review{--c:#f2c94c}.at-item--good{--c:#21c49a}.at-item--skip{--c:#d6d6d0;opacity:.8}
.at-item.is-fixed{--c:#21c49a}
.at-item.is-flash{box-shadow:0 0 0 3px var(--pn-yellow)}
.at-item__image{background:repeating-conic-gradient(#f1f0e8 0 25%,#fff 0 50%) 0 0/16px 16px;border-radius:10px;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.at-item__image img{width:100%;height:100%;object-fit:contain}
.at-item__image.is-fallback::before{content:'No preview';font-size:var(--pn-xs);color:var(--pn-muted)}
.at-item__body{min-width:0}
.at-item__top{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.at-item__top h3{font-size:1rem;margin-right:auto}
.at-badge{font-size:.6875rem;line-height:1.2;white-space:nowrap;padding:.22rem .55rem;border-radius:999px;font-weight:700}
.at-badge--action{background:var(--pn-red-pale);color:var(--pn-red-ink)}
.at-badge--review{background:var(--pn-yellow-pale);color:#6b5900}
.at-badge--good{background:var(--pn-mint);color:#0f5132}
.at-badge--skip{background:var(--pn-linen);color:var(--pn-gray)}
.at-badge--fixed{background:#21c49a;color:#fff}
.at-item__src{font-size:var(--pn-xs);color:var(--pn-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:.15rem 0 .5rem}
.at-item__alt{display:flex;gap:.5rem;align-items:baseline;background:var(--pn-cream);border-radius:8px;padding:.45rem .6rem;font-size:.8rem;overflow-wrap:anywhere}
.at-item__alt b{font-size:.625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pn-muted);flex:none}
.at-item__alt code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--pn-black);font-size:.78rem}
.at-item__reason{font-size:.8125rem;color:var(--pn-charcoal);line-height:1.5;margin:.5rem 0 .2rem}
.at-item__context{font-size:var(--pn-xs);color:var(--pn-muted);margin-bottom:.5rem}
.at-item__draft{display:flex;gap:.4rem;align-items:center;margin-top:.55rem;position:relative}
.at-item__draft input{flex:1;min-width:0;border:1px solid var(--pn-line);border-radius:10px;padding:.55rem .7rem;font:inherit;font-size:.8125rem;background:#fff}
.at-item__draft input:focus{outline:0;border-color:var(--pn-black);box-shadow:0 0 0 3px var(--pn-yellow-pale)}
.at-item__draft input:disabled{background:var(--pn-linen);color:var(--pn-muted)}
.at-count{font-size:.625rem;color:var(--pn-muted);min-width:2.2ch;text-align:right;font-variant-numeric:tabular-nums}
.at-deco{border:1px solid var(--pn-line);background:#fff;border-radius:999px;padding:.45rem .75rem;font:inherit;font-size:var(--pn-xs);font-weight:600;cursor:pointer;color:var(--pn-charcoal);white-space:nowrap}
.at-deco[aria-pressed=true]{background:var(--pn-black);border-color:var(--pn-black);color:#fff}

/* Screen reader transcript */
.at-sr{position:sticky;top:84px;background:#141414;color:#f1f1f1;border-radius:18px;padding:1rem 1rem 1.1rem;max-height:calc(100vh - 110px);overflow:auto}
.at-sr__head{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.8rem}
.at-sr__head h3{font-size:1.02rem;color:#fff}
.at-sr__toggle{font-size:var(--pn-xs);color:#cfcfcf}
.at-speech{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.at-say button{display:grid;grid-template-columns:22px 1fr;gap:.1rem .5rem;width:100%;text-align:left;background:#1f1f1f;border:0;border-left:3px solid #3a3a3a;border-radius:8px;padding:.45rem .55rem;color:#eaeaea;font:inherit;font-size:.72rem;line-height:1.45;cursor:pointer}
.at-say button:hover{background:#2a2a2a}
.at-say__n{color:#8a8a8a}
.at-say__text{overflow-wrap:anywhere}
.at-say small{grid-column:2;color:#ff9f8e;font-size:.66rem}
.at-say--ok button{border-left-color:#21c49a}
.at-say--warn button{border-left-color:#f2c94c}
.at-say--bad button{border-left-color:#ef7f6d}
.at-say--muted button,.at-say--muted{color:#8a8a8a}
.at-say--muted small{color:#8a8a8a}
li.at-say--muted:not(:has(button)){font-size:.72rem;padding:.3rem .55rem}
.at-sr__note{font-size:.6875rem;color:#a3a3a3;margin-top:.8rem;line-height:1.5}
.at-resultsnote{font-size:var(--pn-xs);color:var(--pn-muted);margin-top:.8rem}
.at-resultsnote:empty{display:none}

/* Content visuals */
.atx-flow{position:relative;width:min(100%,430px);background:var(--pn-white);border:1px solid var(--pn-line);border-radius:18px;padding:1.15rem;box-shadow:var(--pn-shadow-card)}
.atx-flow__top{display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;font-size:.68rem;font-weight:700;letter-spacing:.08em;padding-bottom:.8rem;border-bottom:1px solid var(--pn-line-soft)}
.atx-flow__top i{font-style:normal;color:var(--pn-muted);letter-spacing:.2em}
.atx-flow__row{display:grid;grid-template-columns:52px 1fr 24px;gap:.7rem;align-items:center;padding:.65rem 0;border-bottom:1px solid var(--pn-line-soft)}
.atx-flow__row:last-child{border:0;padding-bottom:0}
.atx-flow__thumb{height:42px;border-radius:7px;background:var(--pn-teal);position:relative;overflow:hidden}
.atx-flow__thumb span{position:absolute;width:28px;height:28px;background:var(--pn-yellow);border-radius:50%;right:4px;top:3px}
.atx-flow__thumb--yellow{background:var(--pn-yellow)}.atx-flow__thumb--yellow span{background:var(--pn-mint)}
.atx-flow__thumb--cream{background:var(--pn-linen)}.atx-flow__thumb--cream span{background:var(--pn-white)}
.atx-flow__row b{font-size:.75rem;display:block}.atx-flow__row small{display:block;font-size:.64rem;color:var(--pn-muted)}
.atx-flow__row em{font-style:normal;font-weight:700;font-size:.9rem;text-align:center}
.atx-compare{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.atx-compare article{background:var(--pn-white);border:1px solid var(--pn-line);border-radius:18px;padding:1.4rem;display:flex;flex-direction:column;gap:.75rem}
.atx-compare span{font-weight:700;font-size:.8rem}.atx-compare code{background:var(--pn-linen);border-radius:8px;padding:.7rem;font-size:.8rem;overflow-wrap:anywhere}
.atx-compare p{font-size:.87rem;color:var(--pn-charcoal)}
.atx-compare__bad{border-top:5px solid var(--pn-red)!important}.atx-compare__good{border-top:5px solid var(--pn-mint)!important}
.atx-example{position:relative;width:min(100%,390px);background:var(--pn-white);border-radius:17px;padding:12px;box-shadow:var(--pn-shadow-card)}
.atx-example__image{height:190px;position:relative;overflow:hidden;border-radius:10px;background:var(--pn-teal)}
.atx-example__sun{position:absolute;width:65px;height:65px;border-radius:50%;background:var(--pn-yellow);right:18%;top:20%}
.atx-example__hill{position:absolute;width:130%;height:90px;bottom:-25px;left:-15%;border-radius:50% 50% 0 0;background:var(--pn-mk-2);transform:rotate(-10deg)}
.atx-example__hill--two{bottom:-45px;left:15%;background:var(--pn-black);transform:rotate(8deg)}
.atx-example__caption{padding:.9rem .4rem .25rem;display:flex;flex-direction:column;gap:.2rem}.atx-example__caption small,.atx-example__caption span{color:var(--pn-muted);font-size:.7rem}.atx-example__caption b{font-size:.86rem}
.atx-types .pn-card{padding:1.5rem}.atx-types span{font-size:.7rem;font-weight:700;color:var(--pn-muted)}.atx-types h3{font-size:1.2rem;margin:.7rem 0 .4rem}.atx-types p{font-size:.86rem;color:var(--pn-charcoal)}
.atx-context{position:relative;width:min(100%,390px);background:var(--pn-white);border-radius:18px;padding:1.4rem;display:grid;gap:.25rem;box-shadow:var(--pn-shadow-card)}
.atx-context span{font-size:.7rem;color:var(--pn-muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:.45rem}.atx-context div{padding:.5rem .7rem;background:var(--pn-cream);border:1px solid var(--pn-line);border-radius:8px;font-size:.85rem}.atx-context div:last-child{background:var(--pn-yellow-pale)}
.atx-scope{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.atx-scope div{background:var(--pn-white);border:1px solid var(--pn-line);border-radius:18px;padding:1.35rem}.atx-scope b{color:var(--pn-black);font-size:.94rem}.atx-scope p{font-size:.85rem;margin-top:.35rem}
@media(max-width:980px){.at-body{grid-template-columns:1fr}.at-sr{position:static;max-height:none}}
@media(max-width:750px){.atx-compare,.atx-scope{grid-template-columns:1fr}}
@media(max-width:600px){.at-entry,.at-report{padding:1.1rem}.at-urlrow,.at-pastefoot{flex-direction:column}.at-urlrow .pn-btn,.at-pastefoot .pn-btn{width:100%}.at-item{grid-template-columns:1fr}.at-item__image{aspect-ratio:16/9}.at-item__draft{flex-wrap:wrap}.at-item__draft input{flex-basis:100%}.at-count{font-size:.625rem;color:var(--pn-muted);min-width:2.2ch;text-align:right;font-variant-numeric:tabular-nums}}

.at-sr__head h3 .pn-i{width:16px;height:16px;margin-right:.2rem}.at-badge--fixed .pn-i{width:11px;height:11px}