/* Organic utility classes - Tobiso.Web */

/* Pills */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: 14px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--color-divider);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 120ms ease;
}

.pill:hover {
    background: var(--color-neutral-100);
}

.pill-on {
    background: var(--color-accent-600);
    color: var(--color-on-accent);
    border-color: transparent;
}

.pill-on:hover {
    background: var(--color-accent-700);
}

/* Card hover lift */
.lift {
    transition: background 120ms ease;
}

/* Card and row links must not read as inline text links */
a.lift,
a.soft,
a.sage-tint {
    text-decoration: none;
    color: inherit;
}

.lift:hover {
    background: var(--color-surface) !important;
}

/* Soft card */
.soft {
    background: var(--color-neutral-100);
    border-radius: var(--radius-lg);
}

/* Sage tint */
.sage-tint {
    background: var(--color-accent-2-200);
    color: var(--color-accent-2-900);
}

.sage-tint.lift:hover {
    background: var(--color-accent-2-300) !important;
}

/* Accent (terracotta) tint */
.accent-tint {
    background: var(--color-accent-200);
    color: var(--color-accent-900);
}

.accent-tint.lift:hover {
    background: var(--color-accent-300) !important;
}

/* Post list row */
.post-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.post-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    text-align: left;
    font: inherit;
    padding: var(--space-4);
    background: var(--color-neutral-100);
    border: 0;
    border-radius: var(--radius-lg);
    cursor: pointer;
    color: var(--color-text);
    width: 100%;
}

.post-row-main {
    flex: 1 1 240px;
    min-width: 0;
}

.post-row-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 20px;
}

.post-row-meta {
    display: block;
    font-size: 13px;
    color: var(--color-neutral-600);
    margin-top: 2px;
}

.post-row-side {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.post-row-grades {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.post-row-date {
    font-size: 13px;
    color: var(--color-neutral-600);
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Grade chip */
.grade-chip {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    padding: 4px 10px;
    background: var(--color-accent-200);
    color: var(--color-accent-800);
    border-radius: 999px;
    white-space: nowrap;
}

/* Form field */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

/* Input */
.input {
    font: inherit;
    font-size: 15px;
    background: var(--color-neutral-100);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    color: var(--color-text);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 120ms ease;
}

.input:focus {
    outline: none;
    border-color: var(--color-accent-600);
}

.input::placeholder {
    color: var(--color-neutral-500);
}

/* Skeleton loading */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-neutral-200) 25%,
        var(--color-neutral-100) 50%,
        var(--color-neutral-200) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Article prose */
#article-prose {
    font-size: 17px;
    line-height: 1.75;
    max-width: 68ch;
    color: var(--color-text);
}

#article-prose p {
    margin: 0 0 1.1em;
}

#article-prose h2 {
    font-family: var(--font-heading);
    font-size: 27px;
    margin: 2em 0 0.5em;
    color: var(--color-text);
}

#article-prose h3 {
    font-family: var(--font-heading);
    font-size: 21px;
    margin: 1.6em 0 0.4em;
    color: var(--color-text);
}

#article-prose ul,
#article-prose ol {
    margin: 0 0 1.2em;
    padding-left: 1.4em;
}

#article-prose li {
    margin-bottom: 0.35em;
}

#article-prose strong {
    font-weight: 700;
}

#article-prose a {
    color: var(--color-accent-700);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

#article-prose a:hover {
    color: var(--color-accent-800);
}

/* MarkdownContent wraps every rendered <table> in this, but it was never styled anywhere -
   without it a wide table (e.g. many comparison columns) overflows and forces the whole
   page to scroll horizontally on narrow viewports instead of just the table. */
.table-scroll-wrapper {
    overflow-x: auto;
}

#article-prose table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1.2em;
}

#article-prose th {
    background: var(--color-surface);
    font-weight: 700;
    text-align: left;
    padding: 10px 14px;
    border-bottom: 2px solid var(--color-divider);
}

#article-prose td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--color-divider);
}

/* Lead paragraph: authored in markdown between "..." markers */
#article-prose .post-lead {
    padding: var(--space-6);
    background: var(--color-accent-200);
    color: var(--color-accent-900);
    border-radius: var(--radius-lg);
    font-size: 19px;
    line-height: 1.6;
    font-weight: 500;
    margin: 0 0 1.6em;
}

/* Article figure: washed-treated image + caption/source row (docs/design/PostBody.dc.html) */
/* Images float right with prose wrapping on the left, EXCEPT ones sourced "Zdroj: Tobiso"
   (.post-figure--static), which stay full-width/inline as before. */
.post-figure {
    float: right;
    clear: right;
    margin: 0 0 var(--space-5) var(--space-6);
    max-width: 300px;
}

.post-figure.post-figure--static {
    float: none;
    clear: both;
    margin: var(--space-8) 0;
}

#article-prose h2,
#article-prose h3 {
    clear: right;
}

@media (max-width: 640px) {
    .post-figure {
        float: none;
        clear: both;
        margin: var(--space-8) 0;
        max-width: 100%;
    }
}

.post-figure .washed {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.post-figure img {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    cursor: zoom-in;
    /* Rounded here too, not just on .washed: some mobile browsers don't clip a
       filtered child to a parent's overflow:hidden + border-radius correctly. */
    border-radius: var(--radius-lg);
    filter: saturate(0.85) sepia(0.05);
    transition: filter 150ms ease, opacity 150ms ease;
}

.post-figure img:hover {
    filter: saturate(1) sepia(0);
    opacity: 0.94;
}

.post-figure figcaption {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: 13px;
    color: var(--color-neutral-700);
    margin-top: var(--space-2);
}

/* Truncate long captions/sources inline (the figure is narrow) — up to 3 lines
   is fine, anything longer is clipped with an ellipsis. The full text still
   shows in the lightbox opened by clicking the image. */
.post-figure-caption,
.post-figure-source {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-figure-source {
    opacity: .75;
}

/* Article video embed: *[alt](videos/x.mp4) */
.post-video {
    margin: var(--space-8) 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
}

.post-video video {
    display: block;
    width: 100%;
    max-height: 480px;
    /* Some browsers composite <video> in a hardware layer that a parent's
       overflow:hidden alone doesn't reliably clip - round it directly too. */
    border-radius: inherit;
}

/* Featured post video (PostVideo: YouTube URL set per-post in admin) */
.post-video-embed {
    margin: var(--space-6) 0;
}

.post-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
}

.post-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.post-video-embed-caption {
    margin-top: var(--space-2);
    font-size: 13px;
    color: var(--color-neutral-600);
}

/* Article document download link: _[label](documents/x.docx) */
.post-document-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full, 999px);
    background: var(--color-accent-100);
    color: var(--color-accent-700);
    font-weight: 600;
    text-decoration: none;
    transition: background 120ms ease;
}

.post-document-link:hover {
    background: var(--color-accent-200);
}

/* Image lightbox: click-to-enlarge overlay for article figures */
.img-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: color-mix(in srgb, var(--color-ink) 88%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    padding: var(--space-4);
    animation: lightbox-fadein 160ms ease;
}

@keyframes lightbox-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes lightbox-scalein {
    from { transform: scale(.92); }
    to   { transform: scale(1); }
}

.img-lightbox-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 92vw;
    cursor: default;
    animation: lightbox-scalein 160ms ease;
}

.img-lightbox-frame {
    display: inline-block;
    line-height: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    max-width: 100%;
}

.img-lightbox-wrapper img {
    max-width: 92vw;
    max-height: 82vh;
    object-fit: contain;
    cursor: zoom-out;
    display: block;
}

.img-lightbox-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: 13px;
    line-height: 1.5;
}

.img-lightbox-caption,
.img-lightbox-source {
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: pre-line;
}

.img-lightbox-caption {
    color: var(--color-on-accent);
    opacity: .92;
}

.img-lightbox-source {
    color: var(--color-on-accent);
    opacity: .65;
    font-style: italic;
}

.img-lightbox-caption a,
.img-lightbox-source a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.img-lightbox-close {
    position: fixed;
    top: var(--space-5);
    right: var(--space-6);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-on-accent);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    opacity: .85;
    user-select: none;
    z-index: 1001;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-ink) 30%, transparent);
    transition: opacity 150ms ease;
}

.img-lightbox-close:hover {
    opacity: 1;
}

/* Toolbar button */
.toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: 14px;
    padding: 9px 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms ease;
}

