/* Update Details (the owners' pages under /update-details/): the step-by-step form and its parts, in the site's own
   palette and type (assets/css/site.css). Everything is under .ud, or ud- prefixed, so nothing here reaches the rest
   of the site. The form's behaviour is assets/public.js; without it every step shows at once and still works. */

.ud-section{padding-top:clamp(36px,5vw,64px)}
.ud{max-width:880px}
.ud .muted{color:var(--muted)}
.ud .icon{width:1.2em;height:1.2em;flex:none;vertical-align:-.22em}
.ud .opt{font-weight:400;color:var(--muted)}
.ud .mono{font-family:ui-monospace,Consolas,monospace;letter-spacing:.02em}

/* ---------- landing ---------- */
.ud-hero-note{margin-top:14px;font-size:15px;color:#C6D0EC}
.ud-tiles .card{padding:26px}
.ud-tiles h3{font-size:19px;margin-bottom:.35em}
.ud-tiles p{margin:0;font-size:15.5px}
.ud-ico{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#F4FAEA;color:var(--green-text);margin-bottom:14px}
.ud-ico svg{width:24px;height:24px}
.ud-split{align-items:start}
.ud-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:18px}
.ud-steps li{counter-increment:s;padding-left:52px;position:relative}
.ud-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
  background:var(--navy);color:#fff;display:grid;place-items:center;font:700 16px/1 DMSans,sans-serif}
.ud-steps strong{display:block;font-family:DMSans,sans-serif;color:var(--ink);font-size:18px;margin-bottom:3px}
.ud-trusts{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ud-trusts li{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:999px;
  padding:8px 18px;font:500 15px/1.3 DMSans,sans-serif}
/* over 24 listed trusts: a search box that opens the form with the search filled in */
.ud-find{max-width:560px;margin:8px auto 28px;text-align:left}
.ud-find label{display:block;margin-bottom:8px;color:#fff;font:500 16px/1.3 DMSans,sans-serif}
.ud-find-row{display:flex;gap:10px}
.ud-find input{flex:1;min-width:0;padding:13px 15px;border:1px solid #fff;border-radius:8px;background:#fff;color:var(--ink);
  font:400 16px/1.5 Roboto,sans-serif}
.ud-find input:focus{outline:3px solid var(--green);outline-offset:2px}
.ud-find .btn{flex:none}
.ud-for-trusts{font-size:15.5px}
.ud-for-trusts a{color:#fff}
.ud-for-trusts a:hover{color:var(--green)}
/* thank-you page: where the update went and how to reach each office */
.ud-note{background:var(--light);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:24px}
.ud-sent{list-style:none;padding:0;margin:0 0 36px;display:grid;gap:10px}
.ud-sent li{border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:#fff}
.ud-sent strong{display:block;font-family:DMSans,sans-serif;color:var(--ink)}
.ud-sent span{display:block;font-size:15.5px;overflow-wrap:anywhere}
.ud-ref{display:inline-block;background:var(--light);border:1px solid var(--line);border-radius:12px;padding:14px 30px;
  color:var(--muted);margin-bottom:28px}
.ud-ref strong{font:800 28px/1.3 DMSans,sans-serif;color:var(--navy);letter-spacing:.04em}

/* ---------- the form ---------- */
.ud .stepper{list-style:none;display:flex;padding:0;margin:0 0 26px}
.ud .stepper li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;
  color:var(--muted);font:500 13.5px/1.2 DMSans,sans-serif;text-align:center}
.ud .stepper li::before{content:"";position:absolute;top:17px;left:-50%;right:50%;height:3px;background:var(--line)}
.ud .stepper li:first-child::before{display:none}
.ud .stepper .dot{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:#fff;border:2px solid #CBD3E3;font:700 15px/1 DMSans,sans-serif;color:var(--navy)}
.ud .stepper li.done .dot{background:var(--green);border-color:var(--green);color:transparent}
.ud .stepper li.done .dot::after{content:"";position:absolute;width:13px;height:7px;border-left:2.5px solid #0d2000;
  border-bottom:2.5px solid #0d2000;transform:translateY(-2px) rotate(-45deg)}
.ud .stepper li.done::before,.ud .stepper li.current::before{background:var(--green)}
.ud .stepper li.current{color:var(--ink)}
.ud .stepper li.current .dot{border-color:var(--navy);box-shadow:0 0 0 5px rgba(12,27,93,.1)}
html:not(.js) .ud .stepper{display:none}

.ud .step{margin-bottom:22px}
.ud .step h2{font-size:clamp(23px,2.8vw,30px);margin-bottom:.35em}
.ud .step-no{display:block;font:600 12.5px/1 DMSans,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-text);margin-bottom:10px}
.js .ud .step{display:none}
.js .ud .step.current{display:block}
.ud .step-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
html:not(.js) .ud .step-nav [data-next],html:not(.js) .ud .step-nav [data-back]{display:none}
.ud .sub{font-size:20px;margin:28px 0 .35em}
.ud .hint{font-size:14.5px;color:var(--muted);margin:-2px 0 10px}

.ud .field{margin:0 0 18px;border:0;padding:0;min-width:0}
.ud .field > label,.ud .field > legend{display:block;font:500 15px/1.3 DMSans,sans-serif;color:var(--ink);margin-bottom:8px;padding:0}
.ud fieldset.field > legend{font-size:16px}
.ud .field .hint{font-size:14px;margin-top:-4px}
.ud select{width:100%;padding:13px 15px;border:1px solid #CBD3E3;border-radius:8px;font:400 16px/1.5 Roboto,sans-serif;color:var(--ink);background:#fff}
.ud input[type=text],.ud input[type=email],.ud input[type=tel],.ud input[type=search],.ud textarea{width:100%;padding:13px 15px;
  border:1px solid #CBD3E3;border-radius:8px;font:400 16px/1.5 Roboto,sans-serif;color:var(--ink);background:#fff}
.ud textarea{min-height:120px;resize:vertical}
.ud input:focus,.ud select:focus,.ud textarea:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px rgba(125,201,29,.22)}
.ud .has-error{border-left:4px solid #C62828;padding-left:14px}
.ud .has-error input,.ud .has-error select,.ud .has-error textarea{border-color:#C62828}
.ud .field-error{color:#A61B1B;font:600 14.5px/1.4 Roboto,sans-serif;margin:0 0 8px}
.ud .live-check{margin:8px 0 0;font-weight:500;min-height:1.4em;font-size:15px}
.ud .live-check.ok{color:var(--green-text)}
.ud .live-check.bad{color:#A61B1B}
.ud .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.ud .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}
.ud .grid-name{display:grid;grid-template-columns:110px 1fr 1fr;gap:0 18px}
.ud .date-row{display:flex;gap:14px}
.ud .date-row label{display:block;font-size:14px;color:var(--muted);margin-bottom:5px}
.ud .w2{width:4.4em!important;text-align:center}
.ud .w4{width:6.2em!important;text-align:center}
.ud .w-sm{max-width:10em}
.ud .w-md{max-width:18em}
.ud .w-lg{max-width:26em}
.ud .search-field{position:relative}
.ud .search-field .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.ud .search-field input{padding-left:44px}

/* choices */
.ud .choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ud .choice{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1.5px solid #CBD3E3;border-radius:12px;cursor:pointer;background:#fff}
.ud .choice:hover{border-color:var(--navy)}
.ud .choice input{position:absolute;opacity:0;width:1px;height:1px}
.ud .choice-box{flex:none;display:grid;place-items:center;width:26px;height:26px;border:2px solid #CBD3E3;border-radius:7px;background:#fff;color:transparent}
/* The tick is drawn by CSS (as the stepper's is), not an SVG in every card (212 bytes each: 64 KB at 300 trusts). */
.ud .choice-box::after{content:"";width:11px;height:6px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-1px) rotate(-45deg)}
.ud .choice-body{display:flex;flex-direction:column;color:var(--ink);font-family:DMSans,sans-serif}
.ud .choice-body small{color:var(--muted);font:400 14px/1.4 Roboto,sans-serif}
.ud .choice.is-checked,.ud .choice:has(input:checked){border-color:var(--green);background:#F4FAEA}
.ud .choice.is-checked .choice-box,.ud .choice:has(input:checked) .choice-box{background:var(--green);border-color:var(--green);color:#0d2000}
.ud .choice:has(input:focus-visible){outline:3px solid var(--green);outline-offset:2px}
.ud .choice.hidden{display:none}

/* finding a trust among many: the matches, a count read out as it changes, and the ticked trusts as chips (public.js).
   Without the script every trust is drawn, so the search box, which would do nothing, is hidden. */
html:not(.js) .ud .search-field,html:not(.js) .ud .ud-status{display:none}
.ud .ud-status{margin:-8px 0 14px;font-size:14.5px;color:var(--muted)}
.ud .ud-status:empty{margin:0}
.ud .ud-more{margin:14px 0 0;font-size:15px;color:var(--muted)}
.ud .ud-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.ud .ud-chips[hidden],.ud .ud-more[hidden]{display:none}
.ud .ud-chip{display:inline-flex;align-items:center;gap:2px;max-width:100%;padding:4px 4px 4px 14px;border:1.5px solid var(--green);
  border-radius:999px;background:#F4FAEA;color:var(--ink);font:500 15px/1.3 DMSans,sans-serif}
.ud .ud-chip span{min-width:0;overflow-wrap:anywhere}
.ud .ud-chip button{flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;
  background:none;color:var(--navy);font:500 22px/1 Roboto,sans-serif;cursor:pointer}
.ud .ud-chip button:hover{background:rgba(12,27,93,.1)}
.ud .ud-chip button:focus-visible{outline:3px solid var(--green);outline-offset:1px}
.ud .change-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ud .tile-choice{position:relative;cursor:pointer}
.ud .tile-choice input{position:absolute;opacity:0;width:1px;height:1px}
.ud .tile-choice span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;
  min-height:104px;padding:14px 10px;border:1.5px solid #CBD3E3;border-radius:12px;background:#fff;color:var(--ink);
  font-family:DMSans,sans-serif}
.ud .tile-choice span .icon{width:28px;height:28px;color:var(--navy)}
.ud .tile-choice:hover span{border-color:var(--navy)}
.ud .tile-choice input:checked + span{border-color:var(--navy);background:var(--navy);color:#fff}
.ud .tile-choice input:checked + span .icon{color:var(--green)}
.ud .tile-choice input:focus-visible + span{outline:3px solid var(--green);outline-offset:2px}
.ud .radio-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ud .radio-card{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1.5px solid #CBD3E3;border-radius:12px;cursor:pointer;background:#fff}
.ud .radio-card input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--navy);flex:none}
.ud .radio-card span{display:flex;flex-direction:column;color:var(--ink);font-family:DMSans,sans-serif}
.ud .radio-card small{color:var(--muted);font:400 14px/1.4 Roboto,sans-serif}
.ud .radio-card:has(input:checked){border-color:var(--green);background:#F4FAEA}
.ud .check-line{display:flex;gap:12px;align-items:flex-start;cursor:pointer;margin:10px 0}
.ud .check-line input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--navy);flex:none}
/* site.css styles every label and input inside .field (one-line DMSans labels, full-width inputs): the tick cards
   and tick lines are labels too, so they get their own type and sizes back. */
.ud .field label.choice,.ud .field label.radio-card,.ud .field label.check-line,.ud label.tile-choice{
  font:400 16px/1.5 Roboto,sans-serif;margin-bottom:0;color:var(--body)}
.ud .field label.choice input,.ud .field label.radio-card input,.ud .field label.check-line input{padding:0;border:0}
.ud .panel{border:1px solid var(--line);border-radius:12px;padding:22px;margin-top:18px;background:var(--light)}
.ud .panel h3{display:flex;align-items:center;gap:8px;font-size:20px;color:var(--navy)}
.js .ud .reveal{display:none}
.js .ud .reveal.shown{display:block}

/* uploads */
.ud .upload{border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:14px;background:#fff}
.ud .upload-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.ud .upload-head > .icon{width:28px;height:28px;color:var(--navy);margin-top:2px}
.ud .upload-head div{flex:1;display:flex;flex-direction:column;color:var(--ink);font-family:DMSans,sans-serif}
.ud .upload-head small{color:var(--muted);font:400 14px/1.4 Roboto,sans-serif}
.ud .req,.ud .opt-tag{font:700 11.5px/1 DMSans,sans-serif;text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:6px 11px;white-space:nowrap}
.ud .req{background:#FFF1D6;color:#7A4A00}
.ud .opt-tag{background:var(--light);color:var(--muted)}
.ud .upload.has-files .req{background:#EAF7DC;color:#33580B}
.ud .drop{position:relative;display:flex;align-items:center;justify-content:center;min-height:64px;border:2px dashed #CBD3E3;
  border-radius:10px;color:var(--navy);font:500 15px/1.3 DMSans,sans-serif;cursor:pointer;background:var(--light);text-align:center;padding:10px}
.ud .drop:hover,.ud .drop.drag{border-color:var(--green);background:#F4FAEA}
.ud .drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.ud .drop span{display:inline-flex;gap:8px;align-items:center}
html:not(.js) .ud .drop input{position:static;opacity:1}
html:not(.js) .ud .drop span{display:none}
.ud .drop:has(input:focus-visible){outline:3px solid var(--green);outline-offset:2px}
.ud .file-list{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px}
.ud .file-list li{display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px;background:var(--light);font-size:15px}
.ud .file-list .thumb{width:52px;height:52px;border-radius:8px;object-fit:cover;background:#E3E7EF;display:grid;place-items:center;
  color:var(--muted);flex:none;font-size:12px}
.ud .file-list .fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.ud .file-list .fsize{color:var(--muted);font-size:13.5px}
.ud .file-list button{border:0;background:none;color:#A61B1B;font:600 14px/1 Roboto,sans-serif;cursor:pointer;padding:6px 8px;border-radius:8px}
.ud .file-list li.bad{background:#FDECEC;color:#8C2020}

/* check and send */
.ud .summary{display:grid;gap:12px;margin-bottom:20px}
.ud .sum-block{border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:#fff}
.ud .sum-block h3{font:600 12.5px/1 DMSans,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.ud .sum-block h3 button{text-transform:none;letter-spacing:0;font:500 14px/1 Roboto,sans-serif;color:var(--navy);
  background:none;border:0;text-decoration:underline;cursor:pointer;padding:0}
.ud .sum-block p{margin:0 0 4px;font-size:15.5px}
.ud .declare{background:#F4FAEA;border:1px solid #A9D96B;border-radius:12px;padding:14px 18px}
.ud .privacy-note{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:15px;margin-top:16px}
.ud .privacy-note .icon{color:var(--navy);margin-top:3px}
.ud .alert-error{background:#FDECEC;border:1px solid #F0B3B3;color:#8C2020;padding:15px 18px;border-radius:8px;margin:0 0 18px}
.ud .alert-error ul{margin:8px 0 0;padding-left:20px}
.ud .alert{margin-bottom:12px}
.ud .btn[aria-disabled=true]{opacity:.7;cursor:progress}

@media (max-width:700px){
  .ud .grid-2,.ud .grid-3,.ud .grid-name,.ud .radio-row{grid-template-columns:1fr}
  .ud .change-grid{grid-template-columns:1fr 1fr}
  .ud .stepper .lbl{font-size:11.5px}
  .ud .stepper .dot{width:32px;height:32px}
  .ud .stepper li::before{top:15px}
  .ud .step-nav{flex-direction:column-reverse}
  .ud .step-nav .btn{width:100%;text-align:center}
  .ud .card{padding:20px}
}
@media (prefers-reduced-motion:reduce){.ud *{transition:none!important}}