:root {
    --bg: #f2f6f3;
    --surface: #ffffff;
    --surface-soft: #f7faf8;

    --text: #18231c;
    --muted: #77817a;

    --green: #168144;
    --green-dark: #0f6837;
    --green-soft: #e8f5ec;
    --green-border: #c5e3cd;

    --blue: #376ea8;
    --blue-soft: #edf4fb;
    --blue-border: #cbdced;

    --orange: #d67a19;
    --orange-soft: #fff4e8;
    --orange-border: #efc995;

    --red: #c94348;
    --red-soft: #fff1f2;
    --red-border: #edb9bc;

    --gray-pill: #eef2ef;
    --recent-gray: #edf0ee;

    --line: rgba(32, 69, 44, .11);

    --shadow:
        0 7px 24px rgba(26, 53, 34, .055);

    --shadow-floating:
        0 15px 42px rgba(20, 43, 27, .14);

    --radius: 25px;

    --nav-height: 72px;

    --shift-bottom-clearance: 120px;
}


/* =========================================================
   BASE
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    color: var(--text);
    background: var(--bg);

    font-family:
        "Montserrat",
        system-ui,
        sans-serif;

    -webkit-font-smoothing: antialiased;
}

button,
input,
select {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

ion-icon {
    pointer-events: none;
}

.hidden {
    display: none !important;
}

.app {
    width: min(640px, 100%);
    min-height: 100vh;

    margin: auto;

    padding:
        22px
        15px
        0;
}


/* =========================================================
   START
========================================================= */

#start-screen {
    padding-bottom: 40px;
}

.start-header {
    padding:
        16px
        4px
        27px;
}

.app-logo {
    display: grid;
    place-items: center;

    width: 49px;
    height: 49px;

    margin-bottom: 19px;

    border-radius: 18px;

    color: white;
    background: var(--green);

    font-size: 26px;

    box-shadow:
        0 9px 22px rgba(20,131,66,.20);
}

.start-header h1 {
    margin: 0;

    font-size: 28px;
    font-weight: 800;

    letter-spacing: -.7px;
}

.start-header p {
    margin: 7px 0 0;

    color: var(--muted);

    font-size: 13px;
    font-weight: 500;
}

.start-menu {
    display: grid;
    gap: 12px;
}

.start-button {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 82px;

    padding: 14px 16px;

    border:
        1px
        solid
        var(--line);

    border-radius: var(--radius);

    color: var(--text);
    background: var(--surface);

    box-shadow: var(--shadow);

    text-align: left;

    cursor: pointer;
}

.start-button:active {
    transform: translateY(1px);
}

.start-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    margin-right: 14px;

    border-radius: 18px;

    color: var(--green);
    background: var(--green-soft);

    font-size: 23px;
}

.start-text {
    min-width: 0;
    flex: 1;
}

.start-text strong {
    display: block;

    font-size: 14px;
    font-weight: 750;
}

.start-text small {
    display: block;

    margin-top: 5px;

    color: var(--muted);

    font-size: 10.5px;
    font-weight: 500;
}

.start-arrow,
.lock-icon {
    color: #9aa49d;
    font-size: 19px;
}

.config-button {
    margin-top: 10px;
}


/* =========================================================
   SHIFT / TOPBAR
========================================================= */

#shift-screen {
    padding-top:
        calc(
            75px +
            env(safe-area-inset-top)
        );

    padding-bottom:
        var(--shift-bottom-clearance);

    transition:
        padding-bottom
        .20s
        ease;
}

.shift-header {
    position: fixed;

    left: 50%;

    top:
        calc(
            12px +
            env(safe-area-inset-top)
        );

    z-index: 30;

    display: flex;
    align-items: center;

    gap: 12px;

    width:
        min(
            616px,
            calc(100% - 24px)
        );

    min-height: 64px;

    margin: 0;

    padding:
        8px
        12px;

    transform:
        translateX(-50%);

    border:
        1px
        solid
        rgba(41,72,51,.10);

    border-radius: 25px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        var(--shadow-floating);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}

.back-button {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 43px;
    height: 43px;

    padding: 0;

    border:
        1px
        solid
        var(--line);

    border-radius: 16px;

    color: var(--text);

    background:
        rgba(248,250,248,.95);

    font-size: 21px;

    cursor: pointer;
}

.back-button:active {
    transform: scale(.94);

    background:
        var(--green-soft);
}

.shift-title {
    min-width: 0;
    flex: 1;
}

.shift-title h1 {
    margin: 0;

    font-size: 18px;
    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -.35px;
}