.toolbar-btn:hover {
    background: var(--color-neutral-100);
}

/* Rail nav item */
.rail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--color-text);
    font-size: 15px;
    font: inherit;
    font-size: 15px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 120ms ease;
}

.rail-item:hover {
    background: var(--color-neutral-200);
}

.rail-item.active {
    background: var(--color-accent-200);
    color: var(--color-accent-800);
    font-weight: 700;
}

/* Progress bar */
.progress-bar {
    height: 6px;
    background: var(--color-neutral-300);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--color-accent-600);
    border-radius: 999px;
    transition: width 300ms ease;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-neutral-600);
}

.breadcrumb a {
    color: var(--color-accent-700);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb-sep {
    opacity: 0.45;
}

/* Addendum marker button, emitted inline in article content for (--DOD-x--) markers */
.addendum-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0 2px;
    border-radius: 999px;
    background: var(--color-accent-2-200);
    color: var(--color-accent-600);
    cursor: pointer;
    vertical-align: middle;
    font-size: 13px;
}

.addendum-btn:hover {
    background: var(--color-accent-600);
    color: var(--color-on-accent);
}

/* Person mention, emitted inline in article content for AI-detected person names */
.person-mention {
    white-space: nowrap;
}

.person-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 2px;
    border-radius: 999px;
    background: var(--color-accent-2-200);
    color: var(--color-accent-600);
    cursor: pointer;
    vertical-align: middle;
    font-size: 11px;
    text-decoration: none;
}

.person-link:hover {
    background: var(--color-accent-600);
    color: var(--color-on-accent);
}

/* Callout tip */
.callout-tip {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-accent-200);
    border-radius: var(--radius-lg);
    margin: var(--space-6) 0;
    max-width: 68ch;
}

.callout-tip-icon {
    flex: none;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-600);
    color: var(--color-on-accent);
    border-radius: 999px;
    font-size: 18px;
}

/* Callout sidefact */
.callout-sidefact {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-accent-2-200);
    border-radius: var(--radius-lg);
    margin: var(--space-6) 0;
    max-width: 68ch;
}

.callout-sidefact-icon {
    flex: none;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-2-600);
    color: var(--color-on-accent-2);
    border-radius: 999px;
    font-size: 18px;
}

.callout-sidefact-icon svg {
    display: block;
}

.callout-label {
    font-family: var(--font-heading);
    font-size: 16px;
    margin-bottom: 4px;
}

.callout-tip .callout-label {
    color: var(--color-accent-900);
}

.callout-sidefact .callout-label {
    color: var(--color-accent-2-900);
}

/* Stats row */
.stat-card {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.stat-card-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent-700);
}

.stat-card-value {
    font-family: var(--font-heading);
    font-size: 38px;
    line-height: 1;
}

.stat-card-sub {
    font-size: 14px;
    color: var(--color-neutral-600);
}

/* Lucide icon sizing */
svg.lucide {
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* Segmented control (reading settings) */
.seg-control {
    display: flex;
    gap: 6px;
}

.seg-btn {
    font: inherit;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-divider);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.seg-btn:hover {
    background: var(--color-neutral-200);
}

.seg-btn.active {
    background: var(--color-accent-600);
    color: var(--color-on-accent);
    border-color: transparent;
}

/* Chapter link (ToC) */
.toc-link {
    display: block;
    padding: 7px 12px;
    text-decoration: none;
    font-size: 14px;
    color: var(--color-neutral-600);
    border-left: 2px solid var(--color-divider);
    transition: color 120ms ease, border-color 120ms ease;
}

.toc-link:hover {
    color: var(--color-text);
}

.toc-link.active {
    border-left-color: var(--color-accent-600);
    color: var(--color-text);
    font-weight: 600;
}

/* Exercise chip - click-to-select item (drag-drop, matching, timeline) */
.chip {
    display: inline-flex;
    align-items: center;
    font: inherit;
    font-size: 15px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--color-divider);
    background: var(--color-neutral-100);
    color: var(--color-text);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.chip:hover {
    background: var(--color-neutral-200);
}

.chip-sel {
    background: var(--color-accent-600);
    color: var(--color-on-accent);
    border-color: transparent;
}

.chip-sel:hover {
    background: var(--color-accent-700);
}

/* Exercise bucket - click target for a selected chip */
.bucket {
    min-height: 120px;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-neutral-100);
    border: 2px dashed var(--color-divider);
    display: flex;
    flex-direction: column;
    gap: 8px;
    font: inherit;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: border-color 120ms ease, background 120ms ease;
}

.bucket:hover {
    background: var(--color-neutral-200);
}

.bucket.bucket-target {
    border-color: var(--color-accent-600);
}

/* Placed-item pill inside a bucket / paired row */
.exercise-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 14px;
    background: var(--color-neutral-200);
    color: var(--color-text);
    border: 0;
    font: inherit;
    cursor: pointer;
    align-self: flex-start;
}

.exercise-pill.correct {
    background: var(--color-accent-2-200);
    color: var(--color-accent-2-900);
}

.exercise-pill.incorrect {
    background: var(--color-accent-200);
    color: var(--color-accent-800);
}

/* Exercise actions row (Reset / Check / score) */
.exercise-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.exercise-score {
    font-size: 15px;
    font-weight: 600;
}

/* Exercise evaluation text - inline next to Reset/Check, not a banner */
.exercise-score {
    font-size: 15px;
    font-weight: 600;
}

.exercise-score.correct {
    color: var(--color-accent-2-700);
}

.exercise-score.incorrect {
    color: var(--color-accent-800);
}

.exercise-actions-spacer {
    flex: 1;
}

/* Help tooltip - icon button that reveals instructions on hover/focus */
.help-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    line-height: 1;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--color-divider);
    background: transparent;
    color: var(--color-neutral-600);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.help-btn svg.lucide {
    display: block;
}

.help-btn:hover,
.help-btn:focus-visible {
    background: var(--color-neutral-100);
    color: var(--color-text);
}

:root:not([data-theme="light"]) .help-btn,
[data-theme="dark"] .help-btn {
    color: var(--color-text);
}

.tooltip {
    position: relative;
    display: inline-flex;
}

.tooltip-text {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: 260px;
    max-width: 70vw;
    padding: var(--space-3) var(--space-4);
    background: var(--color-neutral-900);
    color: var(--color-bg);
    font-size: 13px;
    line-height: 1.5;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 120ms ease, transform 120ms ease;
    pointer-events: none;
    z-index: 20;
}

.tooltip:hover .tooltip-text,
.tooltip:focus-within .tooltip-text {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Exercise card shell */
.exercise-shell {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.spin-icon {
    animation: exercise-spin 0.9s linear infinite;
}

@keyframes exercise-spin {
    to { transform: rotate(360deg); }
}

/* Pomodoro floating widget (appended directly to <body> by js/pomodoro.js) */
.pomodoro-widget {
    position: fixed;
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 200px;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.pomodoro-widget.is-break {
    border-color: var(--color-accent-2-400);
}

.pomodoro-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pomodoro-mode {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-neutral-600);
}

.pomodoro-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-neutral-600);
    cursor: pointer;
}

.pomodoro-close:hover { background: var(--color-neutral-200); }

.pomodoro-time {
    font-family: var(--font-heading);
    font-size: 40px;
    text-align: center;
    color: var(--color-text);
}

.pomodoro-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.pomodoro-toggle, .pomodoro-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: var(--color-accent-600);
    color: var(--color-neutral-100);
    cursor: pointer;
    transition: background 120ms ease;
}

.pomodoro-toggle:hover, .pomodoro-reset:hover { background: var(--color-accent-700); }

.pomodoro-reset {
    width: 38px;
    height: 38px;
    background: var(--color-neutral-200);
    color: var(--color-text);
}

.pomodoro-reset:hover { background: var(--color-neutral-300); }

.pomodoro-settings {
    display: flex;
    gap: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-divider);
}

.pomodoro-settings label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-600);
}

.pomodoro-settings input {
    width: 100%;
    font: inherit;
    font-size: 14px;
    padding: 6px 8px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
}

.pomodoro-settings input:focus {
    outline: 2px solid var(--color-accent-400);
    outline-offset: 1px;
}

@media (max-width: 480px) {
    .pomodoro-widget {
        right: var(--space-3);
        bottom: var(--space-3);
        left: var(--space-3);
        width: auto;
    }
}