:root{
  --bone:#f1ebe0; --bone-deep:#e7dfd0; --ink:#14181c; --ink-soft:#3a4248;
  --graphite:#5a626a; --line:rgba(20,24,28,.14); --aqua-deep:#3f6770; --sand:#ddd2bc;
  --display:'Instrument Serif','Times New Roman',serif;
  --sans:'Instrument Sans',-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:rgba(63,103,112,.18)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--sans);background:var(--bone-deep);color:var(--ink);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
img[hidden]{display:none}   /* keep empty photo slots truly hidden */

/* ---- Toolbar (editor only, screen only) ---- */
.toolbar{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--bone);display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;padding:.85rem 1.25rem;box-shadow:0 2px 14px rgba(0,0,0,.2)}
.toolbar .tb-title{font-family:var(--display);font-size:1.25rem;margin-right:auto}
.toolbar .tb-title em{font-style:italic;color:var(--sand)}
.tb-actions{display:contents}
.tb-field{display:flex;align-items:center;gap:.4rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(241,235,224,.75)}
.tb-field input{font-family:var(--sans);font-size:16px;letter-spacing:.02em;text-transform:none;padding:.55rem .65rem;border:1px solid rgba(241,235,224,.4);background:rgba(255,255,255,.06);color:var(--bone);border-radius:4px;width:9rem;min-height:44px}
.tb-field input:focus{outline:none;border-color:var(--sand);background:rgba(255,255,255,.12)}
.tb-btn{font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;padding:.7rem 1.1rem;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(241,235,224,.4);background:transparent;color:var(--bone);cursor:pointer;transition:all .2s ease;border-radius:4px}
.tb-btn:hover{background:var(--bone);color:var(--ink)}
.tb-btn.primary{background:var(--aqua-deep);border-color:var(--aqua-deep)}
.tb-btn.primary:hover{background:var(--sand);border-color:var(--sand);color:var(--ink)}
.tb-hint{flex-basis:100%;font-size:.72rem;color:rgba(241,235,224,.6);letter-spacing:.02em}

/* ---- Page sheet ---- */
.sheet{width:min(900px,100%);margin:1.5rem auto;background:var(--bone);box-shadow:0 6px 40px rgba(0,0,0,.14)}
.pad{padding:2.5rem 2.75rem}

/* ---- Header ---- */
.doc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;border-bottom:2px solid var(--ink);padding-bottom:1.5rem}
.doc-head .logo{height:64px;width:auto}
.doc-head .head-right{text-align:right;font-size:.78rem;color:var(--ink-soft);line-height:1.5}
.doc-head .head-right strong{color:var(--ink)}
.doc-title{font-family:var(--display);font-size:clamp(2.2rem,5vw,3.2rem);line-height:.95;font-weight:400;letter-spacing:-.02em;margin:1.6rem 0 .4rem}
.doc-title em{font-style:italic;color:var(--aqua-deep)}
.doc-sub{color:var(--ink-soft);max-width:60ch;font-size:.95rem}

