/**
 * Prothaus app shell — modern skin (loaded AFTER the legacy inline shell CSS,
 * printed at wp_footer by snippet 309, so its token overrides win).
 * Identity: slate ink + the Roterpunkt red dot as accent; softer paper,
 * larger radius, calmer shadows. New components: worker home (fichaje card,
 * hours strip, row links, bottom tab bar).
 */

:root{
  --ph-bg:#eef1f4;
  --ph-paper:#ffffff;
  --ph-paper-strong:#ffffff;
  --ph-ink:#17222b;
  --ph-muted:#5c6b78;
  --ph-line:#dde3e9;
  --ph-line-strong:#c9d2da;
  --ph-accent:#33424f;
  --ph-accent-strong:#22303c;
  --ph-accent-soft:#eaeef2;
  --ph-red:#e03131;
  --ph-green:#1f9d55;
  --ph-amber:#e8930c;
  --ph-chip:#f1f4f7;
  --ph-shadow:0 14px 34px rgba(23,34,43,.09);
  --ph-shadow-soft:0 6px 18px rgba(23,34,43,.06);
  --ph-radius:20px;
}

html{ scroll-behavior:smooth; }

/* Brand dot before the site title in the header */
.ph-header .ph-brand a::before,
.ph-header .ph-logo::before{ content:""; display:inline-block; width:.5em; height:.5em; border-radius:50%; background:var(--ph-red); margin-right:.4em; vertical-align:baseline; }

/* Panels: calmer, roomier */
.ph-panel{ border-radius:22px; box-shadow:var(--ph-shadow-soft); border:1px solid var(--ph-line); }
.ph-panel-head h2{ letter-spacing:-.01em; }
.ph-panel-head p{ color:var(--ph-muted); }

/* ------------------------------------------------ worker home components -- */
.ph-home{ display:flex; flex-direction:column; gap:16px; max-width:620px; margin:0 auto; padding-bottom:86px; }
.ph-home section{ scroll-margin-top:84px; }

.ph-fcard{ background:var(--ph-paper); border:1px solid var(--ph-line); border-radius:24px; box-shadow:var(--ph-shadow); padding:22px 18px 18px; }
.ph-fcard .ph-gps-ui{ max-width:100% !important; }

.ph-hstrip{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:14px; }
.ph-hcell{ background:var(--ph-chip); border-radius:14px; padding:10px 6px; text-align:center; }
.ph-hcell b{ display:block; font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--ph-ink); }
.ph-hcell span{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ph-muted); font-weight:700; }

.ph-rowhead{ display:flex; align-items:center; gap:10px; margin:4px 2px 10px; }
.ph-rowhead h2{ font-size:17px; font-weight:800; margin:0; letter-spacing:-.01em; }
.ph-badge{ background:var(--ph-red); color:#fff; border-radius:999px; min-width:22px; height:22px; display:inline-grid; place-items:center; font-size:12px; font-weight:800; padding:0 7px; }
.ph-badge.zero{ background:var(--ph-line-strong); color:var(--ph-ink); }

/* Bottom tab bar (mobile-first; also fine on desktop) */
.ph-tabbar{ position:fixed; bottom:0; left:0; right:0; z-index:60;
  background:color-mix(in srgb, var(--ph-paper) 92%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid var(--ph-line); display:flex; padding:8px 6px calc(10px + env(safe-area-inset-bottom)); }
.ph-tab{ flex:1; text-align:center; font-size:10.5px; font-weight:700; color:var(--ph-muted); text-decoration:none; letter-spacing:.02em; position:relative; }
.ph-tab .ic{ display:block; font-size:20px; margin-bottom:2px; line-height:1; }
.ph-tab:hover, .ph-tab:focus{ color:var(--ph-ink); }
.ph-tab .ph-badge{ position:absolute; top:-4px; right:calc(50% - 24px); min-width:17px; height:17px; font-size:10px; }
@media (min-width:900px){ .ph-tabbar{ max-width:620px; margin:0 auto; border:1px solid var(--ph-line); border-radius:18px 18px 0 0; left:50%; transform:translateX(-50%); right:auto; width:100%; } }

/* Fichaje bits rendered by 196 inside the card */
.ph-fcard #ph_where{ font-size:14px !important; font-weight:700 !important; }
.ph-fcard #ph_timer{ display:block; }
.ph-fcard #ph_timer_val{ font-size:42px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; display:block; line-height:1.05; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }