/* Workspace values come from /static/tokens.css and frontend/ui/tokens.py. */
* {
    box-sizing: border-box;
}

body {
    background: var(--dw-color-background);
    color: var(--dw-color-foreground);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

a {
    color: inherit;
}

.page {
    margin: 0 auto;
    max-width: var(--dw-width-page);
    padding: var(--dw-space-10) var(--dw-space-6);
}

.topbar {
    align-items: center;
    display: flex;
    gap: var(--dw-space-4);
    justify-content: space-between;
    margin-bottom: var(--dw-space-10);
}

.brand {
    font-size: var(--dw-text-base);
    font-weight: var(--dw-weight-semibold);
}

.brand small {
    color: var(--dw-color-muted);
    display: block;
    font-weight: var(--dw-weight-regular);
}

h1 {
    font-size: var(--dw-text-xl);
    margin: 0 0 var(--dw-space-2);
}

h2 {
    font-size: var(--dw-text-base);
    margin: var(--dw-space-10) 0 var(--dw-space-3);
}

.lede {
    color: var(--dw-color-muted);
    margin: 0 0 var(--dw-space-6);
}

.grid {
    display: grid;
    gap: var(--dw-space-3);
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.card {
    background: var(--dw-color-subtle-background);
    border: 1px solid var(--dw-color-border);
    border-radius: var(--dw-radius-md);
    display: block;
    padding: var(--dw-space-4);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.card:hover,
.card:focus-visible {
    background: var(--dw-color-muted-background);
    border-color: var(--dw-color-muted);
}

.card strong {
    display: block;
}

.card span {
    color: var(--dw-color-muted);
    font-size: var(--dw-text-md);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dw-space-2);
}

.chip {
    background: var(--dw-color-muted-background);
    border-radius: var(--dw-radius-sm);
    font-size: var(--dw-text-md);
    padding: var(--dw-space-2) var(--dw-space-3);
    text-decoration: none;
}

.button {
    background: var(--dw-color-primary);
    border: 1px solid var(--dw-color-primary);
    border-radius: var(--dw-radius-sm);
    color: var(--dw-color-primary-foreground);
    cursor: pointer;
    font: inherit;
    padding: var(--dw-space-2) var(--dw-space-4);
}

.button.ghost {
    background: transparent;
    border-color: var(--dw-color-border);
    color: var(--dw-color-foreground);
}

.muted {
    color: var(--dw-color-muted);
    font-size: var(--dw-text-md);
}

.notice {
    color: var(--dw-color-warning);
    font-size: var(--dw-text-md);
}

.error {
    color: var(--dw-color-danger);
    font-size: var(--dw-text-md);
    min-height: 1.25rem;
}

table {
    border-collapse: collapse;
    font-size: var(--dw-text-md);
    width: 100%;
}

td {
    border-bottom: 1px solid var(--dw-color-border);
    padding: var(--dw-space-2) 0;
}

td:last-child {
    color: var(--dw-color-muted);
    text-align: right;
}

/* Login */
.signin {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: var(--dw-space-6);
}

.signin form {
    display: grid;
    gap: var(--dw-space-3);
    max-width: 26rem;
    width: 100%;
}

.signin h1 {
    margin-bottom: var(--dw-space-6);
}

label {
    display: grid;
    font-size: var(--dw-text-md);
    gap: var(--dw-space-2);
}

input {
    background: var(--dw-color-background);
    border: 1px solid var(--dw-color-border);
    border-radius: var(--dw-radius-sm);
    color: inherit;
    font: inherit;
    padding: var(--dw-space-3);
}

input:focus-visible {
    border-color: var(--dw-color-foreground-strong);
    outline: none;
}

.brand { display: flex; align-items: center; gap: var(--dw-space-3); text-decoration: none; }
.brand img { width: 92px; height: 42px; object-fit: contain; }
#dashboards { margin-top: var(--dw-space-3); }
.daily-pet { display: flex; align-items: center; flex-wrap: wrap; gap: var(--dw-space-3); }
.daily-pet img { width: 88px; height: 88px; object-fit: contain; }
.daily-pet strong { flex: 1; }
th { text-align: left; padding: var(--dw-space-2) 0; }
th:last-child { text-align: right; }
.button, .chip { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.button:disabled { opacity: 0.6; cursor: default; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--dw-color-foreground); outline-offset: 2px; }
@media (max-width: 640px) {
    .page { padding: var(--dw-space-6) var(--dw-space-4); }
    .topbar { flex-wrap: wrap; gap: var(--dw-space-3); }
    .grid { grid-template-columns: minmax(0, 1fr); }
    input { font-size: var(--dw-text-base); width: 100%; min-width: 0; }
    td, th { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }