/* ============================
 * WIDGET TYPO
 * ============================ */

.widget-kicker {
    margin: 0;
    color: var(--color-text-light);
    font-size: clamp(0.5rem, calc(0.7rem * var(--content-density)), 0.7rem);
    line-height: 1.34;
    text-transform: uppercase;
    letter-spacing: 0.062em;
    font-weight: var(--font-weight-semibold);
    text-shadow: none;
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(6px, calc(228px * var(--content-density)), 28px);
    min-width: 0;
}

.widget-header h2 {
    margin: 0;
    font-size: clamp(0.84rem, calc(1.9rem * var(--content-density)), 1.9rem);
    line-height: 1.16;
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.widget-chip {
    --chip-marker-color: var(--color-accent-blue);
    --chip-tilt: -1.2deg;
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    border: none;
    border-radius: 0;
    margin-top: clamp(2px, calc(4px * var(--content-density)), 4px);
    padding: clamp(4px, calc(7px * var(--content-density)), 8px) clamp(14px, calc(21px * var(--content-density)), 21px);
    font-size: clamp(1.02rem, calc(1.42rem * var(--content-density)), 1.42rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.058em;
    font-weight: var(--font-weight-semibold);
    color: color-mix(in srgb, var(--color-text) 70%, var(--chip-marker-color) 30%);
    background: none;
    white-space: nowrap;
    isolation: isolate;
    overflow: visible;
}

.widget-chip__label {
    position: relative;
    z-index: 1;
}

.widget-chip::before {
    content: "";
    position: absolute;
    inset: -0.72em -1.36em -0.68em -1.32em;
    z-index: -1;
    background: var(--chip-marker-color);
    pointer-events: none;
    -webkit-mask-image: url("../../assets/img/widget-chip-marker-mask.svg");
    mask-image: url("../../assets/img/widget-chip-marker-mask.svg");
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transform: rotate(var(--chip-tilt));
    filter: saturate(1.14);
}

.container1 .widget-chip { --chip-tilt: -7.2deg; }
.container2 .widget-chip { --chip-tilt: -5.1deg; }
.container3 .widget-chip { --chip-tilt: -3.4deg; }
.container4 .widget-chip { --chip-tilt: -5.8deg; }
.container5 .widget-chip { --chip-tilt: -4.9deg; }
.container6 .widget-chip { --chip-tilt: -4.2deg; }

.widget-content {
    min-height: 0;
    height: 100%;
    min-width: 0;
    overflow: clip;
}

.widget-collapsed {
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(6px, calc(20px * var(--content-density)), 24px);
    min-width: 0;
    overflow: clip;
}

.widget-expanded {
    display: none;
    min-height: 0;
}

.summary-caption {
    margin: 0;
    font-size: clamp(0.56rem, calc(0.86rem * var(--content-density)), 0.86rem);
    line-height: 1.32;
    letter-spacing: 0.058em;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.summary-hero {
    margin: 0;
    font-size: clamp(1rem, calc(4rem * var(--content-density)), 7rem);
    line-height: 0.96;
    letter-spacing: -0.022em;
    font-weight: var(--font-weight-bold);
    color: color-mix(in srgb, var(--color-text) 90%, var(--color-accent) 10%);
    overflow-wrap: anywhere;
}

.summary-weather {
    margin: 0;
    font-size: clamp(1rem, calc(5.8rem * var(--content-density)), 8.8rem);
    line-height: 0.92;
    letter-spacing: -0.028em;
    font-weight: var(--font-weight-bold);
    color: color-mix(in srgb, var(--color-text) 88%, var(--color-accent) 12%);
    overflow-wrap: anywhere;
}

.summary-sub {
    margin: 0;
    font-size: clamp(0.62rem, calc(1.12rem * var(--content-density)), 1.12rem);
    line-height: 1.46;
    letter-spacing: 0.007em;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.metric-line {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: clamp(4px, calc(16px * var(--content-density)), 16px);
    padding-top: clamp(4px, calc(16px * var(--content-density)), 18px);
    border-top: 1px solid color-mix(in srgb, var(--color-border-light) 84%, var(--color-border) 16%);
    font-size: clamp(0.56rem, calc(0.92rem * var(--content-density)), 0.92rem);
    line-height: 1.34;
    color: var(--color-text);
    text-shadow: none;
    min-width: 0;
    overflow: clip;
}

.metric-line span,
.metric-line strong {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.metric-line strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    font-size: clamp(0.5rem, calc(1rem * var(--content-density)), 1rem);
    letter-spacing: 0.012em;
    text-align: right;
}

.container2 .summary-hero,
.container6 .summary-hero,
.container3 .summary-weather {
    color: color-mix(in srgb, var(--card-tint) 22%, var(--color-text) 78%);
}

.container2 .summary-hero,
.container3 .summary-weather,
.container4 .summary-hero,
.container6 .summary-hero {
    margin-top: auto;
}

.container2 .metric-line,
.container3 .metric-line,
.container4 .metric-line,
.container6 .metric-line {
    margin-top: var(--spacing-sm);
}

/* ============================
 * CALENDAR
 * ============================ */

.calendar-collapsed {
    justify-content: flex-end;
    gap: clamp(5px, calc(16px * var(--content-density)), 20px);
    position: relative;
    overflow: clip;
    min-width: 0;
}

.calendar-collapsed .summary-caption {
    margin-top: auto;
    color: color-mix(in srgb, var(--color-accent-blue) 82%, var(--color-text) 18%);
}

.container1 .calendar-collapsed .summary-caption {
    margin-top: clamp(4px, calc(16px * var(--content-density)), 20px);
}

.calendar-day-number {
    margin: 0;
    margin-top: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-inline: clamp(8px, calc(18px * var(--app-density)), 30px);
    text-align: left;
    font-size: var(--calendar-day-size, clamp(3.2rem, calc(32rem * var(--app-density)), 32rem));
    line-height: 0.74;
    letter-spacing: -0.106em;
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--color-text) 86%, var(--color-accent) 14%);
    position: relative;
    z-index: 1;
    padding-block: 0.04em;
    transform: translateY(-4%);
}

.calendar-day-meta {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 82%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: left;
    font-size: var(--calendar-meta-size, clamp(0.62rem, calc(2.4rem * var(--app-density)), 3.6rem));
    color: color-mix(in srgb, var(--color-accent-blue) 88%, var(--color-text) 12%);
    text-transform: uppercase;
    letter-spacing: 0.048em;
    line-height: 1.09;
    text-shadow: none;
    z-index: 2;
    pointer-events: none;
}

.calendar-expanded {
    min-height: 0;
    height: 100%;
    grid-template-rows: auto auto 1fr;
    gap: var(--spacing-md);
}

.calendar-controls {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.calendar-controls strong {
    min-width: 138px;
    text-align: center;
    font-size: var(--font-size-sm);
}

.calendar-weekdays,
.calendar-grid-view {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.calendar-grid-view {
    grid-template-rows: repeat(6, minmax(0, 1fr));
    min-height: 0;
    height: 100%;
}

.calendar-weekdays span {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.048em;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    text-shadow: none;
    text-align: center;
}

.calendar-cell {
    min-height: 38px;
    border: 1px solid color-mix(in srgb, var(--color-border-light) 82%, var(--color-border) 18%);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.98rem;
    font-weight: var(--font-weight-medium);
    background: color-mix(in srgb, var(--color-background) 95%, var(--color-background-alt) 5%);
}

.calendar-cell.is-out {
    color: var(--color-text-light);
}

.calendar-cell.is-today {
    border-color: color-mix(in srgb, var(--color-accent) 54%, var(--color-border-light) 46%);
    color: color-mix(in srgb, var(--color-accent) 72%, var(--color-text) 28%);
    font-weight: var(--font-weight-semibold);
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-background) 88%);
}

/* ============================
 * CLOCK ANALOG
 * ============================ */

.clock-collapsed {
    min-height: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 1vw, 14px);
    box-sizing: border-box;
    overflow: clip;
}

.analog-clock-shell {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: clamp(6px, 0.7vh, 10px);
    padding-bottom: clamp(16px, 1.6vh, 22px);
    box-sizing: border-box;
}

.clock-meta-top,
.clock-meta-bottom {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    font-size: clamp(0.72rem, 0.9vw, 0.9rem);
    letter-spacing: 0.044em;
    color: var(--color-text);
    text-transform: uppercase;
    text-align: center;
    line-height: 1.28;
    font-weight: var(--font-weight-semibold);
    pointer-events: none;
    text-shadow: none;
    z-index: 20;
}

.clock-meta-top {
    top: 0;
}

.clock-meta-bottom {
    bottom: 2px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.analog-clock-face {
    --clock-tick-major: color-mix(in srgb, var(--color-text) 64%, transparent 36%);
    position: relative;
    width: min(100%, 620px);
    height: min(100%, 620px);
    min-width: 96px;
    min-height: 96px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 50%;
    background: linear-gradient(
            148deg,
            rgba(255, 255, 255, 0.34) 0%,
            rgba(246, 251, 255, 0.2) 54%,
            rgba(226, 236, 247, 0.14) 100%
    );
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow:
            inset 0 6px 12px rgba(0, 0, 0, 0.22),
            inset 0 2px 4px rgba(0, 0, 0, 0.16);
    overflow: clip;
    z-index: 2;
}

.analog-clock-face::after {
    content: "";
    position: absolute;
    inset: 4.8%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    pointer-events: none;
    z-index: 2;
}

.clock-tick-ring {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: repeating-conic-gradient(
            from -90deg,
            transparent 0deg 29deg,
            var(--clock-tick-major) 29deg 30deg
    );
    -webkit-mask: radial-gradient(circle, transparent 74%, #000 74%, #000 82%, transparent 82%);
    mask: radial-gradient(circle, transparent 74%, #000 74%, #000 82%, transparent 82%);
    z-index: 3;
}

.clock-tick-ring::before {
    content: none;
}

.clock-tick-ring::after {
    content: none;
}

.clock-mark {
    display: none;
}

.clock-mark-12 { transform: rotate(0deg); }
.clock-mark-1 { transform: rotate(30deg); }
.clock-mark-2 { transform: rotate(60deg); }
.clock-mark-3 { transform: rotate(90deg); }
.clock-mark-4 { transform: rotate(120deg); }
.clock-mark-5 { transform: rotate(150deg); }
.clock-mark-6 { transform: rotate(180deg); }
.clock-mark-7 { transform: rotate(210deg); }
.clock-mark-8 { transform: rotate(240deg); }
.clock-mark-9 { transform: rotate(270deg); }
.clock-mark-10 { transform: rotate(300deg); }
.clock-mark-11 { transform: rotate(330deg); }

.clock-number {
    display: none;
}

.clock-number-12 { --clock-angle: 0deg; }
.clock-number-1 { --clock-angle: 30deg; }
.clock-number-2 { --clock-angle: 60deg; }
.clock-number-3 { --clock-angle: 90deg; }
.clock-number-4 { --clock-angle: 120deg; }
.clock-number-5 { --clock-angle: 150deg; }
.clock-number-6 { --clock-angle: 180deg; }
.clock-number-7 { --clock-angle: 210deg; }
.clock-number-8 { --clock-angle: 240deg; }
.clock-number-9 { --clock-angle: 270deg; }
.clock-number-10 { --clock-angle: 300deg; }
.clock-number-11 { --clock-angle: 330deg; }

.clock-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: 50% 100%;
    border-radius: 999px;
    transition: none;
    will-change: transform;
    z-index: 6;
    box-shadow: none;
}

.clock-hand-hour {
    width: 5px;
    height: 31%;
    background: color-mix(in srgb, var(--color-accent-blue) 68%, var(--color-text) 32%);
}

.clock-hand-minute {
    width: 3.5px;
    height: 40%;
    background: color-mix(in srgb, var(--color-accent-blue) 82%, var(--color-text) 18%);
}

.clock-hand-second {
    width: 1.5px;
    height: 44%;
    background: var(--color-accent-blue);
    box-shadow: none;
}

.clock-hand-second::before {
    content: none;
}

.clock-center-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    margin-left: 0;
    margin-top: 0;
    border-radius: 50%;
    background: #eef4fb;
    border: 1px solid rgba(255, 255, 255, 0.64);
    box-shadow: none;
    z-index: 9;
}

.clock-center-dot::after {
    content: none;
}

/* ============================
 * PANELS
 * ============================ */

.panel-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
}

.panel-title {
    margin: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.048em;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
}

.panel-footnote {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.42;
    letter-spacing: 0.006em;
    color: var(--color-text-muted);
}

.summary-hero,
.summary-weather,
.summary-sub,
.panel-footnote,
.tech-row span,
.tech-row strong {
    overflow-wrap: anywhere;
}

/* Black avatar theme: keep dynamic text readable via blend inversion. */
:root[data-avatar-theme="black"] .widget-chip {
    --chip-marker-color: #000;
    color: #fff;
}

:root[data-avatar-theme="black"] .widget-chip .widget-chip__label {
    mix-blend-mode: difference;
}

:root[data-avatar-theme="black"] .summary-hero,
:root[data-avatar-theme="black"] .summary-weather,
:root[data-avatar-theme="black"] .calendar-day-number,
:root[data-avatar-theme="black"] .calendar-day-meta,
:root[data-avatar-theme="black"] #eventsNextTime,
:root[data-avatar-theme="black"] #eventsVisibleCounter,
:root[data-avatar-theme="black"] #eventsCriticalCount,
:root[data-avatar-theme="black"] #weatherCity,
:root[data-avatar-theme="black"] #weatherMeta,
:root[data-avatar-theme="black"] #weatherHumidity,
:root[data-avatar-theme="black"] #weatherRain,
:root[data-avatar-theme="black"] #noteUpdated,
:root[data-avatar-theme="black"] #noteCount,
:root[data-avatar-theme="black"] #postitCount,
:root[data-avatar-theme="black"] #clockTopLine,
:root[data-avatar-theme="black"] #clockBottomLine,
:root[data-avatar-theme="black"] #settingsZoneText,
:root[data-avatar-theme="black"] #settingsModeCount,
:root[data-avatar-theme="black"] #settingsHelpVisible {
    color: #000;
    mix-blend-mode: difference;
    filter: invert(1);
}