/* Tools (tools/), both sites. Every rule starts with a tk- class, so nothing here can reach another part of the site
   (deploy_guard style-clash). The look is the front page's tool strip (.playstrip) and the site's tokens; the plan is
   ../TOOLS.md. Logical sides throughout, so the Persian page mirrors by itself. */
.tk{min-width:0;overflow-x:clip}
.tk .wrap{min-width:0}
.tk-hero .tk-k{margin:0 0 var(--s2);font:800 .85rem/1 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.tk-hero h1{max-width:18ch}
.tk-lede{margin:var(--s3) 0 0;max-width:56ch;color:var(--dim);font-size:var(--t4,1.1875rem);line-height:1.5}
.tk-jump{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.tk-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);color:var(--ink);font-weight:700;text-decoration:none}
.tk-jump a:last-child{background:var(--field);border-color:var(--field);color:var(--on-field)}
.tk-jump a:hover{border-color:var(--field)}
.tk-sec h2{margin-bottom:var(--s4)}
.tk-sec{scroll-margin-top:72px}

/* the built tools: each card is one door */
.tk-tools{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);list-style:none;margin:0;padding:0}
@media(min-width:640px){.tk-tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.tk-tools{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tk-tool{min-width:0}
.tk-tool a{display:grid;grid-template-rows:auto auto 1fr auto;gap:6px;height:100%;box-sizing:border-box;padding:var(--s4);border-radius:var(--r2);background:var(--panel);border:1px solid var(--line);color:inherit;text-decoration:none}
.tk-tool a:hover{border-color:var(--field)}
.tk-art{display:flex;align-items:flex-end;height:64px}
.tk-art svg{max-width:100%;height:auto}
.tk-tn{font:800 1.35rem/1.05 var(--display);text-transform:uppercase;min-width:0;overflow-wrap:break-word}
.tk-tl{color:var(--dim);font-size:var(--t2,.9375rem);line-height:1.45;min-width:0;overflow-wrap:break-word}
.tk-go{justify-self:start;display:inline-flex;align-items:center;min-height:44px;margin-top:6px;padding:0 18px;border-radius:999px;background:var(--field);color:var(--on-field);font-weight:800}
/* on a phone a tool is one compact row: the art small beside the words, so eight tools are not eight screens */
@media(max-width:639px){
  .tk-tool a{grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:var(--s3);row-gap:4px;padding:var(--s3)}
  .tk-art{grid-row:1/4;align-self:start;height:auto;width:72px;padding-top:2px;overflow:hidden}
  .tk-art svg{width:72px;height:auto}
  .tk-faces i{width:24px;height:32px;border-width:1px}.tk-faces i+i{margin-inline-start:-8px}
  .tk-tn{font-size:1.15rem}.tk-tl{font-size:var(--t2,.9375rem)}
  .tk-go{margin-top:4px}
}
.tk-faces{display:flex}
.tk-faces i{position:relative;width:46px;height:58px;border-radius:8px;border:2px solid var(--panel);background:var(--line) center/cover;filter:grayscale(1)}
.tk-faces i+i{margin-inline-start:-10px}
.tk-faces i::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - 1.5px),#E5484D calc(50% - 1.5px),#E5484D calc(50% + 1.5px),transparent calc(50% + 1.5px))}

/* what should I build next: the live list (the page's own discussion) and the printed cards */
.tk-nh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.tk-nh h2{margin:0}
.tk-p{margin:0 0 var(--s4);max-width:62ch;color:var(--dim);font-size:var(--t3,1rem);line-height:1.5}
.tk-board .talk-list,.tk-ideas{display:grid;gap:var(--s3);list-style:none;margin:0;padding:0}
.tk-ideas{margin-top:var(--s3)}
.tk-board .talk-list>li.tk-row,.tk-card{position:relative;box-sizing:border-box;min-width:0;padding:var(--s4);border-radius:var(--r2);background:var(--panel);border:1px solid var(--line)}
.tk-board .talk-list>li.tk-row{margin:0}
.tk-name{margin:var(--s2) 0 0;font:800 1.45rem/1.05 var(--display);text-transform:uppercase;overflow-wrap:break-word}
.tk-card .tk-name{margin-top:0}
.tk-row blockquote,.tk-pitch{margin:var(--s2) 0 0;font-size:var(--t3,1rem);line-height:1.5;color:var(--ink);overflow-wrap:break-word}
.tk-by{margin:4px 0 0;color:var(--field);font-weight:700;font-size:var(--t2,.9375rem)}
.tk-row .vt-down{display:none}
.tk-row .vt-up{min-height:44px;padding:0 16px;font-weight:800}
.tk-row .vt-up:not([aria-pressed="true"]){border-color:var(--field);color:var(--field)}
.tk-board .talk-ctl .chips-gap,.tk-board .talk-ctl .chips-gap~.chip{display:none}
.tk-wait{margin:var(--s3) 0 0;color:var(--dim);font-size:var(--t1,.8125rem)}

/* the extras of one of my ideas: the markets, how it works, the size */
.tk-x{margin-top:var(--s3)}
.tk-h{margin:var(--s3) 0 6px;font:800 .78rem/1 var(--body);text-transform:uppercase;letter-spacing:.07em;color:var(--dim)}
.tk-mh{margin-top:0}
.tk-mks{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2);list-style:none;margin:0;padding:0}
@media(min-width:720px) and (max-width:1099px){.tk-mks{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* from 1100px the ideas sit two to a row, each with its markets one above the other */
@media(min-width:1100px){.tk-board .talk-list,.tk-ideas{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .tk-board .talk-list>li:not(.tk-row){grid-column:1/-1}}
.tk-more .tk-mks{margin-top:var(--s2)}
.tk-mk a{display:flex;flex-direction:column;gap:4px;min-height:44px;height:100%;box-sizing:border-box;padding:10px 12px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line);color:inherit;text-decoration:none}
.tk-mk a:hover{border-color:var(--dim)}
.tk-mq{font-size:var(--t2,.9375rem);line-height:1.35;overflow-wrap:break-word}
.tk-mos{display:flex;flex-wrap:wrap;gap:2px 12px}
.tk-mo{font-size:var(--t1,.8125rem);color:var(--dim)}
.tk-mp{font:800 1.15rem/1.1 var(--display);color:var(--field);font-variant-numeric:tabular-nums}
.tk-mv{font-size:.75rem;color:var(--dim)}
.tk-more{margin-top:var(--s2)}
.tk-more>summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:44px;cursor:pointer;font-weight:700;color:var(--ink);list-style:none}
.tk-more>summary::-webkit-details-marker{display:none}
.tk-sum{display:inline-flex;align-items:center;gap:8px}
.tk-sum::before{content:"";width:8px;height:8px;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(-45deg);margin-inline-end:2px}
html[dir="rtl"] .tk-sum::before{transform:rotate(45deg)}
.tk-more[open] .tk-sum::before{transform:rotate(45deg)}
html[dir="rtl"] .tk-more[open] .tk-sum::before{transform:rotate(45deg)}
.tk-more>summary:hover .tk-sum{color:var(--field)}
.tk-does{margin:0;font-size:var(--t2,.9375rem);line-height:1.5;color:var(--ink)}
.tk-cq{margin:0;font-weight:700}
.tk-co{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:var(--s2) 0 0;padding:0}
.tk-co li{padding:5px 10px;border-radius:999px;border:1px solid var(--line);font-size:var(--t1,.8125rem);color:var(--dim)}
.tk-size{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--raise);font-size:.75rem;font-weight:700;color:var(--dim)}
.tk-size-S{color:var(--ga)}
.tk-read{margin:var(--s3) 0 0;color:var(--dim);font-size:var(--t1,.8125rem);max-width:62ch}
html.mk-off .tk-mks,html.mk-off .tk-mh{display:none}

/* Suggest a tool: the discussion's own box, asked as a suggestion */
.tk-suggest{margin-top:var(--s6);padding:var(--s4);border-radius:var(--r2);background:var(--panel);border:1px solid var(--field-edge,var(--line))}
.tk-suggest h3{font-size:var(--t5,1.5rem)}
.tk-sp{margin:var(--s2) 0 var(--s3);color:var(--dim);max-width:56ch}
.tk-suggest .fbform fieldset{display:none}
.tk-suggest .fb{margin:0;padding:0;background:none;border:0}
.tk-namerow{display:grid;gap:6px;margin:0 0 var(--s3)}
.tk-namerow label{font-weight:700}
.tk-namerow input{width:100%;box-sizing:border-box;min-height:48px;padding:0 12px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg);color:var(--ink);font:1rem var(--body)}
.tk-namerow input:focus{outline:2px solid var(--field);outline-offset:1px}
.tk-sw{flex:none}