/* 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 site's tokens only; the plan is ../TOOLS.md. Logical sides throughout, so the Persian page
   mirrors by itself. 1 November 2026 (Armin: "they don't visually look good at all"): a showcase. Each tool opens on a stage
   with its own drawing and what kind of tool it is, then its name, one line, a live number from it, and its verb; the
   vote list ranks itself, every idea with its place and a bar of how wanted it is. Nothing hides and animates in; a card
   answering a finger is the only movement. */
.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(--field)}
.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;align-items:center;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:nth-child(2){background:var(--field);border-color:var(--field);color:var(--on-field)}
.tk-jump a:hover{border-color:var(--field)}
.tk-jump .lpt-doors{margin:0}
.tk-jump .lpt-how{min-height:44px;padding:0 16px 0 12px;font-size:var(--t2,.9375rem);font-weight:700}
/* the hero's numbers: real counts of this build */
.tk-nums{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);list-style:none;margin:var(--s5) 0 0;padding:0}
.tk-nums li{display:flex;flex-direction:column;gap:2px;min-width:0;padding-inline-start:var(--s4);border-inline-start:1px solid var(--line)}
.tk-nums li:first-child{padding-inline-start:0;border:0}
.tk-nums b{font:900 clamp(1.9rem,6vw,2.6rem)/1 var(--display);color:var(--field)}
.tk-nums span{font-size:var(--t1,.8125rem);font-weight:700;color:var(--dim)}
@media(max-width:519px){.tk-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}.tk-nums li{padding-inline-start:var(--s2)}.tk-nums li:first-child{padding-inline-start:0}.tk-nums b{font-size:1.7rem}.tk-nums span{font-size:.75rem;line-height:1.25}}
.tk-sec h2{margin-bottom:var(--s4)}
.tk-sec{scroll-margin-top:72px}

