/* Styles for the tools page. Loaded only here, so the marketing pages keep
   their tiny inlined stylesheet. Colours come from global.css tokens. */

.t-intro {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  margin: 0 0 2rem;
}
.t-proof {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: #e7f6ec;
  color: #14663a;
}
.t-proof.warn {
  background: #fdf0e3;
  color: #8a4b06;
}
@media (prefers-color-scheme: dark) {
  .t-proof {
    background: #123024;
    color: #7fd8a4;
  }
  .t-proof.warn {
    background: #3a2a12;
    color: #e5b171;
  }
}

/* --- tool index ---------------------------------------------------------- */

/* Room kept for the tool before its script arrives, so the questions below it
   do not jump down the page when it mounts. A dropzone plus its controls is
   about this tall; the exact figure matters less than the page holding still. */
/* The proof panel. A zero large enough to be the first thing read, the line it
   measures, and the sentence saying why it is there — one block, identical in
   both visual directions because it is the point of the site rather than a
   thing the test varies. */
.proof {
  /* Fixed, not themed: this panel is the one thing the two directions must not
     vary, so it does not take their border weight or their corner radius. */
  border: 1px solid var(--proof);
  border-radius: 12px;
  background: var(--proof-bg);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.2rem;
  max-width: 30rem;
}
.proof-read {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.6rem;
  margin: 0;
  color: var(--proof);
}
.proof .net-count {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.proof .net-label {
  font-weight: 650;
  font-size: 0.95rem;
  flex: 1 1 12rem;
}
.proof .net-detail {
  flex: 1 1 100%;
  font-size: 0.83rem;
  opacity: 0.9;
  word-break: break-word;
}
.proof-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.1rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--proof);
}
.proof-facts li::before {
  content: "· ";
  opacity: 0.6;
}
.proof-line {
  margin: 0.55rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid color-mix(in srgb, var(--proof) 35%, transparent);
  font-size: 0.87rem;
  color: var(--proof);
}
/* A request did leave: the panel says so instead of staying reassuring. */
.proof.warn {
  border-color: #b45309;
  background: #fff4e5;
}
.proof.warn .proof-read,
.proof.warn .proof-line {
  color: #7c3a06;
}
.proof.warn .proof-line {
  border-top-color: #b4530955;
}
@media (prefers-color-scheme: dark) {
  .proof.warn {
    border-color: #f0a35e;
    background: #3a2408;
  }
  .proof.warn .proof-read,
  .proof.warn .proof-line {
    color: #f8c88c;
  }
}

/* The tile's number: eleven cards that look alike get something to be told
   apart by, and something to point at. */
.t-num {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

#tool-mount {
  /* Enough for the picker and its action row, which is what every tool shows
     before a file is chosen. It was 20rem, which held the page still but left
     192 px of nothing under the editor — which opens on a bare picker and now
     asks for less. */
  min-height: var(--reserve, 15rem);
}

.t-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  /* Every card in a row the same height. The blurbs are within a few words of
     each other now, but a ragged row of boxes reads as unfinished even when the
     difference is one line. */
  grid-auto-rows: 1fr;
}
.t-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1.2rem 1.3rem;
  border: var(--border, 1px) solid var(--line);
  border-radius: var(--radius, 14px);
  background: var(--card);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.t-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgb(14 18 32 / 8%);
}
@media (prefers-reduced-motion: reduce) {
  .t-card {
    transition: none;
  }
  .t-card:hover {
    transform: none;
  }
}
/* One hue per tool. Eleven identical blue squares still read as one texture, so
   the eye has to parse eleven titles to find anything; a distinct colour makes
   the tile you used last week findable before you read a word.

   The hue is the only value stored — lightness and saturation are fixed per
   theme, so every tile is legible in both without eleven hand-picked pairs. */
.t-card[data-tool="editor"] { --h: 220; }
.t-card[data-tool="merge"] { --h: 265; }
.t-card[data-tool="organise"] { --h: 192; }
.t-card[data-tool="extract"] { --h: 158; }
.t-card[data-tool="compress"] { --h: 25; }
.t-card[data-tool="toPdf"] { --h: 340; }
.t-card[data-tool="toImages"] { --h: 288; }
.t-card[data-tool="editText"] { --h: 42; }
.t-card[data-tool="stamp"] { --h: 310; }
.t-card[data-tool="protect"] { --h: 355; }
.t-card[data-tool="text"] { --h: 130; }

