/* tools.html: the three tools that work here (a work bench, not cards) and the index of all tools (a contents list). Uses p3.css tokens. */
html.nojs .t-find,html.nojs #try{display:none}
.t-intro{padding-block-end:var(--s6)}
.t-find{display:grid;gap:var(--s4);margin-block-start:var(--s5)}
.t-find .p3-search{max-width:38rem}
.t-find .p3-input{min-height:56px;font-size:var(--t-b);border-radius:var(--r-btn)}
.t-find .p3-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.t-find .p3-filters{gap:var(--s2)}

/* ---------- try now: a pale band with three rows ---------- */
.t-try{background:var(--pale);padding-block:clamp(40px,5vw,72px)}
.t-try__head{display:grid;gap:var(--s3);margin-block-end:var(--s5)}
.t-try__safe{display:flex;gap:var(--s2);align-items:flex-start;max-width:36em;font-size:var(--t-15);line-height:1.55}
.t-try__safe .i{width:20px;height:20px;margin-block-start:.15em;color:var(--navy)}
html[lang=ar] .t-try__safe{line-height:1.75}
.try{display:grid;border-bottom:1px solid var(--line-2)}
.tryc{display:grid;gap:var(--s3);padding-block:var(--s5);border-top:1px solid var(--line-2);scroll-margin-top:calc(var(--hdr) + 16px)}
.tryc:target .pick{border-color:var(--navy);box-shadow:0 0 0 3px var(--pale-3)}
.tryc__t h3{font-family:var(--sans);font-size:var(--t-h3);line-height:1.35;letter-spacing:0}
.tryc__t p{margin-block-start:var(--s1);font-size:var(--t-15);line-height:1.55;max-width:30em}
html[lang=ar] .tryc__t p{line-height:1.75}
.tryc__a{display:grid;gap:var(--s3);min-width:0}
/* the file picker is a real file box stretched over the label, so a dropped file works by itself */
.pick{position:relative;display:flex;align-items:center;gap:var(--s3);min-height:64px;padding:var(--s3) var(--s4);background:var(--white);border:1.5px dashed var(--line-2);border-radius:var(--r-btn);color:var(--navy);cursor:pointer;transition:border-color .15s,background-color .15s}
.pick:hover{border-color:var(--navy)}
.pick:focus-within{border-color:var(--navy);outline:3px solid var(--navy);outline-offset:2px}
.pick input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;font-size:0}
.pick input[disabled]{cursor:not-allowed}
.pick__t{display:block;min-width:0;line-height:1.35}
.pick__t b{display:block;font-weight:700;font-size:var(--t-16)}
.pick__t small{display:none;font-size:var(--t-xs);color:var(--muted)}
@media (hover:hover) and (min-width:760px){.pick__t small{display:block}}
.files:empty,.msg:empty{display:none}
.tfile{display:flex;align-items:center;gap:var(--s1)}
.tfile__n{flex:1;min-width:0}
.tfile__b{flex:none;width:36px;height:36px;border:1px solid var(--line-2);border-radius:var(--r-s);background:#fff;color:var(--ink);font:inherit;cursor:pointer}
.tfile__b:hover{background:var(--pale)}
.files{display:grid;gap:var(--s1);font-size:var(--t-s);line-height:1.5;color:var(--text);overflow-wrap:anywhere}
.opts{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4)}
.opts label{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;font-size:var(--t-15);cursor:pointer}
.opts input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--navy)}
/* one step at a time: the button shows once a file is chosen */
.tryc [data-run]{justify-self:start}
.tryc [data-run][disabled]{display:none}
.tp{width:100%;height:8px;accent-color:var(--navy)}
.msg{font-size:var(--t-15);line-height:1.5;color:var(--text)}
.msg.bad{color:var(--bad)}
.out .btn{width:auto}
.dl{display:flex;flex-wrap:wrap;gap:var(--s2)}
.dl .btn{min-height:44px;padding:var(--s2) var(--s4);background:transparent;color:var(--navy);border-color:var(--line-2);font-size:var(--t-15);border-radius:var(--r-btn-s)}
.dl .btn:hover{background:var(--white);border-color:var(--navy)}
.save{font-size:var(--t-15);line-height:1.6}
.save a{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
@media (min-width:900px){
  .t-try__head{grid-template-columns:5fr 7fr;column-gap:var(--s7);align-items:end}
  .tryc{grid-template-columns:5fr 7fr;column-gap:var(--s7);align-items:start}
}

/* ---------- the index of all tools: words between hairlines ---------- */
.t-list{padding-block:clamp(48px,6vw,88px)}
.t-list__head{margin-block-end:var(--s6)}
.t-list__head p{margin-block-start:var(--s3);max-width:40em}
.tgroup{padding-block:var(--s6);border-top:2px solid var(--navy)}
.tgroup__h h2{font-family:var(--disp);font-size:clamp(22px,2.2vw,28px);line-height:1.3;letter-spacing:-.012em}
html[lang=ar] .tgroup__h h2{letter-spacing:0;line-height:1.5}
.tgroup__h p{margin-block-start:var(--s1);font-size:var(--t-15);line-height:1.55;max-width:30em}
html[lang=ar] .tgroup__h p{line-height:1.75}
.tgrid{display:grid;margin-block-start:var(--s4)}
.tcard{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s3);align-items:center;padding-block:var(--s1) var(--s3);border-top:1px solid var(--line);scroll-margin-top:calc(var(--hdr) + 16px);transition:background-color .15s}
.tcard:first-child{border-top:0}
.tcard h3{grid-column:1;grid-row:1;font-family:var(--sans);font-size:var(--t-b);line-height:1.35;letter-spacing:0;font-weight:700}
.tname{display:inline-flex;align-items:center;gap:var(--s3);min-height:44px;color:var(--ink);text-decoration:none}
.tic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:var(--r-btn-s);background:var(--pale);color:var(--navy)}
.tic .i{width:22px;height:22px}
.tname::after{content:"";position:absolute;top:0;bottom:0;left:0;right:0}
.tgo{width:16px;height:16px;color:var(--muted);transition:transform .2s var(--ease)}
html[dir=rtl] .tgo{transform:scaleX(-1)}
.tcard:hover .tname{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:.25em}
.tcard:hover .tgo{transform:translateX(3px);color:var(--navy)}
html[dir=rtl] .tcard:hover .tgo{transform:scaleX(-1) translateX(3px)}
.tcard p{grid-column:1/-1;grid-row:2;padding-inline-start:52px;font-size:var(--t-15);line-height:1.5;max-width:calc(34em + 52px)}
html[lang=ar] .tcard p{line-height:1.7}
.tcard:target{background:var(--pale)}
.tlink{grid-column:2;grid-row:1;position:relative;z-index:1;display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;min-width:44px;font-size:var(--t-s);font-weight:500;color:var(--navy);text-underline-offset:.25em}
.tlink--try{color:var(--ok)}
.tlink .i{width:16px;height:16px;stroke-width:2.2}
.tname:focus:not(:focus-visible){outline:none}
.tname:focus-visible{outline:none}
.tname:focus-visible::after{outline:3px solid var(--navy);outline-offset:-3px;border-radius:var(--r-s)}
.t-list .p3-empty p{margin-block-end:var(--s3)}
@media (min-width:640px){
  .tgrid{grid-template-columns:1fr 1fr;column-gap:var(--s6)}
  .tcard:nth-child(2){border-top:0}
}
@media (min-width:1100px){
  .tgroup{display:grid;grid-template-columns:260px minmax(0,1fr);column-gap:var(--s7);align-items:start}
  .tgroup__h{position:sticky;top:calc(var(--hdr) + var(--s4))}
  .tgrid{margin-block-start:0}
}
/* phones: each group opens with its first tools; searching or filtering shows everything */
.tshow{margin-block-start:var(--s2)}
@media (max-width:479px){.tcard h3{grid-column:1/-1}.tcard .tlink{grid-column:1/-1;grid-row:3;justify-self:start;margin-inline-start:52px}}
@media (max-width:759px){html.js:not(.t-narrow) .tgroup.is-short .tcard:nth-child(n+6){display:none}}
html.t-narrow .tshow,.tgroup:not(.is-short) .tshow{display:none}
@media (min-width:760px){.tshow{display:none}}
.t-facts{margin-block-start:var(--s5)}
/* the screen stops under a whole row of its icons */
html[lang=ar] .t-know .p3-shot--r170::before{padding-top:153%}
html[lang=en] .t-know .p3-shot--r170::before{padding-top:158%}
@media (forced-colors:active){.pick{border:1px solid ButtonText}}
@media (prefers-reduced-motion:reduce){.tgo,.pick,.tcard{transition:none}}

/* the closing buttons. Not .p3-cta: p3.js takes the first .p3-cta in the page for the hero's button, and would hold back the header's start button */
.pg-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);margin-block-start:var(--s5)}
@media (max-width:479px){.pg-cta .btn{flex:1 1 40%;padding-inline:var(--s3);min-height:48px}}

/* the Arabic font arrives late on a slow phone and the title gains a line: its room is kept */
@media (max-width:479px){html[lang=ar] main .p3-intro__h{min-height:2.6em}}