/* App2: personal photography planning — isolated from the live application's CSS. */
.app2-development-label { display:inline-block; margin-left:7px; color:#795900; background:#fff6d6; border:1px solid #e8da9e; border-radius:5px; padding:2px 5px; font-size:9px; letter-spacing:.035em; font-weight:700; }
.header-nav .nav-photo-list { border:1px solid #e1b5bf; background:#fff7f8; color:#a41f39; }
.mobile-view-switch { --planner-accent:#ad1833; }
@media(max-width:700px) {
  .layout:not(.details-open) > .mobile-view-switch { grid-template-columns:repeat(4,minmax(0,1fr)); width:min(392px,calc(100% - 18px)); }
  .mobile-view-switch button { font-size:10px; }
  header .header-nav #nav-photo-list { display:none; }
  .app2-development-label { font-size:8px; margin-left:3px; }
}
.planner-dialog { border:1px solid #e2e5e9; border-radius:16px; padding:0; width:min(640px,calc(100vw - 22px)); max-height:min(88dvh,900px); background:#fff; color:#22242a; box-shadow:0 18px 70px #10182740; }
.planner-dialog::backdrop { background:#15192295; }
.planner-header { display:flex; justify-content:space-between; align-items:start; gap:10px; padding:19px 22px 14px; border-bottom:1px solid #e8e8ed; position:sticky; top:0; background:#fff; z-index:1; }
.planner-header h2 { margin:3px 0 0; font-size:21px; }
.planner-kicker { font-size:10px; letter-spacing:.07em; font-weight:800; color:#a41f39; }
.planner-close { cursor:pointer; border:1px solid #dfe2e7; background:#fff; color:#444; border-radius:8px; min-width:36px; height:36px; font-size:23px; }
.planner-body { padding:17px 22px 20px; }
.planner-description,.planner-privacy { font-size:12px; color:#626773; line-height:1.55; }
.planner-description { margin:0 0 17px; }
.planner-privacy { border-top:1px solid #edf0f2; padding-top:12px; margin-bottom:0; }
.planner-controls { display:grid; gap:7px; }
.planner-controls label { font-size:12px; font-weight:700; color:#555b65; }
.planner-controls select, .planner-controls input, .planner-status { min-height:39px; padding:8px 10px; border:1px solid #d7dae0; border-radius:8px; background:#fff; color:#29313a; font:inherit; font-size:13px; }
.planner-create { display:flex; gap:7px; }
.planner-create input { min-width:0; flex:1; }
.planner-controls button,.planner-tools button,.planner-record button { cursor:pointer; border:1px solid #dfafba; background:#fff5f7; color:#951932; border-radius:8px; padding:8px 11px; font-size:12px; font-weight:650; }
.planner-controls button:hover,.planner-tools button:hover,.planner-record button:hover { background:#fce8ed; }
.planner-summary { margin:19px 0 10px; padding:11px 13px; background:#f7f8fa; color:#45505c; border-radius:9px; font-size:12px; font-weight:700; }
.planner-items { display:grid; gap:9px; }
.planner-record { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; padding:11px 12px; border:1px solid #e7e8ed; border-radius:9px; }
.planner-record-title { display:block; font-size:13px; font-weight:750; margin-bottom:4px; overflow-wrap:anywhere; }
.planner-record-code { color:#64707e; font-size:11px; }
.planner-record-actions { display:flex; align-items:center; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.planner-record-actions a { font-size:12px; color:#9a1e37; text-decoration:underline; }
.planner-record button { padding:7px 9px; }
.planner-status { padding:6px; min-height:34px; max-width:130px; }
.planner-tools { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.planner-feedback { min-height:15px; margin:10px 0 0; font-size:12px; color:#266648; }
.planner-empty { font-size:13px; color:#6c7380; text-align:center; padding:23px 10px; border:1px dashed #d5d9e0; border-radius:9px; }
.photo-list-add { display:block; width:100%; border:1px solid #d7a4b0; background:#fff9fa; border-radius:9px; color:#9c1b34; padding:11px 13px; font-size:13px; font-weight:750; text-align:center; cursor:pointer; }
.photo-list-add:hover,.photo-list-add:focus-visible { background:#fcecf0; outline:2px solid #b72f4b; outline-offset:2px; }
.photo-list-add[aria-pressed="true"] { background:#eef6ef; border-color:#83a68a; color:#267044; }
@media(max-width:500px) {
  .planner-header { padding:14px; }
  .planner-body { padding:12px 14px 17px; }
  .planner-record { grid-template-columns:1fr; }
  .planner-record-actions { justify-content:flex-start; }
  .planner-create { flex-direction:column; }
}