/* TaskEye website: the drawn sample screens of "Follow one task": the
   manager's web portal (.desk), the employee's phone (.phone), and the
   status pills and counts they share. Sized in em, from the field service demo. */

.screen {
    min-width: 0;
    border: 1px solid var(--line-strong);
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 1.4em 2.6em -1.6em rgb(23 33 51 / 0.45);
}

.screen p,
.screen ul,
.screen ol,
.screen dl,
.screen dd {
    margin: 0;
    padding: 0;
    list-style: none;
}

.desk {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border-radius: 0.6em;
}

.desk-bar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0.55em 1em;
    background: var(--ink);
    color: #ffffff;
    font-size: 0.875em;
    font-weight: 600;
}

.desk-brand,
.phone-app {
    font-family: var(--display);
    font-size: 1.15em;
    font-weight: 800;
}

.desk-title {
    color: #c9d3e3;
    font-weight: 500;
}

.desk-clock {
    margin-left: auto;
    font-family: var(--mono);
    font-weight: 500;
}

.desk-side {
    display: grid;
    align-content: start;
    gap: 0.15em;
    padding: 0.9em 0.55em !important;
    border-right: 1px solid var(--line);
    background: var(--board);
    color: var(--ink-soft);
    font-size: 0.8em;
}

.desk-side li {
    padding: 0.35em 0.75em;
    border-radius: 0.3em;
}

.desk-side .is-here {
    background: var(--blue);
    color: #ffffff;
    font-weight: 700;
}

.desk-main {
    display: grid;
    align-content: start;
    gap: 0.85em;
    min-width: 0;
    padding: 0.95em;
}

@container (max-width: 40rem) {
    .desk-side {
        display: none !important;
    }

    .desk-main {
        grid-column: 1 / -1;
    }
}

.counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6em;
}

.count {
    display: grid;
    align-content: start;
    gap: 0.1em;
    padding: 0.5em 0.7em;
    border: 1px solid var(--line);
    border-top: 0.3em solid var(--st);
    border-radius: 0.35em;
    background: var(--white);
}

.count-n {
    font-family: var(--display);
    font-size: 2.1em;
    font-weight: 800;
    line-height: 1;
}

.count-label {
    color: var(--ink-soft);
    font-size: 0.85em;
}

.count-task {
    justify-self: start;
    margin-top: 0.3em;
    padding: 0.05em 0.45em;
    border: 1px dashed var(--st-ink);
    border-radius: 0.25em;
    background: var(--st-soft);
    color: var(--st-ink);
    font-family: var(--mono);
    font-size: 0.75em;
    font-weight: 600;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.1em 0.65em;
    border: 1px solid var(--st);
    border-radius: 999px;
    background: var(--st-soft);
    color: var(--st-ink);
    font-size: 0.8em;
    font-weight: 700;
    white-space: nowrap;
}

.pill::before {
    content: "";
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: var(--st);
}

.task-panel {
    display: grid;
    gap: 0.7em;
    padding: 0.85em 0.95em;
    border: 1px solid var(--line);
    border-radius: 0.4em;
    background: var(--white);
}

.task-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
}

.task-facts {
    display: grid;
    gap: 0.25em;
    font-size: 0.9em;
}

.task-facts div {
    display: grid;
    grid-template-columns: 7.5em minmax(0, 1fr);
    gap: 0.5em;
}

.task-facts dt {
    color: var(--ink-soft);
}

.task-log {
    display: grid;
    gap: 0.35em;
    padding-top: 0.6em !important;
    border-top: 1px dashed var(--line);
    font-size: 0.85em;
}

.task-log li {
    display: grid;
    grid-template-columns: 4.8em minmax(0, 1fr);
    gap: 0.5em;
}

.task-log time {
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.92em;
}

.task-log .log-done span {
    color: var(--green-hover);
    font-weight: 700;
}

.desk-report {
    display: grid;
    gap: 0.5em;
    padding: 0.85em 0.95em;
    border: 1px solid var(--line);
    border-radius: 0.4em;
    background: var(--board);
}

.desk-report__title {
    display: flex;
    gap: 0.4em;
    align-items: center;
    font-weight: 700;
}

.bars {
    display: grid;
    gap: 0.35em;
}

.bar {
    display: block;
    width: calc(var(--n) * 12%);
    min-width: 9em;
    padding: 0.2em 0.6em;
    border-radius: 0.25em;
    background: var(--st);
    color: var(--st-ink);
    font-size: 0.8em;
    font-weight: 700;
}

.bar[data-state="upcoming"],
.bar[data-state="completed"] {
    color: #ffffff;
}

/* The employee's phone. */
.phone {
    display: grid;
    grid-template-rows: auto auto 1fr;
    overflow: hidden;
    border: 0.5em solid var(--ink);
    border-radius: 1.9em;
}

.phone-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45em 1.2em 0.3em;
    font-family: var(--mono);
    font-size: 0.75em;
    font-weight: 600;
}

.phone-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    padding: 0.55em 0.95em;
    background: var(--blue);
    color: #ffffff;
    font-size: 0.85em;
    font-weight: 600;
}

.phone-body {
    display: grid;
    align-content: start;
    gap: 0.75em;
    min-height: 24rem;
    padding: 0.85em;
    background: var(--board);
}

.phone-title {
    font-family: var(--display);
    font-size: 1.35em;
    font-weight: 800;
    line-height: 1.05;
}

.note-card {
    display: grid;
    gap: 0.2em;
    padding: 0.75em 0.85em;
    border-left: 0.3em solid var(--blue);
    border-radius: 0.5em;
    background: var(--white);
    box-shadow: 0 0.6em 1.2em -0.8em rgb(23 33 51 / 0.5);
    font-size: 0.92em;
}

.note-card--done {
    border-left-color: var(--green);
}

.note-card__app {
    display: flex;
    gap: 0.35em;
    align-items: center;
    color: var(--ink-soft);
    font-size: 0.85em;
}

.note-card__title {
    font-weight: 800;
}

.task-list {
    display: grid;
    gap: 0.45em;
}

.task-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    padding: 0.6em 0.7em;
    border-radius: 0.4em;
    background: var(--white);
    font-size: 0.92em;
}

.check-in,
.task-card {
    display: grid;
    justify-items: start;
    gap: 0.6em;
    padding: 0.85em;
    border-radius: 0.5em;
    background: var(--white);
}

.face-frame {
    display: grid;
    place-items: center;
    justify-self: center;
    width: 8.5em;
    height: 8.5em;
    border: 2px dashed var(--blue);
    border-radius: 50%;
    background: var(--blue-soft);
    color: var(--blue-ink);
}

.face-frame .icon {
    width: 4.5em;
    height: 4.5em;
    stroke-width: 1.2;
}

.chip {
    display: inline-flex;
    gap: 0.35em;
    align-items: center;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green-hover);
    font-size: 0.85em;
    font-weight: 700;
}

.check-in .button {
    justify-self: stretch;
}

.ticks {
    display: grid;
    gap: 0.35em;
}

.ticks li,
.phone-done {
    display: flex;
    gap: 0.45em;
    align-items: center;
    color: var(--green-hover);
    font-weight: 700;
}

.check-in__done {
    color: var(--ink-soft);
    font-size: 0.9em;
}

.progress-note,
.expense-line {
    font-size: 0.9em;
}

.expense-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    align-items: center;
}

.thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;
    width: 100%;
}

.thumb {
    display: grid;
    place-items: end start;
    aspect-ratio: 4 / 3;
    padding: 0.35em 0.5em;
    border-radius: 0.35em;
    background:
        linear-gradient(160deg, rgb(255 255 255 / 0) 55%, rgb(23 33 51 / 0.4)),
        repeating-linear-gradient(0deg, #c8d4e6 0 0.5em, #dbe4f1 0.5em 1em);
    color: #ffffff;
    font-size: 0.75em;
    font-weight: 700;
}

.thumb--after {
    background:
        linear-gradient(160deg, rgb(255 255 255 / 0) 55%, rgb(23 33 51 / 0.4)),
        linear-gradient(90deg, #f3f6fb 0 40%, #b7c6dc 40% 44%, #f3f6fb 44%);
}