/* The signing workspace: preparing a packet and placing fields on a page.
   Kept out of components.css because this surface wants room the generic
   sheet never had, and because a legal document being marked up is the one
   screen where the paper, not the chrome, has to dominate. */

.signwork{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;
  height:100%;min-height:0;width:100%;max-width:1400px;margin:0 auto;
  font-family:var(--sans);color:var(--charcoal)}

/* A panel that is not showing anything must take up no room at all. The old
   selected-field bar carried [hidden] while a display rule outranked it, so
   an empty outlined box sat on screen claiming a field was selected. */
.signwork [hidden]{display:none!important}

/* ---- top: where you are, and what you are looking at ---- */
.signwork__top{display:grid;gap:9px;padding-bottom:2px;border-bottom:1px solid var(--border)}
.signwork__steps{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none;
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--stone)}
.signwork__steps li{display:inline-flex;align-items:center;gap:6px}
.signwork__steps li+li::before{content:'';width:14px;height:1px;background:var(--border)}
.signwork__steps .is-done{color:var(--good)}
.signwork__steps .is-current{color:var(--amber-dark)}
.signwork__locate{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-bottom:9px}
.signwork__where{font-size:13px;font-weight:500;color:var(--charcoal);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.signwork__docpick{min-height:var(--tap);max-width:100%;padding:8px 10px;font:14px var(--sans);
  background:var(--white);border:1px solid var(--border);border-radius:6px;color:var(--charcoal)}
.signwork__docpick:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px}

/* ---- body: controls beside the paper, never on top of it ---- */
.signwork__body{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;min-height:0}
.signwork__panel{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0;
  overflow:auto;overscroll-behavior:contain;padding-right:3px}
.signwork__pages{overflow:auto;overscroll-behavior:contain;min-width:0;min-height:0;
  padding:2px;border-radius:8px;background:var(--cream)}

.signwork__legends{display:flex;flex-wrap:wrap;gap:5px 12px}
.signwork__legend{display:inline-flex;align-items:center;gap:5px;font-size:12.5px}
.signwork__legend::before{content:'';width:11px;height:11px;border-radius:3px;background:var(--who)}
.signwork__legend small{color:var(--stone)}
.signwork__eyebrow{display:block;margin:0;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stone)}

/* ---- add a field ---- */
.signwork__palette{display:grid;gap:8px;padding:11px;background:var(--white);
  border:1px solid var(--border);border-radius:8px}
.signwork__tools{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.signwork__tool{min-height:var(--tap);padding:8px 10px}
/* Armed is a state, not a focus ring: a filled chip plus an amber halo, so a
   tool that will plant a real signature box never looks the same as a button
   that merely has keyboard focus. */
.signwork__tool.is-armed{background:var(--charcoal);border-color:var(--charcoal);color:var(--cream);
  box-shadow:0 0 0 3px rgba(239,159,39,.45)}
.signwork__tool.is-armed:hover{background:var(--charcoal);color:var(--cream)}
.signwork__tool:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px}
.signwork__arming{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;padding:8px 10px;
  font-size:12.5px;line-height:1.4;background:rgba(239,159,39,.14);
  border:1px solid rgba(239,159,39,.45);border-left:3px solid var(--who,var(--amber));
  border-radius:6px;color:var(--amber-dark)}
.signwork__arming span{flex:1 1 150px}

/* ---- who the next field belongs to ---- */
.signwork__assigned{display:grid;gap:3px;margin:0;padding:10px 11px;background:var(--white);
  border:1px solid var(--border);border-left:3px solid var(--who,var(--amber));border-radius:8px;
  font-size:13.5px}
.signwork__signers{display:grid;gap:6px;margin:0;padding:10px 11px;background:var(--white);
  border:1px solid var(--border);border-radius:8px}
.signwork__signers legend{padding:0 4px}
.signwork__signer{display:flex;align-items:center;gap:8px;min-height:var(--tap);padding:4px 6px;
  border:1px solid transparent;border-radius:6px;font-size:13.5px;cursor:pointer}
