/* --- SECTION 1: THEME & FONT DEFINITIONS ---------------------------------- */

:root {
  /* Foundational Typeface Tokens */
  --md-ref-typeface-brand: 'Inter';
  --md-ref-typeface-plain: 'Inter';

  /* Toolbar Animation Durations */
  --expansion-duration: 0.125s;
  --overshoot-duration: 0.2s;
  --fade-duration: 0.2s;

  /* Fine-tuning knobs */
    --title-top-offset-mobile: 0.8rem;
    --title-top-offset-desktop: 0.4rem;
    --title-indent-mobile: 0.4rem;
    --title-indent-desktop: 0.6rem;

  /* M3 Vibrant Orchid Light Theme */
  --md-sys-color-primary: #6A46C4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #E9DDFF;
  --md-sys-color-on-primary-container: #22005D;
  --md-sys-color-secondary: #625B71;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E8DEF8;
  --md-sys-color-on-secondary-container: #1E192B;
  --md-sys-color-tertiary: #7D5260;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFD8E4;
  --md-sys-color-on-tertiary-container: #31111D;
  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-confirm: #006E1C;
  --md-sys-color-on-confirm: #FFFFFF;
  --md-sys-color-confirm-container: #9EF49A;
  --md-sys-color-on-confirm-container: #002205;
  --md-sys-color-background: #FFFBFF;
  --md-sys-color-on-background: #1C1B1F;
  --md-sys-color-surface: #FFFBFF;
  --md-sys-color-on-surface: #1C1B1F;
  --md-sys-color-surface-variant: #E7E0EC;
  --md-sys-color-on-surface-variant: #49454F;
  --md-sys-color-outline: #79747E;
  --md-sys-color-outline-variant: #CAC4D0;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F7F2FA;
  --md-sys-color-surface-container: #F3EDF7;
  --md-sys-color-surface-container-high: #EEE8F1;
  --md-sys-color-surface-container-highest: #E8E2EB;
}

html[data-theme="dark"] {
  /* M3 Vibrant Orchid Dark Theme */
  --md-sys-color-primary: #CFBCFF;
  --md-sys-color-on-primary: #3A0693;
  --md-sys-color-primary-container: #5128AA;
  --md-sys-color-on-primary-container: #E9DDFF;
  --md-sys-color-secondary: #CCC2DC;
  --md-sys-color-on-secondary: #332D41;
  --md-sys-color-secondary-container: #4A4458;
  --md-sys-color-on-secondary-container: #E8DEF8;
  --md-sys-color-tertiary: #EFB8C8;
  --md-sys-color-on-tertiary: #492532;
  --md-sys-color-tertiary-container: #633B48;
  --md-sys-color-on-tertiary-container: #FFD8E4;
  --md-sys-color-error: #FFB4AB;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000A;
  --md-sys-color-on-error-container: #FFDAD6;
  --md-sys-color-confirm: #83D781;
  --md-sys-color-on-confirm: #00390A;
  --md-sys-color-confirm-container: #005313;
  --md-sys-color-on-confirm-container: #9EF49A;
  --md-sys-color-background: #141218;
  --md-sys-color-on-background: #E6E1E5;
  --md-sys-color-surface: #141218;
  --md-sys-color-on-surface: #E6E1E5;
  --md-sys-color-surface-variant: #49454F;
  --md-sys-color-on-surface-variant: #CAC4D0;
  --md-sys-color-outline: #938F99;
  --md-sys-color-outline-variant: #49454F;
  --md-sys-color-surface-container-lowest: #0F0D13;
  --md-sys-color-surface-container-low: #1C1B1F;
  --md-sys-color-surface-container: #201F23;
  --md-sys-color-surface-container-high: #2B292E;
  --md-sys-color-surface-container-highest: #363439;
}


/* --- SECTION 2: BASE & LAYOUT STYLES ------------------------------------- */

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

body {
  font-family: var(--md-ref-typeface-plain, sans-serif);
  margin: 0;
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-background);
}

.page-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.approvals-header-container {
  max-width: 1400px;
  style: justify-content;
  margin-bottom: 2rem;
  display: flex;
  justify-content: flex-end;
}

/* --- SECTION 3: REUSABLE COMPONENTS (HEADER & FAB) ------------------------ */

/* Title header (scrolls away) */
.app-header {
    padding: 1rem 2rem 0 calc(2rem + var(--title-indent-mobile));
}

.app-header-inner {
  max-width: 1400px;
  margin: 0 auto;
}

/* Title — wraps and reserves space for toolbar default state */
.site-title {
  display: block;
  text-decoration: none;
  color: var(--md-sys-color-primary);
  font-family: 'Knewave', cursive;      /* Load via <link> in index.html */
  line-height: 1;                        /* ~56px visual height */
  font-size: clamp(32px, 7vw, 48px);
  letter-spacing: .3px;
  white-space: normal;
  word-break: break-word;
  min-width: 0;
  margin-top: var(--title-top-offset-mobile);
  /* MOBILE: reserve collapsed toolbar footprint (40px icon + padding) */
  margin-right: 56px;
}

