/* Import Tailwind base styles */
@tailwind base;
/* Import Tailwind components */
@tailwind components;
/* Import Tailwind utilities */
@tailwind utilities;

/* Custom Tailwind components (if any) */
/* @layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
} */
.button {
  background: var(--spot-color, white);
  color: var(--color-dark);
  padding: var(--button-padding, 0.7em 1.2em);
  border-radius: var(--button-radius, 2em);
  border: 2px solid var(--color-dark, var(--color-dark-sand));
  display: inline-flex;
  align-items: center;
  gap: var(--button-gap, 0.5em);
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
  font-size: large;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}

/* Hover state: dim opacity by 15% */
.button:hover {
  opacity: 0.85;
}

/* Button variants */
.button[data-button-variant="blue"] {
  --spot-color: var(--color-blue-light);
}

.button[data-button-variant="light-blue"] {
  --spot-color: var(--color-blue-light);
}

.button[data-button-variant="pink"] {
  --spot-color: var(--color-yass-queen);
}

.button[data-button-variant="light-pink"] {
  --spot-color: var(--color-sister-sister);
}

.button[data-button-variant="yellow"] {
  --spot-color: var(--color-crown-yellow);
}
.card {
  background-color: var(--color-light);
  color: var(--color-dark);
  padding: var(--space-m-l);
  border-radius: var(--border-radius);
  border: 5px solid var(--color-dark);
  max-width: unset;
}

.card ::selection {
  color: var(--color-dark-sand);
  background: var(--color-secondary);
}
.changelog-release {
  border-block-start: 2px solid var(--color-dark);
  padding-block-start: var(--space-m);
}

.changelog-release__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  flex-wrap: wrap;
}

.changelog-release__version {
  margin-block-start: 0;
}

.changelog-release__date {
  color: var(--color-dark);
  opacity: 0.6;
  font-size: var(--size-step-0);
}

.changelog-release__list {
  margin-block-start: var(--space-s);
  padding-inline-start: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.changelog-changeset {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.changelog-changeset__badge {
  display: inline-block;
  font-size: var(--size-step-min-1, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05ch;
  padding: 0.15em 0.5em;
  border-radius: var(--border-radius);
  border: 2px solid currentColor;
  flex-shrink: 0;
}

.changelog-changeset[data-type="release"] .changelog-changeset__badge {
  color: var(--color-dark);
  opacity: 0.5;
}

.changelog-changeset[data-type="feature"] .changelog-changeset__badge {
  color: var(--color-blue-light, #5b8dee);
}

.changelog-changeset[data-type="improvement"] .changelog-changeset__badge {
  color: var(--color-crown-yellow, #f5c842);
}

.changelog-changeset[data-type="fix"] .changelog-changeset__badge {
  color: var(--color-yass-queen, #e8579a);
}
input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--form-background);

  margin: 0;

  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);

  /* Change from grid to inline-block */
  display: inline-block;
  vertical-align: middle; /* Align the checkbox vertically with the text */
  position: relative; /* This allows proper positioning of the checkmark */
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0); /* Centers the checkmark */
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--color-dark);
  background-color: var(--color-dark);
}

input[type="checkbox"]:checked::before {
  transform: translate(-50%, -50%) scale(1); /* Scales up the checkmark on check */
}

input[type="checkbox"]:focus {
  outline: max(2px, 0.15em) solid currentColor;
  outline-offset: max(2px, 0.15em);
}

input[type="checkbox"]:disabled {
  --form-control-color: var(--form-control-disabled);
  color: var(--form-control-disabled);
  cursor: not-allowed;
}

.done {
  text-decoration: line-through;
}
.curve {
  display: block;
  height: 3.5em;
  width: 100%;
  fill: var(--spot-color, var(--color-yass-queen));
}
.features {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 33%, 20rem);
  --gutter: var(--space-l-xl);
  --flow-space: var(--space-s);

  text-align: center;
}

.features svg {
  display: block;
  margin-inline: auto;
  height: 4em;
}

.features a {
  text-decoration: none;
}

