/* The New project page (Board 2's New project board): name, start, device and theme on the
   left, the preview on the right, the projects made before underneath. */

.page-new { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 32px 24px 48px; }
.np-top { width: 100%; max-width: 1200px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px; }
.np-form { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.np-head { display: flex; flex-direction: column; gap: 6px; }
.np-lead { font-size: 15px; color: var(--muted); }
.np-label { font-family: var(--ui); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.np-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.np-name { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.np-field { height: 40px; min-width: 0; padding: 0 10px; font-family: var(--ui); font-size: 14px; font-weight: 500; color: var(--ink); background: #ffffff; border: var(--bwc) solid var(--control); border-radius: var(--rs); }
.np-field::placeholder { color: var(--muted); opacity: 0.8; }
.np-group { display: flex; flex-direction: column; gap: 8px; }
.np-sub { font-size: 12px; line-height: 1.35; color: #3d2a23; }
:root[data-skin="clean"] .np-sub { color: var(--muted); }

/* Start from */
.np-starts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.np-start { display: flex; flex-direction: column; overflow: hidden; cursor: pointer; background: #ffffff; border: 2px solid #271813; box-shadow: 2px 2px 0 #271813; }
.np-start.is-on { box-shadow: 4px 4px 0 #271813; }
:root[data-skin="clean"] .np-start { background: #fffdf8; border: 1px solid #e6dccb; border-radius: 14px; box-shadow: 0 1px 2px rgba(28, 34, 48, 0.07); }
:root[data-skin="clean"] .np-start.is-on { border: 1.5px solid #9a3412; box-shadow: 0 0 0 3px rgba(154, 52, 18, 0.12); }
.np-thumb { height: 150px; flex: none; display: flex; justify-content: center; overflow: hidden; background: #ffe9e3; border-bottom: var(--bwc) solid #271813; }
:root[data-skin="clean"] .np-thumb { background: #f1e9d8; border-bottom-color: #e6dccb; }
.np-shot { display: block; height: max-content; margin-top: 16px; overflow: hidden; border-radius: 20px 20px 0 0; }
.np-blank { width: 141px; height: 300px; flex: none; display: flex; justify-content: center; margin-top: 16px; padding-top: 44px; color: var(--muted); background: #fbf8f1; border: 2px dashed #271813; border-radius: 20px 20px 0 0; }
:root[data-skin="clean"] .np-blank { border-color: #b9ab92; }
.np-opt { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px 12px; font-family: var(--ui); font-size: 14px; color: var(--ink); text-align: left; background: transparent; border: 0; border-radius: 0; cursor: pointer; }
.np-start.is-on .np-opt { background: #ff5f1f; }
:root[data-skin="clean"] .np-start.is-on .np-opt { background: rgba(154, 52, 18, 0.08); }
.np-opt:focus-visible { outline-offset: -4px; }
.np-dot { width: 16px; height: 16px; flex: none; margin-top: 2px; border-radius: 50%; background: #ffffff; border: 2px solid #271813; }
.np-dot.is-on { background: #271813; box-shadow: inset 0 0 0 3px #ffffff; }
:root[data-skin="clean"] .np-dot { border: 1.5px solid #b9ab92; }
:root[data-skin="clean"] .np-dot.is-on { background: #ffffff; border: 5px solid #9a3412; box-shadow: none; }

/* Device and theme tiles */
.np-devices { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.np-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.np-tile { min-width: 0; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 8px 14px; font-family: var(--ui); font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; background: #ffffff; border: 2px solid #271813; border-radius: 0; box-shadow: 2px 2px 0 #271813; }
.np-tile.is-on { background: #ff5f1f; box-shadow: 3px 3px 0 #271813; }
:root[data-skin="clean"] .np-tile { background: #fffdf8; border: 1px solid #e6dccb; border-radius: 12px; box-shadow: 0 1px 2px rgba(28, 34, 48, 0.07); }
:root[data-skin="clean"] .np-tile.is-on { background: rgba(154, 52, 18, 0.08); border: 1.5px solid #9a3412; box-shadow: 0 0 0 3px rgba(154, 52, 18, 0.12); }
.np-tile .i { flex: none; }
.np-tile .col { min-width: 0; gap: 1px; }
.np-theme { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 8px 10px; }
.np-swatches { height: 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid #271813; border-radius: 0; }
:root[data-skin="clean"] .np-swatches { border-color: #d3c6ad; border-radius: 7px; }
.np-theme .theme-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1; }
.np-theme .tn-sketch { font-size: 20px; }
.np-theme .tn-clean { font-size: 16px; }
.np-theme .tn-blueprint { font-size: 13px; }
.np-theme .tn-brutal { font-size: 15px; letter-spacing: 0.03em; }
.np-theme .tn-midnight { font-size: 16px; letter-spacing: -0.02em; }

.np-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.np-create { height: 44px; padding: 0 22px; }

/* Preview */
.np-preview { flex: 1 1 340px; max-width: 420px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 18px 22px; }
.np-preview > .eyebrow { align-self: flex-start; }
.np-preview-dev { display: flex; justify-content: center; max-width: 100%; }
.np-preview-dev .thumb { overflow: visible; }

/* Or open a project */
.np-recent { width: 100%; max-width: 1200px; display: flex; flex-direction: column; gap: 12px; }
.np-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.np-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.np-proj { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; color: var(--ink); cursor: pointer; }
.np-proj-thumb { width: 56px; height: 64px; flex: none; display: flex; justify-content: center; overflow: hidden; background: #ffe9e3; border: var(--bwc) solid #271813; border-radius: 0; }
:root[data-skin="clean"] .np-proj-thumb { background: #f1e9d8; border-color: #e6dccb; border-radius: 8px; }
.np-proj-shot { display: block; height: max-content; margin-top: 6px; overflow: hidden; border-radius: 7px 7px 0 0; }
.np-proj-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.np-proj-name { max-width: 100%; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ui); font-size: 15px; font-weight: 700; color: var(--ink); text-align: left; background: transparent; border: 0; cursor: pointer; }
.np-proj:hover .np-proj-name { text-decoration: underline; text-underline-offset: 3px; }
.np-proj > .i { flex: none; }