/* Shared interactive tool workspace — standalone tools and article embeds. */
.tool-workspace{margin-block-start:var(--space-6);border-block:2px solid var(--ink-0);background:var(--paper-1);padding:clamp(1.2rem,4vw,2.2rem)}
.tool-workspace--inline{margin-block-start:0}
.tool-controls{display:grid;gap:var(--space-4)}
.tool-controls label{display:grid;gap:.5rem;color:var(--ink-1);font-weight:750;line-height:1.8}
.tool-controls input,.tool-controls textarea,.tool-controls select{box-sizing:border-box;width:100%;padding:.8rem;border:1px solid var(--line);border-radius:0;background:var(--paper-0);color:var(--ink-0);font:inherit;line-height:1.8}
.tool-controls textarea{direction:ltr;text-align:left;font-family:var(--font-mono,ui-monospace,SFMono-Regular,Consolas,monospace)}
.tool-controls button{min-height:2.8rem;padding:.75rem 1rem;border:1px solid var(--ink-0);border-radius:0;background:var(--ink-0);color:var(--paper-1);font-weight:900;cursor:pointer}
.action-row,.check-row{display:flex;gap:.65rem;flex-wrap:wrap}
.check-row label{display:flex;align-items:center;gap:.4rem}.check-row input{width:auto}
.privacy-note{margin:var(--space-5) 0 0;padding-block-start:var(--space-4);border-block-start:1px solid var(--line);color:var(--ink-2);font-size:var(--text-sm);line-height:1.8}
.tool-error{min-height:1.5em;color:var(--editorial-accent)}
.timestamp-output{display:grid;gap:.5rem;padding:1rem;background:var(--paper-0);border:1px solid var(--line);direction:ltr;text-align:left;line-height:1.8}
.text-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-block-start:1rem;background:var(--line);border:1px solid var(--line)}
.text-stats>div{display:grid;gap:.2rem;padding:1rem;background:var(--paper-1)}.text-stats strong{font-size:1.6rem}.text-stats span{color:var(--ink-2);font-size:var(--text-xs)}
@media(max-width:640px){.text-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Article embeds stay useful without dominating the reading flow. */
.tool-workspace--inline .tool-controls textarea{height:10rem;min-height:8rem;max-height:14rem;resize:vertical}
@media(max-width:640px){.tool-workspace--inline .tool-controls textarea{height:8.5rem;min-height:7rem}}

/* Tool Workspace V4 — shared high-quality controls for legacy and advanced tools. */
.tool-workspace{
  margin-block-start:1.35rem;
  padding:clamp(1rem,2.5vw,1.6rem);
  border:1px solid var(--quality-surface-border);
  border-radius:var(--quality-radius-panel);
  background:var(--quality-surface-bg);
  box-shadow:var(--quality-surface-shadow);
}
.tool-controls{gap:1rem}
.tool-controls label{
  gap:.42rem;
  color:var(--text-secondary);
  font-size:.78rem;
  font-weight:800;
  line-height:1.55;
}
.tool-controls input,
.tool-controls textarea,
.tool-controls select{
  min-height:2.85rem;
  padding:.7rem .8rem;
  border:1px solid var(--quality-surface-border-strong);
  border-radius:var(--quality-radius-control);
  background:var(--surface-raised);
  color:var(--text-primary);
  transition:border-color var(--motion-fast) var(--ease-productive),box-shadow var(--motion-fast) var(--ease-productive),background var(--motion-fast) var(--ease-productive);
}
.tool-controls textarea{line-height:1.65}
.tool-controls input:hover,
.tool-controls textarea:hover,
.tool-controls select:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--quality-surface-border-strong))}
.tool-controls input:focus,
.tool-controls textarea:focus,
.tool-controls select:focus{
  outline:0;
  border-color:var(--accent);
  box-shadow:var(--shadow-focus);
}
.tool-controls button{
  min-height:2.85rem;
  padding:.7rem 1rem;
  border:1px solid var(--accent);
  border-radius:var(--quality-radius-control);
  background:var(--accent);
  color:var(--editorial-active-text);
  box-shadow:var(--shadow-1);
  font-weight:900;
  transition:transform var(--motion-fast) var(--ease-productive),box-shadow var(--motion-fast) var(--ease-productive);
}
.tool-controls button:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}
.tool-controls button:active{transform:none}
.privacy-note{
  margin:1rem 0 0;
  padding:.8rem .9rem;
  border:1px solid color-mix(in srgb,var(--accent-secondary) 22%,var(--quality-surface-border));
  border-inline-start:3px solid var(--accent-secondary);
  border-radius:12px;
  background:color-mix(in srgb,var(--accent-secondary) 5%,var(--quality-surface-soft));
  color:var(--text-muted);
  font-size:.75rem;
  line-height:1.7;
}
.tool-error{min-height:1.35em;margin:0;color:var(--danger-text);font-size:.76rem;font-weight:750}
.timestamp-output{
  gap:.45rem;
  padding:.85rem;
  border:1px solid var(--quality-surface-border);
  border-radius:12px;
  background:var(--quality-surface-soft);
}
.text-stats{
  gap:.6rem;
  padding:0;
  border:0;
  background:transparent;
}
.text-stats>div{
  padding:.85rem;
  border:1px solid var(--quality-surface-border);
  border-radius:12px;
  background:var(--quality-surface-bg);
}


/* Egytag Lab shared pointer — single source for all embedded tools,
   every standalone application and the standalone tools directory.
   These are the main website's original SVG assets, not copies.
   Only fine-pointer desktop devices receive the overrides. */
@media (pointer:fine) {
  html:has(> body.standalone),
  body.standalone,
  .tool-detail,
  .tool-detail .tool-workspace,
  .tool-detail .tool-controls {
    cursor:url('/assets/icons/cursor-arrow.svg') 3 3,auto!important;
  }
  :is(body.standalone,.tool-detail) :is(
    a[href],button:not(:disabled),summary,select:not(:disabled),
    [role="button"]:not([aria-disabled="true"]),
    [role="link"]:not([aria-disabled="true"]),
    label[for],input[type="checkbox"]:not(:disabled),
    input[type="radio"]:not(:disabled),input[type="file"]:not(:disabled),
    input[type="button"]:not(:disabled),input[type="submit"]:not(:disabled),
    input[type="reset"]:not(:disabled)
  ) {
    cursor:url('/assets/icons/cursor-hand.svg') 15 3,pointer!important;
  }
  :is(body.standalone,.tool-detail) :is(
    input:not([type]),input[type="text"],input[type="search"],
    input[type="url"],input[type="email"],input[type="tel"],
    input[type="password"],input[type="number"],textarea,[contenteditable="true"]
  ) {
    cursor:text!important;
  }
  :is(body.standalone,.tool-detail) :is(
    button:disabled,select:disabled,input:disabled,[aria-disabled="true"]
  ) {
    cursor:not-allowed!important;
  }
}


/* Egytag shared form controls 2026 — readable, distinguishable inputs with
   native accessible dropdowns. Scope is limited to interactive Lab tools. */
