/* Date/Time Properties demo applet — page coordinates (the page's origin is screen (9, 49) in the references). */
.td { position: absolute; inset: 0; }
.td > * { position: absolute; }
.td > span { white-space: pre; }

/* Date & Time */
.td__g-date { left: 10px; top: 5px; width: 183px; height: 203px; box-sizing: border-box; }
.td > .td__month { left: 21px; top: 30px; width: 75px; }
.td > .td__year { left: 106px; top: 30px; width: 79px; }
/* The month grid: a client edge, a ButtonShadow day-name row 18px high (ButtonFace letters), 18px week rows. */
.td__cal { left: 21px; top: 62px; width: 162px; height: 130px; }
/* Columns start at floor(i · 158 / 7); each label sits floor((cell − advance) / 2) in (timedate.js), its 13px line box
   3px down — the selected day's Hilight is that box (measured). */
.td__cal-head, .td__cal-days > [role="row"] { display: grid; grid-template-columns: 22px 23px 22px 23px 22px 23px 23px; height: 18px; }
.td__cal-head { background: var(--sys-btn-shadow); color: var(--color-surface); }   /* allow: Date/Time's own month grid (a one-off control, measured) */
.td__cal [role="columnheader"], .td__cal [role="gridcell"] { white-space: pre; }
.td__cal :is([role="columnheader"], [role="gridcell"]) > span { display: inline-block; margin-top: 3px; line-height: 13px; }
.td__cal [role="columnheader"] > span { margin-left: 5px; }
.td__cal [role="gridcell"][aria-selected="true"] > span { background: var(--sys-hilight); color: var(--sys-hilight-text); }   /* allow: Date/Time's own month grid (a one-off control, measured) */
.td__g-time { left: 202px; top: 5px; width: 170px; height: 203px; box-sizing: border-box; }
.td__clock { left: 213px; top: 26px; }
.td > .td__time { left: 243px; top: 173px; width: 86px; }
.td__zone { left: 10px; top: 223px; }

/* Time Zone */
.td > .td__zones { left: 12px; top: 9px; width: 362px; }
.td__map { left: 13px; top: 36px; width: calc(356px + 2 * var(--metric-client-edge)); height: calc(184px + 2 * var(--metric-client-edge)); }   /* the 356×184 map in the edge */
.td__map > img { display: block; }
.td__dst { left: 12px; top: 229px; }