/* Tools section (tools/, tools/timers/, tools/checklist/, tools/servers/, tools/tier-list/), 2026-10-05. Loaded only by those
   pages, after aion.css and hub.css: it reuses their tokens (--ink, --card, --rule, --accent-ink) and the builder's .chip, and
   keeps everything of its own under [data-tools] with a tl- / ck- / sv- / tr- / tc- name, so nothing leaks into other pages. */
[data-tools]{--tl-live:#1f8a4c; --tl-live-bg:rgba(31,138,76,.10); --tl-warn:#8a5f00; --tl-warn-bg:rgba(224,176,64,.16); --tl-ely:#2f6fd0; --tl-asm:#8a4fc8}
:root[data-theme="asmodian"] [data-tools]{--tl-live:#7fe0a3; --tl-live-bg:rgba(127,224,163,.12); --tl-warn:#ffe29a; --tl-warn-bg:rgba(255,226,154,.12); --tl-ely:#8fbcff; --tl-asm:#c9a2ff}
@media (prefers-color-scheme: dark){ :root:not([data-theme="elyos"]) [data-tools]{--tl-live:#7fe0a3; --tl-live-bg:rgba(127,224,163,.12); --tl-warn:#ffe29a; --tl-warn-bg:rgba(255,226,154,.12); --tl-ely:#8fbcff; --tl-asm:#c9a2ff} }

[data-tools] .lnk{border:0; background:none; padding:0; font:inherit; color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; cursor:pointer}
[data-tools] .tl-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-bottom:26px}
[data-tools] .tl-bar .k{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
[data-tools] .tl-bar .chips{display:flex; flex-wrap:wrap; gap:8px}
[data-tools] #tools-clock{font-size:14px; color:var(--ink-2); margin-left:auto; font-variant-numeric:tabular-nums}

/* the hub: what is next, then the cards */
[data-tools] .tl-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:34px}
[data-tools] .tl-next{display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:12px; border:1px solid var(--card-b); background:var(--card); text-decoration:none; color:inherit; box-shadow:var(--shadow)}
[data-tools] .tl-next .n{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
[data-tools] .tl-next .t{font-size:20px; color:var(--ink); font-variant-numeric:tabular-nums}
[data-tools] .tl-next.live{border-color:var(--tl-live); background:var(--tl-live-bg)}
[data-tools] .tl-next.live .t{color:var(--tl-live)}
[data-tools] .tc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px}
[data-tools] .tc-card{display:flex; flex-direction:column; gap:8px; padding:22px 22px 20px; border-radius:14px; border:1px solid var(--card-b); background:var(--card); box-shadow:var(--shadow); text-decoration:none; color:inherit; transition:transform .15s ease, border-color .15s ease}
[data-tools] .tc-card:hover{transform:translateY(-2px); border-color:var(--accent-ink)}
[data-tools] .tc-card h3{font-size:23px; line-height:1.1}
[data-tools] .tc-card p{font-size:15px; color:var(--ink-2); line-height:1.5; margin:0}
[data-tools] .tc-card .go{margin-top:auto; padding-top:8px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink)}
[data-tools] .tc-card.soon{opacity:.72}
[data-tools] .tc-card.soon .go{color:var(--ink-3)}
@media (prefers-reduced-motion: reduce){ [data-tools] .tc-card{transition:none} [data-tools] .tc-card:hover{transform:none} }

/* timers */
[data-tools] .tl-head{margin-top:38px}
[data-tools] .tl-head:first-child{margin-top:0}
[data-tools] .tl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px}
[data-tools] .tl-card{padding:18px 20px; border-radius:14px; border:1px solid var(--card-b); background:var(--card); box-shadow:var(--shadow)}
[data-tools] .tl-card.live{border-color:var(--tl-live); background:var(--tl-live-bg)}
[data-tools] .tl-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
[data-tools] .tl-top h3{font-size:21px; line-height:1.15}
[data-tools] .tl-flag{flex:none; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--tl-warn); background:var(--tl-warn-bg); border-radius:999px; padding:3px 9px}
[data-tools] .tl-count{font-size:30px; line-height:1.1; margin-top:10px; color:var(--ink); font-variant-numeric:tabular-nums}
[data-tools] .tl-card.live .tl-count{color:var(--tl-live); font-size:22px}
[data-tools] .tl-when{font-size:14px; color:var(--ink-2); margin-top:6px}
[data-tools] .tl-about{font-size:14.5px; color:var(--ink-2); line-height:1.5; margin:10px 0 0}
[data-tools] .tl-why{font-size:13.5px; color:var(--tl-warn); line-height:1.5; margin:8px 0 0}
[data-tools] .tl-rule{font-size:13px; color:var(--ink-3); margin-top:10px; padding-top:10px; border-top:1px solid var(--rule)}

/* checklist */
[data-tools] .ck-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; align-items:start}
[data-tools] .ck-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
[data-tools] .ck-prog{font-size:15px; color:var(--ink-2); font-variant-numeric:tabular-nums}
[data-tools] .ck-reset{font-size:13.5px; color:var(--ink-3); margin-top:4px; font-variant-numeric:tabular-nums}
[data-tools] .ck-list{list-style:none; margin:14px 0 0; padding:0}
[data-tools] .ck-list li{display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-top:1px solid var(--rule)}
[data-tools] .ck-list li.done .ck-name{color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--rule-2)}
[data-tools] .ck-boxes{display:flex; flex-wrap:wrap; gap:5px; flex:none; width:132px; padding-top:1px}
[data-tools] .ck-step{display:inline-flex; align-items:center; gap:4px; flex:none; width:132px}
[data-tools] .ck-step b{flex:1; font-size:14.5px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; text-align:center}
[data-tools] .ck-pm{width:24px; height:24px; border-radius:6px; border:1.5px solid var(--rule-2); background:transparent; color:var(--ink); cursor:pointer; padding:0; font-size:16px; line-height:1}
[data-tools] .ck-pm:disabled{opacity:.35; cursor:default}
[data-tools] .ck-pm:focus-visible{outline:2px solid var(--accent-ink); outline-offset:2px}
[data-tools] .ck-box{width:22px; height:22px; border-radius:6px; border:1.5px solid var(--rule-2); background:transparent; cursor:pointer; padding:0}
[data-tools] .ck-box.on{background:var(--tl-live); border-color:var(--tl-live); background-image:linear-gradient(45deg,transparent 44%,rgba(255,255,255,.9) 44%,rgba(255,255,255,.9) 56%,transparent 56%)}
[data-tools] .ck-box:focus-visible{outline:2px solid var(--accent-ink); outline-offset:2px}
[data-tools] .ck-name{flex:1; font-size:15.5px; color:var(--ink); line-height:1.4}
[data-tools] .ck-name small{display:block; font-size:13px; color:var(--ink-3); margin-top:2px}
[data-tools] .ck-empty{color:var(--ink-3); font-size:14.5px}
[data-tools] .ck-add{display:flex; gap:8px; margin-top:14px}
[data-tools] .ck-add input{flex:1; min-width:0; padding:9px 12px; border-radius:10px; border:1px solid var(--card-b); background:transparent; color:var(--ink); font:inherit; font-size:15px}

/* servers */
[data-tools] .sv-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; align-items:start}
[data-tools] .sv-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
[data-tools] .sv-head span{font-size:13.5px; color:var(--ink-3)}
[data-tools] .sv-table{width:100%; border-collapse:collapse; margin-top:12px; font-size:15.5px}
[data-tools] .sv-table th{font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; text-align:left; padding:6px 0; color:var(--ink-3)}
[data-tools] .sv-table th.e{color:var(--tl-ely)} [data-tools] .sv-table th.a{color:var(--tl-asm)}
[data-tools] .sv-table td{padding:8px 0; border-top:1px solid var(--rule); color:var(--ink)}
[data-tools] .sv-table td.i{width:34px; color:var(--ink-3); font-variant-numeric:tabular-nums}

/* class standing */
[data-tools] .tr-list{display:flex; flex-direction:column; gap:10px}
[data-tools] .tr-row{display:grid; grid-template-columns:42px 54px minmax(120px,190px) minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px 16px; border-radius:12px; border:1px solid var(--card-b); background:var(--card)}
[data-tools] .tr-band{width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; color:#fff; background:#7a8194}
[data-tools] .tr-band.A{background:#b8431a} [data-tools] .tr-band.B{background:#8a5f00} [data-tools] .tr-band.C{background:#4f6d8f}
[data-tools] .tr-name{font-size:19px; color:var(--ink)}
[data-tools] .tr-name small{display:block; font-size:13px; color:var(--ink-3)}
[data-tools] .tr-bar{height:10px; border-radius:999px; background:var(--rule); position:relative; overflow:hidden}
[data-tools] .tr-bar i{position:absolute; inset:0 auto 0 0; border-radius:999px; background:var(--accent-ink)}
[data-tools] .tr-num{font-size:15px; color:var(--ink-2); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
@media (max-width:720px){
  [data-tools] .tr-row{grid-template-columns:42px 44px minmax(0,1fr); row-gap:8px}
  [data-tools] .tr-bar{grid-column:1 / -1} [data-tools] .tr-num{grid-column:1 / -1; text-align:left}
  [data-tools] #tools-clock{margin-left:0; width:100%}
}