#nav {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

#nav button[data-view="operations"]::before {
  content: "↗";
}

.guardian-operation-heading {
  margin-bottom: 16px;
}

.guardian-operation-heading > span {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .16em;
}

.guardian-operation-heading h2 {
  margin: 5px 0 4px;
  font-size: 21px;
  letter-spacing: -.04em;
}

.guardian-operation-heading p,
.guardian-operation-card p,
.guardian-absence-create p {
  line-height: 1.55;
}

/* The dark shell uses an important paragraph colour. These light request
   surfaces therefore need an explicit final text colour of their own. */
.guardian-operation-card p,
.guardian-absence-create p {
}

.guardian-operation-state,
.guardian-operation-unverified,
.guardian-operation-preview,
.guardian-operation-notice {
  margin: 12px 0;
  padding: 12px 14px;
  border-width: 1px;
  border-style: solid;
  border-radius: 10px;
  font-size: 12px;
}

.guardian-operation-notice {
  font-weight: 750;
}

.guardian-operation-state.error {
}

.guardian-absence-create {
  margin: 16px 0 22px;
  padding: 16px;
  border-width: 1px;
  border-style: solid;
  border-radius: 12px;
}

.guardian-absence-create h3,
.guardian-operation-list > h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.guardian-absence-create label,
.guardian-operation-card form label {
  display: block;
  margin: 12px 0;
  font-size: 12px;
  font-weight: 750;
}

.guardian-absence-create input,
.guardian-absence-create select,
.guardian-absence-create textarea,
.guardian-operation-card form select,
.guardian-operation-card form textarea {
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  padding: 11px 12px;
  border-width: 1px;
  border-style: solid;
  border-radius: 9px;
  font: inherit;
}

.guardian-absence-create textarea,
.guardian-operation-card form textarea {
  min-height: 92px;
  resize: vertical;
}

.guardian-absence-create > button[type="submit"],
.guardian-operation-card form > button[type="submit"] {
  width: 100%;
  min-height: 46px;
}

.guardian-operation-warning,
.guardian-operation-meaning {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
}

.guardian-absence-lead-warning{margin:12px 0 8px;padding:12px 13px;border-width:1px;border-style:solid;border-radius:9px;font-weight:750;line-height:1.55}.guardian-absence-lead-warning a{text-decoration:underline}

.guardian-operation-list {
  display: grid;
  gap: 12px;
}

.guardian-operation-card {
  padding: 15px;
  border-width: 1px;
  border-style: solid;
  border-radius: 12px;
}

.guardian-operation-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 !important;
  background: transparent !important;
}

.guardian-operation-card > header span {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 850;
}

.guardian-operation-card > header h3 {
  margin: 0;
  font-size: 15px;
}

.guardian-operation-card > header > b {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
}

.guardian-operation-card.status-completed {
}

.guardian-operation-card.status-completed .guardian-operation-meaning {
}

.guardian-operation-card.status-cancelled {
}

.guardian-operation-card.deep-linked {
  outline-width: 3px;
  outline-style: solid;
}

.guardian-operation-card dl {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.guardian-operation-card dl > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 8px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.guardian-operation-card dt {
  font-size: 11px;
}

.guardian-operation-card dd {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.guardian-operation-ack {
  font-size: 12px;
}

.guardian-operation-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 13px 0;
}

.guardian-operation-actions .danger {
}

.guardian-operation-card form {
  margin: 12px 0;
  padding: 13px;
  border-radius: 10px;
}

.guardian-operation-card details {
  margin-top: 10px;
  border-top-width: 1px;
  border-top-style: solid;
  padding-top: 10px;
}

.guardian-operation-card summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.guardian-operation-history {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.guardian-operation-history li {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 11px;
}

.guardian-operation-history span,
.guardian-operation-history em {
  font-style: normal;
}

.guardian-operation-history em {
  font-weight: 750;
}

.guardian-operation-result {
  min-height: 18px;
  margin-bottom: 0;
  font-size: 12px;
}

@media (max-width: 380px) {
  #nav button {
    font-size: 8px !important;
  }

  .guardian-operation-card,
  .guardian-absence-create {
    padding: 13px;
  }
}
.guardian-absence-period-choice{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}.guardian-absence-period-choice legend{font-weight:800;margin-bottom:8px}.guardian-absence-period-choice label{display:flex;align-items:center;gap:8px;border:1px solid #d8c79b;border-radius:12px;padding:12px;background:#fffaf0}.guardian-absence-date-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.guardian-absence-date-grid [hidden]{display:none}@media(max-width:560px){.guardian-absence-period-choice,.guardian-absence-date-grid{grid-template-columns:1fr}}