.trim-page { padding-block: 0 var(--space-7); }
.trim-workspace { height: calc(100dvh - var(--trim-header-height, 80px)); box-sizing: border-box; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 12px; padding-block: 12px; min-height: 0; }
.trim-hero { margin: 0; gap: 4px; max-width: none; }
.trim-hero .panel__eyebrow { display: none; }
.trim-hero .site-title { font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.15; margin: 0; }
.trim-hero .site-lead { font-size: .9rem; margin: 0; line-height: 1.35; }
.trim-upload { padding: 8px 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px dashed var(--color-border-strong); }
.trim-upload small, .trim-upload p, .trim-upload > span { color: var(--color-text-secondary); font-size: .8rem; }
.trim-upload p { margin: 0 0 0 auto; max-width: 340px; }
.trim-upload.is-dragging { border-color: var(--color-accent); background: var(--color-accent-soft); }
.trim-layout { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
.trim-preview { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; min-width: 0; min-height: 0; }
.trim-preview-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; }
.trim-preview { position: relative; }
.trim-progress { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; background: var(--color-surface-overlay); }
.trim-progress p { margin: 0; max-width: 320px; color: var(--color-text-secondary); font-size: .8rem; }
.trim-spinner { width: 32px; height: 32px; border: 3px solid var(--color-border-strong); border-top-color: var(--color-accent); border-radius: 50%; animation: trim-spin .8s linear infinite; }
.trim-suggestion { width: 100%; min-height: 44px; margin-top: 4px; font-size: .95rem; }
.trim-suggestion-help { margin: 0; color: var(--color-text-secondary); font-size: .75rem; line-height: 1.4; }
@keyframes trim-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .trim-spinner { animation: none; } }
.trim-tabs { display: flex; gap: 8px; }
.trim-preview-dimensions { margin: 0 0 0 auto; font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
#trim-viewer { min-width: 0; min-height: 0; width: 100%; height: 100%; overflow: hidden; position: relative; touch-action: none; }
#trim-viewer canvas { display: block; width: 100%; height: 100%; }
#trim-viewer.is-picking { cursor: crosshair; outline: 2px solid var(--color-accent); outline-offset: -2px; }
.trim-pick-guide { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-surface-overlay); }
.trim-pick-guide p { margin: 0; font-size: .75rem; line-height: 1.35; }
.trim-pick-guide .button { flex-shrink: 0; font-size: .75rem; min-height: 36px; }
#trim-empty { position: absolute; inset: 0; margin: 16px; display: grid; place-content: center; color: var(--color-text-secondary); text-align: center; }
.trim-preview-footer { padding: 6px 12px 10px; }
.trim-preview-hint { margin: 2px 0; color: var(--color-text-secondary); font-size: .75rem; line-height: 1.3; }
.trim-swatch { display: inline-block; width: 10px; height: 10px; background: #e07724; border-radius: 3px; margin-right: 6px; }
.trim-settings { padding: 14px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.trim-settings h2 { font-size: .85rem; margin: 0; }
#trim-filename { margin: 0; font-size: .7rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.trim-dimensions { font-size: 1.2rem; font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.trim-note { color: var(--color-text-secondary); font-size: .8rem; line-height: 1.4; margin: 6px 0; }
.trim-adjustments { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trim-adjustments .button { padding-inline: 6px; font-size: .8rem; min-height: 40px; }
#trim-face { grid-column: 1 / -1; border-color: var(--color-accent); color: var(--color-accent); }
#trim-face[aria-pressed="true"] { background: var(--color-accent-soft); }
.trim-size-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.trim-size-fields label { color: var(--color-text-secondary); font-size: .8rem; }
.trim-page input { width: 100%; box-sizing: border-box; margin-top: 4px; min-height: 44px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 8px; background: var(--color-surface-inset); color: var(--color-text-primary); font: inherit; }
.trim-page input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.trim-page input[aria-invalid="true"] { border-color: var(--color-danger); }
.trim-thickness-label { display: block; font-weight: 700; font-size: .9rem; }
.trim-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.trim-actions .button, #trim-face { min-height: 44px; padding: 8px; font-size: .85rem; }
#trim-download, #trim-cancel { grid-column: 1 / -1; }
.trim-actions:has(#trim-undo[hidden]) #trim-run { grid-column: 1 / -1; }
.trim-page button:disabled { opacity: .48; cursor: default; box-shadow: none; }
.trim-page [hidden] { display: none !important; }
.trim-error, #trim-status.is-error { color: var(--color-danger); }
.trim-error { font-size: .8rem; margin: 4px 0; }
#trim-status { font-size: .8rem; margin: 0; line-height: 1.35; overflow-wrap: anywhere; }
#trim-result-size { margin: 0; }
.trim-options-dialog { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); color: var(--color-text-primary); padding: 20px; }
.trim-options-dialog::backdrop { background: rgba(0,0,0,.45); }
.trim-options-dialog h2 { font-size: 1.1rem; margin: 0 0 12px; }
.trim-options-dialog > .button { width: 100%; margin-top: 12px; }
.trim-explainer { padding: 24px; margin-top: 24px; line-height: 1.65; }
.trim-explainer h2 { font-size: 1.1rem; }
.trim-explainer h3 { font-size: 1rem; margin-top: 20px; }
@media (max-width: 1100px) {
  .content-page:has(.trim-page) .workflow-header__masthead { flex-direction: row; align-items: center; gap: 8px; }
  .content-page:has(.trim-page) .workflow-header__toolbar { flex-wrap: nowrap; gap: 8px; }
  .content-page:has(.trim-page) .workflow-header__textlink,
  .content-page:has(.trim-page) .workflow-header__cta,
  .content-page:has(.trim-page) .workflow-brand__tagline { display: none; }
  .trim-upload p { display: none; }
}
@media (max-width: 800px) {
  .trim-page.is-picking .trim-cut-field,
  .trim-page.is-picking .trim-actions,
  .trim-page.is-picking #trim-result-size,
  .trim-page.is-picking #trim-status { display: none; }
  .trim-pick-guide { top: 4px; left: 4px; right: 4px; padding: 6px; gap: 6px; }
  .trim-pick-guide p { font-size: .7rem; }
  .trim-progress { gap: 8px; padding: 8px; }
  .trim-progress p { display: none; }
  .trim-spinner { width: 24px; height: 24px; }
  .trim-workspace { padding-block: 8px; gap: 8px; }
  .trim-hero .site-title { font-size: 1.2rem; }
  .trim-hero .site-lead, .trim-upload > span, .trim-upload small { display: none; }
  .trim-upload { padding: 4px 8px; }
  .trim-upload .button { min-height: 36px; font-size: .85rem; }
  .trim-layout { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(100px,1fr) auto; gap: 8px; }
  .trim-preview-header { padding: 6px 8px; gap: 4px; }
  .trim-preview-dimensions { font-size: .75rem; }
  .trim-tabs .button { min-height: 32px; padding-inline: 8px; font-size: .75rem; }
  .trim-preview-footer { padding: 4px 8px; }
  .trim-preview-hint { font-size: .65rem; }
  .trim-settings { padding: 10px; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "file file" "preparation preparation" "options options" "cut actions" "result result" "status status"; gap: 6px 10px; }
  .trim-settings > h2, .trim-settings > .trim-dimensions { display: none; }
  #trim-filename { grid-area: file; }
  #trim-preparation-note { grid-area: preparation; font-size: .7rem; margin: 0; }
  .trim-adjustments { grid-area: options; }
  .trim-cut-field { grid-area: cut; }
  .trim-thickness-label { font-size: .8rem; }
  .trim-cut-field .trim-note { font-size: .7rem; }
  .trim-actions { grid-area: actions; display: flex; flex-direction: column; margin: 0; }
  .trim-actions .button { min-height: 40px; padding: 6px; font-size: .75rem; }
  #trim-status { grid-area: status; font-size: .7rem; }
  #trim-result-size { grid-area: result; font-size: .7rem; }
  .trim-explainer { padding: 16px; }
}
@media (max-height: 740px) and (min-width: 801px) {
  .trim-workspace { gap: 8px; padding-block: 8px; }
  .trim-hero .site-lead, .trim-upload p { display: none; }
  .trim-settings { padding: 10px; gap: 6px; }
}

/* One primary action; geometry controls live in the manual disclosure. */
.trim-settings { overflow-y: auto; }
.trim-settings .trim-simple-title { font-size: 1.2rem; }
#trim-preparation-note { display: none; }
.trim-base-maps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trim-base-maps figure { margin: 0; min-width: 0; }
.trim-base-maps figcaption { font-size: .8rem; margin-bottom: 6px; font-weight: 600; }
.trim-base-maps canvas { display: block; width: 100%; border-radius: var(--radius-sm); }
.trim-cut-summary { font-size: 1.05rem; font-weight: 600; margin: 4px 0; }
#trim-manual summary { cursor: pointer; padding: 10px 0; min-height: 44px; box-sizing: border-box; }
#trim-manual[open] { display: grid; gap: 10px; }
.trim-actions { display: flex; flex-direction: column; }
@media (max-width: 800px) {
  .trim-settings { display: flex; }
  .trim-workspace { height: auto; min-height: calc(100dvh - var(--trim-header-height,80px)); }
  .trim-layout { grid-template-rows: 280px auto; }
}

.trim-preview { grid-template-rows: auto auto minmax(0,1fr) auto; }
.trim-map-panel { padding: 0 14px; }
.trim-map-panel:has(#trim-base-maps[hidden]):has(#trim-map-note:empty) { display: none; }
.trim-base-maps canvas { max-height: 180px; object-fit: contain; background: #c7d2db; }
@media (max-width: 800px) { .trim-layout { grid-template-rows: 460px auto; } }

/* Contact maps belong to the preview, aligned as a single compact overlay. */
.trim-preview { grid-template-rows: auto minmax(0,1fr) auto; }
.trim-map-panel { position: absolute; top: 54px; right: 12px; z-index: 1; width: min(340px,calc(100% - 24px)); padding: 10px; box-sizing: border-box; border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); background: var(--color-surface-overlay); }
.trim-map-panel .trim-base-maps { align-items: start; gap: 8px; }
.trim-map-panel figcaption { min-height: 2.8em; display: flex; align-items: flex-end; line-height: 1.3; margin-bottom: 6px; }
.trim-map-panel canvas { width: 100%; height: auto; aspect-ratio: 1.3; }
.trim-map-panel .trim-note { font-size: .7rem; margin-bottom: 0; }
.trim-page.is-picking .trim-map-panel { display: none; }
@media(max-width:800px) { .trim-map-panel { width: min(260px,calc(100% - 24px)); top: 44px; } }

.trim-large-cut-warning {
  padding: 14px;
  border: 1px solid var(--color-warning, #d9a441);
  border-radius: var(--radius-md, 12px);
  background: rgba(217, 164, 65, .10);
}
.trim-large-cut-warning[hidden] { display: none; }
.trim-large-cut-warning p { margin: 8px 0 12px; }
.trim-large-cut-warning label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.trim-large-cut-warning input { width: 20px; height: 20px; flex-shrink: 0; }