/* ============================================================
   form.css — adding and editing a client.

   Inputs are deliberately large. This is filled in on a phone, often
   one-handed, sometimes with a client waiting — every field is at
   least 48px tall and 16px in size, because anything smaller means
   iOS zooms the page on focus and the layout jumps.
   ============================================================ */

.form{
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:var(--bg);
  color:var(--ink);
  transition:background var(--t-theme) ease, color var(--t-theme) ease;
}

.fm-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:max(14px,env(safe-area-inset-top)) 18px 0;
}

.fm-body{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:0 22px;
  min-height:0;
}

.fm-inner{
  max-width:460px;
  margin:0 auto;
  padding-bottom:30px;
}

.fm-title{
  font-family:Marcellus,serif;
  font-weight:400;
  font-size:clamp(25px,6.6vw,32px);
  letter-spacing:.01em;
  text-align:center;
  margin:8px 0 28px;
}

/* ---------------- fields ---------------- */
.fm-field{ display:block; margin-bottom:18px; }

.fm-label{
  display:block;
  font-family:Karla,sans-serif;
  font-weight:300;
  font-size:11.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--soft);
  margin-bottom:8px;
  padding-left:2px;
}

.fm-input{
  width:100%;
  min-height:50px;
  padding:0 16px;
  font-family:Karla,sans-serif;
  font-weight:400;
  font-size:16px;          /* below 16px iOS zooms the page on focus */
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:11px;
  transition:border-color .2s;
}
.fm-input:hover{ border-color:var(--soft); }
.fm-input:focus{ outline:none; border-color:var(--ink); }
.fm-input:focus-visible{ outline:2px solid var(--soft); outline-offset:2px; }
.fm-input::placeholder{ color:var(--faint); }

.fm-area{
  min-height:88px;
  padding:14px 16px;
  line-height:1.55;
  resize:vertical;
}

/* ---------------- network rows ---------------- */
.fm-group{ margin-bottom:20px; }

.fm-entry{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}

/* ---------------- dropdown ---------------- */
.sel{
  position:relative;
  flex:0 0 42%;
  min-width:0;
}

.sel-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  min-height:50px;
  padding:0 12px 0 15px;
  font-family:Karla,sans-serif;
  font-weight:400;
  font-size:15px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:11px;
  cursor:pointer;
  transition:border-color .2s;
}
.sel-trigger:hover{ border-color:var(--soft); }
.sel.is-open .sel-trigger{ border-color:var(--ink); }

.sel-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sel-chev{
  width:16px;
  height:16px;
  flex:none;
  fill:none;
  stroke:var(--soft);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .22s;
}
.sel.is-open .sel-chev{ transform:rotate(180deg); }