:is(body.standalone,.tool-detail) .tool-controls label{
  font-size:clamp(.93rem, .88rem + .2vw, 1rem);
  line-height:1.65;
  font-weight:760;
  letter-spacing:0;
}
:is(body.standalone,.tool-detail) .tool-controls :is(
  select,input:not([type="checkbox"]):not([type="radio"]),
  textarea
){
  font-size:max(1rem,16px);
  line-height:1.55;
  min-height:48px;
  padding-block:11px;
  padding-inline:14px;
  border-radius:10px;
  background-color:var(--surface-raised,var(--xl-panel,#132327));
  border:1.5px solid var(--quality-surface-border-strong,#45535e);
  color:var(--text-primary,var(--xl-strong,#eff5fa));
  transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease;
}
:is(body.standalone,.tool-detail) .tool-controls select{
  appearance:auto;
  cursor:pointer;
  color-scheme:dark;
  font-weight:700;
  letter-spacing:.005em;
  min-width:0;
}
:is(body.standalone,.tool-detail) .tool-controls select option,
:is(body.standalone,.tool-detail) .tool-controls select optgroup{
  background:#13202d;
  color:#f0f6ff;
  font-size:16px;
  font-weight:600;
}
:is(body.standalone,.tool-detail) .tool-controls :is(
  select,input:not([type="checkbox"]):not([type="radio"]),textarea
):hover:not(:disabled){
  border-color:var(--xl-color,var(--accent,var(--lab-green,#63cd99)));
}
:is(body.standalone,.tool-detail) .tool-controls :is(
  select,input:not([type="checkbox"]):not([type="radio"]),textarea
):focus-visible{
  outline:2px solid var(--xl-color,var(--accent,var(--lab-green,#63cd99)));
  outline-offset:2px;
  border-color:var(--xl-color,var(--accent,var(--lab-green,#63cd99)));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--xl-color,var(--accent,#63cd99)) 18%,transparent);
}
:is(body.standalone,.tool-detail) .tool-controls select.lab-selection-committed{
  border-color:var(--xl-color,var(--accent,var(--lab-green,#63cd99)))!important;
  background-color:color-mix(in srgb,var(--xl-color,var(--accent,#63cd99)) 9%,#121c27)!important;
  box-shadow:inset 0 0 0 1px var(--xl-color,var(--accent,#63cd99));
}
:is(body.standalone,.tool-detail) .tool-controls .lab-select-choice{
  display:block;
  width:fit-content;
  max-width:100%;
  margin-block:5px 0;
  padding:5px 9px;
  border-inline-start:2px solid var(--xl-color,var(--accent,#63cd99));
  color:var(--text-secondary,var(--xl-soft,#bbcbd3));
  font-size:clamp(.81rem,.78rem + .12vw,.9rem);
  line-height:1.6;
  overflow-wrap:anywhere;
}
:is(body.standalone,.tool-detail) .tool-controls .lab-select-choice[hidden]{display:none!important}
:is(body.standalone,.tool-detail) .tool-controls button:not(.studio-kv-remove):not(.studio-kv-reveal){
  font-size:clamp(.94rem,.91rem + .18vw,1rem);
  line-height:1.5;
}
:is(body.standalone,.tool-detail) .tool-controls :is(select,input,textarea,button):disabled{
  opacity:.6;
}
@media (pointer:coarse){
  :is(body.standalone,.tool-detail) .tool-controls select{min-height:52px}
}
@media (prefers-reduced-motion:reduce){
  :is(body.standalone,.tool-detail) .tool-controls :is(select,input,textarea){
    transition:none!important;
  }
}


/* Main Egytag ↔ independent Lab discovery. Separate canonical guide and app. */
.lab-independent-entry{
 margin:16px 0 20px;
 padding:14px 17px;
 border:1px solid color-mix(in srgb,var(--accent,#60d3a2) 46%,transparent);
 border-radius:14px;
 background:color-mix(in srgb,var(--accent,#60d3a2) 8%,var(--quality-surface-bg,#101b20));
 font-size:clamp(15px,1vw,18px);
 font-weight:800;
}
.lab-independent-entry a{color:var(--accent,#79e2b4)!important;text-decoration:none}
.lab-independent-entry a:hover{text-decoration:underline}
.tool-icon--favicon img{
 width:44px;height:44px;display:block;object-fit:contain;
 border-radius:11px;
}
.lab-tool-actions{
 display:flex;align-items:center;gap:12px;flex-wrap:wrap;
 margin:18px 0 20px;
 font-size:clamp(15px,1vw,18px);font-weight:800;
}
.lab-tool-actions a{
 display:inline-flex;align-items:center;justify-content:center;
 padding:12px 18px;min-height:46px;border-radius:11px;text-decoration:none;
}
.lab-tool-launch{background:#49d79b;color:#061719!important;border:1px solid #49d79b}
.lab-tool-directory{background:transparent;color:var(--text-primary,#eaf7f1)!important;border:1px solid var(--quality-surface-border,#344f52)}
.lab-tool-actions a:hover{filter:brightness(1.14)}