:root{--bg:#06090e;--panel:#0d121a;--line:#26303d;--text:#eee9df;--muted:#a5acb7;--accent:#c5a66b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.65 Arial,sans-serif}h1,h2,h3,.brand strong{font-family:Georgia,serif;font-weight:400}h2{font-size:clamp(2rem,3.5vw,3.4rem);line-height:1.1;margin:.15em 0 .55em}h3{font-size:1.35rem}a{color:inherit;text-decoration:none}img{max-width:100%}.site-header{height:86px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;position:absolute;z-index:20;width:100%;background:linear-gradient(#05080de6,transparent)}.brand{display:flex;flex-direction:column;letter-spacing:.14em}.brand strong{font-size:1.25rem}.brand span,.eyebrow,small{font-size:.68rem;color:var(--muted);letter-spacing:.16em;text-transform:uppercase}.site-header nav{display:flex;gap:28px;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em}.site-header nav a:hover{color:var(--accent)}.nav-toggle{display:none}main>section{padding:68px 5vw;max-width:1500px;margin:auto}.hero{min-height:760px;max-width:none!important;background-size:cover;display:flex;align-items:center}.hero-copy{max-width:650px}.hero h1,.page-head h1{font-size:clamp(3.2rem,6vw,6.2rem);line-height:1.02;margin:.2em 0}.hero p{max-width:600px;font-size:1.05rem}.button,button{display:inline-block;border:1px solid var(--accent);background:var(--accent);color:#101010;padding:12px 20px;margin:10px 10px 10px 0;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;cursor:pointer}.ghost{background:transparent;color:var(--text);border-color:#78808b}.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:28px}.gallery-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.gallery-row.all{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.gallery-card{height:340px;border:1px solid var(--line);background:var(--panel);position:relative;display:flex;flex-direction:column;justify-content:end;overflow:hidden}.gallery-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.72);transition:.45s}.gallery-card:hover img{transform:scale(1.035);filter:brightness(.9)}.gallery-card>div:last-child{position:relative;padding:24px;text-align:center;background:linear-gradient(transparent,rgba(2,5,9,.98))}.gallery-card h3{margin:0}.gallery-card p{font-size:.85rem}.gallery-icon{position:absolute;z-index:3;left:50%;bottom:91px;transform:translateX(-50%);width:38px;height:38px;border-radius:50%;border:1px solid #78808b;background:#0b1018;display:grid;place-items:center}.about-home{display:grid;grid-template-columns:minmax(320px,.8fr) 1.2fr;gap:55px;align-items:center}.about-photo{min-height:520px}.about-photo img{width:100%;height:100%;min-height:520px;object-fit:cover}.role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;border-top:1px solid var(--line);padding-top:25px;margin:25px 0}.role-grid div{display:grid;gap:8px}.role-grid span{color:var(--accent)}.timeline-grid,.project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.timeline-grid article,.project-grid article{border:1px solid var(--line);background:var(--panel);position:relative}.timeline-grid article{padding:25px;border-top-color:var(--accent)}.timeline-grid article:before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--accent);left:-5px;top:19px;box-shadow:0 0 10px var(--accent)}.project-image{height:190px}.project-image img{width:100%;height:100%;object-fit:cover}.project-copy{padding:22px}.tag-list{display:flex;flex-wrap:wrap;gap:7px}.tag-list span{border:1px solid var(--line);padding:3px 8px;font-size:.68rem;color:var(--muted)}.text-link{display:inline-block;margin-top:18px;color:var(--accent)}.page-head{padding-top:160px!important;min-height:410px;max-width:none!important;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:end}.page-head p{max-width:700px}.masonry{columns:3 320px;column-gap:18px}.photo-tile{display:block;break-inside:avoid;margin-bottom:18px;position:relative;border:1px solid var(--line)}.photo-tile img{width:100%;display:block}.photo-tile>span{display:block;padding:10px 12px;background:var(--panel)}.photo-detail{padding-top:140px!important;display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:48px}.full-photo img{width:100%;max-height:80vh;object-fit:contain;background:#020407}.photo-detail dl{display:grid;grid-template-columns:100px 1fr}.photo-detail dt{color:var(--muted)}.copyright-note{padding:14px;border-left:2px solid var(--accent);color:var(--muted)}.protected-media{position:relative;user-select:none;-webkit-user-select:none}.media-shield{position:absolute;inset:0;z-index:2;background:transparent}.watermark{position:absolute;z-index:3;right:15px;bottom:48px;color:#fff8;font-style:normal;font-size:.7rem;letter-spacing:.08em;text-shadow:0 1px 4px #000}.image-notice{position:fixed;right:20px;bottom:20px;background:#111a;border:1px solid var(--accent);padding:13px 18px;opacity:0;transform:translateY(20px);transition:.25s;pointer-events:none;z-index:999}.image-notice.show{opacity:1;transform:none}.contact-strip{max-width:none!important;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:35px;background-size:cover;background-position:center;padding:42px 5vw!important;border-top:1px solid var(--line)}.contact-strip h2{margin:0}.contact-strip p{margin:5px 0}.socials{display:flex;gap:15px;font-size:.75rem}.site-footer{border-top:1px solid var(--line);padding:30px 5vw;display:flex;gap:30px;justify-content:space-between;align-items:center}.site-footer>div:first-child{display:flex;flex-direction:column}.site-footer a{color:var(--muted)}
.admin{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.admin aside{padding:30px;border-right:1px solid var(--line);background:#080c12;position:sticky;top:0;height:100vh}.admin aside nav{display:flex;flex-direction:column;margin-top:40px;gap:14px}.admin main{padding:40px;max-width:1500px;width:100%}.panel{margin:20px 0;border:1px solid var(--line);background:var(--panel);padding:24px;display:grid;gap:12px;max-width:1000px}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}.settings-group{max-width:none}.settings-form>button{position:sticky;bottom:15px;z-index:5;box-shadow:0 5px 30px #000}.admin-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:15px}.admin-list .panel{margin:0}.admin-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}.admin-photo-grid article{border:1px solid var(--line);padding:14px;background:var(--panel)}.admin-photo-grid>article>img{width:100%;height:190px;object-fit:cover}.admin-cover{width:100%;height:160px;object-fit:cover}label{display:grid;gap:6px;color:var(--muted)}input,textarea,select{background:#070a0f;border:1px solid var(--line);color:var(--text);padding:11px;width:100%}input[type=checkbox]{width:auto}textarea{min-height:105px}.check{display:flex;align-items:center;gap:8px}.danger{background:#4c1717;border-color:#a84a4a;color:#fff}.muted{color:var(--muted)}.asset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}.asset-card img,.asset-placeholder{width:100%;height:190px;object-fit:cover;border:1px solid var(--line)}.asset-placeholder{display:grid;place-items:center;background:#080c12;color:var(--muted)}table{width:100%;border-collapse:collapse}td,th{padding:12px;border-bottom:1px solid var(--line);text-align:left}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.stats article{border:1px solid var(--line);padding:20px}.stats strong{font-size:2rem}.login{display:grid;place-items:center;min-height:100vh}.login form{width:min(420px,90vw);padding:35px;border:1px solid var(--line);background:var(--panel);display:grid;gap:15px}
@media(max-width:1000px){.gallery-row,.timeline-grid,.project-grid{grid-template-columns:repeat(2,1fr)}.role-grid{grid-template-columns:repeat(2,1fr)}.contact-strip{grid-template-columns:1fr}}
@media(max-width:760px){.site-header{position:absolute;height:auto;padding:20px;align-items:flex-start}.nav-toggle{display:block;background:transparent;color:white;border:0;padding:5px;margin:0}.site-header nav{display:none;position:absolute;right:20px;top:65px;background:#070b12f5;border:1px solid var(--line);padding:20px;flex-direction:column}.site-header nav.open{display:flex}.hero{min-height:680px}.section-head{display:block}.gallery-row,.timeline-grid,.project-grid,.about-home,.photo-detail{grid-template-columns:1fr}.about-photo,.about-photo img{min-height:360px}.admin{grid-template-columns:1fr}.admin aside{position:relative;height:auto;border-right:0}.stats{grid-template-columns:1fr 1fr}.site-footer{flex-direction:column;align-items:flex-start}.masonry{columns:1}.contact-strip{display:block}}

.notice{padding:1rem;border:1px solid var(--accent);background:rgba(197,166,107,.08)}
.featured-photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.featured-photo{display:block;aspect-ratio:4/3;overflow:hidden;border:1px solid #263142;position:relative}.featured-photo img{width:100%;height:100%;object-fit:cover}.featured-photo>span{position:absolute;left:0;right:0;bottom:0;padding:1rem;background:linear-gradient(transparent,rgba(0,0,0,.9));z-index:3;color:#fff}.ghost{background:transparent!important;border:1px solid #475569!important;color:inherit!important}@media(max-width:900px){.featured-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Phase 1 Photo Manager */
.photo-manager{max-width:none}.photo-manager-head,.api-admin-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:18px}.photo-manager-head h1,.api-admin-head h1{margin:.1em 0}.photo-manager-actions{display:flex;gap:10px;white-space:nowrap}.photo-manager-notice{max-width:none}.photo-manager-notice.error{border-color:#a84a4a;background:#4c171755}.photo-manager-shell{display:grid;grid-template-columns:230px minmax(360px,1fr) 390px;border:1px solid var(--line);height:calc(100vh - 190px);min-height:650px;background:#080c12;overflow:hidden}.photo-tree{border-right:1px solid var(--line);padding:14px;overflow:auto;background:#070a0f}.tree-heading{text-transform:uppercase;color:var(--muted);letter-spacing:.14em;font-size:.68rem;padding:10px 8px}.tree-heading-gallery{margin-top:12px;border-top:1px solid var(--line);padding-top:20px}.tree-node{width:100%;display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;text-align:left;padding:9px;margin:0 0 5px;background:transparent!important;color:var(--text)!important;border:1px solid transparent!important;text-transform:none;letter-spacing:0;font-size:.82rem}.tree-node:hover,.tree-node.active{background:#121923!important;border-color:var(--line)!important}.tree-node.active{border-left-color:var(--accent)!important}.tree-node>span:nth-child(2){display:grid}.tree-node small{font-size:.62rem}.tree-node b{color:var(--muted);font-size:.7rem}.tree-thumb{width:36px;height:36px;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;background:#0d121a;color:var(--accent)}.tree-thumb img{width:100%;height:100%;object-fit:cover}.tree-all,.tree-undefined{font-size:1.1rem}.photo-browser{min-width:0;display:flex;flex-direction:column;overflow:hidden}.photo-browser-toolbar{padding:12px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(180px,1fr) 130px 140px auto;gap:8px}.photo-browser-toolbar input,.photo-browser-toolbar select{padding:9px}.view-toggle{display:flex}.view-toggle button{padding:8px 10px;margin:0}.view-toggle button.active{border-color:var(--accent)!important;color:var(--accent)!important}.photo-browser-summary{padding:9px 14px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);font-size:.75rem;color:var(--muted)}.photo-file-list{overflow:auto;flex:1;padding:8px}.photo-file{margin:0!important;text-transform:none!important;letter-spacing:0!important;color:var(--text)!important;background:transparent!important;border:1px solid transparent!important}.list-view .photo-file{display:grid;width:100%;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;text-align:left;padding:7px}.list-view .photo-file img{width:62px;height:48px;object-fit:cover}.photo-file:hover,.photo-file.selected{background:#111923!important;border-color:var(--line)!important}.photo-file.selected{border-left-color:var(--accent)!important}.photo-file-main{display:grid;min-width:0}.photo-file-main strong,.photo-file-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.photo-file-main small{color:var(--muted);text-transform:none;letter-spacing:0}.photo-file-status{display:flex;gap:8px;color:var(--accent);font-size:.9rem}.grid-view{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));align-content:start;gap:8px}.grid-view .photo-file{padding:7px;display:grid;gap:6px;text-align:left}.grid-view .photo-file img{width:100%;aspect-ratio:4/3;object-fit:cover}.grid-view .photo-file-status{position:absolute}.photo-loading{padding:30px;color:var(--muted)}.photo-inspector{border-left:1px solid var(--line);overflow:hidden;background:var(--panel);padding:0}.inspector-empty{height:100%;display:grid;place-content:center;text-align:center;padding:18px}.inspector-empty>span{font-size:3rem;color:var(--accent)}#photoInspectorForm{height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:0}.inspector-scroll{min-height:0;overflow:auto;padding:18px;display:grid;align-content:start;gap:11px}.inspector-preview{height:220px;position:relative;background:#030507;border:1px solid var(--line)}.inspector-preview img{width:100%;height:100%;object-fit:contain}.inspector-badges{position:absolute;right:8px;bottom:8px;background:#05080dcc;padding:6px 9px;display:flex;gap:8px;color:var(--accent)}.form-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.inspector-checks{display:flex;gap:14px;flex-wrap:wrap;padding:8px 0}.inspector-footer{position:relative;z-index:2;background:var(--panel);border-top:1px solid var(--line);padding:12px 18px;display:flex;align-items:center;gap:10px;box-shadow:0 -8px 18px #0007}.inspector-footer #savePhoto{min-width:130px}.save-state{color:#86d59a;margin-right:auto}.modal-backdrop{position:fixed;inset:0;background:#000b;z-index:1000;display:grid;place-items:center;padding:20px}.modal-backdrop[hidden]{display:none}.modal-card{position:relative;width:min(680px,96vw);max-height:90vh;overflow:auto;background:#0b1018;border:1px solid var(--line);padding:28px;box-shadow:0 20px 80px #000}.modal-card form{display:grid;gap:12px}.modal-close{position:absolute;right:10px;top:8px;background:transparent;border:0;color:var(--muted);font-size:1.5rem;padding:4px 10px}.modal-actions{display:flex;justify-content:flex-end}.drop-zone{border:1px dashed #526173;padding:28px;text-align:center;display:grid;gap:12px}.drop-zone input{padding:8px}.permission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;padding:12px 0}.api-key-reveal code{display:block;overflow-wrap:anywhere;padding:18px;border:1px solid var(--accent);background:#05080d;font-size:1rem}.api-key-title{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}.api-key-prefix{font-family:monospace;color:var(--accent);padding-bottom:12px}.api-key-danger-row{display:flex;gap:10px;border-top:1px solid var(--line);padding-top:12px}.api-key-danger-row form{display:flex;gap:8px;align-items:end}.inline-danger{max-width:600px}.audit-table-wrap{overflow:auto;border:1px solid var(--line)}.audit-table-wrap table{min-width:1100px}.audit-detail{max-width:350px;white-space:normal;word-break:break-word}
@media(max-width:1250px){.photo-manager-shell{grid-template-columns:190px minmax(320px,1fr) 340px}.photo-browser-toolbar{grid-template-columns:1fr 120px}.view-toggle{display:none}}
@media(max-width:900px){.photo-manager-shell{display:block;height:auto;min-height:0}.photo-tree{border-right:0;max-height:260px}.photo-browser{height:600px}.photo-inspector{border-left:0;border-top:1px solid var(--line)}.photo-manager-head,.api-admin-head{display:block}.photo-manager-actions{margin-top:12px}.photo-browser-toolbar{grid-template-columns:1fr 1fr}}

/* Photo Manager status legend */
.photo-status-legend{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:7px 14px;border-bottom:1px solid var(--line);background:#090d13;color:var(--muted);font-size:.69rem}
.photo-status-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.photo-status-legend b{color:var(--accent);font-size:.92rem;font-weight:400}
.photo-status-legend .legend-published{color:#86d59a}
.photo-status-legend .legend-draft{color:var(--muted)}
.status-badge.published{color:#86d59a}
.status-badge.draft{color:var(--muted)}

/* Photo Manager responsive workspace */
.photo-manager{min-width:0;width:100%;max-width:none}
body.photo-manager-page .admin{grid-template-columns:clamp(190px,14vw,240px) minmax(0,1fr)}
body.photo-manager-page .admin main{max-width:none;min-width:0;padding:clamp(18px,2.2vw,36px)}
.photo-manager-shell{
  position:relative;
  display:grid;
  grid-template-columns:clamp(170px,15%,225px) minmax(0,1fr) clamp(315px,29%,410px);
  width:100%;
  min-width:0;
  height:calc(100dvh - 235px);
  min-height:440px;
  overflow:hidden;
}
.photo-manager-shell>*{min-width:0;min-height:0}
.photo-tree,.photo-browser,.photo-inspector{min-width:0;min-height:0}
.photo-tree{overflow:auto;overscroll-behavior:contain}
.photo-browser{overflow:hidden}
.photo-file-list{min-width:0;min-height:0;flex:1;overscroll-behavior:contain;scrollbar-gutter:stable}
.photo-inspector{overflow:hidden;display:block}
#photoInspectorForm{height:100%;max-height:100%;min-height:0;overflow:hidden}
.inspector-scroll{min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}
.inspector-footer{flex:0 0 auto}

/* The toolbar is allowed to wrap instead of spilling under the inspector. */
.photo-browser-toolbar{
  grid-template-columns:minmax(150px,1fr) minmax(105px,125px) minmax(110px,140px) auto;
  align-items:stretch;
  min-width:0;
}
.photo-browser-toolbar>*{min-width:0}
.view-toggle{min-width:max-content}

/* LIST VIEW = file-manager columns. Fill downward, then create another column.
   The JS sets --list-rows from the actual pane height, so this works at any DPI/zoom. */
.photo-file-list.list-view{
  --list-rows:7;
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(var(--list-rows),minmax(58px,1fr));
  grid-auto-columns:minmax(245px,315px);
  align-content:stretch;
  justify-content:start;
  gap:4px 8px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:8px;
}
.list-view .photo-file{
  position:relative;
  display:grid;
  width:auto;
  min-width:0;
  height:100%;
  grid-template-columns:58px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  overflow:hidden;
  text-align:left;
  padding:5px 7px;
}
.list-view .photo-file img{width:58px;height:44px;object-fit:cover}
.list-view .photo-file-main{min-width:0}
.list-view .photo-file-status{position:static;justify-self:end;align-self:center;white-space:nowrap}

/* GRID VIEW = conventional vertical photo grid. */
.photo-file-list.grid-view{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(165px,100%),1fr));
  grid-auto-rows:max-content;
  align-content:start;
  align-items:start;
  gap:10px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:8px;
}
.grid-view .photo-file{
  position:relative;
  width:100%;
  min-width:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto auto;
  align-content:start;
  padding:7px;
}
.grid-view .photo-file img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.grid-view .photo-file-main{padding-right:2px;min-width:0}
.grid-view .photo-file-status{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  padding:4px 6px;
  border:1px solid #26303dcc;
  background:#05080dcc;
  border-radius:3px;
  white-space:nowrap;
}

/* Medium desktop / laptop: keep all three panes, but compress intelligently. */
@media(max-width:1450px) and (min-width:1051px){
  body.photo-manager-page .admin{grid-template-columns:190px minmax(0,1fr)}
  body.photo-manager-page .admin main{padding:20px}
  .photo-manager-shell{grid-template-columns:165px minmax(0,1fr) minmax(300px,34%)}
  .photo-tree{padding:9px}
  .tree-node{grid-template-columns:32px minmax(0,1fr) auto;padding:7px;gap:7px}
  .tree-thumb{width:32px;height:32px}
  .photo-browser-toolbar{grid-template-columns:minmax(140px,1fr) 112px 120px auto;padding:9px;gap:6px}
  .view-toggle button{padding:7px 8px}
  .photo-file-list.list-view{grid-auto-columns:minmax(225px,280px)}
  .inspector-scroll{padding:14px}
  .inspector-preview{height:190px}
}

/* When three usable columns truly no longer fit, stack the inspector below the browser.
   Tree + browser remain side by side, preserving file-manager navigation. */
@media(max-width:1050px) and (min-width:761px){
  body.photo-manager-page .admin{grid-template-columns:175px minmax(0,1fr)}
  body.photo-manager-page .admin main{padding:16px}
  .photo-manager-head{align-items:flex-start}
  .photo-manager-shell{
    height:auto!important;
    min-height:0;
    overflow:visible;
    grid-template-columns:165px minmax(0,1fr);
    grid-template-rows:minmax(520px,65dvh) minmax(420px,auto);
  }
  .photo-tree{grid-column:1;grid-row:1;border-right:1px solid var(--line);max-height:none}
  .photo-browser{grid-column:2;grid-row:1;height:auto;min-height:0}
  .photo-inspector{grid-column:1/-1;grid-row:2;border-left:0;border-top:1px solid var(--line);min-height:420px}
  #photoInspectorForm{height:min(650px,70dvh)}
  .photo-browser-toolbar{grid-template-columns:minmax(0,1fr) 115px;grid-auto-rows:auto}
  .view-toggle{display:flex}
  .photo-file-list.list-view{grid-auto-columns:minmax(220px,270px)}
}

/* Phone/small tablet: stack all workspace regions. */
@media(max-width:760px){
  body.photo-manager-page .admin{grid-template-columns:1fr}
  body.photo-manager-page .admin main{padding:12px}
  .photo-manager-head,.api-admin-head{display:block}
  .photo-manager-actions{margin-top:12px;display:flex;flex-wrap:wrap;white-space:normal}
  .photo-manager-shell{display:block;height:auto!important;min-height:0;overflow:visible}
  .photo-tree{border-right:0;max-height:240px;border-bottom:1px solid var(--line)}
  .photo-browser{height:min(620px,72dvh);min-height:460px}
  .photo-inspector{border-left:0;border-top:1px solid var(--line);min-height:500px}
  #photoInspectorForm{height:min(680px,80dvh)}
  .photo-browser-toolbar{grid-template-columns:1fr 1fr}
  .view-toggle{display:flex}
  .photo-file-list.list-view{grid-auto-columns:minmax(210px,82vw)}
  .photo-file-list.grid-view{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}
}

@media(max-height:760px) and (min-width:1051px){
  .photo-manager-head{margin-bottom:8px}
  .photo-manager-head .muted{margin:.2rem 0}
  .photo-manager-shell{min-height:380px}
  .inspector-preview{height:160px}
}


/* Photo Manager final responsive polish */
/* Size the workspace from the Photo Manager's real available width, not the
   physical monitor resolution. This behaves correctly with OS DPI scaling,
   browser zoom, and different admin-sidebar widths. */
.photo-manager{container-type:inline-size}

/* Default desktop proportions: keep navigation useful, maximize the browser,
   and keep the inspector predictable instead of allowing it to consume a %. */
.photo-manager-shell{
  grid-template-columns:clamp(180px,15cqw,225px) minmax(0,1fr) clamp(330px,29cqw,390px);
}

/* LIST VIEW: compact file-manager columns. Rows do not stretch vertically.
   The browser fills downward and then creates horizontal columns. */
.photo-file-list.list-view{
  --list-rows:6;
  grid-template-rows:repeat(var(--list-rows),56px);
  grid-auto-columns:clamp(205px,22cqw,235px);
  align-content:start;
  gap:5px 7px;
  padding:7px 5px 10px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-gutter:stable;
}
.list-view .photo-file{
  position:relative;
  height:56px;
  grid-template-columns:52px minmax(0,1fr);
  gap:8px;
  padding:5px 7px;
}
.list-view .photo-file img{width:52px;height:42px}
.list-view .photo-file-main{padding-right:44px}
.list-view .photo-file-status{
  position:absolute;
  top:6px;
  right:7px;
  display:flex;
  gap:4px;
  line-height:1;
  padding:2px 3px;
  background:#080c12d9;
  border-radius:3px;
}

/* Remove the visual gutter between the gallery tree and the first file column. */
.photo-tree{padding-right:10px}
.photo-browser{border-left:0}

/* Use the actual Photo Manager width for responsive pane decisions. */
@container (max-width:1120px){
  .photo-manager-shell{grid-template-columns:175px minmax(0,1fr) 330px}
  .photo-browser-toolbar{grid-template-columns:minmax(135px,1fr) 108px 116px auto}
  .photo-file-list.list-view{grid-auto-columns:205px}
}

/* If three panes cannot remain genuinely useful, move the inspector below.
   This is based on workspace width, so DPI scaling doesn't fool it. */
@container (max-width:900px){
  .photo-manager-shell{
    height:auto!important;
    min-height:0;
    overflow:visible;
    grid-template-columns:175px minmax(0,1fr);
    grid-template-rows:minmax(500px,62dvh) minmax(420px,auto);
  }
  .photo-tree{grid-column:1;grid-row:1}
  .photo-browser{grid-column:2;grid-row:1}
  .photo-inspector{grid-column:1/-1;grid-row:2;border-left:0;border-top:1px solid var(--line)}
  #photoInspectorForm{height:min(650px,70dvh)}
  .photo-file-list.list-view{grid-auto-columns:205px}
}

@container (max-width:620px){
  .photo-manager-shell{display:block;height:auto!important;overflow:visible}
  .photo-tree{max-height:240px;border-right:0;border-bottom:1px solid var(--line)}
  .photo-browser{height:min(620px,72dvh);min-height:450px}
  .photo-inspector{min-height:500px}
  .photo-browser-toolbar{grid-template-columns:1fr 1fr}
  .photo-file-list.list-view{grid-auto-columns:minmax(195px,78cqw)}
}

/* Photo Manager validated responsive layout pass */
body.photo-manager-page{overflow:hidden}
body.photo-manager-page .admin{height:100dvh;min-height:0;overflow:hidden}
body.photo-manager-page .admin>aside{height:100dvh;overflow:auto}
body.photo-manager-page .admin>main{height:100dvh;min-height:0;overflow:hidden}
.photo-manager{height:100%;min-height:0;display:flex;flex-direction:column}
.photo-manager-head{flex:0 0 auto}
.photo-manager-notice{flex:0 0 auto}
.photo-manager-shell{flex:1 1 auto;height:auto!important;min-height:0!important;grid-template-columns:clamp(180px,14cqw,210px) minmax(0,1fr) clamp(320px,27cqw,380px);isolation:isolate}
.photo-manager-shell>*{min-width:0;min-height:0;overflow:hidden}
.photo-tree{padding:12px 9px;overflow:auto}
.tree-node{position:relative;grid-template-columns:36px minmax(0,1fr);gap:8px;padding:8px 7px}
.tree-node>span:nth-child(2){display:block;min-width:0}
.tree-copy{min-width:0}.tree-title-row{display:flex;align-items:baseline;gap:7px;min-width:0}.tree-title-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1.08}.tree-title-row b{flex:0 0 auto;color:var(--muted);font-size:.7rem}.tree-copy small{display:block;line-height:1.12;margin-top:2px}
.photo-browser{position:relative;contain:layout paint;min-width:0;min-height:0;overflow:hidden}
.photo-file-list{flex:1 1 0!important;min-height:0!important;max-width:100%;position:relative}
.photo-file-list.list-view{grid-auto-columns:214px;padding:7px 8px 22px;scroll-padding-inline:8px;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;scrollbar-gutter:auto}
.list-view .photo-file{width:214px;max-width:214px;min-width:0}.list-view .photo-file-main{padding-right:38px}.list-view .photo-file-status{right:5px;top:5px;max-width:38px;overflow:hidden}
.photo-file-list.grid-view{overflow-y:auto!important;overflow-x:hidden!important;padding:8px 8px 42px;scroll-padding-bottom:42px;scrollbar-gutter:stable}.grid-view .photo-file{min-height:0}
.photo-inspector{position:relative;min-height:0!important;overflow:hidden!important}
#photoInspectorForm{position:absolute;inset:0;height:auto!important;max-height:none!important;min-height:0;display:flex!important;flex-direction:column;overflow:hidden!important}
#photoInspectorForm[hidden]{display:none!important}.inspector-scroll{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;padding-bottom:24px}
.inspector-footer{position:relative!important;bottom:auto!important;flex:0 0 auto;min-height:64px;z-index:20;padding:10px 14px;background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -8px 18px #0009}.inspector-footer button{margin-top:0;margin-bottom:0}
@container (max-width:1120px){.photo-manager-shell{grid-template-columns:175px minmax(0,1fr) 320px}.photo-file-list.list-view{grid-auto-columns:202px}.list-view .photo-file{width:202px;max-width:202px}}
@container (max-width:900px){body.photo-manager-page{overflow:auto}body.photo-manager-page .admin{height:auto;min-height:100dvh;overflow:visible}body.photo-manager-page .admin>aside{height:auto}body.photo-manager-page .admin>main{height:auto;overflow:visible}.photo-manager{height:auto}.photo-manager-shell{flex:none;height:auto!important;overflow:visible;grid-template-columns:175px minmax(0,1fr);grid-template-rows:minmax(500px,62dvh) minmax(460px,70dvh)}.photo-tree{grid-column:1;grid-row:1;overflow:auto}.photo-browser{grid-column:2;grid-row:1}.photo-inspector{grid-column:1/-1;grid-row:2;min-height:460px!important}#photoInspectorForm{position:absolute;inset:0}}
@container (max-width:620px){.photo-manager-shell{display:flex;flex-direction:column;gap:0}.photo-tree{flex:0 0 240px;max-height:240px}.photo-browser{flex:0 0 min(620px,72dvh);min-height:450px}.photo-inspector{flex:0 0 min(680px,80dvh);min-height:500px!important}.photo-file-list.list-view{grid-auto-columns:minmax(190px,76cqw)}.list-view .photo-file{width:auto;max-width:none}}
/* Exact desktop canvas height is calculated by photo-manager.js after the header is laid out. */
@container (min-width:901px){.photo-manager-shell{flex:0 0 auto}}

/* JS sets --pm-shell-height to the exact remaining desktop viewport height. */
@container (min-width:901px){.photo-manager-shell{height:var(--pm-shell-height,auto)!important}}
/* Constrain the desktop grid to one shrinkable row so pane contents cannot force it taller than the measured canvas. */
@container (min-width:901px){.photo-manager-shell{grid-template-rows:minmax(0,1fr)}}
/* Nested Photo Manager asides must not inherit the global sticky 100vh admin-sidebar rule. */
.photo-manager-shell>.photo-tree,.photo-manager-shell>.photo-inspector{position:relative!important;top:auto!important;height:100%!important;max-height:100%;}
@container (max-width:900px){.photo-manager-shell>.photo-tree,.photo-manager-shell>.photo-inspector{height:100%!important}}