/* The icon sits in a tinted square rather than floating on the card. */
.t-card svg {
  width: 24px;
  height: 24px;
  color: hsl(var(--h, 220) 68% 40%);
  box-sizing: content-box;
  padding: 9px;
  border-radius: var(--radius, 11px);
  background: hsl(var(--h, 220) 88% 95%);
  flex: 0 0 auto;
  align-self: start;
  margin-top: 0.35rem;
  transition: transform 0.15s;
}
.t-card:hover svg {
  transform: scale(1.06);
}
@media (prefers-color-scheme: dark) {
  .t-card svg {
    color: hsl(var(--h, 220) 72% 72%);
    background: hsl(var(--h, 220) 42% 18%);
  }
}
.t-card:hover {
  border-color: hsl(var(--h, 220) 68% 50%);
}
@media (prefers-reduced-motion: reduce) {
  .t-card svg,
  .t-card:hover svg {
    transition: none;
    transform: none;
  }
}
.t-card h2,
.t-card h3 {
  margin: 0.6rem 0 0.3rem;
  font-size: 1.02rem;
}
.t-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* On a phone the eleven cards were eleven full-height blocks — a very long
   scroll before anything else on the page. Laid out as rows, the same eleven fit
   in about half the height and still say what each one does. */
@media (max-width: 560px) {
  .t-cards {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    grid-auto-rows: auto;
  }
  .t-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon title" "icon blurb";
    column-gap: 0.9rem;
    row-gap: 0.15rem;
    align-items: center;
    padding: 0.9rem 1rem;
  }
  .t-card svg {
    grid-area: icon;
    align-self: center;
    padding: 8px;
    border-radius: 10px;
  }
  .t-card h2,
  .t-card h3 {
    grid-area: title;
    margin: 0;
  }
  .t-card p {
    grid-area: blurb;
    font-size: 0.88rem;
    line-height: 1.45;
  }
}

/* --- tool panel ---------------------------------------------------------- */

.t-back {
  display: inline-block;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
#tool-panel h2 {
  margin: 0 0 0.3rem;
}
.t-blurb {
  margin: 0 0 1.6rem;
  color: var(--ink-soft);
}
.t-body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.t-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 8rem;
  padding: 1.5rem;
  border: max(2px, var(--border, 2px)) dashed var(--edge);
  border-radius: var(--radius, 14px);
  background: var(--bg-alt);
  cursor: pointer;
  text-align: center;
}
/* The focus ring belongs to the input, which is the thing that is actually
   focused; the label draws it, because the input is a pixel wide. */
.t-drop:hover,
.t-drop:has(.t-file:focus-visible),
.t-drop.over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.t-drop-label {
  font-weight: 620;
}
/* On the home page the primary action has to look like one. A dashed rectangle
   reads as a waiting area, not as a thing to click, so the button carries the
   invitation and the drop target becomes the fallback underneath it. */
.t-drop-cta {
  display: inline-block;
  background: var(--accent);
  color: var(--btn-ink);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--pill, 999px);
  border: var(--border, 0px) solid var(--line);
}
.t-drop:hover .t-drop-cta,
.t-drop:has(.t-file:focus-visible) .t-drop-cta {
  filter: brightness(1.08);
}
.t-drop-hint {
  color: var(--ink-soft);
  font-size: 0.9rem;
}
/* Invisible, but the size of the zone it belongs to: a one-pixel input is a
   one-pixel target to anything measuring them, even though the label around it
   is what a finger actually lands on. */
