:root {
    font-family:Arial,Helvetica,sans-serif;
    color:#172f35;
    background:#ffd54f;
    font-synthesis:none;
    line-height: 1.0;
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
}

header {
    padding:20px 4%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    border-bottom:1px solid #172f3529;
}

.brand {
    font-size:25px;
    font-weight:900;
    text-decoration:none;
    letter-spacing:-1px;
}

.brand span {
    font-size:12px;
    letter-spacing:1px;
}

nav {
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    align-items:center;
}

a {
    color:inherit;
}

nav a {
    font-size:14px;
    text-decoration:none;
}

nav a:hover {
    text-decoration:underline;
}

main {
    max-width:1200px;
    margin:35px auto;
    padding:0 24px;
}

h1 {
    font-size:clamp(28px,4vw,48px);
    margin:0 0 12px;
    letter-spacing:-1px;
}

h2 {
    font-size:24px;
}

.eyebrow {
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:12px;
    font-weight:bold;
    margin:0 0 12px;
}

.muted {
    color:#476166;
}

.toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:24px;
    flex-wrap:wrap;
}

.panel {
    background:#fffbee;
    border:1px solid #172f3520;
    border-radius:18px;
    padding:28px;
    box-shadow:0 8px 24px #43330009;
}

.clock-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.clock {
    text-align:center;
    background:#183b42;
    color:#fffbee;
    border-radius:20px;
    padding:25px;
}

.clock .now {
    font-size:clamp(30px,6vw,78px);
    font-variant-numeric:tabular-nums;
}

.period {
    font-size:clamp(30px,5vw,68px);
    font-weight:900;
    margin:22px 0 8px;
}

.countdown {
    font-size:clamp(58px,10vw,130px);
    font-variant-numeric:tabular-nums;
    font-weight:900;
    letter-spacing:-3px;
}

.next {
    font-size:22px;
    color:#ffe078;
}

.schedule {
    max-height:660px;
    overflow:auto;
}

table {
    width:100%;
    border-collapse:collapse;
}

th,td {
    text-align:left;
    padding:13px 12px;
    border-bottom:1px solid #183b4220;
}

th {
    font-size:12px;
    letter-spacing:1px;
    text-transform:uppercase;
}

.current {
    background:#ffe078;
    font-weight:bold;
}

.upcoming {
    background:#e0eeea;
}

button,.button {
    background:#183b42;
    color:white;
    border:0;
    border-radius:8px;
    padding:12px 18px;
    cursor:pointer;
    font:inherit;
    text-decoration:none;
    display:inline-block;
}

button:hover,.button:hover {
    background:#285760;
}

button:disabled {
    opacity:.5;
    cursor:default;
}

.secondary {
    background:#e6eeea;
    color:#183b42;
}

.danger {
    background:#a3312f;
}

.actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:20px;
}

label {
    display:block;
    font-size:14px;
    font-weight:bold;
    margin-bottom:18px;
}

input,textarea,select {
    display:block;
    width:100%;
    margin-top:8px;
    border:1px solid #b0bebb;
    border-radius:7px;
    padding:12px;
    background:#fff;
    font:inherit;
    color:#172f35;
}

textarea {
    min-height:180px;
    resize:vertical;
    line-height:1.5;
}

.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 24px;
}

.wide {
    grid-column:1/-1;
}

.login {
    max-width:450px;
    margin:60px auto;
}

.record {
    margin-bottom:16px;
}

.record h2 {
    margin:0;
}

.record p {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

.chips {
    display:flex;
    gap:10px;
    font-size:12px;
    margin:12px 0;
    flex-wrap:wrap;
}

.chips span {
    background:#e9ede2;
    border-radius:20px;
    padding:6px 10px;
}

#status {
    max-width:1152px;
    margin:20px auto;
    padding:0 24px;
    white-space:pre-wrap;
}

#status.error {
    color:#8a1616;
    font-weight:bold;
}

.display {
    max-width:none;
}

.display-subject {
    font-size:clamp(30px,4vw,64px);
    font-weight:900;
    background:#fffbee;
    padding:22px;
    border-radius:14px;
    margin:12px 0 18px;
    overflow-wrap:anywhere;
}

.viewport {
    height:58vh;
    overflow:auto;
    position:relative;
    background:#fffbee;
    border-radius:18px;
}

.viewport.rolling {
    overflow:hidden;
}

.scroll-part {
    padding:25px 4%;
    font-size:clamp(25px,3vw,48px);
    line-height:1.5;
    overflow-wrap:anywhere;
}

.scroll-part h2 {
    font-size:.72em;
    text-transform:uppercase;
    letter-spacing:2px;
    margin:0 0 12px;
}

.scroll-part p {
    margin:0 0 12px;
}

.scroll-part ul {
    margin:0 0 28px;
    padding-left:1.3em;
}

.scroll-part li {
    padding-bottom:12px;
}

.scroll-part section+section {
    margin-top:28px;
}

select.lesson-picker {
    max-width:480px;
}

.main-objectives {
    margin-top:24px;
}

.main-objectives .viewport {
    height:40vh;
}

:focus-visible {
    outline:3px solid #287d98;
    outline-offset:3px;
}

@media(max-width:760px) {
    header {
        align-items:flex-start;
        flex-direction:column;
    }
    nav {
        gap:12px;
    }
    .clock-grid,.form-grid {
        grid-template-columns:1fr;
    }
    .wide {
        grid-column:auto;
    }
    main {
        padding:0 16px;
        margin-top:24px;
    }
    .panel {
        padding:20px;
    }
    .brand span {
        display:inline;
    }
    .countdown {
        font-size:80px;
    }
    .viewport {
        height:55vh;
    }
}

[hidden] {
    display:none!important;
}

body:has(main.display) {
    height:100dvh;
    display:flex;
    flex-direction:column;
}

main.display {
    width:100%;
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
    margin:20px auto;
}

.display .viewport {
    flex:1;
    min-height:150px;
    height:auto;
}

.display .toolbar {
    margin-bottom:4px;
}

.display .display-subject {
    margin-top:4px;
}

.display .eyebrow {
    margin-bottom:6px;
}

#status:empty {
    display:none;
}

body.main-bells {
    min-height:100dvh;
}

.main-bells header {
    display:none;
}

.main-bells main {
    max-width:none;
    margin:0;
    padding:3vh 3vw;
    min-height:100dvh;
    display:grid;
    place-items:center;
}

.main-clock {
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3vh 3vw;
}

.main-clock-field {
    background:#183b42;
    color:#fffbee;
    border-radius:20px;
    padding:3vh 2vw;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:43vh;
}

.clock-label {
    text-transform:uppercase;
    font-size:clamp(12px,1.5vw,24px);
    letter-spacing:2px;
    color:#ffe078;
    margin-bottom:2vh;
}

.clock-value {
    font-weight:900;
    font-size:clamp(30px,6vw,100px);
    font-variant-numeric:tabular-nums;
    overflow-wrap:anywhere;
}

.main-clock .remaining .clock-value {
    font-size:clamp(48px,8vw,130px);
}

@media(max-width:600px) {
    .main-clock {
        grid-template-columns:1fr;
        gap:12px;
    }
    .main-clock-field {
        min-height:21vh;
        padding:14px;
    }
    .clock-label {
        margin-bottom:8px;
    }
    .clock-value {
        font-size:clamp(30px,10vw,60px);
    }
    .main-clock .remaining .clock-value {
        font-size:clamp(40px,12vw,72px);
    }
}

.main-bells main {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:16px;
}

.main-controls {
    display:flex;
    justify-content:flex-end;
    gap:12px;
    width:100%;
    flex-wrap:wrap;
}

.main-bells .main-clock-field {
    min-height:39vh;
}

@media(max-width:600px) {
    .main-bells .main-clock-field {
        min-height:19vh;
    }
}