/* Floating toolbar wrapper (fixed, top-right) */
.header-container {
  position: fixed;
  top: 10px;
  right: 2rem;
  height: 72px;
  z-index: 100;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.floating-header {
  background-color: var(--md-sys-color-surface-container-high);
  border-radius: 32px;
  box-shadow: 0 3px 6px 2px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  white-space: nowrap;
  pointer-events: auto; /* accept clicks despite wrapper being none */
}

/* Toolbar Animation */
.floating-header.expanded {
  animation: expansion var(--expansion-duration) cubic-bezier(0.5, 0, 1, 1) forwards,
             bounce-position var(--overshoot-duration) cubic-bezier(0, 0, 0.2, 1) var(--expansion-duration) forwards;
}

/* Smooth contraction when closing (mobile only) */
.floating-header.collapsing {
  animation: contraction var(--expansion-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.floating-header.collapsing .header-actions {
  animation: fade-out var(--fade-duration) ease-in forwards;
  pointer-events: none;
}

.floating-header.expanded .header-actions {
  animation: overshoot-width var(--overshoot-duration) cubic-bezier(0, 0, 0.2, 1) var(--expansion-duration) forwards,
             fade-in var(--fade-duration) ease-out var(--expansion-duration) forwards;
  pointer-events: auto;
  margin-right: 0.5rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

#header-expander { transition: transform 0.3s ease-in-out; }
.floating-header.expanded #header-expander { transform: rotate(180deg); }

/* Create FAB */
.create-fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 10;
}
.create-fab-extended { display: none; }
.create-fab-square { display: block; }


/* --- SECTION 4: INDEX PAGE STYLES ---------------------------------------- */

.blog-post-card.approval-card {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}
.approval-card .card-title {
    color: var(--md-sys-color-error);
}
.approval-card .card-date {
    color: var(--md-sys-color-on-error-container);
    opacity: 0.8;
}
.approval-card md-outlined-button {
    --md-outlined-button-label-text-color: var(--md-sys-color-error);
    --md-outlined-button-outline-color: var(--md-sys-color-error);
    --md-outlined-button-hover-state-layer-color: var(--md-sys-color-error);
    --md-outlined-button-pressed-state-layer-color: var(--md-sys-color-error);
    --md-outlined-button-focus-state-layer-color: var(--md-sys-color-error);
}


.blog-post-card {
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: 32px;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--md-sys-color-primary);
  margin: 0;
}

.card-date {
  font-size: 0.9rem;
  color: var(--md-sys-color-on-surface-variant);
  margin: 0.25rem 0 0.5rem 0;
}

.card-summary {
  font-size: 1rem;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.5;
}


/* --- SECTION 5: SINGLE POST & CREATE PAGE STYLES -------------------------- */

body.post-page { background-color: var(--md-sys-color-surface-container-low); }

.post-container { padding: 2rem 1.5rem; }

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto 1.5rem auto;
}

.post-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--md-sys-color-primary);
  margin: 0;
}

.post-subtitle {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sys-color-on-primary-container);
}

.legal-text {
  font-size: 1.0rem;
  color: var(--sys-color-on-primary-container);
}

.post-date {
  font-size: 0.9rem;
  color: var(--md-sys-color-on-surface-variant);
  margin: 0.25rem 0 0.5rem 0;
}

.create-explainer {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--md-sys-color-on-surface-variant);
  margin: 1rem 0 0 0;
}

.post-content {
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 900px;
  margin: 0 auto;
}

.post-content p { margin-bottom: 1.5rem; }

.discard-button a, .close-button a { text-decoration: none; }
.discard-button-full, .close-button-full { display: none; }
.discard-button-icon, .close-button-icon { display: block; }

.discard-button-full {
  --md-filled-button-container-color: var(--md-sys-color-error);
  --md-filled-button-label-text-color: var(--md-sys-color-on-error);
  --md-filled-button-icon-color: var(--md-sys-color-on-error);
  --md-filled-button-hover-state-layer-color: var(--md-sys-color-on-error);
  --md-filled-button-focus-state-layer-color: var(--md-sys-color-on-error);
  --md-filled-button-pressed-state-layer-color: var(--md-sys-color-on-error);
}

.delete-button-full {
  --md-filled-button-container-color: var(--md-sys-color-error);
  --md-filled-button-label-text-color: var(--md-sys-color-on-error);
  --md-filled-button-icon-color: var(--md-sys-color-on-error);
  --md-filled-button-hover-state-layer-color: var(--md-sys-color-on-error);
  --md-filled-button-focus-state-layer-color: var(--md-sys-color-on-error);
  --md-filled-button-pressed-state-layer-color: var(--md-sys-color-on-error);
}
.discard-button-icon {
  --md-filled-icon-button-container-color: var(--md-sys-color-error);
  --md-filled-icon-button-icon-color: var(--md-sys-color-on-error);
  --md-filled-icon-button-hover-state-layer-color: var(--md-sys-color-on-error);
  --md-filled-icon-button-focus-state-layer-color: var(--md-sys-color-on-error);
  --md-filled-icon-button-pressed-state-layer-color: var(--md-sys-color-on-error);
}

