/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  color-scheme: dark;

  --space: 1em;
  --space-double: 2em;
  --oklch-blue:   50% 0.1 250;
  --oklch-green:  50% 0.1 147;
  --oklch-yellow: 50% 0.1 90;

  /* typography */
  --type-base: calc(1em + 0.1vw);
}

p, button, input, h1, h2, h3, ol, ul, li {
  margin: 0;
  padding: 0;
  font-size: inherit;
}
:not(details summary) { list-style: none }

html,
body {
  -webkit-text-size-adjust: none;
  font-family: var(--font-family);
  line-height: 1.4;
  overflow: initial;
  text-size-adjust: none;
}

html {
  scroll-behavior: smooth;
}

body {
  max-width: 70ch;
  margin-inline: auto;
  font-family: system-ui;
  font-size: var(--type-base);
  padding: 1rem;
}
.txt-center { text-align: center }
.txt-small { font-size: 0.8rem }
.txt-large { font-size: 1.5rem }
.translucent { opacity: 0.7 }

.fill-yellow { background-color: oklch(var(--oklch-yellow) / .3) }
.txt-yellow { color: oklch(var(--oklch-yellow)) }

.flex { display:flex }
.gap { gap: 1ch }
.align-items-baseline { align-items: baseline }

.pad { padding: var(--space) }
.margin { margin: var(--space) }
.margin-block { margin-block: var(--space) }
.margin-inline { margin-inline: var(--space) }
.margin-top { margin-top: var(--space) }
.margin-top-double { margin-top: var(--space-double) }

dialog::backdrop {
  backdrop-filter: blur(5px);
}

.icon {
  vertical-align:b ottom;
  display: inline-block;
  inline-size: 1.125em;
  block-size: 1.125em;
}

.progress {
  vertical-align:bottom;
  display:inline-block;
  inline-size:1.125em;
  block-size:1.125em;

  circle {
    fill: transparent;
    stroke: oklch(var(--oklch-green));
  }
}
.progress circle.pie {
  opacity:0.5
}
.progress svg {
  border-radius:50%;
  transform:rotate(-90deg)
}

svg:not([class]) {
  width: 0.75em;
  width: 1cap;
  height: 0.75em;
  height: 1cap;
}

.dragged { 
  opacity: .5;
}