/* The Weekly Dollop canonical chrome atoms.
   Tokens live in app.css. Semantic components arrange these atoms but do not redraw them. */

/* Consequential action */
.dollop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-gutter);
    border: var(--stroke-thin) solid var(--maroon);
    border-radius: var(--radius-s);
    color: var(--text-on-brand);
    background: var(--maroon);
    font-family: var(--font-body);
    font-size: var(--type-small-size);
    letter-spacing: var(--tracking-fine);
    text-decoration: none;
    transition: background-color var(--motion-base) var(--ease-standard),
                transform var(--motion-fast) var(--ease-standard);
}

.dollop-btn:hover {
    border-color: var(--text-primary);
    color: var(--text-on-brand);
    background: var(--text-primary);
}

.dollop-btn:active { transform: translateY(var(--offset-press)); }

.dollop-btn--secondary {
    border: var(--stroke-strong) solid var(--maroon);
    color: var(--maroon);
    background: transparent;
    font-weight: var(--weight-semibold);
}

.dollop-btn--secondary:hover {
    border-color: var(--maroon);
    color: var(--maroon);
    background: var(--pastel-butter);
}

.dollop-btn:disabled {
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
}

/* The one card surface */
.d-card {
    padding: var(--space-4);
    border: var(--stroke-thin) solid var(--border-subtle);
    border-radius: var(--radius-m);
    background: var(--surface-page);
    box-shadow: var(--shadow-s);
}

.d-card--interactive {
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color var(--motion-base) var(--ease-standard),
                border-color var(--motion-base) var(--ease-standard);
}

.d-card--interactive:hover {
    border-color: var(--maroon);
    background: var(--surface-hover);
}

/* The one full-width feature surface: flat, ruled and shadowless. */
.d-band {
    padding: var(--rhythm-block);
    border-top: var(--stroke-strong) solid var(--maroon);
    border-bottom: var(--stroke-thin) solid var(--border-subtle);
    background: var(--surface-muted);
}

@media (max-width: 560px) {
    .d-band {
        padding: var(--space-4);
    }
}

/* Optional reading or a low-risk inline utility action. */
.d-action-link {
    display: inline-flex;
    min-height: var(--tap-min);
    align-items: center;
    gap: var(--rhythm-paired);
    color: var(--link-color);
    font-family: var(--font-label);
    font-size: var(--type-small-size);
    font-weight: var(--weight-bold);
    text-decoration-line: underline;
    text-decoration-thickness: var(--stroke-thin);
    text-underline-offset: var(--space-1);
}

button.d-action-link {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.d-action-link::after {
    content: "→";
    flex: none;
    text-decoration: none;
}

.d-action-link:hover {
    color: var(--link-color-hover);
    text-decoration-thickness: var(--stroke-medium);
}

.d-action-link:disabled {
    color: var(--text-muted);
    cursor: wait;
    text-decoration: none;
}

/* Visible label plus canonical text-entry control. */
.d-field {
    display: grid;
    gap: var(--space-1);
    color: var(--text-muted);
    font-family: var(--font-label);
    font-size: var(--type-small-size);
    font-weight: var(--weight-bold);
}

.d-input {
    min-height: var(--tap-min);
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: var(--stroke-thin) solid var(--border-strong);
    border-radius: var(--radius-s);
    color: var(--text-primary);
    background: var(--surface-page);
    font-family: var(--font-body);
    font-size: var(--type-body-size);
}

.d-input[aria-invalid="true"] { border-color: var(--state-error); }

.d-input:focus-visible {
    outline: var(--focus-width) solid var(--focus-ring-color);
    outline-offset: var(--stroke-thin);
}

/* Selectable answer or filter; passive metadata uses .d-badge instead. */
.d-choice {
    display: inline-flex;
    min-height: var(--tap-min);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border: var(--stroke-thin) solid var(--border-strong);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    background: transparent;
    font-family: var(--font-label);
    font-size: var(--type-small-size);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-standard),
                border-color var(--motion-fast) var(--ease-standard);
}

.d-choice:hover { background: var(--surface-hover); }

.d-choice[aria-pressed="true"] {
    border-color: var(--maroon);
    color: var(--text-primary);
    background: var(--pastel-blue);
    font-weight: var(--weight-bold);
}

.d-choice:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
}

/* Compact view switcher: flat controls on one shared baseline. */
.d-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    border-bottom: var(--stroke-thin) solid var(--border-subtle);
}

.d-tab {
    display: inline-flex;
    min-height: var(--tap-min);
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-bottom: var(--stroke-strong) solid transparent;
    color: var(--text-muted);
    background: transparent;
    font-family: var(--font-label);
    font-size: var(--type-small-size);
    font-weight: var(--weight-bold);
    cursor: pointer;
}

.d-tab:hover {
    color: var(--maroon);
    background: var(--surface-hover);
}

.d-tab[aria-pressed="true"] {
    border-bottom-color: var(--maroon);
    color: var(--maroon);
}

/* Compact metadata */
.d-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    background: var(--pastel-butter);
    font-family: var(--font-label);
    font-size: var(--type-small-size);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-compact);
}

.d-fill-blue { background: var(--pastel-blue); }
.d-fill-pink { background: var(--pastel-pink); }
.d-fill-butter { background: var(--pastel-butter); }
.d-fill-sage { background: var(--pastel-sage); }

/* Portrait, award or occasional editorial mark */
.d-medallion {
    display: flex;
    width: var(--medallion-size);
    height: var(--medallion-size);
    flex: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: var(--stroke-thin) solid var(--border-subtle);
    border-radius: 50%;
    font-size: var(--type-h1-size);
    object-fit: cover;
}

.d-medallion img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* One prominent verified value plus an optional short label */
.d-stat {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    line-height: var(--leading-display);
}

.d-stat__num {
    color: var(--pop);
    font-family: var(--font-display);
    font-size: var(--type-title-size);
    font-weight: var(--weight-heavy);
}

.d-stat__label {
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-family: var(--font-label);
    font-size: var(--type-small-size);
}