.features a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.08ex;
  text-underline-offset: 0.2ex;
}
/* Generic Form Styles */
.custom-form-class {
  max-width: 650px;
}

/* Style for form labels */
.form-label {
  display: block;
  margin-bottom: 0.5rem;
}

/* Style for form input fields */
.form-control {
  width: 100%;
  padding: 10px;
  color: var(--color-dark-sand);
  margin-bottom: var(--space-l);
  transition: border-color 0.3s ease;
}

.actions {
  margin-top: var(--space-s);
}

.form-control:focus {
  outline: none;
}

/* Item list row — single line, no wrap */
.item-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 0.5rem);
  flex-wrap: nowrap;
}

/* Turbo frame wrapper inside .item-row — transparent to flex layout so children participate directly */
.item-frame {
  display: contents;
}

.item-frame > label {
  flex: 1;
  min-width: 0;
}

/* Inline item edit form */
.item-edit-form {
  display: flex;
  align-items: center;
  gap: var(--space-2xs, 0.3rem);
  flex: 1;
  flex-wrap: nowrap;
  max-width: none;
}

/* Invisible input — text must not shift at all when entering edit mode */
.item-title-input {
  background: transparent;
  border: none;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  padding: 0;
  margin-bottom: 0;
  min-width: 10ch;
  flex: 1;
}

.item-title-input:focus {
  outline: none;
}

/* Small icon-only action button — used for inline item actions */
.icon-button {
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15em;
  cursor: pointer;
  transition: opacity var(--transition-base, 250ms ease);
  line-height: 1;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--color-dark);
}

.icon-button .icon {
  width: 0.7em;
  height: 0.7em;
}

.icon-button:hover {
  opacity: 0.6;
}
.prose {
  --flow-space: var(--space-l-xl);
  --wrapper-max-width: 55rem;
}

.prose :is(h2, h3, h4) + * {
  --flow-space: var(--space-s-m);
}

.prose blockquote {
  border-inline-start: 10px solid var(--color-yass-queen);
  padding: var(--space-m-l);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--size-step-2);
}

.prose blockquote > * + * {
  margin-top: var(--space-m-l);
}

.prose blockquote :last-child {
  font-family: var(--font-base);
  font-style: normal;
  font-size: var(--size-step-1);
}
.section > .curve {
  transform: translateY(-1px);
}

.section > .curve:first-child {
  transform: rotate(180deg) translateY(-1px);
}

.section__inner {
  background: var(--spot-color, var(--color-light));
  color: var(--color-dark);
}

.section blockquote {
  font-weight: 700;
  line-height: 1;
  font-size: var(--size-step-4);
  letter-spacing: var(--tracking-s);
}

.section :is(h1, h2, h3, blockquote) {
  opacity: 95%;
}
.signoff h2 {
  font-weight: 400;
  font-size: var(--size-step-1);
  max-width: 30ch;
  letter-spacing: var(--tracking);
}

.signoff p {
  font-size: var(--size-step-6);
  font-weight: 700;
  letter-spacing: var(--tracking-s);
  line-height: 1;
  color: var(--color-primary);
}
.site-foot {
  font-size: medium;
  padding: var(--space-s-m);
  background-color: var(--color-light);
  color: var(--color-dark);
}

.site-foot__inner {
  display: flex;
  gap: var(--space-s-m);
  align-items: center;
}

.site-foot svg {
  width: 3em;
  height: 3em;
}
.site-head {
  padding: 0.6rem 0;

  color: var(--color-dark);
  line-height: 1.1;
}

.site-head :focus {
  outline-color: var(--color-light);
}

.site-head__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0 1rem;
}

.site-head__brand {
  display: block;
  width: 3rem;
}

.navigation ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.8rem;
  padding: 0;
}

.navigation li {
  margin: 0.1rem;
}

.navigation a {
  font-size: medium;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  color: currentColor;
}

.navigation a:hover {
  opacity: 0.85;
}

.burger-menu__trigger {
  display: none;
}

.burger-menu__bar,
.burger-menu__bar::before,
.burger-menu__bar::after {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--color-dark);
  border: 1px solid var(--color-dark);
  position: absolute;
  border-radius: 3px;
  left: 50%;
  margin-left: -12px;
  transition: transform 150ms ease-in-out;
}

