/*
  The inscribe page (/inscribe/ and /zh/inscribe/), design v3. Layout for this page only; the
  pieces (card, segmented control, fields, notes, inscription well, avatars, badges, meter,
  dotlist, learn rows, sheet, action bar) come from ui.css. Loaded by the
  <!-- style: /assets/page-inscribe.css --> marker in pages/inscribe.html.

  Phone: the title with its "paste to check" button, then the form, the preview, the feed and the
  closed explanations, with the primary action in the sticky bar above the tab bar. From 900px:
  the lead sentence shows; the form, feed and explanations sit on the left and the preview with
  its own action in a sticky side card on the right.
*/

/* ------------------------------------------------------------------ head */

.ins-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
/* On a phone the title is centred against the 36px paste button, which already lowers it by the
   page head's 4px nudge; without the nudge here its top matches every other page's title. */
.main > .ins-head {
  margin-top: 0;
}
.ins-head-t {
  min-width: 0;
}
/* The lead waits for the wide screen, so the form starts high on a phone. Its margin, and the
   title's, come from the shared page head in ui.css. */
.ins-lead {
  display: none;
  max-width: 60ch;
}
.ins-pastebtn {
  flex: none;
  gap: var(--s2);
}

/* ------------------------------------------------------------------ grid */

/* A phone: one column. From 900px the grid is the shared .grid-side.grid-side-wide (ui.css): the
   content, then the 400px preview card, with the same 32px gaps as the token page. */
@media (max-width: 899px) {
  .ins-grid {
    display: grid;
    gap: var(--s3);
    grid-template-columns: minmax(0, 1fr);
  }
  .ins-grid > .section {
    margin-top: var(--s5);
  }
}

.ins-cardtitle {
  font-size: var(--fs-lead);
  margin: 0 0 var(--s3);
}
.ins-cardhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.ins-cardhead > .ins-cardtitle {
  margin: 0;
}
.ins-status:empty {
  display: none;
}

/* ------------------------------------------------------------------ paste reader (in a sheet) */

.ins-pastelead {
  margin: 0 0 var(--s4);
  color: var(--text2);
  font-size: var(--fs-md);
  line-height: 1.55;
}
.ins-pastebody textarea.input {
  min-height: 112px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  padding-block: var(--s3);
}
.ins-pastebody .field-hint a {
  color: var(--lime);
  text-underline-offset: 3px;
}
.ins-pastesay:empty {
  display: none;
}
.ins-pastesay {
  margin-top: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-lg);
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.ins-pasteop > p > .badge {
  margin-right: var(--s2);
  vertical-align: 2px;
}
.ins-pastesay > .note:first-child,
.ins-pastesay > .why:first-child,
.ins-pastesay > .errline:first-child {
  margin-top: 0;
}
.ins-pasteop {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s2);
}
.ins-pasteop > p {
  margin: 0;
  line-height: 1.5;
  min-width: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ chooser */

.ins-seg {
  display: flex;
  width: 100%;
}
.ins-seg > button {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 var(--s1);
  font-size: var(--fs-md);
}
.ins-blurb {
  margin: var(--s2) 0 var(--s4);
  color: var(--text2);
  font-size: var(--fs-base);
  line-height: 1.5;
}

/* ------------------------------------------------------------------ fields */

.ins-fields > .field:last-child {
  margin-bottom: 0;
}
/* The hints and messages under a field are sentences, so they are body size (16px), not the
   shared 14px label size. The label matches them in size and leads by weight and colour. */
.ins-fields .field > label {
  font-size: var(--fs-base);
}
.ins-fields .field-hint,
.ins-pastebody .field-hint,
.ins-msg > .field-err,
.ins-msg > .why,
.ins-msg > .note,
.ins-pastesay .note,
.ins-pastesay .why,
.ins-pastesay .errline,
#i-notes .note,
#i-notes .why,
#i-notes .errline,
.ins-self {
  font-size: var(--fs-base);
  line-height: 1.5;
}
.ins-msg > .field-err svg,
.ins-msg > .why svg,
.ins-msg > .note svg,
.ins-pastesay p svg,
#i-notes p svg,
.ins-self svg {
  margin-top: 4px;
}
.ins-fields input.input.mono {
  font-size: var(--fs-sm);
}
.ins-fields textarea.input {
  min-height: 140px;
  padding-block: var(--s3);
  line-height: 1.55;
}
.ins-fields .field-hint:empty,
.ins-msg:empty {
  display: none;
}
.ins-msg > .field-err,
.ins-msg > .why,
.ins-msg > .note {
  margin: var(--s2) 0 0;
}
.ins-msg > .similar {
  margin-top: var(--s2);
}

/* The ticker input with the token's avatar at its start. */
.ins-tickwrap {
  position: relative;
}
.ins-tickav {
  position: absolute;
  top: 50%;
  left: 10px;
  display: grid;
  transform: translateY(-50%);
  pointer-events: none;
}
.ins-tickav:empty {
  display: none;
}
.ins-tickav > .avatar {
  animation: ins-pop 0.22s var(--ease);
}
.ins-tickwrap.has-av > .input {
  padding-left: 52px;
}
@keyframes ins-pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}

/* A mint's progress under its ticker. */
.ins-token {
  margin-top: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-lg);
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.ins-token[hidden] {
  display: none;
}
.ins-tokenfacts {
  /* margin-top only: .dotlist owns its margin-left */
  margin-top: var(--s2);
  margin-bottom: 0;
  color: var(--text2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

/* Quick picks: a chip per ticker with its avatar. */
.ins-quick {
  margin-top: var(--s3);
}
.ins-quick[hidden] {
  display: none;
}
.ins-quick .chip {
  padding-left: var(--s2);
  gap: var(--s2);
}
.ins-quick .ins-pickav {
  --av: 24px;
}
.ins-inline {
  margin-top: var(--s0);
  color: var(--lime);
}
.ins-inline:hover {
  color: var(--lime);
}

/* ------------------------------------------------------------------ preview */

.ins-does {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s3);
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.ins-does > span {
  min-width: 0;
}

.ins-code code {
  min-height: 1.6em;
  padding-bottom: var(--s1);
}
/* the exact text as code: the data: header, keys, string values, punctuation */
.ins-code code .tk-h {
  color: var(--teal);
}
.ins-code code .tk-k {
  color: var(--text2);
}
.ins-code code .tk-s {
  color: var(--lime);
}
.ins-code code .tk-p {
  color: var(--text3);
}
.ins-code code.is-draft,
.ins-code code.is-draft .tk-h,
.ins-code code.is-draft .tk-s {
  color: var(--text2);
}

/* the byte meter, as the well's status line */
.ins-meter {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s2) calc(-1 * 14px) 0;
  padding: var(--s3) 14px 0;
  border-top: 1px solid var(--hair);
}
.ins-meterlabel {
  flex: none;
  color: var(--text2);
  font-size: var(--fs-sm);
}
.ins-meterbar {
  flex: 1;
  min-width: 40px;
}
.ins-metertext {
  flex: none;
  color: var(--text2);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ins-meterbar.is-over .progress > i {
  background: var(--err);
  box-shadow: none;
}
#i-notes:empty {
  display: none;
}
.ins-self {
  margin-top: var(--s3);
}
.ins-sideaction {
  margin-top: var(--s4);
}

/* The reason beside a disabled primary action. A field's problem is a button that goes to the
   field, so it wraps like text rather than truncating like the small .textbtn it borrows from. */
.ins-why:empty {
  display: none;
}
.ins-why > .note,
.ins-why > .why,
.ins-why > .errline {
  margin-top: var(--s2);
}
.ins-reason {
  display: flex;
  align-items: flex-start;
  width: calc(100% + 2 * var(--s2));
  min-height: var(--hit);
  padding-block: 10px;
  margin-top: var(--s0);
  margin-bottom: -6px;
  white-space: normal;
  text-align: left;
  line-height: 1.45;
}
.ins-reason svg {
  margin-top: var(--s0);
}
.ins-reason.is-err {
  color: var(--err);
}
.ins-reason.is-why {
  color: var(--amber);
}
.ins-reason.is-err:hover,
.ins-reason.is-why:hover {
  background: var(--raised);
}
.actionbar .ins-reason {
  min-height: var(--hit);
  padding-block: var(--s2);
  margin-bottom: -8px;
}

/* ------------------------------------------------------------------ feed */

.ins-feed {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ins-frow {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 64px;
  padding: var(--s2) var(--s2) var(--s2) var(--s4);
  transition: background-color 0.15s;
}
.ins-frow + .ins-frow {
  border-top: 1px solid var(--hair);
}
@media (hover: hover) {
  .ins-frow.has-link:hover {
    background: rgba(255, 255, 255, 0.025);
  }
}
.ins-fic {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--text2);
}
.ins-fmain {
  flex: 1;
  min-width: 0;
}
.ins-ftitle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s2);
  margin: 0;
  line-height: 1.35;
}
.ins-flink {
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: -0.01em;
  text-decoration: none;
  overflow-wrap: anywhere;
}
/* the ticker link covers the row; the explorer button sits above it */
.ins-flink::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ins-flink:focus-visible {
  outline: none;
}
.ins-frow:has(.ins-flink:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--lime);
  border-radius: var(--r-lg);
}
.ins-fwhat {
  color: var(--text);
  font-size: var(--fs-md);
}
.ins-fbody {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text);
  font-size: var(--fs-md);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ins-fbody.mono {
  color: var(--text2);
  font-size: var(--fs-sm);
}
.ins-fmeta {
  margin-block: var(--s0) 0;
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.ins-fmeta .mono {
  font-size: var(--fs-sm);
}
.ins-fx {
  position: relative;
  z-index: 2;
  flex: none;
  color: var(--text2);
}
.ins-fx:hover {
  color: var(--text);
}
.ins-feedmore:empty {
  display: none;
}
.ins-feedmore {
  margin-top: var(--s3);
}
.ins-feedmore > .errline {
  margin: 0 0 var(--s2);
}

/* ------------------------------------------------------------------ explanations */

.ins-about {
  display: grid;
  gap: var(--s2);
}

@media (max-width: 374px) {
  .ins-seg > button {
    font-size: var(--fs-sm);
    padding: 0 var(--s0);
  }
}

/* ------------------------------------------------------------------ wide screens */

@media (min-width: 900px) {
  .ins-head {
    align-items: flex-end;
    margin-bottom: var(--s5);
  }
  .ins-lead {
    display: block;
  }
  /* Columns and gaps come from .grid-side.grid-side-wide; this places the preview beside the
     first three rows. */
  .ins-grid > :not(.ins-side) {
    grid-column: 1;
  }
  .ins-side {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: stretch;
  }
  .ins-preview {
    position: sticky;
    top: calc(var(--headh) + var(--s5));
  }
  .ins-grid > .section {
    margin-top: 0;
  }
  .ins-frow {
    padding-left: var(--s5);
  }
}

/* Confirm sheets opened from this page carry a full address as a value; keep the label beside it
   on one line and let the address do the wrapping. */
body[data-page="inscribe"] .sheet .kvrows dt {
  white-space: nowrap;
}
body[data-page="inscribe"] .sheet .kvrows dd .addr {
  overflow-wrap: anywhere;
}