/* Articles (BETA). Uses Content Studio's tokens, .btn, .card and .chip; everything new is prefixed ab-. */
.betatag{font-size:10px;font-weight:900;letter-spacing:.06em;padding:2px 7px;border-radius:999px;background:var(--pink);color:#fff}
.ab{display:flex;flex-direction:column;gap:20px;min-width:0}
.ab-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px}
.ab-head .txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.ab-tabs{display:flex;gap:2px;padding:4px;background:#fff;border:1px solid var(--line);border-radius:999px;align-self:flex-start;flex-wrap:wrap}
.ab-tabs button{min-height:34px;padding:0 16px;border:0;border-radius:999px;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap}
.ab-tabs button[aria-current="page"]{background:var(--ink);color:#fff}
.ab-note{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:12px;background:#fff;border:1px dashed var(--line2);font-size:13px;color:var(--muted)}
.ab-note b{color:var(--ink)}
.ab-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ab-spread{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ab-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ab-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ab-muted{color:var(--muted)}.ab-small{font-size:13px}
.ab input[type=text],.ab input[type=search],.ab input[type=date],.ab input[type=number],.ab input[type=url],.ab select,.ab textarea,.ab-modal input[type=text],.ab-modal input[type=search],.ab-modal textarea,.ab-modal select{font:inherit;font-size:14px;color:var(--ink);border:1px solid var(--line2);border-radius:10px;background:#fff;padding:8px 12px;min-height:40px;width:100%}
.ab textarea,.ab-modal textarea{resize:vertical;line-height:1.5}
.ab label.f,.ab-modal label.f{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700;color:var(--muted)}
.ab .hint{font-weight:400;color:var(--faint)}
.ab-step{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.ab-c-red{background:#C8372D;color:#fff}.ab-c-orange{background:#E8A15A;color:#3D2006}.ab-c-teal{background:var(--accent);color:#fff}.ab-c-gray{background:var(--gray-soft);color:#3F3B35}
.ab-lang{display:inline-flex;padding:1px 8px;border-radius:999px;border:1px solid var(--line2);font-size:11px;font-weight:700;color:var(--muted);background:#fff}
.ab-grade{font-weight:900}.ab-grade.ok{color:var(--accent-dark)}.ab-grade.hi{color:var(--warn-ink)}

/* List */
.ab-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ab-filters input[type=search]{flex:1 1 260px;border-radius:999px;padding-left:16px}
.ab-filters select{width:auto;min-width:150px;border-radius:999px}
table.ab-inv{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
table.ab-inv th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--line);background:#FAFAF8;white-space:nowrap}
table.ab-inv td{padding:11px 14px;border-top:1px solid var(--rule);vertical-align:middle}
table.ab-inv tr.ab-rowlink{cursor:pointer}
table.ab-inv tr.ab-rowlink:hover td{background:var(--accent-tint)}
table.ab-inv td.t{font-weight:700}
table.ab-inv td.t .sub{display:block;font-weight:400;font-size:12px;color:var(--faint)}
table.ab-inv .dim td{color:var(--faint)}
.ab-empty{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:28px}

/* Editor */
.ab-edbar{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;justify-content:space-between;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:14px}
.ab-edbar .l,.ab-edbar .r{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ab-menuwrap{position:relative}
.ab-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:220px;background:#fff;border:1px solid var(--line2);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:6px;display:flex;flex-direction:column}
.ab-menu.right{left:auto;right:0}
.ab-menu button{all:unset;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px}
.ab-menu button:hover,.ab-menu button:focus-visible{background:var(--ground)}
.ab-menu button[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.ab-editor{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:18px;align-items:start}
.ab-doc{padding:30px 40px 40px;background:#fff;border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;gap:14px;min-width:0}
.ab-meta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:13px;color:var(--muted);align-items:center}
.ab-src{display:inline-flex;padding:2px 9px;border-radius:999px;background:var(--gray-soft);font-size:12px;font-weight:700;color:#3F3B35}
.ab-doc textarea.ab-ttl{border:0;padding:0;font-size:30px;font-weight:900;line-height:1.2;min-height:0;border-radius:6px;resize:none;overflow:hidden}
.ab-toolbar{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:6px;border:1px solid var(--line);border-radius:12px;background:#FAFAF8;position:sticky;top:8px;z-index:4}
.ab-toolbar button{min-width:34px;height:32px;border:0;border-radius:8px;background:none;font:inherit;font-weight:900;font-size:13px;cursor:pointer;color:var(--ink)}
.ab-toolbar button:hover{background:#fff}
.ab-toolbar .sep{width:1px;align-self:stretch;background:var(--line2);margin:4px}
.ab-toolbar .ai{color:var(--accent-dark)}
.ab-body{font-size:17px;line-height:1.7;outline:none;min-height:300px}
.ab-body h2{font-size:26px;margin:4px 0 10px}.ab-body > h2:first-child{display:none} /* the title field shows it (syncTitle) */
.ab-body h3{font-size:20px;margin:22px 0 6px}
.ab-body p{margin:0 0 14px}.ab-body ul,.ab-body ol{margin:0 0 14px;padding-left:26px}
.ab-body section{margin-top:26px;padding-top:12px;border-top:1px solid var(--rule);font-size:14px;color:var(--muted)}
.ab-body section h3{font-size:15px}
::highlight(ab-all){background-color:#FFF1C9}
::highlight(ab-cur){background-color:#FFCF4D}
.ab-selpop{position:absolute;z-index:70;display:flex;flex-wrap:wrap;gap:4px;padding:5px;background:var(--ink);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.2);max-width:min(560px,92vw)}
.ab-selpop button{border:0;background:none;color:#fff;font:inherit;font-size:13px;font-weight:700;padding:6px 10px;border-radius:8px;cursor:pointer;white-space:nowrap}
.ab-selpop button:hover{background:rgba(255,255,255,.14)}
.ab-selpop input{min-height:32px;width:220px;border-radius:8px;border:0;font:inherit;font-size:13px;padding:4px 10px}

.ab-panel{display:flex;flex-direction:column;gap:12px;position:sticky;top:8px;max-height:calc(100vh - 16px);overflow:auto;padding-bottom:6px}
.ab-ptabs{display:flex;gap:2px;padding:4px;background:#fff;border:1px solid var(--line);border-radius:999px}
.ab-ptabs button{flex:1;min-height:32px;border:0;border-radius:999px;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap;padding:0 8px}
.ab-ptabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.ab-ptabs .n{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:999px;background:var(--pink);color:#fff;font-size:11px;line-height:18px}
.ab-pcard{padding:16px;background:#fff;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:10px}
.ab-pcard h3{font-size:16px}
.ab-gauge{display:flex;align-items:center;gap:14px}
.ab-gnum{font-size:38px;font-weight:900;line-height:1}
.ab-gnum.hi{color:var(--warn-ink)}.ab-gnum.ok{color:var(--accent-dark)}
.ab-bar{position:relative;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--accent) 0 29%,var(--warn) 29% 57%,#E07B5F 57%);margin-top:4px}
.ab-bar .goal{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink)}
.ab-bar .me{position:absolute;top:50%;width:16px;height:16px;border-radius:999px;background:#fff;border:3px solid var(--ink);transform:translate(-50%,-50%);transition:left .4s ease}
.ab-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ab-stat{padding:7px;border-radius:10px;background:var(--ground);text-align:center}
.ab-stat b{display:block;font-size:15px}.ab-stat span{font-size:11px;color:var(--muted)}
.ab-sugnav{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:13px;font-weight:700;color:var(--muted)}
.ab-sugnav button{width:28px;height:28px;border-radius:999px;border:1px solid var(--line2);background:#fff;cursor:pointer;font:inherit}
.ab-sug{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;border:1px solid var(--line);background:#FAFAF8}
.ab-sug .why{display:flex;gap:6px;align-items:center;font-size:11px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ab-sug .dot{width:8px;height:8px;border-radius:999px;background:var(--warn)}
.ab-sug .dot.word{background:var(--pink)}.ab-sug .dot.accuracy{background:#C8372D}.ab-sug .dot.clarity,.ab-sug .dot.style{background:var(--blue)}
.ab-sug .old{font-size:14px;color:var(--muted);text-decoration:line-through;text-decoration-color:#C9C5BC}
.ab-sug .new{font-size:14px;font-weight:700}
.ab-sug .reason{font-size:13px;color:var(--muted)}
.ab-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ab-tag{display:inline-flex;align-items:center;gap:4px;padding:4px 5px 4px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark);font-size:13px;font-weight:700}
.ab-tag button{border:0;background:none;color:inherit;cursor:pointer;width:20px;height:20px;border-radius:999px;font-size:14px}
.ab-list{display:flex;flex-direction:column}
.ab-li{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;padding:10px 0;border-top:1px solid var(--rule);font-size:14px}
.ab-li:first-child{border-top:0}
.ab-li .who{font-size:12px;color:var(--faint)}

/* Video */
.ab-player{position:relative;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden}
.ab-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ab-player .thumb{position:absolute;inset:0;background:#222 center/cover no-repeat}
.ab-card-intro,.ab-card-end{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:8%;color:#fff;background:linear-gradient(120deg,var(--ab-brand,#00847A) 0 55%,rgba(0,0,0,.6))}
.ab-card-intro h3{font-size:clamp(20px,3.6vw,40px);line-height:1.1}
.ab-card-intro p{font-size:clamp(13px,1.6vw,19px);opacity:.92;margin:0}
.ab-card-intro .org{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.ab-card-end{align-items:flex-start;background:rgba(0,0,0,.72)}
.ab-card-end p{font-size:clamp(15px,2.2vw,24px);font-weight:900;max-width:80%;margin:0}
.ab-card-end .btn{background:#fff;color:var(--ink);border:0}
.ab-player .playbtn{position:absolute;right:14px;bottom:14px;white-space:nowrap}

/* Modals (create, preview) */
.ab-modal{position:fixed;inset:0;z-index:60;background:rgba(20,20,19,.45);display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow:auto}
.ab-modal .box{width:min(880px,100%);background:#fff;border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.ab-modal .box.wide{width:min(1000px,100%);padding:16px}
.ab-modal iframe.ab-pv{width:100%;height:76vh;border:1px solid var(--line);border-radius:12px;background:#f5f5f5}
.ab-starts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ab-start{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:14px;background:#fff;border:2px solid var(--line);cursor:pointer;text-align:left;font:inherit;color:inherit}
.ab-start:hover{border-color:var(--ink)}
.ab-start[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-tint)}
.ab-start .ico{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;font-weight:900}
.ab-start b{font-size:14px}.ab-start span{font-size:12px;color:var(--muted)}
.ab-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:330px;overflow:auto}
.ab-pick{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;text-align:left;font:inherit;color:inherit}
.ab-pick:hover{border-color:var(--ink)}
.ab-pick[aria-pressed="true"]{border:2px solid var(--accent);background:var(--accent-tint);padding:9px}
.ab-pick .th{width:64px;height:44px;border-radius:8px;flex-shrink:0;background:var(--ground) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.ab-pick .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.ab-pick .tx b{font-size:13px}.ab-pick .tx span{font-size:12px;color:var(--muted)}
.ab-working{display:flex;gap:10px;align-items:center;padding:14px;border-radius:12px;background:var(--accent-tint);font-weight:700}

/* Chat */
.ab-chatwrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;align-items:start}
.ab-chatlist{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}
.ab-chatlist button{all:unset;display:block;padding:8px 10px;border-radius:8px;font-size:13px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-chatlist button:hover{background:var(--ground)}
.ab-chatlist button[aria-current="page"]{background:var(--accent-soft);font-weight:700}
.ab-chat{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;min-height:60vh}
.ab-msgs{display:flex;flex-direction:column;gap:14px;flex:1}
.ab-msg{display:flex;gap:10px;align-items:flex-start;animation:abfade .3s ease-out both}
.ab-msg .av{width:30px;height:30px;border-radius:999px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex-shrink:0}
.ab-msg.me{justify-content:flex-end}
.ab-msg .bub{padding:10px 14px;border-radius:14px;background:#FAFAF8;border:1px solid var(--line);font-size:14px;max-width:720px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ab-msg.me .bub{background:var(--ink);color:#fff;border-color:var(--ink);white-space:pre-wrap}
.ab-msg .bub p{margin:0}.ab-msg .bub p+p{margin-top:6px}
.ab-msg .bub ul,.ab-msg .bub ol{margin:4px 0;padding-left:20px}
.ab-msg .bub a.item{color:var(--accent-dark);font-weight:700;cursor:pointer}
.ab-steps{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.ab-steps .bad{color:#C8372D}
.ab-typing{display:inline-flex;gap:4px;padding:4px 0}
.ab-typing i{width:6px;height:6px;border-radius:999px;background:var(--faint);animation:abblink 1s infinite}
.ab-typing i:nth-child(2){animation-delay:.15s}.ab-typing i:nth-child(3){animation-delay:.3s}
@keyframes abblink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes abfade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.ab-chips{display:flex;flex-wrap:wrap;gap:8px}
.ab-chipbtn{min-height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-align:left}
.ab-chipbtn:hover{border-color:var(--ink)}
form.ab-ain{display:flex;gap:10px;align-items:flex-end;padding:8px 8px 8px 18px;border-radius:22px;border:1px solid var(--line2);background:#fff}
form.ab-ain textarea{flex:1;border:0!important;outline:none;resize:none;min-height:30px!important;max-height:180px;padding:7px 0!important;background:none}

#abToasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center}
.ab-toast{padding:11px 18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.18);animation:abfade .25s ease-out}
.ab-toast.bad{background:#C8372D}
.btn.ab-busy::before{content:"";width:12px;height:12px;border-radius:999px;border:2px solid currentColor;border-top-color:transparent;animation:abspin .8s linear infinite}
@keyframes abspin{to{transform:rotate(360deg)}}

@media (max-width:1180px){.ab-editor{grid-template-columns:1fr}.ab-panel{position:static;max-height:none}.ab-starts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.ab-doc{padding:20px 18px}.ab-doc textarea.ab-ttl{font-size:24px}.ab-grid2,.ab-grid3{grid-template-columns:1fr}.ab-chatwrap{grid-template-columns:1fr}.ab-chatlist{display:none}.ab-picks{grid-template-columns:1fr}.ab-starts{grid-template-columns:repeat(2,minmax(0,1fr))}table.ab-inv .hide-s{display:none}}
/* Reading level: the goal slider and the two scorers. */
.ab-goal{display:flex;align-items:center;gap:10px;margin-top:8px}
.ab-goal input[type=range]{flex:1;accent-color:var(--ink);cursor:pointer}
.ab-hem{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--rule)}
.ab-hem > div{display:flex;flex-direction:column}
.ab-hemflags{grid-column:1/-1;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ab-hemflags li{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--ground)}
.ab-hemflags li.warn{background:#FFF4D6}
.ab-hemflags li.bad{background:#FBE1DA}
/* Loading circle while a list loads (Adapt a CARAVAN article). */
.ab-loading{grid-column:1/-1;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:14px;color:var(--muted)}
.ab-loading{animation:abFade .25s ease-out}
@keyframes abFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .ab-loading{animation:none} }
/* Inline AI comments: margin pins and the comment card under a passage. */
.ab-doc{position:relative}
.ab-pins{position:absolute;top:0;right:8px;width:26px;height:100%;pointer-events:none}
.ab-pin{position:absolute;right:0;width:24px;height:24px;border-radius:999px;border:0;background:var(--accent-soft);color:var(--accent);font-size:12px;cursor:pointer;pointer-events:auto;display:grid;place-items:center;animation:abFade .25s ease-out;transition:transform .15s}
.ab-pin:hover,.ab-pin.on{transform:scale(1.15);background:var(--accent);color:#fff}
.ab-pin.word{background:#FFF1D6;color:#9A6200}
.ab-pin.accuracy{background:#FBE1DA;color:#A33A22}
.ab-inline{position:absolute;z-index:5;width:min(360px,calc(100% - 32px));padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 40px rgba(20,20,19,.16);display:flex;flex-direction:column;gap:8px;animation:abFade .2s ease-out}
.ab-inline .why{font-size:12px;font-weight:800;display:inline-flex;align-items:center;gap:6px}
.ab-inline .reason{margin:0;font-size:14px}
.ab-inline .new{margin:0;padding:8px 10px;border-radius:10px;background:var(--accent-tint);font-size:14px}
@media (prefers-reduced-motion: reduce){ .ab-pin,.ab-inline{animation:none;transition:none} }
/* New article: clear feedback on what you picked, template tiles, library preview beside the list, language. */
.ab-start,.ab-pick,.ab-tpl{position:relative;transition:border-color .15s,background .15s,transform .1s,box-shadow .15s}
.ab-start:active,.ab-pick:active,.ab-tpl:active{transform:scale(.98)}
.ab-check{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;font-weight:900;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
[aria-pressed="true"] > .ab-check{opacity:1;transform:none}
.ab-pick[aria-pressed="true"],.ab-tpl[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-line);background:var(--accent-tint)}
.ab-modeparts{display:contents}
.ab-modeparts > *{animation:abFade .22s ease-out}
.ab-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.ab-tpl{display:flex;flex-direction:column;gap:6px;text-align:left;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff;font:inherit;color:inherit;cursor:pointer}
.ab-tpl:hover{border-color:var(--ink)}
.ab-tpl b{font-size:14px}
.ab-tpl > span:not(.ab-check):not(.ab-tplthumb){font-size:12px;color:var(--muted);line-height:1.4}
.ab-tplthumb{display:flex;flex-direction:column;gap:5px;aspect-ratio:4/3;padding:12px;border-radius:10px;background:var(--off);border:1px solid var(--rule);overflow:hidden}
.ab-tplthumb i{display:block;border-radius:3px;flex:none}
.ab-tplthumb .h2{height:10px;width:75%;background:var(--ink);margin-bottom:3px}
.ab-tplthumb .h3{height:6px;width:45%;background:var(--accent)}
.ab-tplthumb .ln{height:4px;width:100%;background:var(--line2)}
.ab-tplthumb .ln.short{width:70%}
.ab-modal .box.wide{width:min(1180px,calc(100vw - 32px))}
.ab-libsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px;align-items:stretch}
.ab-libsplit > .ab-picks{grid-template-columns:1fr;max-height:420px;overflow-y:auto}
.ab-libpv{border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;min-height:420px;background:var(--off)}
.ab-libpv.in{animation:abFade .25s ease-out}
.ab-libpv-head{display:flex;gap:10px;align-items:center}
.ab-libpv-head .th{width:56px;height:42px;border-radius:8px;background-size:cover;background-position:center;flex:none}
.ab-libframe{flex:1;width:100%;min-height:340px;border:1px solid var(--line);border-radius:10px;background:#fff}
.ab-langpick{display:inline-flex;gap:6px;align-items:center}
.ab-langpick select{min-height:32px;width:auto}
@media (max-width:900px){.ab-libsplit{grid-template-columns:1fr}.ab-libpv{min-height:0}}
.ab-tplthumb .row{display:flex;align-items:center;gap:5px}
.ab-tplthumb .row .ln{flex:1}
.ab-tplthumb b{flex:none;display:grid;place-items:center;font-size:8px;font-weight:900;border-radius:999px;width:13px;height:13px;color:#fff}
.ab-tplthumb .tag.no{background:#E07B5F}.ab-tplthumb .tag.yes{background:var(--accent)}
.ab-tplthumb .num{background:var(--ink)}
.ab-tplthumb b.tq{background:var(--accent)}.ab-tplthumb b.ta{background:var(--warn)}
.ab-tplthumb .row.ans{padding-left:10px}
.ab-tplthumb .grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ab-tplthumb .cell{display:flex;flex-direction:column;gap:3px;padding:5px;border-radius:6px;background:#fff;border:1px solid var(--rule)}
.ab-tplthumb .cell b{background:var(--accent-soft);color:var(--accent);width:14px;height:14px;font-size:9px}
.ab-ain .ai-wrap{flex:1;min-width:0}
.ab-ain .ai-wrap textarea{width:100%}
/* Video → From a PowerPoint (public/ppt-video.js) */
.pv-root{display:flex;flex-direction:column;gap:14px;animation:abFade .25s ease-out}
.pv-empty{align-items:center;text-align:center;gap:12px;padding:48px 24px}
.pv-drop{border:2px dashed var(--line2);transition:border-color .15s,background .15s}
.pv-drop.over{border-color:var(--accent);background:var(--accent-tint)}
.pv-bigico{width:72px;height:72px;border-radius:999px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:28px}
.pv-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pv-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 16px;border:1px solid var(--line);border-radius:16px;background:#fff}
.pv-name{font:inherit;font-size:18px;font-weight:800;border:1px solid transparent;border-radius:8px;padding:6px 8px;min-width:220px}
.pv-name:hover,.pv-name:focus{border-color:var(--line2)}
.pv-grid{display:grid;grid-template-columns:230px minmax(0,1fr) 330px;gap:16px;align-items:start}
.pv-scenes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 220px);overflow-y:auto}
.pv-scene{position:relative;animation:abFade .2s ease-out}
.pv-pick{width:100%;display:grid;grid-template-columns:20px 1fr;gap:4px 8px;padding:8px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left;font:inherit;cursor:pointer}
.pv-scene.on .pv-pick{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-line)}
.pv-n{font-size:12px;font-weight:800;color:var(--muted)}
.pv-thumb{width:100%;aspect-ratio:16/9;border-radius:6px;border:1px solid var(--rule);display:block}
.pv-meta{grid-column:2;display:flex;gap:6px;align-items:baseline;min-width:0}
.pv-meta b{font-size:12px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-dur{font-size:11px;color:var(--muted)}
.pv-ord{position:absolute;top:12px;right:12px;display:none;flex-direction:column;gap:2px}
.pv-scene:hover .pv-ord,.pv-scene:focus-within .pv-ord{display:flex}
.pv-ord button{width:22px;height:22px;border-radius:6px;border:1px solid var(--line2);background:#fff;cursor:pointer;font-size:12px}
.pv-add{width:100%}
.pv-center{display:flex;flex-direction:column;gap:10px;position:sticky;top:16px}
.pv-stage{width:100%;aspect-ratio:16/9;border-radius:14px;border:1px solid var(--line);background:#000;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.pv-inspect{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;animation:abFade .2s ease-out}
.pv-inspect h3{margin:0}
.pv-f{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700}
.pv-f textarea{font:inherit;font-weight:400;font-size:14px}
.pv-layouts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pv-lay{display:flex;flex-direction:column;gap:4px;align-items:center;padding:6px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.pv-lay[aria-checked="true"]{border-color:var(--accent);background:var(--accent-tint)}
.pv-layico{width:48px;height:27px;border-radius:4px;background:var(--off);border:1px solid var(--rule);position:relative;overflow:hidden}
.pv-lay.title .pv-layico{background:var(--accent)}
.pv-lay.image .pv-layico{background:linear-gradient(transparent 55%,#333),#9bb}
.pv-lay.image-left .pv-layico{background:linear-gradient(90deg,#9bb 46%,#fff 46%)}
.pv-lay.quote .pv-layico{background:#141413}
.pv-lay.bullets .pv-layico{background:linear-gradient(90deg,var(--accent) 6%,#fff 6%)}
.pv-script{margin:0;font-size:12px;font-weight:400;padding:8px 10px;border-radius:10px;background:var(--off);max-height:120px;overflow-y:auto}
.pv-check{display:flex;gap:8px;align-items:center;font-size:13px}
.btn.rec{background:#C8372D;color:#fff;border-color:#C8372D}
.pv-export{display:flex;flex-direction:column;gap:6px;padding:12px 16px;border-radius:14px;background:var(--accent-tint);animation:abFade .2s ease-out}
.pv-exbar{display:block;height:8px;border-radius:999px;background:#fff;overflow:hidden}
.pv-exbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
@media (max-width:1280px){.pv-grid{grid-template-columns:200px minmax(0,1fr)}.pv-inspect{grid-column:1/-1}}
@media (max-width:760px){.pv-grid{grid-template-columns:1fr}.pv-scenes{flex-direction:row;overflow-x:auto;max-height:none}.pv-scene{min-width:180px}.pv-center{position:static}}
.pv-root[hidden],.vv-grid[hidden]{display:none !important}

/* Health claims, assignees, picture (2026-11-02) */
.ab-sug .dot.claim{background:#B4232A}
.ab-pin.claim{background:#FCE4E4;color:#B4232A}
.ab-risk{margin-left:8px;padding:1px 8px;border-radius:999px;background:#FCE4E4;color:#B4232A;font-size:11px;font-weight:800}
.ab-claimstate{margin:0;padding:8px 10px;border-radius:8px;background:#F4F2EE;animation:fadeIn .25s ease-out}
.ab-claimstate.warn{background:#FFF4E5;color:#7A4A00}
.ab-claimstate.ok{background:var(--accent-soft);color:var(--accent-dark)}
.ab-assign{gap:2px}
.ab-av{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:var(--dark);color:#fff;font-size:10px;font-weight:800;border:2px solid #fff;margin-left:-6px}
.ab-av:first-child{margin-left:0}
.ab-av.sm{width:20px;height:20px;font-size:9px;margin-left:0}
.ab-assignmenu{min-width:280px;padding:12px;display:flex;flex-direction:column;gap:8px;animation:fadeIn .2s ease-out}
.ab-check-row{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.ab-check-row .ab-av{margin-left:0}
.ab-late{color:#B4232A;font-weight:700}
.ab-picprev{width:100%;max-height:180px;object-fit:cover;border-radius:10px;border:1px solid var(--line);animation:fadeIn .25s ease-out}
/* Create a video: AI scripts and voices, uploads (2026-11-02) */
.pv-spread{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pv-scriptbox{font-weight:400;font-size:14px;line-height:1.45}
.pv-ai{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);animation:abFade .2s ease-out}
.pv-ai-l{display:flex;flex-direction:column;gap:2px;flex:1 1 300px}
.pv-voice{display:flex;align-items:center;gap:6px;font-weight:700}
.pv-voice select{width:auto;min-height:32px;padding:2px 8px}
.pv-uploaded{display:flex;flex-direction:column;gap:8px;animation:abFade .2s ease-out}
.pv-made{gap:6px}
.pv-madeitem{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--rule);animation:abFade .2s ease-out}

/* CREATE pages: everything that shows or hides fades.
   Hidden toggles: an animation restarts when an element returns from display:none; allow-discrete keeps it on screen while it fades out.
   Swapped or removed content fades through fadeInEl / fadeOutEl in index.html. */
.ab,.vv-grid{animation:viewin .3s ease-out}
.ab-menu,.ab-selpop{animation:abFade .14s ease-out;transition:opacity .12s ease-in,display .12s allow-discrete}
.ab-menu[hidden],.ab-selpop[hidden]{opacity:0}
.ab-modal{animation:abFade .2s ease-out}
.ab-modal .box{animation:abfade .25s ease-out}
.ab-picks > *,.ab-sug,.ab-working,.pv-root .banner{animation:abFade .2s ease-out}
@media (prefers-reduced-motion: reduce){
  .ab,.vv-grid,.pv-root,.ab-menu,.ab-selpop,.ab-modal,.ab-modal .box,.ab-picks > *,.ab-sug,.ab-working,.pv-root .banner{animation:none;transition:none}
}

/* 2026-11-06: language versions, title ideas, credits, invite from an article */
.ab-varbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ab-vartabs{display:flex;flex-wrap:wrap;gap:6px}
.ab-vartab{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);background:#fff;border-radius:999px;padding:5px 8px 5px 14px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.ab-vartab:hover{border-color:var(--ink)}
.ab-vartab[aria-selected="true"]{border-color:var(--dark);box-shadow:inset 0 0 0 1px var(--dark)}
.ab-titleai{align-self:flex-start;border:0;background:none;padding:0;font:inherit;font-size:13px;font-weight:700;color:var(--accent);cursor:pointer}
.ab-titleai:hover{text-decoration:underline}
.ab-titleai:disabled{color:var(--faint);cursor:wait}
.ab-titles{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px 12px;margin:6px 0;border:1px solid var(--line);border-radius:12px;animation:abFade .2s ease-out}
.ab-titleopt{border:1px solid var(--line2);background:#fff;border-radius:10px;padding:6px 12px;font:inherit;font-size:15px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer}
.ab-titleopt:hover{border-color:var(--ink)}
.ab-credits{margin-left:auto;align-self:center;font-size:13px;font-weight:700;color:var(--ink);background:var(--soft, #F4F1EA);padding:4px 12px;border-radius:999px;white-space:nowrap}
.ab-credits.low{background:#FBE9E6;color:#8A2A16}
.ab-promo{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:12px;background:var(--soft, #F4F1EA)}
.ab-promo-ic{color:var(--accent);font-weight:700}
.ab-invitehere{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:8px}
.ab-invitehere input{min-height:32px;flex:1;min-width:0}