.signwork__signer::after{content:'';order:-1;width:11px;height:11px;border-radius:3px;
  background:var(--who)}
.signwork__signer.is-active{border-color:var(--who);background:color-mix(in srgb,var(--who) 9%,transparent)}
.signwork__signer input{width:18px;height:18px;accent-color:var(--amber-dark);cursor:pointer}
.signwork__signer:focus-within{outline:2px solid var(--charcoal);outline-offset:1px}
.signwork__need{margin:2px 0 0;font-size:12px;line-height:1.4;color:var(--warn)}

/* ---- the selected field ---- */
.signwork__selected{display:grid;gap:7px;padding:12px;background:var(--white);
  border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow)}
.signwork__selected-title{margin:0;font-family:var(--serif);font-size:18px;font-weight:500;
  line-height:1.25}
.signwork__assignedto{display:flex;align-items:center;gap:7px;margin:0;font-size:13px;
  font-weight:500;color:var(--charcoal)}
.signwork__assignedto::before{content:'';width:11px;height:11px;border-radius:3px;background:var(--who)}
/* Handing a field to another person is a correctness fix, not a refinement,
   so it stays in the open beside the name it is correcting. Each choice wears
   the colour that person's boxes already wear on the page. */
.signwork__reassign{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.signwork__reassign .signwork__eyebrow{flex:1 1 100%}
.signwork__reassign .btn{border-left:3px solid var(--who)}
.signwork__reassign .btn[aria-pressed="true"]{background:var(--charcoal);
  border-color:var(--charcoal);border-left-color:var(--who);color:var(--cream)}
.signwork__selected .hint{margin:0}
.signwork__warnings{display:grid;gap:4px;margin:0;padding:9px 11px 9px 26px;font-size:12px;
  line-height:1.45;color:var(--amber-dark);background:rgba(239,159,39,.12);
  border:1px solid rgba(239,159,39,.4);border-radius:6px}
.signwork__warnnote{color:var(--mid);list-style:none;margin-left:-14px}
.signwork__tune{border:1px solid var(--border);border-radius:6px;background:var(--cream)}
.signwork__tune>summary{min-height:var(--tap);display:flex;align-items:center;padding:0 11px;
  font-size:12.5px;font-weight:500;cursor:pointer}
.signwork__tune>summary:focus-visible{outline:2px solid var(--charcoal);outline-offset:-2px}
.signwork__tune>*:not(summary){margin:0 11px 10px}
.signwork__nudges{display:flex;gap:5px;margin-top:8px}
.signwork__nudges .btn{min-width:var(--tap);padding:8px}
.signwork__sizes{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.signwork__sizes .signwork__eyebrow{flex:1 1 100%}
.signwork__sizes .btn[aria-pressed="true"]{background:var(--charcoal);border-color:var(--charcoal);
  color:var(--cream)}
/* Deleting a field looks like what it is, and the way back sits right under it. */
.signwork__delete{justify-self:start;color:var(--warn);border-color:rgba(176,67,44,.45)}
.signwork__delete:hover{background:var(--warn);border-color:var(--warn);color:var(--cream)}
.signwork__undo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;padding:9px 11px;
  font-size:12.5px;line-height:1.4;background:var(--white);border:1px dashed var(--border);
  border-radius:8px}
.signwork__undo span{flex:1 1 140px}
.signwork__fieldnav{display:flex;align-items:center;justify-content:center;gap:6px;
  color:var(--stone)}
.signwork__fieldat{font-size:12px;color:var(--stone);font-variant-numeric:tabular-nums}

/* ---- what is still missing ---- */
.signwork__ready{display:grid;gap:6px;padding:11px;background:var(--white);
  border:1px solid var(--border);border-radius:8px}
.signwork__ready .hint{margin:0}
.signwork__missing{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.signwork__missing .linkbtn{min-height:36px;text-align:left;font-size:12.5px;color:var(--amber-dark)}
.signwork__allset{margin:0;font-size:13px;color:var(--good)}

/* ---- bottom bar: how far along, and the way out ---- */
.signwork__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--border)}
.signwork__summary{margin:0;font-size:12.5px;color:var(--mid)}
.signwork__actions{display:flex;gap:8px;margin-left:auto}

