@layer grid {

  /* ── Page shell ──────────────────────────────────────────── */

  /* Fix height chain so .grid-scroll-container creates real overflow */
  .app-main:has(.grid-page) {
    block-size: calc(100dvh - var(--header-height) - var(--bottom-nav-height));
    padding: 0;
    overflow: hidden;
  }

  @media (min-width: 768px) {
    .app-main:has(.grid-page) {
      block-size: 100dvh;
    }
  }

  .grid-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  /* ── Refill alert banner ─────────────────────────────────── */

  .refill-banner {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
    border-bottom: 2px solid var(--color-warning);
    position: sticky;
    left: 0;
    inline-size: 100dvw;
    z-index: 9;
  }

  .refill-banner__icon {
    color: var(--color-warning);
    flex-shrink: 0;
    margin-block-start: 0.15em;
  }

  .refill-banner__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .refill-banner__title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text);
  }

  .refill-banner__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    font-size: var(--font-size-sm);
    color: var(--color-text);
  }

  .refill-banner__link {
    font-weight: 600;
    color: var(--color-text);
  }

  .refill-banner__link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: 2px;
  }

  @media print {
    .refill-banner {
      border: 2px solid black;
      background: none;
    }
  }

  /* ── Month navigation header ─────────────────────────────── */

  .grid-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    position: sticky;
    left: 0;
    inline-size: 100dvw;
    z-index: 10;
  }

  .grid-month-title {
    flex: 1;
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: 700;
    margin: 0;
  }

  .grid-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    touch-action: manipulation;
    flex-shrink: 0;
  }

  .grid-nav-btn:hover {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  }

  .grid-nav-btn:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  /* ── Scroll wrapper ──────────────────────────────────────── */

  .grid-scroll-container {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Table ───────────────────────────────────────────────── */

  .grid-table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
  }

  /* Column sizing */
  .grid-th--label,
  .grid-th--med {
    width: 9rem;
    min-width: 9rem;
    max-width: 9rem;
  }

  @media (min-width: 480px) {
    .grid-th--label,
    .grid-th--med {
      width: 10rem;
      min-width: 10rem;
      max-width: 14rem;
    }
  }

  .grid-th--day,
  .grid-td {
    width: 3rem;
    min-width: 3rem;
  }

  /* ── Sticky positioning ──────────────────────────────────── */

  /* Entire thead sticks as a unit — avoids border-collapse gap bug where
     the collapsed th/td border scrolls with tbody instead of the header. */
  .grid-table thead {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--color-surface);
    box-shadow: 0 3px 0 var(--color-border);
  }

  /* Corner cell: also sticky on the left axis within the sticky thead */
  .grid-th--label {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--color-surface);
    border-bottom: none;
    box-shadow: 0 2px 0 0 var(--color-border);
  }

  .grid-th--day {
    background: var(--color-surface);
    border-bottom: none;
    box-shadow: 0 2px 0 0 var(--color-border);
  }

  .grid-th--med,
  .grid-th--slot {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--color-surface);
  }

  /* Shadow on sticky label column to show scroll */
  .grid-th--med::after,
  .grid-th--slot::after,
  .grid-th--label::after {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-end: -0.75rem;
    width: 0.75rem;
    background: linear-gradient(to right, rgba(0,0,0,0.06), transparent);
    pointer-events: none;
  }

  /* ── Organizer label row ─────────────────────────────────── */

  .grid-organizer-row .grid-th--organizer {
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0.05em;
    height: 2.25rem;
    padding-block: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    box-shadow: inset 2px 0 0 var(--color-border), inset -2px 0 0 var(--color-border);
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  }

  /* Organizer-row corner: sticky on left axis within the sticky thead */
  .grid-organizer-row .grid-td {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--color-surface);
  }

  /* ── Week boundary gap and column borders ────────────────── */

  /* Gap between organizer blocks */
  .grid-th--org-start,
  .grid-td--org-start {
    border-inline-start: 2rem solid var(--color-surface);
  }

  .grid-th--organizer + .grid-th--organizer {
    border-inline-start: 2rem solid var(--color-surface);
  }

  /* Left border on first column of each week */
  .grid-th--week-start,
  .grid-td--week-start {
    box-shadow: inset 2px 0 0 var(--color-border);
  }

  /* Right border on last column of each week */
  .grid-th--org-end,
  .grid-td--org-end {
    box-shadow: inset -2px 0 0 var(--color-border);
  }

  /* Day header cells need the bottom box-shadow combined with any side borders */
  .grid-th--day.grid-th--week-start {
    box-shadow: inset 2px 0 0 var(--color-border), 0 2px 0 0 var(--color-border);
  }

  .grid-th--day.grid-th--org-end {
    box-shadow: inset -2px 0 0 var(--color-border), 0 2px 0 0 var(--color-border);
  }

  /* ── Header cells ────────────────────────────────────────── */

  .grid-th {
    padding: var(--space-2) var(--space-1);
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-muted);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
  }

  .grid-th--label {
    text-align: left;
    padding-inline: var(--space-3);
    color: var(--color-muted);
    font-size: var(--font-size-sm);
  }

  .grid-th--today {
    color: var(--color-primary);
  }

  .grid-day-num {
    display: block;
    font-size: var(--font-size-sm);
    line-height: 1.2;
  }

  .grid-day-name {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.8;
  }

  /* ── Slot header rows ────────────────────────────────────── */

  .grid-slot-row .grid-th--slot {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    border-top: 2px solid var(--color-border);
    border-bottom: none;
    text-align: left;
  }

  .grid-td--slot-fill {
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    border-top: 2px solid var(--color-border);
    padding: 0;
  }

  /* ── Med label cells ─────────────────────────────────────── */

  .grid-th--med {
    padding: var(--space-2) var(--space-3);
    padding-inline-end: 2.5rem;
    text-align: left;
    font-weight: 400;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .grid-med-link {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    text-decoration: none;
    color: inherit;
  }

  .grid-med-link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-sm);
  }

  .grid-med-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.2;
    /* Truncate long names */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 8rem;
  }

  @media (min-width: 480px) {
    .grid-med-name {
      max-width: 9rem;
    }
  }

  .grid-med-strength {
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--color-muted) 75%, black);
    line-height: 1.2;
  }

  /* ── Not-in-organizer row ────────────────────────────────── */

  .grid-row--separate .grid-th--med {
    border-inline-start: 3px solid color-mix(in srgb, var(--color-muted) 35%, transparent);
  }

  .grid-med-separate-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-muted);
    letter-spacing: 0.02em;
    line-height: 1.2;
    font-style: italic;
  }

  /* ── Med info button ────────────────────────────────────── */

  .grid-med-info-btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    touch-action: manipulation;
    transition: color var(--transition), background-color var(--transition);
  }

  .grid-med-info-btn:hover {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  }

  .grid-med-info-btn:focus-visible {
    outline: var(--focus-ring);
    outline-offset: calc(-1 * var(--focus-offset));
  }

  /* ── Med info modal ──────────────────────────────────────── */

  .med-info-modal {
    border: none;
    border-radius: var(--radius-lg);
    padding: 0;
    background: var(--color-card);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 100%;
    max-height: 80dvh;
    margin: auto;
    overflow: hidden;
  }

  .med-info-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  @media (min-width: 480px) {
    .med-info-modal {
      border-radius: var(--radius-lg);
      max-width: 34rem;
      max-height: 85dvh;
      margin: auto;
    }
  }

  .med-info-modal[open] {
    animation: med-info-in 200ms ease-out forwards;
  }

  @keyframes med-info-in {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .med-info-modal[open] {
      animation: none;
    }
  }

  .med-info-modal__inner {
    display: flex;
    flex-direction: column;
    max-height: 80dvh;
    overflow: hidden;
  }

  @media (min-width: 480px) {
    .med-info-modal__inner {
      max-height: 85dvh;
    }
  }

  .med-info-modal__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    padding-block-end: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
  }

  .med-info-modal__titles {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    min-width: 0;
  }

  .med-info-modal__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    line-height: var(--line-height-heading);
  }

  .med-info-modal__subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    margin: 0;
  }

  .med-info-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    cursor: pointer;
    touch-action: manipulation;
    flex-shrink: 0;
    margin-block-start: -0.5em;
    margin-inline-end: -0.5em;
  }

  .med-info-modal__close:hover {
    background: color-mix(in srgb, var(--color-border) 60%, transparent);
    color: var(--color-text);
  }

  .med-info-modal__close:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  .med-info-modal__close svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .med-info-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
  }

  .med-info-modal__status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .med-info-modal__loading,
  .med-info-modal__no-images {
    color: var(--color-muted);
    text-align: center;
    padding: var(--space-8) 0;
    margin: 0;
    font-size: var(--font-size-base);
  }

  .med-info-modal__images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .med-info-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }

  .med-info-img__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    width: 100%;
  }

  .med-info-img__photo {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: #fff;
    padding: var(--space-2);
  }

  .med-info-img__caption {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    text-align: center;
    line-height: 1.3;
  }

  .med-info-modal__footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
    background: var(--color-surface);
  }

  .med-info-modal__attribution {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    text-align: center;
    margin: 0;
  }

  /* ── Day data cells ──────────────────────────────────────── */

  .grid-td {
    padding: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
    vertical-align: middle;
  }

  .grid-td--today {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  }

  .grid-td--missed {
    background: color-mix(in srgb, var(--color-warning) 8%, transparent);
  }

  /* ── Cell buttons ────────────────────────────────────────── */

  .grid-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-border);
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
    margin: 0 auto;
  }

  .grid-cell:hover {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  }

  .grid-cell:active {
    transform: scale(0.9);
  }

  .grid-cell:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  /* Taken state — filled with checkmark */
  .grid-cell--taken {
    background: var(--color-primary);
    border-color: var(--color-primary);
  }

  .grid-cell--taken:hover {
    background: color-mix(in srgb, var(--color-primary) 85%, black);
    border-color: color-mix(in srgb, var(--color-primary) 85%, black);
  }

  /* Checkmark via CSS */
  .grid-cell--taken::after {
    content: '';
    display: block;
    width: 0.65rem;
    height: 0.4rem;
    border-left: 2.5px solid white;
    border-bottom: 2.5px solid white;
    transform: rotate(-45deg) translateY(-1px);
    flex-shrink: 0;
  }

  /* Pending state — disabled with diagonal shimmer */
  .grid-cell--pending {
    pointer-events: none;
    position: relative;
    overflow: hidden;
  }

  .grid-cell--pending::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      -45deg,
      transparent 30%,
      rgba(255, 255, 255, 0.45) 50%,
      transparent 70%
    );
    background-size: 300% 300%;
    animation: cell-pending 0.9s ease-in-out infinite;
  }

  /* Shimmer on empty (un-taking) cell uses primary tint instead of white */
  .grid-cell--pending:not(.grid-cell--taken)::before {
    background: linear-gradient(
      -45deg,
      transparent 30%,
      color-mix(in srgb, var(--color-primary) 35%, transparent) 50%,
      transparent 70%
    );
    background-size: 300% 300%;
  }

  @keyframes cell-pending {
    0%   { background-position: 120% 120%; }
    100% { background-position: -20% -20%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .grid-cell--pending::before {
      animation: none;
      opacity: 0.5;
    }
  }

  /* Unscheduled — hatched pattern */
  .grid-cell--empty {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto;
    border-radius: var(--radius-sm);
    background: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 3px,
      color-mix(in srgb, var(--color-border) 60%, transparent) 3px,
      color-mix(in srgb, var(--color-border) 60%, transparent) 4px
    );
  }

  /* ── Empty state ─────────────────────────────────────────── */

  .grid-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-12) var(--space-6);
    text-align: center;
    color: var(--color-muted);
  }

  .grid-empty__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
  }

  .grid-empty p {
    margin: 0;
    max-width: 30ch;
  }

  /* ── Footer: "Today" scroll shortcut ────────────────────── */

  .grid-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-surface);
  }

  /* ── Print ───────────────────────────────────────────────── */

  @media print {
    .grid-header .grid-nav-btn,
    .grid-footer,
    .grid-med-info-btn,
    .med-info-modal {
      display: none;
    }

    .grid-scroll-container {
      overflow: visible;
    }

    .grid-table {
      width: 100%;
    }

    .grid-cell--taken::after {
      border-left-color: black;
      border-bottom-color: black;
    }

    .grid-th--med::after,
    .grid-th--slot::after,
    .grid-th--label::after {
      display: none;
    }
  }

  /* ── Reduced motion ──────────────────────────────────────── */

  @media (prefers-reduced-motion: reduce) {
    .grid-cell {
      transition: none;
    }

    .grid-cell:active {
      transform: none;
    }
  }

  /* ── Dark mode ───────────────────────────────────────────── */

  @media (prefers-color-scheme: dark) {
    .med-info-img__photo {
      background: var(--color-surface);
    }

    .grid-th--label,
    .grid-th--day,
    .grid-th--med {
      background: var(--color-surface);
    }

    .grid-slot-row .grid-th--slot,
    .grid-td--slot-fill {
      background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
    }

    .grid-th--med::after,
    .grid-th--slot::after,
    .grid-th--label::after {
      background: linear-gradient(to right, rgba(0,0,0,0.3), transparent);
    }
  }

  /* ── High contrast ───────────────────────────────────────── */

  @media (prefers-contrast: more) {
    .grid-cell {
      border-width: 3px;
    }

    .grid-cell--empty {
      background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 3px,
        var(--color-border) 3px,
        var(--color-border) 4px
      );
    }
  }

  /* ── Bottles day view ────────────────────────────────────── */

  .grid-bottles-page {
    max-width: 40rem;
    padding: var(--space-4);
  }

  .grid-bottles-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-4);
  }

  .grid-bottles-date {
    flex: 1;
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: 700;
  }

  .grid-bottles-today-bar {
    margin-block-end: var(--space-4);
    text-align: center;
  }

  .dose-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .dose-group__label {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-block-end: var(--space-2);
  }

  .dose-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0;
    list-style: none;
  }

  .dose-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .dose-item__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15em;
  }

  .dose-item__name {
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--color-text);
    text-decoration: none;
  }

  .dose-item__name:hover {
    text-decoration: underline;
  }

  .dose-item__strength,
  .dose-item__qty {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
  }

  .dose-btn {
    flex-shrink: 0;
    min-inline-size: 5.5rem;
    padding-block: 0.5em;
    padding-inline: 1em;
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    text-align: center;
    min-block-size: var(--tap-min);
  }

  .dose-btn:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  .dose-btn--taken {
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  @media (prefers-contrast: more) {
    .dose-btn {
      border-width: 3px;
    }
  }

}