/* ---- Client fields ---- */
.client-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 2rem;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.field{display:flex;align-items:baseline;gap:.5rem;font-size:.9rem}
.field label{flex:0 0 auto;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);min-width:6.5rem}
.field .val{flex:1;border-bottom:1px solid var(--line);min-height:1.4em;outline:none;padding:.15rem .2rem;color:var(--ink)}
.field .val:focus{border-color:var(--aqua-deep);background:rgba(63,103,112,.05)}
.field .val:empty::before{content:attr(data-ph);color:#b9b1a1}

/* ---- Section ---- */
.sec{margin-top:2.5rem}
.sec-head{display:flex;align-items:baseline;gap:.9rem;border-bottom:1px solid var(--line);padding-bottom:.6rem;margin-bottom:1.25rem}
.sec-head h2{font-family:var(--display);font-size:1.75rem;font-weight:400;letter-spacing:-.01em}
.sec-head .sec-kicker{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--aqua-deep);font-weight:500}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.card{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;break-inside:avoid}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding-right:.55rem}
.card-name{flex:1;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--ink);padding:.7rem .85rem;outline:none}
.card-name[contenteditable]:focus{background:rgba(63,103,112,.06)}
.card-name:empty::before{content:attr(data-ph);color:#c2bbab}
.card-rm{flex:0 0 auto;width:1.85rem;height:1.85rem;font-size:1.2rem;line-height:1;border:1px solid var(--line);background:#fff;color:var(--graphite);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.card-rm:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.add-item{margin-top:1rem;width:100%;font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--aqua-deep);background:transparent;border:1px dashed var(--line);padding:.75rem;border-radius:3px;cursor:pointer;transition:all .2s ease}
.add-item:hover{border-color:var(--aqua-deep);background:rgba(63,103,112,.05)}

/* photo dropzone */
.photo{position:relative;aspect-ratio:4/3;background:var(--bone-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .ph-text{font-size:.74rem;color:var(--graphite);text-align:center;padding:1rem;letter-spacing:.02em}
.photo .ph-text span{display:block;font-size:1.6rem;margin-bottom:.35rem;color:var(--aqua-deep)}
.photo.has-img .ph-text{display:none}
.photo .rm{position:absolute;top:.45rem;right:.45rem;background:rgba(20,24,28,.8);color:#fff;border:none;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:.55rem .8rem;min-height:36px;cursor:pointer;border-radius:3px;display:none}
.photo.has-img .rm{display:block}
.photo.dragover{outline:2px dashed var(--aqua-deep);outline-offset:-6px}
.photo .upl{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(20,24,28,.55);color:#fff;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.photo.uploading .upl{display:flex}

.specs{padding:.6rem .85rem .9rem;display:grid;gap:.35rem}
.spec{display:flex;gap:.5rem;font-size:.85rem;align-items:baseline}
.spec label{flex:0 0 4.5rem;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.spec .val{flex:1;border-bottom:1px solid var(--line);outline:none;min-height:1.35em;padding:.1rem .15rem;color:var(--ink)}
.spec .val:focus{border-color:var(--aqua-deep);background:rgba(63,103,112,.05)}
.spec .val:empty::before{content:attr(data-ph);color:#c2bbab}

/* notes / care block */
.note-block{margin-top:1rem;border:1px solid var(--line);background:#fff;padding:1rem 1.1rem}
.note-block h3{font-family:var(--display);font-size:1.3rem;font-weight:400;margin-bottom:.6rem}
.note-block .val{outline:none;min-height:3.5em;color:var(--ink-soft);font-size:.9rem}
.note-block .val:empty::before{content:attr(data-ph);color:#c2bbab}

.foot{margin-top:2.5rem;border-top:2px solid var(--ink);padding-top:1.25rem;display:flex;justify-content:space-between;gap:1rem;font-size:.78rem;color:var(--ink-soft);flex-wrap:wrap}
.foot .fb{font-family:var(--display);font-size:1.4rem;color:var(--ink)}
.foot .fb em{font-style:italic;color:var(--aqua-deep)}
.foot a{color:var(--aqua-deep);text-decoration:none}

/* view-mode: read-only cleanup for the public customer page */
.view .val:empty::before{content:'' !important}
.view .photo{cursor:default}
.view .photo .rm,.view .photo .upl{display:none !important}
.view .photo:not(.has-img){display:none}      /* no empty "Add photo" boxes */
.view .ph-text{display:none}
.view .card.is-empty,.view .note-block.is-empty,.view .sec.is-empty{display:none}
.view .card-rm,.view .add-item{display:none !important}
.view .card-name:empty::before{content:'' !important}
.view .spec.is-empty,.view .field.is-empty{display:none}
.view .specs{padding-bottom:.7rem}

@media(max-width:680px){
  /* Toolbar stacks; not sticky on mobile so it doesn't eat the screen */
  .toolbar{position:static;flex-direction:column;align-items:stretch;gap:.55rem;padding:.85rem 1rem}
  .toolbar .tb-title{margin:0 auto;font-size:1.1rem;text-align:center}
  .tb-field{flex-direction:column;align-items:stretch;gap:.3rem}
  .tb-field input{width:100%}
  .tb-actions{display:flex;gap:.5rem}
  .tb-actions .tb-btn{flex:1;font-size:.66rem;letter-spacing:.05em;padding:.7rem .35rem}
  .tb-btn.primary{width:100%;font-size:.85rem;min-height:52px}
  .tb-hint{font-size:.75rem;line-height:1.5}

  .sheet{margin:.75rem auto}
  .pad{padding:1.5rem 1.15rem}
  .cards{grid-template-columns:1fr}
  .client-grid{grid-template-columns:1fr;gap:.6rem 0}
  .doc-head{flex-direction:column}
  .doc-head .head-right{text-align:left}

  /* roomier tap targets for typing on a phone */
  .field{font-size:1rem;flex-wrap:wrap}
  .field .val{min-height:2.2em;padding:.4rem .3rem}
  .spec{font-size:1rem}
  .spec .val{min-height:2em;padding:.35rem .2rem}
  .spec label{flex-basis:4rem}
  .note-block .val{min-height:5em}
  .card-name{font-size:.72rem}
}

/* ---- Print ---- */
@media print{
  @page{margin:14mm}
  body{background:#fff}
  .toolbar{display:none !important}
  .sheet{box-shadow:none;margin:0;width:100%}
  .pad{padding:0}
  .photo{cursor:default}
  .photo .rm{display:none !important}
  .photo:not(.has-img){background:#f4f0e7}
  .card,.note-block{box-shadow:none}
  .sec{margin-top:1.4rem}
  [contenteditable]:empty::before{content:'' !important}
}