:root {
    /* type scale */
    --text-2xs: 0.6875rem;  /* 11px */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.8125rem;   /* 13px */
    --text-md: 0.9375rem;   /* 15px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.375rem;    /* 22px */

    /* spacing scale */
    --space-1: 0.25rem;     /* 4px  */
    --space-2: 0.5rem;      /* 8px  */
    --space-3: 0.75rem;     /* 12px */
    --space-4: 1rem;        /* 16px */
    --space-5: 1.5rem;      /* 24px */
    --space-6: 2rem;        /* 32px */

    /* window chrome */
    --titlebar-height: 1.375rem;
    --toolbar-height: 3.25rem;
    --window-radius: 4px;
    --hairline: 1px solid #d9d9d9;

    --ui-font: Helvetica, Arial, sans-serif;
}
.mobile-shell {
    display: none;
}

html.is-mobile .box-icons1,
html.is-mobile .time-and-date,
html.is-mobile .app,
html.is-mobile #global-context-menu {
    display: none !important;
}

html.is-mobile body {
    background: #f1f1f1;
}

html.is-mobile .mobile-shell {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    padding-top: env(safe-area-inset-top);
    background: #f5f5f5;
    color: #333333;
    font-family: var(--ui-font);
    -webkit-tap-highlight-color: transparent;
}

/* tabs, styled like browser tabs */
.m-top {
    flex: none;
    border-bottom: 1px solid #dcdcdc;
    background: #f5f5f5;
}

.m-tabs {
    display: flex;
    gap: 0.125rem;
    padding: 0.625rem var(--space-2) 0;
    overflow-x: auto;
    scrollbar-width: none;
    box-shadow: inset 0 -0.25rem 1rem rgba(0, 0, 0, 0.3);
}

.m-tabs::-webkit-scrollbar {
    display: none;
}

.m-tab {
    flex: none;
    position: relative;
    min-height: 2.5rem;
    padding: 0 var(--space-5);
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    background: transparent;
    color: #666666;
    font: inherit;
    font-size: var(--text-md);
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;
}

.m-tab.is-active {
    z-index: 1;
    margin-bottom: -1px;
    border-color: #dcdcdc;
    background: #ffffff;
    color: #000000;
}

.m-tab:focus-visible {
    outline: 2px solid #007aff;
    outline-offset: -2px;
}

/* thin title under the tabs, for apps without their own header */
.m-titlebar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0 var(--space-4);
    border-bottom: 1px solid #cccccc;
    background: linear-gradient(180deg, #f0f0f0 0%, #e0e0e0 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.m-titlebar[hidden] {
    display: none;
}

.m-title {
    overflow: hidden;
    color: #333333;
    font-size: 1.25rem;
    font-weight: 300;
    text-shadow: 0 1px 0 #ffffff;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.m-views {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #ffffff;
}

.m-view {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}

.m-view[hidden] { display: none; }
.m-view.is-current { z-index: 2; }
.m-view.is-after { z-index: 3; transform: translate3d(100%, 0, 0); }
.m-view.is-before { z-index: 1; transform: translate3d(-100%, 0, 0); }
.m-view.is-instant { transition: none; }

.m-view-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
    .m-view { transition: none; }
}

/* Keep last so it beats any `display` set above (e.g. .app { display: flex }) */
.hidden {
    display: none !important;
}

html.is-mobile body > :not(.mobile-shell):not(script) { display: none !important; }
html.is-mobile body { margin: 0; overflow: hidden; cursor: auto; }
html.is-mobile .mobile-shell { z-index: 999999; }
.mobile-shell, .mobile-shell * { box-sizing: border-box; }
.archive-mobile-empty { padding: 2rem 1rem; font: 1rem/1.5 Helvetica, Arial, sans-serif; }
.archive-mobile-empty h1 { font-size: 1.375rem; }

.m-view-body { display: flex; flex-direction: column; }