/* Sequence Checker + Sequence Shifter — fully scoped desktop utility UI. */ :is(#page-sequence-checker, #page-sequence-shifter) { --sequence-accent: #3b82f6; --sequence-accent-strong: #2563eb; --sequence-success: #34d399; --sequence-warm: #f59e0b; --sequence-danger: #fb7185; --sequence-surface: rgba(15, 23, 42, .8); --sequence-surface-strong: rgba(15, 23, 42, .96); --sequence-border: rgba(148, 163, 184, .16); height: 100%; min-height: 0; overflow: hidden; color: var(--text-primary); } #page-sequence-checker { --sequence-accent: #14b8a6; --sequence-accent-strong: #0f766e; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-shell { position: relative; height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px; padding: 20px; box-sizing: border-box; background: radial-gradient(circle at 7% 0%, color-mix(in srgb, var(--sequence-accent) 10%, transparent), transparent 30%), radial-gradient(circle at 96% 100%, rgba(59, 130, 246, .07), transparent 34%); } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-hero, .sequence-modal .sequence-dialog-header, .sequence-modal .sequence-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-hero { padding: 16px 18px; border: 1px solid var(--sequence-border); border-radius: 16px; background: linear-gradient(115deg, color-mix(in srgb, var(--sequence-accent) 9%, transparent), rgba(15, 23, 42, .62) 40%, rgba(15, 23, 42, .88)); box-shadow: 0 12px 32px rgba(2, 6, 23, .16); } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-heading, .sequence-modal .sequence-heading { min-width: 0; display: flex; align-items: center; gap: 14px; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-mark, .sequence-modal .sequence-mark { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; color: #93c5fd; border: 1px solid rgba(96, 165, 250, .3); border-radius: 14px; background: linear-gradient(145deg, rgba(59, 130, 246, .2), rgba(37, 99, 235, .06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); } #page-sequence-checker .checker-mark, #sc-action-modal .checker-mark { color: #5eead4; border-color: rgba(45, 212, 191, .28); background: linear-gradient(145deg, rgba(20, 184, 166, .2), rgba(13, 148, 136, .06)); } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-mark svg, .sequence-modal .sequence-mark svg { width: 25px; height: 25px; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-eyebrow, .sequence-modal .sequence-eyebrow { margin: 0 0 2px; color: var(--sequence-accent, #3b82f6); font-size: 10px; font-weight: 800; letter-spacing: 1.7px; text-transform: uppercase; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-heading h1 { margin: 0; color: var(--text-primary); font-size: 22px; line-height: 1.2; letter-spacing: -.4px; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-heading p:last-child, .sequence-modal .sequence-heading p:last-child, .sequence-modal .sequence-dialog-header > div > p:last-child { margin: 4px 0 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.45; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-hero-actions { display: flex; align-items: center; gap: 8px; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-status { min-height: 32px; display: inline-flex; align-items: center; padding: 0 12px; color: #a7f3d0; border: 1px solid rgba(52, 211, 153, .28); border-radius: 999px; background: rgba(16, 185, 129, .1); font-size: 11px; font-weight: 750; white-space: nowrap; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-status::before { width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--sequence-success); box-shadow: 0 0 0 3px rgba(52, 211, 153, .11); content: ''; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-status.inactive { color: var(--text-muted); border-color: var(--sequence-border); background: rgba(148, 163, 184, .05); } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-status.inactive::before { background: #64748b; box-shadow: none; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-button, .sequence-modal .sequence-button, :is(#page-sequence-checker, #page-sequence-shifter) .sequence-icon-button, .sequence-modal .sequence-icon-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; color: var(--text-primary); border: 1px solid var(--sequence-border, rgba(148, 163, 184, .16)); border-radius: 10px; background: rgba(255, 255, 255, .045); font: 700 12px/1 var(--font-sans); white-space: nowrap; cursor: pointer; touch-action: manipulation; transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, color 150ms ease, opacity 150ms ease; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-button svg, .sequence-modal .sequence-button svg { width: 17px; height: 17px; flex: 0 0 17px; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-icon-button, .sequence-modal .sequence-icon-button { width: 40px; min-width: 40px; padding: 0; color: var(--text-secondary); } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-icon-button svg, .sequence-modal .sequence-icon-button svg { width: 18px; height: 18px; } :is(#page-sequence-checker, #page-sequence-shifter) :is(.sequence-button, .sequence-icon-button):not(:disabled):hover, .sequence-modal :is(.sequence-button, .sequence-icon-button):not(:disabled):hover { border-color: color-mix(in srgb, var(--sequence-accent, #3b82f6) 48%, transparent); background: color-mix(in srgb, var(--sequence-accent, #3b82f6) 11%, transparent); transform: translateY(-1px); } :is(#page-sequence-checker, #page-sequence-shifter) :is(.sequence-button, .sequence-icon-button):not(:disabled):active, .sequence-modal :is(.sequence-button, .sequence-icon-button):not(:disabled):active { transform: scale(.97); } :is(#page-sequence-checker, #page-sequence-shifter) :is(.sequence-button, .sequence-icon-button, .sequence-input):focus-visible, .sequence-modal :is(.sequence-button, .sequence-icon-button, .sequence-input, input[type="radio"]):focus-visible { outline: 2px solid color-mix(in srgb, var(--sequence-accent, #3b82f6) 82%, white); outline-offset: 2px; } :is(#page-sequence-checker, #page-sequence-shifter) :is(.sequence-button, .sequence-icon-button):disabled, .sequence-modal :is(.sequence-button, .sequence-icon-button):disabled { opacity: .42 !important; cursor: not-allowed !important; transform: none; box-shadow: none; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-button-primary, .sequence-modal .sequence-button-primary { color: #eff6ff; border-color: rgba(96, 165, 250, .42); background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 8px 18px rgba(37, 99, 235, .16); } #page-sequence-checker .sequence-button-primary, #sc-action-modal .sequence-button-primary { color: #f0fdfa; border-color: rgba(45, 212, 191, .38); background: linear-gradient(135deg, #0d9488, #0f766e); box-shadow: 0 8px 18px rgba(13, 148, 136, .14); } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-button-success { color: #ecfdf5; border-color: rgba(52, 211, 153, .4); background: linear-gradient(135deg, #059669, #0d9488); box-shadow: 0 9px 22px rgba(5, 150, 105, .16); } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-button-warm { color: #fde68a; border-color: rgba(245, 158, 11, .34); background: rgba(245, 158, 11, .1); } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-button-danger { color: #fecdd3; border-color: rgba(251, 113, 133, .34); background: rgba(244, 63, 94, .1); } .sequence-modal .sequence-button-danger { color: #fff1f2; border-color: rgba(251, 113, 133, .44); background: linear-gradient(135deg, #e11d48, #be123c); box-shadow: 0 8px 18px rgba(225, 29, 72, .16); } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-danger { color: #fda4af; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-button-compact { min-height: 30px; padding: 0 10px; font-size: 10.5px; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-full-button { width: 100%; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-card { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--sequence-border); border-radius: 16px; background: linear-gradient(180deg, rgba(30, 41, 59, .77), var(--sequence-surface)); box-shadow: 0 16px 38px rgba(2, 6, 23, .18); } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-card-header, :is(#page-sequence-checker, #page-sequence-shifter) .sequence-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-card-header { border-bottom: 1px solid var(--sequence-border); } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-card-header > div:first-child { min-width: 0; display: flex; align-items: center; gap: 10px; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-card-header h2, :is(#page-sequence-checker, #page-sequence-shifter) .sequence-subsection h3, :is(#page-sequence-checker, #page-sequence-shifter) .sequence-resolution-panel h3, :is(#page-sequence-checker, #page-sequence-shifter) .sequence-history-bar h3 { margin: 0; color: var(--text-primary); font-size: 14px; line-height: 1.25; } :is(#page-sequence-checker, #page-sequence-shifter) :is(.sequence-card-header, .sequence-subsection, .sequence-resolution-panel, .sequence-history-bar) p { margin: 3px 0 0; color: var(--text-muted); font-size: 10.5px; line-height: 1.45; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-step { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; color: #93c5fd; border: 1px solid rgba(96, 165, 250, .26); border-radius: 8px; background: rgba(59, 130, 246, .08); font-size: 9px; font-weight: 850; } #page-sequence-checker .sequence-step { color: #5eead4; border-color: rgba(45, 212, 191, .25); background: rgba(20, 184, 166, .08); } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-step-danger { color: #fda4af; border-color: rgba(251, 113, 133, .28); background: rgba(244, 63, 94, .09); } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-step-warm { color: #fde68a; border-color: rgba(245, 158, 11, .28); background: rgba(245, 158, 11, .09); } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-step-success { color: #a7f3d0; border-color: rgba(52, 211, 153, .28); background: rgba(16, 185, 129, .09); } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-card-body { padding: 16px; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-field { min-width: 0; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-field > label, .sequence-modal .sequence-field > label { display: flex; align-items: center; gap: 5px; margin: 0 0 7px; color: var(--text-secondary); font-size: 11px; font-weight: 750; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-input, .sequence-modal .sequence-input { width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 12px; color: var(--text-primary); border: 1px solid var(--sequence-border, rgba(148, 163, 184, .16)); border-radius: 10px; outline: 0; background: rgba(2, 6, 23, .32); font: 12.5px var(--font-sans); } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-input[readonly] { color: var(--text-secondary); background: rgba(2, 6, 23, .2); } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-input::placeholder, .sequence-modal .sequence-input::placeholder { color: var(--text-muted); } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-input-action, .sequence-modal .sequence-input-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-helper { margin: 6px 0 0; color: var(--text-muted); font-size: 10px; line-height: 1.4; } #page-sequence-checker .sequence-checker-workspace { min-height: 0; display: grid; grid-template-columns: minmax(330px, .72fr) minmax(560px, 1.55fr); gap: 14px; } #page-sequence-checker .sequence-setup-card { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; } #page-sequence-checker .sequence-setup-body { display: flex; flex-direction: column; gap: 15px; overflow: auto; } #page-sequence-checker .sequence-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: auto 0 0; } #page-sequence-checker .sequence-stat-grid > div { padding: 11px 12px; border: 1px solid var(--sequence-border); border-radius: 11px; background: rgba(2, 6, 23, .2); } #page-sequence-checker .sequence-stat-grid dt { color: var(--text-muted); font-size: 10px; } #page-sequence-checker .sequence-stat-grid dd { margin: 4px 0 0; color: var(--text-primary); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } #page-sequence-checker .sequence-resolution-panel { padding: 14px 16px 16px; border-top: 1px solid var(--sequence-border); background: rgba(2, 6, 23, .18); } #page-sequence-checker .sequence-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 8px; } #page-sequence-checker .sequence-results-grid { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(190px, .4fr) minmax(330px, 1fr); gap: 14px; } #page-sequence-checker .sequence-result-card { display: grid; grid-template-rows: auto minmax(0, 1fr); } #page-sequence-checker .sequence-duplicates-card { grid-template-rows: auto auto minmax(0, 1fr); } #page-sequence-checker .sequence-missing-card { border-color: rgba(251, 113, 133, .15); } #page-sequence-checker .sequence-duplicates-card { border-color: rgba(245, 158, 11, .16); } #page-sequence-checker .sequence-result-body { min-height: 0; overflow: auto; padding: 16px; color: var(--text-secondary); background: rgba(2, 6, 23, .16); } #page-sequence-checker .sequence-duplicate-header { align-items: flex-start; } #page-sequence-checker .sequence-selection-actions { display: flex; align-items: center; gap: 7px; } #page-sequence-checker .sequence-duplicate-numbers { min-height: 0; padding: 0 16px; color: #fde68a; font-size: 12px; font-weight: 750; } #page-sequence-checker .sequence-duplicate-numbers:not(:empty) { padding-top: 12px; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-empty-state { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 24px; box-sizing: border-box; text-align: center; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-empty-state svg { width: 34px; height: 34px; margin-bottom: 3px; color: var(--text-muted); opacity: .65; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-empty-state strong { color: var(--text-secondary); font-size: 13px; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-empty-state span { max-width: 360px; color: var(--text-muted); font-size: 11px; line-height: 1.5; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-empty-state.is-success svg, :is(#page-sequence-checker, #page-sequence-shifter) .sequence-empty-state.is-success strong { color: #6ee7b7; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-empty-state.is-error svg, :is(#page-sequence-checker, #page-sequence-shifter) .sequence-empty-state.is-error strong { color: #fda4af; } #page-sequence-checker .sequence-loading { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 100%; color: var(--text-muted); font-size: 12px; } #page-sequence-checker .sequence-loading span { width: 18px; height: 18px; border: 2px solid rgba(148, 163, 184, .2); border-top-color: var(--sequence-accent); border-radius: 50%; animation: spin .7s linear infinite; } #page-sequence-shifter .sequence-shifter-workspace { min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(390px, .84fr) minmax(560px, 1.35fr); gap: 14px; } #page-sequence-shifter .sequence-shift-settings { align-self: start; display: grid; grid-template-rows: auto auto auto; } #page-sequence-shifter .sequence-settings-body { min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; } #page-sequence-shifter .sequence-plan-status, #page-sequence-shifter .sequence-count { padding: 5px 8px; color: var(--text-muted); border-radius: 7px; background: rgba(148, 163, 184, .06); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } #page-sequence-shifter .sequence-subsection { padding: 13px; border: 1px solid var(--sequence-border); border-radius: 12px; background: rgba(2, 6, 23, .18); } #page-sequence-shifter .sequence-subsection-heading { margin-bottom: 12px; } #page-sequence-shifter .sequence-range-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; } #page-sequence-shifter .sequence-card-footer { min-height: 66px; border-top: 1px solid var(--sequence-border); background: rgba(2, 6, 23, .18); } #page-sequence-shifter .sequence-card-footer > p { margin: 0; color: var(--text-muted); font-size: 10.5px; } #page-sequence-shifter .sequence-card-footer > div { display: flex; align-items: center; gap: 8px; } #page-sequence-shifter .sequence-preview-card { height: 100%; display: grid; grid-template-areas: "header" "conflict" "preview" "summary" "history"; grid-template-rows: auto auto minmax(0, 1fr) auto auto; } #page-sequence-shifter .sequence-preview-card > .sequence-card-header { grid-area: header; } #page-sequence-shifter .sequence-preview-card > .sequence-conflict-alert { grid-area: conflict; } #page-sequence-shifter .sequence-preview-card > .sequence-preview-body { grid-area: preview; } #page-sequence-shifter .sequence-preview-card > .sequence-summary-grid { grid-area: summary; } #page-sequence-shifter .sequence-preview-card > .sequence-history-bar { grid-area: history; } #page-sequence-shifter .sequence-preview-body { min-height: 0; overflow: auto; padding: 16px; color: var(--text-secondary); background: rgba(2, 6, 23, .19); font: 12px/1.75 var(--font-mono, monospace); } #page-sequence-shifter .sequence-preview-row { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); gap: 9px; align-items: center; padding: 7px 9px; border-bottom: 1px solid rgba(148, 163, 184, .08); border-radius: 8px; } #page-sequence-shifter .sequence-preview-row:hover { background: rgba(59, 130, 246, .055); } #page-sequence-shifter .sequence-preview-row > span { min-width: 0; overflow: hidden; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; } #page-sequence-shifter .sequence-preview-row svg { width: 15px; height: 15px; color: var(--text-muted); } #page-sequence-shifter .sequence-preview-row strong { min-width: 0; overflow-wrap: anywhere; font-weight: 750; } #page-sequence-shifter .sequence-preview-row strong.is-ready { color: #6ee7b7; } #page-sequence-shifter .sequence-preview-row strong.is-error { color: #fda4af; } #page-sequence-shifter .sequence-preview-more { margin-top: 8px; color: var(--text-muted); font-size: 10.5px; } #page-sequence-shifter .sequence-conflict-alert { display: none; margin: 12px 16px 0; padding: 10px 12px; color: #fecdd3; border: 1px solid rgba(251, 113, 133, .35); border-radius: 10px; background: rgba(244, 63, 94, .09); font-size: 11px; font-weight: 750; } #page-sequence-shifter .sequence-summary-grid { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); grid-auto-rows: 52px; align-content: start; gap: 1px; margin: 0; border-top: 1px solid var(--sequence-border); background: var(--sequence-border); } #page-sequence-shifter .sequence-summary-grid > div { min-width: 0; padding: 7px 9px; background: var(--sequence-surface-strong); } #page-sequence-shifter .sequence-summary-grid dt { color: var(--text-muted); font-size: 9.5px; } #page-sequence-shifter .sequence-summary-grid dd { margin: 3px 0 0; color: var(--text-primary); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; } #page-sequence-shifter .sequence-summary-grid dd.is-danger { color: #fda4af; } #page-sequence-shifter .sequence-summary-grid > div:last-child { grid-column: auto; } #page-sequence-shifter .sequence-history-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--sequence-border); background: rgba(2, 6, 23, .18); } #page-sequence-shifter .sequence-history-actions { display: flex; align-items: center; gap: 8px; } #page-sequence-checker .sequence-drop-overlay { display: none; position: absolute; inset: 10px; z-index: 120; flex-direction: column; align-items: center; justify-content: center; color: var(--text-primary); border: 2px dashed rgba(45, 212, 191, .72); border-radius: 18px; background: rgba(2, 6, 23, .9); backdrop-filter: blur(12px); } #page-sequence-checker .sequence-drop-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 12px; color: #5eead4; border: 1px solid rgba(45, 212, 191, .3); border-radius: 18px; background: rgba(20, 184, 166, .12); } #page-sequence-checker .sequence-drop-icon svg { width: 30px; height: 30px; } #page-sequence-checker .sequence-drop-overlay h2 { margin: 0; font-size: 20px; } #page-sequence-checker .sequence-drop-overlay p { margin: 7px 0 0; color: var(--text-secondary); font-size: 12px; } /* Dynamic duplicate rows generated by media-checker-ui.js. */ #page-sequence-checker .sequence-duplicate-group { margin-bottom: 10px; overflow: hidden; border: 1px solid var(--sequence-border); border-radius: 12px; background: rgba(15, 23, 42, .48); } #page-sequence-checker .sequence-duplicate-group:last-child { margin-bottom: 0; } #page-sequence-checker .sequence-duplicate-group-title { display: flex; align-items: center; gap: 9px; padding: 10px 12px; color: var(--text-primary); border-bottom: 1px solid var(--sequence-border); font-size: 12px; font-weight: 800; } #page-sequence-checker .sequence-duplicate-group-title input { width: 17px; height: 17px; accent-color: var(--sequence-accent); } #page-sequence-checker .sequence-file-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 7px; align-items: center; padding: 8px 10px; border-top: 1px solid rgba(255, 255, 255, .045); } #page-sequence-checker .sequence-file-row:first-of-type { border-top: 0; } #page-sequence-checker .sequence-file-name { min-width: 0; overflow: hidden; color: var(--text-primary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } #page-sequence-checker .sequence-file-name small { color: var(--text-muted); font-size: 9.5px; } #page-sequence-checker .sequence-file-kind { display: inline-grid; min-width: 30px; margin-right: 7px; padding: 3px 5px; place-items: center; color: #93c5fd; border-radius: 5px; background: rgba(59, 130, 246, .1); font-size: 8px; font-weight: 850; letter-spacing: .4px; } #page-sequence-checker .sequence-row-button { min-height: 30px; padding: 0 9px; font-size: 10px; } #page-sequence-checker .sequence-row-button.sequence-icon-button { width: 30px; min-width: 30px; } /* Dialogs */ .sequence-modal { --sequence-accent: #3b82f6; --sequence-border: rgba(148, 163, 184, .17); z-index: 10300; background: rgba(2, 6, 23, .7); backdrop-filter: blur(9px); } #sc-action-modal, #sc-numbers-modal { --sequence-accent: #14b8a6; } .sequence-modal .sequence-dialog { width: min(620px, calc(100vw - 48px)); max-width: 620px; padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--sequence-accent) 20%, transparent); border-radius: 18px; background: #0f172a; box-shadow: 0 32px 90px rgba(2, 6, 23, .72), 0 0 0 1px rgba(255, 255, 255, .025); } .sequence-modal .sequence-action-dialog { max-width: 560px; } .sequence-modal .sequence-numbers-dialog { max-width: 900px; } .sequence-modal .sequence-session-dialog { max-width: 760px; } .sequence-modal .sequence-dialog-header { padding: 18px 22px; border-bottom: 1px solid var(--sequence-border); background: linear-gradient(110deg, color-mix(in srgb, var(--sequence-accent) 9%, transparent), rgba(15, 23, 42, .96) 45%); } .sequence-modal .sequence-dialog-header h2 { margin: 0; color: var(--text-primary); font-size: 18px; line-height: 1.25; } .sequence-modal .sequence-dialog-title-row { display: flex; align-items: center; gap: 6px; } .sequence-modal .sequence-dialog-body { display: flex; flex-direction: column; gap: 16px; max-height: min(62vh, 540px); padding: 18px 22px; overflow: auto; } .sequence-modal .sequence-warning { display: none; padding: 10px 12px; color: #fecdd3; border: 1px solid rgba(251, 113, 133, .34); border-radius: 10px; background: rgba(244, 63, 94, .09); font-size: 11px; font-weight: 750; line-height: 1.5; } .sequence-modal .sequence-choice-group { margin: 0; padding: 14px; border: 1px solid var(--sequence-border); border-radius: 12px; background: rgba(30, 41, 59, .48); } .sequence-modal .sequence-choice-group legend { padding: 0 5px; color: var(--text-primary); font-size: 12px; font-weight: 800; } .sequence-modal .sequence-choice-group > p { margin: 0 0 10px; color: var(--text-muted); font-size: 10px; } .sequence-modal .sequence-choice-group label { display: flex; align-items: center; gap: 9px; min-height: 34px; color: var(--text-secondary); font-size: 11.5px; cursor: pointer; } .sequence-modal .sequence-choice-group input { width: 17px; height: 17px; accent-color: var(--sequence-accent); } .sequence-modal .sequence-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; } .sequence-modal .sequence-dialog-footer { padding: 14px 22px; border-top: 1px solid var(--sequence-border); background: rgba(2, 6, 23, .2); } .sequence-modal .sequence-dialog-footer .sequence-button:last-child { min-width: 132px; } .sequence-modal .sequence-numbers-body { max-height: min(66vh, 580px); margin: 18px 22px; overflow: auto; padding: 16px; color: var(--text-primary); border: 1px solid var(--sequence-border); border-radius: 12px; background: rgba(2, 6, 23, .25); font: 750 13px/1.85 var(--font-mono, monospace); word-break: break-word; } .sequence-modal .sequence-session-table-wrap { max-height: 420px; margin: 18px 22px; overflow: auto; border: 1px solid var(--sequence-border); border-radius: 12px; } .sequence-modal .sequence-session-table { width: 100%; border-collapse: collapse; font-size: 11px; } .sequence-modal .sequence-session-table thead { position: sticky; top: 0; background: #16213b; } .sequence-modal .sequence-session-table th { padding: 11px 12px; color: var(--text-secondary); text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; } .sequence-modal .sequence-session-table th:nth-child(2) { text-align: center; } .sequence-modal .sequence-session-table td { padding: 10px 12px; color: var(--text-secondary); } .sequence-modal .sequence-session-name strong { display: block; color: var(--text-primary); font: 700 11px var(--font-mono, monospace); } .sequence-modal .sequence-session-name small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 9.5px; overflow-wrap: anywhere; } .sequence-modal .sequence-session-rows { color: var(--text-primary); text-align: center; font-weight: 750; } .sequence-modal .sequence-session-status { display: inline-flex; padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; } .sequence-modal .sequence-session-status.is-active { color: #047857; background: rgba(52, 211, 153, .14); } .sequence-modal .sequence-session-status.is-undone { color: #b45309; background: rgba(245, 158, 11, .14); } .sequence-modal .ss-session-row { border-top: 1px solid rgba(255, 255, 255, .055); cursor: pointer; transition: background-color 150ms ease; } .sequence-modal .ss-session-row:hover { background: rgba(59, 130, 246, .08); } body[data-theme="soft-light"] :is(#page-sequence-checker, #page-sequence-shifter) { --sequence-surface: rgba(255, 255, 255, .92); --sequence-surface-strong: #fff; --sequence-border: rgba(30, 64, 175, .13); } body[data-theme="soft-light"] :is(#page-sequence-checker, #page-sequence-shifter) .sequence-shell { background: radial-gradient(circle at 5% 0%, color-mix(in srgb, var(--sequence-accent) 9%, transparent), transparent 30%); } body[data-theme="soft-light"] :is(#page-sequence-checker, #page-sequence-shifter) :is(.sequence-hero, .sequence-card) { background: rgba(255, 255, 255, .86); box-shadow: 0 12px 32px rgba(15, 23, 42, .06); } body[data-theme="soft-light"] :is(#page-sequence-checker, #page-sequence-shifter) :is(.sequence-input, .sequence-result-body, .sequence-preview-body, .sequence-subsection) { color: #0f172a; background: rgba(239, 246, 255, .6); } body[data-theme="soft-light"] #page-sequence-checker .sequence-stat-grid > div { background: rgba(255, 255, 255, .88); } body[data-theme="soft-light"] :is(#page-sequence-checker, #page-sequence-shifter) :is(.sequence-resolution-panel, .sequence-card-footer, .sequence-history-bar) { background: rgba(248, 250, 252, .9); } body[data-theme="soft-light"] .sequence-modal .sequence-dialog { background: #f8fafc; } body[data-theme="soft-light"] .sequence-modal .sequence-dialog-header { background: linear-gradient(110deg, color-mix(in srgb, var(--sequence-accent) 8%, white), #f8fafc 48%); } body[data-theme="soft-light"] .sequence-modal :is(.sequence-choice-group, .sequence-numbers-body) { color: #0f172a; background: rgba(255, 255, 255, .84); } body[data-theme="soft-light"] .sequence-modal .sequence-dialog-footer { background: #f8fafc; } body[data-theme="soft-light"] .sequence-modal .sequence-session-table thead { background: #eaf1ff; } @media (max-width: 1120px) { :is(#page-sequence-checker, #page-sequence-shifter) { overflow: auto; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-shell { height: auto; min-height: 100%; } #page-sequence-checker .sequence-checker-workspace, #page-sequence-shifter .sequence-shifter-workspace { overflow: visible; grid-template-columns: 1fr; } #page-sequence-checker .sequence-results-grid { min-height: 650px; } #page-sequence-shifter .sequence-shift-settings { min-height: 620px; } #page-sequence-shifter .sequence-preview-card { min-height: 650px; } #page-sequence-shifter .sequence-settings-body { overflow: auto; } #page-sequence-shifter .sequence-summary-grid { grid-template-columns: repeat(6, minmax(70px, 1fr)); } } @media (max-width: 760px) { :is(#page-sequence-checker, #page-sequence-shifter) .sequence-shell { padding: 12px; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-hero { align-items: flex-start; flex-wrap: wrap; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-hero-actions { width: 100%; flex-wrap: wrap; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-status { order: -1; } :is(#page-sequence-checker, #page-sequence-shifter) .sequence-field-grid, #page-sequence-checker .sequence-action-grid, .sequence-modal .sequence-choice-grid { grid-template-columns: 1fr; } #page-sequence-shifter .sequence-summary-grid { grid-template-columns: repeat(3, minmax(70px, 1fr)); } #page-sequence-shifter .sequence-card-footer, #page-sequence-shifter .sequence-history-bar { align-items: stretch; flex-direction: column; } #page-sequence-shifter .sequence-card-footer > div, #page-sequence-shifter .sequence-history-actions { justify-content: flex-end; flex-wrap: wrap; } #page-sequence-checker .sequence-duplicate-header { flex-direction: column; } .sequence-modal .sequence-dialog { width: calc(100vw - 20px); } .sequence-modal .sequence-dialog-header, .sequence-modal .sequence-dialog-footer { padding: 14px; } .sequence-modal .sequence-dialog-body { padding: 14px; } } @media (prefers-reduced-motion: reduce) { :is(#page-sequence-checker, #page-sequence-shifter) *, .sequence-modal * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }