/* /emotion-tracker: the day planner for feelings (built by tools/wiki.py, run by tracker.js).
   Navy, gold and white (designSystem.ericPalette): the planner sits on a deep navy band like the
   contact form; the readings and the feelings list on white. Gold type on white is #7A6A3E,
   on navy #C9B57F. The report is print only: navy type on white, gold rules, his signature. */

.emt-private{margin:22px 0 0; font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#C9B57F;}
.emt-hero .btn-row{margin-top:30px;}
.emt-steps strong{color:#051748; font-weight:600;}

/* ---- the planner (navy) ------------------------------------------------- */
.emt-plan .section-head p{color:#D6DBE8;}
.emt-nojs{margin:0; padding:20px 22px; border:1px solid #C9B57F; color:#FFFFFF; max-width:none;}
.emt-app[hidden]{display:none;}
.emt-bar{display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 22px; padding-bottom:26px; margin-bottom:30px; border-bottom:1px solid #22336E;}
.emt-date{margin:0; flex:0 1 220px;}
.emt-date input{color-scheme:dark;}
.emt-bar-btns{display:flex; flex-wrap:wrap; gap:8px;}
.emt-count{margin:0 0 0 auto; font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:#C9B57F;}
.emt-grid{display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr); gap:clamp(28px, 4vw, 64px); align-items:start;}
.emt-form,.emt-day{min-width:0;}
.emt-form h3,.emt-day h3{font-size:clamp(22px, 2.2vw, 28px); letter-spacing:-0.02em; margin:0 0 20px; color:#FFFFFF;}
.emt-form .field input[type="time"]{color-scheme:dark;}
.emt-sm{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:#FFFFFF; background:transparent; border:1px solid rgba(201,181,127,0.7); border-radius:0; padding:11px 14px; min-height:44px; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease);}
.emt-sm:hover{background:#C9B57F; color:#051748; border-color:#C9B57F;}
.emt-sm:focus-visible,.emt-chip input:focus-visible + span,.emt-lv input:focus-visible + span,.emt-act:focus-visible{outline:2px solid #C9B57F; outline-offset:3px;}
.emt-feel{border:0; margin:6px 0 18px; padding:0; min-width:0;}
.emt-feel legend{padding:0; margin-bottom:14px; font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:#C9B57F;}
.emt-feel legend span{margin-left:8px; color:#B4BCD2; letter-spacing:0.14em;}
.emt-chip-g{display:flex; flex-wrap:wrap; gap:8px; padding:12px 0 14px; border-top:1px solid #22336E;}
.emt-chip-k{flex:0 0 100%; font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#B4BCD2; margin-bottom:2px;}
.emt-chip{position:relative; display:inline-flex; cursor:pointer;}
.emt-chip input,.emt-lv input{position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;}
.emt-chip span{display:inline-flex; align-items:center; min-height:40px; padding:8px 13px; border:1px solid #22336E; color:#FFFFFF; font-size:14px; line-height:1.2; transition:background .25s var(--ease), border-color .25s var(--ease);}
.emt-chip:hover span{border-color:#C9B57F;}
.emt-chip input:checked + span{background:#C9B57F; border-color:#C9B57F; color:#051748; font-weight:600;}
.emt-levels:empty{display:none;}
.emt-levels{margin:0 0 18px; display:flex; flex-direction:column; gap:12px;}
.emt-lv{border:1px solid #22336E; margin:0; padding:12px 14px 14px; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;}
.emt-lv legend{float:left; padding:0; margin:0; font-size:14.5px; color:#FFFFFF; min-width:9em; font-weight:500;}
.emt-lv legend + *{clear:none;}
.emt-lv-opts{display:flex; gap:6px;}
.emt-lv label{position:relative; cursor:pointer;}
.emt-lv label span{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid #22336E; color:#FFFFFF; font-family:var(--display); font-weight:700; font-size:14px;}
.emt-lv label:hover span{border-color:#C9B57F;}
.emt-lv input:checked + span{background:#C9B57F; border-color:#C9B57F; color:#051748;}
.emt-lv-hint{flex:0 0 100%; margin:0; font-size:12.5px; color:#B4BCD2;}
.emt-error{margin:0 0 12px; color:#FFFFFF; font-size:14px; max-width:none;}
.emt-error:empty{display:none;}
.emt-error:not(:empty){padding:12px 14px; border-left:3px solid #C9B57F; background:rgba(201,181,127,0.1);}
.emt-form-btns,.emt-keep-btns{display:flex; flex-wrap:wrap; gap:12px;}
.emt-form-btns .btn,.emt-keep-btns .btn{cursor:pointer;}
.emt-form-btns .btn[hidden]{display:none;}

/* the day */
.emt-day{border:1px solid rgba(201,181,127,0.55); padding:clamp(22px, 3vw, 34px);}
.emt-empty{margin:0; color:#D6DBE8;}
.emt-empty[hidden]{display:none;}
.emt-timeline{list-style:none; margin:0; padding:0; position:relative;}
.emt-timeline:not(:empty){border-left:1px solid #C9B57F; margin-left:6px;}
.emt-m{position:relative; padding:0 0 24px 24px;}
.emt-m:last-child{padding-bottom:4px;}
.emt-m::before{content:""; position:absolute; left:-5px; top:6px; width:9px; height:9px; background:#C9B57F; transform:rotate(45deg);}
.emt-m-when{margin:0 0 6px; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#C9B57F;}
.emt-m-what{margin:0 0 8px; color:#FFFFFF; font-size:15.5px; line-height:1.55;}
.emt-m-what b{font-weight:600; color:#B4BCD2; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; margin-right:6px;}
.emt-m-feel{list-style:none; margin:0 0 8px; padding:0; display:flex; flex-wrap:wrap; gap:6px;}
.emt-m-feel li{display:inline-flex; align-items:center; gap:8px; padding:5px 10px; border:1px solid #22336E; font-size:14px; color:#FFFFFF;}
.emt-m-feel a{color:#FFFFFF; text-decoration:underline; text-decoration-color:rgba(201,181,127,0.7); text-underline-offset:3px;}
.emt-m-feel a:hover{color:#C9B57F;}
.emt-dots{display:inline-flex; gap:3px;}
.emt-dots i{display:block; width:6px; height:6px; border:1px solid #C9B57F;}
.emt-dots i.on{background:#C9B57F;}
.emt-m-notes{margin:0 0 8px; color:#D6DBE8; font-size:14.5px; line-height:1.6; white-space:pre-line;}
.emt-m-btns{display:flex; gap:14px;}
.emt-act{background:none; border:0; padding:6px 0; min-height:32px; cursor:pointer; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:#C9B57F; text-decoration:underline; text-underline-offset:4px;}
.emt-act:hover{color:#FFFFFF;}
.emt-brief,.emt-keep{margin-top:26px; padding-top:22px; border-top:1px solid #22336E;}
.emt-brief[hidden],.emt-keep[hidden]{display:none;}
.emt-brief h4,.emt-keep h4{margin:0 0 12px; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:#C9B57F;}
.emt-brief p{margin:0 0 6px; color:#FFFFFF; font-size:15.5px; line-height:1.55; max-width:none;}
.emt-brief p b{font-weight:600; color:#C9B57F;}
.emt-clear{margin-top:24px; padding-top:18px; border-top:1px solid #22336E; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;}
.emt-status{margin:0; flex:1 1 100%; font-size:13px; color:#D6DBE8;}
.emt-status:empty{display:none;}
@media (max-width:900px){ .emt-grid{grid-template-columns:minmax(0, 1fr);} }
@media (max-width:560px){
  .emt-count{margin-left:0; flex:1 1 100%;}
  .emt-date{flex:1 1 100%;}
  .emt-lv legend{float:none; min-width:0;}
  .emt-lv label span{width:44px; height:44px;}
  .emt-form-btns .btn,.emt-keep-btns .btn{width:100%;}
}

/* ---- what the feelings are telling you (white) -------------------------- */
.emt-read[hidden]{display:none;}
.emt-cards{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0; border-top:1px solid #051748;}
.emt-card{padding:clamp(22px, 3vw, 34px) clamp(18px, 2.6vw, 34px) clamp(22px, 3vw, 34px) 0; border-bottom:1px solid #D8DCE8;}
.emt-card:nth-child(even){padding-left:clamp(18px, 2.6vw, 34px); border-left:1px solid #D8DCE8;}
.emt-card-k{margin:0 0 8px; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#7A6A3E;}
.emt-card h3{margin:0 0 12px; font-size:clamp(26px, 2.8vw, 36px); letter-spacing:-0.03em; line-height:1.05;}
.emt-card h3 a{color:#051748; text-decoration:none;}
.emt-card h3 a:hover{color:#7A6A3E;}
.emt-card-t{margin:0 0 16px; font-family:var(--display); font-weight:300; font-size:clamp(18px, 1.7vw, 21px); line-height:1.45; color:#051748;}
.emt-card h4{margin:0 0 8px; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#7A6A3E;}
.emt-card ol{margin:0 0 16px; padding-left:20px; color:#2B3561; font-size:15px; line-height:1.65;}
.emt-card ol li{margin-bottom:6px;}
.emt-card-more{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:#051748; text-decoration:underline; text-decoration-color:#9D8B5C; text-underline-offset:4px;}
.emt-card-more:hover{color:#7A6A3E;}
@media (max-width:760px){
  .emt-cards{grid-template-columns:minmax(0, 1fr);}
  .emt-card,.emt-card:nth-child(even){padding-left:0; padding-right:0; border-left:0;}
}

/* ---- the feelings you can log (white) ----------------------------------- */
.emt-fl-grid{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(20px, 2.6vw, 36px);}
.emt-fl-g{border-top:1px solid #051748; padding-top:16px; min-width:0;}
.emt-fl-g h3{margin:0 0 14px; font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:#7A6A3E;}
.emt-fl-g ul{list-style:none; margin:0; padding:0;}
.emt-fl-g li{padding:10px 0 12px; border-bottom:1px solid #D8DCE8;}
.emt-fl-g a{display:block; font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-0.01em; color:#051748; text-decoration:none; margin-bottom:4px;}
.emt-fl-g a:hover,.emt-fl-g a:focus-visible{color:#7A6A3E;}
.emt-fl-g span{display:block; font-size:14px; line-height:1.55; color:#2B3561;}
@media (max-width:1024px){ .emt-fl-grid{grid-template-columns:repeat(2, minmax(0, 1fr));} }
@media (max-width:560px){ .emt-fl-grid{grid-template-columns:minmax(0, 1fr);} }

/* ---- the report: print only ---------------------------------------------- */
.emt-report{display:none;}
@media print{
  @page{size:auto; margin:14mm 14mm 16mm;}
  html,body{background:#FFFFFF !important;}
  body > *:not(main),main > *:not(.emt-report),.to-top,.back-to-top{display:none !important;}
  main{padding:0 !important; margin:0 !important;}
  .emt-report{display:block !important; color:#051748; font-family:var(--body); font-size:10.5pt; line-height:1.5;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;}
  .emt-r-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding:0 0 12px; border-bottom:2px solid #9D8B5C; margin-bottom:16px;}
  .emt-r-k{margin:0 0 6px; font-family:var(--display); font-size:8pt; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:#7A6A3E;}
  .emt-r-head h1{margin:0; font-family:var(--display); font-size:22pt; font-weight:800; letter-spacing:-0.02em; line-height:1.1; color:#051748;}
  .emt-r-head h1 em{font-style:normal; font-weight:300; color:#7A6A3E;}
  .emt-r-sig{height:44px; width:auto; flex:none;}
  .emt-report h2{margin:16px 0 8px; font-family:var(--display); font-size:8.5pt; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:#7A6A3E; break-after:avoid;}
  .emt-r-brief{margin:0; padding:10px 14px; border-left:3px solid #9D8B5C; background:#F4F5F9;}
  .emt-r-brief p{margin:0 0 3px; color:#051748;}
  .emt-r-brief b{color:#051748;}
  .emt-r-m{display:grid; grid-template-columns:30mm minmax(0, 1fr); gap:4px 12px; padding:8px 0; border-bottom:1px solid #D8DCE8; break-inside:avoid;}
  .emt-r-m dt{font-family:var(--display); font-size:8pt; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#7A6A3E; padding-top:2px;}
  .emt-r-m dd{margin:0;}
  .emt-r-m p{margin:0 0 2px; color:#051748;}
  .emt-r-m .emt-r-n{color:#2B3561; font-style:italic;}
  .emt-report p{max-width:none;}
  .emt-r-fs{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 18px;}
  .emt-r-f{break-inside:avoid; padding:8px 0 6px; border-bottom:1px solid #D8DCE8; font-size:9.5pt;}
  .emt-r-f h3{margin:0 0 2px; font-family:var(--display); font-size:12pt; font-weight:800; color:#051748;}
  .emt-r-f h3 span{font-size:8pt; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#7A6A3E; margin-left:8px;}
  .emt-r-f p{margin:0 0 3px; color:#051748;}
  .emt-r-f ul{margin:0 0 3px; padding-left:16px; color:#2B3561;}
  .emt-r-f .emt-r-u{font-size:8.5pt; color:#7A6A3E;}
  .emt-r-foot{margin-top:16px; padding-top:10px; border-top:2px solid #9D8B5C; font-size:8.5pt; color:#2B3561; break-inside:avoid;}
  .emt-r-foot p{margin:0 0 2px;}
  .emt-r-foot strong{color:#051748;}
}