.sel-panel{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:20;
  max-height:min(52vh,320px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:5px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:13px;
  box-shadow:0 14px 34px -16px rgba(0,0,0,.45);
}

.sel-option{
  display:block;
  width:100%;
  min-height:46px;
  padding:12px 13px;
  text-align:left;
  font-family:Karla,sans-serif;
  font-weight:400;
  font-size:15px;
  color:var(--ink);
  background:none;
  border:none;
  border-radius:9px;
  cursor:pointer;
  transition:background .15s;
}
.sel-option:hover,
.sel-option:focus-visible{
  background:var(--bg);
  outline:none;
}

/* The chosen option carries a dot rather than a tick or a fill: it has
   to be findable at a glance without turning the list into a pattern
   of competing marks. */
.sel-option[aria-selected="true"]{
  position:relative;
  padding-right:30px;
  font-weight:500;
}
.sel-option[aria-selected="true"]::after{
  content:"";
  position:absolute;
  top:50%;
  right:13px;
  width:6px;
  height:6px;
  margin-top:-3px;
  border-radius:50%;
  background:var(--ink);
}

.fm-handle{ flex:1 1 auto; min-width:0; }

.fm-remove{
  flex:none;
  width:38px;
  height:38px;
  border:none;
  background:none;
  border-radius:50%;
  font-size:22px;
  line-height:1;
  color:var(--faint);
  cursor:pointer;
  transition:color .2s, background .2s;
}
.fm-remove:hover{ color:var(--ink); background:var(--surface); }

.fm-add{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 16px;
  margin-top:2px;
  font-family:Karla,sans-serif;
  font-weight:300;
  font-size:14px;
  color:var(--soft);
  background:none;
  border:1px dashed var(--line);
  border-radius:99px;
  cursor:pointer;
  transition:color .2s, border-color .2s;
}
.fm-add:hover{ color:var(--ink); border-color:var(--soft); }

/* ---------------- save ---------------- */
.fm-foot{
  display:flex;
  justify-content:center;
  padding:14px 20px max(18px,env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:var(--bg);
}

/* Filled and full width: the one thing this screen is for should not
   have to be hunted for among quiet grey text. */
.fm-save{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  max-width:460px;
  min-height:54px;
  padding:0 26px;
  font-family:Karla,sans-serif;
  font-weight:500;
  font-size:16px;
  color:var(--bg);
  background:var(--ink);
  border:none;
  border-radius:99px;
  cursor:pointer;
  transition:opacity .2s;
}
.fm-save:hover{ opacity:.88; }
.fm-save[disabled]{ opacity:.5; cursor:default; }

.fm-save .spinner{ display:none; }
.fm-save[data-busy] .spinner{
  display:block;
  width:17px;
  height:17px;
  border:1.5px solid rgba(128,128,128,.35);
  border-top-color:var(--bg);
  border-radius:50%;
  animation:spin .7s linear infinite;
}

@media(max-width:400px){
  .sel{ flex-basis:38%; }
  .sel-trigger{ font-size:14.5px; padding-left:12px; }
}

/* ============================================================
   CALENDAR
   Same shape as the dropdown, because they sit in the same form
   and are the same kind of thing: a field that opens a choice.
   ============================================================ */
.cal{
  position:relative;
}

.cal-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-height:50px;
  padding:0 14px 0 16px;
  font-family:Karla,sans-serif;
  font-weight:400;
  font-size:16px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:11px;
  cursor:pointer;
  transition:border-color .2s;
}
.cal-trigger:hover{ border-color:var(--soft); }
.cal.is-open .cal-trigger{ border-color:var(--ink); }

.cal-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-label.is-empty{ color:var(--faint); }

.cal-icon{
  width:18px;
  height:18px;
  flex:none;
  fill:none;
  stroke:var(--soft);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.cal-panel{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  z-index:20;
  width:min(320px,86vw);
  padding:14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 14px 34px -16px rgba(0,0,0,.45);
}

.cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:12px;
}

.cal-caption{
  font-family:Marcellus,serif;
  font-size:16px;
  letter-spacing:.01em;
  text-align:center;
  flex:1;
}

.cal-nav{
  width:36px;
  height:36px;
  flex:none;
  font-size:20px;
  line-height:1;
  color:var(--soft);
  background:none;
  border:none;
  border-radius:50%;
  cursor:pointer;
  transition:color .2s, background .2s;
}
.cal-nav:hover{ color:var(--ink); background:var(--bg); }

.cal-week,
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
}

.cal-week{
  margin-bottom:4px;
}
.cal-week span{
  font-family:Karla,sans-serif;
  font-weight:300;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--faint);
  text-align:center;
  padding:4px 0;
}

.cal-day{
  aspect-ratio:1;
  min-height:38px;
  font-family:Karla,sans-serif;
  font-weight:400;
  font-size:14.5px;
  color:var(--ink);
  background:none;
  border:none;
  border-radius:9px;
  cursor:pointer;
  transition:background .15s;
}
.cal-day:hover,
.cal-day:focus-visible{ background:var(--bg); outline:none; }

/* Today is outlined, the choice is filled — one says "you are here",
   the other "this is what you picked", and they must not be confused. */
.cal-day[data-today]{ box-shadow:inset 0 0 0 1px var(--line); }
.cal-day[data-selected]{
  background:var(--ink);
  color:var(--surface);
  font-weight:500;
}
.cal-day[data-selected]:hover{ background:var(--ink); }

.cal-blank{ aspect-ratio:1; }

.cal-foot{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}

.cal-action{
  min-height:38px;
  padding:0 12px;
  font-family:Karla,sans-serif;
  font-weight:300;
  font-size:13.5px;
  color:var(--soft);
  background:none;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:color .2s, background .2s;
}
.cal-action:hover{ color:var(--ink); background:var(--bg); }

