/* ==========================================================================
   fetacube — the writing area
   Same palette as the site. Thought out for the phone first.
   ========================================================================== */

body.admin {
  background: var(--paper);
  font-family: var(--sans);
  color: var(--ink);
  min-height: 100svh;
}

/* Each control declares its own type and colour. A generic reset here would
   win on specificity against the parts below (and against the site's .button). */

/* ----------------------------------------------------------------- sign in */

.signin {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.signin__box {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: clamp(28px, 6vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.signin__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.signin__brand img {
  width: 36px;
  height: 36px;
}

.signin__brand span {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.signin h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
}

.signin p {
  margin: -10px 0 0;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--dek);
}

.signin form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ------------------------------------------------------------------- forms */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.text-input {
  width: 100%;
  font-family: var(--sans);
  background: var(--card);
  border: 1px solid var(--tag-border);
  border-radius: 0;
  padding: 12px 14px;
  font-size: 16px; /* 16px keeps Safari on iOS from zooming in */
  color: var(--ink);
}

.text-input::placeholder {
  color: var(--dot);
}

/* For service fields, like the plate address under the picker. */
.text-input--small {
  font-family: var(--mono);
  font-size: 12px;
  padding: 8px 10px;
  color: var(--muted);
}

.text-input:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(168, 67, 28, 0.14);
}

.warning {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--clay);
  background: rgba(168, 67, 28, 0.08);
  border-left: 2px solid var(--clay);
  padding: 10px 12px;
  border-radius: 0;
}

/* ------------------------------------------------------- opening plate */

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

.field__note {
  margin: 0;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.plate-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--card);
}

.plate-picker--over {
  border-color: var(--rust);
}

.plate-option {
  position: relative;
  width: 92px;
  height: 69px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--paper) center / cover no-repeat;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  overflow: hidden;
}

/* The file name only shows over the photograph, under the pointer. */
.plate-option span {
  position: absolute;
  inset: auto 0 0;
  padding: 3px 5px;
  background: rgba(20, 19, 15, 0.6);
  color: var(--paper);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
}

.plate-option:hover span {
  opacity: 1;
}

.plate-option:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.plate-option[aria-pressed='true'] {
  border-color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  color: var(--ink);
}

.plate-option--text {
  background: transparent;
}

.plate-option[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* ---------------------------------------------------------------- fixed top */

.top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--margin);
  background: rgba(231, 226, 214, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.top__logo {
  display: flex;
  align-items: center;
  color: var(--ink);
  flex-shrink: 0;
}

.top__logo span {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.top__space {
  flex: 1;
}

.top__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quiet-link {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  padding: 8px 4px;
}

.quiet-link:hover {
  color: var(--clay);
}

/* ------------------------------------------------------------ list of posts */

.panel {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 56px) var(--margin) 96px;
}

.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ink);
}

.panel__head h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  letter-spacing: -0.025em;
}

.panel__count {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-light);
}

.list {
  display: flex;
  flex-direction: column;
}

.item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.item:hover {
  color: var(--clay);
}

.item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.item__title {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: inherit;
}

.item__meta {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted-light);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 3px 9px;
  white-space: nowrap;
}

.badge--published {
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  color: var(--olive);
}

.badge--draft {
  background: transparent;
  border: 1px dashed var(--dot);
  color: var(--muted);
}

.panel__empty {
  margin: 48px 0 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--dek);
  max-width: 44ch;
}

/* ------------------------------------------------------------------- editor */

.editor {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.editor__top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--margin);
  background: rgba(231, 226, 214, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.editor__status {
  font-size: 12px;
  color: var(--muted-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor__status[data-sujo='1'] {
  color: var(--clay);
}

.button-mini {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  border-radius: 0;
  padding: 9px 14px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

.button-mini:hover {
  background: var(--ink);
  color: var(--paper);
}

.button-mini--filled {
  background: var(--ink);
  color: var(--paper);
}

.button-mini--filled:hover {
  background: var(--rust);
}

.button-mini--danger {
  border-color: var(--clay);
  color: var(--clay);
}

.button-mini--danger:hover {
  background: var(--clay);
  color: var(--paper);
}

.button-mini[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* The Write / Preview switch */
.tabs {
  display: flex;
  gap: 2px;
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  border-radius: 0;
  padding: 2px;
}

.tabs button {
  border: 0;
  font-family: var(--sans);
  background: transparent;
  color: var(--shadow);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border-radius: 0;
  cursor: pointer;
}

.tabs button[aria-selected='true'] {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(26, 25, 23, 0.1);
}

/* Post details */
.details {
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.details > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px var(--margin);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.details > summary::-webkit-details-marker {
  display: none;
}

.details > summary::after {
  content: '+';
  margin-left: auto;
  font-size: 15px;
  color: var(--dot);
}

.details[open] > summary::after {
  content: '–';
}

.details__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  padding: 0 var(--margin) 22px;
}

/* The writing area */
.editor__stage {
  flex: 1;
  display: grid;
  min-height: 0;
}

.panel-write,
.panel-preview {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.panel-preview {
  border-left: 1px solid var(--line);
  background: var(--card);
  overflow-y: auto;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px) 120px;
}

.title-input {
  width: 100%;
  /* Grows with the text and never shrinks: with Details open, it is the panel
     that gets less room, not the title. */
  flex: none;
  border: 0;
  background: transparent;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  padding: clamp(24px, 4vw, 40px) var(--margin) 0;
  resize: none;
  overflow: hidden; /* grows in height from the JS, never gains a scrollbar */
}

.title-input::placeholder {
  color: var(--dot);
}

.title-input:focus {
  outline: none;
}

.body-input {
  flex: 1;
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.75;
  color: var(--body);
  padding: 18px var(--margin) 140px;
  resize: none;
  min-height: 50svh;
}

.body-input::placeholder {
  color: var(--dot);
}

.body-input:focus {
  outline: none;
}

/* Markdown toolbar, stuck to the bottom (above the keyboard on a phone) */
.toolbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 8px var(--margin) calc(8px + env(safe-area-inset-bottom));
  background: rgba(231, 226, 214, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  scrollbar-width: none;
}

.toolbar::-webkit-scrollbar {
  display: none;
}

.toolbar button {
  flex-shrink: 0;
  font-family: var(--sans);
  border: 1px solid var(--tag-border);
  background: var(--card);
  color: var(--shadow);
  border-radius: 0;
  min-width: 40px;
  height: 38px;
  padding: 0 11px;
  font-size: 13px;
  cursor: pointer;
}

.toolbar button:hover {
  border-color: var(--clay);
  color: var(--clay);
}

.toolbar button b {
  font-weight: 700;
}

.toolbar button i {
  font-family: var(--serif);
  font-style: italic;
}

.preview-empty {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--dot);
}

/* The editor's footer of actions */
.editor__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 16px var(--margin) calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.editor__bottom .space {
  flex: 1;
}

/* ----------------------------------------------------------------- widths */

/* Phone: one panel at a time, commanded by the tabs. */
@media (max-width: 899px) {
  .editor__stage {
    grid-template-columns: 1fr;
  }

  .editor__stage[data-preview='escrever'] .panel-preview {
    display: none;
  }

  .editor__stage[data-preview='ver'] .panel-write {
    display: none;
  }

  .panel-preview {
    border-left: 0;
  }

  .editor__top .editor__status {
    display: none;
  }
}

/* Wide screen: writing and preview side by side, no tabs. The editor fills the
   screen and each panel scrolls on its own — the footer stays within reach. */
@media (min-width: 900px) {
  .editor {
    height: 100svh;
    overflow: hidden;
  }

  .editor__stage {
    grid-template-columns: 1fr 1fr;
    min-height: 0;
  }

  .panel-write {
    overflow-y: auto;
  }

  .editor__stage .panel-preview,
  .editor__stage .panel-write {
    display: flex;
  }

  .tabs {
    display: none;
  }
}

@media (max-width: 560px) {
  .top__logo span {
    display: none;
  }

  .item {
    align-items: flex-start;
  }

  /* On a phone the thing stuck to the bottom is the markdown toolbar (it is the
     one that follows the keyboard). The actions go at the end of the document,
     without competing for room — to save quickly there is the button on top. */
  .editor__bottom {
    gap: 8px;
  }

  .editor__bottom .space {
    display: none;
  }

  .editor__bottom .button-mini {
    flex: 1 1 auto;
  }
}