:root{ --ios-row:36px; }
/* The iOS Set Alarm sheet. It borrows the site's own sheet shell (.wsheet,
   .wsheet-card) and tokens, so it reads as the same design; only the time
   entry is different. */

.ios-pick{
  display:grid; grid-template-columns:1fr 18px 1fr auto;
  align-items:center; gap:.25rem;
  margin:.9rem auto .4rem; width:100%; max-width:320px; min-width:0;
}
.ios-lbls{
  display:grid; grid-template-columns:1fr 18px 1fr auto; gap:.25rem;
  width:100%; max-width:320px; min-width:0; margin:0 auto;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); text-align:center;
}
/* Seven rows on show. The rows are moved by the drum rather than laid out,
   and the curve is opacity and scale — a perspective here would put the
   typing box in a 3D context, which is exactly what Safari will not raise a
   keypad for. */
.ios-col{
  --ios-row:36px;
  position:relative;
  height:calc(var(--ios-row) * 7);
  overflow:hidden;
  border:0; background:transparent; padding:0; border-radius:14px;
  touch-action:none; user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent; cursor:grab;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
}
.ios-col:active{ cursor:grabbing; }
.ios-band{
  position:absolute; left:0; right:0; top:50%;
  height:var(--ios-row); margin-top:calc(var(--ios-row) / -2);
  background:var(--panel-3); border-radius:12px;
}
.ios-col.is-on .ios-band{ box-shadow:inset 0 0 0 2px var(--line-2); }
.ios-rail{ position:absolute; inset:0; }
.ios-rail span{
  position:absolute; left:0; right:0; top:50%;
  height:var(--ios-row); margin-top:calc(var(--ios-row) / -2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  font-size:1.4rem; font-weight:600; letter-spacing:-.02em;
  color:var(--ink);
  will-change:transform, opacity;
}
.ios-rail span.is-mid{ font-weight:700; }
.ios-col.is-on .ios-rail span.is-mid{ color:var(--brand); }
.ios-colon{
  font-family:var(--f-mono); font-size:1.5rem; color:var(--ink-2);
  text-align:center; align-self:center;
}
.ios-mer{ display:flex; flex-direction:column; gap:.35rem; margin-left:.4rem; }
.ios-mer-b{
  border:1px solid var(--line); background:var(--panel); color:var(--ink-2);
  border-radius:10px; padding:.45rem .6rem; font-size:.85rem; font-weight:700;
  font-family:var(--f-mono); cursor:pointer;
}
.ios-mer-b[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--panel); }

/* The box you type into. A real field at full opacity, sized to the column
   and outside anything with a perspective — Safari will not raise a keypad
   for a field it treats as hidden or renders in a 3D context. The digits are
   drawn over it so the rule for the missing one can show: 1_ */
/* The box takes no taps of its own: a tap or a swipe belongs to the column
   underneath, which is what re-opens the entry or turns the drum. */
.ios-box{ position:fixed; z-index:120; pointer-events:none; }
.ios-box[hidden]{ display:none; }
.ios-box input{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; padding:0;
  -webkit-appearance:none; appearance:none;
  border:2px solid var(--wp-typed, #ff8a3d); border-radius:12px;
  background:var(--panel);
  font-size:16px;                    /* 16px or more, or Safari zooms the page */
  color:transparent; caret-color:transparent; text-align:center;
  pointer-events:none;
}
.ios-box input:focus{ outline:none; box-shadow:0 0 0 3px rgba(249,115,22,.22); }
.ios-box-txt{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-weight:700; font-size:1.9rem; letter-spacing:-.02em;
  color:var(--wp-typed, #ff8a3d); pointer-events:none;
}
.ios-box-txt.is-hint{ color:var(--ink-2); opacity:.45; }

.ios-hint{ text-align:center; color:var(--ink-2); font-size:.78rem; margin:.5rem 0 .2rem; }
.ios-rows{ display:grid; gap:.6rem; margin-top:.9rem; }
.ios-row{
  display:grid; grid-template-columns:5.5rem 1fr; align-items:center; gap:.6rem;
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
}
.ios-row > input, .ios-row select{
  border:1px solid var(--line); border-radius:10px; background:var(--panel);
  color:var(--ink); padding:.6rem .7rem; width:100%; min-width:0;
  font-size:16px;                    /* 16px or more, or Safari zooms the page */
  font-family:inherit;
}
.ios-row input[type="range"]{ padding:0; border:0; accent-color:var(--brand); background:transparent; }
.ios-tune{ display:flex; gap:.4rem; min-width:0; }
.ios-tune select{ flex:1 1 auto; }

/* the sheet header carries the time on the left and the name beside it, the
   way the site's own sheets do */
.ios-h-name{ font-weight:700; font-size:.95rem; color:var(--ink); margin-left:.6rem; }

/* ---- the header ----
   The time on the left and the schedule button on the right, with nothing
   between them: the heading and the close button are gone, and Cancel is what
   closes the sheet. */
#iosSheet .wsheet-h{ display:flex; align-items:center; gap:.6rem; }
#iosSheet .wsheet-when{ margin-left:auto; }

/* ---- AM and PM ----
   Green for the one in force rather than black: it reads as a state that is
   on, not as a heavier button. */
.ios-mer-b[aria-pressed="true"],
#tiDialMer .merbtn[aria-pressed="true"]{
  background:#15a34a; border-color:#15a34a; color:#fff;
}

/* one button, naming the mode it switches to */
.fmtpick-one{ padding:2px; }
.fmtpick-one .fmtbtn{ min-width:3.4rem; }

/* ---- the clock face ---- */
#tiDial[hidden]{ display:none; }
#tiDial .dial{ width:min(300px, 78vw); margin:0 auto; }

/* ---- fitting a phone ----
   The card scrolls rather than running off the bottom, and the rows and the
   face shrink on a short screen so the whole sheet is reachable without
   scrolling at all where it can be. */
@media (max-width:560px){
  #iosSheet .wsheet-card{
    max-height:calc(100dvh - 12px);
    max-height:calc(100vh - 12px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:calc(.6rem + env(safe-area-inset-bottom));
  }
  .ios-col{ --ios-row:34px; }
  .ios-rail span{ font-size:1.25rem; }
  #tiDial .dial{ width:min(260px, 70vw); }
  #iosSheet .wsheet-opts{ gap:.45rem; }
}
@media (max-height:740px){
  /* five rows rather than seven: the drum is the tallest thing here, and the
     whole sheet has to be reachable without scrolling inside it */
  .ios-col{ --ios-row:32px; height:calc(var(--ios-row) * 5); }
  .ios-rail span{ font-size:1.2rem; }
  #tiDial .dial{ width:min(210px, 58vw); }
  #iosSheet .ios-hint{ margin:.25rem 0 .1rem; font-size:.72rem; }
  #iosSheet .ios-lbls{ font-size:.6rem; }
  #iosSheet .wsheet-opts{ gap:.35rem; }
  #iosSheet .pickbar{ margin:.2rem 0; }
}
@media (max-height:620px){
  .ios-col{ --ios-row:28px; height:calc(var(--ios-row) * 5); }
  .ios-rail span{ font-size:1.05rem; }
  #tiDial .dial{ width:min(180px, 52vw); }
  #iosSheet .wsheet-h{ padding-top:.2rem; padding-bottom:.2rem; }
}

/* nothing in the picker may set the card's width: the columns shrink to
   whatever the screen gives them */
.ios-pick, .ios-lbls{ box-sizing:border-box; }
.ios-pick > *, .ios-lbls > *{ min-width:0; }
#iosSheet .wsheet-card{ max-width:100vw; overflow-x:hidden; }

/* ---- the option rows on a narrow screen ----
   The ringtone row is a select and two icon buttons; below about 360px they
   do not fit side by side unless the select is allowed to give way. Left to
   itself the row widened the whole sheet and pushed the buttons off the edge
   of the screen. */
#iosSheet .tp-f, #iosSheet .wsheet-opts{ min-width:0; }
#iosSheet .tunerow{ display:flex; gap:.4rem; width:100%; min-width:0; }
#iosSheet .tunerow .selbox{ flex:1 1 auto; min-width:0; }
#iosSheet .tunerow .selbox-s{ min-width:0; width:100%; }
#iosSheet .tunerow .sicon{ flex:0 0 auto; }
#iosSheet .selbox{ max-width:100%; }

@media (max-width:360px){
  /* the row labels go: the select and the switches say what they are */
  #iosSheet .tp-f-tune .selbox-t{ display:none; }
  #iosSheet .volcell{ position:relative; }
}

/* A class rule beats the browser's own [hidden] rule, so these need saying
   outright — otherwise the drums stay on screen underneath the clock face. */
#iosLbls[hidden], #iosPick[hidden], #iosHint[hidden]{ display:none !important; }

/* ---- AM and PM belong to the 12-hour clock ----
   The class rule beats the browser's [hidden], so with 24h chosen the pair
   stayed on screen. It has to be said outright. */
#iosMer[hidden]{ display:none !important; }

/* ---- the marks round the clock face ----
   The lines are drawn but nothing coloured them, so the face came out bare:
   a heavy bar on each hour and a fine one on each minute. */
#tiDial .dial-tick{
  stroke:var(--ink-2, #5b6478);
  opacity:.45;
  stroke-linecap:round;
}
#tiDial .dial-tick.is-hour{
  stroke:var(--ink, #111827);
  opacity:1;
}

/* ---- with the keypad up ----
   The script sets the overlay's top and height to the part of the screen
   still showing; the card then has to be able to scroll inside whatever that
   leaves, or the picker ends up under the keyboard again. */
#iosSheet .wsheet-card{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}