/* The phone field (static/phone.js). Same measurements as `.field input` in each skin, so
   it sits between the email and password fields as one of them. Every class is prefixed:
   style.css has a global .err box and a bare .err here would pick it up. */
.ph-box{display:flex;align-items:stretch;width:100%;min-width:0;box-sizing:border-box;
  background:var(--bg2);border:1px solid var(--line);border-radius:10px}
:root[data-skin="sharp"] .ph-box{background:var(--card);border-radius:7px}
.ph-box:focus-within{border-color:var(--accent)}
/* The skin's focus ring belongs on the frame, not on the input inside it. */
:root[data-skin="sharp"] .ph-box:focus-within{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-btn) 30%,transparent)}
.ph-box.ph-bad,.ph-box.ph-bad:focus-within{border-color:var(--err)}
:root[data-skin="sharp"] .ph-box.ph-bad:focus-within{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 22%,transparent)}

/* The input loses its own frame: the box above is the frame. Specificity has to clear
   `:root[data-skin="sharp"] .field input`. */
.ph-box input[type=tel],
.field .ph-box input[type=tel],
:root[data-skin="sharp"] .field .ph-box input[type=tel]{
  flex:1 1 auto;width:auto;min-width:0;border:0;background:transparent;box-shadow:none;
  color:var(--txt);font:inherit;padding:11px 13px 11px 10px;border-radius:0 10px 10px 0}
:root[data-skin="sharp"] .field .ph-box input[type=tel],
:root[data-skin="sharp"] .ph-box input[type=tel]{padding:8px 10px;border-radius:0 7px 7px 0}
.ph-box input[type=tel]:focus{outline:none;box-shadow:none}

.ph-cc{flex:none;display:flex;align-items:center;gap:6px;padding:0 9px 0 11px;margin:0;
  background:none;border:0;border-right:1px solid var(--line);border-radius:10px 0 0 10px;
  color:var(--txt);font:inherit;font-size:13.5px;font-variant-numeric:tabular-nums;
  cursor:pointer;white-space:nowrap}
:root[data-skin="sharp"] .ph-cc{border-radius:7px 0 0 7px;font-size:13px}
.ph-cc:hover{background:var(--bg2)}
.ph-cc:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ph-cc[aria-expanded="true"] .ph-chev{transform:rotate(180deg)}
.ph-chev{color:var(--muted);flex:none;transition:transform .12s}
.ph-flag{font-size:16px;line-height:1;flex:none}

.ph-help{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--muted)}
.ph-err{margin:6px 0 0;font-size:12.5px;line-height:1.4;color:var(--err);font-weight:500}
.ph-err[hidden]{display:none}
:root[data-skin="sharp"] .ph-help{font-size:11.5px}

/* ---- the list: on <body>, placed by phone.js ---------------------------------- */
.ph-pop{position:fixed;z-index:1000;display:flex;flex-direction:column;box-sizing:border-box;
  background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.5);color:var(--txt);font-size:13.5px}
:root[data-skin="sharp"] .ph-pop{border-radius:8px}
.ph-search{flex:none;width:100%;box-sizing:border-box;border:0;border-bottom:1px solid var(--line);
  background:transparent;color:var(--txt);font:inherit;padding:9px 11px;border-radius:0}
.ph-pop .ph-search:focus{outline:none;box-shadow:none;border-bottom-color:var(--accent)}
.ph-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px}
.ph-opt{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:6px;cursor:pointer}
.ph-opt:hover,.ph-opt.ph-on{background:var(--bg2)}
.ph-opt[aria-selected="true"] .ph-nm{color:var(--accent);font-weight:600}
.ph-nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-cd{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
.ph-none{padding:12px 10px;color:var(--muted);font-size:12.5px}

/* ---- inside the ? panel: one line, sized like .hw-email beside it -------------- */
.hw-phone{flex:1 1 100%;min-width:0}
.hw-phone .ph-box{background:var(--bg);border-radius:9px}
.hw-phone .ph-cc{font-size:12.5px;padding:0 8px 0 9px;border-radius:9px 0 0 9px}
.hw-phone .ph-flag{font-size:14px}
.hw-phone .ph-box input[type=tel]{font-size:13px;padding:7px 10px;border-radius:0 9px 9px 0}
.hw-phone .ph-help{margin:4px 0 0}
.hw-phone .ph-err{margin:4px 0 0;font-size:12px}

/* Same reason as style.css's phone-width block: under 16px iOS zooms the page on focus.
   That list names its input types and tel is not one of them. */
@media(max-width:760px){
  .ph-box input[type=tel],
  .field .ph-box input[type=tel],
  :root[data-skin="sharp"] .field .ph-box input[type=tel],
  .hw-phone .ph-box input[type=tel],
  .ph-search{font-size:16px}
}