Wedding Planning Tool — Josh Hill Films

  
    
<head>
<meta charset=&quot;UTF-8&quot;>
<meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>
<title>Josh Hill Films · Wedding Planning Suite</title>
<style>
:root{
  --forest:#1E3225; --sage:#87B8A7; --sage-dk:#5E8C7B; --cream:#FAEDC2; --cream-lt:#FBF6E6;
  --slate:#4A5464; --ink:#2E2E2E; --paper:#F7F4ED; --white:#fff; --line:#E6E0D0; --sage-lt:#EAF3EF;
  --muted:#8A8278; --solo:#5a8a58; --solo-bg:#E7F0E6; --ext:#5a6aaa; --ext-bg:#E8EAF0;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;background:var(--paper);color:var(--ink);min-height:100vh;}
h1,h2,h3,.serif{font-family:Georgia,'Times New Roman',serif;}

/* Header */
.header{background:var(--forest);color:var(--white);padding:18px 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.header h1{font-size:20px;font-weight:700;letter-spacing:.5px;}
.header .sub{font-size:12px;opacity:.6;margin-top:3px;font-family:inherit;}
.header .brand{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--sage);}

/* Tabs */
.tabs{display:flex;gap:0;background:var(--forest);padding:0 32px;border-top:1px solid rgba(255,255,255,.08);}
.tab{background:none;border:none;color:rgba(255,255,255,.55);font-size:13.5px;font-weight:600;padding:13px 20px;cursor:pointer;font-family:inherit;border-bottom:3px solid transparent;letter-spacing:.3px;transition:all .15s;}
.tab:hover{color:#fff;}
.tab.active{color:var(--cream);border-bottom-color:var(--sage);}

/* Layout */
.tabpane{display:none;}
.tabpane.active{display:block;}
.layout{display:grid;grid-template-columns:430px 1fr;min-height:calc(100vh - 112px);}
@media(max-width:900px){.layout{grid-template-columns:1fr;}}
.pane-in{background:var(--white);padding:26px 24px 70px;border-right:1px solid var(--line);overflow-y:auto;max-height:calc(100vh - 112px);}
@media(max-width:900px){.pane-in{max-height:none;border-right:none;border-bottom:1px solid var(--line);}}
.pane-out{padding:26px 30px 60px;background:var(--paper);overflow-y:auto;max-height:calc(100vh - 112px);}
@media(max-width:900px){.pane-out{max-height:none;}}

/* Section headers */
.sec{display:flex;align-items:center;gap:10px;margin:24px 0 14px;}
.sec:first-of-type{margin-top:0;}
.sec .line{flex:1;height:2px;background:var(--sage);opacity:.5;}
.sec .t{font-size:13px;letter-spacing:.5px;color:var(--forest);font-weight:700;white-space:nowrap;font-family:Georgia,serif;}
.subt{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:12px 0 8px;}

/* Fields */
.frow{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.flabel{width:150px;font-size:12.5px;color:var(--slate);flex-shrink:0;line-height:1.3;border-bottom:1px dotted var(--line);padding-bottom:3px;align-self:flex-end;}
.finput{flex:1;border:1px solid var(--line);border-radius:5px;padding:7px 10px;font-size:13px;background:var(--cream-lt);color:var(--ink);font-family:inherit;transition:all .15s;}
.finput:focus{outline:none;border-color:var(--sage);background:#fff;box-shadow:0 0 0 3px rgba(135,184,167,.2);}
.finput::placeholder{color:#cfc9bd;}
select.finput{cursor:pointer;}
.hint{font-size:11px;color:var(--muted);margin:-3px 0 9px 160px;line-height:1.4;font-style:italic;}

/* Toggle pill (check button) */
.moment{display:flex;align-items:center;gap:11px;padding:8px 11px;border:1px solid var(--line);border-radius:7px;margin-bottom:6px;background:var(--white);transition:all .15s;}
.moment.on{border-color:var(--sage);background:var(--sage-lt);}
.chk{width:24px;height:24px;border-radius:6px;border:1.5px solid #cfc9bd;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:14px;font-weight:700;color:transparent;transition:all .12s;user-select:none;}
.moment.on .chk{background:var(--sage);border-color:var(--sage);color:var(--forest);}
.m-body{flex:1;min-width:0;}
.m-name{font-size:12.5px;color:var(--ink);font-weight:600;}
.moment.off .m-name{color:var(--muted);}
.m-min{width:54px;border:1px solid var(--line);border-radius:5px;padding:5px 6px;font-size:12.5px;text-align:center;background:var(--cream-lt);font-family:inherit;color:var(--slate);}
.m-min:focus{outline:none;border-color:var(--sage);background:#fff;}
.m-unit{font-size:10px;color:var(--muted);width:22px;}
.m-auto{font-size:10px;color:var(--sage-dk);font-style:italic;width:76px;text-align:right;}
.phase-label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sage-dk);font-weight:700;margin:16px 0 7px;}

.check-row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--slate);cursor:pointer;margin:4px 0 12px;padding:9px 12px;border-radius:6px;background:var(--cream-lt);border:1px solid var(--line);user-select:none;}
.check-row:hover{border-color:var(--sage);}
.check-row input{width:15px;height:15px;accent-color:var(--forest);cursor:pointer;flex-shrink:0;}

/* Output: status banner */
.banner{border-left:5px solid var(--sage);background:var(--cream);border-radius:8px;padding:16px 18px;font-size:13px;line-height:1.6;color:var(--forest);margin-bottom:14px;}
.banner.warn{background:#FBF3DD;border-left-color:#C9A24B;}
.banner b{font-weight:700;}
.cov-line{font-size:12px;color:var(--slate);margin-bottom:14px;display:flex;gap:18px;flex-wrap:wrap;}
.cov-line span b{color:var(--forest);}
.heads{font-size:12px;color:#A65A24;font-style:italic;margin:-6px 0 14px;}

.actions{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
.btn-dark{background:var(--forest);color:#fff;border:none;padding:9px 16px;border-radius:5px;font-size:12.5px;cursor:pointer;font-weight:600;font-family:inherit;transition:.15s;}
.btn-dark:hover{background:#13211a;}
.btn-light{background:#fff;color:var(--forest);border:1px solid var(--line);padding:9px 16px;border-radius:5px;font-size:12.5px;cursor:pointer;font-weight:600;font-family:inherit;}
.btn-light:hover{border-color:var(--sage);}

/* Day timeline list */
.dt-head{text-align:center;margin-bottom:16px;}
.dt-head .names{font-family:Georgia,serif;font-size:28px;font-weight:700;color:var(--forest);}
.dt-head .date{font-family:Georgia,serif;font-size:14px;color:var(--slate);margin-top:2px;}
.dt-head .sun{font-size:11.5px;color:var(--sage-dk);font-style:italic;margin-top:5px;}
.dt-label{text-align:center;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--sage-dk);font-weight:700;margin:14px 0;}
.dt-row{display:flex;align-items:baseline;gap:14px;padding:8px 4px;border-bottom:1px solid #EFEADD;}
.dt-time{width:118px;text-align:right;font-weight:700;color:var(--sage-dk);font-size:13px;flex-shrink:0;}
.dt-name{font-size:13.5px;color:var(--forest);}
.dt-name.buf{font-style:italic;color:var(--sage-dk);}
.dt-phase{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--forest);background:#EDEBE2;font-weight:700;padding:5px 10px;border-radius:4px;margin:12px 0 6px;}

/* Family planner output */
.time-card{background:var(--forest);color:#fff;border-radius:10px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.time-val{font-size:40px;font-weight:700;line-height:1;}
.time-val .u{font-size:17px;opacity:.5;font-weight:400;}
.time-sub{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--sage);margin-top:6px;}
.count-block{text-align:right;}
.count-n{font-size:34px;font-weight:600;line-height:1;}
.count-l{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sage);margin-top:6px;}
.warning{background:#FBF3DD;border:1px solid #E4CF9A;border-radius:8px;padding:12px 14px;margin-bottom:16px;display:flex;gap:10px;font-size:12px;color:#7a6840;line-height:1.6;}
.linkpill{background:var(--sage-lt);border:1px solid var(--sage);border-radius:8px;padding:11px 14px;font-size:12px;color:var(--forest);margin-bottom:16px;line-height:1.5;}
.linkpill b{font-weight:700;}
.legend{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap;}
.legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);}
.tag{font-size:10px;padding:2px 7px;border-radius:4px;letter-spacing:.5px;}
.tag.couple{background:#EFEADD;color:var(--muted);}
.tag.solo{background:var(--solo-bg);color:var(--solo);}
.tag.ext{background:var(--ext-bg);color:var(--ext);}
.list-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--sage-dk);margin-bottom:10px;font-weight:700;}
.gitem{background:#fff;border:1.5px solid var(--line);border-radius:7px;padding:10px 13px;margin-bottom:6px;display:flex;align-items:flex-start;gap:11px;cursor:pointer;transition:all .15s;user-select:none;}
.gitem:hover{border-color:var(--sage);box-shadow:0 2px 6px rgba(0,0,0,.05);}
.gitem.selected{border-color:var(--forest);box-shadow:0 2px 8px rgba(0,0,0,.08);}
.gitem.is-solo{border-left:3px solid var(--sage);}
.g-num{width:25px;height:25px;border-radius:50%;background:#EFEADD;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--muted);flex-shrink:0;margin-top:1px;}
.gitem.selected .g-num{background:var(--forest);color:#fff;}
.g-body{flex:1;min-width:0;}
.g-title{font-size:13px;font-weight:600;color:var(--ink);line-height:1.4;}
.g-names{font-size:11.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.g-tag{font-size:10px;padding:3px 8px;border-radius:4px;letter-spacing:.5px;flex-shrink:0;margin-top:3px;white-space:nowrap;}
.g-tag.couple{background:#EFEADD;color:var(--muted);}
.g-tag.solo{background:var(--solo-bg);color:var(--solo);}
.g-tag.ext{background:var(--ext-bg);color:var(--ext);}
.divider{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sage-dk);margin:14px 0 8px;font-weight:700;}
.empty{text-align:center;padding:56px 24px;color:#bbb6b0;}
.empty .i{font-size:42px;margin-bottom:12px;}
.empty .x{font-size:14px;line-height:1.6;}
.addbtn{display:flex;align-items:center;gap:6px;background:none;border:1px dashed #d5d0c9;border-radius:5px;padding:7px 12px;font-size:12px;cursor:pointer;width:100%;margin-top:5px;color:var(--muted);font-family:inherit;}
.addbtn:hover{border-color:var(--sage);color:var(--forest);background:var(--cream-lt);}

.foot-note{font-size:11px;color:var(--muted);font-style:italic;text-align:center;margin-top:14px;}

/* Print */
.print-only{display:none;}
@media print{
  .header,.tabs,.pane-in,.actions,.legend,.linkpill,.warning,.list-label,.banner,.cov-line,.heads{display:none!important;}
  .layout{grid-template-columns:1fr;}
  .pane-out{padding:0;background:#fff;max-height:none;overflow:visible;}
  body{background:#fff;}
  .tabpane{display:none!important;}
  .tabpane.active{display:block!important;}
  .gitem{break-inside:avoid;}
  /* Family print: show selected groupings only handled via JS class */
}
</style>
</head>
<body>

<div class=&quot;header&quot;>
  <div>
    <h1>Wedding Planning Suite</h1>
    <div class=&quot;sub&quot;>Build your day timeline and family-photo shot list — they talk to each other.</div>
  </div>
  <div class=&quot;brand&quot;>Josh Hill Films</div>
</div>
<div class=&quot;tabs&quot;>
  <button class=&quot;tab active&quot; data-tab=&quot;timeline&quot; onclick=&quot;switchTab('timeline')&quot;>📅 Day Timeline</button>
  <button class=&quot;tab&quot; data-tab=&quot;family&quot; onclick=&quot;switchTab('family')&quot;>👨‍👩‍👧‍👦 Family Photos</button>
</div>

<!-- ════════════ TIMELINE TAB ════════════ -->
<div class=&quot;tabpane active&quot; id=&quot;tab-timeline&quot;>
 <div class=&quot;layout&quot;>
  <div class=&quot;pane-in&quot;>

    <div class=&quot;sec&quot;><div class=&quot;t&quot;>The Details</div><div class=&quot;line&quot;></div></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Couple names</span><input class=&quot;finput&quot; id=&quot;tl_couple&quot; placeholder=&quot;Jordan &amp; Riley&quot; oninput=&quot;tRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Wedding date</span><input class=&quot;finput&quot; type=&quot;date&quot; id=&quot;tl_date&quot; oninput=&quot;tRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Coverage hours booked</span><input class=&quot;finput&quot; type=&quot;number&quot; id=&quot;tl_hours&quot; value=&quot;8&quot; min=&quot;1&quot; max=&quot;16&quot; step=&quot;0.5&quot; oninput=&quot;tRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Ceremony start</span><input class=&quot;finput&quot; type=&quot;time&quot; id=&quot;tl_cer&quot; value=&quot;16:00&quot; oninput=&quot;tRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Ceremony type</span>
      <select class=&quot;finput&quot; id=&quot;tl_certype&quot; onchange=&quot;tRefresh()&quot;><option value=&quot;standard&quot;>Standard (30 min)</option><option value=&quot;catholic&quot;>Catholic (1 hr 15 min)</option></select></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>End / exit time</span><input class=&quot;finput&quot; type=&quot;time&quot; id=&quot;tl_exit&quot; value=&quot;22:00&quot; oninput=&quot;tRefresh()&quot;></div>
    <label class=&quot;check-row&quot;><input type=&quot;checkbox&quot; id=&quot;tl_stay&quot; checked onchange=&quot;tRefresh()&quot;><span>Stay until the exit <span style=&quot;color:var(--muted)&quot;>— roll booked hours back from here to set the start</span></span></label>
    <div class=&quot;frow&quot; id=&quot;tl_covendrow&quot; style=&quot;display:none&quot;><span class=&quot;flabel&quot;>Coverage end time</span><input class=&quot;finput&quot; type=&quot;time&quot; id=&quot;tl_covend&quot; oninput=&quot;tRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Reception gap (min)</span><input class=&quot;finput&quot; type=&quot;number&quot; id=&quot;tl_gap&quot; value=&quot;60&quot; min=&quot;0&quot; step=&quot;5&quot; oninput=&quot;tRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Reception order</span>
      <select class=&quot;finput&quot; id=&quot;tl_order&quot; onchange=&quot;tRefresh()&quot;><option value=&quot;dinner&quot;>Dinner first</option><option value=&quot;dances&quot;>Dances first</option></select></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Drive: prep → ceremony (min)</span><input class=&quot;finput&quot; type=&quot;number&quot; id=&quot;tl_drive1&quot; value=&quot;0&quot; min=&quot;0&quot; step=&quot;5&quot; oninput=&quot;tRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Drive: ceremony → reception (min)</span><input class=&quot;finput&quot; type=&quot;number&quot; id=&quot;tl_drive2&quot; value=&quot;0&quot; min=&quot;0&quot; step=&quot;5&quot; oninput=&quot;tRefresh()&quot;></div>
    <label class=&quot;check-row&quot;><input type=&quot;checkbox&quot; id=&quot;tl_2nd&quot; onchange=&quot;tRefresh()&quot;><span>Second photographer <span style=&quot;color:var(--muted)&quot;>— groom prep &amp;amp; portraits shot in parallel (0 added time)</span></span></label>

    <div class=&quot;sec&quot;><div class=&quot;t&quot;>Sunset &amp;amp; Golden Hour</div><div class=&quot;line&quot;></div></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Sunset (auto, N. GA)</span><input class=&quot;finput&quot; type=&quot;time&quot; id=&quot;tl_sunset&quot; placeholder=&quot;auto&quot; oninput=&quot;tRefresh()&quot;></div>
    <div class=&quot;hint&quot;>Leave blank to auto-fill from the date. Golden hour can shift with mountains/tree lines — override if you have an exact time.</div>

    <div class=&quot;sec&quot;><div class=&quot;t&quot;>Moments</div><div class=&quot;line&quot;></div></div>
    <div id=&quot;tl_moments&quot;></div>

  </div>
  <div class=&quot;pane-out&quot; id=&quot;tl_out&quot;>
    <div class=&quot;empty&quot;><div class=&quot;i&quot;>📅</div><div class=&quot;x&quot;>Enter a ceremony time and exit time<br>to build the day timeline.</div></div>
  </div>
 </div>
</div>

<!-- ════════════ FAMILY TAB ════════════ -->
<div class=&quot;tabpane&quot; id=&quot;tab-family&quot;>
 <div class=&quot;layout&quot;>
  <div class=&quot;pane-in&quot;>
    <div class=&quot;sec&quot;><div class=&quot;t&quot;>The Couple</div><div class=&quot;line&quot;></div></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Person 1</span><input type=&quot;text&quot; class=&quot;finput&quot; id=&quot;p1&quot; placeholder=&quot;First name&quot; oninput=&quot;famRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Person 2</span><input type=&quot;text&quot; class=&quot;finput&quot; id=&quot;p2&quot; placeholder=&quot;First name&quot; oninput=&quot;famRefresh()&quot;></div>

    <div class=&quot;sec&quot;><div class=&quot;t&quot; id=&quot;p1-section-label&quot;>Person 1's Immediate Family</div><div class=&quot;line&quot;></div></div>
    <div class=&quot;subt&quot;>Parents</div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Parent / guardian</span><input type=&quot;text&quot; class=&quot;finput&quot; id=&quot;p1_mom&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Parent / guardian</span><input type=&quot;text&quot; class=&quot;finput&quot; id=&quot;p1_dad&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Step-parent</span><input type=&quot;text&quot; class=&quot;finput&quot; id=&quot;p1_stepmom&quot; placeholder=&quot;Name (if applicable)&quot; oninput=&quot;famRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Step-parent</span><input type=&quot;text&quot; class=&quot;finput&quot; id=&quot;p1_stepdad&quot; placeholder=&quot;Name (if applicable)&quot; oninput=&quot;famRefresh()&quot;></div>
    <div class=&quot;subt&quot;>Siblings</div>
    <div id=&quot;p1_sibs_container&quot;>
      <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Sibling 1</span><input type=&quot;text&quot; class=&quot;finput&quot; data-g=&quot;p1_sib&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
      <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Sibling 2</span><input type=&quot;text&quot; class=&quot;finput&quot; data-g=&quot;p1_sib&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
      <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Sibling 3</span><input type=&quot;text&quot; class=&quot;finput&quot; data-g=&quot;p1_sib&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
    </div>
    <button class=&quot;addbtn&quot; onclick=&quot;addRow('p1_sibs_container','p1_sib')&quot;>+ Add sibling</button>
    <div class=&quot;subt&quot;>Grandparents</div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Grandmother (maternal)</span><input type=&quot;text&quot; class=&quot;finput&quot; data-g=&quot;p1_gp&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Grandfather (maternal)</span><input type=&quot;text&quot; class=&quot;finput&quot; data-g=&quot;p1_gp&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Grandmother (paternal)</span><input type=&quot;text&quot; class=&quot;finput&quot; data-g=&quot;p1_gp&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Grandfather (paternal)</span><input type=&quot;text&quot; class=&quot;finput&quot; data-g=&quot;p1_gp&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
    <label class=&quot;check-row&quot;><input type=&quot;checkbox&quot; id=&quot;p1_separate&quot; onchange=&quot;famRefresh()&quot;><span>Parents prefer separate groupings <span style=&quot;color:var(--muted)&quot;>(we've got you covered)</span></span></label>

    <div class=&quot;sec&quot;><div class=&quot;t&quot; id=&quot;p2-section-label&quot;>Person 2's Immediate Family</div><div class=&quot;line&quot;></div></div>
    <div class=&quot;subt&quot;>Parents</div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Parent / guardian</span><input type=&quot;text&quot; class=&quot;finput&quot; id=&quot;p2_mom&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Parent / guardian</span><input type=&quot;text&quot; class=&quot;finput&quot; id=&quot;p2_dad&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Step-parent</span><input type=&quot;text&quot; class=&quot;finput&quot; id=&quot;p2_stepmom&quot; placeholder=&quot;Name (if applicable)&quot; oninput=&quot;famRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Step-parent</span><input type=&quot;text&quot; class=&quot;finput&quot; id=&quot;p2_stepdad&quot; placeholder=&quot;Name (if applicable)&quot; oninput=&quot;famRefresh()&quot;></div>
    <div class=&quot;subt&quot;>Siblings</div>
    <div id=&quot;p2_sibs_container&quot;>
      <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Sibling 1</span><input type=&quot;text&quot; class=&quot;finput&quot; data-g=&quot;p2_sib&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
      <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Sibling 2</span><input type=&quot;text&quot; class=&quot;finput&quot; data-g=&quot;p2_sib&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
      <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Sibling 3</span><input type=&quot;text&quot; class=&quot;finput&quot; data-g=&quot;p2_sib&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
    </div>
    <button class=&quot;addbtn&quot; onclick=&quot;addRow('p2_sibs_container','p2_sib')&quot;>+ Add sibling</button>
    <div class=&quot;subt&quot;>Grandparents</div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Grandmother (maternal)</span><input type=&quot;text&quot; class=&quot;finput&quot; data-g=&quot;p2_gp&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Grandfather (maternal)</span><input type=&quot;text&quot; class=&quot;finput&quot; data-g=&quot;p2_gp&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Grandmother (paternal)</span><input type=&quot;text&quot; class=&quot;finput&quot; data-g=&quot;p2_gp&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
    <div class=&quot;frow&quot;><span class=&quot;flabel&quot;>Grandfather (paternal)</span><input type=&quot;text&quot; class=&quot;finput&quot; data-g=&quot;p2_gp&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
    <label class=&quot;check-row&quot;><input type=&quot;checkbox&quot; id=&quot;p2_separate&quot; onchange=&quot;famRefresh()&quot;><span>Parents prefer separate groupings <span style=&quot;color:var(--muted)&quot;>(we've got you covered)</span></span></label>

    <div class=&quot;sec&quot;><div class=&quot;t&quot;>Extended Family Groups</div><div class=&quot;line&quot;></div></div>
    <div id=&quot;ext_container&quot;></div>
    <button class=&quot;addbtn&quot; onclick=&quot;addExtGroup()&quot;>+ Add extended family group</button>
    <div style=&quot;height:40px;&quot;></div>
  </div>
  <div class=&quot;pane-out&quot;>
    <div class=&quot;time-card&quot;>
      <div><div id=&quot;time-val&quot; class=&quot;time-val&quot;>—</div><div class=&quot;time-sub&quot;>Estimated Time</div></div>
      <div class=&quot;count-block&quot;><div id=&quot;count-val&quot; class=&quot;count-n&quot;>0</div><div class=&quot;count-l&quot;>Groupings Selected</div></div>
    </div>
    <div class=&quot;linkpill&quot; id=&quot;fam-link&quot;>This estimate flows into your <b>Day Timeline</b> automatically — the Family photos block will use it.</div>
    <div class=&quot;warning&quot;><div>⚠️</div><div><b>Important:</b> these estimates assume everyone is present and ready when formals begin. If people are missing or need gathering between groups, the time climbs fast.</div></div>
    <div class=&quot;actions&quot;>
      <button class=&quot;btn-dark&quot; onclick=&quot;printFamily()&quot;>🖨 Print / Save Shot List</button>
      <button class=&quot;btn-light&quot; onclick=&quot;selectAll()&quot;>Select All</button>
      <button class=&quot;btn-light&quot; onclick=&quot;deselectAll()&quot;>Deselect All</button>
    </div>
    <div class=&quot;legend&quot;>
      <div class=&quot;legend-item&quot;><span class=&quot;tag couple&quot;>Couple</span> Both in frame</div>
      <div class=&quot;legend-item&quot;><span class=&quot;tag solo&quot;>Solo</span> One person only</div>
      <div class=&quot;legend-item&quot;><span class=&quot;tag ext&quot;>Extended</span> Extended family</div>
    </div>
    <div class=&quot;list-label&quot;>Your family photo groupings — click any to toggle</div>
    <div id=&quot;groupings-list&quot;>
      <div class=&quot;empty&quot;><div class=&quot;i&quot;>👨‍👩‍👧‍👦</div><div class=&quot;x&quot;>Start entering names on the left<br>and your shot list appears here.</div></div>
    </div>
  </div>
 </div>
</div>

<script>
const SUNSET={101:&quot;17:35&quot;,102:&quot;17:36&quot;,103:&quot;17:37&quot;,104:&quot;17:38&quot;,105:&quot;17:39&quot;,106:&quot;17:39&quot;,107:&quot;17:40&quot;,108:&quot;17:41&quot;,109:&quot;17:42&quot;,110:&quot;17:43&quot;,111:&quot;17:44&quot;,112:&quot;17:45&quot;,113:&quot;17:46&quot;,114:&quot;17:47&quot;,115:&quot;17:48&quot;,116:&quot;17:49&quot;,117:&quot;17:50&quot;,118:&quot;17:51&quot;,119:&quot;17:52&quot;,120:&quot;17:52&quot;,121:&quot;17:53&quot;,122:&quot;17:54&quot;,123:&quot;17:55&quot;,124:&quot;17:56&quot;,125:&quot;17:57&quot;,126:&quot;17:58&quot;,127:&quot;17:59&quot;,128:&quot;18:00&quot;,129:&quot;18:01&quot;,130:&quot;18:02&quot;,131:&quot;18:03&quot;,201:&quot;18:04&quot;,202:&quot;18:05&quot;,203:&quot;18:06&quot;,204:&quot;18:07&quot;,205:&quot;18:08&quot;,206:&quot;18:09&quot;,207:&quot;18:10&quot;,208:&quot;18:11&quot;,209:&quot;18:12&quot;,210:&quot;18:13&quot;,211:&quot;18:14&quot;,212:&quot;18:15&quot;,213:&quot;18:16&quot;,214:&quot;18:17&quot;,215:&quot;18:18&quot;,216:&quot;18:19&quot;,217:&quot;18:20&quot;,218:&quot;18:21&quot;,219:&quot;18:22&quot;,220:&quot;18:23&quot;,221:&quot;18:24&quot;,222:&quot;18:25&quot;,223:&quot;18:25&quot;,224:&quot;18:26&quot;,225:&quot;18:27&quot;,226:&quot;18:28&quot;,227:&quot;18:29&quot;,228:&quot;18:30&quot;,301:&quot;18:31&quot;,302:&quot;18:32&quot;,303:&quot;18:32&quot;,304:&quot;18:33&quot;,305:&quot;18:34&quot;,306:&quot;18:35&quot;,307:&quot;18:36&quot;,308:&quot;19:37&quot;,309:&quot;19:37&quot;,310:&quot;19:38&quot;,311:&quot;19:39&quot;,312:&quot;19:40&quot;,313:&quot;19:41&quot;,314:&quot;19:42&quot;,315:&quot;19:42&quot;,316:&quot;19:43&quot;,317:&quot;19:44&quot;,318:&quot;19:45&quot;,319:&quot;19:45&quot;,320:&quot;19:46&quot;,321:&quot;19:47&quot;,322:&quot;19:48&quot;,323:&quot;19:49&quot;,324:&quot;19:49&quot;,325:&quot;19:50&quot;,326:&quot;19:51&quot;,327:&quot;19:52&quot;,328:&quot;19:52&quot;,329:&quot;19:53&quot;,330:&quot;19:54&quot;,331:&quot;19:55&quot;,401:&quot;19:56&quot;,402:&quot;19:56&quot;,403:&quot;19:57&quot;,404:&quot;19:58&quot;,405:&quot;19:59&quot;,406:&quot;19:59&quot;,407:&quot;20:00&quot;,408:&quot;20:01&quot;,409:&quot;20:02&quot;,410:&quot;20:03&quot;,411:&quot;20:03&quot;,412:&quot;20:04&quot;,413:&quot;20:05&quot;,414:&quot;20:06&quot;,415:&quot;20:06&quot;,416:&quot;20:07&quot;,417:&quot;20:08&quot;,418:&quot;20:09&quot;,419:&quot;20:10&quot;,420:&quot;20:10&quot;,421:&quot;20:11&quot;,422:&quot;20:12&quot;,423:&quot;20:13&quot;,424:&quot;20:14&quot;,425:&quot;20:14&quot;,426:&quot;20:15&quot;,427:&quot;20:16&quot;,428:&quot;20:17&quot;,429:&quot;20:17&quot;,430:&quot;20:18&quot;,501:&quot;20:19&quot;,502:&quot;20:20&quot;,503:&quot;20:21&quot;,504:&quot;20:21&quot;,505:&quot;20:22&quot;,506:&quot;20:23&quot;,507:&quot;20:24&quot;,508:&quot;20:25&quot;,509:&quot;20:25&quot;,510:&quot;20:26&quot;,511:&quot;20:27&quot;,512:&quot;20:28&quot;,513:&quot;20:29&quot;,514:&quot;20:29&quot;,515:&quot;20:30&quot;,516:&quot;20:31&quot;,517:&quot;20:32&quot;,518:&quot;20:32&quot;,519:&quot;20:33&quot;,520:&quot;20:34&quot;,521:&quot;20:34&quot;,522:&quot;20:35&quot;,523:&quot;20:36&quot;,524:&quot;20:37&quot;,525:&quot;20:37&quot;,526:&quot;20:38&quot;,527:&quot;20:39&quot;,528:&quot;20:39&quot;,529:&quot;20:40&quot;,530:&quot;20:41&quot;,531:&quot;20:41&quot;,601:&quot;20:42&quot;,602:&quot;20:42&quot;,603:&quot;20:43&quot;,604:&quot;20:44&quot;,605:&quot;20:44&quot;,606:&quot;20:45&quot;,607:&quot;20:45&quot;,608:&quot;20:46&quot;,609:&quot;20:46&quot;,610:&quot;20:47&quot;,611:&quot;20:47&quot;,612:&quot;20:47&quot;,613:&quot;20:48&quot;,614:&quot;20:48&quot;,615:&quot;20:48&quot;,616:&quot;20:49&quot;,617:&quot;20:49&quot;,618:&quot;20:49&quot;,619:&quot;20:50&quot;,620:&quot;20:50&quot;,621:&quot;20:50&quot;,622:&quot;20:50&quot;,623:&quot;20:50&quot;,624:&quot;20:51&quot;,625:&quot;20:51&quot;,626:&quot;20:51&quot;,627:&quot;20:51&quot;,628:&quot;20:51&quot;,629:&quot;20:51&quot;,630:&quot;20:51&quot;,701:&quot;20:51&quot;,702:&quot;20:51&quot;,703:&quot;20:51&quot;,704:&quot;20:51&quot;,705:&quot;20:50&quot;,706:&quot;20:50&quot;,707:&quot;20:50&quot;,708:&quot;20:50&quot;,709:&quot;20:49&quot;,710:&quot;20:49&quot;,711:&quot;20:49&quot;,712:&quot;20:49&quot;,713:&quot;20:48&quot;,714:&quot;20:48&quot;,715:&quot;20:47&quot;,716:&quot;20:47&quot;,717:&quot;20:46&quot;,718:&quot;20:46&quot;,719:&quot;20:45&quot;,720:&quot;20:45&quot;,721:&quot;20:44&quot;,722:&quot;20:44&quot;,723:&quot;20:43&quot;,724:&quot;20:42&quot;,725:&quot;20:42&quot;,726:&quot;20:41&quot;,727:&quot;20:40&quot;,728:&quot;20:39&quot;,729:&quot;20:39&quot;,730:&quot;20:38&quot;,731:&quot;20:37&quot;,801:&quot;20:36&quot;,802:&quot;20:35&quot;,803:&quot;20:34&quot;,804:&quot;20:33&quot;,805:&quot;20:32&quot;,806:&quot;20:31&quot;,807:&quot;20:30&quot;,808:&quot;20:29&quot;,809:&quot;20:28&quot;,810:&quot;20:27&quot;,811:&quot;20:26&quot;,812:&quot;20:25&quot;,813:&quot;20:24&quot;,814:&quot;20:23&quot;,815:&quot;20:22&quot;,816:&quot;20:21&quot;,817:&quot;20:20&quot;,818:&quot;20:18&quot;,819:&quot;20:17&quot;,820:&quot;20:16&quot;,821:&quot;20:15&quot;,822:&quot;20:13&quot;,823:&quot;20:12&quot;,824:&quot;20:11&quot;,825:&quot;20:10&quot;,826:&quot;20:08&quot;,827:&quot;20:07&quot;,828:&quot;20:06&quot;,829:&quot;20:05&quot;,830:&quot;20:03&quot;,831:&quot;20:02&quot;,901:&quot;20:01&quot;,902:&quot;19:59&quot;,903:&quot;19:58&quot;,904:&quot;19:56&quot;,905:&quot;19:55&quot;,906:&quot;19:54&quot;,907:&quot;19:52&quot;,908:&quot;19:51&quot;,909:&quot;19:50&quot;,910:&quot;19:48&quot;,911:&quot;19:47&quot;,912:&quot;19:45&quot;,913:&quot;19:44&quot;,914:&quot;19:43&quot;,915:&quot;19:41&quot;,916:&quot;19:40&quot;,917:&quot;19:38&quot;,918:&quot;19:37&quot;,919:&quot;19:35&quot;,920:&quot;19:34&quot;,921:&quot;19:33&quot;,922:&quot;19:31&quot;,923:&quot;19:30&quot;,924:&quot;19:28&quot;,925:&quot;19:27&quot;,926:&quot;19:26&quot;,927:&quot;19:24&quot;,928:&quot;19:23&quot;,929:&quot;19:21&quot;,930:&quot;19:20&quot;,1001:&quot;19:19&quot;,1002:&quot;19:17&quot;,1003:&quot;19:16&quot;,1004:&quot;19:14&quot;,1005:&quot;19:13&quot;,1006:&quot;19:12&quot;,1007:&quot;19:10&quot;,1008:&quot;19:09&quot;,1009:&quot;19:08&quot;,1010:&quot;19:06&quot;,1011:&quot;19:05&quot;,1012:&quot;19:04&quot;,1013:&quot;19:02&quot;,1014:&quot;19:01&quot;,1015:&quot;19:00&quot;,1016:&quot;18:59&quot;,1017:&quot;18:57&quot;,1018:&quot;18:56&quot;,1019:&quot;18:55&quot;,1020:&quot;18:54&quot;,1021:&quot;18:53&quot;,1022:&quot;18:52&quot;,1023:&quot;18:50&quot;,1024:&quot;18:49&quot;,1025:&quot;18:48&quot;,1026:&quot;18:47&quot;,1027:&quot;18:46&quot;,1028:&quot;18:45&quot;,1029:&quot;18:44&quot;,1030:&quot;18:43&quot;,1031:&quot;18:42&quot;,1101:&quot;17:41&quot;,1102:&quot;17:40&quot;,1103:&quot;17:39&quot;,1104:&quot;17:38&quot;,1105:&quot;17:37&quot;,1106:&quot;17:37&quot;,1107:&quot;17:36&quot;,1108:&quot;17:35&quot;,1109:&quot;17:34&quot;,1110:&quot;17:33&quot;,1111:&quot;17:33&quot;,1112:&quot;17:32&quot;,1113:&quot;17:31&quot;,1114:&quot;17:31&quot;,1115:&quot;17:30&quot;,1116:&quot;17:29&quot;,1117:&quot;17:29&quot;,1118:&quot;17:28&quot;,1119:&quot;17:28&quot;,1120:&quot;17:27&quot;,1121:&quot;17:27&quot;,1122:&quot;17:27&quot;,1123:&quot;17:26&quot;,1124:&quot;17:26&quot;,1125:&quot;17:25&quot;,1126:&quot;17:25&quot;,1127:&quot;17:25&quot;,1128:&quot;17:25&quot;,1129:&quot;17:25&quot;,1130:&quot;17:24&quot;,1201:&quot;17:24&quot;,1202:&quot;17:24&quot;,1203:&quot;17:24&quot;,1204:&quot;17:24&quot;,1205:&quot;17:24&quot;,1206:&quot;17:24&quot;,1207:&quot;17:24&quot;,1208:&quot;17:24&quot;,1209:&quot;17:24&quot;,1210:&quot;17:25&quot;,1211:&quot;17:25&quot;,1212:&quot;17:25&quot;,1213:&quot;17:25&quot;,1214:&quot;17:26&quot;,1215:&quot;17:26&quot;,1216:&quot;17:26&quot;,1217:&quot;17:27&quot;,1218:&quot;17:27&quot;,1219:&quot;17:27&quot;,1220:&quot;17:28&quot;,1221:&quot;17:28&quot;,1222:&quot;17:29&quot;,1223:&quot;17:29&quot;,1224:&quot;17:30&quot;,1225:&quot;17:31&quot;,1226:&quot;17:31&quot;,1227:&quot;17:32&quot;,1228:&quot;17:32&quot;,1229:&quot;17:33&quot;,1230:&quot;17:34&quot;,1231:&quot;17:35&quot;};

/* ═══════════ SHARED ═══════════ */
function switchTab(t){
  document.querySelectorAll('.tab').forEach(b=>b.classList.toggle('active',b.dataset.tab===t));
  document.querySelectorAll('.tabpane').forEach(p=>p.classList.toggle('active',p.id==='tab-'+t));
  document.body.dataset.active=t;
}
const pad=n=>(n<10?'0':'')+n;
function fmt(min){ if(min==null||isNaN(min))return''; min=((Math.round(min)%1440)+1440)%1440; let h=Math.floor(min/60),m=min%60,ap=h<12?'AM':'PM',hh=h%12||12; return hh+':'+pad(m)+' '+ap; }
function parseT(v){ if(!v)return null; const p=v.split(':'); return (+p[0])*60+(+p[1]); }

/* ═══════════ TIMELINE ENGINE ═══════════ */
let familyEstimate=null; // minutes, from planner
const TL=[
 {k:'detail',ph:'Getting Ready',n:'Detail shots (rings, dress, shoes)',kind:'toggle',def:30,on:true,note:'Only if details matter to you — skip to save 30 min.'},
 {k:'candids',ph:'Getting Ready',n:'Getting-ready candids',kind:'toggle',def:15,on:true},
 {k:'groomprep',ph:'Getting Ready',n:'Groom prep photos',kind:'groom',def:5,on:true},
 {k:'groomsmen',ph:'Getting Ready',n:'Groom &amp; groomsmen portraits',kind:'groom',def:15,on:true},
 {k:'intodress',ph:'Getting Ready',n:'Into the dress',kind:'toggle',def:15,on:true,note:&quot;Whoever's helping should already be dressed.&quot;},
 {k:'bridemaids',ph:'Getting Ready',n:'Bride &amp; bridesmaids portraits',kind:'toggle',def:25,on:true},
 {k:'firstlook',ph:'Getting Ready',n:'First look / first touch',kind:'toggle',def:15,on:true},
 {k:'addlfirst',ph:'Getting Ready',n:'Additional first look (dad, etc.)',kind:'toggle',def:10,on:false},
 {k:'tuckaway',ph:'Getting Ready',n:'Pre-ceremony buffer / tuck away',kind:'toggle',def:50,on:true},
 {k:'travel1',ph:'Getting Ready',n:'Travel to ceremony',kind:'travel1'},
 {k:'breathe',ph:'Getting Ready',n:'Breathing room before ceremony',kind:'buffer'},
 {k:'ceremony',ph:'Ceremony',n:'Ceremony',kind:'ceremony'},
 {k:'family',ph:'Photos',n:'Family photos',kind:'family',def:20,on:true},
 {k:'bridalparty',ph:'Photos',n:'Full bridal party',kind:'toggle',def:10,on:true},
 {k:'bgportraits',ph:'Photos',n:'Bride &amp; groom portraits',kind:'toggle',def:30,on:true},
 {k:'travel2',ph:'Photos',n:'Travel to reception',kind:'travel2'},
 {k:'cocktail',ph:'Photos',n:'Cocktail hour / buffer',kind:'cocktail'},
 {k:'entrance',ph:'Reception',n:'Grand entrance',kind:'toggle',def:10,on:true},
 {k:'meal1',ph:'Reception',n:'meal1',kind:'meal1'},
 {k:'meal2',ph:'Reception',n:'meal2',kind:'meal2'},
 {k:'toasts',ph:'Reception',n:'Toasts / speeches',kind:'toggle',def:15,on:true},
 {k:'cake',ph:'Reception',n:'Cake cutting',kind:'toggle',def:7,on:true},
 {k:'open',ph:'Reception',n:'Open dancing',kind:'open'},
 {k:'lastdance',ph:'Reception',n:'Private last dance',kind:'toggle',def:7,on:false},
 {k:'exit',ph:'Reception',n:'Grand exit',kind:'toggle',def:7,on:true},
];
const tState={inc:{},min:{},dinner:60,dances:15,familyAuto:true};
TL.forEach(e=>{ if(['toggle','groom','family'].includes(e.kind)){tState.inc[e.k]=e.on;tState.min[e.k]=e.def;} });

function buildMoments(){
  const c=document.getElementById('tl_moments'); let html=''; let lastPh='';
  TL.forEach(e=>{
    if(!['toggle','groom','family'].includes(e.kind)) return;
    if(e.ph!==lastPh){ html+=`<div class=&quot;phase-label&quot;>${e.ph}</div>`; lastPh=e.ph; }
    const on=tState.inc[e.k];
    const fam = e.kind==='family';
    html+=`<div class=&quot;moment ${on?'on':'off'}&quot; id=&quot;mom_${e.k}&quot;>
      <div class=&quot;chk&quot; onclick=&quot;tToggle('${e.k}')&quot;>✓</div>
      <div class=&quot;m-body&quot;><div class=&quot;m-name&quot;>${e.n}</div>${fam?'<div class=&quot;m-auto&quot; id=&quot;famauto&quot; style=&quot;text-align:left;width:auto;font-size:10px;&quot;></div>':''}</div>
      <input class=&quot;m-min&quot; type=&quot;number&quot; min=&quot;0&quot; step=&quot;5&quot; value=&quot;${tState.min[e.k]}&quot; oninput=&quot;tMin('${e.k}',this.value)&quot;><span class=&quot;m-unit&quot;>min</span>
    </div>`;
  });
  // dinner/dances editable
  html+=`<div class=&quot;phase-label&quot;>Reception meal &amp;amp; dances</div>
   <div class=&quot;moment on&quot;><div class=&quot;chk&quot; style=&quot;background:var(--sage);border-color:var(--sage);color:var(--forest)&quot;>✓</div>
     <div class=&quot;m-body&quot;><div class=&quot;m-name&quot;>Dinner</div></div>
     <input class=&quot;m-min&quot; type=&quot;number&quot; min=&quot;0&quot; step=&quot;5&quot; value=&quot;${tState.dinner}&quot; oninput=&quot;tState.dinner=+this.value||0;tRefresh()&quot;><span class=&quot;m-unit&quot;>min</span></div>
   <div class=&quot;moment on&quot;><div class=&quot;chk&quot; style=&quot;background:var(--sage);border-color:var(--sage);color:var(--forest)&quot;>✓</div>
     <div class=&quot;m-body&quot;><div class=&quot;m-name&quot;>First dances</div></div>
     <input class=&quot;m-min&quot; type=&quot;number&quot; min=&quot;0&quot; step=&quot;5&quot; value=&quot;${tState.dances}&quot; oninput=&quot;tState.dances=+this.value||0;tRefresh()&quot;><span class=&quot;m-unit&quot;>min</span></div>`;
  c.innerHTML=html;
}
function tToggle(k){ tState.inc[k]=!tState.inc[k]; document.getElementById('mom_'+k).classList.toggle('on',tState.inc[k]); document.getElementById('mom_'+k).classList.toggle('off',!tState.inc[k]); tRefresh(); }
function tMin(k,v){ tState.min[k]=+v||0; tRefresh(); }

function effMin(k){
  const e=TL.find(x=>x.k===k), s=tState;
  switch(e.kind){
    case 'toggle': return s.inc[k]?s.min[k]:0;
    case 'groom': return (s.inc[k] &amp;&amp; !document.getElementById('tl_2nd').checked)?s.min[k]:0;
    case 'family':
      if(!s.inc[k]) return 0;
      return (s.familyAuto &amp;&amp; familyEstimate!=null)?familyEstimate:s.min[k];
    case 'travel1':{ const d=+document.getElementById('tl_drive1').value||0; return d>0?d+Math.ceil(d/15)*5:0; }
    case 'travel2':{ const d=+document.getElementById('tl_drive2').value||0; return d>0?d+Math.ceil(d/15)*5:0; }
    case 'ceremony': return document.getElementById('tl_certype').value==='catholic'?75:30;
    case 'meal1': return document.getElementById('tl_order').value==='dances'?s.dances:s.dinner;
    case 'meal2': return document.getElementById('tl_order').value==='dances'?s.dinner:s.dances;
    default: return 0; // cocktail/buffer/open computed in pipeline
  }
}
function mealName(k){ const dancesFirst=document.getElementById('tl_order').value==='dances';
  return k==='meal1'?(dancesFirst?'First dances':'Dinner'):(dancesFirst?'Dinner':'First dances'); }

function computeTimeline(){
  const cer=parseT(document.getElementById('tl_cer').value);
  const exit=parseT(document.getElementById('tl_exit').value);
  const hrs=+document.getElementById('tl_hours').value||0;
  const stay=document.getElementById('tl_stay').checked;
  const covEndIn=parseT(document.getElementById('tl_covend').value);
  if(cer==null||exit==null) return null;

  const preKeys=['detail','candids','groomprep','groomsmen','intodress','bridemaids','firstlook','addlfirst','tuckaway','travel1'];
  let totalPre=0; preKeys.forEach(k=>totalPre+=effMin(k));
  const natGR=cer-totalPre;
  let covEnd = stay?exit:(covEndIn!=null?covEndIn:exit);
  let covEndAbs = covEnd>=natGR?covEnd:covEnd+1440;
  const exitAbs0 = exit>=cer?exit:exit+1440;
  const covStart = covEnd - hrs*60;
  const buffer = Math.max(0, Math.round(natGR - covStart));
  const chainStart = Math.min(covStart, natGR);
  const neededHrs = (covEndAbs-natGR)/60;
  const bufferHrs = hrs-neededHrs;

  // forward walk
  const fam=effMin('family'), bridal=effMin('bridalparty'), bg=effMin('bgportraits'), trav2=effMin('travel2');
  const gap=+document.getElementById('tl_gap').value||0;
  const cocktail=Math.max(0, gap-(fam+bridal+bg+trav2));
  const lastdance=effMin('lastdance'), grandexit=effMin('exit');

  let clock=chainStart; const rows=[]; let rawOpen=0;
  TL.forEach(e=>{
    let m;
    if(e.kind==='buffer') m=buffer;
    else if(e.kind==='cocktail') m=cocktail;
    else if(e.kind==='open'){ rawOpen=exitAbs0-clock-lastdance-grandexit; m=Math.max(0,Math.round(rawOpen)); }
    else m=effMin(e.k);
    let name=e.n; if(e.kind==='meal1'||e.kind==='meal2') name=mealName(e.k);
    const start=clock, end=clock+m;
    rows.push({k:e.k,ph:e.ph,name,kind:e.kind,m,start,end});
    clock+=m;
  });

  // golden hour
  const d=document.getElementById('tl_date').value;
  let sunset=parseT(document.getElementById('tl_sunset').value);
  if(sunset==null &amp;&amp; d){ const dt=new Date(d+'T00:00'); const key=(dt.getMonth()+1)*100+dt.getDate(); if(SUNSET[key]) sunset=parseT(SUNSET[key]); }
  const bgRow=rows.find(r=>r.k==='bgportraits');

  return {rows,cer,exit,covStart,covEnd,neededHrs,bufferHrs,hrs,buffer,sunset,bgRow,rawOpen,stay,covEndShown:covEnd,exitVal:exit};
}

function tRefresh(){
  document.getElementById('tl_covendrow').style.display=document.getElementById('tl_stay').checked?'none':'flex';
  const fa=document.getElementById('famauto');
  if(fa) fa.innerHTML = familyEstimate!=null ? `↳ using planner estimate: <b style=&quot;color:var(--sage-dk)&quot;>${familyEstimate} min</b>` : '<span style=&quot;color:var(--muted)&quot;>manual — fill the Family Photos tab to auto-set</span>';
  const out=document.getElementById('tl_out');
  const R=computeTimeline();
  if(!R){ out.innerHTML='<div class=&quot;empty&quot;><div class=&quot;i&quot;>📅</div><div class=&quot;x&quot;>Enter a ceremony time and exit time<br>to build the day timeline.</div></div>'; return; }

  // banner
  let banner,warn=false;
  const cs=fmt(R.covStart),ce=fmt(R.covEnd);
  if(R.neededHrs<=R.hrs+1e-6){
    banner=`<b>✓ This plan fits the booked coverage.</b> Coverage runs <b>${cs} – ${ce}</b> (${R.hrs.toFixed(1)} hrs). The must-have moments need about ${R.neededHrs.toFixed(1)} hrs, which tucks ~${R.bufferHrs.toFixed(1)} hrs of breathing room in before the ceremony. That cushion is on purpose — insurance for the inevitable hiccup, and when the day runs smooth it's where we do our most creative work instead of racing the clock.`;
  } else if(R.neededHrs-R.hrs<=1){
    warn=true; banner=`<b>ⓘ A touch tight.</b> Rolling ${R.hrs.toFixed(1)} hrs back from ${ce} starts coverage at <b>${cs}</b>, but the must-haves need about ${R.neededHrs.toFixed(1)} hrs. This is a guide, not a replacement for Josh — a small overage can usually be squeezed in. For more breathing room, let's talk about starting a little earlier.`;
  } else {
    warn=true; banner=`<b>ⓘ More coverage may be recommended.</b> To catch everything, coverage would need to begin around <b>${fmt(R.cer-R.neededHrs*60)}</b> (about ${R.neededHrs.toFixed(1)} hrs) versus the ${R.hrs.toFixed(1)} hrs booked. This tool is a starting point, not a replacement for Josh — let's talk so we plan the day right.`;
  }
  let heads='';
  if(!R.stay &amp;&amp; R.covEndShown<R.exitVal){ heads=`<div class=&quot;heads&quot;>Heads up: coverage ends at ${fmt(R.covEndShown)} — about ${R.exitVal-R.covEndShown} min before the ${fmt(R.exitVal)} exit, so the very end of the night won't be photographed.</div>`; }

  // golden line
  let golden='';
  if(R.sunset!=null){
    golden=`<span>Sunset <b>${fmt(R.sunset)}</b></span><span>Golden hour <b>${fmt(R.sunset-60)} – ${fmt(R.sunset)}</b></span>`;
    if(R.bgRow &amp;&amp; R.bgRow.m>0){
      const be=R.bgRow.end%1440;
      if(be>=R.sunset-60 &amp;&amp; be<=R.sunset) golden+=`<span style=&quot;color:var(--sage-dk)&quot;>Couple portraits land in golden light ✓</span>`;
      else if(be<R.sunset-60) golden+=`<span style=&quot;color:var(--sage-dk)&quot;>For sunset portraits, consider a pull-out ~${fmt(R.sunset-15)}</span>`;
      else golden+=`<span style=&quot;color:#A65A24&quot;>Portraits after sunset — add lighting or shoot earlier</span>`;
    }
  }
  if(R.rawOpen<0) heads+=`<div class=&quot;heads&quot;>⚠ Reception is over-packed by ${Math.round(-R.rawOpen)} min near the end — nudge the exit later or trim.</div>`;

  // day timeline
  const couple=document.getElementById('tl_couple').value||'Your Wedding Day';
  const dval=document.getElementById('tl_date').value;
  let dateStr=''; if(dval){ const dt=new Date(dval+'T00:00'); dateStr=dt.toLocaleDateString('en-US',{weekday:'long',month:'long',day:'numeric',year:'numeric'}); }
  let list='',lastPh='';
  R.rows.forEach(r=>{
    if(r.m<=0) return;
    if(r.ph!==lastPh){ list+=`<div class=&quot;dt-phase&quot;>${r.ph==='Photos'?'Portraits &amp; Cocktail Hour':r.ph}</div>`; lastPh=r.ph; }
    const range=(r.kind==='ceremony'||r.kind==='open')?`${fmt(r.start)} – ${fmt(r.end)}`:fmt(r.start);
    list+=`<div class=&quot;dt-row&quot;><div class=&quot;dt-time&quot;>${range}</div><div class=&quot;dt-name ${r.kind==='buffer'?'buf':''}&quot;>${r.name}</div></div>`;
  });

  out.innerHTML=`
    <div class=&quot;banner ${warn?'warn':''}&quot;>${banner}</div>
    ${heads}
    <div class=&quot;cov-line&quot;>${golden}</div>
    <div class=&quot;actions&quot;><button class=&quot;btn-dark&quot; onclick=&quot;printTimeline()&quot;>🖨 Print / Save Timeline</button></div>
    <div class=&quot;dt-head&quot;>
      <div class=&quot;names&quot;>${couple}</div>
      ${dateStr?`<div class=&quot;date&quot;>${dateStr}</div>`:''}
      ${R.sunset!=null?`<div class=&quot;sun&quot;>Sunset ${fmt(R.sunset)} · Golden hour ${fmt(R.sunset-60)} – ${fmt(R.sunset)}</div>`:''}
    </div>
    <div class=&quot;dt-label&quot;>— Day Timeline —</div>
    ${list}
    <div class=&quot;foot-note&quot;>Times are a flexible guide — we build in breathing room and adjust to the day's flow.</div>`;
}
function printTimeline(){ document.body.dataset.active='timeline'; window.print(); }

/* ═══════════ FAMILY PLANNER ═══════════ */
let allGroups=[], selected=new Set(), sibCounts={p1:3,p2:3}, extCount=0, extMemberCounts={};
const $=id=>{const el=document.getElementById(id);return el?el.value.trim():'';};
const $g=grp=>Array.from(document.querySelectorAll(`[data-g=&quot;${grp}&quot;]`)).map(el=>el.value.trim()).filter(Boolean);
const nm=(...a)=>a.flat().filter(Boolean);
const checked=id=>document.getElementById(id)?.checked??false;
const unitStr=u=>u.join(' &amp; ');
function addRow(cid,group){ const side=cid.startsWith('p1')?'p1':'p2'; sibCounts[side]++; const n=sibCounts[side];
  const div=document.createElement('div'); div.className='frow';
  div.innerHTML=`<span class=&quot;flabel&quot;>Sibling ${n}</span><input type=&quot;text&quot; class=&quot;finput&quot; data-g=&quot;${group}&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;>`;
  document.getElementById(cid).appendChild(div); }
function addExtGroup(){ extCount++; const id=`ext_${extCount}`; extMemberCounts[id]=2;
  const div=document.createElement('div'); div.className='subt-wrap'; div.id=id; div.style.marginBottom='14px';
  div.innerHTML=`<div class=&quot;frow&quot; style=&quot;margin-bottom:8px;&quot;><span class=&quot;flabel&quot; style=&quot;font-weight:600;color:var(--forest);&quot;>Group label</span>
    <input type=&quot;text&quot; class=&quot;finput&quot; data-ext=&quot;${id}&quot; data-role=&quot;label&quot; placeholder=&quot;e.g. Cousins&quot; oninput=&quot;famRefresh()&quot;></div>
    <div id=&quot;${id}_members&quot;>
      <div class=&quot;frow&quot;><span class=&quot;flabel&quot; style=&quot;padding-left:12px;&quot;>Member 1</span><input type=&quot;text&quot; class=&quot;finput&quot; data-ext=&quot;${id}&quot; data-role=&quot;member&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
      <div class=&quot;frow&quot;><span class=&quot;flabel&quot; style=&quot;padding-left:12px;&quot;>Member 2</span><input type=&quot;text&quot; class=&quot;finput&quot; data-ext=&quot;${id}&quot; data-role=&quot;member&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;></div>
    </div>
    <button class=&quot;addbtn&quot; onclick=&quot;addExtMember('${id}')&quot;>+ Add member</button>`;
  document.getElementById('ext_container').appendChild(div); }
function addExtMember(id){ extMemberCounts[id]=(extMemberCounts[id]||2)+1; const n=extMemberCounts[id];
  const div=document.createElement('div'); div.className='frow';
  div.innerHTML=`<span class=&quot;flabel&quot; style=&quot;padding-left:12px;&quot;>Member ${n}</span><input type=&quot;text&quot; class=&quot;finput&quot; data-ext=&quot;${id}&quot; data-role=&quot;member&quot; placeholder=&quot;Name&quot; oninput=&quot;famRefresh()&quot;>`;
  document.getElementById(`${id}_members`).appendChild(div); }

function buildSide(pName,partnerN,couple,coupleStr,prefix){
  const groups=[]; const n=pName||(prefix==='p1'?'Person 1':'Person 2'); const tag=`${n}'s Side`;
  const momUnit=nm($(`${prefix}_mom`),$(`${prefix}_stepdad`)); const dadUnit=nm($(`${prefix}_dad`),$(`${prefix}_stepmom`));
  const allParents=nm(momUnit,dadUnit); const separated=checked(`${prefix}_separate`);
  const sibs=$g(`${prefix}_sib`); const gps=$g(`${prefix}_gp`);
  const parentGroupUnits=separated?[momUnit,dadUnit].filter(u=>u.length>0):(allParents.length?[allParents]:[]);
  parentGroupUnits.forEach(unit=>{ const pLabel=separated?unitStr(unit):`${n}'s Parents`;
    if(sibs.length) groups.push({title:`${coupleStr} + ${pLabel} &amp; ${n}'s Siblings`,members:nm(couple,unit,sibs),tag,solo:false});
    groups.push({title:`${coupleStr} + ${pLabel}`,members:nm(couple,unit),tag,solo:false});
    if(pName&amp;&amp;sibs.length) groups.push({title:`${n} + ${pLabel} &amp; ${n}'s Siblings`,members:nm([pName],unit,sibs),tag,solo:true});
    if(pName) groups.push({title:`${n} + ${pLabel}`,members:nm([pName],unit),tag,solo:true});
  });
  if(pName){ [$(`${prefix}_mom`),$(`${prefix}_dad`),$(`${prefix}_stepmom`),$(`${prefix}_stepdad`)].filter(Boolean).forEach(pn=>{
    groups.push({title:`${n} + ${pn}`,members:[pName,pn],tag,solo:true}); }); }
  if(sibs.length){ groups.push({title:`${coupleStr} + ${n}'s Siblings`,members:nm(couple,sibs),tag,solo:false});
    if(pName) groups.push({title:`${n} + ${n}'s Siblings`,members:nm([pName],sibs),tag,solo:true}); }
  if(!separated&amp;&amp;allParents.length&amp;&amp;sibs.length&amp;&amp;gps.length){ groups.push({title:`${coupleStr} + All of ${n}'s Immediate Family`,members:nm(couple,allParents,sibs,gps),tag,solo:false}); }
  if(gps.length) groups.push({title:`${coupleStr} + ${n}'s Grandparents`,members:nm(couple,gps),tag,solo:false});
  return groups;
}
function generateGroupings(){
  const groups=[]; const p1=$('p1'),p2=$('p2'); if(!p1&amp;&amp;!p2)return groups;
  const couple=nm(p1,p2); const coupleStr=couple.join(' &amp; '); const n1=p1||'Person 1',n2=p2||'Person 2';
  document.getElementById('p1-section-label').textContent=p1?`${p1}'s Immediate Family`:&quot;Person 1's Immediate Family&quot;;
  document.getElementById('p2-section-label').textContent=p2?`${p2}'s Immediate Family`:&quot;Person 2's Immediate Family&quot;;
  groups.push({title:`${coupleStr} Only`,members:couple,tag:'Couple',solo:false,sectionStart:'Couple'});
  const g1=buildSide(p1,p2,couple,coupleStr,'p1'); if(g1.length){g1[0].sectionStart=`${n1}'s Side`;groups.push(...g1);}
  const g2=buildSide(p2,p1,couple,coupleStr,'p2'); if(g2.length){g2[0].sectionStart=`${n2}'s Side`;groups.push(...g2);}
  const p1Fam=nm(nm($('p1_mom'),$('p1_stepdad'),$('p1_dad'),$('p1_stepmom')),$g('p1_sib'),$g('p1_gp'));
  const p2Fam=nm(nm($('p2_mom'),$('p2_stepdad'),$('p2_dad'),$('p2_stepmom')),$g('p2_sib'),$g('p2_gp'));
  if(p1Fam.length&amp;&amp;p2Fam.length) groups.push({title:`${coupleStr} + Both Immediate Families`,members:nm(couple,p1Fam,p2Fam),tag:'Both Sides',solo:false,sectionStart:'Both Sides'});
  let extAdded=false;
  document.querySelectorAll('[data-role=&quot;label&quot;]').forEach(le=>{ const extId=le.getAttribute('data-ext'); const label=le.value.trim(); if(!label)return;
    const members=Array.from(document.querySelectorAll(`[data-ext=&quot;${extId}&quot;][data-role=&quot;member&quot;]`)).map(el=>el.value.trim()).filter(Boolean);
    const g={title:`${coupleStr} + ${label}`,members:nm(couple,members),tag:'Extended',solo:false};
    if(!extAdded){g.sectionStart='Extended Family';extAdded=true;} groups.push(g); });
  return groups;
}
function famRefresh(){
  allGroups=generateGroupings();
  allGroups.forEach(g=>{ if(!selected.has(g.title)) selected.add(g.title); });
  const valid=new Set(allGroups.map(g=>g.title));
  for(const k of selected) if(!valid.has(k)) selected.delete(k);
  renderList(); updateStats();
}
function renderList(){
  const c=document.getElementById('groupings-list');
  if(!allGroups.length){ c.innerHTML=`<div class=&quot;empty&quot;><div class=&quot;i&quot;>👨‍👩‍👧‍👦</div><div class=&quot;x&quot;>Start entering names on the left<br>and your shot list appears here.</div></div>`; return; }
  c.innerHTML='';
  allGroups.forEach((g,i)=>{ const isOn=selected.has(g.title);
    if(g.sectionStart){ const d=document.createElement('div'); d.className='divider'; d.textContent=g.sectionStart; c.appendChild(d); }
    const tagClass=g.solo?'solo':(g.tag==='Extended'?'ext':'couple'); const tagLabel=g.solo?`Solo · ${g.tag}`:g.tag;
    const div=document.createElement('div'); div.className=`gitem${isOn?' selected':''}${g.solo?' is-solo':''}`;
    div.innerHTML=`<div class=&quot;g-num&quot;>${i+1}</div><div class=&quot;g-body&quot;><div class=&quot;g-title&quot;>${g.title}</div><div class=&quot;g-names&quot;>${g.members.join(' · ')}</div></div><div class=&quot;g-tag ${tagClass}&quot;>${tagLabel}</div>`;
    div.addEventListener('click',()=>toggle(g.title)); c.appendChild(div); });
}
function toggle(key){ selected.has(key)?selected.delete(key):selected.add(key); renderList(); updateStats(); }
function selectAll(){ allGroups.forEach(g=>selected.add(g.title)); renderList(); updateStats(); }
function deselectAll(){ selected.clear(); renderList(); updateStats(); }
function famMinutes(n){ if(n===0)return null; if(n<=2)return 5; if(n<=5)return 8; if(n<=10)return 12; if(n<=14)return 16; return 22; }
function updateStats(){
  const n=selected.size; document.getElementById('count-val').textContent=n;
  let t; if(n===0)t='—'; else if(n<=2)t='~3 <span class=&quot;u&quot;>min</span>'; else if(n<=5)t='~5 <span class=&quot;u&quot;>min</span>';
  else if(n<=10)t='~10 <span class=&quot;u&quot;>min</span>'; else if(n<=14)t='~15 <span class=&quot;u&quot;>min</span>'; else t='20+ <span class=&quot;u&quot;>min</span>';
  document.getElementById('time-val').innerHTML=t;
  familyEstimate=famMinutes(n);
  const fl=document.getElementById('fam-link');
  fl.innerHTML = familyEstimate!=null
    ? `Your Day Timeline’s <b>Family photos</b> block is set to <b>${familyEstimate} min</b> from this list (${n} groupings). Change it anytime on the Timeline tab.`
    : `This estimate flows into your <b>Day Timeline</b> automatically — the Family photos block will use it.`;
  tRefresh();
}
function printFamily(){ document.body.dataset.active='family'; window.print(); }

/* init */
buildMoments(); document.body.dataset.active='timeline'; tRefresh();
</script>
</body>
</html>
">
  