/* Desktop shell: icons, windows, taskbar, start menu, context menus, admin layout and the phone layout. */

.boot-screen {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--face-dark);
    color: var(--title-text);
    font-family: var(--font-title);
}

.boot-screen .boot-logo {
    display: grid;
    gap: var(--s4);
    justify-items: center;
}

.desktop {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--desk) url("../img/wallpaper.png") repeat;
    background-size: calc(var(--px) * 64) calc(var(--px) * 64);
    overflow: hidden;
    z-index: 1;
}

.desktop-area {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Desktop icons */
.desk-icons {
    position: absolute;
    top: var(--s4);
    left: var(--s4);
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(auto-fill, calc(var(--px) * 76));
    gap: var(--s2);
    max-height: calc(100% - var(--s6));
}

.desk-icon {
    width: calc(var(--px) * 80);
    justify-content: flex-start;
    min-width: 0;
    min-height: 0;
    padding: var(--s1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s2);
    background: none;
    box-shadow: none;
    color: var(--title-text);
    text-align: center;
}

.desk-icon:active:not(:disabled) {
    box-shadow: none;
    padding: var(--s1);
}

.desk-icon .icon {
    position: relative;
}

/* Selection: a one-pixel checker in the selection colour, clipped to the icon's opaque pixels */
.desk-icon.selected .icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: conic-gradient(var(--select) 25%, transparent 0 50%, var(--select) 0 75%, transparent 0);
    background-size: calc(var(--px) * 2) calc(var(--px) * 2);
    mask: url("../img/icons-32.png") no-repeat;
    mask-size: calc(var(--px) * 512) calc(var(--px) * 32);
    mask-position: calc(var(--px) * -32 * var(--i, 0)) 0;
}

.desk-icon .label {
    padding: 0 var(--s1);
    text-shadow: var(--px) var(--px) var(--face-dark);
}

.desk-icon.selected .label {
    background: var(--select);
    text-shadow: none;
    outline: var(--px) dotted var(--face-light);
}

/* Windows */
.desktop .window {
    position: absolute;
}

.desktop .window.maximized {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.desktop .window.minimized {
    display: none;
}

.desktop .window.dragging, .desktop .window.resizing {
    user-select: none;
}

.desktop .window.dragging .window-body, .desktop .window.resizing .window-body {
    pointer-events: none;
}

.resize-grip {
    position: absolute;
    right: calc(var(--px) * 2);
    bottom: calc(var(--px) * 2);
    width: calc(var(--px) * 12);
    height: calc(var(--px) * 12);
    background: url("../img/grip.png") no-repeat;
    background-size: 100% 100%;
    cursor: nwse-resize;
    touch-action: none;
}

.window.maximized .resize-grip {
    display: none;
}

/* Modal layer for message boxes and the password prompt */
.modal-layer {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 100000;
}

.modal-layer > .window {
    position: static;
    width: min(calc(100% - var(--s6)), calc(var(--px) * 360));
}

/* Taskbar */
.taskbar {
    flex: none;
    height: calc(var(--px) * 30);
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s1);
    background: var(--face);
    box-shadow: inset 0 var(--px) var(--face-light), inset 0 calc(var(--px) * 2) var(--face-hilite);
    position: relative;
    z-index: 50000;
}

.start-button {
    min-width: 0;
    font-family: var(--font-title);
    font-weight: bold;
    padding: var(--s1) var(--s2);
    height: calc(var(--px) * 24);
}

.start-button.pressed {
    padding: calc(var(--px) * 3) calc(var(--px) * 1) var(--px) calc(var(--px) * 5);
}

.task-buttons {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: var(--s2);
    overflow: hidden;
}

.task-buttons button {
    flex: 0 1 calc(var(--px) * 160);
    min-width: calc(var(--px) * 40);
    justify-content: flex-start;
    height: calc(var(--px) * 24);
    overflow: hidden;
    white-space: nowrap;
}

.task-buttons button span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-buttons button.active {
    box-shadow: var(--bevel-in);
    background: var(--face-light);
    font-weight: bold;
}