#app-clock {
    margin-top: 4px;

    overflow: hidden;

    color: var(--muted);

    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 9.5px;
    font-weight: 500;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   TABS
========================================================= */

#tab-content.tab-fade {
    animation:
        tabFade
        .14s
        ease;
}

.tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin:
        0
        4px
        13px;
}

.tab-header h2 {
    margin: 0;

    font-size: 17px;
    font-weight: 800;

    letter-spacing: -.35px;
}

.tab-counter {
    display: grid;
    place-items: center;

    min-width: 28px;
    height: 28px;

    padding: 0 9px;

    border-radius: 999px;

    color: var(--muted);

    background:
        rgba(255,255,255,.75);

    font-size: 10px;
    font-weight: 700;
}

.task-list {
    display: grid;
    gap: 10px;
}


/* =========================================================
   SHELL / COLLAPSE
========================================================= */

.task-shell {
    display: grid;

    grid-template-rows: 1fr;

    opacity: 1;

    transition:
        grid-template-rows .20s ease,
        opacity .16s ease,
        margin .20s ease;
}

.task-shell > .task-card {
    min-height: 0;
}

.task-shell.entering {
    animation:
        taskExpand
        .22s
        ease
        both;
}

.task-shell.leaving {
    grid-template-rows: 0fr;

    margin-top: -10px;

    opacity: 0;
}

.task-shell.leaving > .task-card {
    border-width: 0;

    padding-top: 0;
    padding-bottom: 0;
}


/* =========================================================
   TASK CARD
========================================================= */

.task-card {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    display: flex;
    align-items: center;

    gap: 14px;

    padding:
        15px
        15px
        14px;

    border:
        1px
        solid
        var(--line);

    border-radius: var(--radius);

    background: var(--surface);

    box-shadow: var(--shadow);

    transition:
        padding .20s ease,
        border-width .20s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


/*
    Treść zawsze leży ponad animowanym
    tłem świeżo wykonanego zadania.
*/

.task-copy,
.task-icon-actions {
    position: relative;

    z-index: 2;
}


.task-copy {
    min-width: 0;
    flex: 1;
}


.task-name {
    color: var(--text);

    font-size: 15px;
    font-weight: 700;

    line-height: 1.35;

    letter-spacing: -.2px;
}


.task-pills {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 9px;
}


.task-pill {
    display: inline-flex;
    align-items: center;

    min-height: 25px;

    padding:
        0
        9px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 700;

    white-space: nowrap;
}


.task-pill.time {
    color: #59645d;

    background:
        var(--gray-pill);

    font-variant-numeric:
        tabular-nums;
}


.task-pill.priority-normal {
    color: var(--green-dark);

    background:
        var(--green-soft);
}


.task-pill.priority-high {
    color: var(--orange);

    background:
        var(--orange-soft);
}


.task-pill.priority-low {
    color: #6f7772;

    background:
        #f0f1f0;
}


.task-pill.status-overdue {
    color: var(--red);

    background:
        var(--red-soft);
}


.task-pill.status-completed {
    color: var(--green-dark);

    background:
        rgba(255,255,255,.70);
}


/* =========================================================
   HIGH / OVERDUE / FUTURE
========================================================= */

.task-card.high {
    border-color:
        var(--orange-border);

    background:
        #fffaf5;
}


.task-card.overdue {
    border-color:
        var(--red-border);

    background:
        #fffafa;
}


.task-card.future {
    background:
        rgba(255,255,255,.70);

    box-shadow: none;
}


.task-card.completed {
    background:
        rgba(255,255,255,.72);

    box-shadow: none;
}


/* =========================================================
   8-SEKUNDOWE WYGASZANIE
========================================================= */

/*
    Pod animacją jest szare tło.
*/

.task-card.recently-completed {
    background:
        var(--recent-gray);

    border-color:
        #d9dfdb;

    box-shadow: none;
}


/*
    Kolorowy layer zaczyna od 100% szerokości
    i kurczy się w stronę lewej.

    transform-origin:left oznacza:
    prawa krawędź paska wędruje w lewo.
*/

.task-card.recently-completed::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    /*
        Warstwa jest o 24 px szersza od karty.

        Ostatnie 24 px stanowi wyłącznie gradient
        granicy między kolorem a szarością.
    */

    width:
        calc(100% + 24px);

    z-index: 0;

    background:
        linear-gradient(
            to right,

            var(--recent-fill) 0,

            var(--recent-fill)
                calc(100% - 24px),

            var(--recent-fill-transparent)
                100%
        );


    /*
        Na początku gradient znajduje się dokładnie
        przy prawej krawędzi karty.

        Potem cały layer przesuwa się w lewo.
        Dzięki temu gradient ma przez całe 8 sekund
        stałą szerokość i nie odkształca się.
    */

    transform:
        translateX(-24px);

    animation:
        recentSweep
        8s
        linear
        forwards;

    animation-delay:
        var(--recent-delay, 0ms);
}


/*
    Neutralna karta:
    przed kliknięciem była biała.
*/

.task-card.recent-neutral {
    --recent-fill:
        #ffffff;

    --recent-fill-transparent:
        rgba(255,255,255,0);

    border-color:
        #d9dfdb;
}


/*
    Wysoki priorytet:
    zachowujemy pomarańczowy tint.
*/

.task-card.recent-orange {
    --recent-fill:
        #fff4e8;

    --recent-fill-transparent:
        rgba(255,244,232,0);

    border-color:
        var(--orange-border);
}


/*
    Zadanie zaległe:
    zachowujemy czerwony tint.
*/

.task-card.recent-red {
    --recent-fill:
        #fff1f2;

    --recent-fill-transparent:
        rgba(255,241,242,0);

    border-color:
        var(--red-border);
}


/* =========================================================
   TASK BUTTONS
========================================================= */

.task-icon-actions {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    gap: 7px;
}


.task-icon-button {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border:
        1px
        solid
        transparent;

    border-radius: 15px;

    cursor: pointer;

    transition:
        transform .12s ease,
        background-color .14s ease,
        border-color .14s ease;
}


.task-icon-button:active {
    transform: scale(.93);
}


.task-icon-button ion-icon {
    font-size: 23px;
}


.task-info-button {
    color: var(--blue);

    border-color:
        var(--blue-border);

    background:
        var(--blue-soft);
}


.task-complete-button {
    color: white;

    border-color:
        var(--green);

    background:
        var(--green);

    box-shadow:
        0 5px 14px
        rgba(20,131,66,.18);
}


.task-undo-button {
    color: var(--green-dark);

    border-color:
        var(--green-border);

    background:
        rgba(255,255,255,.78);
}


/* =========================================================
   EMPTY
========================================================= */

.empty-state {
    display: grid;
    justify-items: center;

    gap: 8px;

    padding:
        34px
        20px;

    border:
        1px
        dashed
        rgba(50,117,74,.18);

    border-radius:
        var(--radius);

    color:
        var(--muted);

    background:
        rgba(255,255,255,.5);

    font-size: 12px;
    font-weight: 500;
}


.empty-state ion-icon {
    color: #9caf9f;

    font-size: 29px;
}


/* =========================================================
   END SHIFT
========================================================= */

.end-card {
    padding: 20px;

    border:
        1px
        solid
        var(--line);

    border-radius:
        var(--radius);

    background:
        var(--surface);

    box-shadow:
        var(--shadow);
}


.end-card h2 {
    margin:
        0
        0
        18px;

    font-size: 19px;
    font-weight: 800;
}


.end-stats {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 9px;

    margin-bottom: 18px;
}


.end-stat {
    padding:
        14px
        6px;

    border-radius: 20px;

    background:
        var(--surface-soft);

    text-align: center;
}


.end-stat strong {
    display: block;

    font-size: 21px;
    font-weight: 800;
}


.end-stat span {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 600;
}


.end-shift-button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    width: 100%;
    min-height: 47px;

    border: 0;

    border-radius: 18px;

    color: white;
    background: var(--green);

    font-size: 11px;
    font-weight: 750;

    cursor: pointer;
}


/* =========================================================
   NAVBAR
========================================================= */

.shift-navbar {
    position: fixed;

    left: 50%;

    bottom:
        calc(
            12px +
            env(safe-area-inset-bottom)
        );

    z-index: 30;

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    width:
        min(
            616px,
            calc(100% - 24px)
        );

    height:
        var(--nav-height);

    padding: 6px;

    transform:
        translateX(-50%);

    border:
        1px
        solid
        rgba(41,72,51,.10);

    border-radius: 27px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        var(--shadow-floating);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


.shift-navbar button {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 4px;

    border: 0;

    border-radius: 20px;

    color: #89928b;

    background:
        transparent;

    font-size: 8.5px;
    font-weight: 650;

    cursor: pointer;
}


.shift-navbar ion-icon {
    font-size: 21px;
}


.shift-navbar button.active {
    color: var(--green-dark);

    background:
        var(--green-soft);
}


/* =========================================================
   DRAWER
========================================================= */

.control-drawer {
    position: fixed;

    left: 50%;

    bottom:
        calc(
            var(--nav-height)
            + 24px
            + env(safe-area-inset-bottom)
        );

    z-index: 25;

    width:
        min(
            600px,
            calc(100% - 34px)
        );

    transform:
        translateX(-50%);

    overflow: hidden;

    border:
        1px
        solid
        rgba(35,66,44,.10);

    border-radius: 27px;

    background: white;

    box-shadow:
        var(--shadow-floating);

    animation:
        drawerAppear
        .20s
        ease;
}


.control-drawer-header {
    display: flex;
    align-items: center;

    width: 100%;

    padding:
        12px
        14px;

    border: 0;

    color: var(--text);

    background:
        var(--green-soft);

    text-align: left;

    cursor: pointer;
}


.control-drawer.overdue
.control-drawer-header {
    background:
        var(--red-soft);
}


.drawer-icon {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    margin-right: 11px;

    border-radius: 14px;

    color: var(--green);

    background:
        rgba(255,255,255,.72);

    font-size: 20px;
}


.control-drawer.overdue
.drawer-icon {
    color: var(--red);
}


.drawer-header-text {
    min-width: 0;

    flex: 1;
}


.control-drawer-title {
    font-size: 12px;
    font-weight: 800;
}


.control-drawer-subtitle {
    margin-top: 3px;

    color: var(--muted);

    font-size: 9.5px;
    font-weight: 500;
}


.drawer-arrow {
    color: var(--muted);

    font-size: 18px;

    transition:
        transform .16s ease;
}


.control-drawer.open
.drawer-arrow {
    transform:
        rotate(180deg);
}


.control-drawer-body {
    display: none;

    max-height: 62vh;

    overflow-y: auto;

    padding:
        6px
        16px
        16px;

    background: white;
}


.control-drawer.open
.control-drawer-body {
    display: block;

    animation:
        drawerBodyAppear
        .16s
        ease;
}


.control-point {
    padding:
        15px
        0;

    border-bottom:
        1px
        solid
        var(--line);
}


.control-point:last-child {
    border-bottom: 0;
}


.control-description {
    font-size: 11.5px;
    font-weight: 600;

    line-height: 1.5;
}


.control-buttons {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 8px;

    margin-top: 10px;
}


.control-buttons button {
    min-height: 39px;

    border:
        1px
        solid
        var(--line);

    border-radius: 15px;

    color: var(--muted);

    background:
        var(--surface-soft);

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}


.control-buttons
.selected-ok {
    color: var(--green-dark);

    border-color: #b9d9c2;

    background:
        var(--green-soft);
}


.control-buttons
.selected-bad {
    color: var(--red);

    border-color:
        var(--red-border);

    background:
        var(--red-soft);
}


.finish-control-button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    width: 100%;
    min-height: 45px;

    margin-top: 13px;

    border: 0;

    border-radius: 17px;

    color: white;
    background: var(--green);

    font-size: 11px;
    font-weight: 750;

    cursor: pointer;
}


.finish-control-button ion-icon {
    font-size: 19px;
}


/* =========================================================
   MODAL
========================================================= */

.modal {
    position: fixed;

    inset: 0;

    z-index: 50;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding: 12px;

    background:
        rgba(18,28,21,.35);

    backdrop-filter: blur(4px);

    animation:
        modalBackdrop
        .16s
        ease;
}


.modal-box {
    width:
        min(620px,100%);

    padding:
        10px
        20px
        20px;

    border-radius: 31px;

    background: white;

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.18);

    animation:
        modalAppear
        .20s
        ease;
}


.modal-handle {
    width: 38px;
    height: 4px;

    margin:
        2px
        auto
        17px;

    border-radius: 999px;

    background: #dfe5e0;
}


.modal-title-row {
    display: flex;
    align-items: center;

    gap: 11px;
}


.modal-icon {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    border-radius: 14px;

    color: var(--green);
    background: var(--green-soft);

    font-size: 21px;
}


.modal-box h2 {
    margin: 0;

    font-size: 17px;
    font-weight: 800;
}


.modal-content {
    margin-top: 16px;

    color: #4d5a51;

    font-size: 12px;
    font-weight: 500;

    line-height: 1.65;

    white-space: pre-line;
}


.modal-close-button {
    width: 100%;
    min-height: 45px;

    margin-top: 20px;

    border: 0;

    border-radius: 17px;

    color: white;
    background: var(--green);

    font-size: 11px;
    font-weight: 750;

    cursor: pointer;
}




/* =========================================================
   APP DIALOG
========================================================= */

