/* The contractors' app frame, on the HHC design system: a compact bar, then the time screens. */
.field-topbar { display: flex; align-items: center; min-height: 60px; gap: var(--hhc-space-3); padding: 0 var(--hhc-space-4); max-width: 34rem; margin: 0 auto; }
.field-topbar .hhc-brand-product { display: inline-flex; }
/* The ? for this screen's help, at the top right; 48px, for gloves. */
.field-topbar .hhc-help { margin-left: auto; width: 48px; height: 48px; }

/* Opening: the mark and the name on Harper Green, as the websites' holding page, until the app is ready. */
.loading {
    display: grid; place-content: center; justify-items: center; gap: var(--hhc-space-3); min-height: 100dvh; margin: 0;
    padding: var(--hhc-space-5); text-align: center;
    background: var(--hhc-blueprint), var(--hhc-green); color: var(--hhc-limewash);
}
.loading p { margin: 0; }
.loading-mark { width: 80px; height: 80px; margin-bottom: var(--hhc-space-3); }
.loading-name { font: 600 2.4rem/1 var(--hhc-font-serif); letter-spacing: 0.18em; text-transform: uppercase; margin-right: -0.18em; }
.loading-words { font-size: var(--hhc-step-1); font-weight: 550; }

/* Something failed outside a page: a plain message along the bottom, in the warning colours, with a way back. */
#blazor-error-ui {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    padding: var(--hhc-space-4); background: var(--hhc-danger-bg); color: var(--hhc-text);
    border-top: 3px solid var(--hhc-danger); font-size: var(--hhc-step-1);
}
#blazor-error-ui .reload { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; margin-left: var(--hhc-space-2); color: var(--hhc-text); }

/* A narrow phone: the line under HARPER tightens so the bar fits with "Time" beside it. */
@media (max-width: 24rem) {
    .field-topbar .hhc-lockup-sub { letter-spacing: 0.08em; font-size: 0.66rem; }
    .field-topbar .hhc-brand-name { font-size: 1.15rem; }
}

/* A new version ready to restart into, at the top of every screen. */
.update-ready { margin: var(--hhc-space-3) 0; padding: var(--hhc-space-4); border-radius: var(--hhc-radius); background: var(--hhc-surface); color: var(--hhc-text); border: 2px solid var(--hhc-green); }
.update-ready p { margin: 0 0 var(--hhc-space-3); font-weight: 600; }

/* The version this phone runs, quietly at the foot, so the office can check it. */
/* Clear of the bar along the bottom, which is fixed over the foot of the page. */
.app-version { max-width: 34rem; margin: 0 auto; padding: var(--hhc-space-2) var(--hhc-space-4) calc(6.5rem + env(safe-area-inset-bottom)); text-align: center; font-size: 0.8rem; color: var(--hhc-text-soft); }