/* The Hooper Journal: one full width writing desk on notebook paper, the day
   row under it, everything logged below that.

   The ruled lines are a repeating-linear-gradient whose period is exactly the
   line height of the text sitting on it, so the writing lands ON the rule the
   way it does in a school notebook. Change --jrule and the paper still lines
   up, because every number below is derived from it.

   Paper colour is mixed from the design tokens, never hard coded, so night
   gets a warm dark page and day gets cream. Nothing here is a white box in a
   dark app. */

#v-journal{
  /* the notebook */
  --jrule:30px;                    /* rule spacing AND the pad's line height */
  --jgutter:62px;                  /* space left of the margin rule */
  --jmeasure:740px;                /* comfortable text column on a wide page */
  --jpaper:color-mix(in srgb, var(--panel2) 88%, #c88a3a 12%);
  --jpaper-edge:color-mix(in srgb, var(--line) 70%, #c88a3a 30%);
  --jline:color-mix(in srgb, var(--cool) 26%, transparent);
  --jmargin:color-mix(in srgb, var(--bad) 40%, transparent);
  --jink:var(--ink);
}
:root[data-theme="day"] #v-journal{
  --jpaper:color-mix(in srgb, var(--panel) 90%, #ffc266 10%);
  --jpaper-edge:color-mix(in srgb, var(--line) 60%, #c88a3a 40%);
  --jline:color-mix(in srgb, var(--cool) 42%, transparent);
  --jmargin:color-mix(in srgb, var(--bad) 55%, transparent);
}

/* The two big cards are surfaces to work in, not tiles to hover. The lift
   every .card gets in base.css reads as a wobble under a cursor that is
   trying to type. */
.jw,.jf{margin-bottom:16px}
.jw:hover,.jf:hover{transform:none;box-shadow:none;border-color:var(--line)}
:root[data-theme="day"] .jw:hover,:root[data-theme="day"] .jf:hover{
  box-shadow:0 1px 2px rgba(15,21,34,.04),0 10px 28px rgba(15,21,34,.07);
}

/* ------------------------------------------------------------ the prompts */

.jw-lead{margin-bottom:10px;font-size:13.5px}
.jw-prompts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.jw-prompt{
  padding:9px 14px;border-radius:999px;
  border:1px dashed color-mix(in srgb, var(--hot) 45%, var(--line));
  background:color-mix(in srgb, var(--hot) 8%, transparent);
  color:var(--ink);font:700 13px/1.2 var(--sans);text-align:left;
  transition:background .14s,border-color .14s,transform .12s;
}
.jw-prompt:hover{
  background:color-mix(in srgb, var(--hot) 16%, transparent);
  border-style:solid;border-color:var(--hot);transform:translateY(-1px);
}
.jw-prompt:active{transform:translateY(0)}

/* -------------------------------------------------------- the ruled paper */

.jw-paper{
  position:relative;
  border:1px solid var(--jpaper-edge);
  border-radius:12px;
  background:var(--jpaper);
  overflow:hidden;
}
/* the margin rule down the left, like real paper */
.jw-paper::before{
  content:"";position:absolute;top:0;bottom:0;left:calc(var(--jgutter) - 14px);
  width:1.5px;background:var(--jmargin);
}

/* #jText carries an id rule in base.css, so the pad is selected through the
   view's id to outrank it and the day-theme textarea rule. */
#v-journal .jw-pad{
  display:block;width:100%;border:0;outline:none;resize:none;
  background-color:transparent;
  color:var(--jink);
  font:600 16px/var(--jrule) var(--sans);
  /* 9px of head room puts the first baseline exactly on the first rule */
  padding:9px 18px 14px var(--jgutter);
  /* wide screens keep the rules edge to edge but stop the text at a measure
     a person can actually read */
  padding-right:max(18px, calc(100% - var(--jgutter) - var(--jmeasure)));
  min-height:calc(var(--jrule) * 8 + 23px);
  overflow:hidden;                 /* it grows instead of scrolling */
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--jrule) - 1.5px),
    var(--jline) calc(var(--jrule) - 1.5px),
    var(--jline) var(--jrule));
  background-attachment:local;     /* rules travel with the words */
}
#v-journal .jw-pad::placeholder{color:var(--dim);font-weight:600}
#v-journal .jw-pad:focus{outline:none}
.jw-paper:focus-within{border-color:color-mix(in srgb, var(--hot) 55%, var(--jpaper-edge))}

.jw-meta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:8px 2px 0;font:700 11px/1.4 var(--mono);color:var(--mute);
}
.jw-count{letter-spacing:.6px}
.jw-left{color:var(--hot)}
.jw-draft{margin-left:auto;color:var(--good);transition:opacity .3s}
.jw-draft[hidden]{display:none}

/* --------------------------------------------------- voice, photo, video */

.jw-add{
  margin-top:14px;padding:14px;border-radius:12px;
  border:1px solid color-mix(in srgb, var(--hot) 28%, var(--line));
  background:color-mix(in srgb, var(--hot) 5%, transparent);
}
.jw-add h4{
  display:flex;align-items:center;gap:8px;
  font:800 11px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--hot);
}
.jw-add h4 i{color:var(--hot);line-height:0}
.jw-add > .sub{margin:7px 0 0;font-size:12.5px;max-width:74ch}

/* media.js draws inside #journalMediaRoot. Its own file styles the cards and
   the recorder; this only gives the three ways in the size they deserve. */
.jw-add #journalMediaRoot .jm-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;
}
.jw-add #journalMediaRoot .jm-btn{
  padding:16px 12px;font:800 14px/1.2 var(--sans);
  background:var(--panel);border-color:color-mix(in srgb, var(--hot) 32%, var(--line));
}
.jw-add #journalMediaRoot .jm-btn:hover{border-color:var(--hot);color:var(--hot)}
.jw-add #journalMediaRoot .jm-hint{grid-column:1 / -1;flex:none;margin-top:2px}

.jw-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.jw-tools select{
  padding:12px 14px;border-radius:11px;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);font:700 14px var(--sans);
}
.jw-save{margin-left:auto;padding:14px 28px;font-size:15px}

/* ------------------------------------------------------------- the day row */

.jday{display:grid;grid-template-columns:auto minmax(320px,1fr);gap:16px;margin-bottom:16px;align-items:start}
.jday .card{margin:0}
.jday .days{max-width:296px}
/* .t (trained) is lit by base.css. This is the quieter day: nothing was
   tracked, but they came back and wrote something down. */
.jday .days span.w{
  background:color-mix(in srgb, var(--hot) 7%, transparent);
  border-color:color-mix(in srgb, var(--hot) 38%, var(--line));
  border-style:dashed;color:var(--mute);
}
.jday .sub{font-size:12.5px}
/* The first column is auto, so it is sized by whatever is widest in the card.
   Hold the line under the squares to the width of the squares, or it drags the
   column out and squeezes the body log next to it. */
.jday .days ~ .sub{max-width:296px}
.jplain{
  margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.6;color:var(--mute);
}

/* ----------------------------------------------------- everything logged */

.jf-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.jf-head h3{margin:0}
.jf-count{font:700 11px/1.4 var(--mono);color:var(--dim);letter-spacing:.6px}

/* it used to be a 70vh scroller beside the writing box. It is the page now. */
.jf .jlist{display:block;max-height:none;overflow:visible}

.jf-day{
  margin:20px 0 10px;padding-bottom:7px;
  font:800 11px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--hot);
  border-bottom:1px solid var(--line);
}
.jf-day:first-child{margin-top:0}

.jf .jentry{
  padding:16px 44px 16px 26px;margin-bottom:10px;border-radius:14px;
  background:var(--jpaper);border-color:var(--jpaper-edge);
}
.jf .jentry::after{             /* the same margin rule as the writing page */
  content:"";position:absolute;top:10px;bottom:10px;left:16px;width:1.5px;
  background:var(--jmargin);opacity:.55;
}
.jf .je-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.jf .je-head .k{margin-bottom:0}
.je-mood{
  font:800 9px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;
  padding:4px 7px;border-radius:999px;
  background:color-mix(in srgb, var(--grape) 16%, transparent);color:var(--grape);
}
.je-time{margin-left:auto;font:700 10px/1 var(--mono);color:var(--dim);letter-spacing:.6px}
.jf .jentry .you{font-size:13px;color:var(--mute);margin-bottom:8px;font-style:italic}

.je-tx{position:relative;font-size:15px;line-height:26px;color:var(--ink)}
.je-tx p{
  font-size:inherit;line-height:inherit;color:inherit;
  white-space:pre-wrap;word-break:break-word;max-width:78ch;
}
/* a player's own entry sits on ruled paper too: same trick, 26px period.
   7.5px of head room lands the first baseline on the first rule. */
.je-tx.ruled{
  padding:7.5px 0 6px;
  background-image:repeating-linear-gradient(
    to bottom,transparent 0,transparent 24.5px,var(--jline) 24.5px,var(--jline) 26px);
}
.je-tx.clip{max-height:312px;overflow:hidden}
.je-tx.clip::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:70px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--jpaper));
}
.je-more{
  margin-top:8px;padding:6px 0;
  font:800 10px/1 var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:var(--cool);
}
.je-more:hover{color:var(--hot)}
.jf .jentry small{margin-top:10px}
.jf .jentry .x{right:14px;top:14px}

/* attachments read bigger here than in the pending strip: this is the part
   the player came back to look at */
.jf .jm-att{gap:12px;margin-top:12px}
.jf .jm-a img{width:168px;height:126px;border-radius:12px}
.jf .jm-a figcaption{max-width:168px}
.jf .jm-a.audio,.jf .jm-a.video{flex:1 1 260px;max-width:420px}
.jf .jm-play{padding:12px 14px;font-size:13.5px}
.jf video.jm-player{max-height:340px}

.jf-more{margin-top:14px}
.jf-empty{font-size:14px;line-height:1.65;color:var(--mute);max-width:70ch}

/* ------------------------------------------------------------- narrow page */

@media(max-width:900px){
  .jday{grid-template-columns:1fr}
  .jday .days{max-width:none}
}
@media(max-width:620px){
  #v-journal{--jrule:28px;--jgutter:40px}
  #v-journal .jw-pad{font-size:15.5px;min-height:calc(var(--jrule) * 6 + 23px);padding-right:16px}
  .jw-paper::before{left:calc(var(--jgutter) - 12px)}
  /* The starters keep wrapping here. A one line scroller reads better on a
     phone but its min-content width is the whole row, and the shell's grid
     column is sized from min-content, so it drags the page sideways. */
  .jw-prompts{gap:6px;margin-bottom:12px}
  .jw-prompt{font-size:12.5px;padding:8px 12px}
  .jw-add{padding:12px}
  .jw-add #journalMediaRoot .jm-row{grid-template-columns:1fr}
  .jw-add #journalMediaRoot .jm-btn{padding:13px 12px}
  .jw-save{margin-left:0;flex:1}
  .jw-tools select{flex:1}
  .jf .jentry{padding:14px 40px 14px 24px}
  .jf .jm-a img{width:124px;height:94px}
  .jf .jm-a figcaption{max-width:124px}
}