.app-dialog {
    position: fixed;

    inset: 0;

    z-index: 100;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    padding: 12px;

    background:
        rgba(17, 28, 20, .38);

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

    opacity: 0;

    transition:
        opacity .16s ease;
}


.app-dialog.open {
    opacity: 1;
}


.app-dialog-box {
    width:
        min(580px, 100%);

    padding:
        10px
        19px
        19px;

    border:
        1px
        solid
        rgba(255,255,255,.55);

    border-radius: 30px;

    background: white;

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.19);

    transform:
        translateY(20px);

    transition:
        transform .18s ease;
}


.app-dialog.open
.app-dialog-box {
    transform:
        translateY(0);
}


.app-dialog-heading {
    display: flex;

    align-items: flex-start;

    gap: 12px;
}


.app-dialog-icon {
    display: grid;

    place-items: center;

    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    border-radius: 15px;

    color: var(--green);

    background:
        var(--green-soft);

    font-size: 22px;
}


.app-dialog.danger
.app-dialog-icon {
    color: var(--red);

    background:
        var(--red-soft);
}


.app-dialog-heading h2 {
    margin:
        1px
        0
        0;

    font-size: 16px;
    font-weight: 800;

    letter-spacing: -.25px;
}


.app-dialog-message {
    margin-top: 7px;

    color: #58635c;

    font-size: 11px;
    font-weight: 500;

    line-height: 1.55;

    white-space: pre-line;
}


.app-dialog-actions {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 8px;

    margin-top: 18px;
}


.app-dialog-actions.single {
    grid-template-columns: 1fr;
}


.app-dialog-button {
    min-height: 44px;

    padding:
        0
        14px;

    border: 0;

    border-radius: 15px;

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}


.app-dialog-cancel {
    color: var(--text);

    background:
        #edf1ee;
}


.app-dialog-confirm {
    color: white;

    background:
        var(--green);
}


.app-dialog-confirm.danger {
    background:
        var(--red);
}


@media (min-width: 650px) {

    .app-dialog {
        align-items: center;
    }

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes taskExpand {
    from {
        grid-template-rows: 0fr;
        opacity: 0;
    }

    to {
        grid-template-rows: 1fr;
        opacity: 1;
    }
}


/*
    Kolorowa warstwa ma maleć od prawej do lewej.
*/

@keyframes recentSweep {

    from {
        transform:
            translateX(-24px);
    }

    to {
        transform:
            translateX(-100%);
    }

}


@keyframes tabFade {
    from {
        opacity: .45;
    }

    to {
        opacity: 1;
    }
}


@keyframes drawerAppear {
    from {
        opacity: 0;

        transform:
            translateX(-50%)
            translateY(7px);
    }

    to {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);
    }
}


@keyframes drawerBodyAppear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes modalBackdrop {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes modalAppear {
    from {
        opacity: 0;

        transform:
            translateY(18px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   SMALL SCREEN
========================================================= */

@media (max-width: 380px) {

    .shift-header {
        gap: 9px;

        padding:
            7px
            9px;
    }

    .back-button {
        width: 40px;
        height: 40px;

        border-radius: 15px;
    }

    .shift-title h1 {
        font-size: 16px;
    }

    #app-clock {
        font-size: 8.5px;
    }

    .task-card {
        gap: 9px;

        padding:
            13px
            11px
            12px;
    }

    .task-name {
        font-size: 14px;
    }

    .task-icon-button {
        width: 38px;
        height: 38px;
    }

    .task-icon-button ion-icon {
        font-size: 21px;
    }

    .task-pill {
        font-size: 8px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}


/* =========================================================
   DETAILS MARKDOWN
========================================================= */

#modal-content {
    overflow-x: auto;
}

#modal-content > :first-child {
    margin-top: 0;
}

#modal-content > :last-child {
    margin-bottom: 0;
}

#modal-content p,
#modal-content li {
    line-height: 1.55;
}

#modal-content h1,
#modal-content h2,
#modal-content h3 {
    line-height: 1.3;
}

#modal-content table {
    width: 100%;
    min-width: 420px;

    margin:
        14px
        0;

    border-collapse: collapse;

    font-size: 12px;
}

#modal-content th,
#modal-content td {
    padding:
        9px
        10px;

    border:
        1px
        solid
        #dfe5e0;

    text-align: left;
    vertical-align: top;
}

#modal-content th {
    background:
        #edf5ef;

    font-weight: 700;
}

#modal-content img {
    display: block;

    max-width: 100%;
    height: auto;

    margin:
        14px
        auto;

    border-radius: 14px;
}