.tray {
    display: flex;
    align-items: center;
    gap: var(--s2);
    height: calc(var(--px) * 24);
    padding: 0 var(--s4);
    box-shadow: var(--bevel-thin-in);
    white-space: nowrap;
    cursor: default;
}

.tray .clock {
    display: flex;
    align-items: center;
    gap: var(--s2);
    align-self: stretch;
    position: relative;
}

.tray-icon, .tray-icon:active:not(:disabled) {
    min-width: 0;
    min-height: 0;
    padding: 0;
    background: none;
    box-shadow: none;
}

.tray .clock-date {
    margin-left: var(--s2);
}

.tray .glitch {
    color: var(--status-banned);
}

.tooltip {
    position: absolute;
    bottom: calc(100% + var(--s2));
    right: 0;
    background: var(--tooltip);
    color: var(--text);
    box-shadow: 0 0 0 var(--px) var(--face-dark);
    padding: var(--s1) var(--s3);
    white-space: pre-line;
    width: max-content;
    max-width: calc(var(--px) * 280);
    z-index: 60000;
}

/* Start menu */
.start-menu {
    position: absolute;
    left: var(--s1);
    bottom: calc(var(--px) * 30);
    display: flex;
    background: var(--face);
    box-shadow: var(--bevel-out);
    padding: calc(var(--px) * 3);
    z-index: 60000;
    min-width: calc(var(--px) * 180);
}

.start-banner {
    width: calc(var(--px) * 20);
    background: linear-gradient(0deg, var(--title-a), var(--title-b));
    position: relative;
}

.start-banner::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(var(--px) * 20);
    height: calc(var(--px) * 160);
    background: url("../img/start-banner.png") no-repeat;
    background-size: 100% 100%;
}

.start-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: var(--s1);
}

.start-items button {
    justify-content: flex-start;
    gap: var(--s4);
    background: none;
    box-shadow: none;
    min-height: calc(var(--px) * 40);
    padding: var(--s1) var(--s4) var(--s1) var(--s2);
    text-align: left;
}

.start-items button:hover, .start-items button:focus-visible {
    background: var(--select);
    color: var(--select-text);
    outline: none;
}

.start-items hr {
    margin: var(--s1) 0;
}

.start-user {
    padding: var(--s2) var(--s4);
    color: var(--text-muted);
}

/* Context menus (right-click on the wallpaper or an icon). The highlight is the focus: js/os.js moves it under the pointer */
.context-menu {
    position: absolute;
    z-index: 90000;
    display: flex;
    flex-direction: column;
    width: max-content;
    min-width: calc(var(--px) * 150);
    padding: calc(var(--px) * 3);
    background: var(--face);
    box-shadow: var(--bevel-out);
    white-space: nowrap;
    outline: none;
}

.context-menu button, .context-menu button:active:not(:disabled) {
    width: 100%;
    min-width: 0;
    min-height: calc(var(--px) * 22);
    justify-content: flex-start;
    gap: 0;
    padding: 0 var(--s1) 0 0;
    background: none;
    box-shadow: none;
    text-align: left;
}

.context-menu button:focus, .context-menu button:focus-visible, .menu-sub:focus-within > button {
    background: var(--select);
    color: var(--select-text);
    outline: none;
}

.menu-mark {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: calc(var(--px) * 20);
}

.menu-label {
    flex: 1;
    padding-right: var(--s6);
}

.menu-sub > button > .glyph {
    margin-right: var(--s2);
}

.context-menu hr {
    margin: var(--s1) var(--px);
}

.menu-sub {
    position: relative;
}

/* Overlaps the parent menu's edge, its first item level with the one that opened it */
.submenu {
    display: none;
    top: calc(var(--px) * -3);
    left: 100%;
}

.submenu.flip {
    left: auto;
    right: 100%;
}

.menu-sub:focus-within > .submenu {
    display: flex;
}

/* Admin control panel */
.admin {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.admin > .tab-panel {
    flex: 1;
    overflow: auto;
}

.admin-plain {
    min-height: 100%;
    padding: var(--s4);
    background: var(--face);
}

.split {
    display: grid;
    grid-template-columns: minmax(calc(var(--px) * 200), 1fr) 2fr;
    gap: var(--s4);
    min-height: 0;
}

.toolbar {
    display: flex;
    gap: var(--s3);
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--s4);
}

.toolbar input, .toolbar select {
    width: auto;
    flex: 1 1 calc(var(--px) * 120);
}

.toolbar button {
    flex: none;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--px) * 140), 1fr));
    gap: var(--s4);
}

.stat {
    box-shadow: var(--bevel-in);
    background: var(--field);
    padding: var(--s4);
}

.stat .value {
    font-family: var(--font-title);
    font-size: var(--font-size-large);
    line-height: var(--line-large);
}

dl.props {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--s1) var(--s5);
    margin: 0 0 var(--s4);
}

dl.props dt {
    color: var(--text-muted);
}

dl.props dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Invite tree */
.tree {
    list-style: none;
    margin: 0;
    padding: var(--s2);
}

.tree li {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--px) 0;
    white-space: nowrap;
}

.tree .indent {
    display: inline-block;
    width: calc(var(--px) * 16 * var(--depth, 0));
    flex: none;
    height: calc(var(--px) * 16);
    /* Dotted guide lines, one per level */
    background: repeating-linear-gradient(90deg, transparent 0 calc(var(--px) * 7), var(--face-shadow) calc(var(--px) * 7) calc(var(--px) * 8), transparent calc(var(--px) * 8) calc(var(--px) * 16));
    mask: repeating-linear-gradient(0deg, #000 0 var(--px), transparent var(--px) calc(var(--px) * 2));
}

.tree .node {
    min-width: 0;
    min-height: 0;
    background: none;
    box-shadow: none;
    padding: 0 var(--s1);
}

.tree .node.current {
    background: var(--select);
    color: var(--select-text);
}

.tree .ancestor {
    color: var(--text-muted);
}

.json {
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
    max-height: calc(var(--px) * 120);
    overflow: auto;
}

/* Reported content stays plain text, so nothing in it is clickable */
.report-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: calc(var(--px) * 160);
    overflow: auto;
    margin: 0;
    background: var(--field);
    box-shadow: var(--bevel-in);
    padding: var(--s3) var(--s4);
}

.report-lead-up {
    margin-bottom: var(--s2);
    color: var(--text-muted);
}

/* Mail: folders on the left; the list, a message or the form fills the rest and scrolls on its own */
.mail {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s4);
    height: 100%;
    min-height: 0;
}

.mail-folders {
    display: flex;
    flex-direction: column;
    align-self: start;
    padding: calc(var(--px) * 2);
    background: var(--field);
    box-shadow: var(--bevel-in);
}

.mail-folders button, .mail-folders button:active:not(:disabled) {
    justify-content: flex-start;
    min-width: 0;
    min-height: 0;
    padding: var(--s1) var(--s3);
    background: none;
    box-shadow: none;
    white-space: nowrap;
}

.mail-folders button.selected {
    background: var(--select);
    color: var(--select-text);
}

.mail-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.mail-main > * {
    flex: none;
}

.mail-main > .mail-list, .mail-main > .mail-reader, .mail-main > .mail-compose, .mail-main > .report-form {
    flex: 1;
    min-height: 0;
}

.mail-main > .report-form {
    overflow: auto;
}

table.list tr.unread td {
    color: var(--text-accent);
}

table.list td.mail-flag {
    width: calc(var(--px) * 8);
    padding-right: 0;
}

table.list td.mail-date {
    white-space: nowrap;
}

.mail-reader, .mail-compose, .mail-compose-body {
    display: flex;
    flex-direction: column;
}

.mail-headers {
    margin-bottom: var(--s4);
}

.mail-body {
    flex: 1;
    min-height: calc(var(--px) * 80);
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--field);
    box-shadow: var(--bevel-in);
    padding: var(--s3) var(--s4);
}

.mail-compose-body {
    flex: 1;
    min-height: 0;
}

.mail-compose-body textarea {
    flex: 1;
    min-height: calc(var(--px) * 120);
    resize: none;
}

/* Chat: rooms, conversation and members side by side; narrow windows show one pane at a time */
.chat {
    container: chat / inline-size;
    height: 100%;
    min-height: 0;
}

.chat-layout {
    display: grid;
    grid-template-columns: calc(var(--px) * 150) minmax(0, 1fr) calc(var(--px) * 140);
    gap: var(--s4);
    height: 100%;
    min-height: 0;
}

.chat-layout.no-members {
    grid-template-columns: calc(var(--px) * 150) minmax(0, 1fr);
}

.chat-rooms, .chat-members-pane {
    min-height: 0;
    overflow: auto;
    background: var(--field);
    box-shadow: var(--bevel-in);
    padding: calc(var(--px) * 2);
}

.chat-rooms h3, .chat-members h3 {
    margin: var(--s3) var(--s2) var(--s1);
    color: var(--text-muted);
}

.chat-rooms p {
    margin: 0 var(--s2) var(--s2);
}

.chat-rooms ul, .chat-members ul, .chat-plain-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chat-rooms-tools {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s1);
}

.chat-rooms-tools button {
    min-width: 0;
}

.chat-rooms li button, .chat-members li > button, .chat-rooms li button:active:not(:disabled), .chat-members li > button:active:not(:disabled) {
    display: flex;
    justify-content: flex-start;
    gap: var(--s2);
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: var(--s1) var(--s2);
    background: none;
    box-shadow: none;
    text-align: left;
}

.chat-rooms li button.selected, .chat-members li > button.selected {
    background: var(--select);
    color: var(--select-text);
}

.chat-rooms li button.selected .muted {
    color: inherit;
}

.chat-rooms li button.unread:not(.selected) {
    color: var(--text-accent);
}

.chat-room-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-badge {
    margin-left: auto;
    padding: 0 var(--s1);
    background: var(--title-b);
    color: var(--title-text);
}

.chat-invite {
    margin: 0 var(--s1) var(--s2);
    padding: var(--s2);
    box-shadow: var(--bevel-thin-in);
}

.chat-invite .button-row {
    margin-top: var(--s1);
}

.chat-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.chat-main > * {
    flex: none;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s2);
}

.chat-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-room-title {
    color: var(--text-accent);
    margin-right: var(--s2);
}

.chat-main > .chat-scroll, .chat-main > .chat-log {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.chat-log {
    min-height: calc(var(--px) * 80);
    background: var(--field);
    box-shadow: var(--bevel-in);
    padding: var(--s2) var(--s3);
}

.chat-more {
    margin: 0 0 var(--s2);
    text-align: center;
}

.chat-day {
    margin: var(--s2) 0;
    color: var(--text-muted);
    text-align: center;
}

.chat-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--s2);
    padding: 0 var(--s1);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-line.selected {
    background: var(--face-light);
}

.chat-line.mention {
    background: var(--tooltip);
}

.chat-time {
    color: var(--text-muted);
    white-space: nowrap;
}

.chat-content {
    flex: 1;
    min-width: 0;
}

.chat-nick {
    color: var(--text-accent);
}

.chat-action .chat-content {
    color: var(--text-accent-2);
}

.chat-joined .chat-content, .chat-left .chat-content, .chat-removed .chat-content, .chat-topic .chat-content {
    color: var(--status-active);
}

.chat-notice .chat-content {
    color: var(--status-suspended);
}

.chat-line-tools {
    display: flex;
    gap: var(--s3);
    margin-left: auto;
}

.chat-composer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s2);
    margin-top: var(--s2);
}

.chat-composer textarea {
    flex: 1;
    min-width: 0;
    min-height: calc(var(--line) * 2 + var(--s3));
    resize: none;
}

.chat-editing {
    flex-basis: 100%;
}

.chat-cannot {
    margin: var(--s2) 0 0;
}