/* Confirm Button (Confirm) */
.confirm-button-full {
  --md-filled-button-container-color: var(--md-sys-color-confirm);
  --md-filled-button-label-text-color: var(--md-sys-color-on-confirm);
  --md-filled-button-icon-color: var(--md-sys-color-on-confirm);
  --md-filled-button-hover-state-layer-color: var(--md-sys-color-on-confirm);
  --md-filled-button-focus-state-layer-color: var(--md-sys-color-on-confirm);
  --md-filled-button-pressed-state-layer-color: var(--md-sys-color-on-confirm);
}
.confirm-button-icon {
  --md-filled-icon-button-container-color: var(--md-sys-color-confirm);
  --md-filled-icon-button-icon-color: var(--md-sys-color-on-confirm);
  --md-filled-icon-button-hover-state-layer-color: var(--md-sys-color-on-confirm);
  --md-filled-icon-button-focus-state-layer-color: var(--md-sys-color-on-confirm);
  --md-filled-icon-button-pressed-state-layer-color: var(--md-sys-color-on-confirm);
}

.preview-actions {
  max-width: 900px;
  margin: 2rem auto 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

/* Create Form */
.create-form { display: flex; flex-direction: column; }

.form-field { display: flex; flex-direction: column; gap: 0.25rem; }

.form-input, .form-textarea {
  width: 100%;
  font-family: var(--md-ref-typeface-plain, sans-serif);
  font-size: 1rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 32px;
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  transition: all 0.2s ease-in-out;
}

.create-form .form-input, .create-form .form-textarea {
  background-color: var(--md-sys-color-surface);
}

.form-input::placeholder, .form-textarea::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}

.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 1px var(--md-sys-color-primary);
}

.form-input[readonly] {
  color: var(--md-sys-color-on-surface-variant);
  background-color: var(--md-sys-color-surface-container);
}

.form-textarea { resize: vertical; min-height: 300px; }
.form-submit-button { align-self: flex-start; }

.form-error-message {
  color: var(--md-sys-color-error);
  font-size: 0.875rem;
  padding: 0 1.5rem;
  min-height: 1.2rem;
}
.form-error-message:not(:empty) { margin-bottom: 0.85rem; }

.form-input.input-error, .form-textarea.input-error { border-color: var(--md-sys-color-error); }
.form-input.input-error:focus, .form-textarea.input-error:focus {
  border-color: var(--md-sys-color-error);
  box-shadow: 0 0 0 1px var(--md-sys-color-error);
}

/* md-dialog global typography */
md-dialog [slot="headline"] {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--md-sys-color-primary);
}
md-dialog [slot="content"] {
  font-size: 1rem;
  color: var(--md-sys-color-on-surface-variant);
}


/* --- SECTION 6: RESPONSIVE STYLES ---------------------------------------- */

@media (min-width: 768px) {
  #posts-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .app-header {
    padding-left: calc(max(2rem, (100vw - 1400px) / 2 + 1.5rem) + var(--title-indent-desktop));
  }

  .form-textarea { min-height: 200px; }

  .create-fab-extended { display: block; }
  .create-fab-square { display: none; }

  /* Align floating items with the right content edge of 1400px container */
  .create-fab,
  .header-container {
    right: max(2rem, calc((100vw - 1400px) / 2 + 1.5rem));
  }

  /* Desktop toolbar is always expanded; hide chevron */
  .floating-header {
    animation: none;
    width: auto;
    height: auto;
    padding: 0.5rem;
  }
  .floating-header .header-actions {
    display: flex;
    width: auto;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }
  .floating-header #header-expander { display: none; }

  /* Desktop: title reserves expanded pill width */
  .site-title {
    margin-right: 280px; /* ~expanded width */
    margin-top: var(--title-top-offset-desktop);
    font-size: 48px;
  }

  .post-container {
    padding: 2rem 3rem;
  }

  .close-button-full, .discard-button-full { display: block; }
  .close-button-icon, .discard-button-icon { display: none; }
}


/* --- SECTION 7: ANIMATION KEYFRAMES -------------------------------------- */

@keyframes expansion {
  from { width: 40px; height: 40px; padding: 0; }
  to   { width: 280px; height: 56px; padding: 0.5rem; }
}

@keyframes overshoot-width {
  0% { width: 280px; }
  50% { width: 295px; }
  100% { width: 280px; }
}

@keyframes bounce-position {
  0% { transform: translateX(0); }
  50% { transform: translateX(-12px); }
  100% { transform: translateX(0); }
}

@keyframes fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out  { from { opacity: 1; } to { opacity: 0; } }

@keyframes contraction {
  from { width: 280px; height: 56px; padding: 0.5rem; }
  to   { width: 40px;  height: 40px; padding: 0; }
}