/* Tier list maker — same magazine system as tools.css:
   cool gray surfaces, forest accent, mono data labels, sharp corners. */
.tl-tool{margin-top:26px}
.tl-hero{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:26px 0 22px}
.tl-hero .eyebrow{font:10px var(--type-data);letter-spacing:.18em;text-transform:uppercase;color:var(--site-accent);margin:0 0 10px}
.tl-hero h1{font-size:clamp(28px,4.6vw,44px);line-height:1.15;margin:0 0 12px;font-weight:800}
.tl-hero p{max-width:var(--measure);font-size:14px;line-height:1.9;color:var(--muted);margin:0}

/* ---------- toolbar ---------- */
.tl-bar{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:end;justify-content:space-between;margin:22px 0 16px}
.tl-bar-group{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.tl-bar-label{display:block;font:10px var(--type-data);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);align-self:center}
.tl-bar select{min-height:36px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:4px 8px;border-radius:var(--radius)}
.tl-btn{min-height:36px;padding:6px 14px;border:1px solid var(--ink);background:var(--surface);color:var(--ink);border-radius:var(--radius);font-weight:700;font-size:13px;cursor:pointer}
.tl-btn:hover{border-color:var(--site-accent);color:var(--site-accent)}
.tl-btn-primary{background:var(--site-accent);border-color:var(--site-accent);color:var(--accent-ink)}
.tl-btn-primary:hover{color:var(--accent-ink);filter:brightness(1.08)}
.tl-btn-quiet{border-color:var(--line);color:var(--muted)}
.tl-btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- board ---------- */
.tl-board{border:1px solid var(--line);background:var(--surface);padding:16px}
.tl-title-input{display:block;width:100%;border:0;border-bottom:2px solid var(--ink);background:transparent;padding:4px 2px 10px;margin:0 0 14px;font-size:clamp(20px,3vw,28px);font-weight:800;color:var(--ink)}
.tl-title-input:focus{outline:none;border-bottom-color:var(--site-accent)}

.tl-rows{display:flex;flex-direction:column;gap:8px}
.tl-row{display:grid;grid-template-columns:84px minmax(0,1fr);gap:0;border:1px solid var(--line);min-height:72px;background:var(--canvas)}
.tl-tier-label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 6px;position:relative}
.tl-tier-name{width:100%;border:0;background:transparent;text-align:center;font-size:20px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);padding:2px}
.tl-tier-name:focus{outline:2px solid rgba(255,255,255,.8);outline-offset:1px}
.tl-tier-tools{display:flex;gap:4px;align-items:center;justify-content:center}
.tl-tier-color{width:22px;height:22px;padding:0;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:transparent;cursor:pointer}
.tl-tier-color::-webkit-color-swatch-wrapper{padding:1px}
.tl-tier-color::-webkit-color-swatch{border:0;border-radius:50%}
.tl-tier-color::-moz-color-swatch{border:0;border-radius:50%}
.tl-tier-del{width:22px;height:22px;padding:0;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:rgba(0,0,0,.18);color:#fff;font-size:13px;line-height:1;cursor:pointer}
.tl-tier-del:hover{background:rgba(0,0,0,.4)}

.tl-items{display:flex;flex-wrap:wrap;gap:8px;padding:8px;align-content:flex-start;min-height:56px}
.tl-items.tl-drop-end{outline:2px dashed var(--site-accent);outline-offset:-4px}
.tl-zone-empty{margin:0;padding:14px 4px;font-size:12px;color:var(--muted);font-style:italic;pointer-events:none}

.tl-item{position:relative;width:76px;display:flex;flex-direction:column;gap:4px;cursor:grab;user-select:none;-webkit-user-select:none}
.tl-item:active{cursor:grabbing}
.tl-item.tl-drag-src{opacity:.35}
.tl-item.tl-drop-before{box-shadow:-4px 0 0 var(--site-accent)}
.tl-cover{width:76px;height:76px;border-radius:4px;overflow:hidden;border:1px solid var(--line);background:var(--canvas)}
.tl-cover img{width:100%;height:100%;object-fit:cover}
.tl-textcover{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:24px;font-weight:800;letter-spacing:.02em}
.tl-item-name{margin:0;font-size:10px;line-height:1.35;font-weight:600;color:var(--ink);text-align:center;overflow-wrap:anywhere}
.tl-gear{position:absolute;top:2px;right:2px;width:24px;height:24px;border:0;border-radius:4px;background:rgba(20,26,22,.72);color:#fff;font-size:15px;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s}
.tl-item:hover .tl-gear,.tl-item:focus-within .tl-gear{opacity:1}
.tl-item-x{position:absolute;top:2px;right:28px;width:24px;height:24px;border:0;border-radius:4px;background:rgba(20,26,22,.72);color:#fff;font-size:15px;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s}
.tl-item-x:hover{background:#b03a2e}
.tl-item:hover .tl-item-x,.tl-item:focus-within .tl-item-x{opacity:1}

/* floating menu — portaled to <body>, fixed so it escapes scroll containers */
.tl-menu{position:fixed;z-index:80;width:232px;max-height:calc(100vh - 16px);overflow-y:auto;padding:10px;background:var(--surface);border:1px solid var(--ink);box-shadow:0 10px 28px rgba(20,30,25,.24);display:flex;flex-direction:column;gap:8px}
.tl-menu-head{display:flex;gap:8px;align-items:center;min-width:0}
.tl-menu-head-cover{flex:0 0 32px;width:32px;height:32px;border-radius:4px;overflow:hidden;border:1px solid var(--line);background:var(--canvas)}
.tl-menu-head-cover img{width:100%;height:100%;object-fit:cover;display:block}
.tl-menu-head-cover .tl-textcover{font-size:12px}
.tl-menu-head-name{flex:1;min-width:0;font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-menu-rename{flex:1;min-width:0;min-height:32px;border:1px solid var(--site-accent);background:var(--canvas);color:var(--ink);font-size:13px;font-weight:600;padding:3px 6px;border-radius:var(--radius)}
.tl-menu-sub{font:10px var(--type-data);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.tl-menu-tiers{display:flex;flex-wrap:wrap;gap:5px}
.tl-tierpick{min-height:32px;padding:3px 10px;border:1px solid rgba(0,0,0,.14);font-size:12px;font-weight:800;border-radius:var(--radius);cursor:pointer}
.tl-tierpick.on{outline:2px solid var(--ink);outline-offset:1px}
.tl-tierpick-pool{background:var(--canvas);color:var(--muted);border-color:var(--line)}
.tl-menu-order{display:flex;gap:6px}
.tl-menu-order button{flex:1;min-height:32px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:12px;font-weight:700;border-radius:var(--radius);cursor:pointer}
.tl-menu-order button:hover{border-color:var(--site-accent);color:var(--site-accent)}
.tl-menu-acts{display:flex;flex-direction:column;gap:6px}
.tl-menu-acts>button,.tl-menu-acts .tl-menu-file span{display:block;width:100%;min-height:32px;padding:6px 8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:12px;font-weight:700;border-radius:var(--radius);cursor:pointer;text-align:center;box-sizing:border-box}
.tl-menu-acts>button:hover,.tl-menu-acts .tl-menu-file:hover span{border-color:var(--site-accent);color:var(--site-accent)}
.tl-menu-file{cursor:pointer;display:block}
.tl-menu-file input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tl-menu-acts .tl-danger{border-color:#c94f3d;color:#c94f3d}
.tl-menu-acts .tl-danger:hover{background:#c94f3d;color:#fff}
.tl-menu-tools .tl-act{min-height:34px}
.tl-menu-veil{position:fixed;inset:0;background:rgba(10,14,12,.42);z-index:75}

.tl-add-tier{margin-top:8px;min-height:34px;padding:4px 14px;border:1px dashed var(--line);background:transparent;color:var(--muted);font-size:12px;font-weight:700;border-radius:var(--radius);cursor:pointer}
.tl-add-tier:hover:not(:disabled){border-color:var(--site-accent);color:var(--site-accent)}

.tl-pool{margin-top:10px;border:1px dashed var(--line);background:var(--surface)}
.tl-pool.tl-file-hover{outline:2px dashed var(--site-accent);outline-offset:-3px}
.tl-pool-items{flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px}
.tl-pool-head{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:8px 12px;border-bottom:1px dashed var(--line)}
.tl-pool-label{font:10px var(--type-data);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.tl-pool-label span{font-weight:400}
.tl-pool-hint{font-size:11px;color:var(--muted)}
.tl-pool-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:auto}
.tl-pool-btn{min-height:26px;padding:2px 10px;border:1px solid var(--line);background:var(--canvas);color:var(--ink);font-size:11px;font-weight:700;border-radius:var(--radius);cursor:pointer}
.tl-pool-btn:hover:not(:disabled){border-color:var(--site-accent);color:var(--site-accent)}
.tl-pool-btn:disabled{opacity:.45;cursor:not-allowed}
.tl-pool-btn[aria-expanded="true"]{background:var(--ink);color:var(--canvas)}
.tl-batch-panel{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-bottom:1px dashed var(--line)}
.tl-batch-panel[hidden]{display:none}
.tl-batch-panel textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--canvas);color:var(--ink);padding:8px 10px;border-radius:var(--radius);font-size:13px;resize:vertical}
.tl-batch-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tl-batch-count{font:10px var(--type-data);letter-spacing:.1em;color:var(--muted)}
.tl-batch-panel .tl-btn{min-height:30px;padding:3px 12px;font-size:12px}

/* ---------- add panel ---------- */
.tl-add{margin:18px 0 0;display:flex;flex-direction:column;gap:12px}
.tl-add-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tl-add-form input[type="text"]{flex:1 1 240px;min-height:38px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:6px 10px;border-radius:var(--radius)}
.tl-add-form input[type="text"]:focus{outline:2px solid var(--site-accent);outline-offset:1px}
.tl-add-preview{width:38px;height:38px;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.tl-add-preview img{width:100%;height:100%;object-fit:cover}
.tl-batch{border:1px solid var(--line);background:var(--surface);padding:0}
.tl-batch summary{cursor:pointer;padding:10px 14px;font-size:12px;font-weight:700;color:var(--muted);list-style-position:inside}
.tl-batch summary:hover{color:var(--site-accent)}
.tl-batch form{padding:0 14px 14px;display:flex;flex-direction:column;gap:8px}
.tl-batch textarea{width:100%;border:1px solid var(--line);background:var(--canvas);color:var(--ink);padding:8px 10px;border-radius:var(--radius);font-size:13px;resize:vertical}
.tl-batch button{align-self:flex-start}

.tl-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);margin:0;padding:10px 18px;background:var(--ink);color:var(--canvas);font-size:13px;font-weight:700;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:90;max-width:min(92vw,480px);text-align:center;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.tl-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.tl-toast-btn{min-height:28px;padding:2px 12px;border:1px solid currentColor;background:transparent;color:inherit;font-size:12px;font-weight:800;border-radius:4px;cursor:pointer;letter-spacing:.04em}
.tl-toast-btn:hover{background:var(--canvas);color:var(--ink);border-color:var(--canvas)}

/* ---------- seo block ---------- */
.tl-seo{margin-top:44px;border-top:2px solid var(--ink);padding-top:24px;display:flex;flex-direction:column;gap:28px}
.tl-seo h2{font-size:18px;margin:0 0 10px;font-weight:800}
.tl-seo p{max-width:var(--measure);font-size:13px;line-height:1.9;color:var(--muted);margin:0 0 10px}
.tl-seo ul{max-width:var(--measure);font-size:13px;line-height:1.9;color:var(--muted);margin:0;padding-left:20px}
.tl-faq details{border:1px solid var(--line);background:var(--surface);margin-bottom:8px}
.tl-faq summary{cursor:pointer;padding:10px 14px;font-weight:700;font-size:13px}
.tl-faq details p{padding:0 14px 12px;margin:0;font-size:13px;line-height:1.85;color:var(--muted)}
.tl-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.tl-links a{font-size:13px;font-weight:700;color:var(--site-accent);text-decoration:none}
.tl-links a:hover{text-decoration:underline}

/* ---------- mobile ---------- */
@media(max-width:760px){
  .tl-row{grid-template-columns:56px minmax(0,1fr)}
  .tl-tier-name{font-size:15px}
  .tl-tier-tools{flex-direction:row}
  .tl-item{width:84px}
  .tl-cover{width:84px;height:84px}
  .tl-textcover{font-size:24px}
  .tl-gear{opacity:1;width:26px;height:26px}
  .tl-item-x{opacity:1;width:26px;height:26px;right:30px}
  .tl-menu{left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:min(70vh,calc(100vh - 24px));box-shadow:0 -8px 32px rgba(20,30,25,.28)}
  .tl-menu .tl-tierpick,.tl-menu .tl-menu-order button,.tl-menu .tl-act,.tl-menu .tl-menu-file span{min-height:40px}
  .tl-pool-btn{min-height:32px;font-size:12px}
  .tl-bar{align-items:stretch;flex-direction:column}
  .tl-bar-group{align-items:center}
}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  .tl-menu{animation:tl-sheet .16s ease}
  .tl-menu-veil{animation:tl-veil .16s ease}
}
@keyframes tl-sheet{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes tl-veil{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
  .tl-item{transition:box-shadow .12s ease}
}

/* ---------- library picker ---------- */
.tl-library{border:1px solid var(--line);background:var(--surface);margin:0 0 16px;padding:12px}
.tl-library-head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin-bottom:10px}
.tl-library-label{font:10px var(--type-data);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.tl-library-head input[type="search"]{min-height:32px;min-width:200px;border:1px solid var(--line);background:var(--canvas);color:var(--ink);padding:4px 10px;border-radius:var(--radius)}
.tl-library-head input[type="search"]:focus{outline:2px solid var(--site-accent);outline-offset:1px}
.tl-lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;max-height:320px;overflow-y:auto}
.tl-lib-item{display:flex;flex-direction:column;gap:0;padding:0;border:1px solid var(--line);background:var(--canvas);border-radius:4px;cursor:pointer;text-align:center;font:inherit;color:inherit}
.tl-lib-item:hover{border-color:var(--site-accent)}
.tl-lib-cover{display:block;width:100%;height:auto;aspect-ratio:1;border:0;border-bottom:1px solid var(--line);border-radius:4px 4px 0 0}
.tl-lib-cover .tl-textcover{font-size:22px}
.tl-lib-name{display:block;font-size:10px;line-height:1.3;padding:5px 4px 6px;font-weight:600;color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tl-lib-item.tl-lib-used{opacity:.42}
.tl-lib-item.tl-lib-used .tl-lib-name::after{content:" ✓";color:var(--site-accent)}
.tl-library-hint{margin:10px 0 0;font-size:11px;color:var(--muted)}
.tl-lib-empty{grid-column:1/-1;margin:0;padding:16px;font-size:12px;color:var(--muted);font-style:italic}
.tl-btn[aria-pressed="true"],.tl-btn[aria-expanded="true"]{background:var(--ink);color:var(--canvas)}

/* ---------- compact (one-screen) view ---------- */
.tl-compact .tl-hero{padding:12px 0 10px}
.tl-compact .tl-hero h1{font-size:clamp(20px,3vw,26px);margin:0}
.tl-compact .tl-hero p{display:none}
.tl-compact .tl-library,.tl-compact .tl-add,.tl-compact .tl-seo{display:none!important}
.tl-compact .tl-bar{margin:12px 0 10px}
.tl-compact .tl-board{padding:10px}
.tl-compact .tl-title-input{font-size:18px;margin-bottom:8px;padding-bottom:6px}
.tl-compact .tl-rows{gap:5px}
.tl-compact .tl-row{grid-template-columns:56px minmax(0,1fr);min-height:56px}
.tl-compact .tl-tier-label{gap:3px;padding:4px}
.tl-compact .tl-tier-name{font-size:14px}
.tl-compact .tl-tier-color{width:16px;height:16px}
.tl-compact .tl-tier-del{width:16px;height:16px;font-size:10px}
.tl-compact .tl-items{gap:6px;padding:6px;min-height:44px}
.tl-compact .tl-item{width:56px;gap:3px}
.tl-compact .tl-cover{width:56px;height:56px}
.tl-compact .tl-textcover{font-size:16px}
.tl-compact .tl-item-name{font-size:9px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tl-compact .tl-gear{width:20px;height:20px;font-size:12px;opacity:1}
.tl-compact .tl-item-x{width:20px;height:20px;font-size:12px;opacity:1;right:24px}
.tl-compact .tl-zone-empty{padding:8px 4px}
.tl-compact .tl-pool{margin-top:8px}
.tl-compact .tl-pool-items{flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px}
.tl-compact .tl-add-tier{margin-top:5px;min-height:28px;font-size:11px}
.tl-compact .tl-pool-hint{display:none}
.tl-compact .tl-pool-head{padding:6px 12px;gap:4px 6px}
.tl-compact .tl-pool-btn{min-height:22px;padding:1px 6px;font-size:10px}
.tl-compact .tl-batch-panel{padding:8px 12px}
.tl-compact .tl-batch-panel textarea{font-size:12px}

/* ---------- share link ---------- */
.tl-share-url{flex:1 1 260px;min-height:36px;border:1px solid var(--line);background:var(--canvas);color:var(--ink);padding:6px 10px;font:12px var(--type-data);border-radius:var(--radius)}
.tl-share-url:focus{outline:2px solid var(--site-accent);outline-offset:1px}
@media(max-width:760px){
  .tl-share-url{flex-basis:100%}
}