/* Shared styles for the free tools (owner 2026-11-08): email security check, breached-password check, signature
   generator, merge, split and organise. Site tokens (designs/d1/theme.css) with fallbacks for
   Design 2. Every text/background pair is measured in designs/d1/palette.py (tools/contrast.py d1). */
.sec-tool{padding-top:clamp(.5rem,2vw,1.25rem)}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.jt{min-width:0}
.jt [hidden]{display:none!important}
.jt-panel{position:relative;background:linear-gradient(180deg,var(--surface),var(--tile,var(--surface)));border:1px solid var(--line);
  border-top:4px solid var(--teal);border-radius:var(--r-lg,22px);padding:clamp(1.1rem,3vw,1.75rem);margin:0 0 1.25rem}
.jt-panel>h2{font-size:1.35rem;margin:0 0 .75rem}
.jt-note{font-size:.95rem;color:var(--muted);margin:.9rem 0 0}
.jt-note a{color:var(--teal-hi)}
.jt-privacy{display:flex;gap:.55rem;align-items:flex-start;font-size:.95rem;color:var(--muted);margin:1rem 0 0}
.jt-privacy svg{flex:0 0 auto;margin-top:.2rem;color:var(--teal)}

/* fields */
.jt-field{margin:0 0 1rem;min-width:0}
.jt-field label,.jt-label{display:block;font:700 .95rem/1.3 var(--head);margin:0 0 .35rem;color:var(--text)}
.jt-field .jt-hint{display:block;font:400 .88rem/1.4 var(--body);color:var(--muted);margin:.3rem 0 0}
.jt-input,.jt textarea,.jt select{width:100%;min-width:0;font:400 1rem/1.4 var(--body);color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.75rem .85rem}
.jt textarea{resize:vertical}
.jt-input:focus,.jt textarea:focus,.jt select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(var(--teal-a,0,185,197),.3)}
.jt-input::placeholder{color:var(--placeholder,#82a0a5)}
.jt-input[aria-invalid="true"]{border-color:var(--err)}
.jt-err{display:block;color:var(--err);font-weight:700;font-size:.92rem;margin:.35rem 0 0}
.jt-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end}
.jt-row>.jt-grow{flex:1 1 14rem;min-width:0}
.jt-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
.jt-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1rem 0 0}
.jt .btn{cursor:pointer;font-size:1rem}
.jt .btn-ghost{background:transparent}
.jt .btn[disabled]{cursor:not-allowed;opacity:1;border-color:var(--line);background:transparent;color:var(--muted)}
.jt fieldset{border:0;margin:0 0 1rem;padding:0;min-width:0}
.jt legend{font:700 .95rem/1.3 var(--head);padding:0;margin:0 0 .45rem;color:var(--text)}
.jt-choice{display:flex;gap:.55rem;align-items:flex-start;margin:.35rem 0;color:var(--text);cursor:pointer}
.jt-choice input{flex:0 0 auto;margin:.3rem 0 0;accent-color:var(--teal);width:1.05rem;height:1.05rem}
.jt-choice small{display:block;color:var(--muted);font-size:.9rem}

/* drop zone (the PDF tool's look and sizes) */
.jt-drop{max-width:825px;margin:8px auto 1.5rem;padding:60px 32px;text-align:center;color:var(--teal);
  background:linear-gradient(180deg,var(--surface),var(--tile,var(--surface)));border:2px dashed rgba(var(--teal-a,0,185,197),.35);
  border-radius:var(--r-lg,22px);cursor:pointer;transition:border-color .15s,background .15s}
.jt-drop:hover,.jt-drop:focus-visible,.jt-drop.is-over{border-color:var(--teal);outline:none;
  background:linear-gradient(rgba(var(--teal-a,0,185,197),.07),rgba(var(--teal-a,0,185,197),.07)),linear-gradient(180deg,var(--surface),var(--tile,var(--surface)))}
.jt-drop:focus-visible{box-shadow:0 0 0 3px var(--orange)}
.jt-drop svg{display:inline-block}
.jt-drop-title{margin-top:14px;font:800 1.8125rem/1.2 var(--head);color:var(--text)}
.jt-drop-sub{margin-top:8px;font-size:1.1875rem;color:var(--muted)}
.jt-link{color:var(--teal-hi);text-decoration:underline;text-underline-offset:3px}
.jt-drop-note{max-width:36rem;margin:24px auto 0;font-size:1rem;color:var(--muted)}
.jt-drop.is-compact{padding:28px 20px;margin-bottom:1rem}
.jt-drop.is-compact svg{width:36px;height:36px}
.jt-drop.is-compact .jt-drop-title{font-size:1.3rem;margin-top:6px}

/* reorderable list */
.jt-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.jt-item{display:flex;align-items:center;gap:.65rem;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:.6rem .7rem}
.jt-item.is-dragging{opacity:.55}
.jt-item.is-target{border-color:var(--teal);box-shadow:0 0 0 2px rgba(var(--teal-a,0,185,197),.35)}
.jt-handle{flex:0 0 auto;color:var(--muted);cursor:grab;font-size:1.2rem;line-height:1;user-select:none}
.jt-item-body{flex:1 1 auto;min-width:0}
.jt-item-name{display:block;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.jt-item-meta{display:block;font:500 .85rem/1.3 var(--mono);color:var(--muted)}
.jt-item-ctl{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:.3rem;justify-content:flex-end}
.jt-icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 .55rem;font:800 1.05rem/1 var(--head);
  color:var(--text);background:transparent;border:2px solid var(--line);border-radius:999px;cursor:pointer}
.jt-icon-btn:hover{border-color:var(--teal)}
.jt-icon-btn[disabled]{color:var(--muted);cursor:default;border-style:dashed}
.jt-icon-btn[disabled]:hover{border-color:var(--line)}
.jt-remove:hover{border-color:var(--err);color:var(--err)}
.jt-thumb{flex:0 0 auto;width:56px;height:56px;border-radius:8px;background:#fff;object-fit:contain}

/* page grid (organise) */
.jt-pages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:.75rem}
.jt-pages .jt-item{flex-direction:column;align-items:stretch;padding:.6rem}
.jt-pages .jt-handle{display:none}
.jt-page-box{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:var(--tile,var(--surface));border-radius:8px;overflow:hidden}
.jt-page-box canvas{display:block;max-width:100%;max-height:100%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.4);transition:transform .15s}
.jt-page-label{display:block;text-align:center;font:600 .85rem/1.3 var(--mono);color:var(--muted);margin:.45rem 0 .35rem}
.jt-pages .jt-item-ctl{justify-content:center}

