/* 247999.xyz v0.2.0 public tool pages.
 *
 * Scoped styles for the /tools directory and the ten no-login privacy tools.
 * Palette, spacing, shape, and dark-theme tokens come from site.css; nothing
 * here redefines a shared component. Mobile-first: base rules target a narrow
 * screen and wider layouts are added with min-width queries.
 */

/* ------------------------------------------------------- tool directory */

.tool-directory {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.pdf-redaction-preview {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-5);
}

.pdf-redaction-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: crosshair;
  touch-action: none;
  box-shadow: var(--shadow-sm);
}

.tool-actions--spread {
  justify-content: space-between;
}

.tool-directory__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tool-directory__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  justify-content: space-between;
}

.tool-directory__head h2 {
  font-size: 20px;
}

.tool-directory__head p {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-muted);
  font-size: 14px;
}

.tool-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .tool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tool-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.tool-tile:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.tool-tile__top {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.tool-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  background: var(--lime-tint);
  border: 1px solid var(--lime-wash);
  border-radius: var(--radius-sm);
  color: var(--ink);
}

.tool-tile__title {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;
}

.tool-tile__title a,
.tool-tile__cta,
.tool-related__link,
.tool-directory__back {
  text-decoration: none;
}

.tool-tile__title a {
  color: inherit;
}

.tool-tile__title a:hover {
  color: var(--lime-deep);
}

.tool-tile p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
}

.tool-tile__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

.tool-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.tool-tile__cta:hover {
  color: var(--lime-deep);
}

.tool-directory__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
}

.tool-directory__back:hover {
  color: var(--ink);
}

/* ----------------------------------------------------------- tool pages */

.tool-workbench {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: start;
}

.tool-panel .flow {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .tool-workbench {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tool-workbench--wide {
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.85fr);
  }
}

.tool-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tool-fields {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .tool-fields--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tool-fields--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.tool-range {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.tool-range input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--lime-strong);
}

.tool-range output {
  min-width: 3.5ch;
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: right;
}

.tool-options {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 520px) {
  .tool-options--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tool-option {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  font-size: 14px;
}

.tool-option input {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--lime-strong);
}

.tool-file {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.tool-file .input[type="file"] {
  flex: 1 1 240px;
  min-width: 0;
}

.tool-file__name {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-muted);
  word-break: break-all;
}

.tool-readout {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tool-readout__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
}

.tool-readout__row + .tool-readout__row {
  border-top: 1px solid var(--line);
}

.tool-readout__row:nth-child(even) {
  background: var(--surface-muted);
}

.tool-readout__label {
  color: var(--ink-muted);
  font-size: 13px;
}

.tool-readout__value {
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: right;
  word-break: break-word;
}

.tool-output {
  display: block;
  margin: 0;
  padding: var(--space-4);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  word-break: break-all;
}

.tool-output--lime {
  background: var(--lime-tint);
  border-color: var(--lime-wash);
}

.tool-output img,
.tool-output canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

.tool-canvas {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.tool-results {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .tool-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tool-results li {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  font-size: 14px;
}

.tool-results strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 600;
}

.tool-results span {
  font-family: var(--font-mono);
  font-size: 13px;
  word-break: break-word;
}

.tool-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool-bullets li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--ink-muted);
  font-size: 14px;
}

.tool-bullets svg {
  flex: none;
  margin-top: 2px;
  color: var(--lime-deep);
}

.tool-honest {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: 14px;
}

.tool-honest svg {
  flex: none;
  margin-top: 2px;
  color: var(--lime-deep);
}

.tool-honest strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--ink);
  font-size: 14px;
}

.tool-honest p {
  margin: 0;
}

.tool-honest p + p {
  margin-top: var(--space-2);
}

.tool-status[data-status="warning"],
.tool-status[data-status="unavailable"] {
  color: var(--warning);
}

.tool-related {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tool-related__list {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .tool-related__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tool-related__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  height: 100%;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
}

.tool-related__link:hover {
  border-color: var(--lime-strong);
}

.tool-related__link strong {
  font-size: 15px;
}

.tool-related__link span {
  color: var(--ink-muted);
  font-size: 13px;
}

/* -------------------------------------------------------- small screens */

@media (max-width: 480px) {
  .tool-tile {
    padding: var(--space-4);
  }

  .tool-readout__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .tool-readout__value {
    text-align: left;
  }

  .tool-related__link {
    padding: var(--space-3) var(--space-4);
  }
}