.display-bell-bar {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    flex-shrink:0;
    background:#183b42;
    color:#fffbee;
    padding:18px 12px;
    border-radius:14px;
    text-align:center;
}

.display-bell-item {
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
}

.bell-caption {
    font-size:clamp(9px,1.2vw,17px);
    color:#ffe078;
    text-transform:uppercase;
    letter-spacing:1px;
}

.bell-number {
    font-size:clamp(15px,3.2vw,48px);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.display-room {
    margin:12px 0;
    font-size:14px;
    color:#476166;
}

@media(max-width:600px) {
    .display-bell-bar {
        gap:6px;
        padding:14px 6px;
    }
    .bell-caption {
        letter-spacing:0;
    }
    .bell-number {
        font-size:clamp(13px,3.8vw,22px);
    }
}

.display-bell-bar[role="button"] {
    cursor:pointer;
    touch-action:manipulation;
}

.lesson-subject-row {
    display:flex;
    align-items:center;
    gap:16px;
    margin:16px 0;
    flex-shrink:0;
    min-width:0;
}

.lesson-subject-row .toolbar {
    flex:0 1 28%;
    min-width:100px;
    margin:0;
}

.lesson-subject-row label {
    width:100%;
    margin:0;
}

.lesson-subject-row select {
    margin:0;
    max-width:none;
}

.lesson-subject-row .display-subject {
    flex:1;
    min-width:0;
    margin:0;
    font-size:clamp(24px,3.5vw,56px);
}

@media(max-width:600px) {
    .lesson-subject-row {
        gap:10px;
    }
    .lesson-subject-row .toolbar {
        flex-basis:32%;
    }
    .lesson-subject-row .display-subject {
        padding:14px;
        font-size:clamp(20px,5vw,30px);
    }
}

.lesson-subject-row .toolbar {
    flex:0 0 auto;
    min-width:0;
}

.lesson-subject-row label {
    width:auto;
}

.lesson-subject-row select {
    font-size:clamp(25px,3vw,48px);
    width:calc(8ch + 2.5em);
    max-width:42vw;
    text-overflow:ellipsis;
    padding:10px 12px;
}

.lesson-subject-row {
    gap:12px;
}

.lesson-subject-row {
    align-items:stretch;
}

.lesson-subject-row .toolbar {
    align-items:stretch;
    display:flex;
}

.lesson-subject-row label {
    display:flex;
    align-items:stretch;
}

.lesson-subject-row select {
    height:100%;
    min-height:100%;
    align-self:stretch;
}

.lesson-subject-row .display-subject {
    display:flex;
    align-items:center;
}

.lesson-subject-row select {
    font-weight:700;
}

.lesson-subject-row select {
    border-radius:14px;
}

.entries-table-wrap {
    margin:24px 0;
    overflow-x:auto;
    border:1px solid #183b4229;
    border-radius:14px;
    background:#fffbee;
}

.entries-table {
    table-layout:fixed;
    min-width:760px;
}

.entries-table th {
    background:#183b42;
    color:#fffbee;
}

.entries-table th:first-child {
    width:20%;
}

.entries-table th:nth-child(2),.entries-table th:nth-child(3) {
    width:31%;
}

.entries-table th:last-child {
    width:18%;
}

.entries-table td {
    vertical-align:top;
    padding:20px 16px;
    line-height:1.55;
    overflow-wrap:anywhere;
}

.entries-table tbody tr:nth-child(even) {
    background:#f0f3e7;
}

.entries-table .entry-lines {
    white-space:pre-wrap;
}

.entry-table-actions {
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:stretch;
}

.entry-table-actions .button,.entry-table-actions button {
    text-align:center;
    font-size:14px;
    padding:10px;
}

.validation-errors {
    color:#8a1616;
    font-weight:bold;
}

.validation-summary-valid {
    display:none;
}

nav form {
    margin:0;
}

.entry-table-actions form {
    margin:0;
}

.entry-table-actions form button {
    width:100%;
}