.burger-menu__bar {
  top: 50%;
  transform: translateY(-50%);
}

.burger-menu__bar::before,
.burger-menu__bar::after {
  content: "";
}

.burger-menu__bar::before {
  top: -8px;
}

.burger-menu__bar::after {
  bottom: -8px;
}

.burger-menu[enabled="true"] .burger-menu__trigger {
  display: block;
  width: 2rem;
  height: 2rem; /* Nice big tap target */
  position: relative;
  z-index: 2;
  background: transparent;
  border: none;
  cursor: pointer;
}

.burger-menu[enabled="true"] .burger-menu__panel {
  position: fixed; /* Fix the panel to the viewport */
  top: 0;
  left: 0;
  padding: 5rem 1.5rem 2rem 1.5rem;
  width: 100%;
  height: 100vh; /* Ensure it covers the entire viewport */
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  background: var(--color-light);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.burger-menu[enabled="true"] .navigation ul {
  display: block;
}

.burger-menu[enabled="true"] .navigation ul > * + * {
  margin-top: 2rem;
}

.burger-menu[enabled="true"] .navigation li {
  font-size: 1.5rem;
}

.burger-menu[enabled="true"][status="open"] .burger-menu__panel {
  visibility: visible;
  opacity: 1;
  transition: opacity 400ms ease;
}

.burger-menu[enabled="true"][status="closed"] .burger-menu__panel > * {
  opacity: 0;
  transform: translateY(5rem);
}

.burger-menu[enabled="true"][status="open"] .burger-menu__panel > * {
  transform: translateY(0);
  opacity: 1;
  transition: transform 250ms cubic-bezier(0.17, 0.67, 0, 0.87) 350ms,
    opacity 250ms ease 400ms;
}

.burger-menu[enabled="true"][status="open"] .burger-menu__bar::before {
  top: 0;
  transform: rotate(45deg);
}

.burger-menu[enabled="true"][status="open"] .burger-menu__bar::after {
  top: 0;
  transform: rotate(-45deg);
}

.burger-menu[enabled="true"][status="open"] .burger-menu__bar {
  background: transparent;
  border-color: transparent;
  transform: rotate(180deg);
}
.spread {
  display: flex;
  justify-content: space-between;
  padding: var(--space-m-l);
}

.spread > .right {
  text-align: right;
}
.box {
  padding: var(--space-s-m);
}
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s-m, 1rem);
  justify-content: flex-start;
  align-items: center;
}
/* AUTO GRID
Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with
configurable grid item sizes

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--grid-min-item-size (14rem): How large each item should be
ideally, as a minimum.

--grid-placement (auto-fill): Set either auto-fit or auto-fill
to change how empty grid tracks are handled */
.grid {
  display: grid;
  grid-template-columns: repeat(
    var(--grid-placement, auto-fill),
    minmax(var(--grid-min-item-size, 16rem), 1fr)
  );
  gap: var(--gutter, var(--space-s-l));
}

.grid[data-rows='masonry'] {
  grid-template-rows: masonry;
  align-items: start;
}

.grid[data-layout='50-50'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 50vw, 26rem);
}
.icon {
  width: 0.75em;
  width: 2cap;
  height: 0.75em;
  height: 2cap;
}

.with-icon {
  display: inline-flex;
  align-items: center;
}

.with-icon .icon {
  margin-inline-end: 0.5rem;
}
.imposter {
  position: fixed;
  z-index: 3;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  transform: none;
}

.imposter.contain {
  --margin: 10px;
  overflow: auto;
  max-inline-size: calc(100% - (var(--margin) * 2));
  max-block-size: calc(100% - (var(--margin) * 2));
}
/* 
SIDEBAR
More info: https://every-layout.dev/layouts/sidebar/
A layout that allows you to have a flexible main content area
and a "fixed" width sidebar that sits on the left or right.
If there is not enough viewport space to fit both the sidebar
width *and* the main content minimum width, they will stack
on top of each other

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between the sidebar and main content.

--sidebar-target-width (20rem): How large the sidebar should be

--sidebar-content-min-width(50%): The minimum size of the main content area

EXCEPTIONS
.sidebar[data-direction='rtl']: flips the sidebar to be on the right 
*/
.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
}

