/* TestType — prefer the bundled file, fall back to the local install if present */
@font-face {
  font-family: 'TestType';
  src: local('TestType Style 2'),
       local('Test Type Style 2'),
       local('TestType-Style2'),
       local('TestTypeStyle2'),
       local('TestType'),
       url('../fonts/TestType.woff2') format('woff2'),
       url('../fonts/TestType.woff') format('woff');
  font-display: swap;
}

:root {
  --ink: #111;
  --paper: #f8d9d2;
  --muted: #8a857a;

  --room-kitchen:  #ffd400;
  --room-bathroom: #4d8bff;
  --room-bedroom:  #b266ff;
  --room-living:   #2ecf7a;
  --room-hallway:  #ff7a2b;

  --emo-tender:       #ff5fa2;
  --emo-calm:         #00d6c2;
  --emo-guilt:        #8b6f4e;
  --emo-annoyance:    #e53935;
  --emo-satisfaction: #ffc107;

  --row-hover: rgba(0, 0, 0, 0.06);
}

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", "Inter", "Arial", system-ui, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: #ffd400;
  color: var(--ink);
}
::-moz-selection {
  background: #ffd400;
  color: var(--ink);
}
.entries ::selection {
  background: transparent;
  color: var(--ink);
  text-decoration: underline;
}
.entries ::-moz-selection {
  background: transparent;
  color: var(--ink);
  text-decoration: underline;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 96px 24px 128px;
  transition: max-width 600ms cubic-bezier(0.65, 0, 0.35, 1),
              transform 600ms cubic-bezier(0.65, 0, 0.35, 1) 0ms,
              opacity 400ms ease 0ms;
  position: relative;
}

#view-byroom:checked ~ main,
#view-bytime:checked ~ main,
#view-byemotion:checked ~ main,
#view-about:checked ~ main {
  max-width: 1080px;
}

/* log and about share a grid cell so I can slide between them.
   about comes in from the left, log gets pushed off right.
   feedback said the cut was jarring, this feels softer */
