/* The diary keeps the wheel's reading order in two compact groups. */
body > header, #toggleweek { display: none; }
main { width: 100%; max-width: 450px; padding: 0; }
.diary-page {
  min-height: 100dvh; display: flex; flex-direction: column;
  color: #153a3d; background: #f7f5ed;
}
.diary-header {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 4px 7px; align-items: center; padding: 8px 10px;
  background: #0d545b; color: #fff9ee;
}
.diary-header img { display: block; width: 54px; height: 54px; object-fit: contain; }
.diary-header-copy { display: grid; min-width: 0; text-align: left; }
.diary-brand { margin-inline-start: 0; line-height: 1.12; font-size: 11px; letter-spacing: .14em; font-weight: 760; }
.diary-edition { font-size: 10px; color: #e3eee9; line-height: 1.2; }
.diary-date > span[aria-hidden] { flex-shrink: 0; }
.diary-date-title { margin: 0; font: inherit; }
.diary-header button { min-height: 44px; color: inherit; }
.diary-date {
  width: 100%; display: flex; align-items: center; gap: 4px; padding: 1px 0;
  border: 0; background: transparent; text-align: left; font-size: 16px;
  font-weight: 760; line-height: 1.16;
}
.diary-header .diary-tools-button {
  min-width: 46px; padding: 3px 6px; border-color: #9ec2bc;
  background: #ffffff18; font-size: 12px; font-weight: 700;
}
/* Align the sky switch with the date while leaving room for its tropical note. */
.diary-sky-row {
  grid-column: 2 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 8px; align-items: center;
}
.diary-sky-switch { display: flex; gap: 2px; border-radius: 9px; background: #ffffff18; }
.diary-header .diary-sky-switch button {
  min-height: 34px; padding: 2px 6px; border: 1px solid transparent; border-radius: 7px;
  background: transparent; font-size: 11px; font-weight: 700;
}
.diary-header .diary-sky-switch button[aria-pressed="true"] {
  border-color: #d4eae3; background: #e6f2ed; color: #0d545b;
}
.diary-header .diary-sky-switch button:focus-visible {
  outline: 2px solid #ffe3a5; outline-offset: 1px;
}
.diary-wheel { flex: 1; display: flex; flex-direction: column; padding: 7px 8px max(8px, env(safe-area-inset-bottom)); }
.diary-wheel h2 { margin: 0 0 3px; color: #466365; font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.diary-layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.diary-tile {
  min-width: 0; min-height: 65px; padding: 3px 1px; border: 1px solid #c5d6ce;
  border-radius: 9px; background: #fffdf8; color: #153a3d;
  display: grid; justify-items: center; align-content: center; text-align: center;
}
.diary-tile img { display: block; width: 30px; height: 26px; object-fit: contain; margin-bottom: 1px; }
.diary-tile-label { color: #466365; font-size: 10px; line-height: 1.15; }
.diary-tile-value { font-size: 11px; line-height: 1.18; font-weight: 720; overflow-wrap: anywhere; }
.diary-gate-card {
  display: block; width: 100%; min-height: 44px; margin: 7px 0; padding: 6px 8px;
  border: 1px solid #bc8a4b; border-radius: 12px; background: #fff4db; color: #153a3d; text-align: left;
}
.diary-gate-top { display: flex; align-items: center; gap: 8px; }
.diary-gate-card .hexagram { display: block; width: 46px; height: 46px; flex: 0 0 46px; }
.diary-gate-kicker { font-size: 11px; font-weight: 730; color: #764715; }
.diary-gate-name { display: block; margin-top: 1px; color: #0d545b; font-size: 17px; line-height: 1.16; font-weight: 760; }
.diary-gate-copy { display: block; margin: 2px 0 3px; font-size: 12px; line-height: 1.36; }
.diary-gate-copy strong,.diary-gate-more { color: #0d545b; }
.diary-gate-more { display: block; font-size: 11px; font-weight: 720; }
.diary-gate-full { display: none; }
#open-your-design {
  width: 100%; min-height: 46px; margin: 8px 0 0; padding: 6px 11px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 0; border-radius: 10px; color: #fff; background: #0d545b; font-size: 16px; font-weight: 750; text-align: left;
}
#open-your-design small { display: block; color: #e5f1ed; font-size: 11px; font-weight: 500; }
.diary-tools-list { display: grid; gap: 6px; }
.diary-tools-list button { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; background: #f7f5ed; }
.diary-tools-list small { display: block; color: #466365; font-size: 11px; }
#date-dialog .controls,#date-dialog .nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
#date-dialog input { min-width: 0; }
#correspondence-dialog .decan-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
@media (min-height: 600px) and (min-width: 350px) {
  .diary-header { grid-template-columns: 64px minmax(0,1fr) auto; padding: 9px 10px; }
  .diary-header img { width: 64px; height: 64px; }
  .diary-date { font-size: 16px; }
  .diary-edition { font-size: 11px; }
  .diary-wheel { padding: 11px 10px max(10px, env(safe-area-inset-bottom)); }
  .diary-wheel h2 { margin-bottom: 5px; font-size: 11px; }
  .diary-layers { flex: 1; gap: 5px; grid-auto-rows: minmax(83px,1fr); }
  .diary-tile { padding: 5px 2px; }
  .diary-tile img { width: 50px; height: clamp(40px,7.1dvh,61px); margin-bottom: 3px; }
  .diary-tile-label { font-size: 11px; }
  .diary-tile-value { font-size: 13px; }
  .diary-gate-card { margin: 8px 0; padding: 8px 10px; }
  .diary-gate-card .hexagram { width: 60px; height: 60px; flex-basis: 60px; }
  .diary-gate-copy { font-size: 13px; line-height: 1.39; margin: 5px 0; }
  .diary-gate-more { font-size: 12px; }
  .diary-gate-brief { display: none; }
  .diary-gate-full { display: inline; }
  #open-your-design { min-height: 51px; margin-top: 9px; }
}

@media (max-height: 520px) {
  .diary-header { padding-block: 5px; row-gap: 1px; }
  .diary-tile { min-height: 60px; }
  .diary-gate-card { margin-block: 5px; }
}

/* The Sun and the hexagram share one card. Star and Mandala use a short shortcut row. */
.diary-gate-top > span { flex: 1; min-width: 0; }
.diary-gate-sun-art { width: 30px; height: 30px; object-fit: contain; flex: 0 0 30px; }
.diary-sun-preview {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
  overflow: hidden; margin: 2px 0 3px; font-size: 11px; line-height: 1.3;
}
.diary-sun-preview strong, .diary-sun-reading h3 { color: #0d545b; }
.diary-sun-reading { border-top: 1px solid #c5d6ce; margin-top: 14px; }
.diary-sun-reading h3 { display: flex; align-items: center; gap: 7px; }
.diary-shortcuts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; margin-top: 5px; }
.diary-shortcuts button {
  min-width: 0; min-height: 44px; padding: 3px 6px; display: flex; align-items: center; gap: 5px;
  text-align: left; border: 1px solid #c5d6ce; border-radius: 8px; background: #fffdf8; color: #153a3d;
}
.diary-shortcuts button span { min-width: 0; }
.diary-shortcuts strong, .diary-shortcuts small { display: block; line-height: 1.15; }
.diary-shortcuts strong { font-size: 12px; }
.diary-shortcuts small { font-size: 10px; overflow-wrap: anywhere; color: #466365; }
.diary-shortcuts .star-tile-symbol, .diary-shortcuts .diary-mandala-symbol {
  width: 23px; height: 23px; flex: 0 0 23px; color: #a77724;
}
@media (min-height: 600px) and (min-width: 350px) {
  .diary-header { padding-block: 7px; row-gap: 2px; }
  .diary-wheel { padding-block: 8px max(8px, env(safe-area-inset-bottom)); }
  .diary-wheel h2 { margin-bottom: 3px; }
  .diary-layers { grid-auto-rows: minmax(72px,1fr); }
  .diary-tile { padding: 3px 2px; }
  .diary-tile img { height: clamp(34px,6dvh,50px); }
  .diary-gate-card { margin-block: 5px; padding-block: 6px; }
  .diary-gate-card .hexagram { width: 49px; height: 49px; flex-basis: 49px; }
  .diary-gate-sun-art { width: 36px; height: 36px; flex-basis: 36px; }
  .diary-gate-copy { margin-block: 4px; line-height: 1.3; }
  .diary-sun-preview { -webkit-line-clamp: 2; font-size: 12px; margin-block: 1px 2px; }
  #open-your-design { min-height: 46px; margin-top: 5px; }
}
@media (max-height: 540px) {
  .diary-header { padding-block: 3px; }
  .diary-wheel { padding-top: 3px; }
  .diary-tile { min-height: 48px; padding: 1px; }
  .diary-tile img { height: 21px; }
  .diary-tile-value { font-size: 10px; }
  .diary-gate-card { position: relative; margin-block: 3px; padding-block: 4px; }
  .diary-gate-card .hexagram { width: 38px; height: 38px; flex-basis: 38px; }
  .diary-gate-name { font-size: 15px; }
  .diary-gate-copy { font-size: 11px; }
  .diary-sun-preview { padding-right: 12px; }
  .diary-gate-more { position: absolute; right: 8px; bottom: 5px; font-size: 0; }
  .diary-gate-more::after { content: "›"; font-size: 14px; }
  .diary-shortcuts { margin-top: 3px; }
  #open-your-design { margin-top: 4px; }
}