/* Sidekick dock — faithful HTML/CSS copy of the macOS app (light, detached, medium icons).
   1em = 1pt of the real app. Scale the whole dock with font-size, e.g. .skd { font-size: 2px }.
   Geometry from lateraldock/Sources/Dock/DockLayout.swift: 44pt icon, 10pt padding, 54pt cell. */

.skd {
  --skd-panel: #ececee;
  --skd-rim: rgba(255, 255, 255, .95);
  --skd-edge: rgba(0, 0, 0, .10);
  --skd-ink: #1d1d1f;
  --skd-ink-2: #86868b;
  --skd-hair: rgba(29, 29, 31, .22);
  --skd-green: #34c759;
  --skd-orange: #ff9f0a;
  --skd-red: #ff3b30;
  font-size: 1px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 66em;
  padding: 7em 0;
  border-radius: 22em;
  background: var(--skd-panel);
  box-shadow:
    inset 0 0 0 1em var(--skd-rim),
    0 0 0 .5em var(--skd-edge),
    0 12em 40em -8em rgba(0, 0, 0, .22),
    0 2em 6em rgba(0, 0, 0, .06);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "SF Pro Text", system-ui, sans-serif;
  color: var(--skd-ink);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  position: relative;
}
.skd[data-theme="dark"] {
  --skd-panel: #1c1c1e;
  --skd-rim: rgba(255, 255, 255, .10);
  --skd-edge: rgba(0, 0, 0, .6);
  --skd-ink: #f5f5f7;
  --skd-ink-2: #98989d;
  --skd-hair: rgba(245, 245, 247, .22);
}

.skd-cell {
  position: relative;
  width: 100%;
  height: 54em;
  display: grid;
  place-items: center;
}
.skd-cell > * { grid-area: 1 / 1; }
.skd-cell[href] { color: inherit; text-decoration: none; cursor: pointer; }
.skd-cell[href]:focus-visible { outline: 2em solid currentColor; outline-offset: -2em; border-radius: 10em; }

.skd-icon { width: 44em; height: 44em; display: block; object-fit: contain; }
/* App icons from macOS include their own transparent margin; favicons do not. */
.skd-app .skd-icon { width: 50em; height: 50em; }

.skd-run::after {
  content: ""; position: absolute; right: 2em; top: 50%;
  width: 4em; height: 4em; margin-top: -2em; border-radius: 50%;
  background: var(--skd-ink); opacity: .9;
}

.skd-divider { width: 50em; height: 1em; margin: 7em 0; background: var(--skd-hair); flex: none; }

.skd-badge {
  position: absolute; right: .5em; bottom: .5em;
  font: 700 10em/1 -apple-system, system-ui, sans-serif;
  min-width: 1.7em; height: 1.7em; padding: 0 .45em; border-radius: .85em;
  display: grid; place-items: center; box-sizing: border-box;
  color: #fff; background: rgba(0, 0, 0, .82);
}
.skd-play {
  position: absolute; right: 4em; bottom: 4em; width: 18em; height: 18em; border-radius: 50%;
  background: rgba(0, 0, 0, .8); display: grid; place-items: center;
}
.skd-play svg { width: 8em; height: 8em; fill: #fff; }

.skd-art {
  width: 50em; height: 50em; object-fit: contain; display: block;
}

.skd-link { width: 44em; height: 44em; display: grid; place-items: center; }
.skd-link img, .skd-link svg { width: 40em; height: 40em; }

/* Weather: SF "sun.max.fill" + rounded semibold temperature */
.skd-weather { display: grid; justify-items: center; gap: 1em; }
.skd-weather svg { width: 19em; height: 19em; }
.skd-weather b { font: 600 16.3em/1 "SF Pro Rounded", -apple-system, system-ui, sans-serif; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

.skd-bt {
  width: 44em; height: 44em; border-radius: 10em;
  background: linear-gradient(180deg, #3d8cff, #1e63e9);
  display: grid; place-items: center; position: relative;
  box-shadow: 0 1em 2em rgba(0, 0, 0, .18);
}
.skd-bt svg { width: 22em; height: 22em; }
.skd-bt .skd-badge { right: -.5em; bottom: -.5em; }

.skd-kbd svg { width: 34em; height: 24em; color: var(--skd-ink); display: block; }

.skd-ring { display: grid; justify-items: center; gap: 3em; }
.skd-ring-dial { position: relative; width: 34em; height: 34em; display: grid; place-items: center; }
.skd-ring-dial > svg.dial { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.skd-ring-dial img, .skd-ring-dial .glyph { width: 15em; height: 15em; }
.skd-ring small { font: 600 9.2em/1 "SF Pro Rounded", -apple-system, system-ui, sans-serif; color: var(--skd-ink-2); font-variant-numeric: tabular-nums; }

.skd-activity { display: grid; justify-items: center; gap: 4em; }
.skd-activity .g { position: relative; width: 22em; height: 22em; }
.skd-activity .g img { width: 100%; height: 100%; display: block; }
.skd-activity .g i {
  position: absolute; right: -3em; bottom: -3em; width: 8em; height: 8em; border-radius: 50%;
  background: var(--skd-green); box-shadow: 0 0 0 1.6em var(--skd-panel);
}
.skd-activity small { font: 500 9.2em/1 "SF Pro Rounded", -apple-system, system-ui, sans-serif; color: var(--skd-ink-2); }

/* Stats: from StatsDockWidgetView — small rounded caption above a bold value, per metric */
.skd-stats { display: grid; gap: 5.3em; width: 39.6em; justify-items: center; }
.skd-metric { display: grid; justify-items: center; gap: .44em; }
.skd-metric span { font: 600 8.7em/1.1 "SF Pro Rounded", -apple-system, system-ui, sans-serif; color: var(--skd-ink-2); }
.skd-metric b { font: 700 16.7em/1.05 "SF Pro Rounded", -apple-system, system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.skd-cell--stats { height: auto; padding: 10em 0; }

/* Temporary item: minutes left in a black capsule under the icon */
.skd-temp {
  align-self: end; margin-bottom: 1em;
  font: 500 9em/1.35 "SF Pro Rounded", -apple-system, system-ui, sans-serif; font-variant-numeric: tabular-nums;
  color: #fff; background: rgba(0, 0, 0, .85); padding: 0 .45em; border-radius: 1em;
}

.skd[data-theme="dark"] img[data-invert] { filter: invert(1); }