.chat-presence {
    flex: none;
    align-self: center;
    width: calc(var(--px) * 8);
    height: calc(var(--px) * 8);
    border-radius: 50%;
    box-shadow: var(--bevel-thin-in);
    background: var(--face);
}

.chat-presence.online {
    background: var(--status-active);
}

.chat-member-tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s3);
    padding: var(--s1) var(--s2) var(--s2) calc(var(--px) * 22);
}

.chat-narrow-only {
    display: none;
}

@container chat (max-width: 560px) {
    .chat-layout, .chat-layout.no-members {
        grid-template-columns: minmax(0, 1fr);
    }

    .chat-layout > * {
        display: none;
    }

    .chat-layout[data-pane="list"] > .chat-rooms {
        display: block;
    }

    .chat-layout[data-pane="main"] > .chat-main {
        display: flex;
    }

    .chat-layout[data-pane="members"] > .chat-members-pane {
        display: block;
    }

    .chat-narrow-only {
        display: flex;
    }
}

/* Shared by the Forum and News: tags, page links, and posts written in UBB code with their editor */
.tag {
    margin-right: var(--s2);
    padding: 0 var(--s1);
    background: var(--title-b);
    color: var(--title-text);
}

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2);
    margin: var(--s3) 0;
}

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

/* The pixel font has no bold or italic: bold is struck twice a pixel apart, italic is the browser's slant */
.markup strong, .markup-editor-tools strong {
    font-weight: normal;
    text-shadow: var(--px) 0 currentColor;
}

.markup em, .markup-editor-tools em {
    font-synthesis: style;
}

.markup-quote {
    margin: var(--s2) 0;
    padding: var(--s2) var(--s3);
    background: var(--face-light);
    box-shadow: var(--bevel-thin-in);
}

.markup-quote-author {
    color: var(--text-muted);
}

.markup-code {
    margin: var(--s2) 0;
    padding: var(--s2) var(--s3);
    max-height: calc(var(--px) * 240);
    overflow: auto;
    white-space: pre;
    font-family: ui-monospace, monospace;
    background: var(--face-light);
    box-shadow: var(--bevel-thin-in);
}

.markup-editor {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.markup-editor-tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
}

.markup-editor-tools button {
    min-width: 0;
}

.markup-editor textarea {
    min-height: calc(var(--px) * 120);
    resize: vertical;
}

.markup-preview {
    min-height: calc(var(--px) * 120);
    padding: var(--s3) var(--s4);
    background: var(--field);
    box-shadow: var(--bevel-in);
}

/* Forum: a board index, thread lists and threads, with the author beside each post (above it when narrow) */
.forum {
    container: forum / inline-size;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.forum > * {
    flex: none;
}

.forum > .forum-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.forum-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.forum-table {
    margin-bottom: var(--s4);
}

table.list td.forum-flag, table.list th.forum-flag {
    width: calc(var(--px) * 8);
    padding-right: 0;
}

table.list td.forum-count, table.list th.forum-count {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

table.list td.forum-last, table.list th.forum-last {
    width: 30%;
}

.forum-name {
    overflow-wrap: break-word;
}

.forum-title {
    margin: 0 0 var(--s3);
    overflow-wrap: anywhere;
}

.forum-post {
    display: grid;
    grid-template-columns: calc(var(--px) * 120) minmax(0, 1fr);
    margin-bottom: var(--s3);
    background: var(--field);
    box-shadow: var(--bevel-in);
}

.forum-post.new .forum-post-head {
    color: var(--text-accent);
}

.forum-author {
    display: flex;
    flex-direction: column;
    gap: var(--px);
    padding: var(--s3);
    border-right: var(--px) solid var(--face-shadow);
    overflow-wrap: anywhere;
}

.forum-author-name {
    color: var(--text-accent);
}

.forum-role {
    color: var(--text-accent-2);
}

.forum-post-main {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    min-width: 0;
    padding: var(--s3) var(--s4);
}

.forum-post-main p {
    margin: 0;
}

.forum-post-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    padding-bottom: var(--s1);
    border-bottom: var(--px) solid var(--face-shadow);
}

.forum-post-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1) var(--s3);
}

