/* ============================================
   GAURAV'S CLOCK — TABLET (641px – 900px)
   Triggered via <link media="(min-width: 641px) and (max-width: 900px)">
   ============================================ */

.device-tablet .app {
  padding: clamp(0.5rem, 1.5vh, 1rem) clamp(1rem, 3vw, 2rem);
  --app-pt: clamp(0.5rem, 1.5vh, 1rem);
  --app-px: clamp(1rem, 3vw, 2rem);
}

.device-tablet .topbar { padding: clamp(0.3rem, 0.6vh, 0.5rem) 0; }
.device-tablet .topbar__btn { width: 34px; height: 34px; }
.device-tablet .topbar__btn-text { font-size: 1rem; }



.device-tablet .clock-section { gap: clamp(0.4rem, 1vh, 0.8rem); }

.device-tablet .clock-date { gap: 0.5rem; font-size: clamp(0.75rem, 1.5vw, 0.95rem); }

.device-tablet .clock { padding: clamp(0.6rem, 2vh, 1.5rem) clamp(1rem, 3vw, 2.5rem); }
.device-tablet .clock__digit { font-size: var(--clock-size); min-width: 0.65em; }
.device-tablet .clock__digit-pair { gap: 3px; }
.device-tablet .clock__digit-pair--seconds .clock__digit { font-size: var(--clock-size-seconds); }
.device-tablet .clock__colon { gap: clamp(6px, 1vw, 14px); padding: 0 clamp(3px, 0.6vw, 10px); }
.device-tablet .clock__colon-dot { width: clamp(4px, 0.7vw, 7px); height: clamp(4px, 0.7vw, 7px); }
.device-tablet .clock__ampm { font-size: clamp(0.75rem, 1.8vw, 1.1rem); margin-left: clamp(0.4rem, 1vw, 0.8rem); margin-top: clamp(0.2rem, 0.5vw, 0.5rem); }

.device-tablet .clock-meta { gap: clamp(0.5rem, 2vw, 1.2rem); }
.device-tablet .clock-meta__item { gap: 0.15rem; }
.device-tablet .clock-meta__label { font-size: 0.58rem; }
.device-tablet .clock-meta__value { font-size: 0.72rem; }
.device-tablet .clock-meta__item--extra { display: none; }

.device-tablet .panels { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin: auto 0 0.3rem 0; }
.device-tablet .panel { padding: clamp(0.5rem, 1vh, 0.8rem); gap: 0.5rem; }
.device-tablet .panel__icon { width: 30px; height: 30px; }
.device-tablet .panel__content { gap: 0.3rem; }
.device-tablet .panel__title { font-size: 0.76rem; }
.device-tablet .panel__label { font-size: 0.64rem; }
.device-tablet .panel__value { font-size: 0.66rem; }
.device-tablet .panel__moon-visual { padding: 0.25rem 0; }
.device-tablet .panel__moon-sphere { width: 28px; height: 28px; }
.device-tablet .panel__battery-visual { gap: 0.4rem; }
.device-tablet .panel__battery-bar { height: 7px; }

.device-tablet .theme-drawer__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.device-tablet .theme-drawer__title { font-size: 1rem; }

.device-tablet .footer { padding: 0.3rem 0; }
.device-tablet .footer__text { font-size: 0.6rem; }

/* Landscape tablet */
@media (max-height: 500px) and (orientation: landscape) {
  .clock-meta { display: none; }
  .clock { padding: 0.3rem 1.2rem; }
  .panels { grid-template-columns: repeat(4, 1fr); gap: 0.3rem; }
  .panel { padding: 0.4rem; }
  .footer { display: none; }
}