/* pdf tool page: page-specific styles for the design-system migration. Scoped under #pdf-page.ffp.
   Restyles the inner controls of the 22 option panels using the design-system component look
   (ff-opt radio cards, ff-input fields, ff-check, ff-panel, ff-chip) without touching ids or markup. */

/* ---------- shared field rhythm ---------- */
#pdf-page.ffp .password-area > .helper-text{color:var(--text-primary);font-weight:600}
#pdf-page.ffp .password-area small.helper-text{display:block;margin:0;font-size:var(--text-xs);font-weight:400;color:var(--text-secondary);line-height:1.5}
#pdf-page.ffp .password-area code{font:500 12px var(--font-mono);padding:1px 6px;border-radius:var(--radius-xs);background:var(--bg-subtle);border:1px solid var(--border-subtle);color:var(--text-primary)}
#pdf-page.ffp .password-area input::placeholder,#pdf-page.ffp .password-area textarea::placeholder{color:var(--text-muted)}
#pdf-page.ffp .password-area select{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;
  background:var(--bg-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center}
#pdf-page.ffp .password-area input:disabled,#pdf-page.ffp .password-area select:disabled{background:var(--bg-subtle);color:var(--text-muted);cursor:not-allowed}
#pdf-page.ffp .password-area textarea{width:100% !important;min-height:120px;padding:var(--space-3) !important;border:1px solid var(--border-default) !important;border-radius:var(--radius-md) !important;background:var(--bg-panel);color:var(--text-primary);font:400 var(--text-base)/1.5 var(--font-sans);resize:vertical;box-sizing:border-box}
#pdf-page.ffp .password-area textarea:hover{border-color:var(--border-strong) !important}
#pdf-page.ffp .password-area textarea:focus{outline:none;border-color:var(--accent) !important;box-shadow:0 0 0 3px var(--focus-ring)}
#pdf-page.ffp .password-area input[type=file]{height:auto;min-height:44px;padding:9px var(--space-3);font:400 var(--text-sm) var(--font-sans);color:var(--text-secondary);cursor:pointer}
#pdf-page.ffp .password-area input[type=file]::file-selector-button{margin-right:var(--space-3);height:28px;padding:0 var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--bg-subtle);color:var(--text-primary);font:500 var(--text-xs) var(--font-sans);cursor:pointer}
#pdf-page.ffp .password-area input[type=file]::file-selector-button:hover{border-color:var(--border-strong)}
#pdf-page.ffp .password-area label.helper-text span,#pdf-page.ffp .password-area label span#watermark-opacity-value,#pdf-page.ffp .password-area label span#sign-width-value{font:500 12px var(--font-mono);color:var(--accent);background:var(--accent-soft);padding:1px 6px;border-radius:var(--radius-xs);margin-left:4px}

/* ---------- checkboxes (ff-check) ---------- */
#pdf-page.ffp .password-area label:has(> input[type=checkbox]:not(#ai-mode-toggle)){display:flex;align-items:center;gap:var(--space-2);min-height:44px;font-weight:400;font-size:var(--text-sm);cursor:pointer}
#pdf-page.ffp .password-area input[type=checkbox]:not(#ai-mode-toggle),#pdf-page.ffp .password-area input[type=radio]{width:16px;height:16px;min-width:16px;margin:0;padding:0;accent-color:var(--accent);box-shadow:none;flex:none}

/* ---------- radio cards (ff-opt) ---------- */
#pdf-page.ffp fieldset.options-panel{display:flex;flex-direction:column;gap:var(--space-2);margin:0;padding:0;border:0;background:none;min-width:0}
#pdf-page.ffp fieldset.options-panel legend{padding:0;margin:0 0 var(--space-2);font-size:var(--text-sm);font-weight:600;color:var(--text-primary);float:left;width:100%}
#pdf-page.ffp fieldset.options-panel legend + *{clear:both}
#pdf-page.ffp fieldset.options-panel > label,
#pdf-page.ffp #create-pdf-area div:has(> label > input[type=radio]) > label{display:flex;align-items:center;gap:var(--space-3);min-height:44px;padding:var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-panel);color:var(--text-primary);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:border-color var(--duration-fast),background var(--duration-fast)}
#pdf-page.ffp fieldset.options-panel > label:hover,
#pdf-page.ffp #create-pdf-area div:has(> label > input[type=radio]) > label:hover{border-color:var(--border-strong)}
#pdf-page.ffp fieldset.options-panel > label:has(input:checked),
#pdf-page.ffp #create-pdf-area div:has(> label > input[type=radio]) > label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
#pdf-page.ffp fieldset.options-panel > label:has(input:focus-visible),
#pdf-page.ffp #create-pdf-area div:has(> label > input[type=radio]) > label:has(input:focus-visible){box-shadow:0 0 0 3px var(--focus-ring)}
#pdf-page.ffp #create-pdf-area div:has(> label > input[type=radio]){display:grid !important;grid-template-columns:1fr 1fr;gap:var(--space-2) !important;margin-bottom:0 !important}
#pdf-page.ffp #create-pdf-text-opts,#pdf-page.ffp #create-pdf-blank-opts{display:flex;flex-direction:column;gap:var(--space-4)}
#pdf-page.ffp #create-pdf-text-opts.hidden,#pdf-page.ffp #create-pdf-blank-opts.hidden{display:none}

/* compression levels: 3 ff-opt style cards */
#pdf-page.ffp .compress-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
#pdf-page.ffp .compress-level-option{display:block;cursor:pointer;margin:0;min-width:0}
#pdf-page.ffp .compress-level-option input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
#pdf-page.ffp .compress-level-option .level-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:44px;height:100%;padding:var(--space-3);background:var(--bg-panel);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:none;text-align:left;transition:border-color var(--duration-fast),background var(--duration-fast)}
#pdf-page.ffp .compress-level-option .level-card i{font-size:16px;margin-bottom:var(--space-1);color:var(--text-muted)}
#pdf-page.ffp .compress-level-option .level-card strong{font-size:var(--text-sm);font-weight:600;color:var(--text-primary)}
#pdf-page.ffp .compress-level-option .level-card small{font-size:var(--text-xs);color:var(--text-secondary)}
#pdf-page.ffp .compress-level-option:hover .level-card{border-color:var(--border-strong)}
#pdf-page.ffp .compress-level-option input[type=radio]:checked + .level-card{border-color:var(--accent);background:var(--accent-soft);box-shadow:none}
#pdf-page.ffp .compress-level-option input[type=radio]:checked + .level-card i{color:var(--accent)}
#pdf-page.ffp .compress-level-option input:focus-visible + .level-card{box-shadow:0 0 0 3px var(--focus-ring)}
#pdf-page.ffp .compress-preview-hint{margin:0;min-height:0}
#pdf-page.ffp .compress-preview-hint:empty{display:none}
#pdf-page.ffp .compress-preview-hint:not(:empty){padding:var(--space-3);border-radius:var(--radius-md);background:var(--bg-subtle);border:1px solid var(--border-subtle);font:500 var(--text-xs) var(--font-mono);color:var(--text-secondary)}

/* ---------- toggle (AI layout recovery) ---------- */
#pdf-page.ffp #convert-password-area .options-panel{display:flex;flex-direction:column;gap:var(--space-2);margin:0;padding:var(--space-3);background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
#pdf-page.ffp .toggle-control{display:flex;align-items:center;gap:var(--space-3);min-height:44px;margin:0}
#pdf-page.ffp .toggle-control .control{width:40px;height:24px;background:var(--border-strong);border-radius:var(--radius-full)}
#pdf-page.ffp .toggle-control input:checked + .control{background:var(--accent)}
#pdf-page.ffp .toggle-control .label{font-size:var(--text-sm);font-weight:500;color:var(--text-primary)}
#pdf-page.ffp .toggle-control:has(input:focus-visible) .control{box-shadow:0 0 0 3px var(--focus-ring)}
#pdf-page.ffp #convert-password-area .options-panel small.helper-text{margin:0 !important;color:var(--text-secondary) !important}

/* ---------- grouped numeric fields ---------- */
#pdf-page.ffp #annotate-pdf-area > div[style*="grid"]{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:var(--space-2) !important}
#pdf-page.ffp #annotate-pdf-area > div[style*="grid"] input{padding:0 var(--space-2);text-align:center;font-family:var(--font-mono);font-size:var(--text-sm)}
#pdf-page.ffp #annotate-pdf-area p.helper-text[style]{font-size:var(--text-xs) !important;font-weight:500;color:var(--text-secondary)}

/* number-like inputs in monospace for page ranges / orders */
#pdf-page.ffp #extract-pages-input,#pdf-page.ffp #split-pdf-ranges,#pdf-page.ffp #rotate-pdf-pages,#pdf-page.ffp #organize-page-order{font-family:var(--font-mono);font-size:var(--text-sm)}

/* ---------- on-device note / buttons ---------- */
#pdf-page.ffp .password-area .secondary-btn{height:44px;padding:0 var(--space-5);border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--bg-panel);color:var(--text-primary);font:500 var(--text-sm)/1 var(--font-sans);cursor:pointer}
#pdf-page.ffp .password-area .secondary-btn:hover{border-color:var(--border-strong);background:var(--bg-subtle)}

/* ---------- progress, result, idle ---------- */
#pdf-page.ffp .status-display .loader{box-sizing:border-box}
#pdf-page.ffp .result-display .download-btn{max-width:320px}
#pdf-page.ffp .compress-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);font:500 var(--text-xs) var(--font-mono);color:var(--text-secondary)}
#pdf-page.ffp .result-display .success-icon{font-style:normal}

/* ---------- mobile ---------- */
@media (max-width:480px){
  #pdf-page.ffp .password-area{padding:16px}
  #pdf-page.ffp .compress-levels{grid-template-columns:1fr}
  #pdf-page.ffp .compress-level-option .level-card{flex-direction:row;align-items:center;gap:var(--space-3)}
  #pdf-page.ffp .compress-level-option .level-card i{margin:0}
  #pdf-page.ffp #create-pdf-area div:has(> label > input[type=radio]){grid-template-columns:1fr}
  #pdf-page.ffp #annotate-pdf-area > div[style*="grid"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #pdf-page.ffp .result-display .download-btn{max-width:none}
}