/* Controls use the same solid surfaces and accent tints as the alert inbox. */
:root {
  --vg-ctl-surface:var(--ios-bg-2);
  --vg-ctl-soft:var(--ios-fill);
  --vg-ctl-line:var(--ios-hairline);
  --vg-ctl-ink:var(--ios-label);
  --vg-ctl-muted:var(--ios-label-2);
  --vg-ctl-accent:var(--ios-blue);
  --vg-ctl-tint:var(--ios-blue-tint);
  --vg-ctl-calendar-band:transparent;   /* week rows sit on the card (iOS calendar) */
  --vg-ctl-selected:var(--ios-blue);
  --vg-ctl-selected-ink:var(--ios-on-accent);
  --vg-ctl-shadow:0 0 0 0 transparent;
}



#shared-workshop :is(.vgw-panel-head button,.vgw-more .vgw-item,.vgw-filters button):not(.danger) {
  border-radius:var(--ios-r);
  background:var(--vg-ctl-surface);
  color:var(--vg-ctl-ink);
  border:1px solid var(--vg-ctl-line);
  box-shadow:var(--vg-ctl-shadow);
}
#shared-workshop .vgw-more .vgw-item[aria-current="page"] {
  background:var(--vg-ctl-tint);
  color:var(--vg-ctl-accent);
  border-color:transparent;
}
#shared-workshop .vgw-panel {
  --vg-r-btn:18px;
  --sh-btn:var(--vg-ctl-shadow);
}
#shared-workshop .vgw-worktabs {
  background:var(--vg-ctl-soft);
  border:1px solid var(--vg-ctl-line);
  border-radius:var(--ios-r);
  padding:4px;
}
html body #shared-workshop .vgw-panel .vgw-worktabs button[data-work-tab-btn] {
  margin:0;
  border-radius:var(--ios-r-s);
  color:var(--vg-ctl-muted);
  border:1px solid transparent!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body #shared-workshop .vgw-panel .vgw-worktabs button[data-work-tab-btn][aria-pressed="true"] {
  color:var(--vg-ctl-ink);
  background:var(--vg-ctl-surface)!important;
  border-color:var(--vg-ctl-line)!important;
  box-shadow:var(--vg-ctl-shadow)!important;
}
/* Keep the event calendar's room for assignments and carry over the picker controls. */
html body .vgcal {
  --vgc-card:var(--vg-ctl-surface);
  --vgc-soft:var(--vg-ctl-soft);
  --vgc-act:var(--vg-ctl-selected);
  --vgc-act-ink:var(--vg-ctl-selected-ink);
  --vgc-ink:var(--vg-ctl-ink);
  --vgc-muted:var(--vg-ctl-muted);
  --vgc-line:var(--vg-ctl-line);
  --vgc-line-2:var(--vg-ctl-line);
  --vgc-shadow:var(--vg-ctl-shadow);
}
:is(#app,#st-app) input[type="date"]:not(.vg-cell *) {
  border-radius:var(--ios-r-s);
  background:var(--ios-fill);
  color:var(--vg-ctl-ink);
  border-color:transparent;
  box-shadow:none;
  font-variant-numeric:tabular-nums;
}
#shared-workshop input[type="date"] {
  border-radius:var(--ios-r);
  background:var(--vg-ctl-surface);
  color:var(--vg-ctl-ink);
  border-color:var(--vg-ctl-line);
  box-shadow:var(--vg-ctl-shadow);
  font-variant-numeric:tabular-nums;
}
:is(#app,#pj-app,#st-app,#shared-workshop) input[type="date"]:not([readonly]):enabled {cursor:pointer}

/* The date picker is in the native dialog top layer, including when opened from a sheet. */
html body dialog.vg-date-dialog {
  box-sizing:border-box;
  position:fixed;
  inset:auto;
  top:var(--vg-date-top,50%);
  left:var(--vg-date-left,50%);
  margin:0;
  inline-size:min(354px,calc(100vw - 24px));
  max-block-size:calc(100vh - 24px);
  max-block-size:calc(100dvh - 24px);
  padding:12px;
  overflow:auto;
  overscroll-behavior:contain;
  border:0;
  border-radius:var(--ios-r);
  background:var(--vg-ctl-surface);
  color:var(--vg-ctl-ink);
  box-shadow:var(--ios-shadow-pop);
  font:var(--ios-w-regular) var(--ios-t-subhead)/var(--ios-lh-subhead) var(--ios-font);
}
.vg-date-dialog::backdrop {background:var(--ios-scrim)}
.vg-date-head,.vg-date-footer {display:flex;align-items:center;gap:5px}
html body .vg-date-dialog h2 {flex:1;margin:0;padding-inline:5px;color:inherit;font:inherit;font-size:var(--ios-t-headline);font-weight:var(--ios-w-semibold);letter-spacing:0;text-transform:capitalize}
html body .vg-date-dialog input.vg-date-year[type="number"] {
  box-sizing:border-box;inline-size:4.3em;min-block-size:44px;margin:0;padding-inline:5px;border:0;
  border-radius:var(--ios-r-s);background:var(--ios-fill);color:var(--vg-ctl-ink);font:inherit;text-align:center;appearance:textfield;box-shadow:none;
}
.vg-date-year::-webkit-inner-spin-button,.vg-date-year::-webkit-outer-spin-button {-webkit-appearance:none;margin:0}
html body .vg-date-dialog table {table-layout:fixed;width:100%;margin:4px 0;border:0;border-collapse:separate;border-spacing:0 3px;background:transparent;color:inherit}
html body .vg-date-dialog :is(th,td) {box-sizing:border-box;padding:0;border:0;text-align:center}
html body .vg-date-dialog th {color:var(--vg-ctl-muted);font:inherit;font-size:var(--ios-t-caption2);font-weight:600;text-transform:none}
html body .vg-date-dialog td {background:var(--vg-ctl-calendar-band)}
.vg-date-dialog td:first-child {border-radius:var(--ios-r) 0 0 var(--ios-r)}
.vg-date-dialog td:last-child {border-radius:0 var(--ios-r) var(--ios-r) 0}

/* Neutralize legacy Workshop rules for generic buttons only within this widget. */
html body dialog.vg-date-dialog button[type="button"][data-vg-date-day],
html body dialog.vg-date-dialog button[type="button"][data-vg-date-nav],
html body dialog.vg-date-dialog button[type="button"][data-vg-date-action] {
  box-sizing:border-box;
  display:inline-grid;
  place-items:center;
  inline-size:100%;
  block-size:44px;
  min-block-size:0;
  min-inline-size:0;
  margin:0;
  padding:0;
  background:transparent!important;
  color:var(--vg-ctl-ink)!important;
  border:0!important;
  border-radius:var(--ios-r)!important;
  font:inherit;
  font-variant-numeric:tabular-nums;
  box-shadow:none!important;
  transform:none;
}
html body dialog.vg-date-dialog button[type="button"][data-vg-date-nav] {inline-size:44px;color:var(--vg-ctl-accent)!important;border-radius:50%!important}
.vg-date-dialog button[data-vg-date-nav] svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}
html body dialog.vg-date-dialog button[type="button"][data-vg-date-day].vg-date-neighbor {color:var(--vg-ctl-muted)!important}
html body dialog.vg-date-dialog button[type="button"][data-vg-date-day][aria-current="date"] {color:var(--vg-ctl-accent)!important;font-weight:var(--ios-w-semibold)}
.vg-date-number {display:grid;place-items:center;width:28px;height:28px;border-radius:50%}
.vg-date-dialog td[aria-selected="true"] .vg-date-number {
  color:var(--vg-ctl-selected-ink);background:var(--vg-ctl-selected);font-weight:var(--ios-w-semibold);
}
html body dialog.vg-date-dialog button[type="button"][data-vg-date-action] {
  inline-size:auto;padding-inline:12px;color:var(--vg-ctl-accent)!important;font-weight:600;
}
.vg-date-dialog button[data-vg-date-action="today"] {margin-inline-start:auto!important}
html body dialog.vg-date-dialog button[type="button"]:is(:disabled,[aria-disabled="true"]) {opacity:.45;cursor:not-allowed}
@media (hover:hover) {
  html body dialog.vg-date-dialog :is(td:not([aria-selected="true"]),.vg-date-head,.vg-date-footer) button[type="button"]:enabled:not([aria-disabled="true"]):hover {background:var(--vg-ctl-tint)!important}
}
html body dialog.vg-date-dialog :is(button[type="button"],.vg-date-year):focus-visible {outline:2px solid var(--vg-ctl-accent);outline-offset:-3px}
@media (forced-colors:active) {
  html body dialog.vg-date-dialog {border-color:CanvasText}
  .vg-date-dialog td[aria-selected="true"] .vg-date-number {forced-color-adjust:none;background:Highlight;color:HighlightText}
}