/* the built tools: each card is one door, opening on a stage */
.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:first-child{display:flex;flex-direction:column;height:100%;box-sizing:border-box;overflow:hidden;border-radius:var(--r2);background:var(--panel);border:1px solid var(--line);color:inherit;text-decoration:none;transition:transform .15s var(--ease,ease),border-color .15s}
.tk-tool>a:first-child:hover{transform:translateY(-3px);border-color:var(--field)}
.tk-tool>a:first-child:focus-visible{outline:3px solid var(--field);outline-offset:2px}
.tk-art{position:relative;display:grid;place-items:center;height:150px;padding:var(--s3);box-sizing:border-box;border-bottom:1px solid var(--line);
  background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--field) 9%,transparent),transparent 60%),var(--sunk,#0A0A0A)}
.tk-art svg{width:min(100%,240px);height:auto;max-height:120px}
.tk-kind{position:absolute;top:10px;inset-inline-start:10px;padding:4px 9px;border-radius:999px;background:rgba(16,16,16,.82);border:1px solid var(--line);font:800 .75rem/1.1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--field)}
.tk-tb{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;padding:var(--s4)}
.tk-tn{font:800 1.45rem/1.02 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-stat{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line);min-width:0}
.tk-sn{flex:none;font:900 2rem/1 var(--display);color:var(--field);font-variant-numeric:tabular-nums lining-nums}
.tk-sl{min-width:0;font-size:var(--t1,.8125rem);line-height:1.35;color:var(--dim);font-weight:600;overflow-wrap:break-word}
.tk-tl+.tk-go{margin-top:auto}
.tk-go{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:var(--s2);padding:0 18px;border-radius:999px;background:var(--field);color:var(--on-field);font-weight:800}
.tk-go::after{content:"\2192";font-weight:800}
.tk-tool:has(>.tk-also){display:flex;flex-direction:column;gap:4px}
.tk-tool:has(>.tk-also)>a:first-child{height:auto;flex:1}
.tk-also{display:flex;align-items:center;min-height:44px;padding:0 4px;color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
html[dir="rtl"] .tk-go::after{content:"\2190"}
/* the first tool leads when that fills the rows (8 tools: 2 + 7 = three rows of three; tools.py adds tk-lead): on a
   computer it takes two columns, its stage beside its words */
@media(min-width:1000px){
  .tk-lead .tk-tool:first-child{grid-column:span 2}
  .tk-lead .tk-tool:first-child>a:first-child{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .tk-lead .tk-tool:first-child .tk-art{height:auto;min-height:250px;border-bottom:0;border-inline-end:1px solid var(--line)}
  .tk-lead .tk-tool:first-child .tk-art svg{width:min(100%,320px);max-height:160px}
  .tk-lead .tk-tool:first-child .tk-tn{font-size:2rem}
  .tk-lead .tk-tool:first-child .tk-sn{font-size:2.6rem}
}
/* on a phone a tool is one compact row, so eight tools are not eight screens. 31 October 2026 (audit at 390px: the kind
   pill stuck out of a narrow full-height rail and sat on the live number, "LIVE ROOM" wrapped, "LIVE BOARD" was cut, and
   each drawing was small in a tall dark column): the stage is a square tile beside the name, like an app's icon, and the
   kind of tool is a one-line label above the name, in the words' column. */
@media(max-width:639px){
  .tk-tool>a:first-child{position:relative;flex-direction:row;align-items:flex-start;gap:12px;padding:12px}
  .tk-art{position:static;flex:none;width:92px;height:92px;padding:8px;border:1px solid var(--line);border-radius:12px;align-content:center}
  .tk-art svg{width:100%;max-height:76px}
  .tk-kind{top:12px;inset-inline-start:116px;max-width:calc(100% - 128px);padding:3px 8px;font-size:.75rem;line-height:1.1;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
  .tk-art:has(.tk-kind)+.tk-tb{padding-top:28px}
  .tk-tb{padding:0;gap:4px}
  .tk-go{padding:0 14px;white-space:nowrap;max-width:100%}
  .tk-tn{font-size:1.2rem}
  .tk-tl{font-size:var(--t1,.8125rem)}
  .tk-stat{padding-top:var(--s2);gap:8px}
  .tk-sn{font-size:1.55rem}
  .tk-sl{font-size:.75rem}
  .tk-art .tk-faces i{width:32px;height:42px;border-radius:8px}.tk-art .tk-faces i+i{margin-inline-start:-12px}      /* .tk-art: the face rule below this block is the same weight and came later, so faces were 58px in a 92px tile */
  .tk-art .tk-faces i:nth-child(n+4){display:none}
  .tk-art{overflow:hidden}
}
.tk-faces{display:flex;justify-content:center}
.tk-faces i{position:relative;width:58px;height:74px;border-radius:10px;border:2px solid var(--panel);background:var(--line) center 20%/cover;filter:grayscale(1) contrast(1.05)}
.tk-faces i+i{margin-inline-start:-14px}
.tk-faces i::after{content:"";position:absolute;inset:0;border-radius:8px;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-board .vote h3.tk-name{margin:var(--s2) 0 0;font:800 1.45rem/1.05 var(--display);text-transform:uppercase;letter-spacing:.005em}          /* site.css .vote h3 is a reply's plain title */
.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}

/* the vote, alive (1 November 2026): every idea on the live list carries its place (the printed cards, the list without
   the database, carry none: they are in the register's order, not the votes'), the first is marked, a bar shows how wanted
   each is against the leader (tools.js), and one line above the list says how many votes are in and who leads */
.tk-pulse{display:inline-flex;align-items:center;gap:8px;margin:0 0 var(--s3);padding:8px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-weight:700;font-size:var(--t2,.9375rem)}
.tk-pulse::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ga);box-shadow:0 0 0 3px rgba(70,204,130,.18);flex:none}
.tk-pulse[hidden]{display:none}
.tk-board .talk-list{counter-reset:tk}
.tk-board .talk-list>li.tk-row{counter-increment:tk;padding-inline-start:calc(var(--s4) + 44px)}
.tk-board .talk-list>li.tk-row::before{content:counter(tk);position:absolute;top:var(--s4);inset-inline-start:var(--s4);display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--raise);color:var(--ink);font:900 1.15rem/1 var(--display)}
.tk-board .talk-list>li.tk-row:first-child{border-color:var(--field)}
.tk-board .talk-list>li.tk-row:first-child::before{background:var(--field);color:var(--on-field)}
.tk-meter{display:flex;align-items:center;gap:10px;margin:var(--s2) 0 0}
.tk-meter>span{position:relative;flex:1;height:8px;border-radius:999px;background:var(--raise);overflow:hidden}
.tk-meter>span>i{position:absolute;inset-block:0;inset-inline-start:0;width:var(--tk-v,0%);border-radius:999px;background:var(--field)}
.tk-meter>b{flex:none;font-size:var(--t1,.8125rem);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
@media(max-width:639px){
  .tk-board .talk-list>li.tk-row{padding-inline-start:var(--s4)}
  .tk-board .talk-list>li.tk-row::before{inset-inline-start:auto;inset-inline-end:var(--s3);top:var(--s3)}
  .tk-row .tk-name{padding-inline-end:42px}
}

.lp-flags{position:absolute;z-index:4;top:9px;inset-inline-start:9px;display:flex;align-items:center;opacity:.9;pointer-events:none}
.lp-flags img{display:block;flex:none;width:22px;height:22px;max-width:none;border-radius:50%;object-fit:cover;object-position:center;border:1px solid #F4C430;box-sizing:border-box;background:#0B0B0A}
.lp-flags .lp-flag{filter:saturate(.85)}
.lp-flags img+img{margin-inline-start:-8px}
.lp-flags img:nth-child(1){z-index:3;position:relative}
.lp-flags img:nth-child(2){z-index:2;position:relative}
.lp-flags img:nth-child(3){z-index:1;position:relative}
.lp-flags .lp-canton{object-position:left center}
.lp-flags .lp-es{object-position:92% center}
/* country on the card art: a round flag, or a gold globe, in the corner. The kind line names the country. */
@media(min-width:640px){
  .tk-art:has(.lp-flags) .tk-kind{inset-inline-start:auto;inset-inline-end:10px;max-width:calc(100% - 78px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:639px){
  .tk-art .lp-flags{top:16px;inset-inline-start:16px}
  .tk-art .lp-flags img{width:18px;height:18px}
  .tk-art .lp-flags img+img{margin-inline-start:-6px}
}