/* ============================================================
   DATE PICKER
   The browser has a calendar of its own, and it is set aside for
   the same reason the native select was: its panel cannot be
   styled, so half the control follows Mirra and half follows the
   operating system.
   ============================================================ */
.dp{
  position:relative;
}

.dp-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-height:50px;
  padding:0 14px 0 16px;
  font-family:Karla,sans-serif;
  font-weight:400;
  font-size:16px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:11px;
  cursor:pointer;
  transition:border-color .2s;
}
.dp-trigger:hover{ border-color:var(--soft); }
.dp.is-open .dp-trigger{ border-color:var(--ink); }

.dp-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dp-label.is-empty{ color:var(--faint); }

.dp-icon{
  width:17px;
  height:17px;
  flex:none;
  fill:none;
  stroke:var(--soft);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.dp-panel{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  z-index:25;
  width:min(320px,calc(100vw - 44px));
  padding:14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:15px;
  box-shadow:0 16px 40px -18px rgba(0,0,0,.5);
}

.dp-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}

.dp-caption{
  font-family:Marcellus,serif;
  font-size:16px;
  letter-spacing:.01em;
  text-align:center;
  flex:1;
}

.dp-nav{
  width:36px;
  height:36px;
  flex:none;
  font-size:20px;
  line-height:1;
  color:var(--soft);
  background:none;
  border:none;
  border-radius:50%;
  cursor:pointer;
  transition:color .18s, background .18s;
}
.dp-nav:hover{ color:var(--ink); background:var(--bg); }

.dp-week,
.dp-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
}

.dp-week{
  margin-bottom:4px;
}
.dp-week span{
  font-family:Karla,sans-serif;
  font-weight:300;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--faint);
  text-align:center;
  padding:4px 0;
}

.dp-day{
  aspect-ratio:1;
  min-height:38px;
  font-family:Karla,sans-serif;
  font-weight:400;
  font-size:14.5px;
  color:var(--ink);
  background:none;
  border:none;
  border-radius:9px;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.dp-day:hover{ background:var(--bg); }

/* Days from the neighbouring months are kept rather than blanked:
   an empty corner makes the grid look broken, and being able to
   reach the 1st from the previous month saves a tap. */
.dp-day.is-outside{ color:var(--faint); }

.dp-day.is-today{
  box-shadow:inset 0 0 0 1px var(--line);
  font-weight:500;
}

.dp-day.is-selected{
  background:var(--ink);
  color:var(--surface);
  font-weight:500;
}
.dp-day.is-selected:hover{ background:var(--ink); }

.dp-foot{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}

.dp-action{
  min-height:38px;
  padding:0 12px;
  font-family:Karla,sans-serif;
  font-weight:300;
  font-size:13.5px;
  color:var(--soft);
  background:none;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:color .18s, background .18s;
}
.dp-action:hover{ color:var(--ink); background:var(--bg); }

/* ============================================================
   PHONE FIELD
   The grey remainder cannot live inside the input, which paints all
   its text one colour. It sits on a layer beneath instead: a hidden
   copy of what was typed holds the width, and the missing digits
   follow it. Alignment depends on the two matching exactly, so the
   ghost takes its metrics from the input rather than setting its own.
   ============================================================ */
.fm-phone{
  position:relative;
  display:block;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:11px;
  transition:border-color .2s;
}
.fm-phone:hover{ border-color:var(--soft); }
.fm-phone:focus-within{ border-color:var(--ink); }

.fm-phone-input{
  position:relative;
  z-index:1;
  background:transparent;
  border:none;
  border-radius:11px;
}
.fm-phone-input:hover,
.fm-phone-input:focus{ border:none; }
.fm-phone-input:focus-visible{ outline:none; }

/* The placeholder covers the empty state and the hint takes over once
   anything is typed, so the two never show at the same time. */
.fm-phone-ghost{
  pointer-events:none;
  position:absolute;
  inset:0;
  z-index:0;
  display:flex;
  align-items:center;
  padding:0 16px;
  font-family:Karla,sans-serif;
  font-weight:400;
  font-size:16px;
  white-space:pre;
  overflow:hidden;
}

.fm-phone-typed{ color:transparent; }
.fm-phone-rest{ color:var(--faint); }