/* DockFlip tool pages: layout fixes (feature row, aligned help section, Output Quality card, paste hint) */

/* 1) Feature row: every description fits on two lines */
.tp .tp-feats{display:grid;gap:1.4rem;margin-top:3rem;grid-template-columns:1fr}
@media(min-width:64rem){.tp .tp-feats{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem}.tp .tp-feat{flex:none}.tp .tp-feat p{white-space:nowrap;text-wrap:nowrap}}
.tp .tp-feat{gap:.9rem;align-items:flex-start}
.tp .tp-ic{width:3.6rem;height:3.6rem;border-radius:18px}
.tp .tp-feat strong{font-size:1.1rem}
.tp .tp-feat p{font-size:.95rem;line-height:1.45;text-wrap:balance}

/* 2) Section below the tool lines up with the drop area (same left edge, same width) */
.tp .tool-help{max-width:none;margin:3.5rem 0 0}
.tp .tool-help>p,.tp .tool-help>ol,.tp .tool-help>ul{max-width:46rem}
.tp .tool-help h2{margin-top:2.25rem}
.tp .tool-help h2:first-child{margin-top:0}
.tp .tool-help .tool-grid{grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.tp .tp-note{max-width:none}

/* 3) Controls live under the drop area */
.tp .tool-controls{display:block;margin-top:1.1rem}
.tp .tool-controls:empty{display:none}
.tp .tool-controls .quality{justify-content:center;margin:0}

.oq{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-items:center;padding:1.1rem 1.4rem;border:1px solid var(--line);border-radius:20px;background:var(--bg)}
@media(min-width:44rem){.oq{grid-template-columns:minmax(10rem,.9fr) minmax(0,1.6fr) auto;gap:1.6rem}}
.oq-title{display:block;font-size:1.05rem;font-weight:700;color:var(--ink);line-height:1.2}
.oq-txt span{display:block;margin-top:.3rem;font-size:.95rem;color:var(--muted)}
.oq-slide{display:flex;align-items:center;gap:1rem;color:var(--muted);font-size:.9rem}
.oq-slide input{--p:90%;flex:1;min-width:0;height:1.9rem;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.oq-slide input::-webkit-slider-runnable-track{height:.4rem;border-radius:99px;background:linear-gradient(90deg,var(--primary) var(--p),var(--line) var(--p))}
.oq-slide input::-moz-range-track{height:.4rem;border-radius:99px;background:var(--line)}
.oq-slide input::-moz-range-progress{height:.4rem;border-radius:99px;background:var(--primary)}
.oq-slide input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.7rem;height:1.7rem;margin-top:-.65rem;border-radius:50%;background:#fff;border:.28rem solid var(--primary);box-shadow:0 4px 10px -3px rgba(40,25,130,.45)}
.oq-slide input::-moz-range-thumb{width:1.15rem;height:1.15rem;border-radius:50%;background:#fff;border:.28rem solid var(--primary);box-shadow:0 4px 10px -3px rgba(40,25,130,.45)}
.oq-val{justify-self:start;min-width:4.4rem;text-align:center;padding:.55rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--primary);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums}
@media(min-width:44rem){.oq-val{justify-self:end}}

/* 4) Paste hint */
.tp-paste{color:var(--muted);font-size:.9rem;margin-top:-.35rem}
.tp-paste kbd{font:inherit;font-weight:600;color:var(--ink);padding:.1rem .45rem;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:var(--surface)}
@media(hover:none){.tp-paste{display:none}}

/* small phones: slimmer icon so the text still fits two lines */
@media(max-width:30rem){.tp .tp-ic{width:3rem;height:3rem;border-radius:15px}.tp .tp-feat{gap:.75rem}.tp .tp-feat p{font-size:.9rem}}


/* 5) Spacing fixes */
/* breadcrumb no longer sits on the nav bar */
body .crumbs{margin-top:2.4rem}
/* width/height row has room below the drop area */
.tp .tool-controls{margin-top:2rem}
/* "or drag and drop" + paste hint sit lower than the button */
.tp .tp-or{margin-top:.8rem}
.tp .tp-paste{margin-top:-.1rem}

/* 6) Short screens (14" laptops, small windows): keep the main controls (quality slider, width/height)
      inside the first screen, so people see them without scrolling. */
@media (max-height:56rem){
  body .crumbs{margin-top:1rem}
  body .tp h1{margin-top:.7rem;font-size:clamp(1.8rem,4.2vw,2.5rem)}
  body .tp .tp-sub{margin-top:.4rem;font-size:clamp(.95rem,1.8vw,1.05rem)}
  body .tp .tp-tool{margin-top:1.1rem}
  body .tp .tp-drop{min-height:clamp(11rem,28vh,17rem);padding:1.2rem 1rem;gap:.65rem}
  body .tp .tp-or{margin-top:.3rem}
  body .tp .tool-controls{margin-top:1.25rem}
  body .tp .oq{padding:.8rem 1.2rem}
}