/* Keep the main Focus countdown readable without enlarging the room sidebar. */
/* Keep 16px clearance below the fixed profile (bottom: 64px), not two
   stacked rows of shell and dashboard padding. Menu state never shifts it. */
body.focus-page .dashboard-container {
    padding-top: 4px;
}

#timer-card {
    container-type: inline-size;
}

.focus-duration-setting {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 auto var(--sp-3, 12px);
    color: var(--color-text, inherit);
    font-size: var(--text-sm, 14px);
}
.focus-duration-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.focus-duration-field input {
    width: 68px;
    padding: 5px 7px;
    border: 1px solid var(--color-border, rgba(255,255,255,.3));
    border-radius: 8px;
    background: var(--color-surface-2, rgba(255,255,255,.1));
    color: inherit;
    font: inherit;
    text-align: center;
}
.focus-duration-field input:focus-visible { outline: 2px solid var(--color-accent, #7bd); outline-offset: 2px; }
.focus-duration-field input:disabled { opacity: .55; cursor: not-allowed; }
.focus-duration-setting small { width: 100%; text-align: center; color: var(--color-muted, #9fb6cf); }

#timer-card .timer-ring-wrap {
    width: min(100%, 17rem);
    max-width: 100%;
    aspect-ratio: 1;
}

#timer-card .timer-ring {
    /* Override the old fixed 160/180px mobile ring sizes. */
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
    display: block;
}

#timer-card .timer-ring-time {
    font-size: clamp(2rem, 8vw, 4rem);
    font-size: clamp(2rem, 22cqi, 4rem);
    line-height: 1;
    white-space: nowrap;
}

#chalg-count {
    min-width: 1.5rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--color-surface-2);
    font-variant-numeric: tabular-nums;
}