@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

    /* Wasserwacht palette. Existing utility names remain stable across the application while
       their visual meaning follows the brand instead of Tailwind's SaaS-oriented defaults. */
    --color-cyan-50: #eef8fc;
    --color-cyan-100: #d8f0fa;
    --color-cyan-200: #b3e1f3;
    --color-cyan-300: #78c8e8;
    --color-cyan-400: #35acda;
    --color-cyan-500: #008ccd;
    --color-cyan-600: #0076ae;
    --color-cyan-700: #006493;
    --color-cyan-800: #004e74;
    --color-cyan-900: #003d61;
    --color-cyan-950: #002d55;

    --color-slate-50: #f8f7f4;
    --color-slate-100: #efeeea;
    --color-slate-200: #e0ddd6;
    --color-slate-300: #c8c3ba;
    --color-slate-400: #99928a;
    --color-slate-500: #756e67;
    --color-slate-600: #625c56;
    --color-slate-700: #554f4a;
    --color-slate-800: #443f3b;
    --color-slate-900: #35312e;
    --color-slate-950: #002d55;

    --color-rose-50: #fff2f2;
    --color-rose-100: #ffe0e0;
    --color-rose-200: #f7b8ba;
    --color-rose-300: #ef8588;
    --color-rose-400: #e94a4e;
    --color-rose-500: #e60005;
    --color-rose-600: #c80004;
    --color-rose-700: #a90003;
    --color-rose-800: #870003;
    --color-rose-900: #690002;
    --color-rose-950: #4b0002;

    --color-warm-surface: #f5f0e6;

    --radius-md: .25rem;
    --radius-lg: .375rem;
    --radius-xl: .5rem;
    --radius-2xl: .625rem;
    --radius-3xl: .75rem;
}

