/* Keep all six section tabs reachable in short viewer/phone windows. */
#tabs { overflow-y:auto; overscroll-behavior:contain; }
#tabs .tab { flex-shrink:0; }
#ppfPage { font-size:14px; line-height:1.45; }
#ppfPage h2 { font-size:17px; margin:14px 0 8px; }
#ppfPage p { margin:8px 0 12px; color:#c3ced8; }
#ppfPage .ppfHelp { border:1px solid #665932; background:#282519; border-radius:8px; padding:0 12px; }
#ppfPage summary { cursor:pointer; padding:13px 0; color:#f1d78a; font-weight:700; }
#ppfPage .ppfHelp p { font-size:13px; color:#e3dac1; }
#ppfPage label { display:block; margin-top:14px; font-size:14px; }
#ppfPage output { float:right; color:#8cdfff; }
#ppfPage input[type="range"] { width:100%; min-height:36px; margin:0; accent-color:#63caff; }
#ppfPage input[type="color"] { width:100%; height:44px; padding:4px; margin:5px 0 12px; }
#ppfPage .ppfPanels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#ppfPage button { min-width:0; min-height:44px; font-size:14px; line-height:1.3; padding:10px 8px; white-space:normal; cursor:pointer; }
#ppfPage .ppfPanelButton { text-align:left; background:#1b2733; border:1px solid #4e6072; border-radius:7px; color:#eef4f8; }
#ppfPage .ppfPanelButton[aria-pressed="true"] { background:#16425b; border:2px solid #71d7ff; padding:9px 7px; color:#dcf7ff; }
#ppfPage .ppfPanelButton[aria-pressed="true"]::before { content:'✓ '; }
#ppfPage button:focus-visible, #ppfPage summary:focus-visible, #ppfPage input:focus-visible { outline:2px solid #bceaff; outline-offset:3px; }
#ppfPage button:disabled { cursor:default; opacity:.45; }
#ppfPage .ppfActions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
#ppfPage #ppfAll { width:100%; margin-top:10px; }
#ppfPage #ppfAvailability { font-size:12px; }
#ppfPage #ppfSummary { font-size:13px; color:#9adfff; }

/* Phase 1 color PPF catalog */
#ppfPage select { width:100%; min-height:42px; margin:5px 0 8px; padding:8px 10px; border:1px solid #4e6072; border-radius:7px; background:#121b24; color:#eef4f8; }
#ppfPage .ppfModeButtons { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0 10px; }
#ppfPage .ppfModeButtons button { border:1px solid #4e6072; border-radius:7px; background:#18232e; color:#d8e5ee; }
#ppfPage .ppfModeButtons button[aria-pressed="true"] { border:2px solid #70d8ff; padding:9px 7px; background:#153c52; color:#e6f9ff; }
#ppfPage .ppfModeNote, #ppfPage .ppfScreenNote { font-size:12px; color:#9fb0bd; }
#ppfPage .ppfCatalogHeader { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:12px 0 2px; color:#eef8ff; }
#ppfPage .ppfCatalogHeader small { color:#8aa0af; font-size:11px; }
#ppfPage .ppfFilmSwatches { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:6px; }
#ppfPage .ppfFilmButton { position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); grid-template-rows:auto auto; column-gap:8px; align-items:center; text-align:left; border:1px solid #4e6072; border-radius:8px; background:#17222d; color:#eef4f8; }
#ppfPage .ppfFilmButton[aria-pressed="true"] { border:2px solid #76ddff; padding:9px 7px; background:#17384a; }
#ppfPage .ppfFilmChip { grid-row:1 / span 2; width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.35); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); }
#ppfPage .ppfFilmName { font-size:12px; font-weight:700; line-height:1.15; }
#ppfPage .ppfFilmFinish { font-size:10px; color:#9fb0bd; line-height:1.1; margin-top:2px; }
#ppfPage .ppfFilmMeta { margin-top:9px; padding:9px 10px; border:1px solid #344858; border-radius:7px; background:#101923; color:#d9e8f2; font-size:12px; }
#ppfPage .ppfFilmMeta strong { color:#8de4ff; }

#ppfPage .ppfEffectNote{color:#ffd36c;font-size:11px;}
#ppfPage .ppfFilmSwatches{max-height:430px;overflow-y:auto;padding-right:3px;overscroll-behavior:contain;}