.sidebar-layout {
  display: grid;
  grid-template-areas: "header header" "sidebar main";
  grid-template-columns: var(--sidebar-width, 0) 1fr;
  grid-template-rows: auto 1fr;
  block-size: 100dvh;

  @media (width >= 48rem) {
    --sidebar-border-width: var(--border);
    --sidebar-padding: var(--size-2);
    --sidebar-width: var(--max-i-3xs);
  }
}

.header-layout {
  display: grid;
  grid-template-areas: "header" "main";
  grid-template-rows: auto 1fr;
  block-size: 100dvh;
}

.centered-layout {
  display: grid;
  place-items: center;
  block-size: 100dvh;
}

.container {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: var(--container-width, 64rem);
}

#header {
  align-items: center;
  background-color: rgb(from var(--color-border-light) r g b / .5);
  border-block-end-width: var(--border);
  block-size: var(--size-12);
  column-gap: var(--size-4);
  display: flex;
  grid-area: header;
  padding-inline: var(--size-2);
}

#sidebar {
  background-color: rgb(from var(--color-border-light) r g b / .5);
  border-inline-end-width: var(--sidebar-border-width, 0);
  display: flex;
  flex-direction: column;
  grid-area: sidebar;
  overflow-x: hidden;
  padding: var(--sidebar-padding, 0);
  row-gap: var(--size-2);
}

#main {
  display: flex;
  flex-direction: column;
  grid-area: main;
  overflow: auto;
  padding: 0 var(--size-4) var(--size-2) var(--size-4);
  min-height: 100%;
  justify-content: space-between;
}

#main > .container {
  flex: 1 0 auto;
}

footer {
  margin-top: auto;
  width: 100%;
  border-top: 1px solid var(--color-border-light);
}

/* Auth Layout */
.auth-content {
  max-width: 24rem;
  width: 100%;
  margin-bottom: auto;
  margin-top: 1rem;
}

/* Policy & Marketing Layout Header */
.policy-header-content {
  padding: 1rem 1.25rem;
}

.policy-nav {
  margin-left: auto;
}

/* Header Navigation */
.header-nav-main {
  margin-left: auto;
}

.header-popover {
  --popover-size: 12rem;
}

/* Letter Show */
.letter-actions {
  margin-left: auto;
}

.letter-iframe {
  width: 8.5in;
  max-width: 100%;
  height: 11in;
  border: 1px solid #ddd;
  margin: 0 auto;
  display: block;
  overflow: hidden;
}



/* Forms */
.form-error {
  color: red;
}

.form-validation-list {
  list-style: disc;
}

/* Design System */
.design-demo-border {
  border-width: 1px;
}

.design-demo-field {
  background: #f0f0f0;
  padding: 1rem;
  text-align: center;
}

.design-demo-full-width {
  background: #e0e0e0;
  padding: 1rem;
  text-align: center;
}

.design-demo-card {
  border: 2px dashed #ccc;
}

/* Email Mailer Styles */
.email-container {
  font-family: monospace;
}

.email-container * {
  font-family: monospace;
}

.email-notification {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid #eee;
}