.help-document { color: #554f4a; line-height: 1.7; }
.help-document h1 { margin-bottom: 1.5rem; color: #002d55; font-size: 2rem; font-weight: 800; line-height: 1.2; }
.help-document h2 { margin-top: 2rem; margin-bottom: .75rem; border-bottom: 1px solid #e0ddd6; padding-bottom: .45rem; color: #008ccd; font-size: 1.35rem; font-weight: 800; }
.help-document h3 { margin-top: 1.5rem; margin-bottom: .5rem; color: #002d55; font-size: 1.05rem; font-weight: 800; }
.help-document p, .help-document ul, .help-document ol, .help-document table, .help-document pre { margin-bottom: 1rem; }
.help-document ul { list-style: disc; padding-left: 1.5rem; }
.help-document ol { list-style: decimal; padding-left: 1.5rem; }
.help-document a { color: #0077ad; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.help-document code { border-radius: 3px; background: #efeeea; padding: .1rem .3rem; font-size: .88em; }
.help-document pre { overflow-x: auto; border: 1px solid #e0ddd6; background: #efeeea; padding: 1rem; }
.help-document pre code { padding: 0; }
.help-document table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.help-document th, .help-document td { border: 1px solid #e0ddd6; padding: .55rem .7rem; text-align: left; vertical-align: top; }
.help-document th { background: #efeeea; color: #002d55; }

.accordion-progress-complete { box-shadow: inset 0 5px 8px -6px #15803d; }
.accordion-progress-started { box-shadow: inset 0 5px 8px -6px #d97706; }
.accordion-progress-paused { box-shadow: inset 0 5px 8px -5px #e60005; }
.progress-counter-alert { animation: progress-counter-flicker 1.4s ease-in-out infinite; }
@keyframes progress-counter-flicker { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .progress-counter-alert { animation: none; } }

@media print {
    .help-page .help-no-print, .help-floating-button { display: none !important; }
    .help-page, .help-page .help-layout, .help-page .panel { background: white !important; box-shadow: none !important; }
    .help-layout { display: block !important; }
    .help-document a { color: inherit; }
}

@layer base {
    [x-cloak] { display: none !important; }
    html { @apply bg-slate-100 antialiased; }
    body { @apply min-w-80 text-slate-700; font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; }
    button, [role="button"], summary { -webkit-tap-highlight-color: transparent; }
    button:not(:disabled), [role="button"]:not(:disabled), summary { @apply cursor-pointer; }
    ::selection { @apply bg-cyan-200 text-cyan-950; }
}

@layer components {
    .nav-link { @apply relative flex items-center gap-3 rounded-md px-3 py-2 text-sm font-semibold text-slate-300 transition duration-150 hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400; }
    .nav-link-active { @apply bg-white/10 text-white; }
    .nav-link-active::before { content: ''; @apply absolute -left-3 h-6 w-1 rounded-r-full bg-cyan-400; }
    .nav-dashboard { @apply flex items-center gap-3 rounded-md border border-white/15 bg-cyan-700 px-3 py-2.5 text-white transition hover:bg-cyan-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white; }
    .nav-dashboard-active { @apply border-white/35 bg-cyan-950; }
    .nav-dashboard-icon { @apply flex h-8 w-8 shrink-0 items-center justify-center rounded-sm bg-white/15; }
    .eyebrow { @apply text-[10px] font-bold uppercase tracking-[.2em] text-cyan-700; }
    .page-title { @apply text-3xl font-extrabold tracking-[-.015em] text-cyan-950 sm:text-4xl; }
    .page-subtitle { @apply mt-2 max-w-2xl text-sm leading-6 text-slate-600; }
    .section-title { @apply text-xl font-bold tracking-tight text-cyan-950; }
    .panel { @apply overflow-hidden rounded-lg border border-slate-200 bg-white; }
    .panel-header { @apply flex items-center justify-between gap-4 border-b border-slate-200 px-5 py-4; }
    .metric { @apply flex min-h-28 flex-col justify-between rounded-lg border border-slate-200 bg-white p-5; }
    .metric-dark { @apply border-cyan-950 bg-cyan-950 text-white; }
    .metric-label { @apply text-xs font-bold uppercase tracking-[.14em] text-slate-500; }
    .metric-dark .metric-label { @apply text-slate-300; }
    .metric strong { @apply mt-3 text-4xl font-black tracking-tight text-slate-950; }
    .metric-dark strong { @apply text-white; }
    .metric-foot { @apply mt-2 text-xs text-slate-500; }
    .event-row { @apply flex items-center gap-4 px-5 py-4 transition hover:bg-slate-50; }
    .date-tile { @apply flex h-12 w-12 shrink-0 flex-col items-center justify-center rounded-xl bg-cyan-50 text-cyan-950; }
    .date-tile strong { @apply text-lg leading-none; }
    .date-tile span { @apply mt-1 text-[10px] font-bold uppercase tracking-wide; }
    .badge { @apply inline-flex items-center rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-bold text-slate-700; }
    .badge-green { @apply bg-emerald-100 text-emerald-800; }
    .task-status-open { @apply border-cyan-200 bg-cyan-50 text-cyan-900; }
    .task-status-in_progress { @apply border-amber-300 bg-amber-50 text-amber-900; }
    .task-status-completed { @apply border-emerald-300 bg-emerald-50 text-emerald-800; }
    .task-status-cancelled { @apply border-slate-300 bg-slate-100 text-slate-500; }
    .task-surface-open { @apply border-l-cyan-500; }
    .task-surface-in_progress { @apply border-l-amber-500; }
    .task-surface-completed { @apply border-l-emerald-500; }
    .task-surface-cancelled { @apply border-l-slate-400 bg-slate-50/70; }
    .status-dot { @apply inline-flex items-center gap-1.5 text-xs font-bold; }
    .status-dot::before { content: ''; @apply h-2 w-2 rounded-full bg-slate-400; }
    .status-running::before { @apply bg-emerald-500; }
    .status-incomplete::before { @apply bg-amber-500; }
    .status-closed::before { @apply bg-slate-500; }
    .text-link { @apply text-sm font-bold text-cyan-800 transition hover:text-cyan-950; }
    .button-primary { @apply inline-flex min-h-9 items-center justify-center gap-2 rounded-md border border-cyan-700 bg-cyan-700 px-3.5 py-2 text-sm font-bold text-white transition hover:border-cyan-950 hover:bg-cyan-950 active:bg-cyan-950 focus:outline-none focus:ring-2 focus:ring-cyan-950 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50; }
    .button-secondary { @apply inline-flex min-h-9 items-center justify-center gap-2 rounded-md border border-slate-300 bg-white px-3.5 py-2 text-sm font-bold text-slate-700 transition hover:border-cyan-950 hover:bg-slate-100 hover:text-cyan-950 active:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-cyan-950 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50; }
    .button-danger { @apply inline-flex min-h-9 items-center justify-center rounded-md border border-rose-500 bg-white px-3 py-2 text-sm font-bold text-rose-700 transition hover:bg-rose-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2; }
    .icon-button { @apply inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-slate-500 transition hover:bg-slate-100 hover:text-cyan-950 focus:outline-none focus:ring-2 focus:ring-cyan-950; }
    .field-label { @apply block text-sm font-bold text-slate-800; }
    .field { @apply block min-h-10 w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm font-normal text-slate-700 outline-none transition placeholder:text-slate-400 hover:border-slate-500 focus:border-cyan-950 focus:ring-2 focus:ring-cyan-100 disabled:cursor-not-allowed disabled:bg-slate-100; }
    .field.task-status-open { @apply border-cyan-300 bg-cyan-50 text-cyan-900; }
    .field.task-status-in_progress { @apply border-amber-300 bg-amber-50 text-amber-900; }
    .field.task-status-completed { @apply border-emerald-300 bg-emerald-50 text-emerald-800; }
    .field.task-status-cancelled { @apply border-slate-300 bg-slate-100 text-slate-500; }
    .field-error { @apply mt-1.5 text-xs font-semibold text-rose-700; }
    /* Tooltip of a step in the phase timeline. Shown on hover and on keyboard focus. */
    .step-tooltip { @apply pointer-events-none absolute left-1/2 top-full z-30 mt-2 w-64 max-w-[85vw] -translate-x-1/2 rounded-lg bg-slate-900 px-3 py-2 text-xs leading-5 text-white opacity-0 shadow-xl transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100; }
    .collapsible { @apply rounded-xl border border-slate-200 p-4; }
    .collapsible-summary { @apply flex cursor-pointer list-none items-center justify-between gap-3 text-sm font-bold text-slate-800 marker:content-none; }
    .collapsible-summary::-webkit-details-marker { display: none; }
    .collapsible-marker { @apply shrink-0 text-slate-400 transition; }
    .collapsible[open] .collapsible-marker { @apply rotate-180; }
    .data-table { @apply w-full text-left text-sm; }
    .data-table th { @apply bg-slate-50 px-5 py-3 text-[10px] font-bold uppercase tracking-[.14em] text-slate-500; }
    .data-table td { @apply border-t border-slate-200 px-5 py-4 align-middle; }
    .detail-label { @apply text-[10px] font-bold uppercase tracking-[.14em] text-slate-500; }
    .detail-value { @apply mt-1 text-sm font-semibold text-slate-900; }
    .empty-state { @apply p-8 text-center text-sm text-slate-500; }
    .markdown-content { @apply max-w-none leading-7 text-slate-700; }
    .markdown-content > :first-child { @apply mt-0; }
    .markdown-content > :last-child { @apply mb-0; }
    .markdown-content h1 { @apply mb-4 mt-7 text-3xl font-extrabold tracking-tight text-cyan-950; }
    .markdown-content h2 { @apply mb-3 mt-7 text-2xl font-bold tracking-tight text-cyan-950; }
    .markdown-content h3 { @apply mb-2 mt-6 text-xl font-bold text-cyan-950; }
    .markdown-content h4, .markdown-content h5, .markdown-content h6 { @apply mb-2 mt-5 font-bold text-cyan-950; }
    .markdown-content p { @apply my-3; }
    .markdown-content ul { @apply my-3 list-disc space-y-1 pl-6; }
    .markdown-content ol { @apply my-3 list-decimal space-y-1 pl-6; }
    .markdown-content blockquote { @apply my-4 border-l-4 border-cyan-500 bg-cyan-50 px-4 py-2 italic text-slate-600; }
    .markdown-content a { @apply font-semibold text-cyan-800 underline decoration-cyan-300 underline-offset-2 hover:text-cyan-950; }
    .markdown-content code { @apply rounded-sm bg-slate-100 px-1.5 py-0.5 font-mono text-[.9em] text-slate-800; }
    .markdown-content pre { @apply my-4 overflow-x-auto border border-slate-200 bg-slate-100 p-4; }
    .markdown-content pre code { @apply bg-transparent p-0; }
    .markdown-content hr { @apply my-6 border-slate-300; }
    .markdown-content table { @apply my-4 w-full border-collapse text-sm; }
    .markdown-content th { @apply border border-slate-300 bg-slate-100 px-3 py-2 text-left font-bold text-cyan-950; }
    .markdown-content td { @apply border border-slate-300 px-3 py-2 align-top; }
    .markdown-content img { @apply my-4 h-auto max-w-full border border-slate-200; }
    .save-indicator { @apply inline-flex items-center gap-2 text-xs font-bold text-slate-500; }
    .save-dot { @apply h-2 w-2 rounded-full bg-slate-400; }
    .save-saving .save-dot { @apply animate-pulse bg-cyan-500; }
    .save-saved .save-dot { @apply bg-emerald-500; }
    .save-error .save-dot { @apply bg-red-500; }
    .watch-grid { @apply grid gap-6 xl:grid-cols-2; }
    .calendar-nav { @apply cursor-pointer select-none rounded-lg px-2.5 py-1 text-xl leading-none text-slate-500 transition hover:bg-slate-100 hover:text-slate-950; }
    .calendar-month { @apply grid grid-cols-7 border-l border-t border-slate-200; }
    .calendar-weekday { @apply select-none border-b border-r border-slate-200 bg-slate-50 px-3 py-2 text-center text-[10px] font-bold uppercase tracking-[.14em] text-slate-500; }
    .calendar-cell { @apply min-h-32 select-none border-b border-r border-slate-200 bg-white p-2; }
    .calendar-cell-muted { @apply bg-slate-50/70 text-slate-400; }
    .calendar-event { @apply mb-1 flex items-center gap-1 rounded-md bg-slate-100 px-1.5 py-1 text-[11px] font-semibold text-slate-700 transition hover:bg-cyan-100 hover:text-cyan-900; }
    .calendar-event-watch { @apply border-l-2 border-cyan-600 bg-cyan-50 text-cyan-950; }
    .calendar-event-time { @apply shrink-0 text-[10px] font-black text-slate-500; }
    .calendar-week { @apply grid grid-cols-[5.5rem_repeat(7,minmax(0,1fr))] border-l border-t border-slate-200; }
    .calendar-week-time { @apply min-h-24 border-b border-r border-slate-200 bg-slate-50 p-2 text-[10px] font-bold uppercase tracking-wide text-slate-500; }
    .calendar-week-column { @apply min-h-24 border-b border-r border-slate-200 bg-white p-2; }
    .calendar-week-event { @apply mb-2 block rounded-lg border border-slate-200 bg-slate-50 p-2 text-xs transition hover:border-cyan-400 hover:bg-cyan-50; }
    .calendar-week-event strong { @apply block text-[10px] text-cyan-800; }
    .calendar-week-event span { @apply mt-1 block font-bold text-slate-900; }
    .calendar-week-event small { @apply mt-1 block truncate text-[10px] text-slate-500; }
    .segmented-tabs { @apply inline-grid grid-flow-col auto-cols-fr rounded-xl border border-slate-200 bg-slate-100 p-1; }
    .segmented-tab { @apply flex min-h-9 select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg px-3 py-2 text-sm font-bold text-slate-600 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500; }
    .segmented-tab:hover { @apply text-slate-950; }
    .segmented-tab-active { @apply bg-white text-cyan-800 ring-1 ring-slate-300; }
    .segmented-count { @apply rounded-full bg-slate-200 px-1.5 py-0.5 text-[10px] tabular-nums text-slate-600; }
    .segmented-tab-active .segmented-count { @apply bg-cyan-100 text-cyan-800; }
    .toolbar { @apply flex flex-wrap items-center justify-between gap-3 rounded-lg border border-slate-200 bg-white p-3; }
    .drawer-enter-active, .drawer-leave-active { transition: opacity .2s ease; }
    .drawer-enter-active section, .drawer-leave-active section { transition: transform .25s cubic-bezier(.22,1,.36,1); }
    .drawer-enter-from, .drawer-leave-to { opacity: 0; }
    .drawer-enter-from section, .drawer-leave-to section { transform: translateX(100%); }
    .modal-enter-active, .modal-leave-active { transition: opacity .18s ease; }
    .modal-enter-active section, .modal-leave-active section { transition: transform .2s cubic-bezier(.22,1,.36,1), opacity .18s ease; }
    .modal-enter-from, .modal-leave-to { opacity: 0; }
    .modal-enter-from section, .modal-leave-to section { transform: scale(.97); opacity: 0; }
    .route-progress { @apply pointer-events-none fixed inset-x-0 top-0 z-[200] h-0.5 origin-left scale-x-0 bg-cyan-500 opacity-0; transition: transform 8s cubic-bezier(.1,.5,.2,1), opacity .2s; }
    .route-progress-loading { @apply scale-x-[.82] opacity-100; }
    .route-progress-done { @apply scale-x-100 opacity-0; transition: transform .15s ease, opacity .3s .1s; }
}
@keyframes achievement-fall { from { transform: translateY(-4rem) rotate(0); opacity: 1; } to { transform: translateY(24rem) rotate(540deg); opacity: 0; } }
.achievement-confetti { position: absolute; top: -1rem; width: .55rem; height: 1rem; background: #008ccd; animation: achievement-fall 2.6s ease-out both; }
.achievement-confetti:nth-child(3n) { background: #e60005; }
.achievement-confetti:nth-child(4n) { background: #e0b400; }
@media (prefers-reduced-motion: reduce) { .achievement-confetti { animation: none; opacity: .35; top: calc((var(--i) % 5) * 20%); } }

.subnav-slide-enter-active,
.subnav-slide-leave-active { transition: transform 220ms ease, opacity 180ms ease; }
.subnav-slide-enter-from,
.subnav-slide-leave-to { transform: translateX(-100%); opacity: 0; }
.nav-backdrop-enter-active,
.nav-backdrop-leave-active { transition: opacity 180ms ease; }
.nav-backdrop-enter-from,
.nav-backdrop-leave-to { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .subnav-slide-enter-active, .subnav-slide-leave-active, .nav-backdrop-enter-active, .nav-backdrop-leave-active { transition: none; }
}

/* Per-user appearance. Existing utilities keep working because their shared color tokens are
   remapped at the document root instead of maintaining a parallel component theme. */
html[data-theme="red-light"] { --color-cyan-50:#fff2f2;--color-cyan-100:#ffe0e0;--color-cyan-200:#f7b8ba;--color-cyan-300:#ef8588;--color-cyan-400:#e94a4e;--color-cyan-500:#e60005;--color-cyan-600:#c80004;--color-cyan-700:#a90003;--color-cyan-800:#870003;--color-cyan-900:#690002;--color-cyan-950:#4b0002; }
html[data-theme="monochrome"] { --color-cyan-50:#f5f5f5;--color-cyan-100:#e5e5e5;--color-cyan-200:#d4d4d4;--color-cyan-300:#a3a3a3;--color-cyan-400:#737373;--color-cyan-500:#525252;--color-cyan-600:#404040;--color-cyan-700:#262626;--color-cyan-800:#171717;--color-cyan-900:#0a0a0a;--color-cyan-950:#000; }
html[data-theme="accessible"] { --color-cyan-50:#fff;--color-cyan-100:#dff3ff;--color-cyan-200:#a8dcff;--color-cyan-300:#55b9fa;--color-cyan-400:#008bd2;--color-cyan-500:#006ca8;--color-cyan-600:#00527f;--color-cyan-700:#003f62;--color-cyan-800:#002f4b;--color-cyan-900:#001f33;--color-cyan-950:#001522;--color-slate-500:#3d3d3d;--color-slate-600:#292929;--color-slate-700:#171717; }
html[data-theme="marine-dark"],html[data-theme="red-dark"] { color-scheme:dark;--color-slate-50:#15202a;--color-slate-100:#111a22;--color-slate-200:#33414c;--color-slate-300:#50606c;--color-slate-400:#8d9ba5;--color-slate-500:#aeb9c0;--color-slate-600:#c5cdd2;--color-slate-700:#dbe1e5;--color-slate-800:#edf0f2;--color-slate-900:#f7f8f9; }
html[data-theme="red-dark"] { --color-cyan-50:#2a1517;--color-cyan-100:#42191c;--color-cyan-200:#6b1b20;--color-cyan-300:#a72429;--color-cyan-400:#d33b40;--color-cyan-500:#ef5559;--color-cyan-600:#f4777a;--color-cyan-700:#f79a9c;--color-cyan-800:#fac0c1;--color-cyan-900:#fde1e2;--color-cyan-950:#fff2f2; }
html[data-theme="marine-dark"] main .panel,html[data-theme="marine-dark"] main .bg-white,html[data-theme="red-dark"] main .panel,html[data-theme="red-dark"] main .bg-white { background-color:#1c2730!important; }
html[data-font-size="large"] { font-size:112.5%; } html[data-font-size="extra-large"] { font-size:125%; }
html[data-density="compact"] .panel-header,html[data-density="compact"] .event-row,html[data-density="compact"] .data-table td { padding-top:.55rem;padding-bottom:.55rem; }
html[data-reduced-motion="true"] *,html[data-reduced-motion="true"] *::before,html[data-reduced-motion="true"] *::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important; }
html[data-strong-focus="true"] :focus-visible,html[data-theme="accessible"] :focus-visible { outline:3px solid #e60005!important;outline-offset:3px!important;box-shadow:0 0 0 2px #fff!important; }
html[data-background]:not([data-background="none"]) .dashboard-surface { background-attachment:fixed; }
html[data-background="maritime-stripes"] .dashboard-surface { background-image:repeating-linear-gradient(135deg,rgba(0,45,85,.075) 0 12px,rgba(0,140,205,.08) 12px 24px,rgba(255,255,255,.2) 24px 36px,rgba(230,0,5,.055) 36px 42px,rgba(255,255,255,.2) 42px 54px); }
html[data-background="waves"] .dashboard-surface { background-image:repeating-radial-gradient(ellipse at 0 100%,transparent 0 18px,rgba(0,140,205,.09) 19px 21px,transparent 22px 38px); }
html[data-background="ripples"] .dashboard-surface { background-image:repeating-radial-gradient(circle at 75% 20%,transparent 0 28px,rgba(0,140,205,.08) 29px 31px); }
html[data-background="waterline"] .dashboard-surface { background-image:linear-gradient(170deg,transparent 0 58%,rgba(0,140,205,.08) 58.2% 59%,transparent 59.2%); }
html[data-background="buoys"] .dashboard-surface { background-image:radial-gradient(circle,rgba(230,0,5,.11) 0 4px,transparent 5px);background-size:90px 90px; }
html[data-background="grid"] .dashboard-surface { background-image:linear-gradient(rgba(0,45,85,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,45,85,.055) 1px,transparent 1px);background-size:32px 32px; }
html[data-background="sand"] .dashboard-surface { background-color:#f5f0e6;background-image:radial-gradient(rgba(85,79,74,.09) .7px,transparent .8px);background-size:8px 8px; }
html[data-background="lake"] .dashboard-surface { background-image:linear-gradient(180deg,rgba(0,140,205,.13),transparent 55%); }
html[data-background="crosses"] .dashboard-surface { background-image:linear-gradient(90deg,transparent 44%,rgba(230,0,5,.055) 45% 55%,transparent 56%),linear-gradient(transparent 44%,rgba(230,0,5,.055) 45% 55%,transparent 56%);background-size:90px 90px; }
html[data-background="contours"] .dashboard-surface { background-image:repeating-radial-gradient(ellipse at 30% 30%,transparent 0 35px,rgba(0,45,85,.055) 36px 37px); }
html[data-background="signal"] .dashboard-surface { background-image:linear-gradient(135deg,rgba(0,140,205,.07) 25%,transparent 25% 50%,rgba(230,0,5,.045) 50% 75%,transparent 75%);background-size:100px 100px; }