/* ==========================================================
   THRONE WATCH TACTILE CONTROLS
   Shared shallow-keycap mechanics for semantic and scripted
   controls. Color, geometry, and typography remain owned by
   each component's stylesheet.
   ========================================================== */

:root{
  --tw-keycap-speed:100ms;
  --tw-keycap-ease:cubic-bezier(.2,.75,.25,1);
  --tw-keycap-top:rgba(255,255,255,.15);
  --tw-keycap-top-hover:rgba(255,255,255,.21);
  --tw-keycap-rim:color-mix(in srgb,var(--custom-line,var(--line,#6b5786)) 70%,rgba(242,220,166,.76));
  --tw-keycap-lower:rgba(4,2,9,.92);
  --tw-keycap-drop:rgba(0,0,0,.34);
  --tw-keycap-selected-glow:color-mix(in srgb,var(--custom-purple,var(--purple,#a871ff)) 30%,transparent);
  --tw-keycap-raised-shadow:
    inset 0 1px 0 var(--tw-keycap-top),
    inset 0 -2px 0 rgba(4,2,9,.52),
    0 0 0 1px color-mix(in srgb,var(--tw-keycap-rim) 28%,transparent),
    0 3px 0 var(--tw-keycap-lower),
    0 6px 11px var(--tw-keycap-drop);
  --tw-keycap-hover-shadow:
    inset 0 1px 0 var(--tw-keycap-top-hover),
    inset 0 -2px 0 rgba(4,2,9,.48),
    0 0 0 1px color-mix(in srgb,var(--tw-keycap-rim) 48%,transparent),
    0 3px 0 var(--tw-keycap-lower),
    0 7px 13px rgba(0,0,0,.38),
    0 0 9px color-mix(in srgb,var(--tw-keycap-rim) 14%,transparent);
  --tw-keycap-pressed-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 2px 4px rgba(0,0,0,.31),
    0 0 0 1px color-mix(in srgb,var(--tw-keycap-rim) 30%,transparent),
    0 1px 0 rgba(3,2,7,.88),
    0 2px 4px rgba(0,0,0,.24);
  --tw-keycap-selected-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 2px 4px rgba(0,0,0,.26),
    0 0 0 1px color-mix(in srgb,var(--tw-keycap-rim) 48%,transparent),
    0 1px 0 rgba(3,2,7,.92),
    0 2px 5px rgba(0,0,0,.25),
    0 0 10px var(--tw-keycap-selected-glow);
  --tw-keycap-disabled-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 1px 2px rgba(0,0,0,.18);
}

/* The repeated class keeps this shared mechanics layer ahead of
   component-specific shadows without changing any component colors. */
html body .tw-tactile-control.tw-tactile-control.tw-tactile-control{
  translate:0 0;
  box-shadow:var(--tw-keycap-raised-shadow)!important;
  transition:
    translate var(--tw-keycap-speed) var(--tw-keycap-ease),
    box-shadow var(--tw-keycap-speed) var(--tw-keycap-ease),
    filter var(--tw-keycap-speed) ease,
    border-color var(--tw-keycap-speed) ease,
    background-color var(--tw-keycap-speed) ease,
    color var(--tw-keycap-speed) ease,
    opacity var(--tw-keycap-speed) ease!important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

html body .tw-tactile-control.tw-tactile-control.tw-tactile-control:not(:disabled):not([aria-disabled="true"]):hover{
  box-shadow:var(--tw-keycap-hover-shadow)!important;
}

html body .tw-tactile-control.tw-tactile-control.tw-tactile-control:is(
  [aria-pressed="true"],
  [aria-selected="true"],
  [aria-checked="true"],
  [aria-expanded="true"],
  .active,
  .is-active,
  .is-selected,
  .is-saved,
  .is-favorite,
  .is-open
):not(:disabled):not([aria-disabled="true"]),
html body label:has(input:checked) > .tw-tactile-control.tw-tactile-control.tw-tactile-control{
  translate:0 1px;
  box-shadow:var(--tw-keycap-selected-shadow)!important;
}

html body .tw-tactile-control.tw-tactile-control.tw-tactile-control:not(:disabled):not([aria-disabled="true"]):is(:active,.tw-tactile-keypress),
html body label:has(input:checked) > .tw-tactile-control.tw-tactile-control.tw-tactile-control:is(:active,.tw-tactile-keypress){
  translate:0 3px;
  box-shadow:var(--tw-keycap-pressed-shadow)!important;
  filter:brightness(.93);
}

html body .tw-tactile-control.tw-tactile-control.tw-tactile-control:is(:disabled,[aria-disabled="true"]),
html body label:has(input:disabled) > .tw-tactile-control.tw-tactile-control.tw-tactile-control{
  translate:0 0!important;
  transform:none!important;
  box-shadow:var(--tw-keycap-disabled-shadow)!important;
  filter:saturate(.62) brightness(.82)!important;
  opacity:.64;
  cursor:not-allowed;
}

html body .tw-tactile-control.tw-tactile-control.tw-tactile-control:is(:disabled,[aria-disabled="true"]):hover,
html body label:has(input:disabled) > .tw-tactile-control.tw-tactile-control.tw-tactile-control:hover{
  translate:0 0!important;
  transform:none!important;
  box-shadow:var(--tw-keycap-disabled-shadow)!important;
}

html body .tw-tactile-control.tw-tactile-control.tw-tactile-control:focus-visible,
html body .tw-tactile-surface.tw-tactile-surface:focus-visible{
  outline:2px solid color-mix(in srgb,var(--custom-purple,var(--purple,#a871ff)) 76%,#fff)!important;
  outline-offset:3px!important;
}

/* Whole-card/chip actions preserve their semantic artwork and idle glow.
   Their existing shadow is only compressed during the physical press. */
html body .tw-tactile-surface.tw-tactile-surface{
  translate:0 0;
  transition:
    translate var(--tw-keycap-speed) var(--tw-keycap-ease),
    box-shadow var(--tw-keycap-speed) var(--tw-keycap-ease),
    filter var(--tw-keycap-speed) ease!important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
html body .tw-tactile-surface.tw-tactile-surface:not(:has(button:active)):is(:active,.tw-tactile-keypress){
  translate:0 3px;
  box-shadow:var(--tw-keycap-pressed-shadow)!important;
  filter:brightness(.93);
}

/* Hourly/Daily and 12h/24h are single semantic toggle buttons whose
   visible faces are the two child segments. The housing itself stays flat. */
html body :is(.format-toggle,.calendar-view-toggle):is(:active,.tw-tactile-keypress) .tw-tactile-control.active{
  translate:0 3px;
  box-shadow:var(--tw-keycap-pressed-shadow)!important;
  filter:brightness(.93);
}

/* Exchange category artwork is the control face. It keeps a tactile press
   without drawing a second square/keycap around the supplied icon art. */
html body .tw-tactile-icon-art.tw-tactile-icon-art{
  translate:0 0;
  transform:none!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transition:
    translate var(--tw-keycap-speed) var(--tw-keycap-ease),
    filter var(--tw-keycap-speed) ease!important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
html body .tw-tactile-icon-art.tw-tactile-icon-art:not(:disabled):hover{
  translate:0 -1px;
  filter:drop-shadow(0 0 8px var(--exchange-category-glow,rgba(226,190,108,.7))) drop-shadow(0 4px 5px rgba(0,0,0,.56));
}
html body .exchange-filter-icon.tw-tactile-icon-art:is(.is-active,[aria-pressed="true"]),
html body .exchange-choice-grid > label.tw-tactile-icon-art:has(input:checked){
  translate:0 1px;
  transform:none!important;
  filter:drop-shadow(0 0 5px rgba(226,190,108,.34)) drop-shadow(0 2px 3px rgba(0,0,0,.62));
}
html body .tw-tactile-icon-art.tw-tactile-icon-art:not(:disabled):is(:active,.tw-tactile-keypress),
html body .exchange-choice-grid > label.tw-tactile-icon-art:has(input:checked):is(:active,.tw-tactile-keypress){
  translate:0 3px;
  filter:brightness(.92) drop-shadow(0 0 5px var(--exchange-category-glow,rgba(226,190,108,.58)));
}
html body .tw-tactile-icon-art.tw-tactile-icon-art:focus-visible,
html body .exchange-choice-grid > label.tw-tactile-icon-art:has(input:focus-visible){
  outline:2px solid color-mix(in srgb,var(--custom-purple,var(--purple,#a871ff)) 76%,#fff)!important;
  outline-offset:3px!important;
}

/* Segmented Exchange rails clip outer drop shadows by design, so their
   raised and pressed depth is rendered inside each fully opaque segment. */
html body .exchange-workspace-navigation .exchange-workspace-tabs > button.tw-tactile-control.tw-tactile-control,
html body .exchange-region-selector > button.tw-tactile-control.tw-tactile-control{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -3px 0 rgba(4,2,9,.68),
    inset 0 0 0 1px rgba(216,189,132,.07)!important;
}
html body .exchange-workspace-navigation .exchange-workspace-tabs > button.tw-tactile-control.tw-tactile-control:hover,
html body .exchange-region-selector > button.tw-tactile-control.tw-tactile-control:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.19),
    inset 0 -3px 0 rgba(4,2,9,.72),
    inset 0 0 0 1px rgba(216,189,132,.28)!important;
}
html body .exchange-workspace-navigation .exchange-workspace-tabs > button.tw-tactile-control.tw-tactile-control:is(.is-active,[aria-pressed="true"]),
html body .exchange-region-selector > button.tw-tactile-control.tw-tactile-control:is(.is-active,[aria-checked="true"]){
  translate:0 1px;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.34),
    inset 0 -2px 0 #d8bd84,
    inset 0 0 0 1px rgba(255,239,190,.16),
    0 0 12px rgba(124,76,159,.18)!important;
}
html body .exchange-workspace-navigation .exchange-workspace-tabs > button.tw-tactile-control.tw-tactile-control:is(:active,.tw-tactile-keypress),
html body .exchange-region-selector > button.tw-tactile-control.tw-tactile-control:is(:active,.tw-tactile-keypress){
  translate:0 3px;
  box-shadow:
    inset 0 4px 7px rgba(0,0,0,.44),
    inset 0 -1px 0 #d8bd84,
    inset 0 0 0 1px rgba(255,239,190,.13)!important;
}

/* Explicitly borderless controls requested elsewhere remain borderless and
   are not converted into keycaps by the enhancement script. */
html body :is(.pin-launcher,.brand-easter-trigger,.discovery-logo-map){
  --tw-keycap-raised-shadow:none;
}

/* Hourly/Daily is one toggle with two physical faces. The housing never
   glows or moves; only the selected half engages and responds to a press. */
html body .calendar-view-toggle.tw-tactile-plain.tw-tactile-plain,
html body .calendar-view-toggle.tw-tactile-plain.tw-tactile-plain:hover,
html body .calendar-view-toggle.tw-tactile-plain.tw-tactile-plain:focus-visible,
html body .calendar-view-toggle.tw-tactile-plain.tw-tactile-plain:active{
  translate:0 0!important;
  transform:none!important;
  filter:none!important;
  border-color:rgba(216,189,132,.45)!important;
  background:#0f0c17!important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.82),0 4px 9px rgba(0,0,0,.3)!important;
  outline:0;
}
html body .calendar-view-toggle.tw-tactile-plain.tw-tactile-plain:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:3px;
}

/* Compact Nix entry action: retain its secondary color while matching the
   depth and travel of the newer Exchange keycaps. */
html body #exchangeOpenBoard.tw-tactile-control.tw-tactile-control.tw-tactile-control{
  border-color:rgba(216,189,132,.52)!important;
  background:linear-gradient(180deg,#352c40,#1b1624)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -2px 0 rgba(4,2,8,.62),
    0 4px 0 #09070e,
    0 8px 13px rgba(0,0,0,.38)!important;
}
html body #exchangeOpenBoard.tw-tactile-control.tw-tactile-control.tw-tactile-control:hover{
  border-color:#d8bd84!important;
  background:linear-gradient(180deg,#493952,#241c2e)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -2px 0 rgba(4,2,8,.58),
    0 4px 0 #09070e,
    0 9px 15px rgba(0,0,0,.42),
    0 0 10px rgba(216,189,132,.14)!important;
}
html body #exchangeOpenBoard.tw-tactile-control.tw-tactile-control.tw-tactile-control:is(:active,.tw-tactile-keypress){
  translate:0 4px;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.4),0 1px 0 #09070e,0 3px 5px rgba(0,0,0,.25)!important;
}

/* The page pin occupies the reserved header slot beside Updates. It remains
   a borderless physical pin instead of turning into a button-shaped tile. */
html body .top-right-utility{
  grid-template-columns:minmax(0,1fr) auto auto!important;
  padding-right:0!important;
}
html body .top-right-utility>.pin-launcher{
  position:relative!important;
  inset:auto!important;
  align-self:start!important;
  justify-self:end!important;
  width:58px!important;
  min-width:58px!important;
  height:46px!important;
  min-height:46px!important;
  margin:0!important;
}

/* The panel Favorite is the same compact keycap as the bookmark inside the
   filter drawer. Readability's generic tucked utility otherwise preserves the
   old text-button width even after the FAVE label is removed. */
html body.tw-readable-ui .exchange-panel-head #exchangeWatchButton.tucked-panel-utility{
  display:grid!important;
  width:42px!important;
  min-width:42px!important;
  max-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  flex:0 0 42px!important;
  place-items:center!important;
  gap:0!important;
  margin:0 var(--tucked-pin-clearance,42px) 0 0!important;
  padding:0!important;
  border:1px solid rgba(216,189,132,.48)!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,rgba(38,31,49,.98),rgba(18,15,27,.99))!important;
  color:#e7d39b!important;
}
html body.tw-readable-ui .exchange-panel-head #exchangeWatchButton .exchange-bookmark-icon{
  width:22px!important;
  height:22px!important;
  flex:0 0 22px!important;
}

/* Custom Timer actions share the same opaque raised keycap mechanics. */
html body :is(.manual-timers,.timer-time-edit-dialog) button.tw-tactile-control.tw-tactile-control.tw-tactile-control{
  background-color:#211a2b!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 0 rgba(4,2,8,.6),
    0 3px 0 #09070e,
    0 6px 10px rgba(0,0,0,.34)!important;
}
html body #addTimerBtn.tw-tactile-control.tw-tactile-control.tw-tactile-control{
  border-color:rgba(184,139,255,.68)!important;
  background:linear-gradient(180deg,#69429c,#3d275d)!important;
  color:#fff7e0;
}
html body :is(.manual-timers,.timer-time-edit-dialog) button.tw-tactile-control.tw-tactile-control.tw-tactile-control:not(:disabled):hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -2px 0 rgba(4,2,8,.56),
    0 3px 0 #09070e,
    0 7px 12px rgba(0,0,0,.38),
    0 0 9px rgba(184,139,255,.13)!important;
}
html body :is(.manual-timers,.timer-time-edit-dialog) button.tw-tactile-control.tw-tactile-control.tw-tactile-control:not(:disabled):is(:active,.tw-tactile-keypress){
  translate:0 3px;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.42),0 1px 0 #09070e,0 2px 4px rgba(0,0,0,.24)!important;
}
html body :is(.manual-timers,.timer-time-edit-dialog) .danger-btn.tw-tactile-control.tw-tactile-control{
  background-color:#3a1c25!important;
}

@media(max-width:760px){
  html body .top-right-utility>.pin-launcher{
    width:44px!important;
    min-width:44px!important;
    height:42px!important;
    min-height:42px!important;
  }
  html body .top-right-utility>.pin-launcher .pin-launcher-glyph{font-size:29px;}
}

/* Panel turns remain genuine 3D card flips, but motion-sensitive users get
   an immediate face change instead of a spatial rotation. */
@media(prefers-reduced-motion:reduce){
  html body .tw-tactile-control.tw-tactile-control.tw-tactile-control,
  html body .tw-tactile-surface.tw-tactile-surface,
  html body .tw-tactile-icon-art.tw-tactile-icon-art{
    transition:none!important;
  }
  .tw-flip-inner,
  .discord-flip-inner{
    transition:none!important;
  }
}