/* report cards (email security check) */
.jt-report{display:grid;gap:.9rem;margin-top:1.25rem}
.jt-card{min-width:0;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--line);border-radius:var(--r,14px);padding:1.1rem 1.2rem}
.jt-card h3{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;font-size:1.15rem;margin:0 0 .5rem}
.jt-badge{display:inline-block;font:600 .78rem/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:.38rem .6rem;border-radius:999px;border:2px solid currentColor}
.jt-card.is-good{border-left-color:var(--ok)}.jt-card.is-good .jt-badge{color:var(--ok)}
.jt-card.is-warn{border-left-color:var(--orange)}.jt-card.is-warn .jt-badge{color:var(--orange)}
.jt-card.is-missing{border-left-color:var(--err)}.jt-card.is-missing .jt-badge{color:var(--err)}
.jt-card.is-info{border-left-color:var(--teal)}.jt-card.is-info .jt-badge{color:var(--teal)}
.jt-card p{margin:.4rem 0 0;color:var(--muted)}
.jt-card p.jt-means{color:var(--text)}
.jt-card ul{margin:.5rem 0 0;padding-left:1.2rem;color:var(--muted)}
.jt-card li{margin:.25rem 0}
.jt-record{display:block;margin:.6rem 0 0;padding:.6rem .75rem;font:500 .88rem/1.45 var(--mono);color:var(--text);background:var(--bg);border:1px solid var(--line);
  border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.jt-summary{font:800 1.15rem/1.35 var(--head);margin:1.25rem 0 0}

/* result line (breached-password check) */
.jt-result{margin:1rem 0 0;padding:1rem 1.1rem;border-radius:var(--r,14px);border:2px solid var(--line);background:var(--bg);font-weight:700;color:var(--text)}
.jt-result.is-bad{border-color:var(--err);color:var(--err)}
.jt-result.is-good{border-color:var(--ok);color:var(--ok)}
.jt-result a{color:var(--teal-hi)}
.jt-result small{display:block;font-weight:400;color:var(--muted);margin-top:.3rem}

/* signature generator */
.jt-sig-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:1.25rem;align-items:start}
.jt-preview{background:#fff;color:#1f2933;border-radius:12px;padding:1.25rem;overflow-x:auto;min-height:6rem}
.jt-swatches{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.jt-swatch{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.35);cursor:pointer;padding:0}
.jt-swatch[aria-pressed="true"]{outline:3px solid var(--text);outline-offset:2px}
.jt-color{width:56px;height:40px;padding:2px;border-radius:10px;border:1px solid var(--line);background:var(--bg);cursor:pointer}
.jt-steps{margin:.5rem 0 0;padding-left:1.3rem;color:var(--muted)}
.jt-steps li{margin:.35rem 0}
.jt-steps b{color:var(--text)}
.jt-code{min-height:9rem;font:500 .85rem/1.45 var(--mono)!important}

/* toast */
.jt-banner{position:fixed;left:50%;top:92px;z-index:60;transform:translateX(-50%);width:max-content;max-width:min(640px,calc(100vw - 32px));
  padding:.8rem 1.1rem;font-weight:700;line-height:1.4;color:var(--teal);background:var(--surface);border:1px solid var(--teal);
  border-left-width:4px;border-radius:var(--r,14px);box-shadow:0 14px 40px rgba(0,0,0,.45);display:none}
.jt-banner.is-shown{display:block}
.jt-banner-success{color:var(--ok);border-color:var(--ok)}
.jt-banner-error{color:var(--err);border-color:var(--err)}

@media (max-width:760px){.jt-sig-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .jt-grid2{grid-template-columns:minmax(0,1fr)}
  .jt-drop{padding:44px 18px}
  .jt-item{flex-wrap:wrap}
  .jt-list .jt-item-ctl{width:100%;justify-content:flex-start}
  .jt-actions .btn{flex:1 1 100%}
}

/* domain availability check */
.dc-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.45rem}
.dc-row{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .75rem;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:.65rem .8rem}
.dc-domain{flex:1 1 12rem;min-width:0;font:600 1rem/1.35 var(--mono);color:var(--text);overflow-wrap:anywhere}
.dc-row .jt-badge{flex:0 0 auto}
.dc-free{color:var(--ok)}
.dc-taken{color:var(--err);background:rgba(255,143,133,.12);border-color:rgba(255,143,133,.4)}   /* registered: red tint (owner 2026-11-08) */
.dc-fail{color:var(--orange)}
.dc-wait{color:var(--muted);border-style:dashed!important}
.dc-retry{height:34px;font-size:.9rem}

/* PDF organiser */
.org-h3{font-size:1.05rem;margin:1rem 0 .3rem}
.org-split>summary{cursor:pointer;font:800 1.2rem/1.3 var(--head);color:var(--text)}
.org-split[open]>summary{margin-bottom:.9rem}
.org-tick{display:flex;align-items:center;gap:.4rem;font:700 .9rem/1.2 var(--head);color:var(--text);margin:0 0 .45rem;cursor:pointer}
.org-tick input{width:1.15rem;height:1.15rem;accent-color:var(--teal);margin:0}
.jt-pages .jt-item:has(.org-tick input:checked){border-color:var(--teal);box-shadow:0 0 0 2px rgba(var(--teal-a,0,185,197),.35)}
.jt-cut[aria-pressed="true"]{border-color:var(--orange);color:var(--orange)}
.jt-pages .jt-item:has(.jt-cut[aria-pressed="true"]){border-right:4px dashed var(--orange)}

/* domain check: the button sits level with the input; the hint and any error run underneath both (owner 2026-11-08) */
.dc-search{display:flex;flex-wrap:wrap;gap:.75rem;align-items:stretch}
.dc-search .jt-input{flex:1 1 14rem;min-width:0}
.dc-search .btn{flex:0 0 auto;white-space:nowrap}
@media (max-width:480px){.dc-search .btn{flex:1 1 100%}}