@tailwind base;
@tailwind components;
@tailwind utilities;

/* Herf base styles. Tokens live in config/tailwind.config.js; rules from DESIGN.md. */
@layer base {
  :root {
    --tab-bar-height: 4rem;
    --fab-height: 3.25rem;
    /* Space the owner content needs at the bottom so the last card and its Edit button clear the tab bar AND the
       floating action (plus gaps and the phone's safe area). Also the scroll-padding, so a focused control is never
       hidden behind them (WCAG 2.4.11). Removed from lg up, where the bar is a sidebar. */
    --bottom-clear: calc(var(--tab-bar-height) + var(--fab-height) + 2rem + env(safe-area-inset-bottom));
  }

  html {
    background-color: theme('colors.canvas');
    color: theme('colors.ink');
    scroll-padding-bottom: var(--bottom-clear);
  }

  @media (min-width: 1024px) {
    html { scroll-padding-bottom: 0; }
  }

  .owner-main {
    padding-bottom: var(--bottom-clear);
  }

  @media (min-width: 1024px) {
    .owner-main { padding-bottom: 2.5rem; }
  }

  /* Landscape phones and on-screen keyboards: the floating action stops floating and sits in the page flow. */
  @media (max-height: 500px) {
    .owner-main { padding-bottom: calc(var(--tab-bar-height) + 1rem); }
    .fab { position: static !important; padding-top: 0.75rem; padding-bottom: 0.25rem; }
  }

  dialog.sheet::backdrop {
    background-color: theme('colors.scrim');
  }

  body {
    @apply font-sans text-base;
  }

  /* Display serif: lining numerals so "12" and "7:00" read clearly (Georgia defaults to old-style). */
  .font-serif {
    font-variant-numeric: lining-nums;
  }

  /* Focus is always an outline (survives forced colors), never a box-shadow. */
  :focus-visible {
    outline: 3px solid theme('colors.focus');
    outline-offset: 2px;
  }

  .paper :focus-visible,
  .paper:focus-visible {
    outline-color: theme('colors.paper-focus');
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@layer components {
  /* The landing walkthrough: Back/Next only make sense once JavaScript has hidden the other steps. */
  .js-only { display: none; }
  [role='tabpanel'][hidden], [data-virtual-fields-target='panel'][hidden], [data-billing-period-target='period'][hidden] { display: none; } /* beats the flex layout class on the panels */
  .js-walkthrough .js-only { display: flex; }

  /* Long-form legal text (Terms of Service, Privacy Policy). */
  .legal h1 { @apply font-serif text-display font-bold text-ink; }
  .legal h2 { @apply mt-10 font-serif text-headline font-bold text-ink; }
  .legal h3 { @apply mt-6 font-serif text-title font-bold text-ink; }
  .legal p, .legal li { @apply text-base text-ink; }
  .legal p { @apply mt-3 max-w-prose; }
  .legal ul { @apply mt-3 list-disc space-y-2 pl-6; }
  .legal .meta { @apply mt-2 text-muted; }

  /* Light "paper" panel for long forms and data tables (DESIGN.md: paper-panel). */
  .paper {
    @apply rounded-lg border border-paper-line bg-paper-surface text-paper-ink;
    /* The page is dark (color-scheme: dark in the layout), so the browser draws native controls dark; on a light panel
       they must be drawn light or an unchecked checkbox looks filled in. */
    color-scheme: light;
  }

  .paper .text-muted-paper {
    color: theme('colors.paper-muted');
  }

  /* One primary (accent) button per screen. */
  .btn-primary {
    @apply inline-flex min-h-touch items-center justify-center rounded-md bg-accent px-5 py-2 text-base font-semibold text-accent-ink hover:brightness-110;
  }

  .btn-secondary {
    @apply inline-flex min-h-touch items-center justify-center rounded-md border border-line-input bg-transparent px-5 py-2 text-base font-semibold text-brand hover:bg-raised;
  }

  .paper .btn-secondary {
    @apply border-paper-line text-paper-accent-text hover:bg-paper-stripe;
  }

  .field {
    @apply min-h-touch w-full rounded-md border border-line-input bg-surface px-3 py-2 text-base text-ink placeholder:text-muted;
  }

  /* One control height everywhere: text, date and number inputs and dropdowns are all 52px. Native dropdowns ignore
     min-height in some browsers (Safari), so they get appearance:none, a fixed height and their own chevron. */
  input.field:not([type='file']):not([type='checkbox']):not([type='radio']):not([type='color']),
  select.field {
    height: theme('spacing.touch');
  }

  select.field {
    @apply appearance-none bg-no-repeat pr-10;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23E0C8C2' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-size: 1.25rem;
  }

  .paper select.field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236A4650' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
  }

  .paper .field {
    @apply border-paper-line bg-paper-surface text-paper-ink placeholder:text-paper-muted;
  }

  .field-label {
    @apply mb-1 block text-label font-semibold;
  }

  /* In-text links are always underlined (color alone is under 3:1 against body text). */
  .link {
    @apply text-brand underline underline-offset-2 hover:text-ink;
  }

  .paper .link {
    @apply text-paper-accent-text hover:text-paper-ink;
  }
}
/*
 * 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.
 *


 */

 #hero-cover-image {
   opacity: 0.4;
 }