/* The diary film, in the Services section: the appointment diary on the tablet at the desk, from the scheduling design
   (Claude Design project "EPOS Scheduling", screen 1a: the day view with a column per person and the booking panel
   open). Redrawn for the demo salon in the Path colours, with three people rather than four and larger type than
   the Register's, so it reads at the size the page gives it. The tablet comes from floor.css and the top bar from the
   till in hero.css; this file adds the diary.
   Every selector starts with .floor.diary; see the class-name note in hero.css. 1em = 1% of the screen width. */

.floor.diary.cut .till { opacity: 0; }

/* ---- Under the top bar: the title, Day and Week, the date buttons, and New booking ---- */
.floor.diary .d-sub { flex: none; height: 6.4em; background: #fff; border-bottom: .06em solid #E3E8E4; display: flex; align-items: center; gap: .9em; padding: 0 1.45em; white-space: nowrap; }
.floor.diary .d-ttl { display: flex; flex-direction: column; gap: .25em; margin-right: .5em; }
.floor.diary .d-ttl b { font: 600 2.05em/1 var(--pp-font-display); color: #1A1F1B; letter-spacing: -.01em; }
.floor.diary .d-ttl span { font-size: .85em; color: #5C6660; }
.floor.diary .d-rule { width: .06em; height: 3em; background: #E3E8E4; flex: none; }
.floor.diary .d-seg { height: 3em; padding: 0 1.1em; border-radius: .55em; background: #F1F4F1; display: inline-flex; align-items: center; }
.floor.diary .d-seg b { font: 600 1em/1 var(--pp-font-display); color: #5C6660; }
.floor.diary .d-seg.on { background: #1A1F1B; } .floor.diary .d-seg.on b { color: #fff; }
.floor.diary .d-nav { width: 3em; height: 3em; border-radius: .55em; background: #F1F4F1; display: grid; place-items: center; color: #1A1F1B; flex: none; }
.floor.diary .d-nav svg { width: 1.1em; height: 1.1em; }
.floor.diary .d-today { height: 3em; padding: 0 1em; border-radius: .55em; background: #F1F4F1; display: inline-flex; align-items: center; }
.floor.diary .d-today b { font: 600 1em/1 var(--pp-font-display); color: #1A1F1B; }
.floor.diary .d-grow { flex: 1; }
.floor.diary .d-pill { height: 2.6em; padding: 0 .9em; border-radius: .45em; display: inline-flex; align-items: center; gap: .5em; }
.floor.diary .d-pill i { width: .45em; height: .45em; border-radius: 50%; background: currentColor; }
.floor.diary .d-pill span { font-size: .9em; font-weight: 600; }
.floor.diary .d-pill.d-waiting { background: #E8F1F7; color: #2C6E8F; }
.floor.diary .d-pill.d-requests { background: #FBF1DE; color: #8A5A12; }
.floor.diary .d-btn { height: 3.3em; padding: 0 1.2em; border-radius: .55em; display: inline-flex; align-items: center; gap: .55em; transition: transform .18s var(--pp-ease), filter .18s var(--pp-ease); }
.floor.diary .d-btn b { font: 600 1em/1 var(--pp-font-display); }
.floor.diary .d-btn svg { width: 1em; height: 1em; }
.floor.diary .d-btn.d-walk { background: #fff; box-shadow: inset 0 0 0 .08em #CFD6D1; color: #1A1F1B; }
.floor.diary .d-btn.d-new { background: #1A1F1B; color: #fff; }

/* ---- The day: a column per person, the hours down the side ---- */
.floor.diary .d-main { flex: 1; min-height: 0; display: flex; }
.floor.diary .d-grid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.floor.diary .d-heads { flex: none; height: 5.6em; display: flex; border-bottom: .06em solid #E3E8E4; background: #fff; }
.floor.diary .d-gut { flex: none; width: 5.2em; }
.floor.diary .d-head { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75em; padding: 0 .9em; border-left: .06em solid #E3E8E4; }
.floor.diary .d-av { width: 3em; height: 3em; border-radius: .6em; display: grid; place-items: center; color: #fff; flex: none; }
.floor.diary .d-av b { font: 700 .95em/1 var(--pp-font-display); }
.floor.diary .d-who { min-width: 0; display: flex; flex-direction: column; gap: .15em; }
.floor.diary .d-who b { font: 600 1.35em/1.1 var(--pp-font-display); color: #1A1F1B; }
.floor.diary .d-who span { font-size: .78em; color: #5C6660; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floor.diary .d-body { flex: 1; min-height: 0; position: relative; display: flex; overflow: hidden; }
.floor.diary .d-times { flex: none; width: 5.2em; position: relative; }
.floor.diary .d-tl { position: absolute; left: 0; right: .8em; text-align: right; transform: translateY(-50%); line-height: 1; }
.floor.diary .d-tl span { font-size: .85em; font-weight: 500; color: #5C6660; font-variant-numeric: tabular-nums; }
.floor.diary .d-cols { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
.floor.diary .d-col { position: relative; border-left: .06em solid #E3E8E4; }
.floor.diary .d-hr { position: absolute; left: 0; right: 0; height: 0; border-top: .06em solid #E3E8E4; }
.floor.diary .d-hr.d-half { border-top-style: dashed; opacity: .55; }
.floor.diary .d-off { position: absolute; left: 0; right: 0; top: 0; background: repeating-linear-gradient(135deg, #ECEEE8 0 .45em, #F3F4EF .45em .9em); display: grid; place-items: center; }
.floor.diary .d-off span { font-size: .85em; font-weight: 600; color: #5C6660; }
/* the time now: a line across the day, and its time in the margin */
.floor.diary .d-now { position: absolute; left: 0; right: 0; height: .16em; margin-top: -.08em; background: #2C6E8F; z-index: 3; }
.floor.diary .d-np { position: absolute; left: .35em; transform: translateY(-50%); background: #2C6E8F; color: #fff; border-radius: .4em; padding: .32em .5em; line-height: 1; z-index: 4; }
.floor.diary .d-np b { font-size: .8em; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- A booking. --c is the person's colour, --cs a wash of it. Done is grey, started is solid, arrived is washed
   and outlined, confirmed and unconfirmed carry a bar, a request is amber and a gap the waiting list wants is blue. ---- */
.floor.diary .d-bk { position: absolute; left: .45em; right: .45em; border-radius: .55em; padding: .55em .75em; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; gap: .2em; background: #fff; box-shadow: inset 0 0 0 .07em #CFD6D1; transition: background-color .35s var(--pp-ease), box-shadow .35s var(--pp-ease), outline-color .6s var(--pp-ease); }
.floor.diary .d-bk .d-r1 { display: flex; justify-content: space-between; gap: .5em; align-items: baseline; }
.floor.diary .d-bk .d-r1 b { font: 600 1.1em/1.15 var(--pp-font-display); color: #1A1F1B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.floor.diary .d-bk .d-r1 em { font-style: normal; font-size: .82em; font-weight: 600; color: #1A1F1B; font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; gap: .3em; }
.floor.diary .d-bk .d-r1 em svg { width: 1em; height: 1em; }
.floor.diary .d-bk .d-r2 { font-size: .8em; color: #5C6660; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floor.diary .d-bk .d-tag { align-self: flex-start; margin-top: .2em; font-size: .72em; font-weight: 700; padding: .25em .6em; border-radius: .35em; background: var(--c); color: #fff; }
.floor.diary .d-bk.d-conf, .floor.diary .d-bk.d-unconf { box-shadow: inset .32em 0 0 var(--c), inset 0 0 0 .07em #CFD6D1; padding-left: 1em; }
.floor.diary .d-bk.d-done { background: #EDEFEA; box-shadow: none; }
.floor.diary .d-bk.d-done .d-r1 b, .floor.diary .d-bk.d-done .d-r1 em { color: #5C6660; }
.floor.diary .d-bk.d-started { background: var(--c); box-shadow: none; }
.floor.diary .d-bk.d-started .d-r1 b, .floor.diary .d-bk.d-started .d-r1 em, .floor.diary .d-bk.d-started .d-r2 { color: #fff; }
.floor.diary .d-bk.d-arrived { background: var(--cs); box-shadow: inset 0 0 0 .14em var(--c); }
.floor.diary .d-bk.d-sel { outline: .2em solid #1A1F1B; outline-offset: .12em; }
.floor.diary .d-bk.d-req { background: #FBF1DE; box-shadow: none; border: .09em dashed #C9923E; }
.floor.diary .d-bk.d-req .d-r1 b, .floor.diary .d-bk.d-req .d-r1 em, .floor.diary .d-bk.d-req .d-r2 { color: #8A5A12; }
.floor.diary .d-bk.d-break { background: transparent; box-shadow: none; border: .09em dashed #CFD6D1; display: grid; place-items: center; }
.floor.diary .d-bk.d-break span { font-size: .8em; font-weight: 600; color: #5C6660; white-space: nowrap; }
.floor.diary .d-bk.d-gap { background: #E8F1F7; box-shadow: none; border: .09em dashed #8DB3CA; }
.floor.diary .d-bk.d-gap .d-r1 b, .floor.diary .d-bk.d-gap .d-r1 em { color: #2C6E8F; }
.floor.diary .d-bk .d-offer { position: absolute; right: .6em; bottom: .6em; height: 2.2em; padding: 0 .8em; border-radius: .45em; background: #1A1F1B; color: #fff; display: inline-flex; align-items: center; }
.floor.diary .d-bk .d-offer b { font: 600 .8em/1 var(--pp-font-display); }
/* a walk-in dropping into the day */
.floor.diary .d-bk.d-drop { animation: diaryDrop .5s var(--pp-ease); outline: .25em solid rgba(0,186,188,.55); outline-offset: .15em; }
.floor.diary .d-bk.d-drop.d-settled { outline-color: rgba(0,186,188,0); }
@keyframes diaryDrop { from { opacity: 0; transform: translateY(-.8em); } to { opacity: 1; transform: none; } }

/* ---- The booking panel ---- */
.floor.diary .d-panel { flex: none; width: 34em; background: #fff; border-left: .06em solid #E3E8E4; box-shadow: -.1em 0 .5em rgba(26,31,27,.07); display: flex; flex-direction: column; padding: 1.3em 1.45em; gap: .9em; box-sizing: border-box; position: relative; z-index: 5; }
.floor.diary .p-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; }
.floor.diary .p-head b { font: 600 1.8em/1.1 var(--pp-font-display); color: #1A1F1B; display: block; letter-spacing: -.01em; }
.floor.diary .p-head .p-sub { font-size: .8em; color: #5C6660; display: block; margin-top: .3em; }
.floor.diary .p-x { width: 2.8em; height: 2.8em; border-radius: .6em; background: #F1F4F1; display: grid; place-items: center; flex: none; color: #1A1F1B; }
.floor.diary .p-x svg { width: 1.05em; height: 1.05em; }
.floor.diary .p-alert { background: #FBF1DE; box-shadow: inset 0 0 0 .07em #EBD2A6; color: #8A5A12; border-radius: .6em; padding: .7em .85em; display: flex; gap: .6em; align-items: flex-start; }
.floor.diary .p-alert svg { width: 1.15em; height: 1.15em; flex: none; margin-top: .05em; }
.floor.diary .p-alert span { font-size: .8em; line-height: 1.4; }
.floor.diary .p-alert b { font-family: var(--pp-font-body); font-weight: 700; }
.floor.diary .p-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35em; }
.floor.diary .p-steps span { height: 3.3em; border-radius: .45em; background: #F1F4F1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #5C6660; text-align: center; line-height: 1.2; transition: background-color .35s var(--pp-ease), color .35s var(--pp-ease), box-shadow .35s var(--pp-ease); }
.floor.diary .p-steps b { font-family: var(--pp-font-body); font-size: .78em; font-weight: 700; }
.floor.diary .p-steps small { font-size: .62em; white-space: nowrap; }
.floor.diary .p-steps .p-did { background: #1A1F1B; color: #fff; }
.floor.diary .p-steps .p-now { background: #E8F1F7; color: #2C6E8F; box-shadow: inset 0 0 0 .08em #8DB3CA; }
.floor.diary .p-svc { border-radius: .7em; box-shadow: inset 0 0 0 .07em #E3E8E4; padding: .1em .95em; }
.floor.diary .p-line { display: flex; gap: .85em; align-items: baseline; padding: .7em 0; }
.floor.diary .p-line + .p-line { border-top: .06em solid #E3E8E4; }
.floor.diary .p-line .p-t { width: 3em; font-size: .85em; color: #5C6660; font-variant-numeric: tabular-nums; flex: none; }
.floor.diary .p-line .p-n { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15em; }
.floor.diary .p-line .p-n b { font: 600 1.05em/1.2 var(--pp-font-display); color: #1A1F1B; }
.floor.diary .p-line .p-n span { font-size: .75em; color: #5C6660; }
.floor.diary .p-line .p-pr { font: 600 1.05em/1.2 var(--pp-font-display); color: #1A1F1B; font-variant-numeric: tabular-nums; }
.floor.diary .p-tot { background: #F7F9F7; border-radius: .7em; padding: .8em .95em; display: flex; flex-direction: column; gap: .35em; }
.floor.diary .p-tot .p-row { display: flex; justify-content: space-between; }
.floor.diary .p-tot .p-row span { font-size: .8em; color: #5C6660; font-variant-numeric: tabular-nums; }
.floor.diary .p-tot .p-row.p-dep span { color: #007E80; font-weight: 500; }
.floor.diary .p-tot .p-rule { border-top: .08em dashed #CFD6D1; margin: .25em 0; }
.floor.diary .p-tot .p-due { display: flex; justify-content: space-between; align-items: flex-end; }
.floor.diary .p-tot .p-due span { font-size: .95em; font-weight: 600; color: #1A1F1B; padding-bottom: .25em; }
.floor.diary .p-tot .p-due b { font: 700 3em/1 var(--pp-font-display); color: #1A1F1B; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.floor.diary .p-note { border-radius: .7em; box-shadow: inset 0 0 0 .07em #E3E8E4; padding: .75em .95em; display: flex; flex-direction: column; gap: .25em; }
.floor.diary .p-note b { font-family: var(--pp-font-body); font-size: .8em; font-weight: 700; color: #1A1F1B; }
.floor.diary .p-note span { font-size: .8em; color: #1A1F1B; line-height: 1.4; }
.floor.diary .p-acts { margin-top: auto; display: flex; gap: .55em; }
.floor.diary .p-acts span { height: 3.5em; border-radius: .6em; background: #F1F4F1; display: inline-flex; align-items: center; justify-content: center; padding: 0 1.05em; color: #5C6660; white-space: nowrap; animation: diaryFade .3s var(--pp-ease); transition: transform .18s var(--pp-ease), filter .18s var(--pp-ease); }
.floor.diary .p-acts span b { font: 600 .95em/1 var(--pp-font-display); }
.floor.diary .p-acts .p-go { flex: 1; background: #1A1F1B; color: #fff; gap: .55em; }
.floor.diary .p-acts .p-go svg { width: .95em; height: .95em; }
@keyframes diaryFade { from { opacity: 0; } to { opacity: 1; } }
.floor.diary .d-pressed { transform: scale(.96); filter: brightness(.88); }

/* ---- The same diary, as a still, on a photographed screen in the Hardware section: a 1000 px wide drawing bent onto
   the screen's four corners. --bend is the matrix for the photograph at 1000 px wide, and --k, set by diary.js, is the
   photograph's real width over 1000. The sheen is the photograph's light on the glass, not a brand gradient.
   .on-desk  img/hardware/front-desk.jpg; corners measured on the 2688 px original (SCREEN, design/sections/services/build.py)
   ---- */
.floor.diary.desk-screen { position: absolute; left: 0; top: 0; width: 1000px; height: 700px; aspect-ratio: auto; overflow: hidden; border-radius: 1.2%; transform-origin: 0 0; transform: scale(var(--k, .5)) var(--bend); }
.floor.diary.desk-screen.on-desk { --bend: matrix3d(0.103962,-0.014010,0,-0.00014728,-0.144232,0.172143,0,-0.00009733,0,0,1,0,511.753,295.670,0,1); }
.floor.diary.desk-screen .tablet { height: 100%; padding: 0; background: none; border-radius: 0; box-shadow: none; }
.floor.diary.desk-screen .tscreen { height: 100%; aspect-ratio: auto; border-radius: 0; }
.floor.diary.desk-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(155deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 45%, rgba(20,24,22,.06) 100%); }