/* ---- the paper itself ---- */
/* The document label rides above the page instead of over it: a pill dropped
   on the top-left corner covered the first lines of a real contract. */
.mappage>.mapdoc{position:static;display:block;border-radius:0;opacity:1;
  padding:5px 10px;text-align:left}
/* Because that label is now a block in normal flow, it moves the top of
   .mappage, so the paper carries its own positioning context and the field
   overlay is pinned to the page rather than to the page plus a strip of
   chrome. Every field is stored as a fraction of the page and drawn as a
   percentage of that overlay, so the two boxes have to be the same box: a
   signature that lands anywhere but where the broker tapped is ink in the
   wrong place on a contract. */
.mappaper{position:relative}
.signwork .mappage{margin-bottom:16px;box-shadow:var(--shadow)}
.mapspot.label-below span{top:100%;bottom:auto}
.signwork .mapspot span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.signwork .mapspot.editable:focus-visible{outline:3px solid var(--charcoal);outline-offset:3px}

/* ---- phone: the page is the screen ---- */
@media(max-width:860px){
  .signwork{gap:7px}
  /* Only the step being worked on, with no leading rule before it. */
  .signwork__top{gap:6px}
  .signwork__steps li:not(.is-current){display:none}
  .signwork__steps li+li::before{display:none}
  /* One short row of chrome that scrolls sideways, so a long document name
     can never push the paper down the screen. With several documents the
     picker already names the current one, so the locator keeps the page
     position, which nothing else on a phone shows. */
  .signwork__locate{flex-wrap:nowrap;gap:7px;padding-bottom:7px;overflow-x:auto;
    overscroll-behavior-inline:contain}
  .signwork__locate>*{flex:0 0 auto}
  .signwork__docpick{max-width:46vw;min-height:38px;padding:6px 8px;font-size:13px}
  .signwork__where{font-size:12.5px}
  .signwork--multi [data-locator-doc]{display:none}
  .mapzoom{order:1;margin-left:0}
  .signwork__locate .btn{order:2;min-height:38px;white-space:nowrap}

  /* The controls stop being a column and become short rows above and below
     the paper, so no part of the toolbar ever sits on top of the document. */
  .signwork__body{display:flex;flex-direction:column;gap:7px;min-height:0;
    overflow:auto;overscroll-behavior:contain}
  .signwork__panel{display:contents}
  .signwork__legends{order:1;flex-wrap:nowrap;overflow-x:auto;font-size:11.5px}
  .signwork__legend{flex:0 0 auto}
  .signwork__palette{order:2;padding:8px;gap:6px}
  .signwork__palette .signwork__eyebrow{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0)}
  .signwork__tools{display:flex;flex-wrap:nowrap;overflow-x:auto;
    overscroll-behavior-inline:contain;padding-bottom:2px}
  .signwork__tool{flex:0 0 auto}
  .signwork__panel>[data-assign-host]{order:3}
  .signwork__signers{display:flex;align-items:center;gap:6px;padding:7px 8px;
    overflow-x:auto;overscroll-behavior-inline:contain}
  .signwork__signers legend{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0)}
  .signwork__signer{flex:0 0 auto;gap:5px;padding:3px 6px;font-size:12px;white-space:nowrap}
  .signwork__signer::after{width:9px;height:9px}
  .signwork__signer input{width:16px;height:16px}
  .signwork__need{flex:0 0 auto;margin:0}
  /* the paper keeps the largest share of the screen and scrolls inside itself */
  .signwork__pages{order:4;flex:1 0 54vh;min-height:54vh}
  .signwork__panel>[data-selected-host]{order:5}
  .signwork__panel>[data-fieldnav-host]{order:6}
  .signwork__panel>[data-undo-host]{order:7}
  .signwork__ready{order:8}
  .signwork__bar{padding-top:8px}
  .signwork__actions{width:100%}
  .signwork__actions .btn{flex:1 1 auto}
}