:root {
  color-scheme: light;
  --navy: #172A3A;
  --navy-deep: #10202e;
  --amber: #C98A22;
  --amber-soft: #FFF3DE;
  --body: #273847;
  --secondary: #5A6874;
  --stroke: #D8DFE5;
  --background: #F4F6F7;
  --white: #ffffff;
  --shadow: 0 10px 30px rgba(18, 40, 58, .055);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--body); background: var(--background); line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled { cursor: not-allowed; opacity: .5; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, label.primary-cta:focus-within,
label.secondary-cta:focus-within { outline: 3px solid #296FB4; outline-offset: 3px; }
[hidden] { display: none !important; }
.site-header { background: var(--white); color: var(--navy); border-bottom: 3px solid var(--amber); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 15px 24px; }
.brand { display: flex; align-items: center; flex-wrap:wrap; gap: 8px 24px; min-width:0; }
.brand-logo { display:block; width:290px; max-width:100%; height:auto; }
.site-header .brand-product { font-size:26px; }
.site-header .pill { color:var(--secondary); border-color:var(--stroke); }
@media(max-width:650px){.site-header .brand{align-items:flex-start;flex-direction:column}.brand-logo{width:260px}.site-header .brand-product{font-size:22px}}
.brand-mark { width: 43px; height: 43px; border: 1.5px solid var(--amber); border-radius: 8px; display: grid; place-content: center; font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: -2px; }
.brand-mark span { color: var(--amber); }
.brand-company { color: #D6DFE4; font-size: 11px; letter-spacing: .18em; font-weight: 700; }
.brand-product { font-size: 19px; font-weight: 700; letter-spacing: -.025em; }
.pill { font-size: 10px; font-weight: 800; letter-spacing: .075em; padding: 7px 10px; border: 1px solid #6d8190; border-radius: 100px; color: #D3DEE5; }
.page-shell { max-width: 1200px; margin: 0 auto; padding: 0 24px 32px; }
.intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 44px 0 28px; }
.eyebrow { margin: 0 0 7px; color: #936318; letter-spacing: .12em; font-size: 11px; font-weight: 800; }
h1 { margin: 0 0 8px; max-width: 720px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.13; color: var(--navy); letter-spacing: -.045em; font-weight: 780; }
.intro-text { max-width: 610px; margin: 0; color: var(--secondary); font-size: 15px; }
.intro-side { border-left: 1px solid #CFD7DE; min-width: 175px; padding-left: 23px; margin-bottom: 4px; }
.intro-line { color: var(--navy); font-weight: 650; font-size: 12px; line-height: 2.15; }
.intro-line span { font-size: 11px; color: #9A691F; margin-right: 13px; font-variant-numeric: tabular-nums; }
.alert { background: #FFF8EC; border: 1px solid #E8C891; border-left: 4px solid var(--amber); border-radius: 9px; padding: 14px 17px; display: flex; gap: 14px; align-items: flex-start; }
.alert-icon { flex: none; width: 24px; height: 24px; line-height: 24px; text-align: center; border: 2px solid #95620f; color: #95620f; border-radius: 50%; font-size: 14px; font-weight: 900; }
.alert strong { color: #634418; font-size: 13px; }
.alert p { font-size: 12px; color: #735A32; margin: 2px 0 0; }
.alert p strong { font-size: inherit; }
.status { min-height: 18px; margin: 15px 0; font-size: 12px; color: #536474; }
.status.success { color: #235c46; }
.status.warning { color: #9B4A1F; }
.status.error { color: #a12c30; }
.error-panel { margin-bottom: 18px; padding: 16px; border: 1px solid #c74141; background: #FFF0EF; border-radius: 7px; font-size: 14px; }
.workspace { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.6fr); gap: 16px; align-items: start; }
.panel { background: var(--white); min-width: 0; border-radius: 11px; border: 1px solid #E0E6EA; padding: 20px; box-shadow: var(--shadow); }
.panel-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.step-count { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; color: var(--amber); background: #FFF4E1; border: 1px solid #F1DDBA; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
h2 { color: var(--navy); font-weight: 750; letter-spacing: -.02em; font-size: 17px; line-height: 1.3; margin: 2px 0 3px; }
.panel-heading p { color: var(--secondary); font-size: 12px; line-height: 1.4; margin: 0; }
.entry-form { margin-bottom: 18px; }
.entry-form label { display: block; color: #445260; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.form-row { display: flex; gap: 7px; }
.form-row input { border: 1px solid #C9D3DA; background: var(--white); color: var(--navy); border-radius: 7px; height: 43px; padding: 0 10px; width: 100%; min-width: 0; font-size: 13px; }
.form-row input::placeholder { color: #87949D; }
.add-button { flex: none; border: 0; background: var(--navy); color: white; border-radius: 7px; padding: 0 14px; font-size: 12px; font-weight: 750; min-height: 43px; }
.add-button:not(:disabled):hover { background: #2E4E68; }
.selection-list { display: grid; gap: 8px; }
.selection-item { width: 100%; border: 1px solid var(--stroke); border-radius: 8px; padding: 11px 12px; text-align: left; color: var(--navy); background: #fff; display: flex; gap: 9px; align-items: center; min-height: 48px; }
.selection-item:hover { border-color: #91A3B1; }
.selection-item[aria-pressed="true"] { background: #F3F7FA; border-color: #627E95; box-shadow: inset 3px 0 0 var(--amber); }
.selection-item .item-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; color: #5C768A; background: #EAF0F4; border-radius: 6px; font-size: 14px; }
.selection-item .item-title { overflow-wrap: anywhere; flex: 1; font-size: 13px; font-weight: 650; line-height: 1.3; }
.selection-item .item-chevron { color: #9CAAB3; font-size: 18px; }
.context-note { color: #788691; margin: 14px 0 0; font-size: 12px; }
.photos-panel-header { align-items: start; margin-bottom: 20px; }
.photos-heading-text { flex: 1; min-width: 0; }
.photo-count { flex: none; background: #EFF3F6; border-radius: 50px; padding: 5px 9px; color: #5C6E7E; font-size: 11px; font-weight: 700; }
.photo-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; }
.primary-cta, .secondary-cta { min-height: 43px; padding: 11px 14px; border-radius: 7px; text-align: center; font-size: 12px; font-weight: 750; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.primary-cta { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.primary-cta:hover { background: #27465E; }
.secondary-cta { color: var(--navy); border: 1px solid #A6B6C2; background: #fff; }
.secondary-cta:hover { background: #F1F5F7; }
.primary-cta span, .secondary-cta span { font-size: 18px; line-height: 1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.photo-guidance { background: #F7F9FA; padding: 22px 14px; border: 1px dashed #BBC8D1; border-radius: 9px; color: #627482; font-size: 13px; text-align: center; margin: 0 0 14px; }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.photo-card { min-width: 0; border: 1px solid var(--stroke); overflow: hidden; background: #fff; border-radius: 8px; }
.photo-media { position: relative; background: #EBEFF2; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.photo-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-media.preview-missing img { display: none; }
.photo-media .preview-fallback { display: none; color: #526778; text-align: center; font-size: 11px; padding: 9px; }
.photo-media.preview-missing .preview-fallback { display: block; }
.photo-meta { padding: 9px 9px 8px; }
.photo-name { font-weight: 650; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--navy); }
.photo-size { font-size: 10px; margin-top: 3px; color: #6E7D89; }
.photo-controls { margin-top: 8px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.download-link, .delete-photo { border: 0; background: none; color: #365a75; padding: 2px 0; text-decoration: underline; text-underline-offset: 2px; font-size: 10px; font-weight: 650; }
.delete-photo { color: #974b40; }
.image-disclaimer { margin-top: 17px; line-height: 1.5; }
.footer { display: flex; justify-content: space-between; gap: 15px; margin: 28px 0 0; border-top: 1px solid #D5DDE2; padding-top: 16px; font-size: 10px; color: #6D7B85; }
.footer span:first-child { font-weight: 800; letter-spacing: .06em; }
.floor-panel { grid-column: 1 / -1; }
.optional-label { display: inline-block; color: #596b78; font-size: 12px; font-weight: 600; margin-left: 7px; }
.plan-disclaimer { padding: 12px; background: var(--amber-soft); border-left: 3px solid var(--amber); color: #634418; font-size: 13px; }
.floor-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 24px; }
.floor-workspace h3 { color: var(--navy); font-size: 15px; margin: 0 0 8px; overflow-wrap: anywhere; }
.record-id { color: var(--secondary); overflow-wrap: anywhere; font-size: 11px; margin: 0 0 12px; }
.floor-editor fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
.floor-editor label { display: block; font-size: 13px; font-weight: 650; color: #445260; margin-bottom: 12px; }
.floor-editor input, .floor-editor select, .floor-editor textarea { display: block; width: 100%; min-width: 0; min-height: 46px; font-size: 16px; color: var(--navy); padding: 9px; border: 1px solid #A6B6C2; border-radius: 7px; background: white; margin-top: 5px; }
.floor-editor textarea { resize: vertical; }
.floor-editor .context-note { margin: -3px 0 12px; color: #536474; }
.floor-editor button { min-height: 46px; width: 100%; margin: 3px 0; }
.plan-field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.floor-overview { min-width: 0; }
.floor-overview > .context-note { margin: 0 0 12px; color: #536474; }
.plan-figure { padding: 12px; margin: 0 0 16px; border: 1px solid var(--stroke); border-radius: 9px; background: #F7F9FA; }
#floor-preview { display: block; width: 100%; height: 330px; background: #fff; border-radius: 5px; }
.plan-figure figcaption { margin-top: 9px; font-size: 12px; color: #536474; }
.plan-shape rect { fill: #DFEAF2; stroke: #4D708B; stroke-width: 2; }
.plan-shape.unfinished rect { fill: #EFEAE1; stroke: #826C4D; }
.plan-shape.garage rect { fill: #E6E2F1; stroke: #6F5A94; }
.plan-shape.exterior rect { fill: #DFEEE4; stroke: #52795F; }
.plan-shape.selected rect { stroke: #172A3A; stroke-width: 4; stroke-dasharray: 6 3; }
.plan-shape text { fill: #172A3A; font-weight: 700; }
.plan-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.plan-totals > div { border: 1px solid var(--stroke); border-radius: 7px; padding: 9px; }
.plan-totals dt { font-size: 12px; color: #536474; }
.plan-totals dd { margin: 3px 0 0; font-size: 14px; color: var(--navy); font-weight: 700; overflow-wrap: anywhere; }
.plan-room-list { display: grid; gap: 8px; }
.plan-room { text-align: left; padding: 12px; border: 1px solid var(--stroke); border-radius: 7px; background: white; color: var(--navy); min-height: 48px; }
.plan-room[aria-pressed="true"] { border-color: #627E95; box-shadow: inset 3px 0 0 var(--amber); background: #F3F7FA; }
.plan-room strong, .plan-room span { display: block; overflow-wrap: anywhere; }
.plan-room strong { font-size: 14px; }
.plan-room span { font-size: 12px; margin-top: 4px; color: #536474; }
@media (max-width: 950px) {
  .workspace { grid-template-columns: 1fr 1fr; }
  .photos-panel { grid-column: 1 / -1; }
  .photo-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .header-inner { padding: 14px 17px; }
  .brand-mark { width: 38px; height: 38px; font-size: 24px; }
  .brand-company { font-size: 9px; }
  .brand-product { font-size: 17px; }
  .pill { font-size: 8px; padding: 5px 6px; }
  .page-shell { padding: 0 15px 24px; }
  .intro { margin: 31px 0 19px; }
  .intro-side { display: none; }
  .intro-text { font-size: 13px; }
  h1 { font-size: 32px; }
  .alert { padding: 13px; gap: 10px; }
  .workspace { grid-template-columns: 1fr; gap: 13px; }
  .photos-panel { grid-column: auto; }
  .panel { padding: 17px; }
  .panel-heading { margin-bottom: 16px; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-actions > label { flex: 1; }
  .footer { flex-direction: column; gap: 5px; }
  .floor-workspace { grid-template-columns: 1fr; gap: 22px; }
  .plan-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #floor-preview { height: 260px; }
}
@media (prefers-reduced-motion: no-preference) {
  .selection-item, .add-button, .primary-cta, .secondary-cta { transition: background .16s, border-color .16s; }
}

.app-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.app-nav a { color: var(--navy); padding: 12px; border: 1px solid var(--stroke); border-radius: 7px; background: white; font-weight: 650; }
.feature-panel { grid-column: 1 / -1; scroll-margin-top: 16px; }
.feature-panel p, .feature-panel li { max-width: 85ch; }
.feature-panel a { color: var(--navy); overflow-wrap: anywhere; }
.feature-form label { display: block; margin: 12px 0; font-weight: 650; }
.feature-form input, .feature-form select, .feature-form textarea { display: block; width: 100%; min-height: 44px; padding: 10px; margin-top: 5px; border: 1px solid #91A3B1; border-radius: 7px; background: white; color: var(--navy); }
.feature-form button { margin: 5px 5px 5px 0; }
.feature-panel fieldset { min-width: 0; margin: 15px 0; padding: 12px; border: 1px solid var(--stroke); border-radius: 7px; }
.check-choice { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; overflow-wrap: anywhere; }
.check-choice input { flex: none; width: 22px; height: 22px; accent-color: var(--navy); }
.feature-panel pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #F3F7FA; border-radius: 7px; padding: 12px; font: inherit; font-size: 13px; }
.feature-panel pre:empty { display: none; }
.feature-panel summary { cursor: pointer; min-height: 44px; padding: 12px 0; color: var(--navy); font-weight: 650; }
.feature-panel h3 { margin-top: 26px; }
.feature-panel button, .feature-panel .primary-cta, .feature-panel .secondary-cta { min-height: 44px; }

.record-card { border: 1px solid var(--stroke); border-radius: 8px; padding: 12px; margin-top: 12px; overflow-wrap: anywhere; }

.feature-form .check-choice { display:flex; font-weight:400; margin:6px 0; }
.feature-form .check-choice input { display:inline-block; width:22px; min-height:22px; padding:0; margin:0; }

.danger-button { border-color:#a12c30; color:#a12c30; }

/* Mandatory presentation wrappers stay in one expanded, naturally scrolling card. */
.local-presentation { border: 2px solid #C98A22; border-radius: 8px; padding: 18px; margin: 16px 0; color: #172A3A; background: #FFFDF8; overflow-wrap: anywhere; }
.local-presentation > * { display: block; white-space: normal; overflow: visible; max-height: none; height: auto; }
.local-presentation blockquote { margin: 14px 0; padding: 12px; border-left: 4px solid #172A3A; background: #F3F7FA; }
.local-presentation [data-presentation-part="safety"] { padding: 12px; border: 2px solid #172A3A; font-weight: 700; }
.local-presentation [data-presentation-part="previewDisclosure"] { font-weight: 700; }
.local-presentation-samples button { white-space: normal; text-align: left; margin: 6px; max-width: 100%; min-height: 44px; }

/* Local ZIP controls retain touch targets without overflowing narrow panels. */
#zip-files, #zip-number, #zip-pdf-number { width:100%; min-width:0; max-width:100%; min-height:44px; }
#zip-cancel { min-height:44px; max-width:100%; white-space:normal; margin-bottom:12px; }
#zip-progress { overflow-wrap:anywhere; }
#legacy-recovery-controls { margin:24px 0; }
#legacy-recovery-controls > summary { min-height:44px; padding:12px 0; cursor:pointer; font-weight:700; }

/* Homeowner journey: existing record controllers inside one navigable shell. */
body{background:#f7f6f2;color:#172A3A}.page-shell{max-width:1280px}.brand-product{font-family:Georgia,serif;font-size:30px}.review-banner{font-size:12px;padding:12px;background:#eae1ce;text-align:center;margin-bottom:20px}.global-nav,.journey-nav,.room-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.global-nav{justify-content:center;border-bottom:1px solid #d9dfdd;padding-bottom:16px}.global-nav button,.journey-nav button,.room-tabs button{background:transparent;color:#172A3A;border:1px solid transparent;border-radius:5px;padding:12px 16px;min-height:46px;font:inherit;font-weight:600;cursor:pointer}.global-nav small{display:block;font-size:10px;color:#657571}.journey-heading{margin:30px 0 24px}.journey-heading h1{font:40px Georgia,serif;margin:8px 0 12px}.journey-heading>p{max-width:760px}.workspace{display:block}.journey-panel{width:100%;margin-bottom:24px;padding:28px;background:#fff;border:1px solid #d9dfdd;border-radius:10px}.journey-panel[hidden],[hidden]{display:none!important}.journey-panel .step-count{display:none}.journey-panel .panel-heading{padding:0 0 20px}.property-panel .selection-list,.room-panel .selection-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.selection-item{min-height:76px;border:1px solid #d9dfdd;border-radius:8px;padding:18px}.selection-item .item-icon:empty{display:none}.entry-form{max-width:700px}.level-controls{margin:18px 0}.level-controls label{max-width:360px}.level-editor{display:flex;align-items:end;gap:16px;flex-wrap:wrap;padding:0 0 24px;margin-bottom:24px;border-bottom:1px solid #ddd}.level-editor label{flex:1;min-width:200px}.level-editor button{min-height:46px;padding:10px 18px;background:#172A3A;color:white;border:0;border-radius:5px}.level-editor p{width:100%;margin:0}.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.photo-grid figure{margin:0;border:1px solid #ddd;border-radius:8px;overflow:hidden}.photo-grid figure img{width:100%;height:220px;object-fit:contain;background:#f1f0e9}.photo-grid figcaption{padding:16px;overflow-wrap:anywhere}.review-details{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0}.review-details section{background:#f4f6f3;border-radius:8px;padding:20px}.room-tabs{border-bottom:1px solid #ddd}.journey-panel p{line-height:1.6}.record-id{font-size:11px}.floor-workspace{grid-template-columns:1fr 1fr}input,select,textarea{max-width:100%;box-sizing:border-box}button:disabled{opacity:.55;cursor:not-allowed}#room-review>button{min-height:48px;background:#172A3A;color:white;padding:12px 20px;border:0;border-radius:5px}.footer{margin-top:30px}#workspace>.journey-panel{grid-column:auto}
@media(max-width:650px){.page-shell{padding:0 16px}.global-nav{display:grid;grid-template-columns:1fr 1fr}.global-nav button{padding:10px 8px;font-size:12px}.journey-nav{gap:3px}.journey-nav button{font-size:12px;padding:9px}.journey-heading h1{font-size:31px}.journey-panel{padding:18px}.property-panel .selection-list,.room-panel .selection-list,.photo-grid,.review-details,.floor-workspace{grid-template-columns:1fr}.room-tabs button{font-size:12px;padding:8px}.level-editor{gap:10px}.photo-grid figure img{height:auto;max-height:360px}.brand-product{font-size:25px}.header-tags{display:none}}
.level-editor label,.level-controls label,#room-form>label:first-child{display:flex;flex-direction:column;gap:8px;font-weight:600}.level-editor input,.level-controls select,#room-floor{width:100%;min-height:46px;border:1px solid #bdc9cf;border-radius:5px;padding:10px 12px;font:inherit;background:#fff;color:#172A3A}.level-editor label{max-width:480px}

/* Read-only education suspends, rather than rebuilds, the record workspace. */
body.after-loss-open #workspace,
body.after-loss-open .journey-nav,
body.after-loss-open .journey-heading,
body.after-loss-open .room-tabs,
body.after-loss-open #app-status,
body.after-loss-open #app-error,
body.after-loss-open #zip-cancel { display: none !important; }
.after-loss-page { padding: 18px 0 28px; }
.loss-intro { max-width: 850px; margin: 26px 0 20px; }
.loss-intro > p:not(.eyebrow):not(.context-note) { font-size: 19px; }
.loss-intro .context-note { font-size: 14px; }
.loss-safety { padding: 18px 22px; border-left: 4px solid var(--amber); background: var(--amber-soft); border-radius: 6px; }
.loss-safety strong { display: block; color: var(--navy); }
.loss-jump { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 20px 0; }
.loss-jump a { color: var(--navy); font-weight: 650; text-underline-offset: 4px; padding: 6px 0; }
.after-loss-page > .panel { margin: 0 0 20px; padding: 26px; scroll-margin-top: 20px; }
.loss-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 36px; }
.after-loss-page h2 { font-size: 25px; line-height: 1.25; color: var(--navy); margin: 0 0 16px; }
.after-loss-page h3 { color: var(--navy); margin: 10px 0 6px; font-size: 18px; }
.after-loss-page p { max-width: 85ch; }
.loss-grid p { margin-top: 0; font-size: 16px; }
.loss-ref { color: var(--secondary); font-size: 13px; white-space: nowrap; }
.loss-free { border-top: 1px solid var(--stroke); padding-top: 16px; }
.loss-sources summary { cursor: pointer; color: var(--navy); font-weight: 700; font-size: 18px; }
.loss-sources li { margin: 18px 0; }
.loss-sources li span { display: block; overflow-wrap: anywhere; font-size: 13px; color: var(--secondary); }
.after-loss-page :is(a,summary,[tabindex]):focus-visible { outline: 3px solid #296FB4; outline-offset: 4px; }

@media (max-width: 640px) {
  .loss-grid { grid-template-columns: 1fr; gap: 4px; }
  .after-loss-page > .panel { padding: 20px; }
  .loss-intro { margin-top: 22px; }
  .loss-jump { gap: 4px 18px; }
}

/* Bounded, temporary ITV questionnaire; preserve suspended record forms. */
body.itv-open :is(#workspace,.journey-nav,.journey-heading,.room-tabs,#app-status,#app-error,#zip-cancel) { display:none !important; }
.itv-page { padding:24px 0; }
.itv-page h1 { margin-top:18px; }
.itv-notice { background:var(--amber-soft); border-left:4px solid var(--amber); padding:16px; }
.itv-nav { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0; }
.itv-page button { border:1px solid var(--stroke); border-radius:7px; padding:12px 16px; min-height:44px; color:var(--navy); background:white; }
.itv-nav [aria-current] { color:white; background:var(--navy); }
.itv-step h2 { font-size:26px; }
.itv-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:20px; }
.itv-field { min-width:0; padding:16px; margin:0; border:1px solid var(--stroke); border-radius:8px; }
.itv-field legend { font-weight:700; padding:0 5px; }
.itv-field :is(textarea,select,input:not([type=checkbox])) { width:100%; min-width:0; min-height:44px; border:1px solid #9eacb7; border-radius:5px; padding:9px; background:white; color:var(--navy); margin:6px 0; }
.itv-field label { display:block; font-size:14px; }
.itv-field textarea { resize:vertical; }
.itv-help { font-size:14px; color:var(--secondary); margin:4px 0 12px; }
.itv-material { display:grid; grid-template-columns:24px minmax(0,1fr) 100px; align-items:center; gap:8px; }
.itv-material input[type=checkbox] { width:20px; height:20px; }
.itv-page details { margin:24px 0; }
.itv-page summary { cursor:pointer; padding:12px; font-weight:700; }
.itv-actions,.itv-export-actions { display:flex; flex-wrap:wrap; gap:12px; margin:20px 0; }
.itv-service { margin-top:24px; }
.itv-review-section dt { font-weight:700; margin-top:14px; }
.itv-review-section dd { margin:3px 0 12px; white-space:pre-wrap; overflow-wrap:anywhere; }
.itv-page [tabindex]:focus-visible { outline:3px solid #296FB4; outline-offset:4px; }
@media(max-width:650px) { .itv-fields { grid-template-columns:1fr; } .itv-nav button { flex:1 1 45%; text-align:left; } .itv-step { padding:16px; } }
@media print {
 body.itv-print { background:white; font-size:10pt; }
 body.itv-print .site-header,body.itv-print .page-shell > :not(#itv-page),body.itv-print #itv-page > :not(#itv-review),body.itv-print .itv-export-actions { display:none !important; }
 body.itv-print #itv-page,body.itv-print #itv-review { display:block !important; padding:0; margin:0; box-shadow:none; border:0; }
 body.itv-print .page-shell { padding:0; max-width:none; }
 body.itv-print dt { break-after:avoid; }
 body.itv-print dd { break-inside:avoid; }
 body.itv-print h3 { break-after:avoid; }
 @page { size:letter; margin:0.65in; }
}

@media print { body.itv-print .itv-export-heading { display:none; } }
.itv-import { margin:18px 0; }
.itv-import input[type=file] { max-width:100%; }
#itv-import-preview { margin-top:14px; padding:14px; border:1px solid var(--stroke); overflow-wrap:anywhere; }
#itv-import-preview button { margin:8px 8px 0 0; }

/* Local field-copy review; source snapshots stay readable on narrow screens. */
.itv-prefill-field { margin: 1rem 0; padding: 1rem; min-width: 0; }
.itv-prefill-field p, .itv-origin, #itv-prefill-preview { overflow-wrap: anywhere; }
.itv-origin { border-left: 3px solid #C98A22; padding-left: .75rem; font-size: .9rem; }
.itv-origin:empty { display: none; }
.itv-prefill .check-choice { display: flex; align-items: flex-start; gap: .6rem; margin: .75rem 0; }
.itv-prefill input[type=checkbox] { flex: 0 0 auto; }
@media print { .itv-prefill { display: none !important; } }

/* Optional navigation uses the existing navy/amber record styling. */
.optional-property { margin-top:24px; border:1px solid var(--stroke); border-radius:8px; }
.optional-property > summary,.service-menu summary { cursor:pointer; padding:14px 16px; min-height:48px; font-weight:700; color:var(--navy); }
.optional-property > summary { background:#f4f6f3; border-radius:8px; }
.optional-property > .feature-panel { margin:0; padding:20px; border:0; box-shadow:none; }
.optional-property > button { margin:0 20px 20px; }
summary:focus-visible { outline:3px solid #296FB4; outline-offset:3px; }
.service-menu { min-width:0; max-width:100%; border:1px solid transparent; border-radius:8px; }
.service-menu[open] { flex:1 1 100%; border-color:var(--stroke); background:white; }
.service-menu > summary { text-align:center; }
.service-categories { max-width:760px; margin:auto; padding:0 20px 20px; text-align:left; overflow-wrap:anywhere; }
.global-nav .service-categories > button:first-child { width:100%; text-align:left; border-color:var(--stroke); background:#f4f6f3; }
.service-categories p,.service-categories li { font-size:14px; line-height:1.6; }
.service-categories > details { border:1px solid var(--stroke); border-radius:7px; margin:16px 0; padding:0 14px; }
.service-categories > details > summary { padding:12px 0; }
.contents-offerings { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.contents-offerings > li { padding:14px; border:1px solid var(--stroke); border-radius:7px; background:var(--background); }
.contents-offerings h3 { margin:0; color:var(--navy); font-size:16px; line-height:1.4; }
.contents-offerings .contents-price { margin:8px 0; color:var(--navy); font-size:18px; font-weight:750; }
.contents-offerings p:last-child { margin-bottom:0; }
#contents-inventory-article { color:var(--navy); text-underline-offset:3px; }
#contents-inventory-article:focus-visible { outline:3px solid #296FB4; outline-offset:3px; }
.itv-page > .itv-return { position:sticky; top:8px; z-index:2; background:var(--navy); color:white; border-color:var(--navy); box-shadow:var(--shadow); }
@media(max-width:650px) {
 .service-menu > summary { font-size:12px; padding:10px 8px; }
 .service-menu[open] { grid-column:1 / -1; }
 .service-categories { padding:0 12px 16px; }
 .contents-offerings { grid-template-columns:minmax(0,1fr); }
 .optional-property > .feature-panel { padding:16px; }
 .optional-property > button { margin:0 16px 16px; }
}

.photo-quality-control { flex: 1 0 100%; min-width: 0; }
.photo-quality-control select { width: 100%; min-height: 48px; }
.photo-quality-control label { display: block; font-weight: 700; margin-bottom: .4rem; }
.photo-meta .context-note { overflow-wrap: anywhere; }
.export-cancel { position: fixed; bottom: 16px; right: 16px; max-width: calc(100vw - 32px); z-index: 20; box-shadow: 0 4px 20px #172a3a33; }
#backup-advanced { border: 1px solid var(--stroke); border-radius: 8px; padding: 12px; margin: 20px 0; }
#backup-advanced > summary { min-height: 44px; cursor: pointer; padding: 10px 0; font-weight: 650; }
#pdf-share-help { font-size: 14px; }
summary:focus-visible { outline: 3px solid #296fb4; outline-offset: 3px; }
[aria-labelledby="data-controls-heading"] button { font-size: 14px; min-height: 44px; }
[aria-labelledby="data-controls-heading"] summary { min-height: 44px; padding: 10px 0; cursor: pointer; }
[aria-labelledby="data-controls-heading"] input[type=file] { display: block; max-width: 100%; min-height: 44px; }
.pdf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.pdf-actions button { flex: 1 1 140px; }
@media (max-width: 480px) { #zip-prepare, #zip-save { width: 100%; } }

/* Contents links reuse saved photo records; thumbnails are presentation only. */
#contents-photo-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.75rem; }
#contents-photo-choices .check-choice { display:flex; flex-wrap:wrap; align-items:center; padding:.6rem; border:1px solid #aab4bd; border-radius:.5rem; overflow-wrap:anywhere; }
#contents-photo-choices img { width:100%; height:120px; object-fit:contain; background:#f0f2f4; }
.room-position-buttons { margin:1rem 0; }
.room-position-buttons button { min-height:44px; margin:.25rem; }
#data-import-preview,#data-delete-effects { white-space:pre-wrap; overflow-wrap:anywhere; }

.educational-logo { display:block; width:min(100%,280px); height:auto; margin-bottom:1rem; }

.site-header .brand { align-items:flex-start; flex-direction:column; gap:6px; }
.brand-provider { font-size:12px; color:var(--navy); }

/* Optional homeowner guide: readable single column, visible next steps. */
.guide-steps { padding-left: 1.5rem; }
.guide-steps > li { margin-bottom: 1.5rem; }
.guide-steps h3 { margin-bottom: .4rem; }
#how-it-works p { max-width: 75ch; }
#how-it-works button, .start-here-note button { margin: .3rem .4rem .3rem 0; }
#restore-status:not(:empty) { border-left: 4px solid #C98A22; padding: .8rem; background: #fff7e8; overflow-wrap: anywhere; }
#dwelling-service-info { max-width: 75ch; }

/* Service information stays outside the sticky primary navigation. */
.global-nav { position:sticky; top:0; z-index:5; background:#f7f6f2; padding-top:8px; }
.service-menu { border:1px solid var(--stroke); background:white; padding:20px; margin:16px 0; }
.service-menu > h1 { font:30px Georgia,serif; }
.service-menu .service-categories { max-width:760px; padding:0; margin:0; }

#journey-title,#expert-heading,#how-it-works-heading,#services-heading,#after-loss-heading,#itv-heading { scroll-margin-top:150px; }
.external-note { font-size:12px; font-weight:400; }
.brand-provider a,.professional-contact { color:var(--navy); text-underline-offset:3px; }
.contact-path { font-size:14px; margin:12px 0; }
.contact-path small { color:var(--muted); }
@media(max-width:650px) { .service-menu { padding:16px; } .brand-provider .external-note { display:block; } }

.brand-provider a,.professional-contact { display:inline-block; min-height:44px; padding:8px 0; }
.after-loss-page [id],.itv-step [tabindex="-1"] { scroll-margin-top:150px; }

.privacy-dialog { width:min(46rem,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:24px; border:2px solid #172A3A; border-radius:10px; color:#172A3A; background:white; }
.privacy-dialog::backdrop { background:rgb(23 42 58 / .55); }
.privacy-dialog p { line-height:1.5; }
.privacy-dialog a { color:#172A3A; }
.privacy-actions { position:sticky; bottom:-24px; background:white; padding:12px 0; }
.privacy-entry { margin:8px 0; }
.guidance-video { border:1px solid var(--stroke); padding:16px; border-radius:8px; margin:16px 0 24px; }
.guidance-video video { width:100%; max-height:70vh; background:#172A3A; }
.guidance-video a { color:#172A3A; overflow-wrap:anywhere; }
@media(max-width:650px) { .privacy-dialog { padding:16px; } .privacy-actions { bottom:-16px; } }

/* One clear next action; ordinary editing and optional actions remain navy. */
.next-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
button.next-step,#room-review>button.next-step{background:#087b2c;color:#fff;border:2px solid #087b2c;min-height:48px;padding:12px 20px;border-radius:6px;white-space:normal;font-size:16px;line-height:1.35;font-weight:750}
button.next-step:hover{background:#056322;border-color:#056322}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #135f9b;outline-offset:3px}
.storage-warning{padding:12px 16px;border:2px solid #a43d36;border-left-width:6px;border-radius:6px;background:#fff4f2;color:#742b26}
#room-floor-custom{width:100%;min-height:46px;font:inherit;padding:10px;border:1px solid #bdc9cf;border-radius:5px}
#room-review>button.secondary-cta{background:#fff;color:#172A3A;border:1px solid #8395a2;margin:12px}
@media(max-width:450px){.next-actions>button{width:100%}button.next-step{max-width:100%}}

/* Clear choices without competing with the green next step. */
a.next-step{display:inline-flex;align-items:center;justify-content:center;background:#087b2c!important;color:#fff!important;border:2px solid #087b2c;border-radius:6px;min-height:48px;padding:12px 20px;box-sizing:border-box;font-weight:700;text-decoration:none}
a.next-step:hover{background:#056322!important}
.cta-secondary{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;box-sizing:border-box;min-height:48px;padding:11px 16px;background:#fff;color:#075c24;border:2px solid #087b2c;border-radius:6px;font:inherit;font-weight:700;text-decoration:none;text-align:center;cursor:pointer}
.cta-secondary:hover{background:#eaf7ee}
.callout-link{color:#075c24;font-weight:700;text-underline-offset:3px}
.video-thumbnail{display:block;max-width:720px;border:2px solid #172A3A;border-radius:8px;overflow:hidden;text-decoration:none;background:#172A3A}
.video-preview{display:block;position:relative}.video-thumbnail img{display:block;width:100%;height:auto}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border:3px solid white;border-radius:50%;background:#172a3aeb;color:white;font-size:30px;padding-left:4px;box-sizing:border-box}
.guidance-video .video-thumbnail>strong{display:block;padding:12px 16px;color:white}.video-thumbnail .external-note{color:white}
.written-video-summary{margin-top:16px}.written-video-summary>summary{font-weight:700;color:#075c24;padding:12px 0;min-height:44px;box-sizing:border-box}
.inline-video{margin-top:12px}.help-choices{display:grid;grid-template-columns:1fr 1fr;gap:20px}.help-choices>div{padding:16px;border:1px solid #bdc9cf;border-radius:8px}
.backup-repeat{margin:24px 0;padding:16px;border-top:1px solid #bdc9cf}
button.destructive-action,#contents-discard{color:#9e2b24;background:#fff;border:2px solid #a43d36}
.cta-secondary:focus-visible{outline:3px solid #135f9b;outline-offset:3px}
@media(max-width:650px){.help-choices{grid-template-columns:1fr}.next-actions>.cta-secondary,.next-actions>a.next-step{width:100%}.video-play{width:52px;height:52px;font-size:24px}}

.after-loss-page [data-after-loss-return]{min-height:48px}

.next-actions>.secondary-cta{min-height:48px;font-size:14px}

/* Selected location is neutral across menus; green is reserved for actions. */
:is(.global-nav,.journey-nav,.room-tabs) button[aria-current="page"],
.itv-nav button[aria-current="step"] { background:#e7ecef; color:#172A3A; border:2px solid #172A3A; font-weight:750; }
.brand-start { display:block; max-width:100%; padding:0; border:0; border-radius:4px; background:transparent; }
.educational-logo-link { display:block; width:fit-content; max-width:100%; border-radius:4px; }
.contact-path .callout-link { color:#075c24; }
.next-step .external-note { font-size:12px; font-weight:400; }
#dwelling-service-info #itv-open { margin-top:16px; }
@media(max-width:650px) { .global-nav button,.journey-nav button,.room-tabs button { font-size:14px; } }

/* Safety guidance precedes optional professional contact on the loss page. */
body.after-loss-open .contact-path { display:none; }

a.next-step { flex-direction:column; gap:4px; text-align:center; line-height:1.4; }
#ask-education-open { margin-bottom:20px; }
@media(max-width:650px) {
  #journey-title,#expert-heading,#how-it-works-heading,#services-heading,#after-loss-heading,#itv-heading,
  .after-loss-page [id],.itv-step [tabindex="-1"] { scroll-margin-top:190px; }
}

/* Working controls precede secondary information; existing navigation stays intact. */
#backup-result{flex-basis:100%;width:100%;overflow-wrap:anywhere;color:#172A3A}
#backup-result .status{margin:8px 0;padding:12px;border:1px solid #8395a2;border-radius:6px;background:#fff}
.home-information{margin:20px 0}.home-information>summary,#room-floor-settings>summary{padding:12px;min-height:44px}
.global-nav{position:static;margin:0;padding:8px 0}
.header-inner{padding:8px 24px}.brand-logo{width:160px}
.site-header .brand{flex-direction:row;align-items:center;gap:16px}
.journey-nav{margin:8px 0}.journey-heading{margin:12px 0}
.journey-heading p{margin:4px 0}.start-here-note{margin:0 0 8px}
#journey-title,#expert-heading,#how-it-works-heading,#services-heading,#after-loss-heading,#itv-heading{scroll-margin-top:12px}
#property-form input,#property-form button,.photo-actions label{min-height:44px}
.privacy-access{position:static;display:block;margin:4px 0 8px}
.privacy-access button{min-height:44px;padding:8px;font-size:12px;background:#fff;color:#172A3A;border:1px solid #8395a2}
.onboarding-start-copy{display:block;margin-top:8px}
#zip-cancel:not([hidden]){position:fixed;bottom:64px;left:16px;z-index:11;min-height:44px;background:#fff;border:2px solid #172A3A}
/* Claude track: "Cancel backup operation" floats over the page. Opening the backup screen un-hides it even
   when no backup is being prepared; it is then switched off and has nothing to cancel, so do not show it. */
#zip-cancel:disabled{display:none}
#restore-result .status,#delete-result .status{padding:12px;border:1px solid #8395a2;border-radius:6px;background:white}
#room-floor-settings:has(input:focus-visible)>summary{outline:3px solid #135f9b}

@media(max-width:650px){
 .header-inner{padding:8px 16px}.site-header .brand{flex-direction:row;align-items:center;gap:8px}.brand-logo{width:110px}.brand-provider{font-size:11px;flex:1}
 .page-shell{padding:0 16px 24px}.global-nav{gap:4px;padding:6px 0;margin:0;display:grid;grid-template-columns:1fr 1fr}
 .global-nav button{min-height:44px;padding:6px;font-size:14px}
 .journey-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:8px 0}.journey-nav button{padding:6px;font-size:14px;min-height:44px;white-space:normal}
 .journey-heading{margin:12px 0}.journey-heading h1{font-size:26px}.journey-heading p{margin:4px 0}
 .start-here-note{margin:0 0 8px}.panel{padding:16px}
 input,select,textarea{font-size:16px}
 #journey-title,#expert-heading,#how-it-works-heading,#services-heading,#after-loss-heading,#itv-heading{scroll-margin-top:12px}
 .room-tabs{gap:4px}.room-tabs button{min-height:44px;padding:6px}
}

/* ==== Claude track: button colour roles (approved by Jeffrey, November 12, 2026; add buttons made green after
   his phone test the same evening) ====
   Green, filled  = the next step, the main action on a screen, or add something (add buttons carry a plus sign).
   Gold, filled   = an optional side path, a fork from the main path: Choose photos, Choose Existing Photo,
                    Optional: Add Measurements.
   Red, outline   = delete, remove, discard or clear; filled red only on the final confirmation.
   Grey outline   = cancel, back, close and other secondary actions (.secondary-cta, unchanged).
   Navy is left to menus and tabs.
   Colour is never the only cue: fills and outlines differ, add buttons carry a plus sign,
   and every button keeps its words. */
button.primary-cta, a.primary-cta, label.primary-cta { background:#087b2c; border-color:#087b2c; color:#fff; }
button.primary-cta:hover, a.primary-cta:hover, label.primary-cta:hover { background:#056322; border-color:#056322; }
/* Photographs: taking a photo is the main path (green); choosing existing ones is the side path (gold). */
label.secondary-cta[for="photos-input"] { background:#F2C230; border:1px solid #B88A00; color:#172A3A; font-weight:750; }
label.secondary-cta[for="photos-input"]:hover { background:#E5B41F; }
label[for="contents-camera-input"], label[for="contents-photo-input"] {
  display:inline-flex; align-items:center; justify-content:center; position:relative; min-height:44px; margin:6px 8px 6px 0;
  padding:10px 14px; border-radius:7px; font-size:14px; font-weight:750; cursor:pointer; }
label[for="contents-camera-input"] { background:#087b2c; border:1px solid #087b2c; color:#fff; }
label[for="contents-camera-input"]:hover { background:#056322; }
label[for="contents-photo-input"] { background:#F2C230; border:1px solid #B88A00; color:#172A3A; }
label[for="contents-photo-input"]:hover { background:#E5B41F; }
label[for="contents-photo-input"]::before { content:"+ "; white-space:pre; }
label[for="contents-camera-input"] > input, label[for="contents-photo-input"] > input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
label[for="contents-camera-input"]:focus-within, label[for="contents-photo-input"]:focus-within { outline:3px solid #296FB4; outline-offset:3px; }
/* Add buttons are green (Jeffrey's phone test, November 12, 2026: "Any add button should be green and not gold").
   #contents-new ("+ Add a belonging") is a .primary-cta, so it is green from the rule above. :not(:disabled) keeps
   this hover ahead of the navy .add-button hover near the top of this file. */
button.add-button { background:#087b2c; border:1px solid #087b2c; color:#fff; font-weight:750; }
button.add-button:not(:disabled):hover { background:#056322; border-color:#056322; color:#fff; }
button.add-button::before, #contents-new::before { content:"+ "; }
/* An optional side path stays gold. */
.next-actions .secondary-cta[data-route="measurements"] {
  background:#F2C230; border:1px solid #B88A00; color:#172A3A; font-weight:750; }
.next-actions .secondary-cta[data-route="measurements"]:hover {
  background:#E5B41F; border-color:#B88A00; color:#172A3A; }
.delete-photo, .danger-button, .destructive-action, #contents-discard, #itv-prefill-reset, #preferences-withdraw {
  background:#fff; color:#a12c30; border:2px solid #a12c30; }
.delete-photo:hover, .danger-button:hover, .destructive-action:hover, #contents-discard:hover, #itv-prefill-reset:hover, #preferences-withdraw:hover {
  background:#FBEDEE; color:#a12c30; }
#data-delete-confirm:not(:disabled) { background:#a12c30; color:#fff; }
#data-delete-confirm:not(:disabled):hover { background:#86242a; color:#fff; }
/* Filled navy buttons that are not menus become plain outline buttons. */
#data-export.primary-cta, .itv-page > button.itv-return { background:#fff; color:#172A3A; border:1px solid #A6B6C2; }
#data-export.primary-cta:hover, .itv-page > button.itv-return:hover { background:#F1F5F7; }
/* The one filled navy save button becomes green like the other main actions. */
#room-floor-form.level-editor button { background:#087b2c; color:#fff; }
#room-floor-form.level-editor button:hover { background:#056322; }

/* ==== Claude track: select several photographs and delete them together ==== */
.photo-bulk { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px; }
.photo-bulk[hidden] { display:none; }
.photo-bulk button { min-height:44px; }
.photo-select { display:inline-flex; align-items:center; gap:6px; min-height:32px; margin-right:10px; font-size:12px; font-weight:650; color:#172A3A; cursor:pointer; }
.photo-select input { width:20px; height:20px; margin:0; }
.photo-controls .delete-photo { padding:5px 9px; border-width:1px; border-radius:5px; text-decoration:none; }

/* ==== Claude track: screen notes after Jeffrey's phone test (November 12, 2026) ==== */
/* The voice-typing tip names the phone's keyboard, so it shows only on devices with a touch screen
   (any-pointer, so a phone with a stylus or a tablet with a trackpad still shows it). */
.voice-tip { display:none; margin:8px 0 0; font-size:14px; line-height:1.4; color:#44525F; }
@media (any-pointer: coarse) { .voice-tip { display:block; } }
.photo-tips { flex: 1 0 100%; min-width: 0; }
.photo-tips > summary { box-sizing:border-box; min-height:44px; padding:10px 0; cursor:pointer; }
.photo-tips ul { margin:0 0 10px; padding-left:22px; }
.photo-tips li { line-height:1.45; }
.photo-tips li + li { margin-top:4px; }
/* Both backup buttons carry these two notes; the red one shows only in the Android app (data-controls-ui.mjs). */
/* Claude track slice 23: the time note is a yellow callout so it is not missed (Jeffrey, November 14, 2026). */
.backup-time-note { margin:12px 0 0; padding:12px 16px; border:2px solid #C98A22; border-left-width:6px; border-radius:6px; background:#FFF3DE; color:#4A3410; font-weight:650; }
.android-save-reminder { margin:12px 0 0; font-weight:700; }
/* Claude track slice 15 (plan step 1.3): Import Home Record is a side path beside Start with One Room,
   so it takes the gold side-path look from slice 5, sized like the green Start button next to it. */
button.import-home-record { background:#F2C230; border:2px solid #B88A00; color:#172A3A; border-radius:6px; min-height:48px; padding:12px 20px; white-space:normal; font-size:16px; line-height:1.35; font-weight:750; }
button.import-home-record:hover { background:#E5B41F; }
.onboarding-start { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; }
.onboarding-start .onboarding-start-copy { flex-basis:100%; margin-top:0; }
.import-home-line { margin:14px 0 0; }
.import-home-line button.import-home-record { display:flex; margin-top:8px; min-height:44px; padding:10px 16px; font-size:15px; }
@media(max-width:450px){ .onboarding-start > button { width:100%; } }
#move-backup-help ul { padding-left:20px; }
#move-backup-help li + li { margin-top:6px; }
/* Claude track slice 16: the After a Loss address wraps on a narrow phone instead of widening the page. */
.loss-site-pointer a { overflow-wrap:anywhere; }
/* Claude track slice 17 (plan step 1.14): the yearly reminder offer after a backup; gold, an optional side path (slice 5 roles). */
.yearly-reminder { margin:14px 0; padding:14px 16px; border-left:4px solid #C98A22; border-radius:9px; background:#FFF3DE; }
.yearly-reminder h3 { margin-top:0; }
button.yearly-reminder-add { background:#F2C230; border:2px solid #B88A00; color:#172A3A; border-radius:6px; min-height:48px; padding:12px 20px; white-space:normal; font-size:16px; line-height:1.35; font-weight:750; cursor:pointer; }
button.yearly-reminder-add:hover { background:#E5B41F; }
/* Claude track slice 19: rename or delete the selected room, at the foot of the Room work screen. */
.room-edit { margin-top:18px; padding-top:12px; border-top:1px solid #d8dfe5; }
.room-edit > summary { cursor:pointer; font-weight:700; min-height:44px; display:flex; align-items:center; }
.room-edit .room-delete-title { margin:16px 0 4px; font-size:16px; }
.room-delete-confirm { margin-top:10px; padding:12px 14px; border:1px solid #a12c30; border-radius:9px; background:#fff4f3; }
.room-delete-confirm p { margin-top:0; }
button.room-delete-yes { background:#a12c30; border:1px solid #a12c30; color:#fff; font-weight:750; }
button.room-delete-yes:hover { background:#86232a; color:#fff; }
button.room-rename-save { flex:none; border:1px solid #087b2c; background:#087b2c; color:#fff; border-radius:7px; padding:0 16px; font-size:14px; font-weight:750; min-height:44px; }
button.room-rename-save:hover { background:#056322; }
/* Claude track slice 20 (plan step 1.4): the two copies side by side when a backup's home is already on this device. */
.replace-panel { margin:14px 0; padding:14px 16px; border:1px solid #c98a22; border-left:4px solid #c98a22; border-radius:9px; background:#fff8ec; }
.replace-panel h3 { margin-top:0; }
.replace-compare { width:100%; border-collapse:collapse; margin:10px 0 14px; font-size:14px; table-layout:fixed; }
.replace-compare th, .replace-compare td { padding:6px 8px; border-bottom:1px solid #e3d2b4; text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.replace-compare thead th { font-size:13px; color:#5a6874; }
.replace-compare tbody th { font-weight:650; width:34%; }
.replace-compare td.replace-differs { font-weight:750; color:#172a3a; }
button.replace-run { background:#a12c30; border:1px solid #a12c30; color:#fff; font-weight:750; }
button.replace-run:hover { background:#86232a; color:#fff; }
button.replace-run:disabled { background:#d9b9ba; border-color:#d9b9ba; color:#fff; }
/* Claude track slice 21 (plan step 1.10): the 14-day backup reminder and the move-it-off-this-computer note. */
.backup-reminder { margin:10px 0 14px; padding:14px 16px; border:1px solid #c98a22; border-left:4px solid #c98a22; border-radius:9px; background:#fff3de; color:#4a3410; }
.backup-reminder h2 { margin:0 0 6px; font-size:18px; color:#172a3a; }
.backup-reminder p { margin:0 0 10px; }
.downloads-move-note { margin-top:12px; }

/* ==== Claude track slice 24 (plan step 1.6): the wide-screen layout Jeffrey approved on November 14, 2026 ==== */
/* Phones (650 px and narrower) are unchanged: the left pane's own parts are hidden and its box takes no space
   (display: contents), so the step bar shows exactly where it did. The pane is built by wide-layout.mjs. */
.app-rail { display:contents; }
.rail-home, .rail-label, .rail-rooms { display:none; }
/* Tablets held upright: slightly tighter step buttons, so all six fit on one line where there is room. */
@media (min-width: 651px) and (max-width: 1099px) {
  .journey-nav button { padding:10px 11px; }
}
/* Wide screens (1,100 px and wider, including a tablet turned sideways): two panes. */
@media (min-width: 1100px) {
  .site-header .header-inner { max-width:1440px; padding:14px 32px; }
  .page-shell { max-width:1440px; padding:0 32px 32px; }
  body:not(.after-loss-open):not(.itv-open) .page-shell.has-rail { display:grid; grid-template-columns:236px minmax(0, 1fr); grid-template-rows:auto repeat(12, auto) 1fr; column-gap:28px; align-items:start; }
  .page-shell.has-rail > * { grid-column:2; min-width:0; }
  .page-shell.has-rail > :is(.global-nav, .home-information, .footer) { grid-column:1 / -1; }
  .page-shell.has-rail > .global-nav { margin:10px 0 0; padding-bottom:10px; }
  .page-shell.has-rail > .app-rail { display:block; grid-column:1; grid-row:2 / -1; position:sticky; top:16px; align-self:start; margin-top:16px; max-height:calc(100vh - 32px); overflow:auto; box-sizing:border-box; padding:16px 12px; background:#fff; border:1px solid #d9dfdd; border-radius:10px; }
  body.after-loss-open .app-rail, body.itv-open .app-rail { display:none !important; }
  .app-rail .rail-home, .app-rail .rail-label, .app-rail .rail-rooms { display:block; }
  .rail-label { margin:0 0 6px 8px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8a5a12; }
  .rail-home { padding:2px 8px 14px; margin-bottom:12px; border-bottom:1px solid #e3e7e5; }
  .rail-home .rail-label { margin-left:0; }
  .rail-home-name { margin:0; font:600 22px/1.2 Georgia, serif; color:#172A3A; overflow-wrap:anywhere; }
  .rail-home-meta { margin:3px 0 0; font-size:13px; color:#657571; }
  .app-rail .journey-nav { flex-direction:column; flex-wrap:nowrap; gap:2px; margin:0 0 12px; padding-bottom:12px; border-bottom:1px solid #e3e7e5; }
  .app-rail .journey-nav button { width:100%; min-height:42px; padding:9px 10px; text-align:left; font-size:15px; }
  .rail-floor-name { margin:8px 8px 4px; font-size:12px; font-weight:600; color:#657571; overflow-wrap:anywhere; }
  .rail-room { display:block; width:100%; min-height:40px; padding:8px 10px; border:0; border-left:3px solid transparent; border-radius:0 6px 6px 0; background:transparent; color:#172A3A; font:inherit; font-size:15px; text-align:left; overflow-wrap:anywhere; cursor:pointer; }
  .rail-room:hover { background:#f1f4f2; }
  .rail-room[aria-current="true"] { background:#f1f4f2; border-left-color:#c8902a; font-weight:700; }
  .rail-add { display:block; margin:8px 0 2px; padding:8px 10px; min-height:40px; border:0; background:transparent; color:#087b2c; font:inherit; font-size:14px; font-weight:700; text-align:left; cursor:pointer; }
  .rail-add:hover { text-decoration:underline; }
  /* A shorter heading, with the Privacy button on the right, so the work starts higher on the screen. */
  .page-shell.has-rail .journey-heading { display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:24px; margin:14px 0 10px; }
  .page-shell.has-rail .journey-heading > * { grid-column:1; }
  .page-shell.has-rail .journey-heading > .privacy-access { grid-column:2; grid-row:1 / span 3; align-self:start; margin:0; }
  .page-shell.has-rail .journey-heading h1 { margin:4px 0; font-size:32px; }
  .page-shell.has-rail .journey-heading > p:last-child { margin:0; }
  .page-shell.has-rail .room-tabs { margin:8px 0 14px; }
  .page-shell.has-rail .journey-panel { padding:24px 28px; }
  /* Floors & rooms: three room cards across. Photographs: four across. */
  .room-panel .selection-list { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .photo-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .photo-grid figure img { height:190px; }
  /* Belongings: add on the left, what is saved on the right. A long saved list grows the last left-hand row
     (1fr), so the left side never gets gaps between its parts. */
  .contents-panel { display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows:repeat(6, auto) 1fr auto auto; column-gap:28px; align-items:start; }
  .contents-panel > * { grid-column:1 / -1; }
  .contents-panel > p { margin:0 0 10px; }
  .contents-panel > #contents-heading { grid-column:1; grid-row:1; }
  .contents-panel > #contents-heading + p { grid-column:1; grid-row:2; }
  .contents-panel > #contents-context { grid-column:1; grid-row:3; }
  .contents-panel > #contents-status { grid-column:1; grid-row:4; }
  .contents-panel > #contents-new { grid-column:1; grid-row:5; justify-self:start; }
  .contents-panel > #contents-editing { grid-column:1; grid-row:6; }
  .contents-panel > #contents-form { grid-column:1; grid-row:7; }
  .contents-panel > #contents-summary { grid-column:2; grid-row:1; margin-top:0; }
  .contents-panel > #contents-list { grid-column:2; grid-row:2 / 8; }
  .contents-panel > #contents-technical { grid-column:2; grid-row:8; }
  .contents-panel > .next-actions { grid-column:1 / -1; grid-row:9; }
}
/* Very wide screens (1,350 px and wider): the four top links sit in the header bar beside the logo. */
@media (min-width: 1350px) {
  .page-shell > .global-nav { position:absolute; top:19px; right:max(32px, calc(50% - 688px)); margin:0; padding:0; border:0; }
  .page-shell.has-rail > .app-rail { grid-row:1 / -1; }
}
/* Claude track slice 25 (plan step 1.7): drag photographs into a room (src/modules/photo-drop.mjs).
   The "drag photos here" box shows only with a mouse; phones and tablets are unchanged. While photographs are
   being dragged over the page, the places they can be dropped are outlined, and the one under the pointer is gold. */
.photo-drop { display: none; }
@media (hover: hover) and (pointer: fine) {
  .photo-drop { display: block; flex-basis: 100%; padding: 16px; border: 2px dashed #A6B6C2; border-radius: 8px; background: #F8FAFB; color: var(--navy); text-align: center; }
  .photo-drop p { margin: 0; }
  .photo-drop-title { font-weight: 750; }
  .photo-drop-help { margin-top: 3px; font-size: 13px; color: var(--secondary); }
}
body.photo-dragging .photos-panel.drop-ready { outline: 3px dashed var(--amber); outline-offset: 4px; }
body.photo-dragging [data-drop-room]:not(:disabled) { outline: 2px dashed var(--amber); outline-offset: 2px; }
.photos-panel.drop-target .photo-drop { border-color: var(--amber); background: var(--amber-soft); }
body.photo-dragging [data-drop-room].drop-target { outline: 3px solid var(--amber); background: var(--amber-soft); }