.sidebar > :first-child {
  flex-basis: var(--sidebar-target-width, 30rem);
  flex-grow: 1;
}

.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

/* 
A flipped version where the sidebar is on the right
*/
.sidebar[data-direction="rtl"] {
  flex-direction: row-reverse;
}
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-block: 0;
}

.stack > * + * {
  margin-block-start: var(--space-s-m, 1.5rem);
}
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((10rem - 100%) * 999);
}

.switcher > :nth-last-child(n + 5),
.switcher > :nth-last-child(n + 5) ~ * {
  flex-basis: 100%;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('<%= asset_path("fonts/inter-v8-latin-regular.woff2") %>') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('<%= asset_path("fonts/inter-v8-latin-500.woff2") %>') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('<%= asset_path("fonts/inter-v8-latin-700.woff2") %>') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('<%= asset_path("fonts/inter-v8-latin-900.woff2") %>') format('woff2');
}
/* 
  Global styles 

  Low-specificity, global styles that apply to the whole 
  project: https://cube.fyi/css.html
*/
html {
  height: 100%;
}

body {
  color: var(--color-dark);
  background: var(--color-light);
  font-size: var(--size-step-1);
  font-family: var(--font-base);
  line-height: 1.4;
  letter-spacing: var(--tracking);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

/* Base typesetting */
h1,
h2,
h3 {
  line-height: 1;
  letter-spacing: var(--tracking-s);
}

h1 {
  font-size: var(--size-step-5);
}

h2 {
  font-size: var(--size-step-4);
}

h3 {
  font-size: var(--size-step-3);
}

/* Set line lengths */
p,
li,
blockquote:not([class]) {
  max-width: 50ch;
}

h1,
h2,
h3 {
  max-width: 20ch;
}

/* More generic elements */
blockquote:not([class]) {
  font-family: var(--font-serif);
  font-size: var(--size-step-2);
}

/* Markdown blockquuote:not([class])s aren't ideal, so we're presuming the person quoted is the last p */
blockquote:not([class]) p:last-of-type {
  font-family: var(--font-base);
  font-size: var(--size-step-1);
  font-weight: normal;
}

svg {
  height: 2ex;
  width: auto;
  flex: none;
}

[role="list"] {
  padding: 0;
}

/* Base interactive elements */

a {
  color: currentcolor;
}

a:hover {
  text-decoration: none;
}

:focus {
  outline: 2px solid;
  outline-offset: 0.3ch;
}

:target {
  scroll-margin-top: 2ex;
}

main:focus {
  outline: none;
}

/* Base selection styles that invert whatever colours are rendered */
::selection {
  background: var(--color-dark);
  color: var(--color-light);
}
/* Modern reset: https://piccalil.li/blog/a-modern-css-reset/ */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Prevent zooming when orientation changes on some iOS devices */
html {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
/* Global variables */
:root {
  --gutter: var(--space-s-m);
  --border-radius: var(--size-step-1);
  --transition-base: 250ms ease;
  --transition-movement: 200ms linear;
  --transition-fade: 200ms ease;
  --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
  --tracking: -0.05ch;
  --tracking-s: -0.075ch;
}
/* 
FLOW UTILITY
Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/quick-tip/flow-utility/ 
*/
.flow > * + * {
  margin-top: var(--flow-space, 1em);
}
/**
 * REGION 
 * Add consistent vertical padding to create regions of content 
 * Can either be configured by setting --region-space or use a default from the space scale
 */
.region {
  padding-top: var(--region-space, var(--space-l-2xl));
  padding-bottom: var(--region-space, var(--space-l-2xl));
}
/**
 * WRAPPER
 * Sets a max width, adds a consistent gutter and horizontally
 * centers the contents
 * Info: https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
 */
.wrapper {
  max-width: var(--wrapper-max-width, 85rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */