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

* {
    box-sizing: border-box;
}

body {
    background: #f5f3f0;
    color: #171717;

    font-family: Arial, sans-serif;

    max-width: 1200px;

    margin: 0 auto;

    padding: 28px 34px 18px;

    line-height: 1.45;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 18px;
}

.header-actions {
    display: flex;

    gap: 8px;
}

h1 {
    font-family: Georgia, serif;

    font-size: 30px;
    font-weight: normal;

    margin: 0 0 3px;
}

.date {
    color: #666;

    font-size: 14px;

    margin: 0;
}


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

button {
    font-family: inherit;
}

.edit-button,
.today-button,
.primary-button,
.calendar-arrow,
.nav-button,
.add-task,
.delete-task,
.week-add,
.entry-delete,
.modal-close,
.modal-cancel {
    cursor: pointer;
}


/* EDIT */

.edit-button {
    background: transparent;

    border: 1px solid #777;
    border-radius: 5px;

    padding: 6px 12px;

    font-size: 13px;

    color: #222;
}

.edit-button:hover {
    background: #e9e6e2;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.main-nav {
    display: flex;

    gap: 6px;

    border-bottom: 1px solid #999;

    margin-bottom: 18px;

    padding-bottom: 7px;
}

.nav-button {
    background: transparent;

    border: 1px solid transparent;

    border-radius: 5px;

    padding: 6px 16px;

    font-size: 14px;

    color: #555;
}

.nav-button:hover {
    background: #e9e6e2;
}

.nav-button.active {
    border-color: #777;

    color: #111;

    background: #e7e4e0;
}


/* =========================================================
   VIEWS
   ========================================================= */

.view {
    display: none;
}

.active-view {
    display: block;
}


/* =========================================================
   GENERAL BOX
   ========================================================= */

.box {
    border: 1px solid #8e8b87;

    background: #f8f7f5;

    padding: 16px;

    border-radius: 4px;
}

h2 {
    font-family: Georgia, serif;

    font-size: 19px;
    font-weight: normal;

    margin: 0;
}

.small-text {
    color: #555;

    font-size: 13px;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard {
    display: grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(250px, 0.9fr);

    gap: 20px;

    align-items: start;
}


/* =========================================================
   TODAY
   ========================================================= */

.today {
    min-width: 0;
}

.today-header {
    display: flex;

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

    border: 1px solid #8e8b87;

    border-bottom: none;

    background: #ebe9e6;

    padding: 11px 15px;

    border-radius: 4px 4px 0 0;
}

.today-title {
    font-size: 21px;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.progress-area {
    display: flex;

    align-items: center;

    gap: 10px;
}

#task-progress {
    color: #555;

    font-size: 12px;

    white-space: nowrap;
}

.progress-bar {
    width: 95px;

    height: 8px;

    border: 1px solid #777;

    background: #dedbd7;

    overflow: hidden;

    border-radius: 2px;
}

#progress-fill {
    width: 0;

    height: 100%;

    background: #555;

    transition: width 0.15s ease;
}


/* =========================================================
   TASK GRID
   ========================================================= */

.task-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    padding: 12px;

    border-left: 1px solid #8e8b87;
    border-right: 1px solid #8e8b87;

    background: #f2f0ed;
}

.task-box {
    min-width: 0;
}


/* =========================================================
   BOX TITLES
   ========================================================= */

.box-title-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 8px;
}

.box-title {
    font-family: Georgia, serif;

    font-size: 17px;

    margin: 0;
}

.icon {
    font-size: 16px;

    margin-left: 4px;
}


/* =========================================================
   ADD / DELETE
   ========================================================= */

.add-task {
    display: none;

    background: transparent;

    border: 1px solid #888;

    border-radius: 3px;

    width: 25px;
    height: 24px;

    line-height: 20px;

    padding: 0;

    color: #333;
}

.add-task:hover {
    background: #e5e2de;
}

.delete-task {
    display: none;

    margin-left: auto;

    background: transparent;

    border: none;

    color: #777;

    font-size: 17px;

    padding: 0 3px;
}

.delete-task:hover {
    color: #111;
}


/* =========================================================
   TASK LIST
   ========================================================= */

.task-list {
    list-style: none;

    margin: 0;

    padding: 0;
}

.task {
    display: flex;

    align-items: center;

    gap: 7px;

    padding: 6px 2px;

    border-bottom: 1px dotted #c2bfbb;

    cursor: pointer;

    min-height: 32px;
}

.task:last-child {
    border-bottom: none;
}

.checkbox {
    flex: 0 0 auto;

    font-size: 17px;
}

.task-text {
    flex: 1;

    min-width: 0;

    font-size: 13px;
}

.task.completed {
    color: #888;
}

.task.completed .task-text {
    text-decoration: line-through;
}


/* =========================================================
   SINGLE COMPLETION DIVIDER
   ========================================================= */

/*
   The JavaScript adds .completed-start only to the FIRST
   completed task in each list.

   This gives us one clean divider between:
   unfinished tasks
   ----------------
   completed tasks
*/

.task-list .task.completed-start {
    border-top: 1px solid #777;

    margin-top: 8px;

    padding-top: 12px;
}


/* =========================================================
   PLANS
   ========================================================= */

.plans {
    border-top: none;

    border-radius: 0 0 4px 4px;

    margin: 0;
}

.plan {
    display: flex;

    gap: 15px;

    padding: 7px 0;

    border-bottom: 1px dotted #c2bfbb;
}

.plan:last-child {
    border-bottom: none;
}

.time {
    width: 52px;

    color: #666;

    font-size: 13px;
}


/* =========================================================
   SIDE
   ========================================================= */

.side {
    display: flex;

    flex-direction: column;

    gap: 12px;
}

.thought {
    flex: 1;
}

.remember-signature {
    text-align: right;

    margin-bottom: 0;
}


/* =========================================================
   EDITABLE SIDE CONTENT
   ========================================================= */

.editable-side {
    cursor: default;

    min-height: 18px;
}

.editing-field {
    background: #efede9;

    outline: 1px dashed #999;

    border-radius: 2px;

    padding: 2px;
}

.editable-side:focus {
    outline: 1px dashed #777;
}


/* =========================================================
   CALENDAR
   ========================================================= */

#calendar-view {
    display: none;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(270px, 0.8fr);

    gap: 18px;

    align-items: start;
}

#calendar-view.active-view {
    display: grid;
}

.calendar-panel {
    padding: 14px;
}

.calendar-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 13px;
}

.calendar-title-area {
    text-align: center;
}

.calendar-title-area h2 {
    font-size: 21px;

    margin-bottom: 4px;
}

.calendar-arrow {
    width: 34px;

    height: 34px;

    background: transparent;

    border: 1px solid #888;

    border-radius: 4px;

    font-size: 23px;

    line-height: 25px;
}

.calendar-arrow:hover {
    background: #e8e5e1;
}

.today-button {
    background: transparent;

    border: none;

    color: #666;

    font-size: 12px;

    text-decoration: underline;
}


/* =========================================================
   CALENDAR GRID
   ========================================================= */

.calendar-weekdays,
.calendar-grid {
    display: grid;

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

    gap: 4px;
}

.calendar-weekdays {
    margin-bottom: 4px;
}

.calendar-weekdays div {
    text-align: center;

    color: #666;

    font-size: 11px;

    padding: 4px;
}

.calendar-day {
    position: relative;

    min-height: 82px;

    background: #f8f7f5;

    border: 1px solid #aaa;

    border-radius: 3px;

    padding: 7px;

    text-align: left;

    color: #222;

    overflow: hidden;
}

.calendar-day:hover {
    background: #ece9e5;
}

.calendar-day-number {
    display: block;

    font-family: Georgia, serif;

    font-size: 16px;

    margin-bottom: 4px;
}


/* TODAY */

.calendar-day.calendar-today {
    background: #e3e0dc;

    border: 2px solid #555;

    padding: 6px;
}


/* PAST */

.calendar-day.past-day:not(.calendar-today) {
    background: #efedea;
}

.calendar-day.past-day:not(.calendar-today)
.calendar-day-number {
    color: #777;
}


/* OUTSIDE MONTH */

.calendar-day.outside-month {
    opacity: 0.42;

    background: #eeece9;
}


/* SELECTED */

.calendar-day.selected-day {
    box-shadow:
        inset 0 0 0 1px #222;
}


/* =========================================================
   CALENDAR ENTRY PREVIEW
   ========================================================= */

.calendar-entry-preview {
    display: flex;

    flex-direction: column;

    gap: 2px;
}

.calendar-entry-preview span,
.calendar-entry-preview small {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 10px;

    color: #555;
}


/* =========================================================
   SELECTED DAY
   ========================================================= */

.calendar-day-panel {
    min-height: 100%;

    padding: 17px;
}

.selected-day-header {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 10px;

    border-bottom: 1px solid #aaa;

    padding-bottom: 12px;

    margin-bottom: 10px;
}

.small-label {
    display: block;

    color: #777;

    font-size: 10px;

    letter-spacing: 1px;

    margin: 0 0 3px;
}

.primary-button {
    background: #e7e4e0;

    border: 1px solid #777;

    border-radius: 4px;

    padding: 6px 10px;

    font-size: 12px;
}

.primary-button:hover {
    background: #ddd9d4;
}

.calendar-entries {
    display: flex;

    flex-direction: column;
}

.calendar-entry {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 8px;

    padding: 9px 2px;

    border-bottom: 1px dotted #bbb;
}

.calendar-entry-main {
    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;
}

.entry-time {
    color: #777;

    font-size: 12px;

    width: 42px;
}

.entry-title {
    overflow: hidden;

    text-overflow: ellipsis;

    font-size: 13px;
}

.entry-hours {
    color: #666;

    font-size: 11px;

    white-space: nowrap;
}

.entry-delete {
    background: transparent;

    border: none;

    color: #777;

    font-size: 16px;
}

.empty-message {
    color: #888;

    font-size: 13px;

    text-align: center;

    padding: 20px 5px;
}


/* =========================================================
   ADD PANEL

   Shared by "Add Task" and calendar/week "Add Entry". Both
   position: fixed and position: absolute overlays failed to
   render on the Kindle's browser, so this is a plain in-page
   panel — JavaScript physically moves it next to whatever
   triggered it (see moveAddPanelAfter), so it still feels
   contextual rather than parked in one fixed spot.
   ========================================================= */

.add-panel {
    display: none;

    margin: 14px 0;
}

.add-panel.open {
    display: block;
}

.add-panel-box {
    max-width: 420px;
}

.add-panel-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 15px;
}

.add-panel-header h2 {
    font-size: 19px;
}

.add-panel-extra-row {
    display: none;

    gap: 12px;
}

.add-panel-extra-row.show {
    display: flex;
}

.modal-close {
    background: transparent;

    border: none;

    color: #666;

    font-size: 20px;

    line-height: 1;

    padding: 2px 5px;
}

.modal-close:hover {
    color: #111;
}

.modal-label {
    display: flex;

    flex-direction: column;

    gap: 5px;

    color: #555;

    font-size: 12px;

    margin-bottom: 12px;
}

.modal-label input,
.modal-label select {
    width: 100%;

    background: #f5f3f0;

    border: 1px solid #999;

    border-radius: 3px;

    padding: 7px 8px;

    color: #222;

    font-family: Arial, sans-serif;

    font-size: 13px;
}

.modal-label input:focus,
.modal-label select:focus {
    outline: 1px solid #666;

    background: #fff;
}

.modal-actions {
    display: flex;

    justify-content: flex-end;

    gap: 8px;

    margin-top: 16px;

    padding-top: 12px;

    border-top: 1px solid #bbb;
}

.modal-cancel {
    background: transparent;

    border: 1px solid #999;

    border-radius: 4px;

    padding: 6px 10px;

    font-size: 12px;

    color: #555;
}

.modal-cancel:hover {
    background: #e8e5e1;
}


/* =========================================================
   WEEK VIEW
   ========================================================= */

#week-view {
    display: none;
}

#week-view.active-view {
    display: block;
}

.week-panel {
    padding: 16px;
}

.week-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;
}

.week-header > div {
    text-align: center;
}

.week-grid {
    display: grid;

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

    gap: 7px;
}

.week-day {
    min-width: 0;

    border: 1px solid #999;

    background: #f8f7f5;

    border-radius: 3px;

    padding: 10px;
}

.week-day.week-today {
    border: 2px solid #555;

    background: #e8e5e1;

    padding: 9px;
}

.week-day.weekend {
    opacity: 0.55;

    background: #f2f0ed;
}

.week-day.weekend.week-today {
    opacity: 0.85;
}

.week-day-header {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 5px;

    margin-bottom: 7px;
}

.week-day-name {
    display: block;

    color: #777;

    font-size: 10px;

    letter-spacing: 1px;
}

.week-day-header strong {
    font-family: Georgia, serif;

    font-size: 18px;

    font-weight: normal;
}

.week-hours {
    color: #555;

    font-size: 11px;

    white-space: nowrap;
}


/* =========================================================
   DAILY HOURS BAR
   ========================================================= */

.day-hours-bar {
    height: 6px;

    border: 1px solid #888;

    background: #dedbd7;

    margin-bottom: 10px;

    overflow: hidden;
}

.day-hours-fill {
    height: 100%;

    background: #555;
}


/* =========================================================
   WEEK ENTRIES
   ========================================================= */