.t-file {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.t-drop {
  position: relative;
}

.t-field {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.94rem;
}
.t-field > span:first-child {
  min-width: 9rem;
  color: var(--ink-soft);
}
.t-input {
  font: inherit;
  font-size: 0.94rem;
  padding: 0.45rem 0.6rem;
  border: var(--border, 1px) solid var(--edge);
  border-radius: var(--radius, 8px);
  background: var(--bg);
  color: var(--ink);
  min-width: 12rem;
  min-height: 44px;
}
.t-slider {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.t-range {
  width: 12rem;
}
.t-slider output {
  min-width: 4rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.t-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}
.t-btn {
  font: inherit;
  font-weight: 620;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius, 10px);
  border: var(--border, 1px) solid var(--accent);
  background: var(--accent);
  color: var(--btn-ink);
  cursor: pointer;
}
.t-btn.quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
/* A button with no hover and no press reads as a picture of a button. */
.t-btn:hover:not(:disabled) {
  filter: brightness(1.08);
}
.t-btn.quiet {
  border-color: var(--edge);
}
.t-btn.quiet:hover:not(:disabled) {
  filter: none;
  background: var(--bg-alt);
  border-color: var(--ink-soft);
}
.t-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.t-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  .t-btn:active:not(:disabled) {
    transform: none;
  }
}
.t-count {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.t-status {
  margin: 0;
  min-height: 1.4rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.t-status.good {
  color: #14663a;
  font-weight: 600;
}
.t-status.bad {
  color: #a5311f;
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .t-status.good {
    color: #7fd8a4;
  }
  .t-status.bad {
    color: #f0917f;
  }
}
.t-hint,
.t-warn {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.t-warn {
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--accent);
  background: var(--bg-alt);
  border-radius: 0 8px 8px 0;
}

/* --- file list (merge) --------------------------------------------------- */

.t-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.t-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.8rem;
  border: var(--border, 1px) solid var(--line);
  border-radius: var(--radius, 10px);
  background: var(--card);
}
.t-grip {
  cursor: grab;
  color: var(--ink-soft);
}
.t-row-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.94rem;
}
.t-row-meta {
  color: var(--ink-soft);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* --- page grid ----------------------------------------------------------- */

.t-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.9rem;
}
.t-grid.small {
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
}
.t-page {
  margin: 0;
  padding: 0.5rem;
  border: var(--border, 1px) solid var(--line);
  border-radius: var(--radius, 10px);
  background: var(--card);
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.t-page.pick {
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.t-page.on {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.t-page.gone {
  opacity: 0.35;
}
.t-page-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8rem;
  overflow: hidden;
}
.t-page img {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 1px 4px rgb(0 0 0 / 18%);
}
.t-page-tools {
  display: flex;
  justify-content: center;
  gap: 0.15rem;
  margin-top: 0.3rem;
}
.t-icon {
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  /* 24 px is the floor everywhere; a finger gets 44, which is what these
     measured before: 23 x 24, on the buttons that rotate and delete pages. */
  min-width: 24px;
  min-height: 24px;
  padding: 0.35rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.t-icon:hover:not(:disabled) {
  border-color: var(--edge);
  color: var(--ink);
}
.t-icon:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.t-row-tools {
  display: inline-flex;
  gap: 0.15rem;
}


.t-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.t-thumb {
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.t-preview {
  max-height: 20rem;
  overflow: auto;
  padding: 0.9rem;
  border: var(--border, 1px) solid var(--line);
  border-radius: var(--radius, 10px);
  background: var(--bg-alt);
  font-size: 0.8rem;
  white-space: pre-wrap;
}

/* --- text editor --------------------------------------------------------- */

.t-stage {
  position: relative;
  align-self: flex-start;
  max-width: 100%;
  overflow: auto;
  background: #fff;
  box-shadow: 0 1px 8px rgb(0 0 0 / 16%);
}
.t-stage canvas {
  display: block;
}
/* A real <button>: these were <div>s with a click handler, so the whole feature
   was unreachable without a mouse and silent to a screen reader. The appearance
   is reset back to a bare box — only the behaviour is wanted. */
.t-run {
  position: absolute;
  cursor: text;
  border: 1px solid transparent;
  border-radius: 2px;
  appearance: none;
  padding: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
}
.t-run:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.t-run:hover {
  border-color: var(--accent);
  background: rgb(31 87 230 / 12%);
}
.t-run.blocked {
  cursor: not-allowed;
  border-color: rgb(190 60 45 / 35%);
  background: rgb(190 60 45 / 7%);
}
.t-edit {
  position: absolute;
  z-index: 5;
  padding: 0 2px;
  border: 2px solid var(--accent);
  border-radius: 3px;
  background: #fff;
  color: #111;
  /* These fields open already focused, so the browser ring would be permanent
     decoration rather than a signal — but removing it left nothing at all once
     the keyboard moved away and came back. The ring returns on focus-visible,
     which is exactly when somebody needs to be told where they are. */
  outline: none;
  font-family: inherit;
}

@media (max-width: 40rem) {
  .t-field {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.3rem;
  }
  .t-range {
    width: 100%;
  }
}

/* --- full editor ---------------------------------------------------------
   Layout follows the pattern the category has settled on: a grouped toolbar on
   top, a floating contextual menu above the selection, and the primary action
   pinned under the page. */

.e-workspace {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.e-toolbar {
  position: sticky;
  /* Below the site header, which is also sticky: at zero the two stacked and
     the toolbar sat over the top of the page being edited. */
  top: 3.4rem;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.35rem;
  border: var(--border, 1px) solid var(--line);
  border-radius: var(--radius, 12px);
  background: var(--card);
  box-shadow: 0 1px 6px rgb(0 0 0 / 7%);
}
.e-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.e-tool:hover {
  background: var(--bg-alt);
}
.e-tool.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 620;
}
.e-glyph {
  font-size: 0.95rem;
  line-height: 1;
}
.e-sep {
  width: 1px;
  margin: 0.3rem 0.35rem;
  background: var(--line);
}

.e-stage {
  position: relative;
  /* Anything that scrolls the page into view leaves room for both sticky bars
     rather than tucking the top of the document under them. */
  scroll-margin-top: 7rem;
  background: #fff;
  box-shadow: 0 2px 14px rgb(0 0 0 / 18%);
  max-width: 100%;
}
.e-canvas canvas {
  display: block;
}
.e-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The page still scrolls under a finger. `touch-action: none` everywhere meant
     that on a phone the document became a wall: nothing below it was reachable. */
  touch-action: pan-y;
}
/* With a drawing tool held, a swipe is a stroke, not a scroll. */
.e-stage:not([data-tool="select"]) .e-layer {
  touch-action: none;
}
.e-stage[data-tool="select"] .e-layer {
  cursor: default;
}
.e-stage[data-tool="text"] .e-layer,
.e-stage[data-tool="text-existing"] .e-layer {
  cursor: text;
}
.e-stage[data-tool="ink"] .e-layer,
.e-stage[data-tool="sign"] .e-layer {
  cursor: crosshair;
}
.e-stage[data-tool="whiteout"] .e-layer,
.e-stage[data-tool="highlight"] .e-layer,
.e-stage[data-tool="rect"] .e-layer,
.e-stage[data-tool="ellipse"] .e-layer,
.e-stage[data-tool="line"] .e-layer {
  cursor: crosshair;
}

.e-obj {
  cursor: move;
  /* Dragging an object must win over the scroll the layer now allows. */
  touch-action: none;
}
.e-run {
  fill: rgb(31 87 230 / 10%);
  stroke: rgb(31 87 230 / 45%);
  cursor: text;
}
.e-run:hover {
  fill: rgb(31 87 230 / 22%);
}
.e-run.blocked {
  fill: rgb(190 60 45 / 8%);
  stroke: rgb(190 60 45 / 35%);
  cursor: not-allowed;
}
.e-sel {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  pointer-events: none;
}
.e-handle {
  fill: var(--accent);
  cursor: nwse-resize;
}

/* `hidden` is an attribute, not a suggestion: `.e-tool { display: inline-flex }`
   was overriding it, so "New signature" sat in the toolbar before there was a
   signature to reset. */
[hidden] {
  display: none !important;
}

.e-menu {
  position: absolute;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.2rem;
  border: var(--border, 1px) solid var(--line);
  border-radius: var(--radius, 9px);
  background: var(--card);
  box-shadow: 0 3px 12px rgb(0 0 0 / 16%);
}
.e-mbtn {
  font: inherit;
  font-size: 0.8rem;
  min-width: 1.9rem;
  padding: 0.25rem 0.35rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.e-mbtn:hover {
  background: var(--bg-alt);
}
.e-mbtn.on {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.e-mbtn.danger:hover {
  background: #fdecea;
  color: #a5311f;
}
.e-swatch {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0 1px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}

.e-input {
  position: absolute;
  z-index: 10;
  padding: 0 2px;
  border: 2px solid var(--accent);
  border-radius: 3px;
  background: #fff;
  color: #111;
  /* These fields open already focused, so the browser ring would be permanent
     decoration rather than a signal — but removing it left nothing at all once
     the keyboard moved away and came back. The ring returns on focus-visible,
     which is exactly when somebody needs to be told where they are. */
  outline: none;
  font-family: Helvetica, Arial, sans-serif;
}

.e-bar {
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.9rem;
  border: var(--border, 1px) solid var(--line);
  border-radius: var(--radius, 12px);
  background: var(--card);
  box-shadow: 0 -1px 8px rgb(0 0 0 / 7%);
}
.e-pager {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.e-page-btn {
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
.e-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 45rem) {
  .e-label {
    display: none;
  }
  .e-tool {
    padding: 0.45rem 0.55rem;
  }
}
.e-backdrop {
  fill: transparent;
}

/* `hidden` loses to an explicit display rule, so the dropzone stayed visible
   after a file was picked. Scoped to this page's components only. */
.t-drop[hidden],
.e-workspace[hidden],
.e-menu[hidden] {
  display: none;
}

/* The badge names what it counted, so a non-zero number can be judged rather
   than merely worried about. */
.t-proof-detail {
  font-weight: 500;
  opacity: 0.85;
}
.net-count {
  margin-right: 0.3rem;
}

/* Inline editor: the field plus its explicit apply/cancel buttons, so nobody has
   to guess that Enter is what commits. */
.t-inline {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 2px;
}
.t-inline-input {
  padding: 0 2px;
  border: 2px solid var(--accent);
  border-radius: 3px;
  background: #fff;
  color: #111;
  /* These fields open already focused, so the browser ring would be permanent
     decoration rather than a signal — but removing it left nothing at all once
     the keyboard moved away and came back. The ring returns on focus-visible,
     which is exactly when somebody needs to be told where they are. */
  outline: none;
  font-family: Helvetica, Arial, sans-serif;
}
.t-inline-btn {
  font-size: 12px;
  line-height: 1;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.t-inline-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Third state: a subsetted font can be rewritten, but only with the glyphs the
   subset already carries. Amber sits between editable blue and blocked red. */
.t-run.limited {
  border-color: rgb(190 130 20 / 45%);
  background: rgb(220 160 40 / 10%);
  cursor: text;
}
.t-run.limited:hover {
  background: rgb(220 160 40 / 22%);
}
.e-run.limited {
  fill: rgb(220 160 40 / 14%);
  stroke: rgb(190 130 20 / 45%);
  cursor: text;
}
.e-run.limited:hover {
  fill: rgb(220 160 40 / 26%);
}

/* The app link only ever appears inside a status message that has just explained
   why the browser cannot do the job. */
.t-status-cta {
  display: inline-block;
  margin-left: 0.15rem;
  font-weight: 620;
  color: var(--accent);
}


/* ------------------------------------------------------------- home drop zone

   The first thing on the home page, and the first thing under the eye: bigger
   than a tool's own picker, because here it has to read as the way in rather
   than as one control among several. */

#home-drop {
  margin: 0 0 1.6rem;
}
#home-drop .t-drop {
  min-height: 11rem;
}
#home-drop .t-drop-label {
  font-size: 1.15rem;
  font-weight: 700;
}
.home-question {
  margin: 0 0 0.9rem;
  font-size: 1.15rem;
}
/* The eleven answers are buttons, not links: the tool runs here, on the file
   already in memory, so there is nowhere to navigate to. */
.home-actions .t-card {
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.home-actions .t-card h2 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}
.home-running {
  margin: 0 0 0.8rem;
  font-size: 1.2rem;
}
.home-panel > .t-btn.quiet {
  margin-top: 1.2rem;
}

/* The four borders left at 1px below are internal detail — a thumbnail's edge,
   a colour swatch, a small page button, a badge. A structural rule and a
   hairline separator are different things, and making every line in the file
   three pixels thick in direction B would turn a table into a grid of bars. */

/* ------------------------------------------------------- touch target sizes

   Last in the file on purpose. These rules have to beat the component rules
   they apply to, and .e-mbtn and .e-swatch are declared further down than the
   block used to sit — so a menu button stayed 30.4 px wide and a colour 18.4,
   which is exactly their own declared width.

   Touch, or a screen small enough that it is almost certainly touch: a desktop
   browser at 390 px wide reports a fine pointer and missed the rule entirely. */

@media (pointer: coarse), (max-width: 700px) {
  .t-icon,
  .e-tool,
  .e-page-btn,
  .t-inline-btn,
  .e-mbtn,
  .e-swatch {
    min-width: 44px;
    min-height: 44px;
    /* Without this they shrink back below the minimum inside a flex row. */
    flex: 0 0 auto;
  }
  .e-menu {
    flex-wrap: wrap;
    max-width: calc(100vw - 2rem);
  }
  /* Five actions of 44 px do not fit across a page thumbnail; they wrap into
     two rows rather than hanging off the left edge of the card. */
  .t-page-tools {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15rem;
  }
  /* Neither bar sticks on a phone. Two sticky bars, one at each end of a screen
     barely taller than the two of them together, meant the lower one covered
     96 px of the upper: the page offered "Apply and download" while the tools it
     applies were hidden underneath it. Both scroll with the document now, which
     is one more gesture and no lost controls. */
  .e-toolbar,
  .e-bar {
    position: static;
  }
}


/* The inline fields suppress the default ring because they open focused. This
   puts one back for anybody arriving by keyboard. */
/* These fields sit on the white page of the document, not on the interface, so
   the ring cannot follow the theme: in dark mode the interface ink is white,
   which against white paper measures 1:1. A fixed blue is legible on paper in
   every mode and direction. */
.t-inline-input:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}