.views {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}
.log, .about {
  grid-area: 1 / 1;
  transition: transform 380ms cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.about { transform: translateX(-100%); }
.log   { transform: translateX(0); }

#view-about:checked ~ main .about { transform: translateX(0); }
#view-about:checked ~ main .log   { transform: translateX(100%); }

.about p {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 20px;
  text-wrap: pretty;
}
.about p:last-child { margin-bottom: 0; }

.entries {
  font-size: 20px;
  line-height: 1.85;
  text-align: left;
  hyphens: none;
}

.entry {
  transition: background-color 120ms ease;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}









.entry[data-room="kitchen"]  { --c: var(--room-kitchen); }
.entry[data-room="bathroom"] { --c: var(--room-bathroom); }
.entry[data-room="bedroom"]  { --c: var(--room-bedroom); }
.entry[data-room="living"]   { --c: var(--room-living); }
.entry[data-room="hallway"]  { --c: var(--room-hallway); }

.entry[data-emotion="tender"]       { --e: var(--emo-tender); }
.entry[data-emotion="calm"]         { --e: var(--emo-calm); }
.entry[data-emotion="guilt"]        { --e: var(--emo-guilt); }
.entry[data-emotion="annoyance"]    { --e: var(--emo-annoyance); }
.entry[data-emotion="satisfaction"] { --e: var(--emo-satisfaction); }

.date {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  font-family: 'TestType', "Helvetica Neue", "Inter", "Arial", system-ui, sans-serif;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
  margin-right: 1px;
  background-image: linear-gradient(var(--c), var(--c));
  background-repeat: no-repeat;
  background-size: 100% 1.05em;
  background-position: 0 0.32em;
  transition: background-size 350ms ease;
}

body:has(#view-paragraph:checked):has(.emotion:hover) .date {
  background-size: 100% 0;
}

/* room name slides out when you hover the entry */
.room-name {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  transition: max-width 350ms cubic-bezier(0.65, 0, 0.35, 1);
}
.entry:hover .room-name {
  max-width: 12ch;
}

/* hover image has to sit outside .views otherwise the overflow:hidden
   I need for the about slide clips it off. anchor positioning pins it
   to whatever date you're hovering. took me a while to figure out */
.date:hover {
  anchor-name: --hovered-date;
}

.hover-image {
  position: fixed;
  position-anchor: --hovered-date;
  top: calc(anchor(top, 50%) - 280px);
  left: anchor(center, 50%);
  margin-left: -130px;
  width: 260px;
  height: 260px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 80ms ease;
  z-index: 9999;
}
body:has(.date:hover) .hover-image { opacity: 1; }

/* rotates through the 4 images by entry index */
body:has(.entry:nth-child(4n+1) .date:hover) .hover-image { background-image: url("../../images/1.jpg"); }
body:has(.entry:nth-child(4n+2) .date:hover) .hover-image { background-image: url("../../images/2.jpg"); }
body:has(.entry:nth-child(4n+3) .date:hover) .hover-image { background-image: url("../../images/IMG_31052026224019.jpg"); }
body:has(.entry:nth-child(4n)   .date:hover) .hover-image { background-image: url("../../images/IMG_31052026224040.jpg"); }

.entry:has(.date:hover) {
  background: var(--row-hover);
}

.emotion {
  display: inline;
  padding: 0 3px;
  background-image: linear-gradient(var(--c), var(--c));
  background-repeat: no-repeat;
  background-size: 100% 0;
  background-position: 0 1.37em;
  transition: background-size 500ms ease, background-position 500ms ease;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

body:has(#view-paragraph:checked):has(.emotion:hover) .emotion {
  background-size: 100% 1.05em;
  background-position: 0 0.32em;
}

/* group headers, same size as body. originally bigger but it looked clunky */
.group-header {
  display: none;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  margin: 24px 0 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--ink);
}
.group-header:first-of-type {
  margin-top: 0;
}

/* radios offscreen — they're just state for the :checked selectors */
.view-radio,
.filter-radio {
  position: fixed;
  top: 0;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* only the matching filter nav shows up per grouped view */
.filter-nav {
  display: none;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}
#view-byroom:checked    ~ main .room-filter-nav,
#view-bytime:checked    ~ main .time-filter-nav,
#view-byemotion:checked ~ main .emotion-filter-nav {
  display: flex;
}

/* filter buttons are just text with a coloured outline. no box, no fill.
   tried boxed chips first but they fought the rest of the layout */
.filter-chip {
  font-family: 'TestType', "Helvetica Neue", "Inter", "Arial", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  padding: 4px 0;
  cursor: pointer;
  user-select: none;
  background: none;
  border: 0;
  color: var(--ink);
  /* outline-only halo, 8 stacked text-shadows. hacky but works */
  --halo: var(--ink);
  text-shadow:
    -1px -1px 0 var(--halo),  0 -1px 0 var(--halo),  1px -1px 0 var(--halo),
     1px  0   0 var(--halo),  1px  1px 0 var(--halo),  0  1px 0 var(--halo),
    -1px  1px 0 var(--halo), -1px  0   0 var(--halo);
  transition: text-shadow 220ms ease;
}
.filter-chip:hover {
  text-shadow:
    -2.5px -2.5px 0 var(--halo),  0 -2.5px 0 var(--halo),  2.5px -2.5px 0 var(--halo),
     2.5px  0    0 var(--halo),  2.5px  2.5px 0 var(--halo),  0  2.5px 0 var(--halo),
    -2.5px  2.5px 0 var(--halo), -2.5px  0    0 var(--halo);
}
.filter-chip.filter-all                   { --halo: var(--muted); }
.filter-chip[data-room="kitchen"]         { --halo: var(--room-kitchen); }
.filter-chip[data-room="bathroom"]        { --halo: var(--room-bathroom); }
.filter-chip[data-room="bedroom"]         { --halo: var(--room-bedroom); }
.filter-chip[data-room="living"]          { --halo: var(--room-living); }
.filter-chip[data-room="hallway"]         { --halo: var(--room-hallway); }
.filter-chip[data-time="morning"]         { --halo: #ffd400; }
.filter-chip[data-time="afternoon"]       { --halo: #ff7a2b; }
.filter-chip[data-time="evening"]         { --halo: #b266ff; }
.filter-chip[data-time="night"]           { --halo: #4d8bff; }
.filter-chip[data-emotion="tender"]       { --halo: var(--emo-tender); }
.filter-chip[data-emotion="calm"]         { --halo: var(--emo-calm); }
.filter-chip[data-emotion="guilt"]        { --halo: var(--emo-guilt); }
.filter-chip[data-emotion="annoyance"]    { --halo: var(--emo-annoyance); }
.filter-chip[data-emotion="satisfaction"] { --halo: var(--emo-satisfaction); }

/* selected chip drops the halo, goes plain black */
#room-all:checked          ~ main .room-filter-nav    .filter-chip.filter-all,
#room-kitchen:checked      ~ main .filter-chip[data-room="kitchen"],
#room-bathroom:checked     ~ main .filter-chip[data-room="bathroom"],
#room-bedroom:checked      ~ main .filter-chip[data-room="bedroom"],
#room-living:checked       ~ main .filter-chip[data-room="living"],
#room-hallway:checked      ~ main .filter-chip[data-room="hallway"],
#time-all:checked          ~ main .time-filter-nav    .filter-chip.filter-all,
#time-morning:checked      ~ main .filter-chip[data-time="morning"],
#time-afternoon:checked    ~ main .filter-chip[data-time="afternoon"],
#time-evening:checked      ~ main .filter-chip[data-time="evening"],
#time-night:checked        ~ main .filter-chip[data-time="night"],
#emotion-all:checked       ~ main .emotion-filter-nav .filter-chip.filter-all,
#emotion-tender:checked    ~ main .filter-chip[data-emotion="tender"],
#emotion-calm:checked      ~ main .filter-chip[data-emotion="calm"],
#emotion-guilt:checked     ~ main .filter-chip[data-emotion="guilt"],
#emotion-annoyance:checked ~ main .filter-chip[data-emotion="annoyance"],
#emotion-satisfaction:checked ~ main .filter-chip[data-emotion="satisfaction"] {
  text-shadow: none;
}

/* "All" stays hidden until you pick a filter, then it slides in.
   would be redundant otherwise since everything's already showing */
.filter-chip.filter-all {
  opacity: 0;
  max-width: 0;
  margin-right: -16px;  /* swallows the nav gap so it doesn't reserve space */
  overflow: hidden;
  pointer-events: none;
  transition: opacity 280ms ease,
              max-width 320ms cubic-bezier(0.65, 0, 0.35, 1),
              margin-right 320ms cubic-bezier(0.65, 0, 0.35, 1);
}
#room-kitchen:checked         ~ main .room-filter-nav    .filter-chip.filter-all,
#room-bathroom:checked        ~ main .room-filter-nav    .filter-chip.filter-all,
#room-bedroom:checked         ~ main .room-filter-nav    .filter-chip.filter-all,
#room-living:checked          ~ main .room-filter-nav    .filter-chip.filter-all,
#room-hallway:checked         ~ main .room-filter-nav    .filter-chip.filter-all,
#time-morning:checked         ~ main .time-filter-nav    .filter-chip.filter-all,
#time-afternoon:checked       ~ main .time-filter-nav    .filter-chip.filter-all,
#time-evening:checked         ~ main .time-filter-nav    .filter-chip.filter-all,
#time-night:checked           ~ main .time-filter-nav    .filter-chip.filter-all,
#emotion-tender:checked       ~ main .emotion-filter-nav .filter-chip.filter-all,
#emotion-calm:checked         ~ main .emotion-filter-nav .filter-chip.filter-all,
#emotion-guilt:checked        ~ main .emotion-filter-nav .filter-chip.filter-all,
#emotion-annoyance:checked    ~ main .emotion-filter-nav .filter-chip.filter-all,
#emotion-satisfaction:checked ~ main .emotion-filter-nav .filter-chip.filter-all {
  opacity: 1;
  max-width: 6ch;
  margin-right: 0;
  pointer-events: auto;
}

/* filtered views: hide entries that don't match. gated by the view too
   so a filter doesn't leak when you switch back to paragraph or about */
body:has(#view-byroom:checked)    #room-kitchen:checked         ~ main .entry:not([data-room="kitchen"]),
body:has(#view-byroom:checked)    #room-bathroom:checked        ~ main .entry:not([data-room="bathroom"]),
body:has(#view-byroom:checked)    #room-bedroom:checked         ~ main .entry:not([data-room="bedroom"]),
body:has(#view-byroom:checked)    #room-living:checked          ~ main .entry:not([data-room="living"]),
body:has(#view-byroom:checked)    #room-hallway:checked         ~ main .entry:not([data-room="hallway"]),
body:has(#view-bytime:checked)    #time-morning:checked         ~ main .entry:not([data-time="morning"]),
body:has(#view-bytime:checked)    #time-afternoon:checked       ~ main .entry:not([data-time="afternoon"]),
body:has(#view-bytime:checked)    #time-evening:checked         ~ main .entry:not([data-time="evening"]),
body:has(#view-bytime:checked)    #time-night:checked           ~ main .entry:not([data-time="night"]),
body:has(#view-byemotion:checked) #emotion-tender:checked       ~ main .entry:not([data-emotion="tender"]),
body:has(#view-byemotion:checked) #emotion-calm:checked         ~ main .entry:not([data-emotion="calm"]),
body:has(#view-byemotion:checked) #emotion-guilt:checked        ~ main .entry:not([data-emotion="guilt"]),
body:has(#view-byemotion:checked) #emotion-annoyance:checked    ~ main .entry:not([data-emotion="annoyance"]),
body:has(#view-byemotion:checked) #emotion-satisfaction:checked ~ main .entry:not([data-emotion="satisfaction"]) {
  display: none !important;
}

/* toggle nav */
.view-switch {
  margin: 0 0 32px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.view-link {
  font-family: 'TestType', "Helvetica Neue", "Inter", "Arial", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  display: inline-block;
  position: relative;
  padding-bottom: 16px;
}

/* each link has two svg underlines stacked. ::before is the resting shape,
   ::after is what it morphs into on hover. crossfade, no scaling.
   only the shape changes, the line stays the same size */
.view-link::before,
.view-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 6px;
  background-repeat: no-repeat;
  background-size: 100% 6px;
  transition: opacity 360ms ease,
              bottom 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.view-link::before { opacity: 1; }
.view-link::after  { opacity: 0; }
.view-link:hover::before { opacity: 0; bottom: 0; }
.view-link:hover::after  { opacity: 1; bottom: 0; }

/* svg pairs per link, each one a different asymmetric squiggle */
.view-link[for="view-paragraph"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M0,3 C20,1 40,5 60,3 C80,1 100,5 120,3' fill='none' stroke='%23111' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.view-link[for="view-paragraph"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M0,3 L15,5 L30,1 L45,5 L60,2 L75,5 L90,1 L105,4 L120,3' fill='none' stroke='%23111' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.view-link[for="view-byroom"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M0,4 Q10,1 20,4 T40,4 T60,4 T80,4 T100,4 T120,4' fill='none' stroke='%23111' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.view-link[for="view-byroom"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M0,4 C8,1 16,5 24,3 C32,5 40,1 48,4 C56,5 64,1 72,5 C80,5 88,1 96,4 C104,5 112,1 120,4' fill='none' stroke='%23111' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.view-link[for="view-bytime"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M0,3 L12,5 L24,1 L36,5 L48,2 L60,5 L72,1 L84,5 L96,2 L108,5 L120,3' fill='none' stroke='%23111' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.view-link[for="view-bytime"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M0,4 C30,1 60,5 90,2 C100,4 110,3 120,4' fill='none' stroke='%23111' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.view-link[for="view-byemotion"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M0,4 C6,1 12,5 20,4 C28,5 36,1 44,4 C52,5 60,1 68,4 C76,5 84,1 92,4 C100,5 108,1 120,4' fill='none' stroke='%23111' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.view-link[for="view-byemotion"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M0,2 L20,5 L40,3 L60,5 L80,2 L100,5 L120,4' fill='none' stroke='%23111' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.view-link[for="view-about"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M0,3 C4,5 12,1 18,5 C24,1 30,5 38,3 C46,5 52,1 60,5 C68,1 76,5 84,3 C92,5 100,1 108,5 C114,1 120,3' fill='none' stroke='%23111' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.view-link[for="view-about"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M0,4 Q10,5 20,4 T40,4 T60,4 T80,4 T100,4 T120,4' fill='none' stroke='%23111' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* grouped views — added after feedback. the table view wasn't doing it */
#view-byroom:checked ~ main .entries,
#view-bytime:checked ~ main .entries,
#view-byemotion:checked ~ main .entries {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 20px;
  line-height: 1.5;
}
#view-byroom:checked ~ main .entry,
#view-bytime:checked ~ main .entry,
#view-byemotion:checked ~ main .entry {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
#view-byroom:checked ~ main .entry .desc,
#view-bytime:checked ~ main .entry .desc,
#view-byemotion:checked ~ main .entry .desc { display: block; margin-top: 4px; }
#view-byroom:checked ~ main .entry .emotion,
#view-bytime:checked ~ main .entry .emotion,
#view-byemotion:checked ~ main .entry .emotion { display: block; margin-top: 6px; color: rgba(0, 0, 0, 0.6); }

/* group headers stay hidden in grouped views. the filter chips already
   show the category so the in-flow headers were just repeating themselves.
   leaving the rules below in case I change my mind */

/* room headers get the room colour */
#view-byroom:checked ~ main .group-header[data-key="kitchen"]  { color: var(--room-kitchen);  border-bottom-color: var(--room-kitchen); }
#view-byroom:checked ~ main .group-header[data-key="bathroom"] { color: var(--room-bathroom); border-bottom-color: var(--room-bathroom); }
#view-byroom:checked ~ main .group-header[data-key="bedroom"]  { color: var(--room-bedroom);  border-bottom-color: var(--room-bedroom); }
#view-byroom:checked ~ main .group-header[data-key="living"]   { color: var(--room-living);   border-bottom-color: var(--room-living); }
#view-byroom:checked ~ main .group-header[data-key="hallway"]  { color: var(--room-hallway);  border-bottom-color: var(--room-hallway); }

/* same for emotion */
#view-byemotion:checked ~ main .group-header[data-key="tender"]       { color: var(--emo-tender);       border-bottom-color: var(--emo-tender); }
#view-byemotion:checked ~ main .group-header[data-key="calm"]         { color: var(--emo-calm);         border-bottom-color: var(--emo-calm); }
#view-byemotion:checked ~ main .group-header[data-key="guilt"]        { color: var(--emo-guilt);        border-bottom-color: var(--emo-guilt); }
#view-byemotion:checked ~ main .group-header[data-key="annoyance"]    { color: var(--emo-annoyance);    border-bottom-color: var(--emo-annoyance); }
#view-byemotion:checked ~ main .group-header[data-key="satisfaction"] { color: var(--emo-satisfaction); border-bottom-color: var(--emo-satisfaction); }

/* ordering, by room */
#view-byroom:checked ~ main .group-header[data-key="kitchen"]  { order: 10; }
#view-byroom:checked ~ main .entry[data-room="kitchen"]        { order: 11; }
#view-byroom:checked ~ main .group-header[data-key="bathroom"] { order: 20; }
#view-byroom:checked ~ main .entry[data-room="bathroom"]       { order: 21; }
#view-byroom:checked ~ main .group-header[data-key="bedroom"]  { order: 30; }
#view-byroom:checked ~ main .entry[data-room="bedroom"]        { order: 31; }
#view-byroom:checked ~ main .group-header[data-key="living"]   { order: 40; }
#view-byroom:checked ~ main .entry[data-room="living"]         { order: 41; }
#view-byroom:checked ~ main .group-header[data-key="hallway"]  { order: 50; }
#view-byroom:checked ~ main .entry[data-room="hallway"]        { order: 51; }

/* ordering, by time */
#view-bytime:checked ~ main .group-header[data-key="morning"]   { order: 10; }
#view-bytime:checked ~ main .entry[data-time="morning"]         { order: 11; }
#view-bytime:checked ~ main .group-header[data-key="afternoon"] { order: 20; }
#view-bytime:checked ~ main .entry[data-time="afternoon"]       { order: 21; }
#view-bytime:checked ~ main .group-header[data-key="evening"]   { order: 30; }
#view-bytime:checked ~ main .entry[data-time="evening"]         { order: 31; }
#view-bytime:checked ~ main .group-header[data-key="night"]     { order: 40; }
#view-bytime:checked ~ main .entry[data-time="night"]           { order: 41; }

/* ordering, by emotion */
#view-byemotion:checked ~ main .group-header[data-key="tender"]       { order: 10; }
#view-byemotion:checked ~ main .entry[data-emotion="tender"]          { order: 11; }
#view-byemotion:checked ~ main .group-header[data-key="calm"]         { order: 20; }
#view-byemotion:checked ~ main .entry[data-emotion="calm"]            { order: 21; }
#view-byemotion:checked ~ main .group-header[data-key="guilt"]        { order: 30; }
#view-byemotion:checked ~ main .entry[data-emotion="guilt"]           { order: 31; }
#view-byemotion:checked ~ main .group-header[data-key="annoyance"]    { order: 40; }
#view-byemotion:checked ~ main .entry[data-emotion="annoyance"]       { order: 41; }
#view-byemotion:checked ~ main .group-header[data-key="satisfaction"] { order: 50; }
#view-byemotion:checked ~ main .entry[data-emotion="satisfaction"]    { order: 51; }

/* date keeps its colour in the grouped views */
#view-byroom:checked ~ main .date,
#view-bytime:checked ~ main .date,
#view-byemotion:checked ~ main .date {
  display: inline-block;
  margin-right: 8px;
}
#view-byroom:checked ~ main .date::after,
#view-bytime:checked ~ main .date::after,
#view-byemotion:checked ~ main .date::after { display: none; }
#view-byroom:checked ~ main .entry:has(.date:hover),
#view-bytime:checked ~ main .entry:has(.date:hover),
#view-byemotion:checked ~ main .entry:has(.date:hover) { background: transparent; }

@media (max-width: 600px) {
  main { padding: 56px 20px 96px; max-width: 100%; }
  .info { right: 16px; }
  .info[data-pos="t