.week-entries {
    min-height: 105px;
}

.week-entry {
    display: grid;

    grid-template-columns:
        34px 1fr;

    gap: 3px;

    padding: 5px 0;

    border-bottom: 1px dotted #c2bfbb;

    font-size: 11px;
}

.week-entry span {
    color: #777;
}

.week-entry strong {
    font-weight: normal;

    overflow: hidden;

    text-overflow: ellipsis;
}

.week-entry em {
    grid-column: 2;

    color: #777;

    font-size: 10px;

    font-style: normal;
}

.week-empty {
    color: #999;

    font-size: 11px;

    text-align: center;

    padding: 20px 0;
}

.week-add {
    width: 100%;

    margin-top: 8px;

    background: transparent;

    border: 1px dashed #999;

    border-radius: 3px;

    padding: 5px;

    font-size: 11px;

    color: #666;
}

.week-add:hover {
    background: #ebe8e4;
}


/* =========================================================
   WEEK TOTAL
   ========================================================= */

.week-total {
    display: flex;

    align-items: center;

    gap: 20px;

    border-top: 1px solid #888;

    margin-top: 15px;

    padding-top: 14px;
}

.week-total > div:first-child {
    display: flex;

    align-items: baseline;

    gap: 10px;

    white-space: nowrap;
}

.week-total strong {
    font-family: Georgia, serif;

    font-size: 17px;

    font-weight: normal;
}

.week-total-bar {
    flex: 1;

    height: 9px;

    border: 1px solid #777;

    background: #dedbd7;

    overflow: hidden;
}

#week-total-fill {
    width: 0;

    height: 100%;

    background: #555;
}


/* =========================================================
   FOOTER
   ========================================================= */

.cute-footer {
    display: flex;

    justify-content: center;

    gap: 16px;

    border-top: 1px solid #999;

    margin-top: 18px;

    padding-top: 9px;

    color: #777;

    font-size: 12px;

    letter-spacing: 2px;
}


/* =========================================================
   EDIT MODE
   ========================================================= */

[contenteditable="true"] {
    background: #efede9;

    border-radius: 2px;
}


/* =========================================================
   TEXT SELECTION
   ========================================================= */

::selection {
    background: #d5d1cc;
}


/* =========================================================
   RESPONSIVE / KINDLE LANDSCAPE
   ========================================================= */

@media (max-width: 900px) {

    body {
        padding: 22px 25px 15px;
    }

    .dashboard {
        grid-template-columns:
            minmax(0, 1.6fr)
            minmax(210px, 0.8fr);
    }

    #calendar-view {
        grid-template-columns:
            minmax(0, 1.5fr)
            minmax(220px, 0.8fr);
    }

    .calendar-day {
        min-height: 72px;
    }

    .week-grid {
        gap: 5px;
    }

    .week-day {
        padding: 7px;
    }

}


@media (max-width: 700px) {

    body {
        padding: 18px;
    }

    .dashboard,
    #calendar-view {
        grid-template-columns: 1fr;
    }

    .week-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =========================================================
   COMPACT / SHORT SCREEN (e.g. Kindle portrait)

   Keyed on height, not width — a short viewport is what
   actually forces scrolling, so this tightens vertical
   spacing app-wide: less padding, smaller gaps, shorter
   rows. Font sizes are left alone so it stays readable.
   ========================================================= */

@media (max-height: 850px) {

    body {
        padding: 14px 16px 10px;

        line-height: 1.3;
    }

    .site-header {
        margin-bottom: 10px;
    }

    .main-nav {
        margin-bottom: 10px;

        padding-bottom: 5px;
    }

    .box {
        padding: 10px;
    }

    .today-header {
        padding: 8px 10px;
    }

    .dashboard,
    #calendar-view {
        gap: 10px;
    }

    .task-grid {
        gap: 8px;

        padding: 8px;
    }

    .task {
        padding: 4px 2px;

        min-height: 26px;
    }

    .plan {
        padding: 4px 0;
    }

    .side {
        gap: 8px;
    }

    .box-title-row {
        margin-bottom: 4px;
    }

    .calendar-day {
        min-height: 52px;

        padding: 4px;
    }

    .week-day {
        padding: 6px;
    }

    .week-entries {
        min-height: 0;
    }

    .add-panel {
        margin: 8px 0;
    }

    .add-panel-box {
        padding: 12px;
    }

    .add-panel-header {
        margin-bottom: 8px;
    }

    .modal-label {
        margin-bottom: 8px;
    }

    .cute-footer {
        margin-top: 10px;

        padding-top: 6px;
    }

}