.forum-post-tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    margin-left: auto;
}

.forum-form {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin-top: var(--s3);
}

.forum-form h2 {
    margin: 0;
}

@container forum (max-width: 520px) {
    table.list .forum-count {
        display: none;
    }

    .forum-index table.list .forum-last {
        display: none;
    }

    .forum-post {
        grid-template-columns: minmax(0, 1fr);
    }

    .forum-author {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 var(--s3);
        padding-bottom: var(--s1);
        border-right: none;
    }
}

.news {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.news > * {
    flex: none;
}

.news > .news-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.news-post {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin-bottom: var(--s3);
    padding: var(--s3) var(--s4);
    background: var(--field);
    box-shadow: var(--bevel-in);
}

.news-title {
    margin: 0;
    color: var(--text-accent);
    overflow-wrap: anywhere;
}

.news-byline {
    margin: 0;
    padding-bottom: var(--s1);
    border-bottom: var(--px) solid var(--face-shadow);
}

.news-tools {
    display: flex;
    gap: var(--s3);
    align-self: flex-end;
}

.news-form {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.news-form h2 {
    margin: 0;
}

.news-foot {
    margin-top: var(--s2);
    padding-top: var(--s2);
    border-top: var(--px) solid var(--face-shadow);
}

/* Phones: every window fills the screen and the start menu becomes a sheet */
@media (max-width: 767px) {
    .mail {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .mail-folders {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .desktop .window {
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .resize-grip {
        display: none;
    }

    .titlebar {
        height: calc(var(--px) * 28);
    }

    .titlebar button {
        width: calc(var(--px) * 24);
        height: calc(var(--px) * 22);
    }

    .taskbar {
        height: calc(var(--px) * 40);
    }

    .start-button, .task-buttons button, .tray {
        height: calc(var(--px) * 34);
    }

    .start-menu {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: calc(var(--px) * 40);
        min-width: 0;
    }

    .start-items button {
        min-height: calc(var(--px) * 48);
    }

    .context-menu button, .context-menu button:active:not(:disabled) {
        min-height: calc(var(--px) * 36);
    }

    .tray .clock-date {
        display: none;
    }

    .split {
        grid-template-columns: 1fr;
    }
}

.account-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: calc(var(--px) * 280);
    border: 0;
    background: var(--face);
}

/* Settings > Display */
.theme-choice {
    padding-left: calc(var(--px) * 13 + var(--s2));
}

.theme-system {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--s4);
}

.theme-previews {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4);
}

.theme-preview {
    margin: 0;
}

.theme-preview figcaption {
    color: var(--text-muted);
    text-align: center;
}

.theme-preview-desk {
    position: relative;
    width: calc(var(--px) * 172);
    height: calc(var(--px) * 124);
    background: var(--desk);
    color: var(--text);
    box-shadow: var(--bevel-in);
}

.theme-preview-window {
    position: absolute;
    padding: calc(var(--px) * 3);
    background: var(--face);
    box-shadow: var(--bevel-out);
}

.theme-preview-window.back {
    left: var(--s4);
    top: var(--s4);
    width: calc(var(--px) * 112);
}

.theme-preview-window.front {
    left: var(--s6);
    top: calc(var(--px) * 26);
    right: calc(var(--px) * 6);
    bottom: var(--s4);
}

.theme-preview-body {
    display: grid;
    gap: var(--s2);
    padding: var(--s2);
}

.theme-preview-field {
    padding: var(--s1);
    background: var(--field);
    box-shadow: var(--bevel-in);
    white-space: nowrap;
    overflow: hidden;
}

.theme-preview-field .selected {
    padding: 0 var(--s1);
    background: var(--select);
    color: var(--select-text);
}

.theme-preview-row {
    display: flex;
    align-items: center;
    gap: var(--s4);
}

.theme-preview-row a {
    text-decoration: underline;
}